/* ================================================================
   AVENISE — MOBILE OPTIMISATION STYLESHEET
   All rules are wrapped in mobile-only @media queries.
   Desktop (>= 768 px) is NEVER touched here.
   ================================================================ */

/* ── 1. MOBILE BOTTOM NAVIGATION BAR ─────────────────────────── */
.mobile-bottom-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 767.98px) {
  /* Bottom nav container — exact same glassmorphism tokens as .sidebar */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    z-index: 3000 !important;
    height: 60px;
    border-radius: 12px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    justify-content: space-around;
    align-items: stretch;
    overflow: hidden;
    transition: background-color var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
  }

  .mobile-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
    padding: 8px 4px 6px;
    position: relative;
    min-height: 44px;
  }

  .mobile-bottom-nav-item i {
    font-size: 13.75px;
    line-height: 1;
    width: 13.75px;
    height: 13.75px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
  }

  .mobile-bottom-nav-item.is-active {
    color: var(--primary);
  }

  .mobile-bottom-nav-item.is-active i {
    transform: translateY(-1px);
  }

  .mobile-bottom-nav-item.is-active::before {
    display: none;
  }

  .mobile-bottom-nav-item:active {
    transform: scale(0.93);
  }
}

/* ── 2. APP SHELL & FULL-WIDTH LAYOUT ENGINE ──────────────────── */
@media (max-width: 900px) {
  .app-shell {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 12px 12px 24px 12px !important;
    gap: 0 !important;
  }

  .main {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .content,
  [data-shell-content] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 100% !important;
    min-height: 0 !important;
  }

  /* Force all container & grid classes to span 100% width on mobile */
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .row,
  .main-content,
  .content-wrapper,
  .page-wrapper,
  .dashboard-wrapper,
  .home-shell,
  .settings-shell {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure all cards, panels, boxes, tables, forms stretch full-width */
  .card,
  .section-card,
  .glass-card,
  .tile,
  .panel,
  .box,
  .table-responsive,
  .page-header,
  .form-section,
  .widget-card,
  .custom-table-container,
  [class*="-shell"],
  [class*="-card"],
  [class*="-panel"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Force grid/flex columns to take 100% width on mobile viewports */
  .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 12px;
  }

  .row > [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* Content section cards — standard card padding on mobile */
  .modern-card,
  .section-card,
  .card,
  .glass-card,
  .attendance-card,
  .accounts-settings-content,
  .accounts-settings-main-col,
  .settings-content,
  .page-content-card,
  div[class*="-card"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  .attendance-card {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-radius: 16px !important;
  }

  /* Topbar spacing adjustments */
  .topbar {
    padding: 0 0 10px 0 !important;
    flex-wrap: nowrap !important;
    gap: 8px;
  }

  .topbar-start {
    gap: 8px !important;
    min-width: 0;
    flex: 1 1 0%;
  }

  /* Hamburger menu icon pill: match notification trigger dimensions */
  .mobile-menu,
  #mobileSidebarToggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .topbar-title {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .topbar-meta {
    gap: 8px !important;
    flex-shrink: 0;
  }

  /* Profile trigger: hide user name on mobile */
  .profile-name,
  .profile-caret,
  .profile-trigger .profile-caret,
  .profile-trigger .bi-chevron-down {
    display: none !important;
  }

  /* Hide topbar attendance dropdown pill on mobile */
  #topbar-attendance-dropdown {
    display: none !important;
  }

  /* Topbar dropdown containers: proper positioning relative to triggers */
  .topbar .dropdown {
    position: relative !important;
  }

  /* Prevent horizontal screen scroll on mobile */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Notification dropdown / shade: full screen width on mobile inside viewport boundary */
  .topbar .notification-dropdown,
  .notification-dropdown.dropdown-menu,
  .notification-dropdown.dropdown-menu-end,
  .notification-dropdown.show,
  [data-bs-popper].notification-dropdown {
    position: fixed !important;
    top: calc(56px + env(safe-area-inset-top, 0px) + 8px) !important;
    bottom: auto !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px !important;
    z-index: 2500 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    -webkit-transform: none !important;
    inset: calc(56px + env(safe-area-inset-top, 0px) + 8px) 12px auto 12px !important;
  }

  /* Profile menu: right-aligned compact dropdown */
  .topbar .profile-menu {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 12px !important;
    min-width: 180px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    z-index: 2500 !important;
  }
}


/* ── 3. TOPBAR / SIDEBAR OVERLAP FIXES (< 576 px) ────────────── */
@media (max-width: 575.98px) {
  .topbar-meta {
    gap: 6px !important;
  }

  .notification-trigger,
  .mobile-menu,
  #mobileSidebarToggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .notification-trigger .bi-bell,
  .notification-trigger i,
  #notificationDropdown i {
    font-size: 13px !important;
  }

  .profile-trigger {
    height: 36px !important;
    padding: 0 8px !important;
  }
}

