/* Desktop keeps its existing layout. */
.mobile-brand { display: none; }
#mobile-modules:not([open]) { display: none; }
@media (max-width: 760px) {
    :root { --mobile-nav-height: 88px; }
    html { scroll-padding-top: 110px; scroll-padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
    .app-workspace { width: 100%; }
    .main-container { min-height: 100dvh; }
    .app-page .page-content { padding: 22px 14px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px); }
    .page-content { width: 100%; min-width: 0; overflow-wrap: anywhere; }
    .top-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); min-height: 64px; }
    .mobile-brand { display: inline-flex; justify-self: start; text-decoration: none; min-height: 44px; align-items: center; }
    .mobile-brand .pantheon-brand { gap: 6px; }
    .mobile-brand .pantheon-brand img { width: 32px; height: 32px; }
    .mobile-brand .pantheon-brand > span { font-size: 23px; }
    .mobile-brand .pantheon-brand small { font-size: 11px; margin-top: 4px; }
    .top-bar .today-date { display: none; }
    .top-bar-actions { grid-column: 2; grid-row: 1; margin: 0; gap: 4px; }
    .connected-user, .logout-link { min-width: 44px; min-height: 44px; display: flex; justify-content: center; }
    .connected-user > div, .logout-link span, .logout-link::after { display: none; }
    .logout-link .icon { width: 23px; height: 23px; }
    .top-bar-location { grid-column: 1 / -1; grid-row: 2; }
    .top-bar-location:has(.breadcrumbs) { padding: 0 4px 3px; }
    .breadcrumbs { margin-top: 2px; }
    .login-page .top-bar { display: flex; justify-content: flex-end; }
    .login-page .top-bar-location { display: none; }
    .login-page .top-bar-actions { flex-wrap: wrap; justify-content: flex-end; }
    #left-column, .main-container:has(.planning) aside#left-column { position: fixed; inset: auto 0 0; z-index: 40; width: 100%; height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgb(25 40 70 / 6%); display: block; }
    #left-column > .sidebar-heading, #left-column > .module-section, #left-column > .sidebar-footer, #left-column > #module-picker { display: none !important; }
    #module-navigation { display: block !important; height: 100%; overflow: visible; }
    #main-nav { height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); scrollbar-width: thin; }
    #module-navigation .nav-label, #main-nav .nav-placeholder { display: none; }
    #main-nav a { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 5px 4px; text-align: center; font-size: 10px; line-height: 1.25; border-radius: 8px; }
    #main-nav a .icon { width: 27px; height: 27px; }
    #main-nav a span { overflow-wrap: anywhere; }
    #main-nav a.is-active { background: var(--accent-soft); box-shadow: inset 0 3px var(--primary); }
    #main-nav a:focus-visible { outline-offset: -3px; }
    #mobile-modules { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: env(safe-area-inset-top) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); border: 0; background: var(--canvas); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
    #mobile-modules::backdrop { background: var(--canvas); }
    .mobile-dialog-heading { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; background: var(--canvas); z-index: 1; }
    .mobile-dialog-heading h2 { margin: 0; font-size: 20px; }
    #mobile-modules-close { min-height: 44px; min-width: 44px; padding: 8px; }
    .mobile-home-link { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-bottom: 12px; }
    #mobile-modules .module-option { min-height: 66px; padding: 12px; gap: 16px; margin-bottom: 6px; }
    #mobile-modules .module-option .icon { width: 28px; height: 28px; }
    #mobile-modules .module-option strong { font-size: 16px; }
    #mobile-modules .module-option small { font-size: 12px; }
    body.mobile-dialog-open { overflow: hidden; }
    .surface-card, .team-block, .dashboard-block { padding: 18px 14px; overflow-x: visible; }
    .page-heading { align-items: flex-start; gap: 14px; }
    h1 { font-size: 26px; overflow-wrap: anywhere; }
    .module-grid, .module-page, .balance-tables, .balance-summary { grid-template-columns: minmax(0, 1fr); }
    .module-coming-soon { min-height: 300px; padding: 28px 18px; }
    .mobile-table-scroll, .leave-list-scroll, .balance-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
    .mobile-table-scroll { margin: 20px 0; }
    .mobile-table-scroll > table { margin: 0; }
    .mobile-table-scroll > table, .leave-list-scroll > table { min-width: 600px; }
    .filter-form { padding: 12px; gap: 12px; }
    .filter-form > div { flex-wrap: wrap; min-width: 0; }
    .filter-form select, .filter-form input { max-width: 100%; }
    .form-card form > div[id], #leave-request-form-container form { grid-template-columns: minmax(0, 1fr); }
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 16px; min-height: 44px; min-width: 0; }
    .form-field, .form-field > div, fieldset { min-width: 0; }
    input[type="file"] { width: 100%; }
    .form-card button, .login-card button { max-width: 100%; white-space: normal; }
    .request-actions .button, .request-actions button:not(.leave-day):not(.toast__close) { min-height: 44px; }
    .login-page .page-content { padding: 20px 14px 32px; }
    .login-card { padding: 24px 18px; min-width: 0; }
    .login-welcome h1 { font-size: 28px; }
    .page-content img { max-width: 100%; }
    .avatar-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .toast-container { top: calc(80px + env(safe-area-inset-top)); right: 12px; width: calc(100vw - 24px); max-height: calc(100dvh - 190px); }
    .error-card { padding: 28px 18px; }
    .leave-calendar-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; gap: 24px; }
    .leave-month { min-width: 0; width: 100%; }
    .leave-day { min-height: 38px; }
    .calendar-navigation { gap: 10px; flex-wrap: wrap; }
    .calendar-navigation a, .calendar-navigation button { min-width: 40px; min-height: 40px; }
    .planning-months { grid-template-columns: minmax(0, 1fr); }
    .planning-navigation { padding: 14px; gap: 12px; }
    .planning-navigation form { min-width: 0; width: 100%; }
    .planning-month { padding: 14px 8px; }
    .planning-legend { padding: 18px 14px; }
    .planning-tooltip { max-width: min(160px, 45vw); white-space: normal; }
    .planning-day:nth-child(7n + 5) .planning-tooltip, .planning-day:nth-child(7n + 6) .planning-tooltip { left: auto; right: 0; }
}

@media (max-width: 760px) { .top-bar-company { grid-column: 1 / -1; grid-row: 2; font-size: 12px; } .top-bar-location { grid-row: 3; } }