/* LAN Control as an installed app (PWA) + fitting every screen.
   Loaded after the theme files. Written against the tokens in index.html, so all
   four themes (Console, Groove, After Dark, Vinyl) pick it up without extra work. */

/* ── Touch ─────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
button, a, [role="button"], .chip, .seg button { touch-action:manipulation; }
/* iOS zooms the page when a field under 16px gets focus — keep phones at 16px */
@media (pointer: coarse) and (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size:16px; }
}
/* installed app: no rubber-band on the page itself, no text-select on the chrome */
html.standalone, html.standalone body { overscroll-behavior:none; }
html.standalone .sb, html.standalone .mnav, html.standalone .mtop { -webkit-user-select:none; user-select:none; }
html main { overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }

/* ── Sidebar: install button + notch-safe edges ────────────────── */
html .sb-install { width:100%; border:0; background:none; font:inherit; font-weight:500; cursor:pointer; text-align:left; color:var(--accent-text); }
html .sb-install:hover { background:var(--accent-soft); color:var(--accent-text); }
html .sb-install svg.i { color:var(--gold); }
html .sb-foot .sb-install { height:36px; }
html .sb { padding-left:max(12px, env(safe-area-inset-left)); }
html main { padding-right:env(safe-area-inset-right); }

/* laptops and phones on their side: short screens keep the whole sidebar reachable */
@media (min-width: 821px) and (max-height: 640px) {
  html .sb { overflow-y:auto; scrollbar-width:none; padding-top:8px; padding-bottom:8px; }
  html .sb::-webkit-scrollbar { display:none; }
  html .sb-brand { min-height:40px; padding-bottom:8px; }
  html .sb-label { padding-bottom:4px; }
  html .sb-i { height:34px; }
  html .sb-foot { padding-top:8px; gap:4px; }
  html .sb-stat { flex-direction:row; gap:12px; }
  html .shell.mini .sb-stat { flex-direction:column; }
}

/* big screens: use the room */
@media (min-width: 1800px) { html .page { max-width:1560px; } }
@media (min-width: 2400px) { html .page { max-width:1840px; } body { font-size:15.5px; } }

