/* REA platform shell. Boje dolaze isključivo iz foundation tokena. */

/* ══ ČITLJIVOST — JEDNA RUČICA (CTO zakon 2026-08-19; mera 125% CTO 2026-08-30) ══════════
   Vendorovan `foundation/core.css` (dashboard-foundation v0.65.0) nosi `html{font-size:14px}`,
   pa je SVAKI `rem` u celom foundation paketu bio ×14 umesto ×16. Izmereno na živim klasama
   ove aplikacije, pre popravke:

       .data-table td  .78rem → 10.9px      .data-table th  .75rem → 10.5px
       .data-table     .82rem → 11.5px      .btn            .82rem → 11.5px
       input/select    .85rem → 11.9px      .stat-box .l    .68rem →  9.5px
       .card-title      .9rem → 12.6px      .empty-state    .78rem → 10.9px

   To je izvor „8px/9px" nalaza iz povoda zakona — telo tabele je bilo 10.9px.

   Vendorovan fajl se NE dira (KANON-ŠAV K6: pisac je `dashboard-foundation`, ne mi);
   override ide OVDE, u repo-vlasnički fajl koji base šabloni učitavaju POSLE njega.
   ⚠ Redosled <link>-ova je deo popravke, ne stil: preokreni ga i root tiho pada na 14px,
   bez ijedne greške. Zato ga meri kapija (`scripts/font_floor_selftest.py`, provera 2).

   Zašto root skala, a ne prepisivanje 39 pojedinačnih pravila: u vendorovanom paketu `rem`
   se koristi ISKLJUČIVO za font-size — geometrija (padding/margin/gap/radius) je u px
   (mereno: 0 rem-geometrija u core.css, 49/50 rem-a u components.css su font-size).
   Root skala zato pomera SAMO tekst; raspored ostaje bajt-isti.

   Posle popravke (root 20px) nijedna ŽIVA klasa ne pada ispod 12px — najniža je
   `.stat-box .l` = 13.6px, telo tabele 15.6px, polja 17px. Četiri sub-12px deklaracije
   koje ostaju u vendorovanom CSS-u (`.topbar-stat-lbl` 11.0px, `.ob-metric` i
   `.ob-fleet-row` 11.6px, `.it-toolbar .it-filter` 11px) su INERTNE — nijedan šablon ovog
   repoa ih ne koristi. Kapija meri baš to: prestaju da budu inertne u trenutku kad ih neko
   upotrebi, i tada pada uz uputstvo da se rešava DISPATCH-om vlasniku, ne lokalnom izmenom.

   Ista dva tokena i ista vrednost stoje u `rea/web/templates/base.html` (Tailwind površina);
   kapija pada ako se te dve površine raziđu. */
:root { --root-font-base: 16px; --root-font-scale: 1.25; }
html { font-size: calc(var(--root-font-base) * var(--root-font-scale)); }

/* Jedini ŽIV hardkod koji root skala ne podiže: `.fb-search` je `font-size: 12px`
   (components.css:440) — polje za UNOS na apsolutnom minimumu zakona. Poravnato sa ostalim
   poljima paketa (`input, select, textarea` = .85rem = 17px). */
.fb-search { font-size: 0.85rem; }

:where(a) {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

:where(a:hover) { color: var(--accent-hover); }

:where(button, input, select, textarea):focus-visible,
:where(a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 1300;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  transform: translateY(-160%);
}

#skip-link:focus { transform: translateY(0); }

#brand {
  color: var(--text-bright);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
}

#brand span {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 500;
}

/* Javni storefront */
#site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

#site-header > div,
#site-footer > div,
#content > :where(section, article),
body[data-shell="public"] #content > :where(.page-header, .summary-header, .card, .grid, .grid-1, .grid-2, .grid-3, .grid-auto, .empty-state) {
  /* Čitljiva kolona: 1120px na 16px pismu drži ~75 znakova u redu; na 20px pismu bi
     palo na ~60 i tekst bi izgledao „razbijeno". Ista ručica drži dužinu reda. */
  width: min(calc(1120px * var(--root-font-scale)), calc(100% - 32px));
  margin-inline: auto;
}

