/* Selfievo · layout.css — the shell of the light customer theme.

   Widths (plan §4.3):
     ≥1280 px     rail + main + side panel
     1024–1279 px rail + main; the side panel goes under the main column
     768–1023 px  narrow rail (icons); the side panel under the main column
     <768 px      no rail; bottom tabs; the schema is a list */

/* Ported unchanged from app/static/app.css (slice U-A0, plan-api-first-rebuild.md §2.2): the blocks „shell“, „widths“, the icon rail and the admin view. */

/* --- shell -------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
}
/* The white column of the menu reaches the end of a long page (QA2-24): the
   sticky menu is one screen high, so a full-page capture or a print showed
   grey under it. The grid paints the column; the menu stays sticky on it. */
.app:not(.bare) {
  background: linear-gradient(to right, var(--surface) 0 calc(var(--rail-w) - 1px),
    var(--border) calc(var(--rail-w) - 1px) var(--rail-w), transparent var(--rail-w)) no-repeat;
}
.app.bare { grid-template-columns: minmax(0, 1fr); }
.app.has-aside { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--aside-w); }
.app.has-aside.aside-narrow { --aside-w: 320px; }

.topbar {
  grid-column: 1 / -1;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 9px; font: 650 16px var(--font-display); text-decoration: none; }
.logo {
  width: 28px; height: 28px; border-radius: 8px; background: var(--brand-mark); color: #fff;
  display: grid; place-items: center; font: 800 15px var(--font-display);
}
.shop {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 8px;
  padding: 3px 12px 3px 3px; border: 1px solid var(--border); border-radius: var(--r-pill);
  font-weight: 650; font-size: 13px; text-decoration: none; white-space: nowrap; min-width: 0;
}
.shop-name { overflow: hidden; text-overflow: ellipsis; }
.av {
  width: 26px; height: 26px; border-radius: 50%; background: #1E4E9C; color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none;
}
/* The market select „Trh“: the select component (block „UI-B components“ below). */
.market { display: inline-flex; align-items: center; gap: 8px; min-width: 0; position: relative; }
.search {
  margin-left: auto; width: 300px; height: 36px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-muted);
}
.search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13px; color: var(--text); }
.search input::placeholder { color: var(--text-muted); }
.search:focus-within { box-shadow: var(--focus-ring); }
.search.big { margin-left: 0; width: 340px; height: 40px; background: var(--surface); }
.iconbtn.search-mini { display: none; }
.iconbtn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); position: relative;
  cursor: pointer; text-decoration: none;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #2A2A2A; color: #fff; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

.rail {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column; gap: 2px; padding: 14px 12px;
  background: var(--surface); border-right: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-s);
  color: var(--text-dim); font-weight: 550; font-size: 14px; text-decoration: none;
}
.nav:hover { background: var(--surface-2); color: var(--text); }
.nav .ico { opacity: .8; }
.nav.on { background: var(--accent-subtle); color: var(--text); font-weight: 650; }
.nav.on .ico { color: var(--accent); opacity: 1; }
.cnt {
  margin-left: auto; font-size: 11px; font-weight: 700; background: var(--accent); color: #fff;
  border-radius: var(--r-pill); padding: 1px 7px; line-height: 1.5;
}
.railfoot {
  margin-top: auto; padding: 12px; border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}
.railfoot b { color: var(--text); font-weight: 650; }
.railfoot .who { word-break: break-all; }
.railfoot a { color: var(--text-dim); }
/* „Odhlásit se“ is a POST form (CSRF); the button looks like the links above it. */
.railfoot .signout { margin: 0; }
.railfoot .linkbtn {
  padding: 0; border: 0; background: none; font: inherit; color: var(--text-dim);
  text-decoration: underline; cursor: pointer;
}
.railfoot .linkbtn:hover { color: var(--accent-hover); }

