/* App shell: login, left rail, top bar, content */

/* ── Login — "detection scope" ──
   Immersive graphite scene with a slow radar sweep behind a glass panel, a
   monogram that pulses like a live sensor, and instrument-readout (mono)
   labels. Theme-invariant on purpose (reads as an instrument boot screen). */
#login{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 38%,#161B24 0%,#0B0E13 58%,#070910 100%)}
.ldetector{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none}
.ldetector .lring{position:absolute;border-radius:50%;border:1px solid rgba(229,56,79,.10)}
.ldetector .r1{width:300px;height:300px}
.ldetector .r2{width:560px;height:560px;border-color:rgba(229,56,79,.07)}
.ldetector .r3{width:840px;height:840px;border-color:rgba(229,56,79,.05)}
.ldetector .lsweep{position:absolute;width:840px;height:840px;max-width:150vw;max-height:150vw;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 268deg,rgba(229,56,79,.05) 300deg,rgba(229,56,79,.30) 358deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,#000 0%,#000 40%,transparent 72%);
          mask:radial-gradient(circle,#000 0%,#000 40%,transparent 72%);
  animation:lsweep 14s linear infinite}
@keyframes lsweep{to{transform:rotate(360deg)}}

.lcard{position:relative;z-index:1;width:400px;max-width:92vw;padding:30px 30px 22px;overflow:hidden;
  background:rgba(17,21,29,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.09);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.lhead{display:flex;flex-direction:column;gap:15px;margin-bottom:22px}
/* GEORADIS wordmark on a white plate — reads on the dark panel and echoes the
   letterhead. src is set from js/logo.js (the same asset used on the PDFs). */
.llogo{align-self:flex-start;background:#fff;border-radius:10px;padding:9px 14px;
  box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.llogo img{display:block;height:26px;width:auto}
.lid{min-width:0}
.lhead b{display:block;color:#EEF2F8;font-size:29px;font-weight:800;letter-spacing:-.5px;line-height:1}
.leyebrow{display:block;margin-top:5px;text-transform:uppercase;color:#8A93A0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbody{display:flex;flex-direction:column;gap:14px}
.lfield label{display:block;margin-bottom:6px;text-transform:uppercase;color:#8A93A0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.14em}
.lfield input{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:11px 13px;font-size:14px;outline:none;background:rgba(255,255,255,.04);color:#EEF2F8;
  transition:border-color .15s,box-shadow .15s}
.lfield input::placeholder{color:#5A626E}
.lfield input:focus{border-color:#E5384F;box-shadow:0 0 0 3px rgba(229,56,79,.22)}
.lbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:6px;
  border:none;border-radius:11px;padding:12px;cursor:pointer;color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg,#C0212F,#E5384F);box-shadow:0 6px 18px rgba(192,33,47,.40);
  transition:box-shadow .18s,transform .05s}
.lbtn:hover:not(:disabled){box-shadow:0 8px 26px rgba(229,56,79,.55)}
.lbtn:active:not(:disabled){transform:translateY(1px)}
/* Ships disabled until app.js is loaded (see index.html) — brief, but it must
   not look clickable while it is inert. Also covers doLogin's in-flight state. */
.lbtn:disabled{opacity:.55;cursor:default;box-shadow:none}
.lbtn .lbtn-arw{transition:transform .18s}
.lbtn:hover:not(:disabled) .lbtn-arw{transform:translateX(4px)}
.lerr{color:#ffb3bd;background:rgba(229,56,79,.14);border:1px solid rgba(229,56,79,.4);
  border-radius:9px;padding:9px 12px;font-size:13px;display:none}
@media (prefers-reduced-motion:reduce){
  .ldetector .lsweep{animation:none}
}

/* ── Shell grid ── */
#app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* ── Left rail (dark in both themes — rail tokens only shift a step) ── */
.rail{background:var(--rail);color:var(--rail-tx);display:flex;flex-direction:column;
  padding:18px 14px;gap:3px;position:sticky;top:0;height:100vh}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:6px 8px 16px}
.brand .brand-logo{height:22px;width:auto;display:block}
.brand b{color:#fff;font-size:14px;font-weight:700;letter-spacing:-.2px}
.nav-h{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#7c747a;
  padding:14px 10px 6px;font-weight:700}
.nav{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  color:var(--rail-tx);font-weight:600;border:none;background:none;width:100%;
  text-align:left;font-size:13.5px;position:relative}
.nav:hover{background:rgba(255,255,255,.07);color:#F3EEEF}
/* active: quiet fill + 3px red signal bar at the rail edge (red ≠ surface) */
.nav.on{background:var(--rail-hi);color:#fff}
.nav.on:not(.sub)::before{content:"";position:absolute;left:-14px;top:7px;bottom:7px;
  width:3px;border-radius:0 3px 3px 0;background:var(--red-fill)}
.nav.sub.on{background:none}
.nav .badge{margin-left:auto;background:rgba(255,255,255,.16);color:#fff;font-size:11px;
  font-weight:700;padding:1px 7px;border-radius:20px}
/* rail sub-nav (module sub-views, e.g. Obchod → Objednávky/Nabídky/Poptávky) */
.subnav{display:none;flex-direction:column;gap:2px;margin:1px 0 5px;padding-left:14px}
.subnav.open{display:flex}
.nav.sub{padding:7px 11px;font-size:13px}
.nav.sub::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.45;flex:0 0 auto}
.nav.sub.on::before{opacity:1}
.nav.grp{color:#F3EEEF;background:rgba(255,255,255,.06)}
.me{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;
  background:var(--rail-2);margin-top:8px}
.me .av{width:32px;height:32px;border-radius:50%;background:#5a2a30;color:#f6d9dd;
  display:grid;place-items:center;font-weight:700;font-size:13px}
.me b{color:#F3EEEF;font-size:13px;display:block}
.me small{color:#867e83;font-size:11.5px}
.me .out{margin-left:auto;color:#867e83;background:none;border:none;font-size:16px}
.me .out:hover{color:#F3EEEF}
/* theme toggle sits beside the logout button in the user box */
.me .theme{color:#867e83;background:none;border:none;font-size:15px;margin-left:auto;padding:0 2px}
.me .theme:hover{color:#F3EEEF}
.me .theme + .out{margin-left:0}
.me .theme svg.ic,.me .out svg.ic{width:15px;height:15px;vertical-align:-3px}

/* ── Main column ── */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:var(--top-bg);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:13px 26px}
.top b{font-size:18px;font-weight:700}
/* breadcrumb: muted module path, bold leaf ("Sklad / Součásti") */
#crumb .path{color:var(--ink-2);font-weight:600}
#crumb .sep{color:var(--ink-3);font-weight:400;padding:0 7px}
/* read-only indicator (mirrors the .ro class hiding mutating controls) */
.rochip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  background:var(--mut-t);color:var(--ink-2);border-radius:14px;padding:4px 11px;white-space:nowrap}
.content{padding:16px 26px 36px;overflow:auto}

/* global search trigger (opens the Ctrl+K palette) */
.top .ksearch{display:flex;gap:8px;align-items:center;border:1px solid var(--line);
  background:var(--ground);border-radius:8px;padding:6px 12px;color:var(--ink-2);
  font-size:12px;width:220px;text-align:left;flex:0 1 auto}
.top .ksearch:hover{border-color:var(--red);color:var(--red-d)}
.top .ksearch span{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.top .ksearch kbd{font:600 9.5px ui-monospace,Menlo,Consolas,monospace;
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:var(--card)}
@media(max-width:700px){
  .top .ksearch{width:38px;padding:6px 0;justify-content:center}
  .top .ksearch span,.top .ksearch kbd{display:none}
}

/* top bar icon button (density toggle etc.) */
.top .tico{border:1px solid var(--line);background:var(--card);border-radius:8px;
  width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2);flex:0 0 auto}
.top .tico:hover{color:var(--red-d);border-color:var(--red)}
.top .tico svg.ic{width:15px;height:15px}
html.t-compact .only-comf{display:none!important}
html:not(.t-compact) .only-comp{display:none!important}

/* hamburger — hidden on desktop, shown on mobile */
.navtoggle{display:none;border:1px solid var(--line);background:var(--card);border-radius:9px;
  width:38px;height:38px;font-size:18px;color:var(--ink);flex:0 0 auto;place-items:center}
.rail-bk{display:none}

@media(max-width:900px){
  #app{grid-template-columns:1fr}
  /* rail becomes an off-canvas drawer */
  .rail{position:fixed;left:0;top:0;z-index:40;width:264px;max-width:84vw;height:100vh;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.45)}
  .rail.open{transform:none}
  .rail-bk{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39}
  .rail-bk.open{display:block}
  .navtoggle{display:grid}
}

/* ── access control ─────────────────────────────────────────── */
/* Hidden nav items / section headers the user has no read access to. */
.perm-hidden { display: none !important; }
/* Read-only screen: hide mutating controls (add / row actions / delete).
   Writes are also blocked server-side; this is the matching UX. */
.ro .rowact,
.ro .btn.pri,
.ro .btn.danger { display: none !important; }