/* Shared, final responsive layer. Dashboard-specific layout stays in its own asset. */
.app-shell {
    --sidebar: 214px;
    --bg: #f1f7fc;
    --nav: #0a243a;
    --primary: #0067ed;
    --primary-2: #0054c7;
    --line: #deebf7;
    --enterprise-content-pad: clamp(16px, 1.8vw, 30px);
    background: var(--bg);
}
.app-shell .main-content { min-width: 0; min-height: 100dvh; }
.app-shell .content-wrap { min-width: 0; width: 100%; max-width: 2000px; }
.app-shell .content-wrap-planner { max-width: none; }
.app-shell .content-wrap > *,
.app-shell :is(.grid, .form-grid, .section-stack, .split, .card, .card-body, .form-group) { min-width: 0; }
.app-shell :is(.grid, .form-grid, .section-stack, .split) > * { min-width: 0; }
.app-shell :is(.input, .select, .textarea) { min-width: 0; max-width: 100%; }
.app-shell :is(.hint, .alert, .callout, .definition-grid dd) { overflow-wrap: anywhere; }
.app-shell .checkbox-row { align-items: flex-start; line-height: 1.5; }
.app-shell .checkbox-row input { flex: 0 0 auto; margin-top: 2px; }
.app-shell .sidebar { height: 100vh; height: 100dvh; background: linear-gradient(160deg, #0b263e, #082137); }
.app-shell .brand { padding: 13px 12px 16px; gap: 8px; }
.app-shell .brand-copy { flex: 1; }
.app-shell .brand-copy strong { font-size: 19px; letter-spacing: -.25px; }
.app-shell .brand-copy small { font-size: 11px; line-height: 1.3; }
.app-shell .sidebar-collapse-btn { width: 26px; height: 28px; flex-basis: 26px; }
.app-shell .org-chip, .app-shell .tenant-switcher { margin-inline: 14px; margin-bottom: 12px; }
.app-shell .nav-list { padding-inline: 0; overflow-x: hidden; scrollbar-gutter: stable; }
.app-shell .nav-item { min-height: 34px; margin: 2px 12px 2px 0; border-radius: 7px; padding: 7px 16px; color: #e7eff8; }
.app-shell .nav-icon, .app-shell .nav-icon .ui-icon { color: #eef5fd; }
.app-shell .nav-item.active { background: linear-gradient(90deg, #326991, #1d4566); box-shadow: inset 3px 0 #b2d4f6; }
.app-shell .nav-label { overflow: hidden; text-overflow: ellipsis; }
.app-shell .nav-group-toggle { padding-inline: 20px; }
.app-shell .nav-heading { color: #b6cce0; font-size: 10px; letter-spacing: .12em; }
.app-shell .sidebar-user { padding: 15px 12px; }
.app-shell .sidebar-user .avatar { width: 40px; height: 40px; background: #e1edfb; color: #173b71; }
.app-shell .sidebar-user-meta strong { font-size: 12px; }
.app-shell .sidebar-user-meta small { font-size: 11px; }
.app-shell .sidebar-personal-tools { padding-inline: 12px; }
.app-shell .desktop-topbar { padding: 13px var(--enterprise-content-pad); min-height: 84px; gap: 16px; background: linear-gradient(105deg, #f9fcff, #fff); }
.app-shell .enterprise-page-heading { flex: 1 1 260px; min-width: 0; max-width: none; }
.app-shell .desktop-topbar h1 { color: #071f71; white-space: normal; overflow-wrap: anywhere; font-size: 23px; }
.app-shell .desktop-topbar p { max-width: 65ch; }
.app-shell .enterprise-page-tenant { color: #345c96; font-size: 12px; font-weight: 600; }
.app-shell .enterprise-page-tenant > span { display: none; }
.app-shell .top-actions { min-width: 0; max-width: 100%; gap: 9px; }
.app-shell .employee-balance-strip { min-width: 0; flex-wrap: wrap; }
.app-shell .portal-search-button { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; background: #fff; color: #0067ed; border: 1px solid var(--line); border-radius: 10px; }
.app-shell .portal-user-avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; background: #e0ebfa; color: #163b83; font-size: 12px; font-weight: 800; }
.app-shell :is(.toolbar, .filter-bar, .page-actions) { min-width: 0; }
.app-shell .filter-bar > .form-group { min-width: 0; max-width: 100%; }
.app-shell .table-wrap, .app-shell .portal-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.app-shell :is(.table-wrap, .portal-table-scroll):focus-visible { outline: 3px solid #83b8de; outline-offset: -3px; }
.app-shell .portal-table-scroll { width: 100%; }
.app-shell .app-dialog { max-height: calc(100dvh - 24px); }
.app-shell .dialog-card { min-width: 0; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.app-shell .dialog-card > header { gap: 12px; }
.app-shell .dialog-card > header > div { min-width: 0; }
.app-shell .dialog-card > header > button { flex-shrink: 0; }
.app-shell :is(.dialog-card > footer, .dialog-body > footer, .quick-clock-form > footer) { flex-wrap: wrap; gap: 8px; }
.app-shell .navigation-search-dialog { width: 580px; }
.app-shell .navigation-search-dialog .dialog-body { padding: 18px; }
.app-shell .navigation-search-label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 7px; }
.app-shell .navigation-search-count { margin: 13px 0 8px; color: #5c6f7e; font-size: 12px; }
.app-shell .navigation-search-results { display: grid; gap: 5px; max-height: min(460px, 50dvh); overflow: auto; }
.app-shell .navigation-search-results a { display: flex; align-items: center; gap: 12px; padding: 11px; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; color: #163b83; }
.app-shell .navigation-search-results a:hover, .app-shell .navigation-search-results a:focus-visible { background: #eef6ff; }
.app-shell .navigation-search-results .ui-icon { color: #0067ed; }
.app-shell .navigation-search-empty { margin: 0; padding: 22px 8px; color: #5c6f7e; }
.auth-shell .auth-page, .auth-shell .auth-panel, .auth-shell .auth-box { min-width: 0; }
.auth-shell .auth-logo { min-width: 0; }
.auth-shell .auth-logo strong { overflow-wrap: anywhere; }
.auth-shell .auth-panel { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }

@media (min-width: 1101px) {
    .app-shell.sidebar-collapsed { --sidebar: 76px; }
    .app-shell.sidebar-collapsed .brand { padding: 43px 20px 14px; }
    .app-shell.sidebar-collapsed .sidebar-collapse-btn { width: 32px; height: 32px; right: 22px; top: 7px; }
    .app-shell.sidebar-collapsed .nav-list { padding: 6px 8px; scrollbar-gutter: auto; }
    .app-shell.sidebar-collapsed .nav-item { margin: 3px 0; padding: 11px; min-height: 43px; }
    .app-shell.sidebar-collapsed .nav-count { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding-inline: 3px; font-size: 8px; }
    .app-shell.sidebar-collapsed .tenant-switcher { margin-inline: 12px; }
    .app-shell.sidebar-collapsed .sidebar-user { padding-inline: 8px; }
    .app-shell.sidebar-collapsed .sidebar-user form { display: none; }
    .app-shell.sidebar-collapsed .sidebar-personal-tools { padding-inline: 9px; }
}
@media (min-width: 1101px) and (max-width: 1440px) {
    .app-shell .desktop-topbar { flex-wrap: wrap; gap: 9px 16px; }
    .app-shell .desktop-topbar .enterprise-page-heading { flex-basis: 250px; }
    .app-shell .desktop-topbar h1 { font-size: 21px; }
    .app-shell .desktop-topbar p { display: block; font-size: 12px; }
    .app-shell .top-actions { gap: 6px; }
    .app-shell .employee-balance-chip { min-width: 83px; }
}
@media (min-width: 701px) and (max-width: 900px) {
    /* All spans use the same 12-column grid; 7/5 must not create implicit columns. */
    .app-shell .form-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .app-shell .form-grid > :is(.col-12, .col-8, .col-7, .col-6, .col-5, .col-4) { grid-column: span 12; }
    .app-shell .form-grid > :is(.col-3, .col-2, .col-1) { grid-column: span 6; }
}
@media (max-width: 1100px) {
    .app-shell .main-content { margin-left: 0; }
    .app-shell .sidebar { width: min(310px, calc(100vw - 28px)); padding-top: env(safe-area-inset-top); }
    .app-shell.sidebar-drawer-open { overflow: hidden; overscroll-behavior: none; }
    .app-shell .sidebar .brand { padding: 18px 58px 18px 16px; }
    .app-shell .sidebar-drawer-close { top: calc(8px + env(safe-area-inset-top)); }
    .app-shell .sidebar .nav-item { min-height: 44px; font-size: 14px; }
    .app-shell .sidebar .nav-group-toggle { min-height: 44px; }
    .app-shell .sidebar .sidebar-user { padding-bottom: max(15px, env(safe-area-inset-bottom)); }
    .app-shell .desktop-topbar { min-height: 72px; }
    .app-shell .desktop-topbar h1 { font-size: 22px; }
    .app-shell .portal-search-button, .app-shell .portal-user-avatar { display: none; }
    .app-shell .mobile-topbar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
    /* Legacy <=460px rules positioned the brand over the status/search buttons. */
    .app-shell .mobile-topbar .brand-inline { position: static; left: auto; transform: none; min-width: 0; width: 0; flex: 1 1 0; }
    .app-shell .mobile-topbar .brand-inline strong { display: block; min-width: 0; flex: 1; }
    .app-shell .mobile-topbar > [data-sidebar-toggle] { flex: 0 0 44px; }
    .app-shell .mobile-top-actions { gap: 4px; }
    .app-shell .enterprise-mobile-context > button { min-height: 44px; }
    .app-shell .floating-chat { z-index: 65; }
    .app-shell .floating-chat-panel { position: fixed; left: auto; right: 12px; width: min(390px, calc(100vw - 24px)); height: auto; }
}
@media (max-width: 700px) {
    .app-shell .content-wrap { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
    .app-shell .mobile-topbar { gap: 6px; }
    .app-shell .brand-inline { justify-content: flex-start; }
    .app-shell .brand-inline strong { font-size: 13px; }
    .app-shell .desktop-topbar h1 { font-size: 21px; }
    .app-shell .desktop-topbar p { display: block; font-size: 12px; }
    .app-shell .desktop-topbar .top-actions:empty { display: none; }
    .app-shell .card-header { flex-wrap: wrap; align-items: flex-start; gap: 9px; }
    .app-shell .card-header > :first-child { min-width: 0; }
    .app-shell .toolbar { align-items: stretch; }
    .app-shell .toolbar > .filter-bar { width: 100%; }
    .app-shell .filter-bar > .form-group { width: 100%; flex: 1 1 100%; }
    .app-shell .page-actions { max-width: 100%; }
    .app-shell .page-actions > .btn { white-space: normal; }
    .app-shell .form-grid > * { grid-column: 1 / -1 !important; }
    .app-shell .mobile-card-table td { overflow-wrap: anywhere; }
    .app-shell .mobile-card-table td.actions { flex-wrap: wrap; }
    .app-shell .table :is(.input, .select) { width: 100%; min-width: 0; }
    .app-shell .app-dialog { margin: auto; max-width: calc(100vw - 16px); width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px); }
    .app-shell .dialog-card { max-height: calc(100dvh - 16px); border-radius: 12px; }
    .app-shell .dialog-body { min-width: 0; }
    .app-shell :is(.dialog-card > footer, .dialog-body > footer, .quick-clock-form > footer) > :is(.btn, .button) { flex: 1 1 120px; }
    .app-shell .presence-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-shell .notification-toast-stack { width: auto; left: 10px; right: 10px; max-width: none; }
    .app-shell .floating-chat-panel { left: 8px; right: 8px; width: auto; }
}
@media (max-height: 540px) and (max-width: 1100px) {
    .app-shell .sidebar .brand { padding-top: 10px; padding-bottom: 10px; }
    .app-shell .sidebar .tenant-switcher { margin-bottom: 6px; }
    .app-shell .sidebar-user { padding-top: 8px; padding-bottom: 8px; }
    .app-shell .dialog-card { max-height: calc(100dvh - 16px); }
}
@media (min-width: 2200px) {
    .app-shell .content-wrap { max-width: 2240px; }
    .app-shell .content-wrap-planner { max-width: none; }
    .app-shell .desktop-topbar { padding-inline: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .app-shell *, .auth-shell * { scroll-behavior: auto !important; }
}
@media (max-width: 1100px) {
    .app-shell .desktop-topbar .enterprise-page-tenant,
    .app-shell .desktop-topbar .presence-topbar-wrap { display: none !important; }
    /* Native iOS date/month controls must include their padding in the form-column width. */
    .app-shell :is(
        .employee-detail-page input.input[type="month"][name="period_month"],
        .cc175-card-form input.input[type="month"][name="expires_month"],
        .project-focus-filters input.input[type="date"]
    ) {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        inline-size: 100% !important;
        min-width: 0 !important;
        min-inline-size: 0 !important;
        max-width: 100% !important;
        max-inline-size: 100% !important;
        margin: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        overflow: hidden;
        text-align: left;
    }
    .app-shell :is(
        .employee-detail-page input.input[type="month"][name="period_month"],
        .cc175-card-form input.input[type="month"][name="expires_month"],
        .project-focus-filters input.input[type="date"]
    )::-webkit-date-and-time-value {
        min-width: 0 !important;
        min-height: 1.5em;
        max-width: 100%;
        margin: 0;
        text-align: left;
    }
}
@media print {
    .app-shell .content-wrap { max-width: none; width: 100%; padding: 0; }
    .app-shell .portal-search-button, .app-shell .portal-user-avatar, .app-shell .floating-chat { display: none !important; }
    .app-shell .portal-table-scroll { overflow: visible; }
}