/* Purpose-built phone layout. Everything is inside this media query: desktop is untouched. */
@media (max-width:900px){
 body.phone-layout{--phone-bar:60px;-webkit-text-size-adjust:100%}
 body.phone-layout .app-shell{display:block!important;padding-bottom:calc(var(--phone-bar) + env(safe-area-inset-bottom) + 84px)!important}
 /* Sidebar becomes the "More" sheet */
 body.phone-layout .app-shell .sidebar{position:fixed!important;left:0;right:0;bottom:calc(var(--phone-bar) + env(safe-area-inset-bottom));top:auto;z-index:1200;max-height:calc(100dvh - var(--phone-bar) - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 24px);overflow-y:auto;overscroll-behavior:contain;width:auto!important;border-radius:18px 18px 0 0;border-bottom:0!important;box-shadow:0 -12px 40px #0004;padding:12px calc(14px + env(safe-area-inset-right)) 16px calc(14px + env(safe-area-inset-left))!important;transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
 body.phone-layout.phone-more-open .app-shell .sidebar{transform:none;visibility:visible;transition:transform .22s ease}
 body.phone-layout.phone-more-open::before{content:"";position:fixed;inset:0;background:#0006;z-index:1150}
 body.phone-layout .sidebar nav{display:grid!important;grid-template-columns:1fr!important;gap:2px!important}
 body.phone-layout .sidebar nav>.nav-group{grid-column:auto!important}
 body.phone-layout .sidebar :is(.nav-btn,.nav-group-toggle,#logoutBtn){min-height:48px;display:flex;align-items:center;justify-content:flex-start!important;text-align:left!important;font-size:16px!important;padding:10px 14px!important;width:100%}
 /* Bottom tab bar */
 .phone-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1250;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:calc(var(--phone-bar) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--appearance-panel,#fff);border-top:1px solid var(--appearance-line,#d0d7de);box-shadow:0 -4px 18px #0000001a}
 .phone-tabbar button{appearance:none;background:none;border:0;border-radius:0;min-height:44px;margin:0;padding:6px 2px;font:600 12.5px/1.15 inherit;color:var(--appearance-muted,#4b5563);display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:none}
 .phone-tabbar button span{display:block;max-width:100%;white-space:nowrap;overflow-wrap:normal;letter-spacing:-.01em}
 .phone-tabbar button.active,.phone-tabbar button[aria-expanded=true]{color:var(--appearance-text,#111);box-shadow:inset 0 3px 0 var(--company-accent,var(--appearance-accent,#4b5563))}
 /* Sticky compact header */
 body.phone-layout .app-shell main{padding:0 calc(12px + env(safe-area-inset-right)) 16px calc(12px + env(safe-area-inset-left))!important;margin:0!important;width:auto!important;max-width:none!important}
 body.phone-layout .app-shell .topbar{position:sticky;top:0;z-index:900;margin:0 calc(-12px - env(safe-area-inset-right)) 12px calc(-12px - env(safe-area-inset-left))!important;padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left))!important;border-radius:0!important;min-height:0!important}
 body.phone-layout .app-shell .topbar h1{font-size:20px!important;line-height:1.2!important;margin:0!important}
 body.phone-layout .app-shell .topbar p{font-size:14px!important;margin:2px 0 0!important}
 /* Full-width cards, comfortable spacing, readable text */
 body.phone-layout .app-shell main :is(.card,.toolbar-card,.kpi){width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important;border-radius:14px!important;padding:16px!important}
 body.phone-layout .app-shell main{font-size:15px}
 body.phone-layout .app-shell main :is(p,li,td,th,label,.list-main span){font-size:max(15px,1em)}
 /* Touch targets + native-feeling controls (16px stops iOS zoom on focus) */
 body.phone-layout :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important;min-height:44px;border-radius:10px!important;box-sizing:border-box}
 body.phone-layout :is(input[type=checkbox],input[type=radio]){width:22px;height:22px}
 body.phone-layout .app-shell main :is(button,.btn,a.primary,a.secondary,summary){min-height:44px}
 /* AI chat sits above the tab bar and never covers it */
 body.phone-layout .assistant-launcher{right:calc(14px + env(safe-area-inset-right))!important;bottom:calc(var(--phone-bar) + env(safe-area-inset-bottom) + 12px)!important;padding:10px 16px!important;min-height:44px}
 body.phone-layout dialog#assistantChat{inset:auto 8px calc(var(--phone-bar) + env(safe-area-inset-bottom) + 8px) 8px!important;width:auto!important;height:calc(100dvh - var(--phone-bar) - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 24px)!important}
 body.phone-layout dialog:not(#assistantChat){max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)}
}