/* ── Phones and tablets (the bottom bar layout) ────────────────── */
html .mnav-more { display:none; }
@media (max-width: 820px) {
  html .mtop { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  html .mnav { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  html .mnav a, html .mnav .mnav-more { min-width:0; -webkit-user-select:none; user-select:none; }
  html .mnav a .l, html .mnav .mnav-more .l { max-width:100%; padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html .mnav a:active, html .mnav .mnav-more:active { opacity:.6; }
  html .mnav .mnav-more { flex:1; display:none; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:none; font:inherit; font-size:10.5px; font-weight:500; color:var(--muted); position:relative; cursor:pointer; padding:0; }
  html .mnav .mnav-more svg.i { width:22px; height:22px; }
  /* one of the hidden tabs is waiting for you → a dot on More */
  html .mnav:has(a.mx .bdg:not(:empty)) .mnav-more::after { content:""; position:absolute; top:9px; left:calc(50% + 8px); width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px var(--surface); }
  html .mnav:has(a.mx.on) .mnav-more { color:var(--accent-text); }
  html .mnav:has(a.mx.on) .mnav-more::before { content:""; position:absolute; top:0; left:30%; right:30%; height:2px; border-radius:0 0 2px 2px; background:var(--gold); }
  html .page { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
}
/* narrow phones: four tabs + More */
@media (max-width: 599px) {
  html .mnav a.mx { display:none; }
  html .mnav .mnav-more { display:flex; }
}
/* big phones on their side and tablets in portrait: every tab fits, a little more air */
@media (min-width: 600px) and (max-width: 820px) {
  html .mnav a { font-size:11.5px; }
  html .page { padding:26px 28px 36px; }
  html .ph h1 { font-size:24px; }
  html .grid2 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}
/* phone on its side (wide but very short): slimmer bars so there is room for the page */
@media (max-width: 820px) and (max-height: 480px) and (orientation: landscape) {
  :root { --hdr:calc(48px + env(safe-area-inset-bottom)); }
  html .mnav a, html .mnav .mnav-more { flex-direction:row; gap:6px; }
  html .mnav a svg.i, html .mnav .mnav-more svg.i { width:19px; height:19px; }
  html .mnav .bdg { top:4px; }
  html .mtop { padding-top:6px; padding-bottom:6px; }
}


/* ── Bottom sheet (More, install help) ─────────────────────────── */
.msheet { position:fixed; inset:0; z-index:400; }
.ms-back { position:absolute; inset:0; background:color-mix(in srgb, #05002a 45%, transparent); opacity:0; transition:opacity .25s var(--ease); backdrop-filter:blur(2px); }
.ms-card { position:absolute; left:0; right:0; bottom:0; max-height:86dvh; overflow-y:auto; overscroll-behavior:contain; background:var(--surface); color:var(--ink);
  border-radius:20px 20px 0 0; box-shadow:var(--shadow-lg); padding:10px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  transform:translateY(100%); transition:transform .3s var(--ease); border-top:1px solid var(--line); }
.ms-card::before { content:""; position:absolute; left:18%; right:18%; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold-2), var(--gold), transparent); }
.msheet.open .ms-back { opacity:1; }
.msheet.open .ms-card { transform:none; }
.ms-grab { display:block; width:38px; height:4px; border-radius:4px; background:var(--line-2); margin:0 auto 12px; }
.ms-user { display:flex; align-items:center; gap:12px; padding:6px 6px 14px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.ms-user .u { line-height:1.25; min-width:0; }
.ms-user .u b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-user .u span { font-size:12.5px; color:var(--muted); text-transform:capitalize; }
.ms-list { display:grid; gap:2px; }
.ms-i { display:flex; align-items:center; gap:14px; width:100%; min-height:50px; padding:0 12px; border-radius:12px; border:0; background:none; font:inherit; font-size:15.5px; font-weight:500; color:var(--ink); text-align:left; cursor:pointer; position:relative; }
.ms-i svg.i { width:21px; height:21px; color:var(--muted); }
.ms-i .l { flex:1; }
.ms-i:active { background:var(--hover); }
@media (hover: hover) { .ms-i:hover { background:var(--hover); } }
.ms-i.on { background:var(--accent-soft); color:var(--accent-text); }
.ms-i.on svg.i { color:var(--accent); }
.ms-i[data-install] { color:var(--accent-text); }
.ms-i[data-install] svg.i { color:var(--gold); }
.ms-i.ms-out { color:var(--bad); margin-top:6px; border-top:1px solid var(--line); border-radius:0 0 12px 12px; }
.ms-i.ms-out svg.i { color:var(--bad); }
.ms-h { display:flex; align-items:center; gap:12px; padding:4px 4px 10px; }
.ms-h b { display:block; font:700 18px/1.2 Montserrat, sans-serif; }
.ms-h span { color:var(--muted); font-size:13px; }
.ios-steps { margin:6px 0 16px; padding-left:22px; line-height:2.1; color:var(--ink-2); }
.ios-steps svg.i { width:17px; height:17px; vertical-align:-3px; color:var(--accent-text); }
.ms-done { width:100%; height:44px; }
@media (min-width: 821px) {
  /* on a desktop the same sheet floats in the middle */
  .ms-card { left:50%; right:auto; bottom:auto; top:50%; width:min(420px, calc(100vw - 32px)); border-radius:18px; padding:16px 20px 20px; transform:translate(-50%, -46%); opacity:0; transition:transform .25s var(--ease), opacity .2s; }
  .msheet.open .ms-card { transform:translate(-50%, -50%); opacity:1; }
  .ms-grab { display:none; }
}

/* ── Offline bar ───────────────────────────────────────────────── */
#netbar { position:fixed; z-index:350; left:50%; top:max(10px, env(safe-area-inset-top)); transform:translateX(-50%); display:flex; align-items:center; gap:9px;
  max-width:calc(100vw - 24px); padding:8px 14px; border-radius:99px; background:var(--ink); color:var(--bg); font-size:13px; font-weight:500; box-shadow:var(--shadow-lg); animation:netin .3s var(--ease); }
#netbar i { width:8px; height:8px; border-radius:50%; background:#f59e0b; flex:none; animation:pulse 1.6s infinite; }
#netbar.back i { background:#22c55e; animation:none; }
#netbar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@keyframes netin { from { opacity:0; transform:translate(-50%, -8px); } }
.offline-view .login-card { text-align:center; }
.offline-view .login-card .mark { margin:0 auto 18px; }

/* ── Small-screen fixes for existing screens ───────────────────── */
/* Clients → Clients: name gets the full width, code/status/group drop under it */
@media (max-width: 560px) {
  .crow { flex-wrap:wrap; column-gap:12px; row-gap:6px; padding:12px 14px; }
  .crow .cmain { flex:1 1 calc(100% - 38px - 18px - 24px); order:0; }
  .crow > svg.i { order:1; }
  .crow > .code, .crow > .pill, .crow > .wtag { order:2; }
  .crow > .code { margin-left:50px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-card, .ms-back, #netbar { transition:none; animation:none; }
}