/* ── 4. INTERNAL PAGE SIDEBAR REDESIGN (Mobile Only < 768px) ──── */
@media (max-width: 767.98px) {
  /* Convert internal page sidebar grid layout into vertical stack */
  .accounts-settings-row,
  .modern-card-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 1. COMPLETELY UN-HOUSE PILLS & REMOVE DARK BACKGROUND PATCH IN LIGHT/DARK MODE */
  .home-shell.accounts-settings-shell,
  .accounts-settings-shell,
  .accounts-settings-panel,
  .modern-card.accounts-settings-panel,
  .modern-card:has(.settings-sidebar),
  .section-card:has(.settings-sidebar),
  .glass-card:has(.settings-sidebar),
  .modern-card:has(.accounts-settings-sidebar-col),
  .section-card:has(.accounts-settings-sidebar-col),
  .accounts-settings-sidebar-col,
  .settings-sidebar-col,
  .col-md-2:has(.settings-sidebar),
  .col-md-3:has(.settings-sidebar),
  .col-md-2.accounts-settings-sidebar-col,
  .col-md-3.accounts-settings-sidebar-col,
  .col-md-3.border-end,
  .col-md-2.border-end {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 0 12px 0 !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
  }

  /* Strip all pseudo-elements (gradients, highlights, dark tints, vertical dividers) */
  .modern-card:has(.settings-sidebar)::before,
  .modern-card:has(.settings-sidebar)::after,
  .section-card:has(.settings-sidebar)::before,
  .section-card:has(.settings-sidebar)::after,
  .modern-card:has(.accounts-settings-sidebar-col)::before,
  .modern-card:has(.accounts-settings-sidebar-col)::after,
  .accounts-settings-panel::before,
  .accounts-settings-panel::after,
  .accounts-settings-shell::before,
  .accounts-settings-shell::after,
  .accounts-settings-row::before,
  .accounts-settings-row::after,
  .accounts-settings-sidebar-col::before,
  .accounts-settings-sidebar-col::after,
  .settings-sidebar::before,
  .settings-sidebar::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
  }

  /* 2. FLEX ROW WRAPPER: Back Button and Pills on the EXACT SAME HEIGHT & LEFT ALIGNMENT */
  .settings-sidebar,
  .accounts-settings-sidebar-col > .settings-sidebar,
  .accounts-settings-sidebar-col .settings-sidebar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* Hide sidebar title text on mobile */
  .settings-sidebar .d-flex.align-items-center > span,
  .settings-sidebar .accounts-sidebar-header > span,
  .accounts-sidebar-title,
  .accounts-settings-sidebar-col span {
    display: none !important;
  }

  /* Back Button header container: auto width flex child inline with pills */
  .settings-sidebar > .d-flex.align-items-center,
  .settings-sidebar .d-flex.align-items-center,
  .accounts-sidebar-header {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
    align-self: center !important;
  }

  /* Back Button icon pill: EXACT 38px x 38px matching pill height and 12px radius */
  .back-btn-pill,
  a.back-btn-pill,
  .settings-sidebar a[title*="Back"],
  .settings-sidebar a.d-inline-flex,
  .settings-sidebar .back-btn-pill,
  .accounts-sidebar-back,
  .accounts-settings-sidebar-col a[title*="Back"],
  .accounts-settings-sidebar-col a.d-inline-flex,
  .accounts-settings-sidebar-col .back-btn-pill {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: var(--glass-border) !important;
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter: var(--glass-blur) !important;
    box-shadow: var(--glass-shadow) !important;
    color: var(--text) !important;
    transition: background-color 220ms var(--ease-fluid), border-color 220ms var(--ease-fluid) !important;
    align-self: center !important;
  }

  /* Top Nav Pills Container: scrollable row at EXACT 38px height aligned with Back Button */
  .settings-sidebar > .d-flex.flex-column,
  .settings-sidebar > .d-flex.nav,
  .settings-sidebar > .d-flex,
  .settings-sidebar div[class*="flex-column"],
  .settings-sidebar-tabs,
  #addUserTabs,
  .page-nav-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent !important;
    border: none !important;
  }

  .settings-sidebar::-webkit-scrollbar,
  .settings-sidebar > .d-flex::-webkit-scrollbar,
  .settings-sidebar div[class*="flex-column"]::-webkit-scrollbar,
  #addUserTabs::-webkit-scrollbar {
    display: none !important;
  }

  /* 3. APP STANDARD GLASSMORPHISM PILL BUTTONS (38px height, 12px radius) */
  .settings-tab-btn,
  .page-tab-btn,
  .subnav-btn,
  [class*="-tab-btn"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: var(--btn-glass-border) !important;
    background: var(--btn-glass-bg) !important;
    -webkit-backdrop-filter: var(--btn-glass-blur) !important;
    backdrop-filter: var(--btn-glass-blur) !important;
    box-shadow: var(--btn-glass-shadow) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 220ms var(--ease-fluid) !important;
    cursor: pointer !important;
    margin: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  .settings-tab-btn:hover,
  .page-tab-btn:hover,
  .subnav-btn:hover,
  [class*="-tab-btn"]:hover {
    background: var(--btn-hover-glass-bg) !important;
    border: var(--btn-hover-glass-border) !important;
    box-shadow: var(--btn-hover-glass-shadow) !important;
    color: var(--btn-text) !important;
  }

  /* Active App Standard Glassmorphism Pill State */
  .settings-tab-btn.is-active,
  .settings-tab-btn.active,
  .page-tab-btn.is-active,
  .page-tab-btn.active,
  .subnav-btn.is-active,
  .subnav-btn.active,
  [class*="-tab-btn"].is-active,
  [class*="-tab-btn"].active {
    background: var(--btn-active-glass-bg) !important;
    border: var(--btn-active-glass-border) !important;
    box-shadow: var(--btn-active-glass-shadow) !important;
    backdrop-filter: var(--btn-glass-blur) !important;
    -webkit-backdrop-filter: var(--btn-glass-blur) !important;
    color: var(--primary-contrast, #ffffff) !important;
    font-weight: 700 !important;
  }

  .settings-tab-btn.is-active i,
  .settings-tab-btn.active i,
  .page-tab-btn.is-active i,
  .page-tab-btn.active i,
  .subnav-btn.is-active i,
  .subnav-btn.active i,
  [class*="-tab-btn"].is-active i,
  [class*="-tab-btn"].active i {
    color: #ffffff !important;
  }

  /* 4. CONTENT AREA CARD: Pristine glassmorphism container directly below un-housed pills */
  .accounts-settings-content-col,
  .settings-content-col,
  .col-md-10:has(~ .settings-sidebar),
  .col-md-9:has(~ .settings-sidebar),
  .col-md-9,
  .col-md-10 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    overflow-y: visible !important;
  }
}

