/**
 * SalonMay Chat - Utility Classes & Responsive Framework
 * Includes decimal spacing (.5 utilities), shadows, badge helpers,
 * and responsive layout rules for mobile/tablet.
 */

/* ==========================================================================
   1. DECIMAL PADDING UTILITIES (.5 = 2px, 1.5 = 6px, 2.5 = 10px, 3.5 = 14px, 4.5 = 36px)
   ========================================================================== */
.p-0\.5,
.p-0-5,
.p-0\.5px {
  padding: 0.125rem !important;
}
.p-1\.5 {
  padding: 0.375rem !important;
}
.p-2\.5 {
  padding: 0.625rem !important;
}
.p-3\.5 {
  padding: 0.875rem !important;
}
.p-4\.5 {
  padding: 2.25rem !important;
}

/* Padding X */
.px-0\.5 {
  padding-left: 0.125rem !important;
  padding-right: 0.125rem !important;
}
.px-1\.5 {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
}
.px-2\.5 {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}
.px-3\.5 {
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important;
}
.px-4\.5 {
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
}

/* Padding Y */
.py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}
.py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}
.py-3\.5 {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}
.py-4\.5 {
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

/* Padding Top & Bottom */
.pt-0\.5 {
  padding-top: 0.125rem !important;
}
.pt-1\.5 {
  padding-top: 0.375rem !important;
}
.pt-2\.5 {
  padding-top: 0.625rem !important;
}
.pt-3\.5 {
  padding-top: 0.875rem !important;
}
.pb-0\.5 {
  padding-bottom: 0.125rem !important;
}
.pb-1\.5 {
  padding-bottom: 0.375rem !important;
}
.pb-2\.5 {
  padding-bottom: 0.625rem !important;
}
.pb-3\.5 {
  padding-bottom: 0.875rem !important;
}

/* Padding Start & End */
.ps-0\.5 {
  padding-left: 0.125rem !important;
}
.ps-1\.5 {
  padding-left: 0.375rem !important;
}
.ps-2\.5 {
  padding-left: 0.625rem !important;
}
.ps-3\.5 {
  padding-left: 0.875rem !important;
}
.pe-0\.5 {
  padding-right: 0.125rem !important;
}
.pe-1\.5 {
  padding-right: 0.375rem !important;
}
.pe-2\.5 {
  padding-right: 0.625rem !important;
}
.pe-3\.5 {
  padding-right: 0.875rem !important;
}

/* ==========================================================================
   2. DECIMAL MARGIN UTILITIES
   ========================================================================== */
.m-0\.5 {
  margin: 0.125rem !important;
}
.m-1\.5 {
  margin: 0.375rem !important;
}
.m-2\.5 {
  margin: 0.625rem !important;
}
.m-3\.5 {
  margin: 0.875rem !important;
}

.mx-0\.5 {
  margin-left: 0.125rem !important;
  margin-right: 0.125rem !important;
}
.mx-1\.5 {
  margin-left: 0.375rem !important;
  margin-right: 0.375rem !important;
}
.mx-2\.5 {
  margin-left: 0.625rem !important;
  margin-right: 0.625rem !important;
}
.mx-3\.5 {
  margin-left: 0.875rem !important;
  margin-right: 0.875rem !important;
}

.my-0\.5 {
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
}
.my-1\.5 {
  margin-top: 0.375rem !important;
  margin-bottom: 0.375rem !important;
}
.my-2\.5 {
  margin-top: 0.625rem !important;
  margin-bottom: 0.625rem !important;
}
.my-3\.5 {
  margin-top: 0.875rem !important;
  margin-bottom: 0.875rem !important;
}

.mt-0\.5 {
  margin-top: 0.125rem !important;
}
.mt-1\.5 {
  margin-top: 0.375rem !important;
}
.mt-2\.5 {
  margin-top: 0.625rem !important;
}
.mt-3\.5 {
  margin-top: 0.875rem !important;
}

.mb-0\.5 {
  margin-bottom: 0.125rem !important;
}
.mb-1\.5 {
  margin-bottom: 0.375rem !important;
}
.mb-2\.5 {
  margin-bottom: 0.625rem !important;
}
.mb-3\.5 {
  margin-bottom: 0.875rem !important;
}

.ms-0\.5 {
  margin-left: 0.125rem !important;
}
.ms-1\.5 {
  margin-left: 0.375rem !important;
}
.ms-2\.5 {
  margin-left: 0.625rem !important;
}
.ms-3\.5 {
  margin-left: 0.875rem !important;
}

.me-0\.5 {
  margin-right: 0.125rem !important;
}
.me-1\.5 {
  margin-right: 0.375rem !important;
}
.me-2\.5 {
  margin-right: 0.625rem !important;
}
.me-3\.5 {
  margin-right: 0.875rem !important;
}

/* ==========================================================================
   3. DECIMAL GAP UTILITIES (Flex & Grid)
   ========================================================================== */
.gap-0\.5 {
  gap: 0.125rem !important;
}
.gap-1\.5 {
  gap: 0.375rem !important;
}
.gap-2\.5 {
  gap: 0.625rem !important;
}
.gap-3\.5 {
  gap: 0.875rem !important;
}
.gap-4\.5 {
  gap: 2.25rem !important;
}

.row-gap-0\.5 {
  row-gap: 0.125rem !important;
}
.row-gap-1\.5 {
  row-gap: 0.375rem !important;
}
.row-gap-2\.5 {
  row-gap: 0.625rem !important;
}
.row-gap-3\.5 {
  row-gap: 0.875rem !important;
}

.column-gap-0\.5 {
  column-gap: 0.125rem !important;
}
.column-gap-1\.5 {
  column-gap: 0.375rem !important;
}
.column-gap-2\.5 {
  column-gap: 0.625rem !important;
}
.column-gap-3\.5 {
  column-gap: 0.875rem !important;
}

/* ==========================================================================
   4. SHADOW & RADIUS HELPERS
   ========================================================================== */
.shadow-xs {
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05) !important;
}