#site-header > div {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

#site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

#site-nav a:not(.btn) { text-decoration: none; }

#shell-menu-toggle { display: none; }

#content { min-height: calc(100vh - 180px); }

#content > :where(section, article),
body[data-shell="public"] #content > :where(.page-header, .summary-header, .card, .grid, .grid-1, .grid-2, .grid-3, .grid-auto, .empty-state) {
  margin-block: 32px;
}

[data-hero] {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  align-items: center;
  gap: 34px;
}

[data-hero] h1 {
  color: var(--text-bright);
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 14ch;
}

[data-hero] > div > p {
  color: var(--text-dim);
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 60ch;
  margin-block: 18px;
}

[data-eyebrow] {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-section-heading] {
  margin-block-end: 18px;
  max-width: 68ch;
}

[data-section-heading] h2 {
  color: var(--text-bright);
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.2;
}

[data-section-heading] p { color: var(--text-dim); margin-block-start: 7px; }

[data-plan-card][data-current="true"] { border-color: var(--status-ok); }

[data-content-block] :where(h2, h3) {
  color: var(--text-bright);
  margin-block: 1.35em 0.45em;
}

[data-content-block] :where(p, ul, ol) { margin-block: 0.65em; }
[data-content-block] :where(ul, ol) { padding-inline-start: 1.5rem; }
[data-content-block] li + li { margin-block-start: 0.4em; }

details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}

details + details { margin-block-start: 10px; }
summary { color: var(--text-bright); cursor: pointer; font-weight: 600; }
details > p { color: var(--text-dim); margin-block-start: 10px; }

#site-footer {
  margin-block-start: 48px;
  padding-block: 28px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

#site-footer > div { display: grid; gap: 9px; }
#site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }

/* Portal/admin shell bez dashboard-core.js zavisnosti. */
body[data-shell="portal"],
body[data-shell="admin"] {
  display: grid;
  /* Panel drži tekst; kad tekst poraste za 25%, i on mora — inače se „Pretplata i računi"
     lomi u dva reda. Ista ručica, ne nova konstanta (uzor: dashboard-foundation
     `--shell-sidebar-width: calc(220px * ui-scale * root-font-scale)`). */
  grid-template-columns: calc(248px * var(--root-font-scale)) minmax(0, 1fr);
  grid-template-rows: 58px minmax(calc(100vh - 58px), auto);
}

#shell-sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 18px 12px;
  background: var(--sidebar-bg);
  border-inline-end: 1px solid var(--border);
  z-index: 120;
}

#shell-sidebar > #brand { padding-inline: 9px; }

#shell-sidebar nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

#shell-sidebar nav a {
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}

#shell-sidebar nav a:hover { background: var(--sidebar-hover); color: var(--text-bright); }
#shell-sidebar nav a[aria-current="page"] { background: var(--sidebar-active); color: var(--accent); font-weight: 600; }
#shell-sidebar form .btn { width: 100%; }

#shell-topbar {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  inset-block-start: 0;
  z-index: 110;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-inline: 22px;
  background: var(--topbar-bg);
  border-block-end: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

#shell-topbar > a { color: var(--text-bright); text-decoration: none; }

#portal-content,
#admin-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 24px;
}

body[data-shell="auth"] #admin-content {
  width: min(520px, calc(100% - 32px));
  margin: 8vh auto 0;
}

.page-header { margin-block-end: 18px; }
.page-header + :where(.summary-cards, .grid, .grid-1, .grid-2, .grid-3, .grid-auto, .card, .filter-bar) { margin-block-start: 0; }
.summary-cards { margin-block-end: 18px; }
.card + .card, .grid + .card, .card + .grid, .grid-1 + .card, .card + .grid-1 { margin-block-start: 16px; }

:where(form)[data-form] { display: grid; gap: 14px; }
:where(form)[data-form] > .btn { justify-self: start; }