.main { min-width: 0; padding: 26px 34px 48px; }
.main:focus { outline: none; }
[id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.aside {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 22px 20px 32px; background: var(--surface); border-left: 1px solid var(--border);
}
.tabbar { display: none; }


/* Domů: the base rules stay here, before the media block, so the narrow rules below win (tests/web/test_css_cascade.py). */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 26px; max-width: 1190px; }
.home-side { display: flex; flex-direction: column; gap: 16px; }
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
/* Rows and the composer of Domů / Požadavky: base rules before the media block for the same reason. */
.row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
.row-kind { flex: none; min-width: 92px; justify-content: center; }
.row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose { padding: 18px 20px 14px; border-radius: 24px; }
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }

/* --- widths ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
  .app.has-aside { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .aside {
    grid-column: 2; position: static; height: auto; overflow: visible;
    margin: 0 34px 40px; border: 1px solid var(--border); border-radius: var(--r-l);
  }
  .home { grid-template-columns: minmax(0, 1fr); }
  .home-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .search { width: 220px; }
}

@media (max-width: 1023px) {
  :root { --rail-w: 72px; }
  .nav { justify-content: center; padding: 10px; position: relative; }
  .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav .cnt { position: absolute; top: 2px; right: 4px; margin: 0; }
  .railfoot { display: none; }
  .main { padding: 22px 22px 40px; }
  .aside { margin: 0 22px 32px; }
  .svc { grid-template-columns: minmax(0, 1fr); }
  .search { display: none; }
  .search.big { display: flex; }  /* the search of a page body stays: the top-bar box is the one that goes */
  .iconbtn.search-mini { display: grid; margin-left: auto; }
}

