/* GaugeWorks — app shell, sidebar, topbar, responsive breakpoints */
/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:218px 1fr;min-height:100vh}
.sidebar{background:#05070A;border-right:1px solid var(--line);padding:18px 0;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;z-index:30}
.brand{padding:0 18px 16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.brand h1{font-size:26px;font-weight:700;line-height:1}
.brand h1 .g1{color:var(--low)}.brand h1 .g2{color:var(--high)}
.brand small{color:var(--faint);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.brandmark{display:block;object-fit:contain}
.brand .brandmark{max-height:34px;max-width:100%}
.mobilebar .brandmark{max-height:26px}
.nav{flex:1;overflow-y:auto}
.nav button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--muted);
  padding:10px 18px;font-size:14px;font-weight:600;text-align:left;border-left:3px solid transparent}
.nav button:hover{color:var(--text);background:rgba(255,255,255,.03)}
.nav button.on{color:var(--text);background:linear-gradient(90deg,rgba(63,169,245,.12),transparent);border-left-color:var(--low)}
.nav .ico{width:20px;text-align:center;font-size:15px}
.nav .sect{padding:14px 18px 4px;font-size:10px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;font-weight:700}
.sidefoot{padding:12px 18px 0;border-top:1px solid var(--line);font-size:11px;color:var(--faint)}
.main{padding:22px 26px 90px;min-width:0}
.topbar{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.topbar h2{font-size:30px;font-weight:700}
.topbar .sub{color:var(--muted);font-size:13px}
.mobilebar{display:none}

/* responsive
   NOTE: every selector below is prefixed with "body" solely to out-specificity
   the equal-specificity unconditional rules for the same classes in
   components.css (e.g. plain ".g5", ".fgrid", ".overlay", ".modal"). Without
   the prefix these @media rules and the components.css rules tie on
   specificity, and — regardless of the <link> order — a tie is broken by
   source position, which is fragile. "body X" always wins over "X" alone. */
@media (max-width:960px){
  body .g4,body .g5{grid-template-columns:1fr 1fr}body .g3{grid-template-columns:1fr 1fr}
}
.split{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)}
.split-side{grid-template-columns:260px 1fr}
.split-ref{grid-template-columns:minmax(300px,1fr) minmax(0,1.3fr)}
@media (max-width:900px){.split,.split-side,.split-ref{grid-template-columns:1fr}}
@media (max-width:760px){
  body .app{grid-template-columns:1fr}
  body .sidebar{position:fixed;left:-240px;width:230px;transition:left .2s;height:100vh}
  body .sidebar.open{left:0;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}
  body .mobilebar{display:flex;align-items:center;gap:12px;background:#05070A;border-bottom:1px solid var(--line);
    padding:10px 14px;position:sticky;top:0;z-index:40}
  body .mobilebar h1{font-size:20px}
  body .mobilebar h1 .g1{color:var(--low)}body .mobilebar h1 .g2{color:var(--high)}
  body .main{padding:16px 14px 80px}
  body .g2,body .g3,body .g4,body .g5{grid-template-columns:1fr!important}
  body .fgrid{grid-template-columns:1fr!important}
  body .gaugerow{grid-template-columns:1fr 1fr}
  body .topbar h2{font-size:24px}

  /* modals: give up the fixed side padding for usable width, and stack the
     action row full-width — a "Convert to invoice / Schedule job / Cancel / Save"
     row that fit fine on desktop does not fit fine at 360px wide */
  body .overlay{padding:0!important;align-items:stretch!important}
  body .modal{max-width:none!important;min-height:100%;border-radius:0;border-width:0 0 1px;padding:14px!important}
  body .modal .foot{flex-direction:column-reverse}
  body .modal .foot .btn{width:100%}

  /* iOS Safari auto-zooms the page on focusing any input under 16px — this is
     the fix, not a design choice */
  body input,body select,body textarea{font-size:16px}

  /* small icon/action buttons are a real target on desktop but too small to
     reliably tap on a phone */
  body .btn.sm{padding:7px 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}