[data-actions] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
[data-inline-form] { display: inline-flex; gap: 6px; align-items: center; }
[data-checkboxes] { display: flex; flex-wrap: wrap; gap: 10px 18px; }
[data-checkboxes] label { display: inline-flex; align-items: center; gap: 7px; }

[data-code], code, pre {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

pre {
  padding: 12px;
  border-radius: 6px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  white-space: pre-wrap;
}

[role="alert"] {
  padding: 10px 12px;
  border: 1px solid var(--status-critical);
  border-radius: 6px;
  background: var(--status-critical-bg);
  color: var(--status-critical);
}

[role="status"] {
  padding: 10px 12px;
  border: 1px solid var(--status-info);
  border-radius: 6px;
  background: var(--status-info-bg);
}

[data-pairs] {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr);
  gap: 7px 14px;
}

[data-pairs] dt { color: var(--text-dim); }
[data-pairs] dd { color: var(--text-bright); overflow-wrap: anywhere; }

[data-table-search][hidden],
[data-filter-row][hidden] { display: none; }

[data-drawer][aria-hidden="false"] { transform: translateX(0); }
[data-drawer-overlay]:not([hidden]) { opacity: 1; pointer-events: auto; }

@media (max-width: 780px) {
  #shell-menu-toggle { display: inline-flex; }

  #site-nav {
    position: absolute;
    inset: 64px 16px auto;
    display: none;
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
  }

  body[data-menu-open="true"] #site-nav { display: flex; }

  [data-hero] {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-block: 30px;
  }

  body[data-shell="portal"],
  body[data-shell="admin"] {
    display: block;
  }

  #shell-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(calc(290px * var(--root-font-scale)), 86vw);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }

  body[data-menu-open="true"] #shell-sidebar { transform: translateX(0); }

  #shell-topbar {
    min-height: 58px;
    justify-content: space-between;
    padding-inline: 14px;
  }

  #portal-content, #admin-content { padding: 18px 14px; }
  [data-pairs] { grid-template-columns: 1fr; }
}

/* ══ Paketi — kartice jedna ispod druge, čitljive metrike (redizajn 2026-10-07) ══════════
   Pre: `.grid-auto` je terao kartice u kolone od ~330px, a vendored `.stat-box`
   (repeat(4,1fr) + overflow:hidden) je sekao labele ("signala po isporuci" je
   izlazilo kao "isporu"). Kartice su sada pune širine, jedna ispod druge, a svaka
   metrika ima dovoljno prostora da se labela prikaže CELE. Vendor se ne dira (K6). */
.plans-stack { display: grid; gap: 18px; }

.plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head price"
    "summary price"
    "metrics metrics"
    "foot foot";
  align-content: start;
  gap: 6px 28px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.plan-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-neon);
}

.plan-card-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-price {
  grid-area: price;
  align-self: center;
  text-align: right;
  white-space: nowrap;
}

.plan-price-v {
  font-family: var(--mono);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.02em;
}

.plan-price-per { color: var(--text-dim); font-size: 0.85rem; }

.plan-summary {
  grid-area: summary;
  color: var(--text);
  max-width: 72ch;
  margin: 0;
}

.plan-metrics {
  grid-area: metrics;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.plan-metrics li {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  align-content: start;
}

.plan-metrics strong {
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--text-bright);
}

.plan-metrics span {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.35;
}

.plan-card-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block-start: 10px;
}

@media (max-width: 720px) {
  .plan-card {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "price" "summary" "metrics" "foot";
  }
  .plan-price { text-align: left; }
  .plan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hero u tamnoj temi: suptilan sjaj iz istih tokena, bez novih boja. */
body[data-shell="public"] [data-hero] { position: relative; isolation: isolate; }
body[data-shell="public"] [data-hero]::before {
  content: "";
  position: absolute;
  inset: -48px -24px;
  background: radial-gradient(640px 320px at 22% 0%, rgb(var(--deco-1-rgb) / 0.09), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; transition-duration: 0.01ms; animation-duration: 0.01ms; }
}