.shadow-soft {
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.04),
    0 8px 10px -6px rgba(0, 0, 0, 0.03) !important;
}

.rounded-1\.5 {
  border-radius: 0.375rem !important;
}
.rounded-2\.5 {
  border-radius: 0.625rem !important;
}
.rounded-3\.5 {
  border-radius: 0.875rem !important;
}

/* Glassmorphism helpers */
.bg-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================================
   5. RESPONSIVE DASHBOARD LAYOUT (Screens < 992px)
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Main Content adjustments */
  .dashboard-wrapper .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-top: 76px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Fixed Header Nav */
  .dashboard-wrapper .app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    z-index: 1020 !important;
    height: 60px !important;
    overflow-x: hidden !important;
  }

  /* App Sidebar as Off-Canvas Drawer */
  .dashboard-wrapper .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    z-index: 1050 !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none;
  }

  /* When Sidebar is Opened on Mobile */
  .dashboard-wrapper.sidebar-open .app-sidebar {
    transform: translateX(0) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
  }

  /* Dimmed Backdrop when Mobile Sidebar is Open */
  .sidebar-overlay-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
  }

  .dashboard-wrapper.sidebar-open .sidebar-overlay-backdrop {
    display: block;
    opacity: 1;
  }

  /* Hide desktop collapse floating toggle button on mobile */
  .app-sidebar .btn-sidebar-toggle {
    display: none !important;
  }

  /* Two-pane layouts stack cleanly on tablet/mobile */
  .convo-list-pane {
    min-height: 280px !important;
    max-height: 340px !important;
  }
  .convo-thread-pane {
    min-height: 480px !important;
    max-height: 600px !important;
  }
  .convo-list-scroll {
    max-height: 240px !important;
  }
}

.convo-list-pane {
  min-height: 680px;
  max-height: 800px;
}
.convo-thread-pane {
  min-height: 680px;
  max-height: 800px;
}

@media (max-width: 575.98px) {
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ==========================================================================
   6. RESPONSIVE MODAL & DIALOG POLISH
   ========================================================================== */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  .modal-content {
    border-radius: 1rem !important;
  }

  .modal-body {
    padding: 1rem !important;
  }

  .modal-header,
  .modal-footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Button stacking on tiny screens if needed */
  .modal-footer .btn {
    flex: 1 1 auto;
  }
  .dashboard-wrapper .main-content {
    padding-top: 0px !important;
  }
}

/* ==========================================================================
   7. LIVE PREVIEW RESPONSIVENESS & WIDGET WRAPPERS
   ========================================================================== */
.preview-backdrop-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.preview-widget-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 767.98px) {
  .preview-backdrop-wrapper {
    min-height: 460px !important;
    height: auto !important;
    padding: 0.75rem !important;
  }

  .browser-mockup-wrapper {
    min-height: 420px !important;
  }

  #mock-live-widget {
    max-width: calc(100% - 24px) !important;
    right: 12px !important;
    bottom: 12px !important;
  }
}