/* ── 5. CHAT MODULE — mobile layout ───────────────────────────── */
@media (max-width: 767.98px) {
  .chat-layout-wrapper {
    height: calc(100dvh - 130px) !important;
    overflow: hidden;
  }

  /* The Django template already handles sidebar/window display:flex|none.
     We just ensure they fill the full width when shown. */
  .chat-col-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    border-right: none !important;
  }

  .chat-col-window {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }

  /* Profile panel: full-screen overlay on mobile */
  .chat-col-profile.is-visible {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    z-index: 1400 !important;
  }
}

/* Default: hide the back button on desktop (it's shown via d-md-none Bootstrap class) */
.chat-mobile-back-btn {
  display: none !important;
}


/* ── 6. METRICS GRID — mobile single column ───────────────────── */
@media (max-width: 767.98px) {
  .dashboard-metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .attendance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 400px) {
  .dashboard-metrics-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── 7. EMPLOYEE TABLE / ACTION-CHIP LIST — mobile card layout ── */
@media (max-width: 767.98px) {
  /* Hide the desktop column headers on mobile */
  .employee-table-header,
  .payslip-table-header,
  .tenant-table-header,
  .plan-table-header,
  .user-table-header,
  .recruitment-table-header,
  .performance-table-header,
  .table-header,
  [class*="-table-header"] {
    display: none !important;
  }

  /* Each row card becomes a flex column */
  .action-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 14px !important;
  }

  /* Name + avatar row fills width */
  .employee-name-cell {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Dept and role stack vertically */
  .employee-dept-cell,
  .employee-role-cell {
    width: auto !important;
  }

  /* Actions flush right at the bottom */
  .employee-actions-cell {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* Payslip check column: hide on mobile, not needed */
  .payslip-check-cell {
    display: none !important;
  }
}

/* ── 8. FORMS & INPUTS — touch-friendly sizing ─────────────────── */
@media (max-width: 767.98px) {
  /* Prevent iOS browser zoom on input focus (min 16px font-size) */
  input,
  select,
  textarea,
  .form-control,
  .form-select,
  .dropdown-select {
    font-size: 16px !important;
  }

  /* Taller touch targets */
  .btn,
  .form-control,
  .form-select,
  .dropdown-select {
    min-height: 44px !important;
  }

  .mobile-sidebar-attendance-widget .attendance-actions .btn {
    min-height: 32px !important;
    height: 32px !important;
  }

  #mbnMenu i {
    -webkit-text-stroke: 1.5px currentColor;
  }

  /* Form grids single-column on mobile */
  .config-grid {
    grid-template-columns: 1fr !important;
  }

  /* Full-width form buttons */
  .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .form-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Inline row becomes column */
  .inline-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .inline-row .btn {
    width: 100% !important;
  }

  /* Filter bars: wrap to two columns then stack */
  .accounts-filter-grid {
    grid-template-columns: 1fr !important;
  }

  /* Department select: full-width on mobile */
  select[name="department"],
  .custom-select-wrapper[data-select-name="department"],
  .custom-select-wrapper[data-select-name="department"] .dropdown-toggle {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── 9. ATTENDANCE CALENDAR GRID — 2-col on phone ────────────── */
@media (max-width: 767.98px) {
  .attendance-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

@media (max-width: 400px) {
  .attendance-calendar-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 10. RULES / DEPARTMENTS PAGE — selection grid ────────────── */
@media (max-width: 767.98px) {
  .selection-grid-uniform {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Rules page: allow pane content to scroll */
  .content {
    overflow-y: auto !important;
  }
}

@media (max-width: 400px) {
  .selection-grid-uniform {
    grid-template-columns: 1fr !important;
  }
}

/* ── 11. LEAVES PAGE ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Leave history balances: 2-col */
  .leave-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Leave drawer: full-screen on mobile */
  .leave-drawer-panel,
  .org-drawer-panel,
  .side-drawer-panel,
  .dept-drawer-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Approval card details: stack */
  .approval-card .row.g-3 .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── 12. PAYSLIPS & DOCUMENTS ──────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Payslip action grid */
  .payslip-table-header,
  div:has(> .payslip-table-header) + div .action-chip,
  div:has(> .payslip-table-header) ~ form .action-chip {
    grid-template-columns: 1fr !important;
  }
}

/* ── 13. POLICY DRAWER — full-screen on mobile ─────────────────── */
@media (max-width: 767.98px) {
  .policy-drawer-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ── 14. DIALOGS & MODALS — better mobile sizing ─────────────── */
@media (max-width: 767.98px) {
  .app-dialog {
    padding: 28px 18px 22px !important;
    gap: 20px !important;
    margin: 16px !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 24px !important;
  }

  .app-dialog-actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .app-dialog-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
  }

  /* Bootstrap modals: full-screen on mobile */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }

  .modal-content {
    border-radius: 20px !important;
  }

  /* Offcanvas: full-width on mobile */
  .offcanvas,
  .offcanvas-end,
  .offcanvas-start {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ── 15. TOAST NOTIFICATIONS ───────────────────────────────────── */
@media (max-width: 767.98px) {
  .toast-stack {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 24px) !important;
    transform: none !important;
    z-index: 3000 !important;
  }

  .toast-pill {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }

  .toast-pill-close {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  body.mobile-sidebar-open .toast-stack {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 3001 !important;
  }
}

/* ── 16. TENANTS / SUPERADMIN PAGES ────────────────────────────── */
@media (max-width: 767.98px) {
  .admin-card-grid {
    grid-template-columns: 1fr !important;
  }

  .tenant-table-header,
  .plan-table-header {
    display: none !important;
  }
}

/* ── 17. PERFORMANCE HUB ────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Performance metrics grid */
  .performance-metrics-grid,
  .kra-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 18. ORG CHART — touch pan hint ────────────────────────────── */
@media (max-width: 767.98px) {
  /* Allow the chart container to be touch-scrolled */
  .org-chart-container,
  [class*="org-chart"] {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    cursor: grab !important;
    touch-action: pan-x pan-y !important;
  }

  /* Touch hint banner */
  .org-chart-mobile-hint {
    display: flex !important;
  }
}

.org-chart-mobile-hint {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: var(--glass-border);
  margin-bottom: 10px;
  width: fit-content;
}

/* ── 19. RECRUITMENT — mobile cards ────────────────────────────── */
@media (max-width: 767.98px) {
  .recruitment-table-header {
    display: none !important;
  }
}

/* ── 20. MISCELLANEOUS / HELPER UTILITIES ───────────────────────── */
@media (max-width: 767.98px) {
  /* Stack flex rows that shouldn't wrap desktop */
  .attendance-head {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Card-title actions align to start on mobile */
  .accounts-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }


  /* Allow horizontal scroll on complex tables */
  .table-responsive-mobile {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Row filter controls: wrap on mobile */
  .d-flex.align-items-center.flex-wrap {
    flex-wrap: wrap !important;
  }

  /* Remove extra margin-top caused by topbar position on mobile */
  .content > * {
    margin-top: 0 !important;
  }

  /* Ensure long words / emails break correctly */
  .employee-card-email,
  .text-truncate {
    word-break: break-all !important;
  }
}

/* ── 21. SIDEBAR DRAWER — mobile bottom-up sheet ── */
@media (max-width: 900px) {
  .app-shell {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .sidebar {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(calc(100% + 84px + env(safe-area-inset-bottom, 0px) + 12px)) !important;
    -webkit-transform: translateY(calc(100% + 84px + env(safe-area-inset-bottom, 0px) + 12px)) !important;
    transition: transform 460ms var(--ease-fluid), -webkit-transform 460ms var(--ease-fluid) !important;
    z-index: 2050 !important;
  }

  body.sidebar-collapsed .sidebar {
    transform: translateY(calc(100% + 84px + env(safe-area-inset-bottom, 0px) + 12px)) !important;
    -webkit-transform: translateY(calc(100% + 84px + env(safe-area-inset-bottom, 0px) + 12px)) !important;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
  }

  body.mobile-sidebar-open .mobile-scrim {
    display: none !important;
  }
}

/* ── 22. MAIN NAVIGATION SIDEBAR DRAWER (Mobile Glass Sheet — slides up from bottom) ── */
@media (max-width: 900px) {
  .sidebar,
  body.sidebar-collapsed .sidebar {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    flex-basis: calc(100vw - 24px) !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 12px !important;
    /* Start fully below the viewport, just above the bottom bar */
    transform: translateY(calc(100% + 84px + env(safe-area-inset-bottom, 0px) + 12px)) !important;
    -webkit-transform: translateY(calc(100% + 84px + env(safe-area-inset-bottom, 0px) + 12px)) !important;
    transition: transform 460ms var(--ease-fluid) !important;
    z-index: 2050 !important;
    box-sizing: border-box !important;
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
  }

  body.mobile-sidebar-open .sidebar,
  body.mobile-sidebar-open.sidebar-collapsed .sidebar {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
  }

  .mobile-scrim {
    z-index: 2040 !important;
  }

  body.mobile-sidebar-open .mobile-scrim {
    display: none !important;
  }

  /* Sidebar panel layout inside floating mobile drawer */
  .sidebar-panel,
  body.sidebar-collapsed .sidebar-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .brand-row,
  body.sidebar-collapsed .brand-row {
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-height: 48px !important;
    justify-content: space-between !important;
  }

  .mobile-theme-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 -10px 0 0 !important;
    border: var(--glass-border) !important;
    border-radius: 12px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    box-shadow: var(--glass-shadow) !important;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text);
    font-size: 16px;
    padding: 0;
    transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  .mobile-theme-toggle:hover {
    background: var(--hover-glass-bg) !important;
    border: var(--hover-glass-border) !important;
    box-shadow: var(--hover-glass-shadow) !important;
    transform: translateY(-1px);
  }
  .mobile-theme-toggle:active {
    background: var(--active-glass-bg) !important;
    border: var(--active-glass-border) !important;
    box-shadow: var(--active-glass-shadow) !important;
  }

  #dropdownThemeToggle {
    display: none !important;
  }

  .brand-lockup,
  body.sidebar-collapsed .brand-lockup {
    width: auto !important;
    margin-inline: 0 !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .brand-copy,
  body.sidebar-collapsed .brand-copy {
    display: inline-flex !important;
    max-width: 200px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .nav-item,
  body.sidebar-collapsed .nav-item {
    width: 100% !important;
    margin-inline: 0 !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    gap: 12px !important;
  }

  .nav-label,
  body.sidebar-collapsed .nav-label {
    display: inline-block !important;
    max-width: 240px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Sidebar Categories: Render larger text size with natural text casing */
  .sidebar-category-toggle,
  body.sidebar-collapsed .sidebar-category-toggle,
  body.mobile-sidebar-open .sidebar-category-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 12px 6px 12px !important;
    margin-top: 8px !important;
    margin-bottom: 2px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    color: #1a1a1a !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
  }

  .sidebar-category-toggle span,
  .sidebar-category-toggle .caret,
  body.sidebar-collapsed .sidebar-category-toggle span,
  body.sidebar-collapsed .sidebar-category-toggle .caret,
  body.mobile-sidebar-open .sidebar-category-toggle span,
  body.mobile-sidebar-open .sidebar-category-toggle .caret {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html[data-theme="dark"] .sidebar-category-toggle,
  html[data-theme="dark"] body.sidebar-collapsed .sidebar-category-toggle,
  html[data-theme="dark"] body.mobile-sidebar-open .sidebar-category-toggle {
    color: #fff !important;
  }

  /* Sticky 2-column footer tools in mobile drawer without fill or dividing line */
  .sidebar-tools,
  body.sidebar-collapsed .sidebar-tools {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10 !important;
    border-top: none !important;
    border: none !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    justify-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tool-btn,
  body.sidebar-collapsed .tool-btn {
    width: 100% !important;
    height: 40px !important;
    padding: 0 12px !important;
    justify-content: center !important;
  }

  #sidebarToggle,
  #themeToggle {
    display: none !important;
  }

  .sidebar-tools,
  body.sidebar-collapsed .sidebar-tools {
    grid-template-columns: 1fr !important;
  }

  .mobile-sidebar-attendance-widget {
    order: 2 !important;
    margin-bottom: 12px !important;
  }

  .sidebar-footer {
    order: 1 !important;
  }
}


/* ── 22. PREVENT HOVER TRANSFORMS ON TOUCH DEVICES ─────────────── */
@media (hover: none) and (pointer: coarse) {
  .nav-item:hover,
  .selection-card-uniform:hover,
  .metric-box:hover,
  .approval-card:hover,
  .calendar-day-card:hover,
  .notification-item:hover {
    transform: none !important;
  }
}

/* ── 23. PUBLIC SHELL (login, registration) ─────────────────────── */
@media (max-width: 767.98px) {
  .public-shell {
    padding: 8px !important;
    min-height: auto !important;   /* allow scrolling */
    overflow-y: auto !important;  /* enable scroll */
  }
}


/* ── 24. SETTINGS CONTENT PANES — allow scrolling on mobile ──── */
@media (max-width: 767.98px) {
  .accounts-settings-content-col {
    overflow-y: auto !important;
    max-height: calc(100dvh - 200px) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Settings tab pane: remove fixed height constraint on mobile */
  .settings-tab-pane,
  .tab-content-pane {
    height: auto !important;
    overflow: visible !important;
  }

  /* Ensure the card panel stretches on mobile with transparent background */
  .accounts-settings-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: auto !important;
  }

  .accounts-settings-row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Content section main: allow vertical scroll on mobile */
  .content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Prevent fixed height on home-shell constraining mobile scroll */
  .home-shell {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
  }
}

/* ── 25. ATTENDANCE CALENDAR — mobile touch card feedback ──────── */
@media (max-width: 767.98px) {
  .calendar-day-card.is-selectable:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }

  /* Day card: slightly taller for better touch target */
  .calendar-day-card {
    min-height: 80px !important;
  }
}

/* ── 26. MISC TOUCH IMPROVEMENTS ────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Prevent text selection on tap for interactive elements */
  .nav-item,
  .mobile-bottom-nav-item,
  .settings-tab-btn,
  .btn {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  /* Ensure dropdowns don't clip horizontally */
  .dropdown-menu {
    max-width: calc(100vw - 24px) !important;
  }

  /* Fix position sticky for headers inside overflow scroll containers */
  .table-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}