@media (max-width: 767px) {
  .app, .app.has-aside { grid-template-columns: minmax(0, 1fr); }
  .app:not(.bare) { background: none; }
  .rail { display: none; }
  .aside { grid-column: 1; margin: 0 14px 24px; padding: 16px; }
  .topbar { gap: 8px; padding: 0 12px; }
  .brand-name { display: none; }
  .shop { margin-left: 0; padding-right: 3px; }
  .shop-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* the initials stay, the name is for a screen reader */
  .market { max-width: 56vw; }
  .market .sel { max-width: 100%; }
  /* The word „Trh“ stays for a screen reader only. */
  .market .sel-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .main { padding: 18px 14px 96px; }
  h1 { font-size: 24px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
  .tab .ico { width: 20px; height: 20px; }
  .tab.on { color: var(--accent); }
  /* QA S0 C3: the count of „Čeká na vás“ on the tab Domů, at the top right of the icon. */
  .tab { position: relative; }
  .tab .tab-cnt { position: absolute; top: 0; left: calc(50% + 6px); margin: 0; padding: 0 6px; font-size: 10.5px; }
  .compose { border-radius: var(--r-l); padding: 14px; }
  .compose-ph { font-size: 14.5px; min-height: 0; }
  .compose .chips { flex-wrap: wrap; }  /* U-D1c: no scroll row; a clipped chip had no cue */
  .compose-foot { flex-direction: column; align-items: stretch; }
  .home-side { grid-template-columns: minmax(0, 1fr); }
  .waitcard-foot { flex-direction: column; align-items: stretch; }
  .row { flex-wrap: wrap; gap: 6px 10px; }
  .row-kind { min-width: 0; }
  .row-body { flex-basis: 100%; order: 2; }
  .row-meta { white-space: normal; }
  .pill { order: 1; }
  .ws-axis, .ws-row { grid-template-columns: 44px minmax(0, 1fr); }
  .seg { font-size: 10px; padding: 0 4px; }
  .simform .fld { flex: 1 1 40%; }
  .simform .btn { flex: 1 1 100%; }
  .howto dl div { grid-template-columns: 1fr; }
  /* the schema becomes a list (plan §4.3) */
  .flow { flex-direction: column; gap: 10px; overflow: visible; }
  .node { width: auto; max-width: none; min-width: 0; }
  .node:not(:last-child)::after { content: "↓"; right: auto; left: 14px; top: auto; bottom: -15px; transform: none; }
  .schema-bar .more { margin-left: 0; }
  .search.big { width: 100%; }
  .page-tools { width: 100%; }
  .banner { flex-wrap: wrap; }
}

/* --- the icon rail with a label: the edit mode of Cesta hovoru (owner pass 2026-10-18, P2-RAIL) -----
   The owner chose variant B of `docs/design/owner-pass-2026-10-18/mock-rail-variants.png`: the rail
   of the state below 1024 px (72 px, icons centred) with an 11 px label under each icon, so the
   operator needs no hover. The page asks for it with `e-rail-b` on the menu (the template of the
   page passes `shell_class`). Without the class nothing changes. Below 768 px the rail stays hidden
   (the tab bar takes over). */

:root { --rail-w-b: 72px; }  /* one number, so the app grid and the menu stay the same width */
@media (min-width: 768px) {
  .app:has(.rail.e-rail-b) { --rail-w: var(--rail-w-b); }
  /* The grid paints the white column of the menu (`.app:not(.bare)`); the linear-gradient reads
     --rail-w at use time, so the menu and the main column meet at the same 72 px. */
  .rail.e-rail-b .nav { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 2px 6px; }
  .rail.e-rail-b .nav-label {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
    font: 500 11px/1.2 var(--font-body); text-align: center;
  }
  .rail.e-rail-b .nav .ico { width: 20px; height: 20px; }
  .rail.e-rail-b .railfoot { display: none; }
  /* The count sits at the top right of the icon. */
  .rail.e-rail-b .nav .cnt { position: absolute; top: 1px; right: 2px; margin: 0; }
}

/* --- the admin view of a customer (threads-f2 v1.4 §7.11) ------------------------------------
   A fixed bar above the top bar: „Pohled zákazníka – {firma} – jen ke čtení“
   and „Zpět do obsluhy“. The sticky parts of the shell move down by its
   height. */

body.adminview { --viewbar-h: 40px; }
.viewbar {
  position: sticky; top: 0; z-index: 40; height: var(--viewbar-h);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--viewbar-bg); color: var(--viewbar-ink); font-size: 13.5px; font-weight: 600;
}
.viewbar p { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewbar-k { color: var(--viewbar-key); font-weight: 750; letter-spacing: .02em; }
.viewbar-back {
  flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .45); color: var(--viewbar-ink); text-decoration: none; font-weight: 650;
}
.viewbar-back:hover { background: rgba(255, 255, 255, .12); color: var(--viewbar-ink); }
.viewbar-back:focus-visible { outline: 2px solid var(--viewbar-key); outline-offset: 2px; }
.adminview .topbar { top: var(--viewbar-h); }
.adminview .rail, .adminview .aside {
  top: calc(var(--topbar-h) + var(--viewbar-h)); height: calc(100vh - var(--topbar-h) - var(--viewbar-h));
}
.adminview [id] { scroll-margin-top: calc(var(--topbar-h) + var(--viewbar-h) + 16px); }
@media (max-width: 767px) {
  body.adminview { --viewbar-h: 52px; }
  .viewbar { padding: 0 12px; gap: 10px; font-size: 12.5px; line-height: 1.3; }
  .viewbar p { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}


/* The narrow column of a bare page (error pages; from the block „Požadavky, Historie“ of app.css). */
.narrow { max-width: 640px; margin: 0 auto; }
.narrow.center { padding-top: 48px; }

/* Frame (slice U-F1): the tenant picker and the hub „Správa“ (ported from app/static/app.css, staff.css). */
.picker .row { justify-content: space-between; }
.st-hub { display: grid; gap: 22px; max-width: 1100px; }
.st-hub-group h2 { font-size: 15px; margin: 0 0 10px; }
.st-hub-cards {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.st-hub-cards li { display: flex; }
.st-hub-card {
  flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); text-decoration: none;
}
a.st-hub-card:hover { border-color: var(--accent-line); background: var(--surface-2); }
body.staff a.st-hub-card:hover { color: var(--text); }
.st-hub-name { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; }

.iconbtn .bell-n {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; line-height: 1;
}