/* =========================================================
   DAYM OMRANIA - MOBILE RESPONSIVE LAYER
   Loaded LAST so it can safely override legacy shell locks.
   Desktop styles are intentionally untouched.
========================================================= */

@media (max-width: 900px) {
    :root { --daym-mobile-sidebar: min(84vw, 310px); }

    html, body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
    }

    body { min-height: 100vh !important; }

    /* ---------- Common shell geometry ---------- */
    .app,
    .admin-layout,
    .admin-shell,
    .shell,
    .dashboard-wrapper,
    .portal-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        position: relative !important;
        overflow: visible !important;
    }

    .main,
    main.main,
    .main-content,
    .employee-main,
    .admin-main,
    .admin-layout > .admin-main,
    .shell > .main,
    .app > .main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ---------- Every known sidebar becomes a drawer ---------- */
    .sidebar,
    aside.sidebar,
    .admin-sidebar,
    aside.admin-sidebar,
    .assets-admin-sidebar,
    .side,
    aside.side,
    .employee-sidebar,
    .daym-employee-sidebar,
    .daym-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: var(--daym-mobile-sidebar) !important;
        min-width: var(--daym-mobile-sidebar) !important;
        max-width: var(--daym-mobile-sidebar) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        z-index: 30000 !important;
        transform: translate3d(-105%, 0, 0) !important;
        transition: transform .24s ease, box-shadow .24s ease !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 20px 0 60px rgba(20, 28, 45, .18) !important;
    }

    body.daym-mobile-nav-open .sidebar,
    body.daym-mobile-nav-open aside.sidebar,
    body.daym-mobile-nav-open .admin-sidebar,
    body.daym-mobile-nav-open aside.admin-sidebar,
    body.daym-mobile-nav-open .assets-admin-sidebar,
    body.daym-mobile-nav-open .side,
    body.daym-mobile-nav-open aside.side,
    body.sidebar-open .admin-sidebar,
    body.sidebar-open aside.admin-sidebar,
    body.sidebar-open .sidebar,
    body.sidebar-open aside.sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    /* ---------- Overlay ---------- */
    .sidebar-overlay,
    .daym-mobile-overlay {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        background: rgba(21, 28, 41, .42) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
        z-index: 29990 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .2s ease !important;
    }

    body.daym-mobile-nav-open .sidebar-overlay,
    body.daym-mobile-nav-open .daym-mobile-overlay,
    body.sidebar-open .sidebar-overlay {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* ---------- Mobile menu button ---------- */
    .daym-mobile-menu {
        position: fixed !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border: 1px solid #e4dccf !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.96) !important;
        color: #4e5f78 !important;
        display: grid !important;
        place-items: center !important;
        box-shadow: 0 10px 28px rgba(35, 31, 24, .12) !important;
        z-index: 29980 !important;
        cursor: pointer !important;
        font-size: 18px !important;
    }

    .daym-mobile-menu:active { transform: scale(.97); }

    /* Existing page toggle buttons remain the single visible control. */
    .menu-btn,
    .sidebar-toggle,
    .mobile-menu-btn,
    [data-sidebar-toggle] {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* If the page already owns its toggle, keep our injected control hidden. */
    body.daym-has-native-toggle .daym-mobile-menu { display: none !important; }

    /* ---------- Header / toolbar ---------- */
    .topbar,
    .top,
    .admin-header,
    header.topbar,
    header.admin-header {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 72px !important;
        max-height: none !important;
        padding: 14px 16px !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        position: relative !important;
    }

    .topbar-left,
    .topbar-actions,
    .admin-header-right,
    .top-right,
    .top-profile {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .topbar-left,
    .topbar-actions,
    .admin-header-right,
    .top-right {
        flex-wrap: wrap !important;
    }

    .search-box,
    .search,
    .search-box input,
    .admin-search,
    .admin-search input,
    .topbar .search,
    .topbar .search-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }

    .topbar .search input,
    .topbar .search-box input,
    .admin-search input {
        line-height: normal !important;
    }

    .admin-report-btn,
    .generate-report,
    .report-btn {
        max-width: 100% !important;
    }

    /* ---------- Page content ---------- */
    .content,
    .admin-content,
    .page,
    .employee-content,
    .main-content,
    .admin-main > .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    .heading,
    .page-heading,
    .module-heading {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .heading h1,
    .page-heading h1,
    .module-title {
        font-size: clamp(28px, 8vw, 42px) !important;
        line-height: 1.02 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* ---------- Grids collapse cleanly ---------- */
    .metric-grid,
    .stats-grid,
    .cards-grid,
    .dashboard-grid,
    .form-grid,
    .profile-layout,
    .horizontal-layout,
    .ticket-layout,
    .details-layout,
    .assets-grid,
    .employee-grid,
    .module-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .field.full { grid-column: auto !important; }

    /* ---------- Cards ---------- */
    .module-card,
    .card,
    .panel,
    .hero-card,
    .summary-card,
    .stat-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .module-card-head,
    .card-head,
    .section-head {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    .module-actions,
    .actions,
    .action-row,
    .button-row {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .module-actions .btn,
    .action-row .btn,
    .button-row button,
    .button-row a {
        flex: 1 1 160px !important;
        max-width: 100% !important;
    }

    /* ---------- Tables: never force the viewport wide ---------- */
    .table-wrap,
    .table-responsive,
    .data-table-wrap,
    .responsive-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .data-table,
    table {
        max-width: none !important;
        min-width: 680px !important;
    }

    /* ---------- Forms ---------- */
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        font-size: 16px !important;
    }

    .field input,
    .field select,
    .field textarea,
    .form-control {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Avoid iOS zoom on controls. */
    input, select, textarea { font-size: 16px !important; }

    /* ---------- Employee profile ---------- */
    .profile-layout,
    .profile-card,
    .profile-main,
    .profile-side,
    .profile-panel,
    .profile-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .profile-photo,
    .profile-avatar,
    .profile-image {
        max-width: 180px !important;
        height: auto !important;
    }

    /* ---------- Ticket pages ---------- */
    .horizontal-layout,
    .ticket-details-layout,
    .ticket-detail-layout,
    .ticket-page-grid {
        display: block !important;
    }

    .details-column,
    .main-column,
    .ticket-main,
    .ticket-side {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ---------- Employee + Admin live chat ---------- */
    .chat-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
    }

    .people {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 250px !important;
        overflow: hidden !important;
    }

    .people-list {
        max-height: 180px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .conversation,
    .chat-shell {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: calc(100dvh - 180px) !important;
        max-height: calc(100dvh - 180px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .messages,
    .admin-messages {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .composer,
    .admin-composer {
        flex: 0 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
    }

    .composer-row,
    .admin-composer {
        flex-wrap: wrap !important;
    }

    .message-input,
    .admin-composer textarea,
    .composer textarea {
        flex: 1 1 calc(100% - 110px) !important;
        min-width: 0 !important;
    }

    .send-btn,
    .admin-composer > button[type="submit"] {
        flex: 0 0 88px !important;
    }

    .emoji-panel {
        max-width: calc(100vw - 32px) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
    }

    /* ---------- Edit Asset ---------- */
    .admin-edit-main,
    .admin-content .asset-edit-layout,
    .asset-edit-layout,
    .asset-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }

    /* ---------- Navigation links / touch targets ---------- */
    .nav-link,
    .admin-nav-link,
    .sidebar-link,
    .employee-nav-link,
    .daym-sidebar-link {
        min-height: 44px !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
        transform: none !important;
    }

    /* ---------- Do not let long words expand the viewport ---------- */
    h1,h2,h3,h4,h5,h6,p,span,a,td,th,label,small,strong {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 600px) {
    .content,
    .admin-content,
    .page,
    .employee-content,
    .main-content {
        padding: 12px !important;
    }

    .admin-header,
    .topbar,
    .top {
        padding: 12px !important;
    }

    .top-profile > div:not(.avatar),
    .admin-head-user > div:not(.admin-head-avatar) {
        display: none !important;
    }

    .metric-grid { gap: 10px !important; }
    .module-card { border-radius: 16px !important; }
    .module-card-head { padding: 16px !important; }
    .form-grid { padding: 16px !important; }

    .conversation,
    .chat-shell {
        height: calc(100dvh - 165px) !important;
        max-height: calc(100dvh - 165px) !important;
    }

    .people { max-height: 210px !important; }
    .people-list { max-height: 145px !important; }
}

/* =========================================================
   HIGH-SPECIFICITY OVERRIDES
   These neutralize the legacy shell-lock rules that otherwise
   keep a 242/258px desktop sidebar column on phones.
========================================================= */
@media (max-width: 900px) {
    html body.employee-portal-page .app,
    html body.admin-portal-page .admin-layout,
    html body.admin-portal-page .admin-shell,
    html body.employee-portal-page .app > .main,
    html body.admin-portal-page .admin-layout > .admin-main,
    html body.admin-portal-page .admin-shell > .admin-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    html body.employee-portal-page .sidebar,
    html body.employee-portal-page aside.sidebar,
    html body.admin-portal-page .admin-sidebar,
    html body.admin-portal-page aside.admin-sidebar,
    html body.admin-portal-page .assets-admin-sidebar {
        width: var(--daym-mobile-sidebar) !important;
        min-width: var(--daym-mobile-sidebar) !important;
        max-width: var(--daym-mobile-sidebar) !important;
        transform: translate3d(-105%,0,0) !important;
        left: 0 !important;
        right: auto !important;
        display: flex !important;
    }

    html body.employee-portal-page.daym-mobile-nav-open .sidebar,
    html body.employee-portal-page.daym-mobile-nav-open aside.sidebar,
    html body.admin-portal-page.daym-mobile-nav-open .admin-sidebar,
    html body.admin-portal-page.daym-mobile-nav-open aside.admin-sidebar,
    html body.admin-portal-page.daym-mobile-nav-open .assets-admin-sidebar,
    html body.employee-portal-page.sidebar-open .sidebar,
    html body.admin-portal-page.sidebar-open .admin-sidebar {
        transform: translate3d(0,0,0) !important;
    }

    html body.employee-portal-page .main,
    html body.employee-portal-page main.main,
    html body.employee-portal-page .employee-main,
    html body.employee-portal-page .main-content,
    html body.admin-portal-page .admin-main,
    html body.admin-portal-page main.admin-main,
    html body.admin-portal-page .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html body.employee-portal-page .topbar,
    html body.employee-portal-page header.topbar,
    html body.admin-portal-page .topbar,
    html body.admin-portal-page header.topbar,
    html body.admin-portal-page .admin-header,
    html body.admin-portal-page header.admin-header {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body.employee-portal-page .topbar .search,
    html body.employee-portal-page .topbar .search-box,
    html body.employee-portal-page .topbar form.search,
    html body.admin-portal-page .topbar .search,
    html body.admin-portal-page .topbar .search-box,
    html body.admin-portal-page .admin-search {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    html body.employee-portal-page .content,
    html body.employee-portal-page .main > .content,
    html body.admin-portal-page .admin-content,
    html body.admin-portal-page .main-content,
    html body.admin-portal-page .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 600px) {
    html body.employee-portal-page .topbar,
    html body.admin-portal-page .topbar,
    html body.admin-portal-page .admin-header {
        min-width: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
}


/* =========================================================
   FINAL MOBILE SHELL OVERRIDE - 2026-08-19
   This block intentionally has higher specificity than the
   legacy portal-shell/sidebar-lock rules.
========================================================= */

@media (max-width: 900px) {

    /* ---------- ADMIN SHELL: remove desktop sidebar column ---------- */
    html body.admin-portal-page:has(.admin-sidebar) .admin-main,
    html body.admin-portal-page .admin-main,
    html body.admin-portal-page .main-content,
    html body.admin-portal-page .main,
    html body:has(.admin-sidebar) .admin-main,
    html body:has(.admin-sidebar) .main-content,
    html body:has(.admin-sidebar) .main {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* ---------- EMPLOYEE SHELL: remove desktop sidebar column ---------- */
    html body.employee-portal-page:has(.sidebar) .main,
    html body.employee-portal-page:has(.sidebar) .main-content,
    html body.employee-portal-page .main,
    html body.employee-portal-page .main-content,
    html body:has(.employee-sidebar) .main,
    html body:has(.employee-sidebar) .employee-main,
    html body:has(.daym-employee-sidebar) .main,
    html body:has(.daym-employee-sidebar) .employee-main,
    html body:has(.daym-sidebar) .main,
    html body:has(.daym-sidebar) .employee-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* ---------- UNIVERSAL MOBILE DRAWER ---------- */
    html body.admin-portal-page:has(.admin-sidebar) .admin-sidebar,
    html body.admin-portal-page .admin-sidebar,
    html body.employee-portal-page:has(.sidebar) .sidebar,
    html body.employee-portal-page .sidebar,
    html body:has(.employee-sidebar) .employee-sidebar,
    html body:has(.daym-employee-sidebar) .daym-employee-sidebar,
    html body:has(.daym-sidebar) .daym-sidebar {
        position: fixed !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        width: min(84vw, 310px) !important;
        min-width: min(84vw, 310px) !important;
        max-width: min(84vw, 310px) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        flex: 0 0 min(84vw, 310px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: translate3d(-105%, 0, 0) !important;
        transition: transform .24s ease, box-shadow .24s ease !important;
        z-index: 30000 !important;
        box-sizing: border-box !important;
    }

    html body.admin-portal-page.daym-mobile-nav-open:has(.admin-sidebar) .admin-sidebar,
    html body.admin-portal-page.sidebar-open:has(.admin-sidebar) .admin-sidebar,
    html body.employee-portal-page.daym-mobile-nav-open:has(.sidebar) .sidebar,
    html body.employee-portal-page.sidebar-open:has(.sidebar) .sidebar,
    html body.daym-mobile-nav-open .employee-sidebar,
    html body.sidebar-open .employee-sidebar,
    html body.daym-mobile-nav-open .daym-employee-sidebar,
    html body.sidebar-open .daym-employee-sidebar,
    html body.daym-mobile-nav-open .daym-sidebar,
    html body.sidebar-open .daym-sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    /* ---------- ADMIN NAV: vertical, never horizontal ---------- */
    html body.admin-portal-page:has(.admin-sidebar) .admin-nav,
    html body.admin-portal-page .admin-nav,
    html body:has(.admin-sidebar) .admin-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    html body.admin-portal-page:has(.admin-sidebar) .admin-nav-link,
    html body.admin-portal-page .admin-nav-link,
    html body:has(.admin-sidebar) .admin-nav-link {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 4px 0 !important;
        padding: 0 13px !important;
        gap: 13px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    html body.admin-portal-page:has(.admin-sidebar) .admin-nav-link i,
    html body.admin-portal-page .admin-nav-link i,
    html body:has(.admin-sidebar) .admin-nav-link i {
        flex: 0 0 19px !important;
        width: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;
        text-align: center !important;
    }

    html body.admin-portal-page:has(.admin-sidebar) .admin-nav-link span,
    html body.admin-portal-page .admin-nav-link span,
    html body:has(.admin-sidebar) .admin-nav-link span {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        writing-mode: horizontal-tb !important;
    }

    /* ---------- LEGACY EMPLOYEE NAV OVERRIDES ----------
       Some Employee pages hide labels at max-width:800px in
       their page-local CSS. The mobile drawer must restore
       those labels when it is actually visible. */
    html body.employee-portal-page .sidebar .brand-title,
    html body.employee-portal-page .sidebar .brand-subtitle,
    html body.employee-portal-page .sidebar .nav-label,
    html body.employee-portal-page .sidebar .nav-item span,
    html body.employee-portal-page .sidebar .sidebar-user-info,
    html body.employee-portal-page .sidebar .sidebar-user-info strong,
    html body.employee-portal-page .sidebar .sidebar-user-info span,
    html body.employee-portal-page .sidebar .logout span,
    html body.employee-portal-page .portal .sidebar .brand-title,
    html body.employee-portal-page .portal .sidebar .brand-subtitle,
    html body.employee-portal-page .portal .sidebar .nav-label,
    html body.employee-portal-page .portal .sidebar .nav-item span,
    html body.employee-portal-page .portal .sidebar .profile-name,
    html body.employee-portal-page .portal .sidebar .profile-role,
    html body.employee-portal-page .portal .sidebar .logout span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body.employee-portal-page .sidebar .nav-label {
        width: 100% !important;
        height: auto !important;
        min-height: 18px !important;
        margin: 12px 10px 7px !important;
        padding: 0 !important;
        white-space: nowrap !important;
        text-align: left !important;
        overflow: visible !important;
        word-break: normal !important;
    }

    html body.employee-portal-page .sidebar .nav-item span {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        writing-mode: horizontal-tb !important;
    }

    html body.employee-portal-page .sidebar .brand {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body.employee-portal-page .sidebar .sidebar-user,
    html body.employee-portal-page .sidebar .profile-mini {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: calc(100% - 24px) !important;
        margin: 0 12px !important;
        box-sizing: border-box !important;
    }

    /* ---------- EMPLOYEE NAV: vertical, never horizontal ---------- */
    html body.employee-portal-page:has(.sidebar) .nav,
    html body.employee-portal-page .nav,
    html body:has(.employee-sidebar) .nav,
    html body:has(.daym-employee-sidebar) .daym-sidebar-nav,
    html body:has(.daym-sidebar) .daym-sidebar-nav,
    html body:has(.daym-sidebar) .nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    html body.employee-portal-page:has(.sidebar) .nav-link,
    html body.employee-portal-page .nav-link,
    html body.employee-portal-page .sidebar-link,
    html body.employee-portal-page .employee-nav-link,
    html body:has(.employee-sidebar) .employee-nav-link,
    html body:has(.daym-employee-sidebar) .daym-sidebar-link,
    html body:has(.daym-sidebar) .daym-sidebar-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    html body.employee-portal-page:has(.sidebar) .nav-link span,
    html body.employee-portal-page .nav-link span,
    html body:has(.employee-sidebar) .employee-nav-link span,
    html body:has(.daym-sidebar) .daym-sidebar-link span,
    html body:has(.daym-employee-sidebar) .daym-sidebar-link span {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        writing-mode: horizontal-tb !important;
    }

    /* ---------- Header is full viewport, never trapped beside drawer ---------- */
    html body.admin-portal-page .admin-header,
    html body.admin-portal-page header.admin-header,
    html body.employee-portal-page .topbar,
    html body.employee-portal-page header.topbar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    /* ---------- Hide any extra fixed desktop offset from nested content ---------- */
    html body.admin-portal-page .admin-main > *,
    html body.employee-portal-page .main > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 600px) {
    html body.admin-portal-page:has(.admin-sidebar) .admin-sidebar,
    html body.employee-portal-page:has(.sidebar) .sidebar,
    html body:has(.employee-sidebar) .employee-sidebar,
    html body:has(.daym-employee-sidebar) .daym-employee-sidebar,
    html body:has(.daym-sidebar) .daym-sidebar {
        width: min(86vw, 300px) !important;
        min-width: min(86vw, 300px) !important;
        max-width: min(86vw, 300px) !important;
    }

    html body.admin-portal-page:has(.admin-sidebar) .admin-nav,
    html body.admin-portal-page .admin-nav,
    html body:has(.admin-sidebar) .admin-nav {
        flex-direction: column !important;
    }

    html body.admin-portal-page:has(.admin-sidebar) .admin-nav-link,
    html body.admin-portal-page .admin-nav-link,
    html body:has(.admin-sidebar) .admin-nav-link {
        height: 46px !important;
        min-height: 46px !important;
    }
}


/* =========================================================
   FINAL MOBILE SIDEBAR / NAVIGATION OVERRIDES
   Applies to legacy .shell/.portal pages such as:
   - admin-tickets.php
   - notifications.php
   - older employee/admin pages
========================================================= */
@media (max-width: 900px) {

    /* The legacy shell offset must disappear on phones. */
    body .shell,
    body .portal {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body .shell > .main,
    body .portal > .main,
    body .shell > main.main,
    body .portal > main.main,
    body .shell main.main,
    body .portal main.main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    /* Every legacy sidebar is a drawer, not a permanent column. */
    body .shell > aside.sidebar,
    body .portal > aside.sidebar,
    body.admin-portal-page .shell > aside.sidebar,
    body.employee-portal-page .portal > aside.sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(84vw, 310px) !important;
        min-width: min(84vw, 310px) !important;
        max-width: min(84vw, 310px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 30000 !important;
        transform: translate3d(-110%, 0, 0) !important;
        transition: transform .24s ease, box-shadow .24s ease !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.daym-mobile-nav-open .shell > aside.sidebar,
    body.daym-mobile-nav-open .portal > aside.sidebar,
    body.sidebar-open .shell > aside.sidebar,
    body.sidebar-open .portal > aside.sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Navigation must ALWAYS be vertical inside the drawer. */
    body .shell > aside.sidebar > .nav,
    body .portal > aside.sidebar > .nav,
    body .shell .sidebar .nav,
    body .portal .sidebar .nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 1 1 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        writing-mode: horizontal-tb !important;
    }

    body .shell > aside.sidebar .nav-label,
    body .portal > aside.sidebar .nav-label,
    body .shell > aside.sidebar .nav-item,
    body .portal > aside.sidebar .nav-item {
        writing-mode: horizontal-tb !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body .shell > aside.sidebar .nav-item,
    body .portal > aside.sidebar .nav-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        min-width: 0 !important;
        min-height: 46px !important;
        height: auto !important;
        margin: 0 10px !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-align: left !important;
        flex: 0 0 auto !important;
    }

    body .shell > aside.sidebar .nav-item i,
    body .portal > aside.sidebar .nav-item i {
        flex: 0 0 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        text-align: center !important;
        writing-mode: horizontal-tb !important;
    }

    body .shell > aside.sidebar .nav-item span,
    body .portal > aside.sidebar .nav-item span {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        writing-mode: horizontal-tb !important;
    }

    /* Header/content must never be pushed to the right by the drawer. */
    body .shell > .main > .topbar,
    body .portal > .main > .topbar,
    body .shell > main.main > .topbar,
    body .portal > main.main > .topbar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    /* Legacy top-level content wrappers. */
    body .shell > .main > .content,
    body .portal > .main > .content,
    body .shell > main.main > .content,
    body .portal > main.main > .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    /* Overlay must sit between drawer and page. */
    body .sidebar-overlay,
    body .daym-mobile-overlay {
        z-index: 29990 !important;
    }

    /* Never allow a hidden desktop nav to capture taps over page content. */
    body:not(.daym-mobile-nav-open):not(.sidebar-open) .shell > aside.sidebar,
    body:not(.daym-mobile-nav-open):not(.sidebar-open) .portal > aside.sidebar {
        pointer-events: none !important;
    }

    body.daym-mobile-nav-open .shell > aside.sidebar,
    body.daym-mobile-nav-open .portal > aside.sidebar,
    body.sidebar-open .shell > aside.sidebar,
    body.sidebar-open .portal > aside.sidebar {
        pointer-events: auto !important;
    }
}

@media (max-width: 600px) {
    body .shell > aside.sidebar,
    body .portal > aside.sidebar {
        width: min(86vw, 320px) !important;
        min-width: min(86vw, 320px) !important;
        max-width: min(86vw, 320px) !important;
    }
}