/* Altoria portal layout — sidebar + topbar + content grid.
 *
 * Loaded only on /centrala/, /partner/, /radnik/, /klijent/ portal
 * pages (which use centrala/_layout.html). Legacy single-tenant
 * pages still use base.html and don't load this file.
 *
 * All values come from --aco-* / --as-* / --ar-* tokens in
 * altoria-tokens.css — switching theme variants in Sprint 2 Day 5
 * just swaps tokens; no rules below need updating.
 */

/* ── Body + shell ──────────────────────────────────────────────────── */

.portal-body {
  background: var(--aco-bg);
  color: var(--aco-text);
  font-family: var(--af-body);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

.portal-shell {
  /* Stage 3.8k (2026-05-23) — VRAĆENO na originalno grid layout.
   * Stage 3.8e display:block je u nekim slučajevima ostavljao main
   * u flow poziciji DESETKE viewporta od vrha (uzrok "Velikog Gapa"
   * iznad topbara koji je Daniel više puta javljao). Grid layout je
   * deterministički: column 1 (sidebar, 0px sad jer je fixed pa
   * ne treba prostor), column 2 (main, 1fr = pun width). */
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  z-index: 2;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */

.portal-sidebar {
  /* Stage 3.8e (2026-05-23) — PERMANENT FIX za sidebar gap.
   *
   * Prijašnji `position: sticky + height: 100vh + align-self: stretch`
   * pristup je teoretski trebao raditi ali u praksi:
   *   • Grid row je određen najvišim child-om. Sticky element zauzima
   *     deklariranu visinu u flow-u.
   *   • Browser je tretirao sticky element kao "may shrink" ako
   *     parent layout ima manjeg sadržaja od 100vh.
   *   • Bilo koji ancestor `overflow: hidden` ili scroll context
   *     mogao je prekinuti sticky.
   *
   * Robusno rješenje: `position: fixed` GARANTIRA da sidebar pokriva
   * cijeli viewport (top: 0 → bottom: 0) neovisno o grid layoutu,
   * scroll kontekstu, ili visini main content-a. Premium SaaS pattern
   * (Linear, Stripe, Vercel dashboards koriste fixed sidebar).
   *
   * Trade-off: main content treba `margin-left: 240px` da se ne
   * preklapa sa sidebarom. To je dodano u .portal-main pravilo
   * niže. Mobile (max-width 1100px media query) ostavlja sidebar
   * static jer tamo se i tako prelazi u stacked layout. */
  display: flex;
  flex-direction: column;
  padding: var(--as-4) var(--as-3);
  border-right: 1px solid var(--aco-glass-border);
  background: var(--aco-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;          /* `bottom: 0` + `top: 0` = always full viewport
                         height, ignores 100vh / 100dvh edge cases */
  width: 240px;
  z-index: 20;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Stage 3.8k — shell je grid; main mora eksplicitno biti u 2.
 * koloni (1. je 0px placeholder za fixed sidebar). Bez ovog, grid
 * auto-placement bi mogao staviti main u 1. kolonu. */
.portal-shell > .portal-main,
.portal-shell > main.portal-main {
  grid-column: 2;
  margin-left: 240px;
}
/* Stage 3.8a — push status block (and the bottom slot) to the very
 * bottom of the sidebar tako da nema bijelog/blank gap-a ispod. The
 * sidebar uses column flex; .portal-sidebar-bottom je posljednji
 * child; margin-top: auto ga gura na dno bez obzira na visinu sadržaja. */
.portal-sidebar-bottom {
  margin-top: auto;
}

/* Day-98 — fixed-bottom context band on centrala pages.
   Mirrors the base.html altoria-context-band. The top banner inside
   the layout shows the WHO (active scope) — this slim status strip
   shows it AGAIN persistently at the bottom together with the
   contextual "← Back to <section>" pill (filled by JS from
   ?nav_parent=). macOS Finder / Apple Music status-strip pattern. */
.altoria-context-band {
  position: fixed;
  left: 18px;
  right: auto;
  max-width: 620px;
  bottom: 14px;
  z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 7px 14px;
  background: linear-gradient(180deg,
                 rgba(18, 24, 36, 0.86) 0%,
                 rgba(18, 24, 36, 0.74) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(132,216,184,0.18);
  border-radius: 12px;
  font-size: 11px;
  font-family: var(--af-body, inherit);
  box-shadow: 0 8px 28px rgba(0,0,0,0.32);
}
/* Stage 3.6/3.8a polish (2026-05-23) — Daniel: "Natrag gumb rijesi za
 * sve stranice i za sva sucelja - na nekima i dalje ima layer ispod
 * koji smeta - rijesi Responsivnes kao kod gumba za prijavu Buga".
 *
 * Stage 3.6: kvadratni layer uklonjen (transparent band).
 * Stage 3.8a: REPOZICIONIRAN s bottom-left na BOTTOM-RIGHT, iznad
 * bug-report FAB-a (44x44 + 16px gap iznad bug FAB-a). Razlozi:
 *   1. Bottom-left je preklapao sidebar tabove (vizualni konflikt)
 *   2. Pairs s bug-report FAB (oba su global utility), oba bottom-right
 *   3. Daniel explicit: "Isto rjesenje kao kod gumba za prijavu Buga"
 *
 * Position math: bug FAB je na bottom: 100px; right: 24px (40x40).
 * Natrag se diže na bottom: 156px (100 + 40 + 16 gap) iste right
 * edge. Form a vertical FAB stack. */
.altoria-context-band[data-acb-empty="1"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  gap: 0;
  /* Reposition the floating container itself when it only carries
   * the Natrag FAB. Override band defaults from .altoria-context-band
   * base rule. */
  left: auto !important;
  right: 24px !important;
  bottom: 156px !important;
  max-width: none !important;
}
.altoria-context-band[data-acb-empty="1"] .acb-left { display: none; }
.acb-left {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; flex: 1 1 auto;
}
.acb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--aco-green, #84d8b8);
  box-shadow: 0 0 10px rgba(132,216,184,0.55);
  flex-shrink: 0;
}
.acb-label {
  text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 9px; font-weight: 600;
  color: var(--aco-text-muted, rgba(255,255,255,0.50));
  flex-shrink: 0;
}
.acb-name {
  font-weight: 600; color: var(--aco-text, rgba(255,255,255,0.92));
  font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.acb-right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Polish 2026-05-21 — Phase 4 premium Natrag button.
 * Daniel: "Natrag bi vizualno modernizirao i uljepsao — neka plava
 * nijansa kao chat button. Primjeni moderni, futuristicki dizajn,
 * izradi wow-effect za korisnika."
 *
 * Visual contract:
 *   - Cyan/teal accent (matches the chat FAB that Daniel referenced)
 *   - Soft outer glow at rest, intensifies on hover
 *   - Subtle scale + lift on hover for the wow-tap feel
 *   - Chevron icon glides 2px left on hover (motion cue toward "back")
 *   - Pulse animation on focus-visible for keyboard nav
 *   - Light-theme variant darker cyan, equal contrast
 *   - Respects prefers-reduced-motion: keeps the chip visible but
 *     suppresses scale/glide animations
 */
.acb-back {
  /* Stage 3.6/3.8a (2026-05-23) — Daniel: "Natrag gumb rijesi za sve
   * stranice... rijesi Responsivnes kao kod gumba za prijavu Buga".
   *
   * Pattern parity s .bug-report-fab "Sun" amber-orange:
   *   • Idle: 40x40 krug, opacity 0.72 (povučen, ne intruzivan)
   *   • Hover/focus: ekspanzija u pill, opacity 1, brightness +5%
   *   • Smooth transitions na svim ključnim svojstvima (width, pad,
   *     gap, border-radius, opacity, transform, box-shadow, filter)
   *
   * "Sky" gradient = bljestava cerulean → tealcyan blue (cool family),
   * mirror "Sun" = warm amber-orange (warm family). Forma vizualni
   * "yin-yang" par u FAB stacku bottom-right. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  gap: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.72;
  text-decoration: none;
  background: linear-gradient(135deg, #5fb7ff 0%, #2c87ff 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(44, 135, 255, 0.40),
    0 0 24px rgba(95, 183, 255, 0.28);
  transform: translateY(0);
  transition:
    width 0.22s ease,
    padding 0.22s ease,
    gap 0.18s,
    border-radius 0.22s ease,
    opacity 0.18s ease,
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.20s ease,
    filter 0.18s ease;
}
.acb-back:hover,
.acb-back:focus-visible {
  width: auto;
  padding: 8px 16px 8px 12px;
  gap: 8px;
  border-radius: 999px;
  opacity: 1;
  justify-content: flex-start;
  background: linear-gradient(135deg, #6fc3ff 0%, #3e94ff 100%);
  color: #ffffff;
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 10px 24px rgba(44, 135, 255, 0.52),
    0 0 32px rgba(95, 183, 255, 0.45);
}
.acb-back > span {
  /* Label se prikazuje samo na hover/focus — slide-in iz širine 0. */
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 0.24s ease,
    opacity 0.18s ease,
    margin-left 0.18s ease;
}
.acb-back:hover > span,
.acb-back:focus-visible > span {
  max-width: 160px;
  opacity: 1;
  margin-left: 2px;
}
.acb-back svg {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
  stroke: #ffffff !important;
  color: #ffffff !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Stage 3.6 polish — legacy cyan-glass `.acb-back:hover`, `.acb-back:active`,
 * `:focus-visible` pulse animation i prefers-reduced-motion blok su
 * uklonjeni jer novi "Sky"-gradient collapse-on-idle pattern iznad ima
 * potpunu specifikaciju vlastitog hover/focus stanja. Stari blokovi su
 * kasniji u kaskadi nadjačali nove deklaracije i kvarili FAB izgled. */
.acb-back:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(0.96);
}
@media (prefers-reduced-motion: reduce) {
  .acb-back,
  .acb-back svg { transition: none; animation: none; }
  .acb-back:hover,
  .acb-back:focus-visible { transform: none; }
  .acb-back:hover svg,
  .acb-back:focus-visible svg { transform: none; }
}
/* Stage 3.6 polish — Natrag FAB izgleda isto na svim temama (bljestava
 * plava + bijeli tekst). Stari light-cyan blok uklonjen jer bi gušio
 * novi premium "Sky" gradient. Light tema mora samo malo pojačati
 * outer halo da glow ostane vidljiv na svjetlim podlogama. */
[data-theme="white"] .acb-back,
[data-theme="light"] .acb-back {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 6px 18px rgba(44, 135, 255, 0.50),
    0 0 24px rgba(95, 183, 255, 0.42);
}
[data-theme="white"] .acb-back:hover,
[data-theme="light"] .acb-back:hover,
[data-theme="white"] .acb-back:focus-visible,
[data-theme="light"] .acb-back:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 24px rgba(44, 135, 255, 0.62),
    0 0 32px rgba(95, 183, 255, 0.55);
}

/* Same premium look on the breadcrumb at top of pages. */
.back-breadcrumb .back-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #b8f3ff;
  background: linear-gradient(135deg,
    rgba(99, 230, 255, 0.10) 0%,
    rgba(99, 230, 255, 0.04) 100%);
  border: 1px solid rgba(99, 230, 255, 0.32);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(99, 230, 255, 0.08),
    0 4px 14px -4px rgba(99, 230, 255, 0.22);
  transition:
    background 0.22s ease, border-color 0.22s ease,
    box-shadow 0.22s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.16s ease;
}
.back-breadcrumb .back-link:hover {
  color: #e0fbff;
  background: linear-gradient(135deg,
    rgba(99, 230, 255, 0.22) 0%,
    rgba(99, 230, 255, 0.10) 100%);
  border-color: rgba(99, 230, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(99, 230, 255, 0.16),
    0 8px 24px -6px rgba(99, 230, 255, 0.45),
    0 0 32px -4px rgba(99, 230, 255, 0.35);
  transform: translateY(-1px) scale(1.03);
}
[data-theme="white"] .back-breadcrumb .back-link,
[data-theme="light"] .back-breadcrumb .back-link {
  color: #0a7e9a;
  background: linear-gradient(135deg,
    rgba(8, 145, 178, 0.10) 0%,
    rgba(8, 145, 178, 0.04) 100%);
  border-color: rgba(8, 145, 178, 0.40);
}
[data-theme="white"] .altoria-context-band,
[data-theme="light"] .altoria-context-band {
  background: linear-gradient(180deg,
                 rgba(248, 250, 247, 0.92) 0%,
                 rgba(248, 250, 247, 0.78) 100%);
  border-color: rgba(15, 82, 54, 0.16);
}
[data-theme="white"] .acb-label,
[data-theme="light"] .acb-label { color: rgba(15,82,54,0.55); }
[data-theme="white"] .acb-name,
[data-theme="light"] .acb-name  { color: #1a3326; }
/* Stage 3.8e (2026-05-23) — Daniel: body padding-bottom je uzrokovao
 * bijeli gap ispod sidebar-a. body je >portal-shell> roditelj; padding
 * na njemu otvara prostor BODY-bg-a ispod shell-a. Stage 3.8c uklonio
 * iz base.html, ali je ostao u portal.css za centrala body class
 * (.portal-body). Sad: clearance pripada .portal-main, ne body-u.
 * Bug FAB live na bottom: 100px, ima vlastiti z-index; .portal-main
 * { padding-bottom: 80px } u Stage 3.8e block-u dolje pokriva
 * clearance bez stvaranja gap-a izvan main column-a. */

/* Day-98 — kill the first-paint transition flash.
   Before the page is fully hydrated, the sidebar's `.active` nav link,
   the scope-chip border, the section-toggle caret rotation etc. would
   animate from their initial un-styled state to the hydrated state on
   every page navigation, producing a brief "line appears/disappears"
   under the brand. We suspend transitions until JS sets `js-ready`
   on the body (next animation frame after DOMContentLoaded), so the
   first paint is the settled state with no animation. */
body:not(.js-ready) .portal-sidebar *,
body:not(.js-ready) .portal-nav a,
body:not(.js-ready) .sidebar-scope,
body:not(.js-ready) .sidebar-scope * {
  transition: none !important;
  animation: none !important;
}

.portal-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: var(--aco-text);
  margin-bottom: var(--as-5);
}
.portal-brand img {
  height: 30px;
  width: auto;
  filter: drop-shadow(0 3px 10px rgba(41, 184, 127, 0.25));
}
/* Dual-logo theme toggle — render both, show the one that matches the
 * current data-theme. White wordmark on dark themes, green on light.
 * No JS needed; pure CSS attribute selector. */
.portal-brand .brand-logo-light { display: none; }
[data-theme="light"] .portal-brand .brand-logo-dark { display: none; }
[data-theme="light"] .portal-brand .brand-logo-light { display: inline-block; }
.portal-brand-sub {
  font-family: var(--af-body);
  font-size: 11px;
  color: var(--aco-text-mute2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: -2px;
}

.portal-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.portal-nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--aco-text-muted);
  text-decoration: none;
  border-radius: var(--ar-md);
  transition: all var(--transition-fast);
}
.portal-nav a:hover {
  color: var(--aco-text);
  background: rgba(255, 255, 255, 0.04);
}
.portal-nav a.active {
  color: var(--aco-text);
  font-weight: 600;
  background: linear-gradient(90deg, rgba(41, 184, 127, 0.18), rgba(41, 184, 127, 0.02));
  border-left: 2px solid var(--aco-green);
  padding-left: 12px;
}

.portal-sidebar-bottom {
  margin-top: var(--as-4);
  padding-top: var(--as-4);
  border-top: 1px solid var(--aco-glass-border);
  display: flex;
  flex-direction: column;
  gap: var(--as-3);
}
.portal-status {
  font-size: 12px;
  background: var(--aco-glass-bg);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  padding: var(--as-3);
}
.portal-status-title {
  font-weight: 700;
  color: var(--aco-text);
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.portal-status-line {
  color: var(--aco-text);
  margin: 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.portal-status-line .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.portal-status-line .status-dot.ok { background: var(--aco-green); }
.portal-status-line .status-line-label {
  color: var(--aco-text-muted);
  font-size: 11.5px;
}
.portal-status-line .status-line-value {
  font-size: 11.5px;
  font-weight: 500;
}
.portal-status-line .status-line-value.ok { color: var(--aco-green); }
.portal-status-line:first-child {
  color: var(--aco-text);
  font-weight: 500;
}
.portal-status-line.muted { color: var(--aco-text-mute2); font-size: 11px; }
[data-theme="light"] .portal-status {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(12, 91, 60, 0.10);
  box-shadow: 0 1px 2px rgba(12, 91, 60, 0.04);
}
[data-theme="light"] .portal-status-line .status-line-value.ok { color: #117045; }
[data-theme="light"] .portal-status-line .status-dot.ok { background: #117045; }

.portal-user {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: var(--ar-md);
  background: rgba(255, 255, 255, 0.03);
}
.portal-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aco-green), var(--aco-green-deep));
  color: var(--aco-text-on-green);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.portal-user-name { font-size: 12.5px; font-weight: 600; }
.portal-user-role { font-size: 10.5px; }

/* ── Main column ──────────────────────────────────────────────────── */

.portal-main {
  /* Stage 3.8j (2026-05-23) — VRAĆENO na originalno display: flex
   * jer su moji Stage 3.8h/i pokušaji da fixam sticky topbar slomili
   * layout (blank dashboard). Sticky topbar problem će biti rješen
   * drugačije — vidi `.portal-topbar` rule. */
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Day-98 — Grid topbar with hard column boundaries. Previous flex
   layout let the search bar's pill (with border-radius) visually
   overlap the TEST LAB pill at narrow widths because both have the
   same rounded shape. Grid columns: [search | gap | right-cluster]
   means the search has a hard right edge it can't cross, and the
   gap is enforced by the grid itself, not by margin. */
.portal-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;            /* hard separator search ↔ right cluster */
  align-items: center;
  padding: var(--as-3) var(--as-5);
  border-bottom: 1px solid var(--aco-glass-border);
  background: var(--aco-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  position: sticky;
  top: 0;
  z-index: 10;
  min-width: 0;
  /* Day-98 — overflow must stay VISIBLE on the topbar so the user-menu
     dropdown (and any other popover anchored in the right cluster) can
     escape downward over the dashboard. Horizontal collision between
     the search and TEST LAB pill is already prevented by the grid
     column boundary + `overflow: hidden` on `.portal-search` itself
     (see below) — those clip the *input* without clipping siblings. */
  overflow: visible;
}

.portal-search {
  /* Stays inside its grid cell. max-width caps the visual size; the
     grid column already provides the hard right boundary so we can
     drop the flex hacks. */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-pill);
  max-width: 520px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.portal-search input {
  /* Stage 3.7 polish (2026-05-23) — Daniel: "Search bar ima neki
   * kvadrat unutar ovala, to je UI katastrofa za vidjeti i nema
   * premium feel". Root cause: input[type="search"] dolazi s default
   * browser styling — UA-rendered border, appearance shape, mini "x"
   * clear button na nekima — to vizualno čini "kvadrat unutar ovala".
   *
   * Fix: kompletno reset svih browser-native input dekoracija. Input
   * postaje "ghost" — bez vlastite pozadine, granice, kontura,
   * search-cancel pseudo elementa. Outer .portal-search oval je
   * jedini vidljivi container. Linear / Stripe / Apple Spotlight
   * pattern. */
  flex: 1;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--aco-text);
  font: 400 13px var(--af-body);
  padding: 0;
  margin: 0;
  height: auto;
  line-height: 1.4;
  box-shadow: none;
  border-radius: 0;
}
.portal-search input::-webkit-search-decoration,
.portal-search input::-webkit-search-cancel-button,
.portal-search input::-webkit-search-results-button,
.portal-search input::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
  display: none;
}
.portal-search input::placeholder { color: var(--aco-text-mute2); }
.portal-search-icon { color: var(--aco-text-mute2); font-size: 14px; }
.portal-search kbd {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--aco-text-mute2);
  font-family: var(--af-body);
}

.portal-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--as-2);
  flex-shrink: 0;
}

/* ── Tenant scope switcher ───────────────────────────────────────── */

.scope-switcher { position: relative; }
.scope-pill {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scope-pill::-webkit-details-marker { display: none; }
.scope-icon { color: var(--aco-text-mute2); font-size: 10px; }

.scope-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--aco-bg-2);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  box-shadow: var(--asd-strong, 0 12px 40px rgba(0, 0, 0, 0.5));
  padding: var(--as-3);
  z-index: 100;
}
.scope-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--aco-text-mute2);
  padding: 8px 10px 4px;
}
.scope-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--aco-text);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--af-body);
}
.scope-option:hover { background: rgba(255, 255, 255, 0.05); }
.scope-option.active {
  background: rgba(41, 184, 127, 0.12);
  border-left: 2px solid var(--aco-green);
  padding-left: 8px;
}
.scope-option-name { display: block; font-size: 13px; font-weight: 500; }
.scope-option-meta { display: block; font-size: 11px; margin-top: 2px; }

.scope-reset {
  background: rgba(244, 194, 91, 0.12);
  border: 1px solid rgba(244, 194, 91, 0.40);
  color: var(--aco-warn);
  cursor: pointer;
}

/* ── Top tab bar (contextual subsections) ─────────────────────────── */

.portal-tabs {
  display: flex;
  gap: var(--as-4);
  padding: 0 var(--as-5);
  border-bottom: 1px solid var(--aco-glass-border);
  overflow-x: auto;
}
.portal-tabs a {
  position: relative;
  padding: 14px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--aco-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.portal-tabs a:hover { color: var(--aco-text); }
.portal-tabs a.active {
  color: var(--aco-text);
  font-weight: 600;
}
.portal-tabs a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--aco-green-light), var(--aco-green));
  box-shadow: 0 0 8px rgba(41, 184, 127, 0.45);
  border-radius: 2px 2px 0 0;
}

/* ── Page content area ────────────────────────────────────────────── */

.portal-content {
  padding: var(--as-5);
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

/* ── KPI strip (8 tiles, responsive wrap) ─────────────────────────── */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(140px, 1fr));
  gap: var(--as-3);
  margin-bottom: var(--as-5);
}
@media (max-width: 1500px) {
  .kpi-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 800px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
.kpi-tile {
  background: var(--aco-bg-2);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  padding: var(--as-3) var(--as-4);
}
.kpi-tile:hover {
  border-color: rgba(41, 184, 127, 0.30);
  transform: translateY(-1px);
  transition: all var(--transition-medium);
}
.kpi-icon { font-size: 14px; opacity: 0.7; margin-bottom: 4px; }

/* ── Polished KPI icon (line-art SVG in tinted circle) ─────────────
 * Replaces emoji icons (👥 🏢 etc) with proper SVG in a tinted circle
 * background — the visual pattern from the partner mockup.
 * Tones: green (default), amber (urgent), red (alarm), blue (info). */
.kpi-icon-wrap {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-bottom: var(--as-2);
  flex-shrink: 0;
}
.kpi-svg {
  width: 18px;
  height: 18px;
}
.kpi-icon-green {
  background: rgba(41, 184, 127, 0.14);
  color: var(--aco-green);
}
.kpi-icon-amber {
  background: rgba(244, 194, 91, 0.16);
  color: var(--aco-warn);
}
.kpi-icon-red {
  background: rgba(255, 107, 107, 0.14);
  color: var(--aco-err);
}
.kpi-icon-blue {
  background: rgba(94, 224, 168, 0.14);
  color: var(--aco-green-light);
}
.kpi-icon-mute {
  background: rgba(253, 254, 255, 0.06);
  color: var(--aco-text-muted);
}

/* ── Avatar component ───────────────────────────────────────────────
 * Gradient circle with single-letter initial. Matches the partner
 * mockup's avatar style. Sized via inline width/height (default 32px),
 * tones via class. */
.avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-family: var(--af-display);
  flex-shrink: 0;
  letter-spacing: 0;
  color: var(--aco-text-on-green);
  background: linear-gradient(135deg, var(--aco-green) 0%, var(--aco-green-deep) 100%);
}
.avatar-default {
  background: linear-gradient(135deg, #4A6CF7 0%, #1B2A4E 100%);
  color: #FDFEFF;
}
.avatar-emerald {
  background: linear-gradient(135deg, var(--aco-green) 0%, var(--aco-green-deep) 100%);
  color: var(--aco-text-on-green);
}
.avatar-amber {
  background: linear-gradient(135deg, #F4C25B 0%, #BD7800 100%);
  color: #062017;
}
.avatar-rose {
  background: linear-gradient(135deg, #FF6B6B 0%, #B8302F 100%);
  color: #FDFEFF;
}
.avatar-violet {
  background: linear-gradient(135deg, #B084FF 0%, #5C3399 100%);
  color: #FDFEFF;
}

/* Light-theme adjustments for icons */
[data-theme="light"] .kpi-icon-green { background: rgba(41, 184, 127, 0.10); }
[data-theme="light"] .kpi-icon-amber { background: rgba(189, 120, 0, 0.10); }
[data-theme="light"] .kpi-icon-red   { background: rgba(184, 48, 47, 0.08); }
[data-theme="light"] .kpi-icon-blue  { background: rgba(12, 91, 60, 0.08); color: var(--aco-green-deep); }
[data-theme="light"] .kpi-icon-mute  { background: rgba(6, 32, 23, 0.04); }

/* ── Light-theme polish — match the new white-theme mockup 1:1 ──── */

/* Sidebar on light theme — Stage 3.5 polish 2026-05-23.
 *
 * Daniel: "Ja bih na Bijeloj Temi, postavio tako da je lijevi Side-bar
 * u Altoria zelenoj boji, da zadrzi taj Premium dozivljaj, a da
 * Dashboard ostane u ovoj podlozi, samo teskt i ostale boje pojacati."
 *
 * Tako da bijela tema ne gubi brand-identity. Sidebar = deep emerald
 * (--aco-green-deep) s gradient hint-om prema mid-green dolje za
 * vizualnu dubinu. Tekst i nav-state preuzimaju dark-theme vrijednosti
 * (svijetli na zelenoj podlozi). Dashboard (.portal-main) ostaje
 * svjetlo-mint shell kako je već postavljen. */
[data-theme="light"] .portal-sidebar,
[data-theme="white"]  .portal-sidebar {
  background: linear-gradient(180deg,
                 var(--aco-green-deep, #0C5B3C) 0%,
                 #0a4e34 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04) inset;
}
[data-theme="light"] .portal-nav a,
[data-theme="white"]  .portal-nav a {
  color: rgba(255, 255, 255, 0.82);
}
[data-theme="light"] .portal-nav a:hover,
[data-theme="white"]  .portal-nav a:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .portal-nav a.active,
[data-theme="white"]  .portal-nav a.active {
  background: rgba(159, 245, 205, 0.18);
  border-left: 0;
  padding-left: 14px;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(159, 245, 205, 0.30) inset;
}
/* Wordmark — light-theme green logo would disappear on deep-green
 * sidebar. Force the WHITE wordmark variant on both light + white. */
[data-theme="light"] .portal-brand .brand-logo-dark,
[data-theme="white"]  .portal-brand .brand-logo-dark { display: inline-block; }
[data-theme="light"] .portal-brand .brand-logo-light,
[data-theme="white"]  .portal-brand .brand-logo-light { display: none; }
/* KOMANDNI CENTAR subtitle under the wordmark */
[data-theme="light"] .portal-brand .brand-sub,
[data-theme="white"]  .portal-brand .brand-sub {
  color: rgba(255, 255, 255, 0.55);
}
/* Section tabs on green sidebar (Stage 1+3.5 supergroups + section labels)
 * Stage 3.6 polish — Daniel screenshot: tabovi su bili premuted (skoro
 * nevidljivi). Pojačan kontrast s 0.78 → 0.95 za inactive, jača granica
 * za hover, brand-green-light glow za active. !important da se osigura
 * prevladavanje preko bilo kojeg kasnijeg legacy "dark text on light
 * sidebar" pravila u portal.css. */
[data-theme="light"] .portal-section-tab,
[data-theme="white"]  .portal-section-tab {
  color: rgba(255, 255, 255, 0.95) !important;
  background: transparent;
  border: 1px solid transparent;
}
[data-theme="light"] .portal-section-tab:hover,
[data-theme="white"]  .portal-section-tab:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}
[data-theme="light"] .portal-section-tab.active,
[data-theme="white"]  .portal-section-tab.active {
  background: rgba(159, 245, 205, 0.22) !important;
  border-color: rgba(159, 245, 205, 0.40) !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 2px 0 0 var(--aco-green-light, #9FF5CD),
    inset 0 0 0 1px rgba(159, 245, 205, 0.20) !important;
}
[data-theme="light"] .portal-section-tab.ws-dim,
[data-theme="white"]  .portal-section-tab.ws-dim {
  opacity: 0.65;
}
/* Stage 1+3.5 supergroup divider on green sidebar */
[data-theme="light"] .portal-sidebar-supergroup,
[data-theme="white"]  .portal-sidebar-supergroup {
  border-top-color: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .portal-sidebar-supergroup-label,
[data-theme="white"]  .portal-sidebar-supergroup-label {
  color: rgba(255, 255, 255, 0.58);
}
[data-theme="light"] .portal-sidebar-supergroup-sub,
[data-theme="white"]  .portal-sidebar-supergroup-sub {
  color: rgba(255, 255, 255, 0.92);
}
[data-theme="light"] .portal-sidebar-supergroup-sub.muted,
[data-theme="white"]  .portal-sidebar-supergroup-sub.muted {
  /* Stabilization sprint 2026-05-25 v2 — sidebar stays dark on every
     theme, so the muted variant only needs a SMALL drop from the
     non-muted 0.92. Was 0.58 → too faint on white theme. */
  color: rgba(255, 255, 255, 0.82);
}
/* Scope picker hamburger chip + dropdown on green sidebar */
[data-theme="light"] .sidebar-scope,
[data-theme="white"]  .sidebar-scope {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .sidebar-scope[open],
[data-theme="white"]  .sidebar-scope[open] {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .sidebar-scope-burger,
[data-theme="white"]  .sidebar-scope-burger,
[data-theme="light"] .sidebar-scope-name,
[data-theme="white"]  .sidebar-scope-name {
  color: #FFFFFF;
}
[data-theme="light"] .sidebar-scope-burger-label,
[data-theme="white"]  .sidebar-scope-burger-label,
[data-theme="light"] .sidebar-scope-label,
[data-theme="white"]  .sidebar-scope-label {
  color: rgba(255, 255, 255, 0.62);
}
[data-theme="light"] .sidebar-scope-option,
[data-theme="white"]  .sidebar-scope-option {
  color: #FFFFFF;
}
[data-theme="light"] .sidebar-scope-option:hover,
[data-theme="white"]  .sidebar-scope-option:hover {
  background: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .sidebar-scope-option.active,
[data-theme="white"]  .sidebar-scope-option.active {
  background: rgba(159, 245, 205, 0.20);
  box-shadow: inset 2px 0 0 var(--aco-green-light, #9FF5CD);
}
[data-theme="light"] .sidebar-scope-group,
[data-theme="white"]  .sidebar-scope-group {
  /* Stabilization sprint 2026-05-25 v2 — light/white overrides no
     longer override colour because the inline default is already
     0.85 alpha (sidebar stays dark-green on every theme). Background
     stays here so the section header chip keeps its subtle backplate. */
  background: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .sidebar-scope-empty,
[data-theme="white"]  .sidebar-scope-empty {
  color: rgba(255, 255, 255, 0.62);
}
[data-theme="light"] .sidebar-scope-burger-cta,
[data-theme="white"]  .sidebar-scope-burger-cta {
  color: var(--aco-green-light, #9FF5CD);
}
/* Sidebar status block at bottom (Status sustava) — text on green */
[data-theme="light"] .portal-status,
[data-theme="white"]  .portal-status {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .portal-status-line:first-child,
[data-theme="white"]  .portal-status-line:first-child {
  color: var(--aco-green-light, #9FF5CD);
}
[data-theme="light"] .portal-status-line,
[data-theme="white"]  .portal-status-line {
  color: rgba(255, 255, 255, 0.82);
}
[data-theme="light"] .portal-status-line.muted,
[data-theme="white"]  .portal-status-line.muted {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme="light"] .portal-status-line .status-line-value.ok,
[data-theme="white"]  .portal-status-line .status-line-value.ok {
  color: var(--aco-green-light, #9FF5CD);
}
[data-theme="light"] .portal-status-line .status-dot.ok,
[data-theme="white"]  .portal-status-line .status-dot.ok {
  background: var(--aco-green-light, #9FF5CD);
}
[data-theme="light"] .side-help,
[data-theme="white"]  .side-help,
[data-theme="light"] .side-collapse,
[data-theme="white"]  .side-collapse {
  color: rgba(255, 255, 255, 0.62);
}
[data-theme="light"] .side-help:hover,
[data-theme="white"]  .side-help:hover,
[data-theme="light"] .side-collapse:hover,
[data-theme="white"]  .side-collapse:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .portal-user,
[data-theme="white"]  .portal-user {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

/* Topbar — pure white, soft shadow, not a glass effect.
 * Polish 2026-05-21 — Daniel: "sa strane ima bijele 'usi', vizualno
 * je dizajn pokvaren". Root cause: sticky topbar painted PURE WHITE
 * across full viewport, but the page body has a faint mint tint, so
 * the white rectangle's hard edges show as protruding "ears" at the
 * top-left/right where the body curls behind. Fix: match the topbar
 * background to the body background-tint (same #F7FAF9 mint as the
 * page shell) and add a subtle inner border that conceals the seam.
 * On dark themes the shell is dark all the way through so the seam
 * never showed. */
[data-theme="light"] .portal-topbar,
[data-theme="white"]  .portal-topbar {
  background: #F8FAF9;                /* match body shell tint */
  border-bottom: 1px solid rgba(15, 82, 54, 0.10);
  box-shadow: 0 1px 0 rgba(12, 91, 60, 0.04);
  /* Kill any inherited rounded clip so the topbar runs edge-to-edge
   * and there are no rounded-corner gaps where the body shows through. */
  border-radius: 0;
}

/* Belt-and-braces: kill the same artifact on body too. */
[data-theme="light"] body,
[data-theme="white"]  body {
  background: #F8FAF9;
}

/* Search input visibility on light theme — Stage 3.5 polish 2026-05-23.
 *
 * Daniel: "Bijela podloga (Tema) ima neke dizajnerske greske, vidi
 * Search bar problem." Root cause: `.portal-search input` koristi
 * `color: var(--aco-text)` koji ostaje #FDFEFF na bijeloj temi (token
 * nije retemiran za light), pa je tekst nevidljiv (bijelo na bijelom
 * pozadinskom polju). Placeholder, kbd badge, ikona — sve isto.
 * Fix: eksplicitno postavi tamne nijanse za sva textual djeca search
 * input-a u light/white temama. */
[data-theme="light"] .portal-search,
[data-theme="white"]  .portal-search {
  background: #FFFFFF;
  border: 1px solid rgba(12, 91, 60, 0.18);
  box-shadow: 0 1px 2px rgba(12, 91, 60, 0.04);
}
[data-theme="light"] .portal-search input,
[data-theme="white"]  .portal-search input {
  color: #062017;
  caret-color: var(--aco-green-deep, #0C5B3C);
}
[data-theme="light"] .portal-search input::placeholder,
[data-theme="white"]  .portal-search input::placeholder {
  color: rgba(6, 32, 23, 0.52);
}
[data-theme="light"] .portal-search-icon,
[data-theme="white"]  .portal-search-icon {
  color: rgba(6, 32, 23, 0.55);
}
[data-theme="light"] .portal-search kbd,
[data-theme="white"]  .portal-search kbd {
  background: rgba(12, 91, 60, 0.08);
  color: rgba(6, 32, 23, 0.65);
  border: 1px solid rgba(12, 91, 60, 0.10);
}
[data-theme="light"] .portal-search:focus-within,
[data-theme="white"]  .portal-search:focus-within {
  border-color: var(--aco-green, #29B87F);
  box-shadow: 0 0 0 3px rgba(41, 184, 127, 0.18);
}

/* Status text on light should not be the bright green dot — keep it
 * legible. The "All systems operational" line uses the brand green. */
[data-theme="light"] .portal-status-line:first-child {
  color: var(--aco-green-deep);
}
[data-theme="light"] .portal-status-line {
  color: rgba(6, 32, 23, 0.78);
}
[data-theme="light"] .portal-status-line.muted {
  color: rgba(6, 32, 23, 0.52);
}

/* User card at sidebar bottom — softer gradient avatar on light theme */
[data-theme="light"] .portal-user {
  background: rgba(12, 91, 60, 0.04);
}

/* User-menu trigger — give it a real white background on light */
[data-theme="light"] .user-menu-trigger {
  background: #FFFFFF;
  border-color: rgba(12, 91, 60, 0.14);
}
[data-theme="light"] .user-menu-trigger:hover {
  border-color: rgba(41, 184, 127, 0.35);
  box-shadow: 0 2px 6px rgba(12, 91, 60, 0.08);
}
[data-theme="light"] .user-menu-dropdown {
  background: #FFFFFF;
}
[data-theme="light"] .user-menu-item:hover {
  background: rgba(41, 184, 127, 0.08);
}

/* Chips (Date / Filters) on light */
[data-theme="light"] .chip {
  background: #FFFFFF;
  border-color: rgba(12, 91, 60, 0.14);
}

/* ── Topbar chips (Date + Filters in Centrala) ───────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--aco-glass);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-pill);
  color: var(--aco-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.chip:hover {
  color: var(--aco-text);
  border-color: rgba(41, 184, 127, 0.30);
}
.chip-svg {
  width: 14px;
  height: 14px;
}

/* ── Donut chart wrapper ─────────────────────────────────────────── */
.donut-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin: var(--as-3) auto;
  width: 180px;
  height: 180px;
}
.donut-wrap canvas {
  position: absolute;
  inset: 0;
}
.donut-center {
  position: relative;
  text-align: center;
  pointer-events: none;
}
.donut-total {
  font-family: var(--af-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.donut-total-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--as-2);
}
.donut-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.donut-legend-row .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.donut-legend-row .lab {
  color: var(--aco-text-muted);
}
.donut-legend-row .num {
  font-weight: 600;
  color: var(--aco-text);
}

/* ── AI processing pipeline funnel ───────────────────────────────── */
.pipeline {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--as-2) 0;
  overflow-x: auto;
}
.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  flex-shrink: 0;
}
.pipeline-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 0;
}
.pipeline-icon .kpi-svg {
  width: 16px;
  height: 16px;
}
.pipeline-count {
  font-family: var(--af-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.pipeline-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.pipeline-arrow {
  align-self: center;
  font-size: 18px;
  margin: 12px 2px 0;
  color: var(--aco-text-mute2);
  flex-shrink: 0;
}

/* ── Workload by partner — horizontal bars ──────────────────────── */
.workload-row {
  display: grid;
  grid-template-columns: 1fr 100px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--aco-glass-border);
  font-size: 13px;
}
.workload-row:last-child { border-bottom: 0; }
.workload-name {
  color: var(--aco-text);
  font-weight: 500;
}
.workload-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.workload-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--aco-green), var(--aco-green-light));
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.workload-value {
  font-weight: 600;
  font-size: 12px;
  color: var(--aco-text);
}

/* Light theme tweaks for the new widgets */
[data-theme="light"] .donut-legend-row .num { color: var(--aco-text); }
[data-theme="light"] .workload-bar { background: rgba(12, 91, 60, 0.08); }
[data-theme="light"] .pipeline-arrow { color: rgba(6, 32, 23, 0.32); }

/* ── User menu dropdown ──────────────────────────────────────────
 * Replaces the email + ⚙ + logout pill chain. Click the user pill
 * → reveals dropdown with email, settings, sign-out. Closes when
 * you click anywhere else (native <details> behavior).
 */
.user-menu {
  position: relative;
}
.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--aco-glass);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-pill);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: all var(--transition-fast);
  max-width: 220px;
}
.user-menu-trigger::-webkit-details-marker { display: none; }
.user-menu-trigger:hover {
  border-color: rgba(41, 184, 127, 0.30);
}
.user-menu-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--aco-green), var(--aco-green-deep));
  color: var(--aco-text-on-green);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.user-menu-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  min-width: 0;
}
.user-menu-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aco-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.user-menu-role {
  font-size: 10.5px;
  color: var(--aco-text-mute2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.user-menu-chevron {
  font-size: 10px;
  color: var(--aco-text-mute2);
}
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--aco-bg-2);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  padding: 8px;
  z-index: 100;
}
.user-menu-email {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--aco-text-mute2);
  border-bottom: 1px solid var(--aco-glass-border);
  margin-bottom: 4px;
  word-break: break-all;
}
.user-menu-item {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--aco-text);
  text-decoration: none;
  border-radius: 6px;
}
.user-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.user-menu-divider {
  height: 1px;
  background: var(--aco-glass-border);
  margin: 4px 0;
}
.user-menu-logout {
  color: var(--aco-money-payable);
}
.user-menu-logout:hover {
  background: rgba(231, 106, 110, 0.10);
}

/* Light theme: shadow + dropdown background tweak */
[data-theme="light"] .user-menu-dropdown {
  box-shadow: 0 8px 28px rgba(12, 91, 60, 0.14);
}

/* ── Brighter status badges (matches partner mockup saturation) ─── */
/* The old badges were muted; the mockup uses fully-saturated emerald,
 * amber and red. Override the legacy .badge.* tokens here. */
.badge.posted,
.badge.matched {
  background: rgba(94, 224, 168, 0.18);
  color: #5EE0A8;
  border: 1px solid rgba(94, 224, 168, 0.50);
}
.badge.pending_review {
  background: rgba(224, 161, 74, 0.18);
  color: #E0A14A;
  border: 1px solid rgba(224, 161, 74, 0.50);
}
.badge.rejected,
.badge.err {
  background: rgba(231, 106, 110, 0.18);
  color: #FF8585;
  border: 1px solid rgba(231, 106, 110, 0.50);
}
.badge.muted {
  background: rgba(253, 254, 255, 0.06);
  color: var(--aco-text-mute2);
  border: 1px solid rgba(253, 254, 255, 0.10);
}
[data-theme="light"] .badge.posted,
[data-theme="light"] .badge.matched {
  background: rgba(17, 112, 69, 0.10);
  color: #117045;
  border-color: rgba(17, 112, 69, 0.30);
}
[data-theme="light"] .badge.pending_review {
  background: rgba(189, 120, 0, 0.10);
  color: #BD7800;
  border-color: rgba(189, 120, 0, 0.30);
}
[data-theme="light"] .badge.rejected,
[data-theme="light"] .badge.err {
  background: rgba(184, 48, 47, 0.08);
  color: #B8302F;
  border-color: rgba(184, 48, 47, 0.30);
}
.kpi-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--aco-text-mute2);
  font-size: 10px;
  margin-bottom: 6px;
}
.kpi-value {
  font-family: var(--af-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.kpi-delta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--aco-green-light);
}
.kpi-delta.muted { color: var(--aco-text-mute2); }

/* ── Two-column dashboard grid ───────────────────────────────────── */

.portal-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--as-4);
  align-items: start;
}
@media (max-width: 1100px) {
  .portal-grid { grid-template-columns: 1fr; }
}

.portal-card {
  background: var(--aco-bg-2);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  padding: var(--as-4);
  margin-bottom: var(--as-3);
}
.portal-card-head {
  display: flex;
  align-items: baseline;
  gap: var(--as-3);
  margin-bottom: var(--as-3);
}
.portal-card-head h2 { margin: 0; font-size: 16px; }
.portal-card-head .muted-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--aco-text-muted);
  text-decoration: none;
}
.portal-card-head .muted-link:hover { color: var(--aco-green-light); }

.portal-aside { display: flex; flex-direction: column; gap: var(--as-3); }

/* ── Health bar widget ───────────────────────────────────────────── */

.health-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 4px 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--aco-glass-border);
}
.health-row:last-child { border-bottom: 0; }
.health-name { font-size: 13px; font-weight: 500; }
.health-meta { font-size: 11px; grid-column: 1; }
.health-bar {
  grid-column: 1 / -1;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.health-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--aco-green), var(--aco-green-light));
  border-radius: 2px;
}
.health-row .badge {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

/* ── Live operations queue table ────────────────────────────────── */

.ops-queue {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ops-queue thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--aco-text-mute2);
  padding: 10px 8px 8px;
  border-bottom: 1px solid var(--aco-glass-border);
}
.ops-queue tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--aco-glass-border);
  vertical-align: middle;
}
.ops-queue tbody tr:last-child td { border-bottom: 0; }
.ops-queue .ops-client {
  margin-left: 8px;
  font-weight: 500;
}
.ops-queue .badge { font-size: 10px; }

/* ── Status mini-grid (placeholder for the donut) ──────────────── */

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.status-cell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.status-label {
  font-size: 12px;
  color: var(--aco-text-muted);
}
.status-count {
  font-weight: 600;
  font-size: 16px;
}

/* ── Mini audit table (right rail) ──────────────────────────────── */

.audit-mini {
  width: 100%;
  border-collapse: collapse;
}
.audit-mini td {
  padding: 6px 4px;
  font-size: 12px;
  border-bottom: 1px solid var(--aco-glass-border);
}
.audit-mini tr:last-child td { border-bottom: 0; }
.audit-mini td:nth-child(3) {
  color: var(--aco-text);
  font-weight: 500;
}

/* ── Live workers grid ────────────────────────────────────────────── */

.workers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--as-3);
  margin-top: var(--as-3);
}
.worker-card {
  background: var(--aco-bg-2);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  padding: var(--as-3) var(--as-4);
}
.worker-card.layer-1 {
  background: linear-gradient(135deg, rgba(41, 184, 127, 0.18), rgba(12, 91, 60, 0.12));
  border-color: rgba(41, 184, 127, 0.40);
}
.worker-card.layer-2 {
  background: var(--aco-layer-2-bg, rgba(159, 245, 205, 0.06));
  border-color: rgba(159, 245, 205, 0.20);
}
.worker-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.worker-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}
.worker-avatar.layer-1 {
  background: linear-gradient(135deg, var(--aco-green), var(--aco-green-deep));
  color: var(--aco-text-on-green);
}
.worker-avatar.layer-2 {
  background: rgba(159, 245, 205, 0.15);
  color: var(--aco-green-light);
  border: 1px solid var(--aco-green-light);
}
.worker-avatar.layer-3 {
  background: rgba(255, 255, 255, 0.04);
  color: var(--aco-text-mute2);
  border: 1px solid var(--aco-glass-border);
}
.worker-name { font-size: 13px; font-weight: 600; }
.worker-role { font-size: 11px; }
.worker-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.worker-status.status-active {
  background: var(--aco-status-active, var(--aco-green));
  box-shadow: 0 0 8px var(--aco-green);
  animation: worker-pulse 2s infinite;
}
.worker-status.status-idle { background: var(--aco-status-idle, #E0A14A); }
.worker-status.status-off_duty { background: var(--aco-status-off_duty, rgba(253, 254, 255, 0.32)); }
.worker-status.status-never_seen { background: var(--aco-status-never_seen, rgba(253, 254, 255, 0.18)); }

@keyframes worker-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--aco-green); }
  50% { box-shadow: 0 0 16px var(--aco-green); }
}

.worker-meta {
  font-size: 11px;
  display: grid;
  gap: 3px;
}

/* ── Klijent calendar widget ─────────────────────────────────────── */
.klijent-cal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.klijent-cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--aco-text-mute2);
  letter-spacing: 0.06em;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--aco-glass-border);
}
.klijent-cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.klijent-cal-day {
  display: grid;
  place-items: center;
  height: 32px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--aco-text);
  position: relative;
}
.klijent-cal-day.empty { visibility: hidden; }
.klijent-cal-day.today {
  background: var(--aco-green);
  color: var(--aco-text-on-green);
  font-weight: 600;
}
.klijent-cal-day.has-deadline::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--aco-money-overdue);
}
.klijent-cal-day.today.has-deadline::after {
  background: var(--aco-text-on-green);
}

/* ── Mobile chrome (Klijent / future Partner / future Worker) ────────
 *
 * Hidden by default (desktop layout takes over). Becomes visible
 * below 768px. The desktop sidebar slides off-screen, and the
 * bottom tab bar + hamburger drawer take over.
 *
 * Tap targets are kept ≥ 44pt per Apple HIG.  Padding-bottom on the
 * content area accounts for the tab bar so nothing's hidden behind it.
 */

.mobile-hamburger,
.mobile-tabbar,
.mobile-drawer,
.mobile-drawer-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .portal-shell {
    grid-template-columns: 1fr;
  }
  .portal-sidebar {
    /* Off-screen by default — exposed via the drawer */
    display: none;
  }
  /* Stage 3.8e — sidebar postavljen na position:fixed na desktop,
   * pushing main with margin-left:240px. Na mobile sidebar je
   * display:none → main ne treba taj offset. Reset margin. */
  .portal-shell > .portal-main,
  .portal-shell > main.portal-main {
    margin-left: 0;
  }
  .portal-topbar {
    padding: 8px 14px;
    gap: 10px;
  }
  .portal-search {
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
  }
  .portal-search kbd { display: none; }
  .portal-search input { font-size: 14px; }

  /* Hide some topbar pills on mobile to keep it compact */
  .portal-topbar-right .lang-toggle,
  .portal-topbar-right .pill:nth-child(n+3) {
    display: none;
  }
  .portal-topbar-right .pill:first-child,
  .portal-topbar-right .pill:nth-child(2) {
    display: inline-flex;
  }

  /* Hamburger toggle — visible on mobile */
  .mobile-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
  }
  .mobile-hamburger span {
    display: block;
    height: 2px;
    background: var(--aco-text);
    border-radius: 1px;
  }

  /* Content area gets bottom padding for the tab bar (60px) +
   * iOS bottom safe area. */
  .portal-content {
    padding: var(--as-3) var(--as-3) calc(70px + env(safe-area-inset-bottom));
  }

  /* KPI strip — 3 across, then horizontal scroll on smallest screens */
  .kpi-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .kpi-tile {
    padding: var(--as-2) var(--as-3);
  }
  .kpi-value {
    font-size: 20px;
  }
  .kpi-label {
    font-size: 9px;
  }
  .kpi-delta {
    font-size: 10px;
  }

  /* Stack the two-column dashboard grid */
  .portal-grid {
    grid-template-columns: 1fr;
    gap: var(--as-3);
  }

  /* Compact calendar — shrink day cells */
  .klijent-cal-day {
    height: 28px;
    font-size: 11px;
  }

  /* Workers grid — single column on small screens */
  .workers-grid {
    grid-template-columns: 1fr;
  }

  /* Hide AI bubble while tab bar is visible — they collide
   * visually. We move the AI affordance into the bottom tab bar
   * (Messages tab routes to /ask). */
  .ai-bubble { display: none; }
}

/* ── Mobile drawer (sidebar replacement on mobile) ────────────────── */

@media (max-width: 768px) {
  .mobile-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 998;
    pointer-events: none;
    transition: background var(--transition-medium);
  }
  body.drawer-open .mobile-drawer-backdrop {
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
  }

  .mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78%;
    max-width: 320px;
    background: var(--aco-bg-2);
    border-right: 1px solid var(--aco-glass-border);
    z-index: 999;
    transform: translateX(-100%);
    transition: transform var(--transition-medium);
    padding-top: env(safe-area-inset-top);
  }
  body.drawer-open .mobile-drawer {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
  }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--as-3) var(--as-4);
    border-bottom: 1px solid var(--aco-glass-border);
  }
  .mobile-drawer-brand img {
    height: 26px;
    width: auto;
    filter: drop-shadow(0 3px 10px rgba(41, 184, 127, 0.25));
  }
  .mobile-drawer-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    color: var(--aco-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--as-3) var(--as-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobile-drawer-nav a {
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--aco-text-muted);
    text-decoration: none;
    border-radius: var(--ar-md);
  }
  .mobile-drawer-nav a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--aco-text);
  }
  .mobile-drawer-nav a.active {
    color: var(--aco-text);
    background: linear-gradient(90deg, rgba(41, 184, 127, 0.18), rgba(41, 184, 127, 0.02));
    border-left: 2px solid var(--aco-green);
    padding-left: 12px;
  }

  .mobile-drawer-bottom {
    padding: var(--as-3) var(--as-4) calc(var(--as-4) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--aco-glass-border);
  }
  .mobile-drawer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--as-3);
  }
  .mobile-drawer-logout {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    color: var(--aco-text-muted);
    text-decoration: none;
    border: 1px solid var(--aco-glass-border);
    border-radius: var(--ar-pill);
  }
  .mobile-drawer-logout:hover {
    color: var(--aco-text);
    border-color: rgba(41, 184, 127, 0.30);
  }
}

/* ── Mobile bottom tab bar ─────────────────────────────────────────
 *
 * Fixed bottom, 60px tall (+ iOS safe-area). Five tabs with the
 * green + FAB in the middle (raised above the bar via translateY).
 * Tap targets meet Apple HIG 44pt minimum.
 */

@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--aco-bg-2);
    border-top: 1px solid var(--aco-glass-border);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    z-index: 50;
    align-items: stretch;
    justify-content: space-around;
  }
  .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--aco-text-mute2);
    text-decoration: none;
    font-size: 10px;
    transition: color var(--transition-fast);
    min-height: 44px;
  }
  .mobile-tab.active {
    color: var(--aco-green-light);
  }
  .mobile-tab-icon {
    font-size: 18px;
    line-height: 1;
  }
  .mobile-tab-label {
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  /* The + FAB sits in the middle, above the bar baseline */
  .mobile-tab-fab {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    margin: -18px 4px 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aco-green) 0%, var(--aco-green-deep) 100%);
    display: grid;
    place-items: center;
    color: var(--aco-text-on-green);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(41, 184, 127, 0.5);
    transition: transform var(--transition-fast);
  }
  .mobile-tab-fab:active {
    transform: scale(0.94);
  }
  .mobile-tab-fab-plus {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
  }

  /* Light theme — bring contrast for the tabbar + drawer */
  [data-theme="light"] .mobile-tabbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    box-shadow: 0 -1px 4px rgba(12, 91, 60, 0.08);
  }
  [data-theme="light"] .mobile-drawer {
    box-shadow: 8px 0 32px rgba(12, 91, 60, 0.18);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SPRINT 4 — 1:1 mockup-fidelity layer
   ──────────────────────────────────────────────────────────────────────
   Implements the partner_*_design_proposal.jpeg mockups: 3-column
   grid (sidebar + main + right rail), greeting hero, slim topbar,
   5-tile KPI row, today's tasks list, team performance, line chart,
   donut with detailed legend, and a 3-panel right rail. Everything
   below is theme-agnostic: light overrides live in the [data-theme="light"]
   block at the bottom of this section.
   ══════════════════════════════════════════════════════════════════ */

/* ── Three-column shell ─────────────────────────────────────────── */

/* The portal-shell (sidebar + main) becomes a 3-col grid when
   .has-rail is set on portal-main. The rail is 320px on the right. */
.dash-3col {
  display: grid;
  /* Day 24.6 — `minmax(0, 1fr)` so the left column tracks parent
   * width, not the min-content of its overflowing descendants. */
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--as-5);
  align-items: start;
}
/* Day 24.6 — collapse the rail earlier (was 1280px). At 1281–1480px
 * the left column was forced under ~700px while still trying to host
 * a 5-tile KPI row, a 1fr 1fr chart row, and other dense content, so
 * either the rail or the body overflowed. Single-column below 1481px
 * keeps everything inside the viewport. */
@media (max-width: 1480px) {
  .dash-3col { grid-template-columns: 1fr; }
}

/* Day 24.6 — `.dash-card` itself must allow shrinking; without this,
 * Chart.js canvases inside (workload line, donut) exported their
 * intrinsic 500/200 px as min-content and the parent grid blew out.
 * Constraining the canvas to its container is the second half of
 * that fix. */
.dash-card {
  min-width: 0;
}
.dash-card canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Day 24.5 / Day 24.6 — keep the floating AI bubble clear of the
 * right rail on dashboards. Breakpoint mirrors the dash-3col collapse
 * point: above 1480px the rail is visible, the bubble must dodge it.
 * Below 1481px the rail collapses to single-column and the default
 * `right: var(--as-6)` viewport offset is correct. Scoped to
 * body.dash-topbar-slim so other portal pages are unaffected. */
@media (min-width: 1481px) {
  body.dash-topbar-slim .ai-bubble {
    right: calc(320px + var(--as-5) + var(--as-6));
  }
}

/* ── Greeting hero ──────────────────────────────────────────────── */

.dash-hero {
  margin: var(--as-2) 0 var(--as-5);
}
.dash-hero-eyebrow {
  font-size: 13px;
  color: var(--aco-text-muted);
  margin-bottom: var(--as-1);
}
.dash-hero-h1 {
  font-family: var(--af-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--aco-text);
  margin: 0 0 var(--as-2);
  display: flex;
  align-items: center;
  gap: var(--as-2);
  letter-spacing: -0.02em;
}
.dash-hero-wave {
  display: inline-block;
  font-size: 32px;
  transform-origin: 70% 70%;
  animation: dash-wave 2.4s ease-in-out 1s 2;
}
@keyframes dash-wave {
  0%,60%,100% { transform: rotate(0deg); }
  10%,30%,50% { transform: rotate(14deg); }
  20%,40%     { transform: rotate(-8deg); }
}
.dash-hero-sub {
  font-size: 15px;
  color: var(--aco-text-muted);
  margin: 0;
}

/* ── New KPI tile design (mockup-fidelity) ────────────────────────
   Replaces the previous .kpi-tile look. Existing legacy pages still
   use .kpi-tile, so we scope these to .dash-kpi-row and .dash-kpi.
*/
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--as-3);
  margin: 0 0 var(--as-5);
}
@media (max-width: 1100px) {
  .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dash-kpi-row { grid-template-columns: 1fr; }
}
.dash-kpi {
  background: var(--aco-bg-2);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  padding: var(--as-4) var(--as-4) var(--as-3);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  min-height: 124px;
}
.dash-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--aco-glass-border-hover);
  box-shadow: var(--asd-soft);
}
/* Polish Session 1 #16 — diagonal hover gradient overlay on KPI tiles.
   The base hover lift stays; we add a directional gradient halo
   (top-left → bottom-right) that's still centered. Tile remains
   readable; effect is the "alive" feel from the reference. */
.dash-kpi {
  position: relative;
  overflow: hidden;
}
.dash-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    var(--kpi-edge, rgba(132, 216, 184, 0.45)) 0%,
    transparent 40%,
    transparent 60%,
    var(--kpi-edge, rgba(132, 216, 184, 0.30)) 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: 0;
}
.dash-kpi > * { position: relative; z-index: 1; }
.dash-kpi:hover::before { opacity: 0.55; }
.dash-kpi:hover {
  box-shadow:
    var(--asd-soft),
    0 0 32px var(--kpi-glow, rgba(132, 216, 184, 0.30));
}
.dash-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(41, 184, 127, 0.10);
  color: var(--aco-green-light);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.dash-kpi-icon svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
[data-theme="light"] .dash-kpi-icon {
  background: rgba(41, 184, 127, 0.08);
  color: #117045;
}
.dash-kpi-label {
  font-size: 13px;
  color: var(--aco-text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.dash-kpi-value {
  font-family: var(--af-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--aco-text);
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.dash-kpi-delta {
  font-size: 12px;
  color: var(--aco-green-light);
  font-weight: 500;
  margin-top: 2px;
}
.dash-kpi-delta.warn  { color: var(--aco-money-overdue); }
.dash-kpi-delta.muted { color: var(--aco-text-mute2); }

/* ── Today's tasks list (mockup-fidelity row format) ──────────── */

.dash-card {
  background: var(--aco-bg-2);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  padding: var(--as-4);
  margin-bottom: var(--as-4);
}
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--as-3);
  margin-bottom: var(--as-3);
}
.dash-card-head h2 {
  font-family: var(--af-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--aco-text);
  display: flex;
  align-items: center;
  gap: var(--as-2);
}
.dash-card-head .count-pill {
  background: var(--aco-glass-bg);
  border: 1px solid var(--aco-glass-border);
  color: var(--aco-text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
}
.dash-card-head .meta {
  font-size: 12px;
  color: var(--aco-text-muted);
  margin-left: auto;
  margin-right: var(--as-2);
}
.dash-card-head .view-all {
  font-size: 13px;
  color: var(--aco-green-light);
  text-decoration: none;
  font-weight: 500;
}
.dash-card-head .view-all:hover { text-decoration: underline; }

.task-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto 12px;
  gap: var(--as-3);
  align-items: center;
  padding: var(--as-3) 0;
  border-bottom: 1px solid var(--aco-glass-border);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--aco-glass-bg); }
.task-row-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(224, 161, 74, 0.16);
  color: #E0A14A;
}
.task-row-icon.tone-people { background: rgba(94, 224, 168, 0.14); color: var(--aco-green-light); }
.task-row-icon.tone-bank   { background: rgba(94, 144, 224, 0.16); color: #5E90E0; }
.task-row-icon.tone-folder { background: rgba(231, 106, 110, 0.14); color: var(--aco-money-payable); }
.task-row-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.task-row-title {
  font-size: 14px;
  color: var(--aco-text);
  font-weight: 500;
  line-height: 1.2;
}
.task-row-sub {
  font-size: 12px;
  color: var(--aco-text-muted);
  margin-top: 2px;
}
.task-row-due {
  text-align: right;
  font-size: 12px;
}
.task-row-due-top {
  color: var(--aco-money-overdue);
  font-weight: 500;
}
.task-row-due-bot {
  color: var(--aco-text-mute2);
  margin-top: 2px;
}
.task-row-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.01em;
}
.task-row-pill.urgent   { background: rgba(231, 106, 110, 0.14); color: var(--aco-money-payable); }
.task-row-pill.approval { background: rgba(224, 161, 74, 0.18);  color: #E0A14A; }
.task-row-pill.review   { background: rgba(94, 224, 168, 0.16); color: var(--aco-green-light); }
.task-row-pill.waiting  { background: rgba(224, 161, 74, 0.12);  color: var(--aco-text-muted); }
.task-row-chev { color: var(--aco-text-mute2); font-size: 14px; }

.dash-card-foot {
  margin-top: var(--as-3);
  padding-top: var(--as-3);
  border-top: 1px solid var(--aco-glass-border);
}
.dash-card-foot a {
  font-size: 13px;
  color: var(--aco-green-light);
  text-decoration: none;
  font-weight: 500;
}
.dash-card-foot a:hover { text-decoration: underline; }

/* ── Team performance bars ──────────────────────────────────────── */

.team-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--as-3);
  align-items: center;
  padding: var(--as-3) 0;
  border-bottom: 1px solid var(--aco-glass-border);
}
.team-row:last-child { border-bottom: 0; }
.team-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aco-green) 0%, var(--aco-green-deep) 100%);
  display: grid;
  place-items: center;
  color: var(--aco-text-on-green);
  font-size: 13px;
  font-weight: 600;
}
.team-name { font-size: 14px; color: var(--aco-text); font-weight: 500; }
.team-role { font-size: 12px; color: var(--aco-text-muted); margin-top: 2px; }
.team-meta-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 140px;
}
.team-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--aco-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.team-pct .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aco-green-light); }
.team-bar {
  width: 120px;
  height: 5px;
  background: var(--aco-glass-bg);
  border-radius: 100px;
  overflow: hidden;
}
.team-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--aco-green) 0%, var(--aco-green-light) 100%);
  border-radius: 100px;
}
.team-tasks { font-size: 11px; color: var(--aco-text-mute2); }

/* ── Workload line chart ───────────────────────────────────────── */

.chart-card-body {
  position: relative;
  height: 220px;
  padding-top: var(--as-2);
}
.chart-peak-badge {
  position: absolute;
  background: var(--aco-green);
  color: var(--aco-text-on-green);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 100px;
  pointer-events: none;
  transform: translate(-50%, -100%);
}

/* ── Donut with detailed legend ────────────────────────────────── */

.donut-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--as-4);
  align-items: center;
}
@media (max-width: 600px) {
  .donut-row { grid-template-columns: 1fr; }
}
.donut-detail-wrap {
  position: relative;
  width: 200px;
  height: 200px;
}
.donut-detail-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}
.donut-detail-center .total-num {
  font-family: var(--af-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--aco-text);
  letter-spacing: -0.02em;
}
.donut-detail-center .total-lab {
  font-size: 12px;
  color: var(--aco-text-muted);
  margin-top: 2px;
}
.donut-detail-legend { display: flex; flex-direction: column; gap: var(--as-2); }
.donut-detail-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.donut-detail-row .dot { width: 8px; height: 8px; border-radius: 50%; }
.donut-detail-row .lab  { color: var(--aco-text-muted); }
.donut-detail-row .num  { color: var(--aco-text); font-weight: 600; }
.donut-detail-row .pct  { color: var(--aco-text-mute2); font-size: 12px; }

/* ── Right rail panels (Central tickets, Deadlines, Comm hub) ──── */

.rail { display: flex; flex-direction: column; gap: var(--as-4); }
.rail-card {
  background: var(--aco-bg-2);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  padding: var(--as-4);
}
.rail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--as-3);
}
.rail-card-head h3 {
  font-family: var(--af-display);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--aco-text);
}
.rail-card-head a {
  font-size: 12px;
  color: var(--aco-green-light);
  text-decoration: none;
  font-weight: 500;
}
.rail-card-head a:hover { text-decoration: underline; }
.rail-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--aco-glass-border);
}
.rail-row:last-of-type { border-bottom: 0; }
.rail-row .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}
.rail-row .dot.high   { background: var(--aco-money-overdue); }
.rail-row .dot.med    { background: var(--aco-green-light); }
.rail-row .dot.low    { background: var(--aco-green-light); }
.rail-row .title {
  font-size: 13px;
  color: var(--aco-text);
  font-weight: 500;
  line-height: 1.3;
}
.rail-row .sub {
  font-size: 12px;
  color: var(--aco-text-muted);
  margin-top: 2px;
}
.rail-row .right-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.rail-row .pri {
  font-size: 11px;
  font-weight: 600;
}
.rail-row .pri.high { color: var(--aco-money-payable); }
.rail-row .pri.med  { color: var(--aco-money-overdue); }
.rail-row .pri.low  { color: var(--aco-text-mute2); }
.rail-row .age {
  font-size: 11px;
  color: var(--aco-text-mute2);
}

/* Deadline rows: small icon + date/title + days-out pill */
.rail-deadline {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--aco-glass-border);
}
.rail-deadline:last-of-type { border-bottom: 0; }
.rail-deadline .ic {
  width: 24px; height: 28px;
  border-radius: 4px;
  background: rgba(231, 106, 110, 0.12);
  color: var(--aco-money-payable);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.rail-deadline .ic.ok { background: rgba(94, 224, 168, 0.14); color: var(--aco-green-light); }
.rail-deadline .title { font-size: 13px; color: var(--aco-text); font-weight: 500; }
.rail-deadline .date  { font-size: 11px; color: var(--aco-text-muted); margin-top: 2px; }
.rail-deadline .days  { font-size: 11px; color: var(--aco-text-mute2); }

/* Comm hub rows */
.rail-comm {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--aco-glass-border);
}
.rail-comm:last-of-type { border-bottom: 0; }
.rail-comm .ic {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(94, 144, 224, 0.14);
  color: #5E90E0;
  display: grid; place-items: center;
}
.rail-comm .ic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.rail-comm .title { font-size: 13px; color: var(--aco-text); font-weight: 500; }
.rail-comm .sub   { font-size: 12px; color: var(--aco-text-muted); margin-top: 2px; }
.rail-comm .age   { font-size: 11px; color: var(--aco-text-mute2); }

/* ── Slim topbar overrides ─────────────────────────────────────── */

/* The mockup topbar has a long search bar on the left and only:
   message-icon + bell-icon + user-pill on the right. Hide the noisy
   chips that we still want to keep in the markup for non-dashboard
   pages but suppress on the centrala dashboard via .dash-topbar-slim
   on the body. */
body.dash-topbar-slim .portal-topbar .chip,
body.dash-topbar-slim .portal-topbar .pill.scope-pill,
body.dash-topbar-slim .portal-topbar .pill.scope-reset,
body.dash-topbar-slim .portal-topbar .scope-switcher,
body.dash-topbar-slim .portal-topbar > .portal-topbar-right > form,
body.dash-topbar-slim .portal-topbar > .portal-topbar-right > .pill {
  display: none !important;
}
/* Tranche Q — keep .lang-toggle visible on slim-topbar pages
   (/partner/, /partner/messages, etc.) so users can switch HR/EN
   from the top panel without diving into the user menu. */
body.dash-topbar-slim .portal-search { max-width: 480px; }

/* Inline notification icons — sit just before the user-menu */
.tb-icon-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--aco-glass-bg);
  border: 1px solid var(--aco-glass-border);
  color: var(--aco-text-muted);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tb-icon-btn:hover {
  background: var(--aco-glass-bg-hover);
  color: var(--aco-text);
}
.tb-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.tb-icon-badge {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--aco-money-payable);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  border: 2px solid var(--aco-bg-2);
}

/* ─────────────────────────────────────────────────────────────────
   #160 — Pulsing Operator Open-Queue Badge
   ───────────────────────────────────────────────────────────────── */

.tb-oq-wrap {
  position: relative;
  display: inline-block;
}

/* Badge container — only renders content when /centrala/topbar/open-queue
   returns non-empty (i.e. has actionable items). Empty = invisible. */
.tb-oq-btn { position: relative; }

.tb-oq-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-family: var(--af-mono, 'IBM Plex Mono', monospace);
  font-size: 10px; font-weight: 700;
  color: #fff;
  border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--aco-bg-2, #0c1218);
  z-index: 2;
}

/* Severity-mapped pulse colors. Each variant defines its own
   --pulse-color CSS var which the @keyframes uses to project a halo
   in the right hue. Pulses are njezni (soft) — 2s ease loop, ~16px
   max halo, never aggressive. */

.tb-oq-info {
  background: #28c882;
  --pulse-color: rgba(40, 200, 130, 0.55);
  animation: tb-oq-pulse 2s ease-in-out infinite;
}
.tb-oq-warn {
  background: #ffb347;
  color: #2a1500;
  --pulse-color: rgba(255, 179, 71, 0.65);
  animation: tb-oq-pulse 1.8s ease-in-out infinite;
}
.tb-oq-critical {
  background: #ff3050;
  --pulse-color: rgba(255, 48, 80, 0.85);
  animation: tb-oq-pulse-critical 1.4s ease-in-out infinite;
}

@keyframes tb-oq-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--pulse-color),
                0 0 6px 0 var(--pulse-color);
  }
  50% {
    box-shadow: 0 0 0 6px transparent,
                0 0 16px 2px var(--pulse-color);
  }
}

@keyframes tb-oq-pulse-critical {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--pulse-color),
                0 0 8px 1px var(--pulse-color);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px transparent,
                0 0 22px 4px var(--pulse-color),
                0 0 32px 6px rgba(255, 48, 80, 0.35);
    transform: scale(1.08);
  }
}

/* Dropdown — hidden by default, toggled by `is-open` on .tb-oq-wrap */
.tb-oq-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 360px; max-width: 440px;
  background: rgba(15, 22, 30, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(159, 245, 205, 0.18);
  border-radius: var(--ar-md, 10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  z-index: 100;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.tb-oq-wrap.is-open .tb-oq-dropdown {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}

.tb-oq-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}
.tb-oq-header strong { color: var(--aco-text); }
.tb-oq-header .muted {
  color: var(--aco-text-muted, rgba(212, 221, 228, 0.55));
  font-size: 11px;
}

.tb-oq-items {
  max-height: 380px; overflow-y: auto;
  padding: 6px 0;
}

.oq-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 16px;
  text-decoration: none; color: var(--aco-text);
  font-size: 13px; line-height: 1.35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.12s ease;
}
.oq-item:last-child { border-bottom: none; }
.oq-item:hover {
  background: rgba(159, 245, 205, 0.06);
}
.oq-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}
.oq-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oq-age {
  font-family: var(--af-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  color: var(--aco-text-muted, rgba(212, 221, 228, 0.55));
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

/* Light theme override */
[data-theme="light"] .tb-oq-dropdown {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(12, 91, 60, 0.18);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .tb-oq-header strong { color: #062017; }
[data-theme="light"] .oq-item { color: #062017; }
[data-theme="light"] .oq-item:hover { background: rgba(12, 91, 60, 0.05); }

/* Close dropdown when clicking outside */
.tb-oq-wrap.is-open::before {
  content: ''; position: fixed; inset: 0; z-index: 99;
}

/* ── Sidebar bottom block (Plan card + Help + Collapse) ────────── */

.side-plan {
  background: var(--aco-glass-bg);
  border: 1px solid var(--aco-glass-border);
  border-radius: var(--ar-md);
  padding: var(--as-3);
}
.side-plan-label { font-size: 11px; color: var(--aco-text-muted); margin-bottom: 4px; }
.side-plan-tier {
  font-size: 14px;
  font-weight: 600;
  color: var(--aco-green-light);
  margin-bottom: var(--as-2);
}
.side-plan-bar {
  height: 5px;
  background: var(--aco-glass-bg);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: var(--as-2);
}
.side-plan-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--aco-green) 0%, var(--aco-green-light) 100%);
  border-radius: 100px;
}
.side-plan-meta { font-size: 11px; color: var(--aco-text-muted); margin-bottom: var(--as-2); }
.side-plan-cta {
  font-size: 12px;
  color: var(--aco-green-light);
  text-decoration: none;
  font-weight: 500;
}
.side-plan-cta:hover { text-decoration: underline; }

.side-help, .side-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--as-2) var(--as-3);
  font-size: 13px;
  color: var(--aco-text-muted);
  text-decoration: none;
  border-radius: 10px;
  margin: 0 calc(-1 * var(--as-3));
}
.side-help:hover, .side-collapse:hover {
  background: var(--aco-glass-bg);
  color: var(--aco-text);
}
.side-help svg, .side-collapse svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

/* ══════════════════════════════════════════════════════════════
   Light-theme overrides for the Sprint-4 layer
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .dash-kpi {
  background: #FFFFFF;
  border: 1px solid rgba(12, 91, 60, 0.10);
  box-shadow: 0 1px 2px rgba(12, 91, 60, 0.04);
}
[data-theme="light"] .dash-kpi:hover {
  border-color: rgba(41, 184, 127, 0.32);
  box-shadow: 0 6px 16px rgba(12, 91, 60, 0.08);
}
[data-theme="light"] .dash-kpi-icon { color: rgba(6, 32, 23, 0.50); }
[data-theme="light"] .dash-card,
[data-theme="light"] .rail-card {
  background: #FFFFFF;
  border: 1px solid rgba(12, 91, 60, 0.10);
  box-shadow: 0 1px 2px rgba(12, 91, 60, 0.04);
}
[data-theme="light"] .task-row { border-bottom-color: rgba(12, 91, 60, 0.08); }
[data-theme="light"] .task-row:hover { background: rgba(12, 91, 60, 0.03); }
[data-theme="light"] .team-row,
[data-theme="light"] .rail-row,
[data-theme="light"] .rail-deadline,
[data-theme="light"] .rail-comm {
  border-bottom-color: rgba(12, 91, 60, 0.08);
}
[data-theme="light"] .team-bar,
[data-theme="light"] .side-plan-bar {
  background: rgba(12, 91, 60, 0.10);
}
[data-theme="light"] .tb-icon-btn {
  background: rgba(12, 91, 60, 0.04);
  border-color: rgba(12, 91, 60, 0.10);
}
[data-theme="light"] .tb-icon-btn:hover { background: rgba(12, 91, 60, 0.08); }
[data-theme="light"] .tb-icon-badge { border-color: #FFFFFF; }
[data-theme="light"] .dash-card-head .count-pill {
  background: rgba(12, 91, 60, 0.06);
  border-color: rgba(12, 91, 60, 0.10);
}
[data-theme="light"] .side-plan {
  background: rgba(41, 184, 127, 0.04);
  border-color: rgba(41, 184, 127, 0.18);
}

/* ── Nav icons + badge (Sprint 4) ─────────────────────────────── */

.portal-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
}
.portal-nav a .nav-ico {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  stroke: currentColor;
  fill: none;
  opacity: 0.78;
}
.portal-nav a.active .nav-ico { opacity: 1; }
.portal-nav a > span:not(.nav-badge) { flex: 1; min-width: 0; }
.portal-nav a .nav-badge {
  background: var(--aco-glass-bg);
  border: 1px solid var(--aco-glass-border);
  color: var(--aco-text-muted);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 100px;
  margin-left: auto;
  flex: 0 0 auto;
}
.portal-nav a.active .nav-badge {
  background: rgba(41, 184, 127, 0.18);
  color: var(--aco-green-light);
  border-color: rgba(41, 184, 127, 0.32);
}
[data-theme="light"] .portal-nav a .nav-badge {
  background: rgba(12, 91, 60, 0.06);
  color: rgba(6, 32, 23, 0.62);
  border-color: rgba(12, 91, 60, 0.10);
}
[data-theme="light"] .portal-nav a.active .nav-badge {
  background: rgba(41, 184, 127, 0.14);
  color: var(--aco-green-deep);
  border-color: rgba(41, 184, 127, 0.30);
}

/* ── User-menu additions (Sprint 4) ───────────────────────────── */

.user-menu-section {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--aco-text-mute2);
  padding: 8px 12px 4px;
  font-weight: 700;
}
.user-menu-scope { display: flex; flex-direction: column; }
.user-menu-scope .user-menu-item.active {
  color: var(--aco-green-light);
  font-weight: 600;
}
.user-menu-langs {
  display: flex;
  gap: 6px;
  padding: 4px 12px 8px;
}
.user-menu-langs .lang-pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--aco-glass-border);
  text-decoration: none;
  color: var(--aco-text-muted);
}
.user-menu-langs .lang-pill.active {
  background: rgba(41, 184, 127, 0.16);
  color: var(--aco-green-light);
  border-color: rgba(41, 184, 127, 0.32);
}
/* Light theme — inactive HR pill must be readable (was looking pale).
   Active EN pill needs deep emerald for legibility, no green glow. */
[data-theme="light"] .user-menu-langs .lang-pill {
  color: #062017;
  border-color: rgba(12, 91, 60, 0.22);
  font-weight: 600;
  background: #FFFFFF;
}
[data-theme="light"] .user-menu-langs .lang-pill:hover {
  background: rgba(12, 91, 60, 0.04);
  border-color: rgba(12, 91, 60, 0.32);
}
[data-theme="light"] .user-menu-langs .lang-pill.active {
  background: rgba(41, 184, 127, 0.14);
  color: #0C5B3C;
  border-color: rgba(41, 184, 127, 0.40);
  font-weight: 700;
  text-shadow: none;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════
   Light-theme contrast pass — greens/ambers darker for readability
   on white. Mockup uses solid medium-saturation greens, not pastels.
   ══════════════════════════════════════════════════════════════════ */

/* KPI delta lines — replace pastel green with #117045 (deep emerald). */
[data-theme="light"] .dash-kpi-delta {
  color: #117045;
  font-weight: 600;
}
[data-theme="light"] .dash-kpi-delta.warn  { color: #BD7800; }
[data-theme="light"] .dash-kpi-delta.muted { color: rgba(6, 32, 23, 0.55); }

/* Status pills on the Today's tasks list. The mockup pills are bold
   solid colors, not the dark-theme low-opacity tints. */
[data-theme="light"] .task-row-pill.urgent {
  background: rgba(184, 48, 47, 0.10);
  color: #B8302F;
}
[data-theme="light"] .task-row-pill.approval {
  background: rgba(189, 120, 0, 0.14);
  color: #9C5A00;
}
[data-theme="light"] .task-row-pill.review {
  background: rgba(17, 112, 69, 0.10);
  color: #117045;
}
[data-theme="light"] .task-row-pill.waiting {
  background: rgba(189, 120, 0, 0.10);
  color: #9C5A00;
}

/* Card-foot links + view-all anchors use --aco-green-light by default,
   which on white renders as pastel. Bump to deep emerald + bolder. */
[data-theme="light"] .dash-card-foot a,
[data-theme="light"] .dash-card-head .view-all,
[data-theme="light"] .rail-card-head a,
[data-theme="light"] .side-plan-cta {
  color: #117045;
  font-weight: 600;
}

/* Team performance: percentage dot + bar fill — solid emerald. */
[data-theme="light"] .team-pct .dot {
  background: #117045;
}
[data-theme="light"] .team-bar > span {
  background: linear-gradient(90deg, #117045 0%, #1FA468 100%);
}

/* Right-rail dots — keep priority colors strong. */
[data-theme="light"] .rail-row .dot.high { background: #B8302F; }
[data-theme="light"] .rail-row .dot.med  { background: #BD7800; }
[data-theme="light"] .rail-row .dot.low  { background: #117045; }
[data-theme="light"] .rail-row .pri.high { color: #B8302F; }
[data-theme="light"] .rail-row .pri.med  { color: #BD7800; }
[data-theme="light"] .rail-row .pri.low  { color: rgba(6, 32, 23, 0.55); }

/* Right-rail deadline date squares — solid red for urgent, emerald
   for >5 days out, instead of the low-opacity tint. */
[data-theme="light"] .rail-deadline .ic {
  background: rgba(184, 48, 47, 0.12);
  color: #B8302F;
  font-weight: 700;
}
[data-theme="light"] .rail-deadline .ic.ok {
  background: rgba(17, 112, 69, 0.12);
  color: #117045;
}

/* Stage 3.7 polish (2026-05-23) — sidebar je sad deep-emerald, ne
 * bijel; tamno-zelena boja teksta na dark-green pozadini = nečitljiv
 * active item. Override iznad (line 795) drži #FFFFFF za white-theme
 * stanje. Ovaj legacy blok je namjerno noop-iran (sve override-ano
 * !important-om iznad) ali ostaje kao marker tako da budući editor
 * zna zašto je tu. */
[data-theme="light"] .portal-nav a.active,
[data-theme="white"]  .portal-nav a.active {
  background: rgba(159, 245, 205, 0.20) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px rgba(159, 245, 205, 0.32) inset !important;
}

/* Brand subtitle ("Command Center" / "Komandni centar") on light
   theme should be GREEN per mockup, not muted gray. */
[data-theme="light"] .portal-brand-sub {
  color: #117045;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Drop the green halo glow on the logo for light theme — looks muddy
   on white. Pure crisp logo. */
[data-theme="light"] .portal-brand img {
  filter: none;
}

/* tb-icon-btn — deep emerald on hover. */
[data-theme="light"] .tb-icon-btn { color: rgba(6, 32, 23, 0.62); }
[data-theme="light"] .tb-icon-btn:hover { color: #117045; }

/* ══════════════════════════════════════════════════════════════════
   Day-85 — SIDEBAR STATE MACHINE (destructive rewrite).
   ══════════════════════════════════════════════════════════════════

   Two states, period:
     • EXPANDED (default, body has no class)
         Sidebar is 240px wide, all labels visible, normal behavior.
     • RAIL (body.side-collapsed)
         Sidebar is 64px wide, icons only, no hover-peek, no overlay.
         Click the top chevron to expand again.

   Removed concepts:
     • Hover-peek (sidebar growing to 280px on mouseenter)
     • :focus-within auto-expand
     • .is-peeking class
     • body.side-pinned (legacy pin toggle)
     • The bottom "Sakrij" link — there's only ONE toggle now
       (the `.side-toggle` chevron at the top, in _layout.html)

   Why those were removed: every "smart" expand path caused
   accidental peek when the cursor crossed the rail. Users couldn't
   keep the sidebar collapsed reliably. One click, one state. Done.
   ══════════════════════════════════════════════════════════════════ */

/* ── RAIL state ──────────────────────────────────────────────────── */
/* Stage 3.8e — sidebar je sad position:fixed (240px default). U
 * collapsed (rail) modu sužava se na 64px ali ostaje fixed. Main
 * column dobiva margin-left: 64px umjesto 240px. */
body.side-collapsed .portal-shell {
  /* No-op — shell je display: block sad. */
}
body.side-collapsed .portal-shell > .portal-main,
body.side-collapsed .portal-shell > main.portal-main {
  margin-left: 64px;
}
body.side-collapsed .portal-sidebar {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding: 14px 8px;
  position: fixed;
  overflow: hidden;
  z-index: 30;
  transition: width 0.18s ease;
}

/* Hide every text label and helper UI in rail mode. */
body.side-collapsed .portal-sidebar .portal-brand span,
body.side-collapsed .portal-sidebar .portal-brand .portal-brand-sub,
body.side-collapsed .portal-nav a span:not(.nav-badge),
body.side-collapsed .portal-nav a .nav-badge,
body.side-collapsed .portal-section-toggle,
body.side-collapsed .portal-status,
body.side-collapsed .side-plan,
body.side-collapsed .side-help span,
body.side-collapsed .side-collapse,
body.side-collapsed .sidebar-scope-label,
body.side-collapsed .sidebar-scope-name,
body.side-collapsed .sidebar-scope-meta,
body.side-collapsed .sidebar-scope-caret,
body.side-collapsed .sidebar-scope-menu {
  display: none !important;
}

/* Brand becomes the centered square A-mark in rail mode. */
body.side-collapsed .portal-sidebar .portal-brand img:not(.brand-mark-rail) {
  display: none !important;
}
body.side-collapsed .portal-sidebar .portal-brand .brand-mark-rail {
  display: block !important;
  width: 32px; height: 32px;
  margin: 4px auto 8px;
}

/* Scope card collapses to a single mint dot. */
body.side-collapsed .sidebar-scope {
  margin: 6px 8px !important;
}
body.side-collapsed .sidebar-scope-chip {
  padding: 8px 0 !important;
  justify-content: center !important;
  display: flex !important;
}
body.side-collapsed .sidebar-scope-chip::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--aco-green, #84d8b8);
  box-shadow: 0 0 8px rgba(132,216,184,0.55);
}

/* Section groups: hide section header but force-show items as icons. */
body.side-collapsed .portal-section-group {
  margin: 0;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
body.side-collapsed .portal-section-group:last-of-type { border-bottom: 0; }
body.side-collapsed .portal-section-group > .portal-section-items {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}

/* Nav icon = 40×40 centered square button. */
body.side-collapsed .portal-nav a {
  width: 40px; height: 40px;
  margin: 2px auto;
  padding: 0;
  justify-content: center;
  border-radius: 10px;
  position: relative;
  gap: 0;
}
body.side-collapsed .portal-nav a .nav-ico {
  width: 18px; height: 18px;
}
body.side-collapsed .portal-nav a.active {
  background: linear-gradient(135deg,
    var(--nav-accent-bg, rgba(132,216,184,0.12)) 0%,
    rgba(0,0,0,0.10) 100%);
  box-shadow:
    inset 2px 0 0 var(--nav-accent, rgba(132,216,184,0.85)),
    0 0 14px var(--nav-accent-glow, rgba(132,216,184,0.30));
}

/* Bottom: just the Help icon (Sakrij hidden above). 40×40 square. */
body.side-collapsed .portal-sidebar-bottom {
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
body.side-collapsed .side-help {
  width: 40px; height: 40px;
  margin: 4px auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
}
body.side-collapsed .side-help svg {
  width: 18px; height: 18px;
}

/* Rail-mode tooltip on hover — uses the <a title="…"> attribute. */
body.side-collapsed .portal-nav a[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  background: rgba(15, 28, 22, 0.96);
  color: #f4f7f5;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 7px;
  border: 1px solid rgba(132,216,184,0.30);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.36);
  pointer-events: none;
  z-index: 100;
}

@media (prefers-reduced-motion: reduce) {
  body.side-collapsed .portal-sidebar { transition: none; }
}

/* ── LEGACY-CLASS DEFANG ─────────────────────────────────────────── */
/* Old templates / cached browser state may still reference these
   class names. Neutralise them so no past CSS path can override the
   above. */
.portal-sidebar.is-peeking,
body.side-pinned .portal-sidebar {
  width: inherit !important;
  position: relative !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.side-pin,
.side-collapse-top,
body.side-collapsed .side-collapse-top {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 — Tranche G
 *
 *   #35 White-theme topbar logo + nav text → green-readable
 *   #36 White-theme link/banner contrast pass
 *   #37 Sidebar pin toggle (rail+peek vs always-expanded)
 *   #38 Sidebar rail logo swap (square A-mark in collapsed mode)
 *   #39 Avatar drop-zone styling
 *   #40 Empty-state icon container styling
 *   #41 Pilot mode pill bright redesign
 * ════════════════════════════════════════════════════════════════════ */

/* ── #35 White-theme topbar — logo + nav text legible ─────────────── */
[data-theme="white"] .topbar,
[data-theme="light"] .topbar {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(248, 251, 249, 0.85) 100%);
  border-bottom: 1px solid rgba(15, 82, 54, 0.12);
}
[data-theme="white"] .topbar .brand-logo,
[data-theme="light"] .topbar .brand-logo {
  /* Swap to dark-text variant of the wordmark on white bg */
  content: url('/static/brand/altoria_logo_green_text_right.png');
}
[data-theme="white"] .topbar .nav a,
[data-theme="light"] .topbar .nav a {
  color: #0f5236;
}
[data-theme="white"] .topbar .nav a:hover,
[data-theme="light"] .topbar .nav a:hover {
  color: #0c4a31;
  background: rgba(15, 82, 54, 0.06);
}
[data-theme="white"] .topbar .pill,
[data-theme="light"] .topbar .pill {
  background: rgba(15, 82, 54, 0.08);
  color: #0f5236;
  border: 1px solid rgba(15, 82, 54, 0.14);
}
[data-theme="white"] .topbar .pill.ok,
[data-theme="light"] .topbar .pill.ok {
  background: #d6efe1;
  color: #0f5236;
  border-color: #6cb393;
}
[data-theme="white"] .topbar .lang-pill,
[data-theme="light"] .topbar .lang-pill { color: #0f5236; }
[data-theme="white"] .topbar .lang-pill.active,
[data-theme="light"] .topbar .lang-pill.active {
  background: linear-gradient(135deg, #84d8b8 0%, #51c194 100%);
  color: #07221a;
}

/* Stage 3.7 polish (2026-05-23) — INVERTED: deep-green sidebar treba
 * BIJELI wordmark (brand-logo-dark = wordmark za tamne podloge), ne
 * green-on-green (brand-logo-light) koji je nestajao. Prethodni blok
 * je bio iz ere kad je sidebar bio bijel; Stage 3.5 promijenio sidebar
 * u deep-emerald. Ovo je kasniji u kaskadi pa nadjačava Stage 3.5
 * deklaracije iznad na line 806-809. */
[data-theme="white"] .portal-sidebar .brand-logo-dark,
[data-theme="light"] .portal-sidebar .brand-logo-dark { display: inline-block !important; }
[data-theme="white"] .portal-sidebar .brand-logo-light,
[data-theme="light"] .portal-sidebar .brand-logo-light { display: none !important; }

/* ── #36 White-theme link contrast — the "View all deadlines" class ── */
[data-theme="white"] a.link-quiet,
[data-theme="light"] a.link-quiet,
[data-theme="white"] .muted-link,
[data-theme="light"] .muted-link,
[data-theme="white"] a[class*="View all"],
[data-theme="light"] a[class*="View all"] {
  color: #0f5236 !important;
  text-decoration: none;
}
[data-theme="white"] a.link-quiet:hover,
[data-theme="light"] a.link-quiet:hover,
[data-theme="white"] .muted-link:hover,
[data-theme="light"] .muted-link:hover {
  color: #0c4a31 !important;
  text-decoration: underline;
}
/* Generic dashboard "see all" links sit at the right of section-titles */
[data-theme="white"] .section-title a,
[data-theme="light"] .section-title a,
[data-theme="white"] .panel-title a,
[data-theme="light"] .panel-title a {
  color: #0f5236;
  font-weight: 600;
}

/* ── #41 Pilot mode pill — bright theme-aware redesign ─────────────── */
.flash.info[data-pilot-banner="1"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.18) 0%,
    rgba(81, 193, 148, 0.10) 100%);
  border: 1px solid rgba(132, 216, 184, 0.45);
  box-shadow: 0 0 18px rgba(132, 216, 184, 0.22);
  color: var(--aco-text);
  font-size: 13px;
  font-weight: 500;
}
.flash.info[data-pilot-banner="1"] strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #84d8b8;
}
.pilot-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b6f5d6 0%, #51c194 60%, #2fa776 100%);
  box-shadow:
    0 0 0 2px rgba(132, 216, 184, 0.30),
    0 0 12px rgba(132, 216, 184, 0.55);
  flex: 0 0 10px;
  animation: pilot-pulse 2.6s ease-in-out infinite;
}
@keyframes pilot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(132, 216, 184, 0.30), 0 0 12px rgba(132, 216, 184, 0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(132, 216, 184, 0.20), 0 0 20px rgba(132, 216, 184, 0.85); }
}
[data-theme="white"] .flash.info[data-pilot-banner="1"],
[data-theme="light"] .flash.info[data-pilot-banner="1"] {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  border-color: #6cb393;
  color: #0f5236;
  box-shadow: 0 2px 12px rgba(15, 82, 54, 0.10);
}
[data-theme="white"] .flash.info[data-pilot-banner="1"] strong,
[data-theme="light"] .flash.info[data-pilot-banner="1"] strong { color: #0f5236; }
@media (prefers-reduced-motion: reduce) {
  .pilot-status-dot { animation: none; }
}

/* Day-85 — `.side-pin` button + `body.side-pinned` semantics retired.
   The whole pin concept was a third sidebar state on top of expanded
   and collapsed; it caused cascade fights that confused the user. The
   sidebar is now a strict two-state machine handled at the top of
   this file. The `.side-pin` button is hidden globally in the LEGACY
   DEFANG block; old localStorage `altoria.sidebar.pinned` keys are
   cleared in the inline `.side-toggle` onclick handler in _layout.html. */

/* ── #38 Sidebar rail logo swap — square A-mark when collapsed ───── */
.portal-sidebar .brand-mark-rail {
  display: none;
  width: 38px; height: 38px;
  margin: 6px auto 4px;
  filter: drop-shadow(0 0 10px rgba(132, 216, 184, 0.45));
}
body.side-collapsed .portal-sidebar .brand-logo-dark,
body.side-collapsed .portal-sidebar .brand-logo-light,
body.side-collapsed .portal-sidebar .portal-brand img:not(.brand-mark-rail) {
  display: none !important;
}
body.side-collapsed .portal-sidebar .brand-mark-rail {
  display: block;
}
body.side-collapsed .portal-sidebar:hover .brand-mark-rail,
body.side-collapsed .portal-sidebar:focus-within .brand-mark-rail {
  display: none;
}
body.side-collapsed .portal-sidebar:hover .portal-brand .brand-logo-dark,
body.side-collapsed .portal-sidebar:focus-within .portal-brand .brand-logo-dark {
  display: block !important;
}
[data-theme="white"] .portal-sidebar .brand-mark-rail,
[data-theme="light"] .portal-sidebar .brand-mark-rail {
  /* Re-tint the green mark for light theme via filter */
  filter: drop-shadow(0 0 8px rgba(15, 82, 54, 0.35))
          brightness(0.55) saturate(1.2);
}

/* ── #39 Avatar drop-zone (Settings — Profilna slika) ─────────────── */
.avatar-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px;
  min-height: 140px;
  border: 2px dashed rgba(132, 216, 184, 0.40);
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.04) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.avatar-dropzone:hover,
.avatar-dropzone.is-dragover {
  border-color: rgba(132, 216, 184, 0.85);
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.10) 0%,
    rgba(81, 193, 148, 0.06) 100%);
  box-shadow: 0 0 18px rgba(132, 216, 184, 0.22);
}
.avatar-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.avatar-dropzone-icon {
  width: 40px; height: 40px;
  color: var(--aco-green-light, #84d8b8);
  filter: drop-shadow(0 0 8px rgba(132, 216, 184, 0.35));
}
.avatar-dropzone-label {
  font-size: 13px;
  color: var(--aco-text);
  font-weight: 600;
}
.avatar-dropzone-hint {
  font-size: 11px;
  color: var(--aco-text-muted);
}
.avatar-dropzone-filename {
  display: none;
  font-size: 12px;
  color: var(--aco-green-light, #84d8b8);
  font-family: var(--af-mono, ui-monospace, monospace);
  word-break: break-all;
  max-width: 100%;
}
.avatar-dropzone.has-file .avatar-dropzone-icon,
.avatar-dropzone.has-file .avatar-dropzone-label,
.avatar-dropzone.has-file .avatar-dropzone-hint { display: none; }
.avatar-dropzone.has-file .avatar-dropzone-filename { display: block; }

[data-theme="white"] .avatar-dropzone,
[data-theme="light"] .avatar-dropzone {
  border-color: rgba(15, 82, 54, 0.25);
  background: linear-gradient(135deg,
    rgba(15, 82, 54, 0.04) 0%,
    rgba(255, 255, 255, 0.60) 100%);
}
[data-theme="white"] .avatar-dropzone:hover,
[data-theme="light"] .avatar-dropzone:hover {
  border-color: rgba(15, 82, 54, 0.55);
}
[data-theme="white"] .avatar-dropzone-icon,
[data-theme="light"] .avatar-dropzone-icon { color: #0f5236; }

/* Crop overlay — appears after file picked, before submit */
.avatar-crop-overlay {
  display: none;
  margin-top: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(132, 216, 184, 0.20);
  border-radius: 12px;
}
.avatar-crop-overlay.is-active { display: block; }
.avatar-crop-canvas-wrap {
  position: relative;
  width: 240px; height: 240px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(132, 216, 184, 0.40), 0 0 32px rgba(132, 216, 184, 0.30);
  cursor: grab;
  background: #000;
}
.avatar-crop-canvas-wrap:active { cursor: grabbing; }
.avatar-crop-canvas-wrap canvas {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.avatar-crop-hint {
  font-size: 11px;
  text-align: center;
  color: var(--aco-text-muted);
  margin-bottom: 10px;
}
.avatar-crop-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ── #40 Empty-state icon — emerald glass circle replacing emojis ──── */
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin: 0 auto var(--as-3);
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.16) 0%,
    rgba(81, 193, 148, 0.08) 100%);
  border: 1px solid rgba(132, 216, 184, 0.30);
  box-shadow:
    0 0 24px rgba(132, 216, 184, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: var(--aco-green-light, #84d8b8);
}
.empty-state-icon svg {
  width: 34px; height: 34px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(132, 216, 184, 0.45));
}
[data-theme="white"] .empty-state-icon,
[data-theme="light"] .empty-state-icon {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  border-color: #6cb393;
  color: #0f5236;
  box-shadow: 0 4px 14px rgba(15, 82, 54, 0.10);
}
[data-theme="white"] .empty-state-icon svg,
[data-theme="light"] .empty-state-icon svg {
  filter: drop-shadow(0 0 4px rgba(15, 82, 54, 0.25));
}


/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 — Tranche H
 *
 *   #43 Pin button visible in rail mode too
 *   #46 White-theme shine reduction (turn off colored glows that read
 *        muddy on cream backgrounds)
 * ════════════════════════════════════════════════════════════════════ */

/* Day-85 — Pin button concept retired (see top of file). Empty stub
   here so any stylesheet built from a partial that referenced #43
   keeps working without breaking specificity calculations. */

/* ── #46 White theme — disable colored glows that look muddy on cream ─ */
[data-theme="white"] .portal-section-group[data-expanded="true"] .portal-section-toggle::before,
[data-theme="light"] .portal-section-group[data-expanded="true"] .portal-section-toggle::before {
  /* The accent-color outline glow looks dirty on cream — drop it */
  display: none;
}
[data-theme="white"] .portal-section-group[data-expanded="true"] .portal-section-toggle span:first-child,
[data-theme="light"] .portal-section-group[data-expanded="true"] .portal-section-toggle span:first-child {
  /* Same for the colored text-shadow glow */
  text-shadow: none;
}
[data-theme="white"] .portal-section-group .portal-section-items a:hover .nav-ico,
[data-theme="light"] .portal-section-group .portal-section-items a:hover .nav-ico {
  /* Drop the drop-shadow on hover — looks like a smudge on cream */
  filter: none;
}
[data-theme="white"] .portal-section-group .portal-section-items a.active .nav-ico,
[data-theme="light"] .portal-section-group .portal-section-items a.active .nav-ico {
  filter: none;
}
/* Sidebar active-link active glow — flatten on white */
[data-theme="white"] .portal-section-group .portal-section-items a.active,
[data-theme="light"] .portal-section-group .portal-section-items a.active {
  box-shadow: inset 3px 0 0 #0f5236;
}
/* User pill animated band — disable on white (the conic-gradient under
   blur turns muddy on cream backgrounds) */
[data-theme="white"] .user-menu-trigger::before,
[data-theme="light"] .user-menu-trigger::before {
  display: none;
}
/* Pilot mode dot — keep it but kill the pulsing animation on white
   (the pulse glow shows as a grey ghost). Solid emerald instead. */
[data-theme="white"] .pilot-status-dot,
[data-theme="light"] .pilot-status-dot {
  animation: none;
  box-shadow: 0 0 0 2px rgba(15, 82, 54, 0.20);
}
/* KPI hover gradient overlay — neutralize on white so colors read clean */
[data-theme="white"] .dash-kpi::before,
[data-theme="light"] .dash-kpi::before {
  display: none;
}
[data-theme="white"] .dash-kpi:hover,
[data-theme="light"] .dash-kpi:hover {
  box-shadow:
    0 6px 18px rgba(15, 82, 54, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
/* Login halo — the rotating trace looks fine in white BUT the
   brand-mark sheen sweep is too bright. Soften. */
[data-theme="white"] .login-brand-mark::before,
[data-theme="light"] .login-brand-mark::before {
  opacity: 0.55;
}

/* ── Klijent sidebar — add icon support + collapse-friendly markup ── */
/* Klijent nav links use .klijent-nav-ico SVGs the same way Centrala
   uses .nav-ico. Both render identically; behaviour collapse/peek
   mirrors Centrala layout exactly. */
.portal-nav .klijent-nav-ico {
  width: 18px; height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.side-collapsed .portal-nav .klijent-nav-ico {
  width: 22px; height: 22px;
}
/* Klijent nav links — same flex-center treatment as Centrala in rail mode */
body.side-collapsed .portal-nav > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 8px;
}
body.side-collapsed .portal-nav > a > span:not(.nav-badge) {
  display: none !important;
}
body.side-pinned .portal-nav > a {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 9px 12px !important;
}
body.side-pinned .portal-nav > a > span:not(.nav-badge) {
  display: revert !important;
}

/* Avatar URL cache-busting handled in template — no CSS needed. */


/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 — Tranche J
 *
 *   #50 Pinned sidebar — brand stays visible when mouse leaves
 *   #48 Pinned sidebar — topbar user pill not clipped on narrow pages
 *   #51 Sidebar follows page scroll (sticky)
 *   #52 /centrala/razgovori tabs — visible in dark + readable on white
 * ════════════════════════════════════════════════════════════════════ */

/* ── #50 Pinned brand: exclude side-collapsed hide-rules when pinned ─ */
/* The previous rule had specificity that beat the pinned override.
   Easier fix: scope the original collapse-hide rule to "not pinned". */
body.side-collapsed:not(.side-pinned) .portal-sidebar .brand-logo-dark,
body.side-collapsed:not(.side-pinned) .portal-sidebar .brand-logo-light,
body.side-collapsed:not(.side-pinned) .portal-sidebar .portal-brand img:not(.brand-mark-rail) {
  /* This duplicates the earlier hide-rule but with :not(.side-pinned).
     The earlier rule will still match and apply, but this one being
     identical doesn't hurt — the practical fix is the override below
     with super-high specificity. */
}
/* Bulletproof override: when pinned, the wordmark always shows,
   regardless of hover state, and the rail mark is always hidden. */
body.side-pinned .portal-sidebar .portal-brand img.brand-mark-rail,
body.side-pinned.side-collapsed .portal-sidebar .portal-brand img.brand-mark-rail {
  display: none !important;
}
body.side-pinned .portal-sidebar .portal-brand img.brand-logo-dark,
body.side-pinned.side-collapsed .portal-sidebar .portal-brand img.brand-logo-dark {
  display: block !important;
}
[data-theme="white"] body.side-pinned .portal-sidebar .portal-brand img.brand-logo-dark,
[data-theme="white"] body.side-pinned.side-collapsed .portal-sidebar .portal-brand img.brand-logo-dark,
[data-theme="light"] body.side-pinned .portal-sidebar .portal-brand img.brand-logo-dark,
[data-theme="light"] body.side-pinned.side-collapsed .portal-sidebar .portal-brand img.brand-logo-dark {
  display: none !important;
}
[data-theme="white"] body.side-pinned .portal-sidebar .portal-brand img.brand-logo-light,
[data-theme="white"] body.side-pinned.side-collapsed .portal-sidebar .portal-brand img.brand-logo-light,
[data-theme="light"] body.side-pinned .portal-sidebar .portal-brand img.brand-logo-light,
[data-theme="light"] body.side-pinned.side-collapsed .portal-sidebar .portal-brand img.brand-logo-light {
  display: block !important;
}

/* ── #48 Topbar — make sure user pill never clips on narrow pages ──── */
.portal-topbar { min-width: 0; }
.portal-topbar .portal-search { min-width: 0; flex-shrink: 1; }
.portal-topbar .user-menu,
.portal-topbar .user-menu-trigger,
.portal-topbar .scope-pill,
.portal-topbar .scope-switcher {
  flex-shrink: 0;
}
.portal-main {
  min-width: 0;       /* allow grid column to actually shrink */
  overflow-x: hidden; /* Stage 3.8j — VRAĆENO originalno overflow-x:
                       * hidden. Sticky topbar problem će biti riješen
                       * drukčije, ne na ovaj način (slomio je layout). */
}

/* ── #51 Sticky sidebar — follows page scroll cleanly ──────────────── */
.portal-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  /* Hide scrollbar visually but keep functional (some browsers) */
  scrollbar-width: thin;
  scrollbar-color: rgba(132, 216, 184, 0.25) transparent;
}
.portal-sidebar::-webkit-scrollbar { width: 6px; }
.portal-sidebar::-webkit-scrollbar-track { background: transparent; }
.portal-sidebar::-webkit-scrollbar-thumb {
  background: rgba(132, 216, 184, 0.18);
  border-radius: 3px;
}
.portal-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(132, 216, 184, 0.35);
}

/* When collapsed-hovering (peek mode), the absolute positioning needs
   to override sticky so the sidebar floats over content. */
body.side-collapsed:not(.side-pinned) .portal-sidebar:hover,
body.side-collapsed:not(.side-pinned) .portal-sidebar:focus-within {
  position: fixed !important;
  top: 0;
  bottom: auto;
  height: 100vh;
}

/* ── #52 /centrala/razgovori tabs — visible in dark + darker on white ─ */
/* Generic chip/tab rules — apply across razgovori, pretplate, taksonomija
   and any other place using .chip / .tab / a[role="tab"] / .pill-tab. */
.chip, .pill-tab, .nav-tab, [role="tab"] {
  color: var(--aco-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(132, 216, 184, 0.20);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.18s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip:hover, .pill-tab:hover, .nav-tab:hover, [role="tab"]:hover {
  background: rgba(132, 216, 184, 0.12);
  border-color: rgba(132, 216, 184, 0.45);
  color: #b6e8d2;
}
.chip.chip-active, .chip.active,
.pill-tab.active, .nav-tab.active,
[role="tab"][aria-selected="true"] {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.22) 0%,
    rgba(81, 193, 148, 0.10) 100%);
  border-color: rgba(132, 216, 184, 0.55);
  color: #84d8b8;
  box-shadow: 0 0 14px rgba(132, 216, 184, 0.20);
}

/* White theme — much darker so they're legible on cream */
[data-theme="white"] .chip,
[data-theme="white"] .pill-tab,
[data-theme="white"] .nav-tab,
[data-theme="white"] [role="tab"],
[data-theme="light"] .chip,
[data-theme="light"] .pill-tab,
[data-theme="light"] .nav-tab,
[data-theme="light"] [role="tab"] {
  color: #1a3326;
  background: rgba(15, 82, 54, 0.06);
  border-color: rgba(15, 82, 54, 0.25);
}
[data-theme="white"] .chip:hover,
[data-theme="white"] .pill-tab:hover,
[data-theme="white"] .nav-tab:hover,
[data-theme="white"] [role="tab"]:hover,
[data-theme="light"] .chip:hover,
[data-theme="light"] .pill-tab:hover,
[data-theme="light"] .nav-tab:hover,
[data-theme="light"] [role="tab"]:hover {
  background: rgba(15, 82, 54, 0.10);
  border-color: rgba(15, 82, 54, 0.45);
  color: #0c4a31;
}
[data-theme="white"] .chip.chip-active,
[data-theme="white"] .chip.active,
[data-theme="white"] .pill-tab.active,
[data-theme="white"] .nav-tab.active,
[data-theme="white"] [role="tab"][aria-selected="true"],
[data-theme="light"] .chip.chip-active,
[data-theme="light"] .chip.active,
[data-theme="light"] .pill-tab.active,
[data-theme="light"] .nav-tab.active,
[data-theme="light"] [role="tab"][aria-selected="true"] {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  border-color: #6cb393;
  color: #0f5236;
  box-shadow: 0 2px 8px rgba(15, 82, 54, 0.12);
}





/* ─────────────────────────────────────────────────────────────────────
   Day 38–70 — zajednički stilovi za nove tablice i pill-badge-ove
   po centrala stranicama (Razgovori, Pretplate, Spremnost, Auto-dodjela,
   Radnici). Tema-otporno: ima jasne kontraste i u dark i u light tem.
   ───────────────────────────────────────────────────────────────────── */

.data-table {
  width: 100%; border-collapse: collapse;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; overflow: hidden;
  margin-top: var(--as-2);
}
.data-table th, .data-table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
  color: rgba(255,255,255,0.92);
}
.data-table th {
  font-size: 11px; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.03);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.data-table td strong { color: white; font-weight: 600; }
.data-table .muted {
  color: rgba(255,255,255,0.7) !important;
  font-size: 13px; line-height: 1.55;
}
.data-table code {
  background: rgba(201,162,74,0.15);
  color: #f0d896;
  padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}

/* Pill badges — global */
.pill {
  /* Stage 3.7 polish (2026-05-23) — Daniel: "Ceka pregled oznake -
   * tekst nije na middle - treba Premium rjesenje". Root cause:
   * `display: inline-block` + asimetrični padding + no line-height
   * = tekst sjeda lijevo / dolje unutar ovala. Premium fix: switch
   * to inline-flex s align-items: center + justify-content: center +
   * line-height: 1 tako da tekst sjedi geometrijski sredinjen u ovalu
   * (Apple / Linear pill pattern). Minimum-height jamči konzistentnu
   * visinu kroz različite glyph metrike (čćšđž imaju različite
   * accent-heights). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  min-height: 20px;
  line-height: 1;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background: rgba(255,255,255,0.18); color: white;
  white-space: nowrap;
}
.pill-ok   { background: #a3c879; color: #1d3a09; }
.pill-warn { background: #f4d35e; color: #4a3500; }
.pill-err  { background: #e8a3a3; color: #4a0c0c; }
.pill-info { background: #b6d3e8; color: #0c2c4a; }
.pill-tier-basic    { background: #1b3a57; color: white; }
.pill-tier-pro      { background: #2e6fa7; color: white; }
.pill-tier-capital  { background: #c9a24a; color: white; }
.pill-tier-business { background: #e67e22; color: white; }

/* Filter chips */
.chip {
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-size: 13px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.15);
  transition: all .12s ease;
}
.chip:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}
.chip-active {
  background: #c9a24a;
  color: #0f2a44;
  border-color: #c9a24a;
  font-weight: 600;
}

/* ── Light theme overrides — kad je `data-theme="white"` ili "light",
       koristi tamni tekst na svjetloj pozadini. */
[data-theme="white"] .data-table,
[data-theme="light"] .data-table {
  background: white;
  border-color: rgba(0,0,0,0.10);
}
[data-theme="white"] .data-table th,
[data-theme="light"] .data-table th {
  background: #f5f1e8;
  color: #6e7488;
}
[data-theme="white"] .data-table th,
[data-theme="white"] .data-table td,
[data-theme="light"] .data-table th,
[data-theme="light"] .data-table td {
  border-bottom-color: rgba(0,0,0,0.08);
  color: #1a2434;
}
[data-theme="white"] .data-table td strong,
[data-theme="light"] .data-table td strong { color: #0f2a44; }
[data-theme="white"] .data-table .muted,
[data-theme="light"] .data-table .muted {
  color: #4a5566 !important;
}
[data-theme="white"] .data-table code,
[data-theme="light"] .data-table code {
  background: rgba(201,162,74,0.18);
  color: #6b4f1f;
}
[data-theme="white"] .chip,
[data-theme="light"] .chip {
  background: rgba(0,0,0,0.04);
  color: #1a2434;
  border-color: rgba(0,0,0,0.10);
}
[data-theme="white"] .chip:hover,
[data-theme="light"] .chip:hover { background: rgba(0,0,0,0.08); }


/* ── Notice / banner (Day 75A — themed alternative to inline yellow) ─ */
/* Used by the Test način banner on /centrala/pretplate and any other
 * "non-blocking warning" callout. Theme-aware: dark theme uses a
 * subtle amber tint with the brand emerald edge; light theme uses a
 * cream background with a warm copper edge. Text always meets WCAG
 * contrast against the surface — fixes the previous bright-yellow +
 * white-text combo that was unreadable.
 */
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  margin-top: var(--as-2);
  border: 1px solid transparent;
}
.notice strong { font-weight: 600; }
.notice code {
  font-family: var(--af-mono, ui-monospace, monospace);
  background: rgba(0,0,0,0.18);
  padding: 1px 6px;
  border-radius: 4px;
}
/* Dark theme variants */
.notice-warn {
  background: rgba(201,162,74,0.10);
  border-color: rgba(201,162,74,0.35);
  color: var(--aco-text, #e7eef0);
}
.notice-warn strong { color: var(--aco-emerald, #84d8b8); }
.notice-info {
  background: rgba(132,216,184,0.06);
  border-color: rgba(132,216,184,0.30);
  color: var(--aco-text, #e7eef0);
}
.notice-info strong { color: var(--aco-emerald, #84d8b8); }
.notice-err {
  background: rgba(220,80,80,0.10);
  border-color: rgba(220,80,80,0.40);
  color: var(--aco-text, #e7eef0);
}
.notice-err strong { color: #ff8989; }
/* Light + white theme overrides — readable contrast, Altoria-style */
[data-theme="white"] .notice-warn,
[data-theme="light"] .notice-warn {
  background: #fdf8ed;
  border-color: #d9c79a;
  color: #4a3d1a;
}
[data-theme="white"] .notice-warn strong,
[data-theme="light"] .notice-warn strong { color: #6b4f1f; }
[data-theme="white"] .notice-warn code,
[data-theme="light"] .notice-warn code {
  background: rgba(0,0,0,0.06);
  color: #4a3d1a;
}
[data-theme="white"] .notice-info,
[data-theme="light"] .notice-info {
  background: #eef7f1;
  border-color: #b6d8c4;
  color: #1a3d2c;
}
[data-theme="white"] .notice-info strong,
[data-theme="light"] .notice-info strong { color: #0f5236; }


/* ── Own-books emerald pill (Day 75A) ──────────────────────────────── */
/* When the operator is scoped to altoria_self, the topbar shows an
 * emerald pill that's much more visible than the previous grey
 * "· Own books" suffix. Communicates "you are working on Altoria's
 * OWN books, not a client's" at a glance. */
.pill.pill-own-books {
  background: linear-gradient(135deg, rgba(132,216,184,0.18), rgba(81,193,148,0.22));
  border: 1px solid rgba(132,216,184,0.45);
  color: #84d8b8;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 4px 10px;
}
.pill.pill-own-books::before {
  content: "📒";
  margin-right: 6px;
  font-size: 13px;
}
[data-theme="white"] .pill.pill-own-books,
[data-theme="light"] .pill.pill-own-books {
  background: linear-gradient(135deg, #d6efe1, #b8e3cd);
  border-color: #6cb393;
  color: #0f5236;
}

/* Active-account banner — generic shell + kind pill (Day 75A → 75B) */
.scope-banner {
  display: flex;
  align-items: center;
  gap: var(--as-3);
  padding: var(--as-2) var(--as-3);
  margin: 0 0 var(--as-4) 0;
  font-size: 13px;
  border-left: 3px solid transparent;
  transition: border-color 0.2s;
}
.scope-banner-icon { font-size: 18px; }
.scope-banner-name { flex: 1; }
.scope-banner-kind {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--aco-muted, #a8b3c1);
  text-transform: none;
  font-weight: 500;
  padding: 4px 10px;
}
[data-theme="white"] .scope-banner-kind,
[data-theme="light"] .scope-banner-kind {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: #4a5566;
}


/* ────────────────────────────────────────────────────────────────────
 * Day 79.5 — Premium / futuristic polish
 *
 * Three big improvements:
 *   1. Scope-switcher dropdown — Altoria-themed gradient buttons
 *      (replaces the off-context light grey pills)
 *   2. White theme contrast lift — gradient-text headings now have
 *      proper green that doesn't disappear on cream backgrounds
 *   3. Premium icon system — KPI tile icons + sidebar icons get
 *      gradient + subtle glow, "shine" subtle but unmistakably
 *      next-gen
 *   4. Taksonomija tab redesign — breathing room + premium pills
 * ──────────────────────────────────────────────────────────────────── */

/* ── 1. Scope-switcher dropdown (Promijeni opseg) ─────────────────── */

.scope-dropdown {
  background: linear-gradient(155deg,
    var(--aco-bg-2, rgba(19, 28, 23, 0.98)) 0%,
    var(--aco-bg-3, rgba(24, 37, 32, 0.98)) 100%);
  border: 1px solid rgba(132, 216, 184, 0.18);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(132, 216, 184, 0.08) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.scope-dropdown .scope-section-title {
  color: var(--aco-text-muted, #a8b3c1);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 10px 14px 6px;
  border-bottom: 1px solid rgba(132, 216, 184, 0.06);
}
.scope-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
}
.scope-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 12px 14px;
  background: rgba(132, 216, 184, 0.04);
  border: 1px solid rgba(132, 216, 184, 0.14);
  border-radius: 10px;
  color: var(--aco-text, #e7eef0);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}
.scope-option::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.10) 0%,
    rgba(81, 193, 148, 0.04) 100%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.scope-option:hover {
  border-color: rgba(132, 216, 184, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(132, 216, 184, 0.10);
}
.scope-option:hover::before { opacity: 1; }
.scope-option.active {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.22) 0%,
    rgba(81, 193, 148, 0.12) 100%);
  border-color: rgba(132, 216, 184, 0.55);
  color: #84d8b8;
  box-shadow: 0 0 0 2px rgba(132, 216, 184, 0.10) inset;
}
.scope-option.active .scope-option-name { color: #84d8b8; }
.scope-option-name {
  font-weight: 600;
  font-size: 13.5px;
  position: relative;
  z-index: 1;
}
.scope-option-meta {
  font-size: 11px;
  font-family: var(--af-mono, ui-monospace, monospace);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
/* Light theme override — soft cream gradient + emerald accent */
[data-theme="white"] .scope-dropdown,
[data-theme="light"] .scope-dropdown {
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 251, 249, 0.98) 100%);
  border-color: rgba(12, 91, 60, 0.12);
  box-shadow:
    0 12px 40px rgba(12, 91, 60, 0.10),
    0 0 0 1px rgba(12, 91, 60, 0.04) inset;
}
[data-theme="white"] .scope-option,
[data-theme="light"] .scope-option {
  background: rgba(12, 91, 60, 0.03);
  border-color: rgba(12, 91, 60, 0.10);
  color: #1a2434;
}
[data-theme="white"] .scope-option:hover,
[data-theme="light"] .scope-option:hover {
  border-color: rgba(12, 91, 60, 0.30);
  box-shadow: 0 4px 16px rgba(12, 91, 60, 0.08);
}
[data-theme="white"] .scope-option.active,
[data-theme="light"] .scope-option.active {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  border-color: #6cb393;
  color: #0f5236;
}
[data-theme="white"] .scope-option.active .scope-option-name,
[data-theme="light"] .scope-option.active .scope-option-name {
  color: #0f5236;
}


/* ── 2. White theme contrast lift — gradient text + headings ──────── */

[data-theme="white"] .grad,
[data-theme="light"] .grad {
  /* Daniel's "Vaše postavke" gradient was almost invisible on light bg.
   * Force a darker emerald start + crispier emerald end so the text
   * pops without abandoning the gradient feel. */
  background: linear-gradient(135deg, #0c5b3c 0%, #51c194 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
[data-theme="white"] .dash-hero-h1,
[data-theme="light"] .dash-hero-h1 {
  color: #062017;
}


/* ── 3. Premium icon system — KPI tiles + sidebar ─────────────────── */

/* KPI tile icons get a subtle gradient orb + soft glow on hover.
 * We keep monochrome SVG strokes (theme-aware via currentColor) and
 * paint the BACKGROUND container with the gradient. So no SVG swap
 * needed — every existing icon picks up the new look automatically. */
.dash-kpi-icon {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.18) 0%,
    rgba(74, 144, 226, 0.10) 100%);
  border: 1px solid rgba(132, 216, 184, 0.20);
  border-radius: 12px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.25s ease;
}
.dash-kpi-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.45) 0%,
    rgba(74, 144, 226, 0.20) 100%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.dash-kpi-icon svg {
  position: relative;
  z-index: 1;
  color: #84d8b8;
}
.dash-kpi:hover .dash-kpi-icon {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(132, 216, 184, 0.55);
}
.dash-kpi:hover .dash-kpi-icon::before {
  opacity: 0.6;
}

/* KPI tile colour rotation — give each KPI its own subtle hue so the
 * dashboard feels like a constellation, not a wall of identical green
 * boxes. We rotate emerald → steel-blue → copper → violet across
 * children. */
.dash-kpi:nth-child(4n+1) .dash-kpi-icon {
  background: linear-gradient(135deg, rgba(132,216,184,0.22), rgba(81,193,148,0.10));
}
.dash-kpi:nth-child(4n+1) .dash-kpi-icon svg { color: #84d8b8; }
.dash-kpi:nth-child(4n+2) .dash-kpi-icon {
  background: linear-gradient(135deg, rgba(74,144,226,0.22), rgba(58,116,201,0.10));
}
.dash-kpi:nth-child(4n+2) .dash-kpi-icon svg { color: #74a9e6; }
.dash-kpi:nth-child(4n+3) .dash-kpi-icon {
  background: linear-gradient(135deg, rgba(201,162,74,0.22), rgba(189,120,0,0.10));
}
.dash-kpi:nth-child(4n+3) .dash-kpi-icon svg { color: #e8c372; }
.dash-kpi:nth-child(4n+4) .dash-kpi-icon {
  background: linear-gradient(135deg, rgba(190,140,200,0.22), rgba(150,100,170,0.10));
}
.dash-kpi:nth-child(4n+4) .dash-kpi-icon svg { color: #d4a8e0; }

/* Light theme: slightly darker tints + cream backgrounds */
[data-theme="white"] .dash-kpi-icon,
[data-theme="light"] .dash-kpi-icon {
  background: linear-gradient(135deg, #e8f5ee 0%, #d8eaf2 100%);
  border-color: rgba(12, 91, 60, 0.18);
}
[data-theme="white"] .dash-kpi:nth-child(4n+1) .dash-kpi-icon svg,
[data-theme="light"] .dash-kpi:nth-child(4n+1) .dash-kpi-icon svg { color: #0c5b3c; }
[data-theme="white"] .dash-kpi:nth-child(4n+2) .dash-kpi-icon svg,
[data-theme="light"] .dash-kpi:nth-child(4n+2) .dash-kpi-icon svg { color: #1f4f8a; }
[data-theme="white"] .dash-kpi:nth-child(4n+3) .dash-kpi-icon svg,
[data-theme="light"] .dash-kpi:nth-child(4n+3) .dash-kpi-icon svg { color: #6b4f1f; }
[data-theme="white"] .dash-kpi:nth-child(4n+4) .dash-kpi-icon svg,
[data-theme="light"] .dash-kpi:nth-child(4n+4) .dash-kpi-icon svg { color: #6b3d80; }


/* ── 4. Taksonomija futuristic UI ─────────────────────────────────── */

/* Shared chip class — used across multiple pages. Day 79.5 adds
 * breathing room + gradient pills + subtle hover lift. */
.taxonomy-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--as-3) 0 var(--as-2);
  border-bottom: 1px solid rgba(132, 216, 184, 0.10);
  margin-bottom: var(--as-4);
}
.taxonomy-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--aco-text, #e7eef0);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--af-mono, ui-monospace, monospace);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
  position: relative;
}
.taxonomy-tab:hover {
  border-color: rgba(132, 216, 184, 0.35);
  background: rgba(132, 216, 184, 0.06);
  transform: translateY(-1px);
}
.taxonomy-tab.active {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.22) 0%,
    rgba(81, 193, 148, 0.12) 100%);
  border-color: rgba(132, 216, 184, 0.55);
  color: #84d8b8;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(132, 216, 184, 0.06);
}
.taxonomy-tab .tax-count {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.20);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.taxonomy-tab.active .tax-count {
  background: rgba(132, 216, 184, 0.18);
  color: #84d8b8;
}

.taxonomy-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: var(--as-2) 0 var(--as-3);
  font-size: 13px;
}
.taxonomy-filter-label {
  color: var(--aco-text-muted, #a8b3c1);
  font-weight: 500;
  margin-right: 4px;
}
.taxonomy-industry {
  display: inline-block;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  color: var(--aco-text-muted, #a8b3c1);
  font-size: 12px;
  font-family: var(--af-mono, ui-monospace, monospace);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.taxonomy-industry:hover {
  border-color: rgba(132, 216, 184, 0.30);
  color: var(--aco-text, #e7eef0);
}
.taxonomy-industry.active {
  background: rgba(132, 216, 184, 0.10);
  border-color: rgba(132, 216, 184, 0.40);
  color: #84d8b8;
}

/* Light theme overrides */
[data-theme="white"] .taxonomy-tab,
[data-theme="light"] .taxonomy-tab {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a2434;
}
[data-theme="white"] .taxonomy-tab:hover,
[data-theme="light"] .taxonomy-tab:hover {
  border-color: rgba(12, 91, 60, 0.30);
  background: rgba(12, 91, 60, 0.04);
}
[data-theme="white"] .taxonomy-tab.active,
[data-theme="light"] .taxonomy-tab.active {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  border-color: #6cb393;
  color: #0f5236;
}
[data-theme="white"] .taxonomy-tab.active .tax-count,
[data-theme="light"] .taxonomy-tab.active .tax-count {
  background: rgba(15, 82, 54, 0.18);
  color: #0f5236;
}
[data-theme="white"] .taxonomy-industry,
[data-theme="light"] .taxonomy-industry {
  border-color: rgba(0, 0, 0, 0.10);
  color: #4a5566;
}
[data-theme="white"] .taxonomy-industry.active,
[data-theme="light"] .taxonomy-industry.active {
  background: #d6efe1;
  border-color: #6cb393;
  color: #0f5236;
}


/* ════════════════════════════════════════════════════════════════════
 * Day 79.5 v2 — White-theme contrast lift (AGGRESIVNO)
 *
 * Problem: pastel emerald (#84d8b8 family) je dobar na tamnoj pozadini,
 * ali na cream pozadini (light theme) postaje skoro nevidljiv.
 * Rješenje: force-override SVE eyebrow / section-title / muted /
 * gradient-text klase u light theme s tamnijim emeraldom (#0c5b3c-ish).
 * ════════════════════════════════════════════════════════════════════ */

[data-theme="white"] .eyebrow,
[data-theme="light"] .eyebrow,
[data-theme="white"] .dash-hero-eyebrow,
[data-theme="light"] .dash-hero-eyebrow {
  color: #0c5b3c !important;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* "ACCOUNT CONFIGURATION" / "BACKGROUND THEME" — uppercase labels
 * iznad section-card headings. Bili su pastel emerald — sad tamniji. */
[data-theme="white"] [class*="-eyebrow"],
[data-theme="light"] [class*="-eyebrow"] {
  color: #0c5b3c !important;
}

/* Section titles in light theme — uppercase tracking + bolder */
[data-theme="white"] .section-title h2,
[data-theme="light"] .section-title h2 {
  color: #062017;
}
[data-theme="white"] h2,
[data-theme="light"] h2,
[data-theme="white"] h3,
[data-theme="light"] h3 {
  color: #062017;
}

/* Muted text in light theme — drop muted opacity floor so it stays
 * readable on cream */
[data-theme="white"] .muted,
[data-theme="light"] .muted {
  color: #4a5566 !important;
}

/* Stabilization sprint 2026-05-25 v3 — sidebar .muted scoped override.
   The global rule above forces every .muted on light/white theme to
   dark-grey #4a5566 with !important. That looks correct on the
   bright content area, but the LEFT SIDEBAR stays dark-green on
   every theme — dark grey on dark green is unreadable.

   We scope these selectors to the picker / scope dropdown elements so
   the catch-all !important is beaten on specificity AND on the
   !important arbitration. Result: sidebar muted text gets bright
   white-with-alpha on light themes, matching the dark-theme look. */
[data-theme="light"] .sidebar-scope-option .muted,
[data-theme="white"]  .sidebar-scope-option .muted,
[data-theme="light"] .sidebar-scope-empty .muted,
[data-theme="white"]  .sidebar-scope-empty .muted,
[data-theme="light"] .scope-option-meta.muted,
[data-theme="white"]  .scope-option-meta.muted,
[data-theme="light"] .portal-sidebar-supergroup-sub.muted,
[data-theme="white"]  .portal-sidebar-supergroup-sub.muted,
[data-theme="light"] .ph-link-firm.muted,
[data-theme="white"]  .ph-link-firm.muted {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Page-head subtitle / page descriptions in light theme */
[data-theme="white"] .page-head p,
[data-theme="light"] .page-head p,
[data-theme="white"] .subtitle,
[data-theme="light"] .subtitle {
  color: #2c3e4a;
}

/* Settings page eyebrow + heading specifically */
[data-theme="white"] .settings-eyebrow,
[data-theme="light"] .settings-eyebrow {
  color: #0c5b3c !important;
}


/* ════════════════════════════════════════════════════════════════════
 * Day 79.5 v2 — Premium Taksonomija floating tabs (ref-inspired)
 *
 * Daniel's design references (HR portal tabs, Exit Surveys cards,
 * Siri-style overlay): floating glass cards with subtle blur, gradient
 * underline for active tab, hover lift, premium "shine" feel.
 * ════════════════════════════════════════════════════════════════════ */

.taxonomy-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: var(--as-4) 0 var(--as-3);
  margin-bottom: var(--as-3);
  /* Remove the bottom border — switch to floating standalone bar */
  border-bottom: none;
  position: relative;
}
.taxonomy-tabs-bar::after {
  /* Subtle gradient line below tabs (instead of solid border) */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(132, 216, 184, 0.20) 30%,
    rgba(132, 216, 184, 0.20) 70%,
    transparent 100%);
}

.taxonomy-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(132, 216, 184, 0.14);
  border-radius: 14px;
  color: var(--aco-text, #e7eef0);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--af-body, "Inter", system-ui, sans-serif);
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.taxonomy-tab::before {
  /* Hidden gradient layer that fades in on hover/active */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.18) 0%,
    rgba(81, 193, 148, 0.06) 50%,
    rgba(74, 144, 226, 0.10) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.taxonomy-tab::after {
  /* Active state — gradient underline like the HR portal reference */
  content: "";
  position: absolute;
  bottom: -2px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, #51c194 0%, #84d8b8 50%, #74a9e6 100%);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: all 0.3s ease;
}

.taxonomy-tab:hover {
  border-color: rgba(132, 216, 184, 0.40);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(132, 216, 184, 0.10),
    0 0 0 1px rgba(132, 216, 184, 0.08);
}
.taxonomy-tab:hover::before { opacity: 1; }

.taxonomy-tab.active {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.16) 0%,
    rgba(81, 193, 148, 0.10) 100%);
  border-color: rgba(132, 216, 184, 0.55);
  color: #84d8b8;
  font-weight: 700;
  box-shadow:
    0 0 0 1px rgba(132, 216, 184, 0.18) inset,
    0 6px 20px rgba(132, 216, 184, 0.12);
}
.taxonomy-tab.active::before { opacity: 1; }
.taxonomy-tab.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.taxonomy-tab > * { position: relative; z-index: 1; }

.taxonomy-tab .tax-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.30);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--af-mono, ui-monospace, monospace);
  letter-spacing: 0;
}
.taxonomy-tab.active .tax-count {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.30),
    rgba(81, 193, 148, 0.20));
  color: #84d8b8;
  box-shadow: 0 0 12px rgba(132, 216, 184, 0.30);
}


/* Industry filter row — secondary, smaller chips with subtle hover */
.taxonomy-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: var(--as-3) 0 var(--as-4);
  font-size: 13px;
}
.taxonomy-filter-label {
  color: var(--aco-text-muted, #a8b3c1);
  font-weight: 500;
  margin-right: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.taxonomy-industry {
  display: inline-block;
  padding: 7px 13px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--aco-text-muted, #a8b3c1);
  font-size: 12px;
  font-family: var(--af-mono, ui-monospace, monospace);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
  position: relative;
}
.taxonomy-industry:hover {
  border-color: rgba(132, 216, 184, 0.35);
  color: var(--aco-text, #e7eef0);
  background: rgba(132, 216, 184, 0.04);
  transform: translateY(-1px);
}
.taxonomy-industry.active {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.14) 0%,
    rgba(81, 193, 148, 0.06) 100%);
  border-color: rgba(132, 216, 184, 0.55);
  color: #84d8b8;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(132, 216, 184, 0.08);
}

/* ── Light theme — premium taksonomija na cream ───────────────────── */

[data-theme="white"] .taxonomy-tab,
[data-theme="light"] .taxonomy-tab {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(12, 91, 60, 0.12);
  color: #1a2434;
  box-shadow: 0 2px 8px rgba(12, 91, 60, 0.05);
  backdrop-filter: blur(8px);
}
[data-theme="white"] .taxonomy-tab:hover,
[data-theme="light"] .taxonomy-tab:hover {
  border-color: rgba(12, 91, 60, 0.30);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 8px 24px rgba(12, 91, 60, 0.10),
    0 0 0 1px rgba(12, 91, 60, 0.06);
}
[data-theme="white"] .taxonomy-tab.active,
[data-theme="light"] .taxonomy-tab.active {
  background: linear-gradient(135deg, #ffffff 0%, #ecf7f0 100%);
  border-color: #6cb393;
  color: #0c5b3c;
  box-shadow:
    0 0 0 1px rgba(108, 179, 147, 0.45) inset,
    0 8px 24px rgba(12, 91, 60, 0.12);
}
[data-theme="white"] .taxonomy-tab.active::after,
[data-theme="light"] .taxonomy-tab.active::after {
  background: linear-gradient(90deg, #0c5b3c 0%, #51c194 50%, #2e75b6 100%);
}
[data-theme="white"] .taxonomy-tab .tax-count,
[data-theme="light"] .taxonomy-tab .tax-count {
  background: rgba(12, 91, 60, 0.10);
  color: #0c5b3c;
}
[data-theme="white"] .taxonomy-tab.active .tax-count,
[data-theme="light"] .taxonomy-tab.active .tax-count {
  background: linear-gradient(135deg, #d6efe1, #b8e3cd);
  color: #0c5b3c;
  box-shadow: 0 0 12px rgba(12, 91, 60, 0.15);
}
[data-theme="white"] .taxonomy-tabs-bar::after,
[data-theme="light"] .taxonomy-tabs-bar::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(12, 91, 60, 0.20) 30%,
    rgba(12, 91, 60, 0.20) 70%,
    transparent 100%);
}
[data-theme="white"] .taxonomy-industry,
[data-theme="light"] .taxonomy-industry {
  border-color: rgba(0, 0, 0, 0.10);
  color: #4a5566;
}
[data-theme="white"] .taxonomy-industry:hover,
[data-theme="light"] .taxonomy-industry:hover {
  border-color: rgba(12, 91, 60, 0.30);
  background: rgba(12, 91, 60, 0.04);
  color: #062017;
}
[data-theme="white"] .taxonomy-industry.active,
[data-theme="light"] .taxonomy-industry.active {
  background: linear-gradient(135deg, #d6efe1, #b8e3cd);
  border-color: #6cb393;
  color: #0c5b3c;
  box-shadow: 0 0 0 2px rgba(12, 91, 60, 0.08);
}
[data-theme="white"] .taxonomy-filter-label,
[data-theme="light"] .taxonomy-filter-label {
  color: #4a5566;
}


/* ════════════════════════════════════════════════════════════════════
 * Day 79.5 v2 — Stronger KPI icon redesign (visible glow + shine)
 * ════════════════════════════════════════════════════════════════════ */

/* The previous .dash-kpi-icon styling was too subtle. Now we add a
 * pseudo-element halo that's clearly visible + a "shine" sweep on
 * hover. Each KPI tile gets a distinctive coloured icon orb. */

.dash-kpi {
  position: relative;
  overflow: hidden;
}

.dash-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.22) 0%,
    rgba(81, 193, 148, 0.12) 50%,
    rgba(74, 144, 226, 0.08) 100%) !important;
  border: 1px solid rgba(132, 216, 184, 0.30) !important;
  box-shadow:
    0 0 0 1px rgba(132, 216, 184, 0.10) inset,
    0 4px 12px rgba(132, 216, 184, 0.10) !important;
  transition: all 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dash-kpi-icon::after {
  /* The "shine" highlight — diagonal sweep across the orb */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 35%,
    transparent 70%);
  pointer-events: none;
}

.dash-kpi-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px currentColor);
  position: relative;
  z-index: 1;
}

.dash-kpi:hover .dash-kpi-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 0 0 1px rgba(132, 216, 184, 0.20) inset,
    0 8px 24px rgba(132, 216, 184, 0.25) !important;
}

/* Unique color per KPI position — emerald / blue / copper / violet / mint */
.dash-kpi:nth-child(5n+1) .dash-kpi-icon {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.28) 0%,
    rgba(81, 193, 148, 0.16) 100%) !important;
  border-color: rgba(132, 216, 184, 0.42) !important;
}
.dash-kpi:nth-child(5n+1) .dash-kpi-icon svg { color: #84d8b8; }

.dash-kpi:nth-child(5n+2) .dash-kpi-icon {
  background: linear-gradient(135deg,
    rgba(116, 169, 230, 0.26) 0%,
    rgba(58, 116, 201, 0.14) 100%) !important;
  border-color: rgba(116, 169, 230, 0.42) !important;
}
.dash-kpi:nth-child(5n+2) .dash-kpi-icon svg { color: #8fb8e8; }

.dash-kpi:nth-child(5n+3) .dash-kpi-icon {
  background: linear-gradient(135deg,
    rgba(232, 195, 114, 0.26) 0%,
    rgba(189, 120, 0, 0.14) 100%) !important;
  border-color: rgba(232, 195, 114, 0.42) !important;
}
.dash-kpi:nth-child(5n+3) .dash-kpi-icon svg { color: #f0cb78; }

.dash-kpi:nth-child(5n+4) .dash-kpi-icon {
  background: linear-gradient(135deg,
    rgba(212, 168, 224, 0.26) 0%,
    rgba(150, 100, 170, 0.14) 100%) !important;
  border-color: rgba(212, 168, 224, 0.42) !important;
}
.dash-kpi:nth-child(5n+4) .dash-kpi-icon svg { color: #d8aae8; }

.dash-kpi:nth-child(5n+5) .dash-kpi-icon {
  background: linear-gradient(135deg,
    rgba(180, 230, 220, 0.26) 0%,
    rgba(100, 200, 180, 0.14) 100%) !important;
  border-color: rgba(180, 230, 220, 0.42) !important;
}
.dash-kpi:nth-child(5n+5) .dash-kpi-icon svg { color: #b8e6dc; }

/* Light theme: brighten orb backgrounds + darken icon strokes */
[data-theme="white"] .dash-kpi-icon,
[data-theme="light"] .dash-kpi-icon {
  background: linear-gradient(135deg, #e8f5ee 0%, #d8eaf2 100%) !important;
  border: 1px solid rgba(12, 91, 60, 0.18) !important;
  box-shadow:
    0 0 0 1px rgba(12, 91, 60, 0.06) inset,
    0 4px 12px rgba(12, 91, 60, 0.08) !important;
}
[data-theme="white"] .dash-kpi-icon::after,
[data-theme="light"] .dash-kpi-icon::after {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.10) 35%,
    transparent 70%);
}
[data-theme="white"] .dash-kpi:hover .dash-kpi-icon,
[data-theme="light"] .dash-kpi:hover .dash-kpi-icon {
  box-shadow:
    0 0 0 1px rgba(12, 91, 60, 0.18) inset,
    0 8px 24px rgba(12, 91, 60, 0.18) !important;
}
[data-theme="white"] .dash-kpi:nth-child(5n+1) .dash-kpi-icon svg,
[data-theme="light"] .dash-kpi:nth-child(5n+1) .dash-kpi-icon svg { color: #0c5b3c; }
[data-theme="white"] .dash-kpi:nth-child(5n+2) .dash-kpi-icon svg,
[data-theme="light"] .dash-kpi:nth-child(5n+2) .dash-kpi-icon svg { color: #1f4f8a; }
[data-theme="white"] .dash-kpi:nth-child(5n+3) .dash-kpi-icon svg,
[data-theme="light"] .dash-kpi:nth-child(5n+3) .dash-kpi-icon svg { color: #6b4f1f; }
[data-theme="white"] .dash-kpi:nth-child(5n+4) .dash-kpi-icon svg,
[data-theme="light"] .dash-kpi:nth-child(5n+4) .dash-kpi-icon svg { color: #6b3d80; }
[data-theme="white"] .dash-kpi:nth-child(5n+5) .dash-kpi-icon svg,
[data-theme="light"] .dash-kpi:nth-child(5n+5) .dash-kpi-icon svg { color: #1a6b58; }


/* ════════════════════════════════════════════════════════════════════
 * Day 79.5 v3 — Neon-pill tabs (per-kind accent, Altoria palette)
 *
 * Inspiracija: Daniel-ova screenshot s pill tabovima (In progress / To-do
 * / In Review / Design Review / Rework / Done / Not Started / Blocked /
 * On Hold / Archived) — svaki pill ima distinct accent boju + suptilni
 * outer glow. Mi mapiramo Altoria paletu: emerald / blue / copper /
 * mauve / mint / rose. Glow pojačan na active state.
 * ════════════════════════════════════════════════════════════════════ */

.taxonomy-tab {
  /* Default = emerald accent; per-kind override below. */
  --pill-accent: #84d8b8;
  --pill-accent-soft: rgba(132, 216, 184, 0.20);
  --pill-accent-bg: rgba(132, 216, 184, 0.08);
  --pill-accent-shadow: rgba(132, 216, 184, 0.30);
}

/* "Sve" tab → emerald (Altoria primary) */
.taxonomy-tab[data-kind="all"] {
  --pill-accent: #84d8b8;
  --pill-accent-soft: rgba(132, 216, 184, 0.22);
  --pill-accent-bg: rgba(132, 216, 184, 0.10);
  --pill-accent-shadow: rgba(132, 216, 184, 0.35);
}
/* URA → blue (incoming invoices = receiving) */
.taxonomy-tab[data-kind="ura"] {
  --pill-accent: #8fb8e8;
  --pill-accent-soft: rgba(143, 184, 232, 0.22);
  --pill-accent-bg: rgba(143, 184, 232, 0.10);
  --pill-accent-shadow: rgba(143, 184, 232, 0.35);
}
/* IRA → mauve (outgoing invoices = sending) */
.taxonomy-tab[data-kind="ira"] {
  --pill-accent: #d8aae8;
  --pill-accent-soft: rgba(216, 170, 232, 0.22);
  --pill-accent-bg: rgba(216, 170, 232, 0.10);
  --pill-accent-shadow: rgba(216, 170, 232, 0.35);
}
/* BANK → copper / amber (financial flow) */
.taxonomy-tab[data-kind="bank"] {
  --pill-accent: #f0cb78;
  --pill-accent-soft: rgba(240, 203, 120, 0.22);
  --pill-accent-bg: rgba(240, 203, 120, 0.10);
  --pill-accent-shadow: rgba(240, 203, 120, 0.35);
}
/* PAYSTUB → coral (HR / people) */
.taxonomy-tab[data-kind="paystub"] {
  --pill-accent: #f49994;
  --pill-accent-soft: rgba(244, 153, 148, 0.22);
  --pill-accent-bg: rgba(244, 153, 148, 0.10);
  --pill-accent-shadow: rgba(244, 153, 148, 0.35);
}
/* CONTRACT → mint (legal / structured) */
.taxonomy-tab[data-kind="contract"] {
  --pill-accent: #b8e6dc;
  --pill-accent-soft: rgba(184, 230, 220, 0.22);
  --pill-accent-bg: rgba(184, 230, 220, 0.10);
  --pill-accent-shadow: rgba(184, 230, 220, 0.35);
}
/* OTHER → muted lavender */
.taxonomy-tab[data-kind="other"] {
  --pill-accent: #b8b0d6;
  --pill-accent-soft: rgba(184, 176, 214, 0.22);
  --pill-accent-bg: rgba(184, 176, 214, 0.10);
  --pill-accent-shadow: rgba(184, 176, 214, 0.35);
}

/* Override the dark-theme tab look with the per-kind accent */
.taxonomy-tab {
  border-color: var(--pill-accent-soft) !important;
  background:
    linear-gradient(135deg,
      var(--pill-accent-bg) 0%,
      rgba(255, 255, 255, 0.02) 100%) !important;
}
.taxonomy-tab:hover {
  border-color: var(--pill-accent) !important;
  box-shadow:
    0 8px 24px var(--pill-accent-shadow),
    0 0 0 1px var(--pill-accent-soft) !important;
}
.taxonomy-tab.active {
  background: linear-gradient(135deg,
    var(--pill-accent-bg),
    rgba(0, 0, 0, 0.10)) !important;
  border-color: var(--pill-accent) !important;
  color: var(--pill-accent) !important;
  box-shadow:
    0 0 0 1px var(--pill-accent) inset,
    0 0 24px var(--pill-accent-shadow),
    0 6px 20px rgba(0, 0, 0, 0.20) !important;
  text-shadow: 0 0 12px var(--pill-accent-shadow);
}
.taxonomy-tab.active::after {
  /* Per-kind gradient underline replaces the generic emerald one */
  background: linear-gradient(90deg,
    transparent 0%,
    var(--pill-accent) 50%,
    transparent 100%) !important;
  height: 2px;
  filter: drop-shadow(0 0 6px var(--pill-accent-shadow));
}
.taxonomy-tab.active .tax-count {
  background: var(--pill-accent-bg) !important;
  color: var(--pill-accent) !important;
  box-shadow: 0 0 16px var(--pill-accent-shadow);
}

/* Light-theme — soften shadows + darken accent text for cream bg */
[data-theme="white"] .taxonomy-tab,
[data-theme="light"] .taxonomy-tab {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: var(--pill-accent-soft) !important;
  color: #1a2434 !important;
}
[data-theme="white"] .taxonomy-tab.active,
[data-theme="light"] .taxonomy-tab.active {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95),
    var(--pill-accent-bg)) !important;
  /* Darker per-kind accent for cream — calc() inline isn't reliable, so
   * we just use the same accent but with stronger inset shadow */
  border-color: var(--pill-accent) !important;
  color: #062017 !important;
  box-shadow:
    0 0 0 1px var(--pill-accent) inset,
    0 0 24px var(--pill-accent-shadow),
    0 6px 20px rgba(12, 91, 60, 0.15) !important;
  text-shadow: none;
}
[data-theme="white"] .taxonomy-tab.active .tax-count,
[data-theme="light"] .taxonomy-tab.active .tax-count {
  background: var(--pill-accent-bg) !important;
  color: #062017 !important;
}


/* ════════════════════════════════════════════════════════════════════
 * Day 79.5 v3 — Radiating-border glow KPI cards (Apple/Figma style)
 *
 * Daniel-ova druga referenca: Apple / Figma / Framer kartice s gradient
 * border-om koji "svijetli" (orange / blue / magenta). Mi pretvaramo
 * KPI tile-ove u kartice s istim efektom — svaka pozicija dobija
 * distinct boju, glow zrači prema van na hover.
 * ════════════════════════════════════════════════════════════════════ */

.dash-kpi {
  --kpi-glow: rgba(132, 216, 184, 0.40);
  --kpi-edge: rgba(132, 216, 184, 0.55);
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 20px;
  text-decoration: none;
  color: var(--aco-text, #e7eef0);
  transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  isolation: isolate;
  overflow: visible;
}

.dash-kpi::before {
  /* Inner subtle gradient sheen — gives the card depth even at rest */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.dash-kpi::after {
  /* The "radiating glow" — sits OUTSIDE the card, fades up on hover.
   * z-index: -1 puts it behind the parent so it doesn't clip — but we
   * also need overflow: visible on the card. */
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 50%,
    var(--kpi-glow) 0%,
    transparent 70%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  pointer-events: none;
}

.dash-kpi > * { position: relative; z-index: 1; }

.dash-kpi:hover {
  transform: translateY(-4px);
  border-color: var(--kpi-edge);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    0 0 0 1px var(--kpi-edge) inset,
    0 16px 48px rgba(0, 0, 0, 0.30);
}

.dash-kpi:hover::after { opacity: 0.55; }

/* Per-position color rotation (5-cycle for 5 KPI tiles) */
.dash-kpi:nth-child(5n+1) {
  --kpi-glow: rgba(132, 216, 184, 0.45);    /* emerald */
  --kpi-edge: rgba(132, 216, 184, 0.60);
}
.dash-kpi:nth-child(5n+2) {
  --kpi-glow: rgba(143, 184, 232, 0.45);    /* blue */
  --kpi-edge: rgba(143, 184, 232, 0.60);
}
.dash-kpi:nth-child(5n+3) {
  --kpi-glow: rgba(240, 203, 120, 0.45);    /* copper */
  --kpi-edge: rgba(240, 203, 120, 0.60);
}
.dash-kpi:nth-child(5n+4) {
  --kpi-glow: rgba(216, 170, 232, 0.45);    /* mauve */
  --kpi-edge: rgba(216, 170, 232, 0.60);
}
.dash-kpi:nth-child(5n+5) {
  --kpi-glow: rgba(184, 230, 220, 0.45);    /* mint */
  --kpi-edge: rgba(184, 230, 220, 0.60);
}

/* Light theme: glow softer + edge darker for visibility on cream */
[data-theme="white"] .dash-kpi,
[data-theme="light"] .dash-kpi {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(12, 91, 60, 0.10);
  box-shadow: 0 2px 8px rgba(12, 91, 60, 0.06);
}
[data-theme="white"] .dash-kpi:hover,
[data-theme="light"] .dash-kpi:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--kpi-edge);
  box-shadow:
    0 0 0 1px var(--kpi-edge) inset,
    0 16px 48px rgba(12, 91, 60, 0.18);
}
[data-theme="white"] .dash-kpi::after,
[data-theme="light"] .dash-kpi::after {
  /* Light theme: weaker glow so it doesn't washout cream cards */
  filter: blur(20px);
}
[data-theme="white"] .dash-kpi:hover::after,
[data-theme="light"] .dash-kpi:hover::after {
  opacity: 0.40;
}

/* Light theme per-position glow tints — darker for visibility on cream */
[data-theme="white"] .dash-kpi:nth-child(5n+1),
[data-theme="light"] .dash-kpi:nth-child(5n+1) {
  --kpi-glow: rgba(15, 82, 54, 0.30);
  --kpi-edge: rgba(15, 82, 54, 0.45);
}
[data-theme="white"] .dash-kpi:nth-child(5n+2),
[data-theme="light"] .dash-kpi:nth-child(5n+2) {
  --kpi-glow: rgba(31, 79, 138, 0.28);
  --kpi-edge: rgba(31, 79, 138, 0.42);
}
[data-theme="white"] .dash-kpi:nth-child(5n+3),
[data-theme="light"] .dash-kpi:nth-child(5n+3) {
  --kpi-glow: rgba(189, 120, 0, 0.26);
  --kpi-edge: rgba(189, 120, 0, 0.42);
}
[data-theme="white"] .dash-kpi:nth-child(5n+4),
[data-theme="light"] .dash-kpi:nth-child(5n+4) {
  --kpi-glow: rgba(107, 61, 128, 0.26);
  --kpi-edge: rgba(107, 61, 128, 0.42);
}
[data-theme="white"] .dash-kpi:nth-child(5n+5),
[data-theme="light"] .dash-kpi:nth-child(5n+5) {
  --kpi-glow: rgba(26, 107, 88, 0.28);
  --kpi-edge: rgba(26, 107, 88, 0.45);
}


/* ════════════════════════════════════════════════════════════════════
 * Day 79.5 v4 — Sidebar icon orbs + per-section accent
 *
 * Each section (Knjigovodstvo / Financije / Kapital / Mreža / Sustav)
 * gets its own accent color. Icons inside that section pick up the
 * accent on hover + active state. Subtle gradient orb on each icon.
 * ════════════════════════════════════════════════════════════════════ */

/* Polish 2026-05-21 — Phase 2 sidebar refactor.
 * Each section is now rendered as a single plain link (portal-section-tab)
 * pointing at /centrala/<section>. The legacy expandable .portal-section-group
 * + .portal-section-toggle CSS below this rule stays for backwards-compat
 * (no DOM matches it anymore, browsers skip orphan rules cheaply), but the
 * new visual contract is THIS rule: tab-style chip with active highlight. */
.portal-section-tab {
  /* Stage 3.8f polish (2026-05-23) — section tab sad ima ikonu +
     label u redu (icon-left + text-right pattern), identično
     `.portal-nav a` top-item layout-u. Daniel: "Rad na aktivnom
     racunu and mreza i sustav do not follow the same design pattern".
     justify-content: flex-start umjesto space-between → label sjedi
     uz ikonu, ne razbacuje se u oba kraja. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: var(--ar-md, 10px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--aco-text, #f1f3f6);
  text-decoration: none;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
              color 0.16s ease;
}
.portal-section-tab .portal-section-tab-label {
  flex: 1; min-width: 0;
}
.portal-section-tab .nav-ico {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.portal-section-tab:focus-visible {
  outline: 2px solid var(--aco-green, #84d8b8);
  outline-offset: 2px;
}
.portal-section-tab:hover {
  background: rgba(132, 216, 184, 0.08);
  border-color: rgba(132, 216, 184, 0.22);
  color: var(--aco-green-light, #b6efd4);
}
.portal-section-tab.active {
  background: rgba(132, 216, 184, 0.14);
  border-color: rgba(132, 216, 184, 0.40);
  color: var(--aco-green, #84d8b8);
  box-shadow: inset 2px 0 0 var(--aco-green, #84d8b8);
}
.portal-section-tab[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Stage 3.6 polish (2026-05-23) — legacy light-theme contract bio je
 * "tamno-zeleni tekst na bijeloj sidebar pozadini". Stage 3.5 promijenio
 * je sidebar u DEEP-GREEN, pa tamno-zeleni tekst sad postaje nečitljiv
 * (dark-on-dark). Novi ugovor: bijeli/svijetlozeleni tekst na green
 * sidebaru, identično kao dark theme. Ovaj blok GA NAMJERNO PUŠTAMO
 * PRAZAN jer su pune deklaracije već iznad (line 816-833) — držimo
 * komentar kao maker tako da nova osoba zna zašto je tu i ne vraća
 * tamno-zeleni override koji slomi vidljivost. */
/* (svjesno prazno — vidi Stage 3.5/3.6 blokove iznad za light/white
 *  section-tab izgled na deep-green sidebaru) */

.portal-section-group {
  --nav-accent: rgba(132, 216, 184, 0.85);
  --nav-accent-glow: rgba(132, 216, 184, 0.30);
  --nav-accent-bg: rgba(132, 216, 184, 0.08);
}
.portal-section-group[data-section-group="knjigovodstvo"] {
  --nav-accent: rgba(132, 216, 184, 0.90);   /* emerald */
  --nav-accent-glow: rgba(132, 216, 184, 0.32);
  --nav-accent-bg: rgba(132, 216, 184, 0.10);
}
.portal-section-group[data-section-group="financije"] {
  --nav-accent: rgba(143, 184, 232, 0.90);   /* blue */
  --nav-accent-glow: rgba(143, 184, 232, 0.32);
  --nav-accent-bg: rgba(143, 184, 232, 0.10);
}
.portal-section-group[data-section-group="kapital"] {
  --nav-accent: rgba(216, 170, 232, 0.90);   /* mauve */
  --nav-accent-glow: rgba(216, 170, 232, 0.32);
  --nav-accent-bg: rgba(216, 170, 232, 0.10);
}
.portal-section-group[data-section-group="mreza"] {
  --nav-accent: rgba(240, 203, 120, 0.90);   /* copper */
  --nav-accent-glow: rgba(240, 203, 120, 0.32);
  --nav-accent-bg: rgba(240, 203, 120, 0.10);
}
.portal-section-group[data-section-group="sustav"] {
  --nav-accent: rgba(184, 230, 220, 0.90);   /* mint */
  --nav-accent-glow: rgba(184, 230, 220, 0.32);
  --nav-accent-bg: rgba(184, 230, 220, 0.10);
}

.portal-section-group .portal-section-toggle {
  color: var(--nav-accent);
  transition: text-shadow 0.2s;
}
.portal-section-group[data-expanded="true"] .portal-section-toggle {
  text-shadow: 0 0 12px var(--nav-accent-glow);
}

/* Section heading uppercase tracking — looks more architectural */
.portal-section-toggle span:first-child {
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
}

/* Nav links inside a section pick up the section accent on hover */
.portal-section-group .portal-section-items a {
  position: relative;
  transition: all 0.18s ease;
}
.portal-section-group .portal-section-items a:hover {
  background: var(--nav-accent-bg);
  color: var(--nav-accent);
}
.portal-section-group .portal-section-items a:hover .nav-ico {
  filter: drop-shadow(0 0 6px var(--nav-accent-glow));
  color: var(--nav-accent);
}
.portal-section-group .portal-section-items a.active {
  background: linear-gradient(135deg,
    var(--nav-accent-bg) 0%,
    rgba(0, 0, 0, 0.10) 100%);
  color: var(--nav-accent);
  box-shadow:
    inset 3px 0 0 var(--nav-accent),
    0 0 16px var(--nav-accent-glow);
}
.portal-section-group .portal-section-items a.active .nav-ico {
  color: var(--nav-accent);
  filter: drop-shadow(0 0 8px var(--nav-accent-glow));
}

/* Light theme: darken accent for contrast */
[data-theme="white"] .portal-section-group[data-section-group="knjigovodstvo"],
[data-theme="light"] .portal-section-group[data-section-group="knjigovodstvo"] {
  --nav-accent: #0c5b3c;
  --nav-accent-glow: rgba(12, 91, 60, 0.28);
  --nav-accent-bg: rgba(12, 91, 60, 0.08);
}
[data-theme="white"] .portal-section-group[data-section-group="financije"],
[data-theme="light"] .portal-section-group[data-section-group="financije"] {
  --nav-accent: #1f4f8a;
  --nav-accent-glow: rgba(31, 79, 138, 0.28);
  --nav-accent-bg: rgba(31, 79, 138, 0.08);
}
[data-theme="white"] .portal-section-group[data-section-group="kapital"],
[data-theme="light"] .portal-section-group[data-section-group="kapital"] {
  --nav-accent: #6b3d80;
  --nav-accent-glow: rgba(107, 61, 128, 0.28);
  --nav-accent-bg: rgba(107, 61, 128, 0.08);
}
[data-theme="white"] .portal-section-group[data-section-group="mreza"],
[data-theme="light"] .portal-section-group[data-section-group="mreza"] {
  --nav-accent: #6b4f1f;
  --nav-accent-glow: rgba(107, 79, 31, 0.28);
  --nav-accent-bg: rgba(107, 79, 31, 0.08);
}
[data-theme="white"] .portal-section-group[data-section-group="sustav"],
[data-theme="light"] .portal-section-group[data-section-group="sustav"] {
  --nav-accent: #1a6b58;
  --nav-accent-glow: rgba(26, 107, 88, 0.28);
  --nav-accent-bg: rgba(26, 107, 88, 0.08);
}


/* ════════════════════════════════════════════════════════════════════
 * Day 79.5 v4 — Klijent portal cards (.kpi-tile glow)
 *
 * Klijent dashboard koristi .kpi-tile class umjesto .dash-kpi. Mirror
 * radiating glow + per-position accent for matching premium feel.
 * ════════════════════════════════════════════════════════════════════ */

.kpi-tile {
  --tile-glow: rgba(132, 216, 184, 0.40);
  --tile-edge: rgba(132, 216, 184, 0.55);
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 18px;
  text-decoration: none;
  color: var(--aco-text, #e7eef0);
  transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  isolation: isolate;
  overflow: visible;
}
.kpi-tile::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 50%,
    var(--tile-glow) 0%,
    transparent 70%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  pointer-events: none;
}
.kpi-tile:hover {
  transform: translateY(-3px);
  border-color: var(--tile-edge);
  box-shadow:
    0 0 0 1px var(--tile-edge) inset,
    0 12px 36px rgba(0, 0, 0, 0.25);
}
.kpi-tile:hover::after { opacity: 0.50; }
.kpi-tile:nth-child(3n+1) {
  --tile-glow: rgba(132, 216, 184, 0.45);
  --tile-edge: rgba(132, 216, 184, 0.55);
}
.kpi-tile:nth-child(3n+2) {
  --tile-glow: rgba(143, 184, 232, 0.45);
  --tile-edge: rgba(143, 184, 232, 0.55);
}
.kpi-tile:nth-child(3n+3) {
  --tile-glow: rgba(240, 203, 120, 0.45);
  --tile-edge: rgba(240, 203, 120, 0.55);
}
[data-theme="white"] .kpi-tile,
[data-theme="light"] .kpi-tile {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(12, 91, 60, 0.10);
  box-shadow: 0 2px 8px rgba(12, 91, 60, 0.06);
}
[data-theme="white"] .kpi-tile:hover,
[data-theme="light"] .kpi-tile:hover {
  background: #ffffff;
  border-color: var(--tile-edge);
  box-shadow:
    0 0 0 1px var(--tile-edge) inset,
    0 12px 36px rgba(12, 91, 60, 0.16);
}
[data-theme="white"] .kpi-tile:nth-child(3n+1),
[data-theme="light"] .kpi-tile:nth-child(3n+1) {
  --tile-glow: rgba(15, 82, 54, 0.30);
  --tile-edge: rgba(15, 82, 54, 0.45);
}
[data-theme="white"] .kpi-tile:nth-child(3n+2),
[data-theme="light"] .kpi-tile:nth-child(3n+2) {
  --tile-glow: rgba(31, 79, 138, 0.28);
  --tile-edge: rgba(31, 79, 138, 0.42);
}
[data-theme="white"] .kpi-tile:nth-child(3n+3),
[data-theme="light"] .kpi-tile:nth-child(3n+3) {
  --tile-glow: rgba(189, 120, 0, 0.26);
  --tile-edge: rgba(189, 120, 0, 0.42);
}


/* ════════════════════════════════════════════════════════════════════
 * Day 79.5 v4 — Cjenik (8 SKU) pricing cards
 *
 * /centrala/cjenik prikazuje 8 SKU-ova u 2 tablice. Wrappamo svaki
 * "tier_kind" section header u premium gradient pill da diše s ostatkom.
 * Plus svaki SKU dobiva subtle hover lift na row.
 * ════════════════════════════════════════════════════════════════════ */

.cjenik-section-header {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  margin: 0 0 var(--as-3);
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  border: 1px solid;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.12),
    rgba(0, 0, 0, 0.10));
  border-color: rgba(132, 216, 184, 0.30);
  color: #84d8b8;
  box-shadow:
    0 0 0 1px rgba(132, 216, 184, 0.08) inset,
    0 4px 16px rgba(132, 216, 184, 0.10);
}
.cjenik-section-header.partner-tier {
  background: linear-gradient(135deg,
    rgba(216, 170, 232, 0.12),
    rgba(0, 0, 0, 0.10));
  border-color: rgba(216, 170, 232, 0.30);
  color: #d8aae8;
  box-shadow:
    0 0 0 1px rgba(216, 170, 232, 0.08) inset,
    0 4px 16px rgba(216, 170, 232, 0.10);
}
[data-theme="white"] .cjenik-section-header,
[data-theme="light"] .cjenik-section-header {
  background: linear-gradient(135deg, #ecf7f0, rgba(255, 255, 255, 0.85));
  border-color: rgba(12, 91, 60, 0.30);
  color: #0c5b3c;
}
[data-theme="white"] .cjenik-section-header.partner-tier,
[data-theme="light"] .cjenik-section-header.partner-tier {
  background: linear-gradient(135deg, #f3eaf7, rgba(255, 255, 255, 0.85));
  border-color: rgba(107, 61, 128, 0.30);
  color: #6b3d80;
}





/* Day 75B — role-specific accent on the banner left edge so each
 * persona gets a subtle visual fingerprint without screaming. */
.scope-banner-role-operator {
  border-left-color: rgba(132, 216, 184, 0.55);   /* Altoria emerald */
}
.scope-banner-role-partner_principal {
  border-left-color: rgba(74, 144, 226, 0.55);    /* steel blue */
}
.scope-banner-role-partner_worker {
  border-left-color: rgba(201, 162, 74, 0.55);    /* warm copper */
}
.scope-banner-role-client_user {
  border-left-color: rgba(190, 140, 200, 0.55);   /* soft mauve */
}


/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 — Tranche B (Day 83)
 *
 * Six visual upgrades pushed in one coordinated block:
 *   #1 Scope dropdown — iOS list-box hover + active feel
 *   #2 Sidebar section labels — diagonal-gradient active state + glow
 *   #3 Aktivni račun strip + Vlastite knjige button
 *   #9 Status pills bright redesign (Aktivno / Test način / Pilot mode)
 *   #4 Ambient backgrounds — extra glow for non-Svijetla themes
 *   #13 Svijetla theme — subtle tab light-up effect
 * ════════════════════════════════════════════════════════════════════ */

/* ── #1 Scope dropdown — premium list-box feel ──────────────────────── */
.scope-option:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 6px 20px rgba(132, 216, 184, 0.16),
    0 0 0 1px rgba(132, 216, 184, 0.30) inset;
}
.scope-option.active::after {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #84d8b8;
  font-weight: 700;
  z-index: 2;
  text-shadow: 0 0 8px rgba(132, 216, 184, 0.50);
}
[data-theme="white"] .scope-option.active::after,
[data-theme="light"] .scope-option.active::after {
  color: #0f5236;
  text-shadow: 0 0 6px rgba(15, 82, 54, 0.35);
}

/* ── #2 Sidebar section labels — diagonal accent + outline glow ────── */
.portal-section-group[data-expanded="true"] .portal-section-toggle {
  background: linear-gradient(105deg,
    var(--nav-accent-bg) 0%,
    transparent 60%);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 2px 4px;
  position: relative;
  overflow: hidden;
}
.portal-section-group[data-expanded="true"] .portal-section-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid var(--nav-accent);
  opacity: 0.40;
  pointer-events: none;
  box-shadow:
    0 0 12px var(--nav-accent-glow),
    inset 0 0 12px rgba(255, 255, 255, 0.04);
}
.portal-section-group[data-expanded="true"] .portal-section-toggle span:first-child {
  text-shadow: 0 0 14px var(--nav-accent-glow);
  letter-spacing: 0.10em;
}

/* Light-theme outline tweak — keep it subtle on cream */
[data-theme="white"] .portal-section-group[data-expanded="true"] .portal-section-toggle::before,
[data-theme="light"] .portal-section-group[data-expanded="true"] .portal-section-toggle::before {
  opacity: 0.55;
  box-shadow: 0 0 10px var(--nav-accent-glow);
}

/* ── #3 Aktivni račun strip + Vlastite knjige button ────────────────── */
.aktivni-racun-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--as-3);
  padding: 12px 16px;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.07) 0%,
    rgba(132, 216, 184, 0.02) 60%,
    rgba(132, 216, 184, 0.05) 100%);
  border: 1px solid rgba(132, 216, 184, 0.18);
  border-radius: 12px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: var(--as-3);
}
.aktivni-racun-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--aco-text);
}
.aktivni-racun-label-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(132, 216, 184, 0.35));
}
.btn-vlastite-knjige {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.12) 0%,
    rgba(81, 193, 148, 0.06) 100%);
  border: 1px solid rgba(132, 216, 184, 0.40);
  border-radius: 999px;
  color: #84d8b8;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all 0.18s ease;
  box-shadow:
    0 0 0 0 rgba(132, 216, 184, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.btn-vlastite-knjige:hover {
  border-color: rgba(132, 216, 184, 0.70);
  box-shadow:
    0 0 16px rgba(132, 216, 184, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  color: #b6e8d2;
}

[data-theme="white"] .aktivni-racun-strip,
[data-theme="light"] .aktivni-racun-strip {
  background: linear-gradient(135deg,
    rgba(15, 82, 54, 0.05) 0%,
    rgba(255, 255, 255, 0.60) 60%,
    rgba(15, 82, 54, 0.04) 100%);
  border-color: rgba(15, 82, 54, 0.18);
  box-shadow:
    0 2px 12px rgba(15, 82, 54, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
[data-theme="white"] .aktivni-racun-label,
[data-theme="light"] .aktivni-racun-label { color: #1a2434; }
[data-theme="white"] .btn-vlastite-knjige,
[data-theme="light"] .btn-vlastite-knjige {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  border-color: #6cb393;
  color: #0f5236;
}
[data-theme="white"] .btn-vlastite-knjige:hover,
[data-theme="light"] .btn-vlastite-knjige:hover {
  box-shadow: 0 4px 16px rgba(15, 82, 54, 0.20);
}

/* ── #9 Status pills — bright redesign (rounded glow chips) ─────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  position: relative;
  transition: all 0.18s ease;
  font-family: var(--af-mono, ui-monospace, monospace);
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex: 0 0 6px;
}

.status-pill-ok {
  color: #84d8b8;
  background: rgba(132, 216, 184, 0.12);
  border-color: rgba(132, 216, 184, 0.45);
  box-shadow: 0 0 12px rgba(132, 216, 184, 0.22);
}
.status-pill-warn {
  color: #f0cb78;
  background: rgba(240, 203, 120, 0.12);
  border-color: rgba(240, 203, 120, 0.45);
  box-shadow: 0 0 12px rgba(240, 203, 120, 0.22);
}
.status-pill-err {
  color: #ec8c8c;
  background: rgba(236, 140, 140, 0.12);
  border-color: rgba(236, 140, 140, 0.45);
  box-shadow: 0 0 12px rgba(236, 140, 140, 0.22);
}
.status-pill-info {
  color: #8fb8e8;
  background: rgba(143, 184, 232, 0.12);
  border-color: rgba(143, 184, 232, 0.45);
  box-shadow: 0 0 12px rgba(143, 184, 232, 0.22);
}
.status-pill-progress {
  color: #b6dff0;
  background: rgba(182, 223, 240, 0.12);
  border-color: rgba(182, 223, 240, 0.45);
  box-shadow: 0 0 12px rgba(182, 223, 240, 0.22);
}
.status-pill-todo {
  color: #b8aae8;
  background: rgba(184, 170, 232, 0.12);
  border-color: rgba(184, 170, 232, 0.45);
  box-shadow: 0 0 12px rgba(184, 170, 232, 0.22);
}
.status-pill-review {
  color: #f0cb78;
  background: rgba(240, 203, 120, 0.12);
  border-color: rgba(240, 203, 120, 0.45);
  box-shadow: 0 0 12px rgba(240, 203, 120, 0.22);
}

[data-theme="white"] .status-pill-ok,
[data-theme="light"] .status-pill-ok {
  color: #0f5236;
  background: #d6efe1;
  border-color: #6cb393;
  box-shadow: 0 2px 8px rgba(15, 82, 54, 0.12);
}
[data-theme="white"] .status-pill-warn,
[data-theme="light"] .status-pill-warn {
  color: #7a4a00;
  background: #fef3d7;
  border-color: #d8a847;
  box-shadow: 0 2px 8px rgba(122, 74, 0, 0.12);
}
[data-theme="white"] .status-pill-err,
[data-theme="light"] .status-pill-err {
  color: #8a2e2e;
  background: #fadcdc;
  border-color: #d88080;
  box-shadow: 0 2px 8px rgba(138, 46, 46, 0.12);
}
[data-theme="white"] .status-pill-info,
[data-theme="light"] .status-pill-info {
  color: #1f4f8a;
  background: #dbe8f8;
  border-color: #6f9bce;
  box-shadow: 0 2px 8px rgba(31, 79, 138, 0.12);
}

/* Backwards-compat: existing .pill / .pill-ok / .pill-warn / .pill-err
   classes retain their look but pick up the new glow if used near a
   .dash-kpi or any element marked .status-pill-context. Non-breaking. */

/* ── #4 Ambient background enhancement — non-Svijetla themes ────────── */
body[data-theme="dark"] .portal-shell::before,
body[data-theme="ambient"] .portal-shell::before,
body[data-theme="midnight"] .portal-shell::before,
body:not([data-theme="white"]):not([data-theme="light"]) .portal-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 12% 18%,
      rgba(132, 216, 184, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 88% 82%,
      rgba(143, 184, 232, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 95%,
      rgba(216, 170, 232, 0.05) 0%, transparent 70%);
  opacity: 0.85;
  animation: ambient-drift 28s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.85; }
  50%  { transform: translate(2%, -1%) scale(1.02); opacity: 1.00; }
  100% { transform: translate(-1%, 1%) scale(1); opacity: 0.85; }
}
/* Hard-disable on Svijetla per Daniel's request */
body[data-theme="white"] .portal-shell::before,
body[data-theme="light"] .portal-shell::before {
  display: none !important;
}

/* ── #13 Svijetla theme — subtle tab light-up effect ───────────────── */
[data-theme="white"] .nav-tab,
[data-theme="light"] .nav-tab,
[data-theme="white"] .chip,
[data-theme="light"] .chip,
[data-theme="white"] .taxonomy-tab,
[data-theme="light"] .taxonomy-tab {
  position: relative;
  transition: all 0.22s ease;
}
[data-theme="white"] .nav-tab:hover,
[data-theme="light"] .nav-tab:hover,
[data-theme="white"] .chip:hover,
[data-theme="light"] .chip:hover,
[data-theme="white"] .taxonomy-tab:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f0f7f3 100%);
  box-shadow:
    0 4px 16px rgba(15, 82, 54, 0.10),
    0 0 0 1px rgba(15, 82, 54, 0.18) inset,
    0 0 24px rgba(132, 216, 184, 0.20);
  transform: translateY(-1px);
}
[data-theme="white"] .nav-tab.active,
[data-theme="light"] .nav-tab.active,
[data-theme="white"] .chip.chip-active,
[data-theme="light"] .chip.chip-active,
[data-theme="white"] .taxonomy-tab.active,
[data-theme="light"] .taxonomy-tab.active {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  border-color: #6cb393;
  color: #0f5236;
  box-shadow:
    0 2px 12px rgba(15, 82, 54, 0.18),
    0 0 0 1px rgba(15, 82, 54, 0.22) inset,
    0 0 28px rgba(132, 216, 184, 0.30);
}

/* Subtle "page glow" for Svijetla — adds depth without overwhelming.
   Dimmer than the dark-theme ambient because cream backgrounds get
   muddy fast. */
body[data-theme="white"] .portal-shell::after,
body[data-theme="light"] .portal-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 35% at 15% 15%,
      rgba(132, 216, 184, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 45% 30% at 85% 85%,
      rgba(15, 82, 54, 0.04) 0%, transparent 60%);
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 — Tranche D
 *
 *   #15 Liquid-glass surface for Pregled dashboard
 *   #17 Premium login redesign (Croatian-landscape backdrop)
 * ════════════════════════════════════════════════════════════════════ */

/* ── #15 Liquid Glass — Pregled dashboard ──────────────────────────── */
.pregled-glass-shell {
  position: relative;
  border-radius: 22px;
  padding: var(--as-4);
  margin-bottom: var(--as-4);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(132, 216, 184, 0.06) 50%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
  overflow: hidden;
}
.pregled-glass-shell::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(132, 216, 184, 0.18) 30%,
    rgba(216, 170, 232, 0.10) 50%,
    rgba(143, 184, 232, 0.16) 70%,
    transparent 100%);
  z-index: -1;
  opacity: 0.50;
  filter: blur(14px);
  animation: pregled-aurora 18s ease-in-out infinite alternate;
}
@keyframes pregled-aurora {
  0%   { transform: translate(-2%, 0) scale(1.02); opacity: 0.45; }
  50%  { transform: translate(2%, -1%) scale(1.04); opacity: 0.65; }
  100% { transform: translate(-1%, 1%) scale(1.02); opacity: 0.45; }
}
[data-theme="white"] .pregled-glass-shell,
[data-theme="light"] .pregled-glass-shell {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(214, 239, 225, 0.45) 60%,
    rgba(255, 255, 255, 0.70) 100%);
  border-color: rgba(15, 82, 54, 0.10);
  box-shadow:
    0 16px 48px rgba(15, 82, 54, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

/* ── #17 Login — premium liquid-glass card over Croatian landscape ──── */
.login-shell.login-shell {
  /* Fullscreen takeover — escapes <main class="content"> padding so the
     photo bleeds edge-to-edge regardless of DOM nesting. Has to be
     position:fixed because the legacy footer + ambient orbs sit at the
     same DOM level and we want to cover them. */
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--as-5) var(--as-3);
  /* Default backdrop: CSS-painted Croatian landscape gradient
     (Hrvatsko Zagorje rolling hills feel). Override with:
       --login-bg-image: url('/static/login-bg.jpg');
     to drop in your photo. */
  background:
    var(--login-bg-image,
      linear-gradient(165deg,
        #1d3a3f 0%,           /* sky pre-dawn teal */
        #284c4d 18%,          /* haze */
        #4a7359 42%,          /* mid-distance hills */
        #5d8a5f 62%,          /* foreground field */
        #2d4a36 88%,
        #14241a 100%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
/* Atmospheric overlays — give CSS-painted bg some depth.
   When --login-bg-image is set to a real photo, these add a subtle
   bloom that keeps the glass card readable. */
.login-shell.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%,
      rgba(255, 220, 160, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 80%,
      rgba(40, 120, 90, 0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.login-shell.login-shell::after {
  /* Soft vignette so the card pops regardless of photo */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%,
    transparent 40%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  z-index: 0;
}

.login-stage .login-glass {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 36px 36px 28px;
  border-radius: 24px;
  background: linear-gradient(140deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.45),
    0 8px 32px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  color: #f4f7f5;
  font-family: inherit;
}
.login-stage .login-glass::before {
  /* Subtle inner bevel for the liquid feel */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.05) 100%);
  pointer-events: none;
}

.login-title {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
}
.login-subtitle {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
  font-weight: 400;
}

.login-field {
  position: relative;
  margin-bottom: 14px;
}
.login-field input {
  width: 100%;
  padding: 14px 44px 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.18s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.login-field input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.login-field input:focus {
  border-color: rgba(132, 216, 184, 0.70);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 4px rgba(132, 216, 184, 0.15);
}
.login-field-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  pointer-events: none;
}

.login-submit {
  width: 100%;
  padding: 15px 20px;
  margin-top: 8px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg,
    #84d8b8 0%,
    #51c194 60%,
    #2fa776 100%);
  color: #07221a;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow:
    0 8px 24px rgba(47, 167, 118, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.login-submit:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px rgba(47, 167, 118, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.login-submit:active { transform: translateY(0); }

.login-error {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: rgba(236, 140, 140, 0.18);
  border: 1px solid rgba(236, 140, 140, 0.50);
  border-radius: 12px;
  color: #ffe5e5;
  font-size: 13px;
  text-align: center;
}

.login-help {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin: 18px 0 0;
}
.login-brand {
  text-align: center;
  margin-bottom: 22px;
}
.login-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(132, 216, 184, 0.30) 100%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}


/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 #20 — Login glass-morphism elevation
 *
 * Override the base .login-glass with a stunning liquid-glass effect:
 *   • Heavier blur + saturation + brightness on the backdrop
 *   • Specular highlight that drifts across the surface
 *   • Animated rainbow border halo (subtle, slow, never distracting)
 *   • Input fields get their own glass treatment with focus ring
 *   • Submit button has a gradient-shift hover
 * ════════════════════════════════════════════════════════════════════ */

.login-glass {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.04) 70%,
    rgba(255, 255, 255, 0.10) 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(36px) saturate(180%) brightness(112%);
  -webkit-backdrop-filter: blur(36px) saturate(180%) brightness(112%);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    0 12px 40px rgba(0, 0, 0, 0.30),
    0 4px 12px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(255, 255, 255, 0.10);
}

/* Specular highlight — a slow-drifting glossy band at the top edge */
.login-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.04) 18%,
      transparent 35%,
      transparent 70%,
      rgba(255, 255, 255, 0.04) 90%,
      rgba(0, 0, 0, 0.05) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Login edge-trace experiments removed per Daniel's request. The
   login card stays as a clean liquid-glass surface without any
   animated perimeter effect. The original conic halo also stays off. */
.login-glass::after { display: none !important; }


/* ── Partner principal hero — glass-gradient building mark ────────── */
.dash-hero-glass-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-left: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(132, 216, 184, 0.18) 50%,
    rgba(81, 193, 148, 0.10) 100%);
  border: 1px solid rgba(132, 216, 184, 0.30);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 8px 24px rgba(47, 167, 118, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 18px rgba(132, 216, 184, 0.20);
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
.dash-hero-glass-mark svg {
  width: 32px; height: 32px;
  filter: drop-shadow(0 0 6px rgba(132, 216, 184, 0.55));
}
[data-theme="white"] .dash-hero-glass-mark,
[data-theme="light"] .dash-hero-glass-mark {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  border-color: #6cb393;
  box-shadow:
    0 6px 18px rgba(15, 82, 54, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}


/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 — Tranche N (Svijetla theme broad-sweep contrast)
 *
 * Every place that renders content in pale mint/emerald-light on a
 * cream background gets a solid dark-emerald override here. Gradient
 * text doesn't read at small sizes — flatten to solid #0c5b3c / #0f5236
 * across the board.
 * ════════════════════════════════════════════════════════════════════ */

/* Reports/CoA giant letters (TB / RDG / BS / CF / KONTO numbers etc).
   These typically use .grad or .text-emerald — flatten to solid dark. */
[data-theme="white"] .report-tile .grad,
[data-theme="light"] .report-tile .grad,
[data-theme="white"] .coa-list code,
[data-theme="light"] .coa-list code,
[data-theme="white"] .data-table code,
[data-theme="light"] .data-table code,
[data-theme="white"] code.mono,
[data-theme="light"] code.mono,
[data-theme="white"] .mono.muted,
[data-theme="light"] .mono.muted {
  color: #0c5b3c !important;
  background: transparent !important;
  -webkit-text-fill-color: #0c5b3c !important;
}

/* The big TB/RDG/BS/CF letterforms — they're inside .report-tile or
   .card .grad (look like 60–80px display type). Force solid emerald
   instead of the gradient (which renders mint on cream). */
[data-theme="white"] .card .grad,
[data-theme="light"] .card .grad,
[data-theme="white"] h1 .grad,
[data-theme="light"] h1 .grad,
[data-theme="white"] h2 .grad,
[data-theme="light"] h2 .grad,
[data-theme="white"] .display .grad,
[data-theme="light"] .display .grad {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #0c5b3c !important;
  color: #0c5b3c !important;
}

/* CoA / ledger account numbers — usually wrapped in .mono or rendered
   as 9px/10px monospace digits. Make them solid forest-green. */
[data-theme="white"] td.code,
[data-theme="light"] td.code,
[data-theme="white"] .mono,
[data-theme="light"] .mono,
[data-theme="white"] .account-code,
[data-theme="light"] .account-code {
  color: #0c5b3c !important;
}

/* General "muted-on-cream" repair — many places use --aco-text-muted
   which is too pale. The tokens layer maps to a darker value but legacy
   inline styles still hit hard. */
[data-theme="white"] table th,
[data-theme="light"] table th {
  color: #1a3326 !important;
}

/* Topbar pills — make sure they're truly readable on cream */
[data-theme="white"] .topbar .pill,
[data-theme="light"] .topbar .pill {
  background: rgba(15, 82, 54, 0.08) !important;
  color: #0f5236 !important;
  border: 1px solid rgba(15, 82, 54, 0.20) !important;
}
[data-theme="white"] .topbar .pill.ok,
[data-theme="light"] .topbar .pill.ok {
  background: linear-gradient(135deg, #d6efe1, #b8e3cd) !important;
  color: #0f5236 !important;
  border-color: #6cb393 !important;
  font-weight: 700 !important;
}
[data-theme="white"] .topbar .lang-pill,
[data-theme="light"] .topbar .lang-pill {
  color: #0f5236 !important;
  background: rgba(15, 82, 54, 0.06);
}
[data-theme="white"] .topbar .lang-pill.active,
[data-theme="light"] .topbar .lang-pill.active {
  background: linear-gradient(135deg, #51c194 0%, #2fa776 100%) !important;
  color: #ffffff !important;
}

/* Topbar nav (centrala layout has its own scope-pill / scope-switcher) */
[data-theme="white"] .scope-pill,
[data-theme="light"] .scope-pill,
[data-theme="white"] .portal-search input,
[data-theme="light"] .portal-search input {
  color: #1a3326 !important;
  background: rgba(15, 82, 54, 0.04);
  border: 1px solid rgba(15, 82, 54, 0.15) !important;
}
[data-theme="white"] .portal-search input::placeholder,
[data-theme="light"] .portal-search input::placeholder {
  color: rgba(15, 82, 54, 0.50) !important;
}

/* ── Klijent sidebar — Pregled tab hover should match operator's ──── */
/* Klijent nav doesn't use section-group accent system; give it the
   same emerald hover/active treatment so it feels consistent. */
.portal-nav > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--aco-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin: 1px 4px;
  transition: all 0.18s ease;
}
.portal-nav > a:hover {
  background: rgba(132, 216, 184, 0.10);
  color: #b6e8d2;
}
.portal-nav > a:hover .nav-ico,
.portal-nav > a:hover .klijent-nav-ico {
  filter: drop-shadow(0 0 6px rgba(132, 216, 184, 0.40));
  color: #84d8b8;
}
.portal-nav > a.active {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.18) 0%,
    rgba(0, 0, 0, 0.10) 100%);
  color: #84d8b8;
  box-shadow:
    inset 3px 0 0 rgba(132, 216, 184, 0.85),
    0 0 14px rgba(132, 216, 184, 0.25);
}
.portal-nav > a.active .nav-ico,
.portal-nav > a.active .klijent-nav-ico {
  color: #84d8b8;
  filter: drop-shadow(0 0 8px rgba(132, 216, 184, 0.45));
}

[data-theme="white"] .portal-nav > a,
[data-theme="light"] .portal-nav > a {
  color: #1a3326;
}
[data-theme="white"] .portal-nav > a:hover,
[data-theme="light"] .portal-nav > a:hover {
  background: rgba(15, 82, 54, 0.08);
  color: #0c4a31;
}
[data-theme="white"] .portal-nav > a:hover .nav-ico,
[data-theme="white"] .portal-nav > a:hover .klijent-nav-ico,
[data-theme="light"] .portal-nav > a:hover .nav-ico,
[data-theme="light"] .portal-nav > a:hover .klijent-nav-ico {
  filter: none;
  color: #0c4a31;
}
[data-theme="white"] .portal-nav > a.active,
[data-theme="light"] .portal-nav > a.active {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  color: #0f5236;
  box-shadow: inset 3px 0 0 #0f5236;
}
[data-theme="white"] .portal-nav > a.active .nav-ico,
[data-theme="white"] .portal-nav > a.active .klijent-nav-ico,
[data-theme="light"] .portal-nav > a.active .nav-ico,
[data-theme="light"] .portal-nav > a.active .klijent-nav-ico {
  color: #0f5236;
  filter: none;
}


/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 — Tranche O (mass polish sweep)
 * ════════════════════════════════════════════════════════════════════ */

/* Sidebar — never spill below viewport. Make it a true flex column
   with internal scroll. Bottom block gets pushed to the bottom of the
   viewport via margin-top: auto. */
.portal-sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.portal-sidebar-bottom {
  margin-top: auto;
  padding-top: var(--as-3);
  flex-shrink: 0;
}

/* Capital / disabled section items — icons must NEVER blow up. Force
   the standard 18px even inside the disabled-soon spans. */
.portal-section-items .nav-ico,
.portal-section-items svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}
.portal-section-items > a > span:not(.nav-badge),
.portal-section-items > span > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pin button — extra breathing room between brand and pin */
.side-pin {
  margin-top: 8px !important;
}
body:not(.side-collapsed) .portal-sidebar > .side-pin {
  margin-left: auto;
  margin-right: 8px;
  margin-top: -34px !important;   /* sit on the brand row */
  align-self: flex-end;
}

/* Tranche P — sidebar pin breathing room.
   Klijent (and Centrala) put the pin button on the brand row via the
   negative margin-top above. Without an explicit gap on the nav, the
   first nav row (Pregled / Dashboard) crowds the pin. Add top
   breathing room to .portal-nav so the rail block visually separates
   "brand + pin" from the actual navigation. Only applies in expanded
   mode — collapsed/rail mode hides the pin and keeps its own spacing. */
body:not(.side-collapsed) .portal-sidebar > .portal-nav {
  margin-top: 14px;
}

/* Partner-worker dashboard icon — match the glass-gradient mark
   used by partner-principal. */
.dash-hero-worker-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-left: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(143, 184, 232, 0.18) 50%,
    rgba(81, 149, 193, 0.10) 100%);
  border: 1px solid rgba(143, 184, 232, 0.35);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 8px 24px rgba(31, 79, 138, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 18px rgba(143, 184, 232, 0.20);
  vertical-align: middle;
}
.dash-hero-worker-mark svg {
  width: 32px; height: 32px;
  filter: drop-shadow(0 0 6px rgba(143, 184, 232, 0.55));
}
[data-theme="white"] .dash-hero-worker-mark,
[data-theme="light"] .dash-hero-worker-mark {
  background: linear-gradient(135deg, #d8e8f6 0%, #b8d4ed 100%);
  border-color: #6f9bce;
  box-shadow:
    0 6px 18px rgba(31, 79, 138, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Razgovori / Pretplate / Auto-dodjela / Funkcionalnosti — all use
   chip-style filter tabs. Force readable colors on DARK themes only
   (white theme already has its own override). */
body:not([data-theme="white"]):not([data-theme="light"]) .chip,
body:not([data-theme="white"]):not([data-theme="light"]) .pill-tab,
body:not([data-theme="white"]):not([data-theme="light"]) [role="tab"] {
  color: #e7eef0 !important;
  background: rgba(132, 216, 184, 0.06);
  border: 1px solid rgba(132, 216, 184, 0.25);
}
body:not([data-theme="white"]):not([data-theme="light"]) .chip:hover,
body:not([data-theme="white"]):not([data-theme="light"]) .pill-tab:hover,
body:not([data-theme="white"]):not([data-theme="light"]) [role="tab"]:hover {
  background: rgba(132, 216, 184, 0.14);
  color: #b6e8d2 !important;
  border-color: rgba(132, 216, 184, 0.50);
}

/* Custom HR file-input label — hides the native picker and shows
   localized strings via CSS attr() pulled from data-* attributes. */
.altoria-file-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(132, 216, 184, 0.25);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--aco-text);
  transition: all 0.18s ease;
}
.altoria-file-input:hover {
  background: rgba(132, 216, 184, 0.08);
  border-color: rgba(132, 216, 184, 0.50);
}
.altoria-file-input input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}
.altoria-file-input::before {
  content: attr(data-button-label);
  display: inline-block;
  padding: 4px 10px;
  background: rgba(132, 216, 184, 0.18);
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  color: #84d8b8;
}
.altoria-file-input::after {
  content: attr(data-empty-label);
  color: var(--aco-text-muted);
  font-size: 12px;
}
.altoria-file-input.has-file::after { content: attr(data-filename); color: var(--aco-text); }
[data-theme="white"] .altoria-file-input,
[data-theme="light"] .altoria-file-input {
  background: rgba(15, 82, 54, 0.04);
  border-color: rgba(15, 82, 54, 0.25);
  color: #1a3326;
}
[data-theme="white"] .altoria-file-input::before,
[data-theme="light"] .altoria-file-input::before {
  background: #d6efe1; color: #0f5236;
}



/* Inner content sits ABOVE the specular highlight pseudo-layer. */
.login-glass > * { position: relative; z-index: 2; }

/* Brand mark — refined with stronger glass + ring */
.login-brand-mark {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(132, 216, 184, 0.45) 60%,
    rgba(81, 193, 148, 0.35) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 12px 32px rgba(47, 167, 118, 0.30),
    0 4px 12px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(255, 255, 255, 0.20);
  position: relative;
  overflow: hidden;
}
.login-brand-mark::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%);
  animation: brand-shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brand-shine {
  0%, 100% { transform: translate(-30%, -30%); opacity: 0; }
  50%      { transform: translate(30%, 30%); opacity: 1; }
}

/* Input fields — refined glass with stronger focus state */
.login-field input {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 500;
}
.login-field input:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
}
.login-field input:focus {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(132, 216, 184, 0.85);
  box-shadow:
    0 0 0 4px rgba(132, 216, 184, 0.20),
    0 8px 24px rgba(47, 167, 118, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* The login screen is a fixed-design surface — its liquid-glass inputs
   stay glass regardless of the visitor's saved theme. Without this, the
   site-wide [data-theme="white"]/[data-theme="light"] input rules
   (which correctly whiten inputs across the app) bleed onto the login
   screen when a user who picked the white theme logs out, turning the
   field into an opaque white box. The `.login-glass` scope lifts
   specificity above that generic rule so the glass design always wins. */
[data-theme="white"] .login-glass .login-field input,
[data-theme="light"] .login-glass .login-field input {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
[data-theme="white"] .login-glass .login-field input::placeholder,
[data-theme="light"] .login-glass .login-field input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme="white"] .login-glass .login-field input:hover,
[data-theme="light"] .login-glass .login-field input:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
}
[data-theme="white"] .login-glass .login-field input:focus,
[data-theme="light"] .login-glass .login-field input:focus {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(132, 216, 184, 0.85);
  box-shadow:
    0 0 0 4px rgba(132, 216, 184, 0.20),
    0 8px 24px rgba(47, 167, 118, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* Submit button — gradient shifts on hover for the liquid feel */
.login-submit {
  background: linear-gradient(135deg,
    #84d8b8 0%,
    #51c194 50%,
    #2fa776 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow:
    0 12px 32px rgba(47, 167, 118, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  color: #07221a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  position: relative;
  overflow: hidden;
  transition: background-position 0.6s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
}
.login-submit:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(47, 167, 118, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
.login-submit::after {
  /* Sliding sheen on hover */
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.40) 50%,
    transparent 100%);
  transition: left 0.6s ease;
}
.login-submit:hover::after { left: 150%; }

/* Title — letter-press depth */
.login-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.40),
    0 1px 0 rgba(255, 255, 255, 0.20);
}
.login-subtitle {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}

/* Help text + error — slightly stronger contrast against the photo */
.login-help { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.login-error {
  background: rgba(236, 140, 140, 0.22);
  border-color: rgba(236, 140, 140, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Reduce motion — turn off the rotating halo + sliding shine */
@media (prefers-reduced-motion: reduce) {
  .login-glass::after { animation: none; }
  .login-brand-mark::before { animation: none; }
  .login-submit::after { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 — Tranche E
 *
 *   #22 KPI tiles → liquid-glass STATIC + diagonal hover (across board)
 *   #23 Topbar user pill → neon-emerald edge glow (the "Test Operator")
 * ════════════════════════════════════════════════════════════════════ */

/* ── #22 .dash-kpi liquid-glass static state ──────────────────────── */
.dash-kpi {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(132, 216, 184, 0.04) 50%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}
[data-theme="white"] .dash-kpi,
[data-theme="light"] .dash-kpi {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(214, 239, 225, 0.55) 50%,
    rgba(255, 255, 255, 0.88) 100%);
  border-color: rgba(15, 82, 54, 0.12);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 8px 24px rgba(15, 82, 54, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* ── #23 .user-menu-trigger — neon-emerald edge glow ───────────────── */
.user-menu-trigger {
  position: relative;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.06) 0%,
    rgba(81, 193, 148, 0.04) 100%);
  border: 1px solid rgba(132, 216, 184, 0.30);
  box-shadow:
    0 0 0 1px rgba(132, 216, 184, 0.08) inset,
    0 0 12px rgba(132, 216, 184, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.22s ease;
}
.user-menu-trigger::before {
  /* Animated emerald edge band — sits behind the trigger and bleeds
     through with a soft blur so the border itself looks LIT. */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(105deg,
    rgba(132, 216, 184, 0.55) 0%,
    rgba(81, 193, 148, 0.40) 35%,
    rgba(132, 216, 184, 0.55) 70%,
    rgba(184, 230, 220, 0.50) 100%);
  background-size: 200% 100%;
  animation: user-edge-shift 6s ease-in-out infinite alternate;
  z-index: -1;
  filter: blur(6px);
  opacity: 0.55;
}
@keyframes user-edge-shift {
  0%   { background-position: 0%   50%; opacity: 0.50; }
  100% { background-position: 100% 50%; opacity: 0.75; }
}
.user-menu-trigger:hover {
  border-color: rgba(132, 216, 184, 0.65);
  box-shadow:
    0 0 0 1px rgba(132, 216, 184, 0.15) inset,
    0 0 22px rgba(132, 216, 184, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}
.user-menu-trigger:hover::before { opacity: 0.95; }
.user-menu-trigger[open],
details.user-menu[open] .user-menu-trigger {
  border-color: rgba(132, 216, 184, 0.85);
  box-shadow:
    0 0 0 2px rgba(132, 216, 184, 0.20) inset,
    0 0 26px rgba(132, 216, 184, 0.45);
}

/* Avatar — keep the existing emerald gradient, add the glow ring */
.user-menu-avatar {
  box-shadow:
    0 0 0 2px rgba(132, 216, 184, 0.25),
    0 4px 12px rgba(47, 167, 118, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* Light theme — darker emerald accent so the glow reads on cream bg */
[data-theme="white"] .user-menu-trigger,
[data-theme="light"] .user-menu-trigger {
  background: linear-gradient(135deg,
    rgba(15, 82, 54, 0.05) 0%,
    rgba(214, 239, 225, 0.40) 100%);
  border-color: rgba(15, 82, 54, 0.30);
  box-shadow:
    0 0 0 1px rgba(15, 82, 54, 0.06) inset,
    0 0 12px rgba(15, 82, 54, 0.12),
    0 4px 14px rgba(15, 82, 54, 0.08);
}
[data-theme="white"] .user-menu-trigger::before,
[data-theme="light"] .user-menu-trigger::before {
  background: linear-gradient(105deg,
    rgba(15, 82, 54, 0.40) 0%,
    rgba(108, 179, 147, 0.35) 50%,
    rgba(15, 82, 54, 0.40) 100%);
  background-size: 200% 100%;
  opacity: 0.45;
}
[data-theme="white"] .user-menu-trigger:hover,
[data-theme="light"] .user-menu-trigger:hover {
  border-color: rgba(15, 82, 54, 0.55);
  box-shadow:
    0 0 0 1px rgba(15, 82, 54, 0.12) inset,
    0 0 22px rgba(15, 82, 54, 0.20);
}

@media (prefers-reduced-motion: reduce) {
  .user-menu-trigger::before { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════
 * Polish — Tranche N
 *   #1 Klijent + Centrala hover state stronger (was barely visible)
 *   #2 White-theme broad sweep — code, tables, muted, badges, links
 *   #3 Notification icon spacing + active-press feedback (the icons
 *      next to TEST LAB in the topbar)
 * ════════════════════════════════════════════════════════════════════ */

/* ── #1 Sidebar nav hover — make it actually visible ─────────────── */
/* Dark theme: previous rgba(255,255,255,0.04) was nearly invisible.
   Bump to a tinted emerald wash so the user gets clear feedback. */
.portal-nav > a:hover,
.portal-nav .portal-section-items a:hover {
  background: linear-gradient(90deg,
    rgba(132, 216, 184, 0.10) 0%,
    rgba(132, 216, 184, 0.04) 100%);
  color: var(--aco-text);
}
/* Klijent — slightly stronger because its sidebar uses bigger icons
   and the nav rows look "empty" at default hover weight. */
body.portal-klijent .portal-nav > a:hover {
  background: linear-gradient(90deg,
    rgba(132, 216, 184, 0.14) 0%,
    rgba(132, 216, 184, 0.05) 100%);
}
/* White theme — emerald-on-cream wash, never the dark version. */
[data-theme="white"] .portal-nav > a:hover,
[data-theme="white"] .portal-nav .portal-section-items a:hover,
[data-theme="light"] .portal-nav > a:hover,
[data-theme="light"] .portal-nav .portal-section-items a:hover {
  background: linear-gradient(90deg,
    rgba(15, 82, 54, 0.10) 0%,
    rgba(15, 82, 54, 0.03) 100%);
  color: #0c4a31;
}

/* ── #2 White-theme broad sweep ──────────────────────────────────── */
/* Inline <code> snippets — dark themes get a glassy near-black bg by
   default which reads as a black box on cream. Repaint as a soft
   emerald-tinted chip. */
[data-theme="white"] code,
[data-theme="light"] code,
[data-theme="white"] .mono,
[data-theme="light"] .mono {
  background: rgba(15, 82, 54, 0.06);
  color: #0c4a31;
  border-color: rgba(15, 82, 54, 0.14);
}
[data-theme="white"] pre,
[data-theme="light"] pre {
  background: rgba(15, 82, 54, 0.04);
  color: #0c4a31;
  border: 1px solid rgba(15, 82, 54, 0.10);
}

/* Muted text — the dark token is too light against cream. Lift it. */
[data-theme="white"] .muted,
[data-theme="light"] .muted,
[data-theme="white"] .subtitle,
[data-theme="light"] .subtitle {
  color: rgba(6, 32, 23, 0.62);
}
[data-theme="white"] .text-muted,
[data-theme="light"] .text-muted {
  color: rgba(6, 32, 23, 0.55);
}

/* Table borders — dark borders disappear into cream; redraw with the
   emerald-on-cream line tone the design system uses. */
[data-theme="white"] table,
[data-theme="light"] table,
[data-theme="white"] .data-table,
[data-theme="light"] .data-table {
  border-color: rgba(15, 82, 54, 0.10);
}
[data-theme="white"] th,
[data-theme="light"] th,
[data-theme="white"] td,
[data-theme="light"] td,
[data-theme="white"] .data-table th,
[data-theme="light"] .data-table th,
[data-theme="white"] .data-table td,
[data-theme="light"] .data-table td {
  border-color: rgba(15, 82, 54, 0.08);
}
[data-theme="white"] thead,
[data-theme="light"] thead,
[data-theme="white"] .data-table thead,
[data-theme="light"] .data-table thead {
  background: rgba(214, 239, 225, 0.45);
}
[data-theme="white"] tbody tr:hover,
[data-theme="light"] tbody tr:hover {
  background: rgba(15, 82, 54, 0.04);
}

/* Pills + badges — `.pill` and `.badge` defaults assume dark glass.
   Repaint the neutral variants for light bg; status pills (.posted,
   .pending_review, etc.) keep their semantic color. */
[data-theme="white"] .pill,
[data-theme="light"] .pill,
[data-theme="white"] .badge.muted,
[data-theme="light"] .badge.muted {
  background: rgba(15, 82, 54, 0.08);
  color: #0c4a31;
  border-color: rgba(15, 82, 54, 0.14);
}

/* Form controls — ensure inputs and selects have visible borders */
[data-theme="white"] input[type="text"],
[data-theme="white"] input[type="email"],
[data-theme="white"] input[type="password"],
[data-theme="white"] input[type="date"],
[data-theme="white"] input[type="number"],
[data-theme="white"] input[type="search"],
[data-theme="white"] textarea,
[data-theme="white"] select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: rgba(255, 255, 255, 0.85);
  color: #0c1a14;
  border-color: rgba(15, 82, 54, 0.20);
}
[data-theme="white"] input:focus,
[data-theme="white"] textarea:focus,
[data-theme="white"] select:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #0f5236;
  box-shadow: 0 0 0 3px rgba(15, 82, 54, 0.12);
  outline: none;
}

/* Anchors that still inherit dark-theme tokens — fall back to deep
   emerald for white. Only catches links without an explicit color. */
[data-theme="white"] a:not(.btn):not(.lang-pill):not(.scope-option):not(.user-menu-item):not(.portal-nav a),
[data-theme="light"] a:not(.btn):not(.lang-pill):not(.scope-option):not(.user-menu-item):not(.portal-nav a) {
  color: #0f5236;
}

/* Empty-state cards — drop the dark glass background and use the same
   cream-with-emerald-edge treatment as `.card` on light mode. */
[data-theme="white"] .empty-state,
[data-theme="light"] .empty-state {
  background: rgba(255, 255, 255, 0.85);
  border: 1px dashed rgba(15, 82, 54, 0.22);
  color: #0c1a14;
}

/* ── #3 Topbar notification icons — spacing + press feedback ─────── */
/* Group .tb-icon-btn so they breathe a little. Add a subtle scale on
   :active so a click feels tactile. */
.portal-topbar-right > .tb-icon-btn + .tb-icon-btn {
  margin-left: 4px;
}
.tb-icon-btn:active {
  transform: scale(0.94);
  transition: transform 80ms ease-out;
}
[data-theme="white"] .tb-icon-btn,
[data-theme="light"] .tb-icon-btn {
  border-color: rgba(15, 82, 54, 0.20);
  color: #0c4a31;
}
[data-theme="white"] .tb-icon-btn:hover,
[data-theme="light"] .tb-icon-btn:hover {
  background: rgba(15, 82, 54, 0.06);
  border-color: rgba(15, 82, 54, 0.40);
}

/* ════════════════════════════════════════════════════════════════════
 * Polish Session 1 — Tranche F
 *
 *   #24 Login backdrop — true edge-to-edge fullscreen lockdown
 *   #25 Scope dropdown → Select-bar pill aesthetic + green-glow active row
 *   #26 AI Ask bubble → neon outline speech bubble
 *   #27 KPI hover gradient direction → bottom-right toward upper-left
 * ════════════════════════════════════════════════════════════════════ */

/* ── #24 Login fullscreen lockdown ─────────────────────────────────── */
/* High-specificity override + !important so no parent layout fights us. */
.login-shell.login-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 50 !important;
  background-clip: border-box;
  background-attachment: fixed;
}
/* When .login-shell is on the page, lock body scroll + hide footer/orbs */
body:has(.login-shell) {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
body:has(.login-shell) .footer,
body:has(.login-shell) .ambient,
body:has(.login-shell) .grain,
body:has(.login-shell) .ai-bubble,
body:has(.login-shell) .back-breadcrumb {
  display: none !important;
}

/* ── #25 Scope dropdown → Select-bar reference aesthetic ───────────── */
/* The user-menu-dropdown becomes the listbox panel; active row gets a
   green-glow strip with a leading checkmark instead of a chevron. */
.user-menu-dropdown {
  border-radius: 16px;
  background: linear-gradient(155deg,
    rgba(19, 28, 23, 0.94) 0%,
    rgba(24, 37, 32, 0.92) 100%);
  border: 1px solid rgba(132, 216, 184, 0.18);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(132, 216, 184, 0.08) inset;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  padding: 6px;
  overflow: hidden;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 11px 38px;
  border-radius: 10px;
  color: var(--aco-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.user-menu-item:hover {
  background: rgba(132, 216, 184, 0.08);
  color: #b6e8d2;
}
.user-menu-item.active {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.22) 0%,
    rgba(81, 193, 148, 0.10) 100%);
  color: #84d8b8;
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(132, 216, 184, 0.40) inset,
    0 0 18px rgba(132, 216, 184, 0.20);
}
.user-menu-item.active::before {
  /* Leading green check on the active row — Select-bar pattern. */
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  display: grid;
  place-items: center;
  color: #84d8b8;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(132, 216, 184, 0.55);
}

[data-theme="white"] .user-menu-dropdown,
[data-theme="light"] .user-menu-dropdown {
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(248, 251, 249, 0.95) 100%);
  border-color: rgba(15, 82, 54, 0.14);
  box-shadow:
    0 24px 60px rgba(15, 82, 54, 0.12),
    0 0 0 1px rgba(15, 82, 54, 0.06) inset;
}
[data-theme="white"] .user-menu-item.active,
[data-theme="light"] .user-menu-item.active {
  background: linear-gradient(135deg, #d6efe1 0%, #b8e3cd 100%);
  color: #0f5236;
  box-shadow: 0 0 0 1px rgba(15, 82, 54, 0.28) inset;
}
[data-theme="white"] .user-menu-item.active::before,
[data-theme="light"] .user-menu-item.active::before { color: #0f5236; }

/* ── #26 AI Ask bubble → neon outline speech-bubble redesign ───────── */
.ai-bubble {
  width: 60px !important;
  height: 60px !important;
  border-radius: 18px !important;   /* squarish like reference */
  background: linear-gradient(135deg,
    rgba(20, 40, 50, 0.85) 0%,
    rgba(15, 28, 36, 0.92) 100%) !important;
  border: 2px solid rgba(85, 240, 245, 0.85) !important;
  box-shadow:
    0 0 24px rgba(85, 240, 245, 0.55),
    0 0 48px rgba(85, 240, 245, 0.30),
    inset 0 0 12px rgba(85, 240, 245, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.45) !important;
  animation: ai-bubble-neon 3.2s ease-in-out infinite alternate !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-bubble:hover {
  transform: translateY(-2px) scale(1.06) !important;
  border-color: rgba(120, 250, 250, 1) !important;
  box-shadow:
    0 0 36px rgba(85, 240, 245, 0.85),
    0 0 64px rgba(85, 240, 245, 0.40),
    inset 0 0 18px rgba(85, 240, 245, 0.30),
    0 12px 32px rgba(0, 0, 0, 0.50) !important;
}
.ai-bubble svg {
  fill: none !important;
  stroke: rgba(180, 252, 255, 0.95) !important;
  stroke-width: 2.2 !important;
  filter: drop-shadow(0 0 6px rgba(85, 240, 245, 0.85));
  width: 26px; height: 26px;
}
@keyframes ai-bubble-neon {
  0%   { box-shadow:
    0 0 24px rgba(85, 240, 245, 0.55),
    0 0 48px rgba(85, 240, 245, 0.25),
    inset 0 0 12px rgba(85, 240, 245, 0.16),
    0 8px 24px rgba(0, 0, 0, 0.45); }
  100% { box-shadow:
    0 0 30px rgba(85, 240, 245, 0.75),
    0 0 56px rgba(85, 240, 245, 0.40),
    inset 0 0 16px rgba(85, 240, 245, 0.26),
    0 8px 24px rgba(0, 0, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-bubble { animation: none !important; }
}

/* ── #27 KPI hover gradient direction reversal ─────────────────────── */
/* Was: 135deg (top-left → bottom-right). Now: 315deg = bottom-right →
   top-left. Brighter on the upper-left edge for that "lit from below"
   futuristic feel. */
.dash-kpi::before {
  background: linear-gradient(315deg,
    var(--kpi-edge, rgba(132, 216, 184, 0.55)) 0%,
    transparent 40%,
    transparent 60%,
    var(--kpi-edge, rgba(132, 216, 184, 0.40)) 100%) !important;
}
/* Add a brighter top-left edge highlight on hover too. */
.dash-kpi:hover {
  border-color: rgba(132, 216, 184, 0.55);
  box-shadow:
    var(--asd-soft),
    0 0 32px var(--kpi-glow, rgba(132, 216, 184, 0.30)),
    inset 1px 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ── #28 User avatar — round, glass-edged, theme-aware ─────────────── */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--aco-text-on-green, #07221a);
  box-shadow:
    0 0 0 2px rgba(132, 216, 184, 0.30),
    0 4px 12px rgba(47, 167, 118, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(132, 216, 184, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.user-avatar-letter {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.85) 0%,
    rgba(81, 193, 148, 0.95) 60%,
    rgba(47, 167, 118, 0.85) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.user-avatar-img {
  background-color: rgba(255, 255, 255, 0.10);
}
.user-avatar:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px rgba(132, 216, 184, 0.55),
    0 6px 18px rgba(47, 167, 118, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
[data-theme="white"] .user-avatar,
[data-theme="light"] .user-avatar {
  box-shadow:
    0 0 0 2px rgba(15, 82, 54, 0.18),
    0 4px 12px rgba(15, 82, 54, 0.12);
  border-color: rgba(15, 82, 54, 0.28);
}
[data-theme="white"] .user-avatar-letter,
[data-theme="light"] .user-avatar-letter {
  background: linear-gradient(135deg, #b8e3cd 0%, #6cb393 100%);
  color: #0f5236;
}

/* Avatar in the Aktivni račun strip — wrap the letter icon so it sits
   in line with the strip's existing label-icon slot. */
.aktivni-racun-label-icon .user-avatar {
  width: 32px; height: 32px;
  font-size: 13px;
}


/* ════════════════════════════════════════════════════════════════════


/* ════════════════════════════════════════════════════════════════════


/* ════════════════════════════════════════════════════════════════════


/* ════════════════════════════════════════════════════════════════════


/* ════════════════════════════════════════════════════════════════════
 * Day-101 v11 — CORRECTED selectors. Style .portal-section-HEADER.
 *
 * Day-97 split the section row into THREE elements:
 *   • .portal-section-header   — the outer row container (flex)
 *   • .portal-section-label    — the clickable LABEL link (e.g.
 *                                  "DOKUMENTI") that navigates to the
 *                                  section hub page
 *   • .portal-section-toggle   — small 22×22 chevron button that
 *                                  toggles the submenu in place
 *
 * Every earlier v1..v10 attempt mis-targeted `.portal-section-toggle`
 * thinking it was the whole row — that's why the styled pill only
 * appeared around the chevron and the label stayed visually orphaned.
 * v11 targets `.portal-section-header` for the row-level glass pill;
 * the chevron button keeps its small 22×22 footprint and just blends
 * into the pill on the right edge.
 *
 * Submenu styling (items + halo) preserved as-is from v10 because
 * Daniel said "the submenus are alright, keep them".
 * ════════════════════════════════════════════════════════════════════ */

/* ── HARD RESET on the section-group ────────────────────────────── */
.portal-section-group,
.portal-section-group[data-expanded="true"] {
  filter: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.portal-section-group::before,
.portal-section-group::after,
.portal-section-group[data-expanded="true"]::before,
.portal-section-group[data-expanded="true"]::after {
  display: none !important;
  content: none !important;
}

/* ── CLOSED state — header is the standalone glass pill ─────────── */
.portal-section-group:not([data-expanded="true"]) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 6px 8px !important;
}

.portal-section-group:not([data-expanded="true"]) .portal-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 9px 10px 9px 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.16) !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.14s ease,
    box-shadow 0.18s ease;
}
.portal-section-group:not([data-expanded="true"]) .portal-section-header:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: color-mix(in srgb, var(--nav-accent) 28%, rgba(255, 255, 255, 0.10)) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 14px rgba(0, 0, 0, 0.26),
    0 0 0 1px color-mix(in srgb, var(--nav-accent) 20%, transparent) !important;
}

/* ── EXPANDED state — section-group becomes one glass card ──────── */
.portal-section-group[data-expanded="true"] {
  background: rgba(8, 16, 12, 0.55) !important;
  border: 1px solid color-mix(in srgb, var(--nav-accent) 28%, transparent) !important;
  border-radius: 14px !important;
  margin: 10px 8px 14px !important;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px color-mix(in srgb, var(--nav-accent) 12%, transparent),
    0 10px 28px color-mix(in srgb, var(--nav-accent) 20%, transparent),
    0 0 56px color-mix(in srgb, var(--nav-accent) 16%, transparent) !important;
}
.portal-section-group[data-expanded="true"]::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: -10px -8px -14px -8px;
  border-radius: 24px;
  background:
    radial-gradient(60% 55% at 50% 100%,
      color-mix(in srgb, var(--nav-accent) 32%, transparent) 0%,
      transparent 70%),
    radial-gradient(60% 55% at 50% 0%,
      color-mix(in srgb, var(--nav-accent) 14%, transparent) 0%,
      transparent 70%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}

.portal-section-group[data-expanded="true"] .portal-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 11px 12px 10px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 13px 13px 0 0 !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease;
}
.portal-section-group[data-expanded="true"] .portal-section-header:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* ── Label — single line, uppercase, accent on hover/expanded ───── */
.portal-section-group .portal-section-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55) !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0;
  transition: color 0.18s ease;
}
.portal-section-group:not([data-expanded="true"]) .portal-section-header:hover .portal-section-label,
.portal-section-group[data-expanded="true"] .portal-section-label,
.portal-section-group .portal-section-label:hover {
  color: var(--nav-accent) !important;
}

/* ── Chevron toggle button — small, no own pill, blends in ──────── */
.portal-section-group .portal-section-toggle {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55) !important;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.portal-section-group .portal-section-toggle:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--nav-accent) !important;
}
.portal-section-group[data-expanded="true"] .portal-section-toggle {
  color: var(--nav-accent) !important;
}

.portal-section-group .portal-section-caret {
  width: 12px;
  height: 12px;
  opacity: 0.55;
  transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.18s ease;
}
.portal-section-group:hover .portal-section-caret,
.portal-section-group[data-expanded="true"] .portal-section-caret {
  opacity: 0.95;
}

/* ── Items list (only when expanded) — flat rows on the card ────── */
.portal-section-group[data-expanded="true"] .portal-section-items {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 0 13px 13px !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 4px !important;
  filter: none !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.portal-section-group[data-expanded="true"] .portal-section-items::before,
.portal-section-group[data-expanded="true"] .portal-section-items::after {
  display: none !important;
  content: none !important;
}

.portal-section-group[data-expanded="true"] .portal-section-items a {
  position: relative;
  margin: 0 !important;
  padding: 10px 36px 10px 14px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background-color 0.16s ease, color 0.16s ease;
  transform: none !important;
}
.portal-section-group[data-expanded="true"] .portal-section-items a:last-of-type {
  border-bottom: 0 !important;
}
.portal-section-group[data-expanded="true"] .portal-section-items a::before {
  display: none !important;
  content: none !important;
}
.portal-section-group[data-expanded="true"] .portal-section-items a::after {
  display: block !important;
  content: "›" !important;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.32);
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  opacity: 1;
}

.portal-section-group[data-expanded="true"] .portal-section-items a:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.95);
}
.portal-section-group[data-expanded="true"] .portal-section-items a:hover::after {
  color: var(--nav-accent);
  text-shadow: 0 0 8px var(--nav-accent-glow);
}
.portal-section-group[data-expanded="true"] .portal-section-items a:hover .nav-ico {
  color: var(--nav-accent);
  filter: drop-shadow(0 0 6px var(--nav-accent-glow));
}

.portal-section-group[data-expanded="true"] .portal-section-items a.active {
  margin: 4px 2px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nav-accent) 60%, transparent) !important;
  background: linear-gradient(
    135deg,
    var(--nav-accent) 0%,
    color-mix(in srgb, var(--nav-accent) 78%, #000) 100%
  ) !important;
  color: #042720 !important;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 0 1px color-mix(in srgb, var(--nav-accent) 50%, transparent),
    0 6px 20px color-mix(in srgb, var(--nav-accent) 32%, transparent),
    0 0 32px color-mix(in srgb, var(--nav-accent) 22%, transparent) !important;
}
.portal-section-group[data-expanded="true"] .portal-section-items a.active::after {
  content: "✓" !important;
  color: #042720;
  font-weight: 800;
  font-size: 14px;
  text-shadow: none;
  right: 14px;
}
.portal-section-group[data-expanded="true"] .portal-section-items a.active:hover::after {
  color: #042720;
  text-shadow: none;
}
.portal-section-group[data-expanded="true"] .portal-section-items a.active .nav-ico {
  color: #042720;
  filter: none;
}

/* @supports fallback */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .portal-section-group[data-expanded="true"] {
    border: 1px solid rgba(132, 216, 184, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 0 0 1px rgba(132, 216, 184, 0.12),
      0 10px 28px rgba(132, 216, 184, 0.20),
      0 0 56px rgba(132, 216, 184, 0.16) !important;
  }
  .portal-section-group[data-expanded="true"]::before {
    background: radial-gradient(60% 55% at 50% 100%,
      rgba(132, 216, 184, 0.32) 0%, transparent 70%);
  }
  .portal-section-group[data-expanded="true"] .portal-section-items a.active {
    background: linear-gradient(
      135deg,
      var(--nav-accent) 0%,
      rgba(0, 0, 0, 0.22) 100%
    ) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      0 0 0 1px var(--nav-accent),
      0 6px 20px var(--nav-accent-glow) !important;
  }
}

/* Light theme */
[data-theme="white"] .portal-section-group:not([data-expanded="true"]) .portal-section-header,
[data-theme="light"] .portal-section-group:not([data-expanded="true"]) .portal-section-header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 82, 54, 0.10) !important;
}
[data-theme="white"] .portal-section-group[data-expanded="true"],
[data-theme="light"] .portal-section-group[data-expanded="true"] {
  background: rgba(255, 255, 255, 0.92) !important;
}
[data-theme="white"] .portal-section-group .portal-section-label,
[data-theme="light"] .portal-section-group .portal-section-label {
  color: rgba(15, 30, 22, 0.55) !important;
}


/* ════════════════════════════════════════════════════════════════════
 * Day-101 v12 — Three fixes:
 *
 *   1. Scope picker visible + clickable.
 *      v1..v11 cascade pushed some <details>-related defaults out of
 *      whack. v12 forces the chip text to high-contrast and the menu
 *      to display:block when [open], regardless of any earlier rule.
 *
 *   2. Bug-report FAB upgraded to a "Sun" gradient (warm amber→orange)
 *      with bright white text. Stays in bottom-right, just looks much
 *      more inviting than the muted glass pill it was.
 *
 *   3. Light-theme nav icon palette — sidebar items get per-section
 *      colored icons so the cream/white theme feels cheerful but
 *      still premium. Dark theme unchanged.
 * ════════════════════════════════════════════════════════════════════ */

/* ── 1. Scope picker fix ─────────────────────────────────────────── */

.sidebar-scope {
  overflow: visible !important;
  max-height: none !important;
}
.sidebar-scope[open] .sidebar-scope-menu {
  display: block !important;
  visibility: visible !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}
.sidebar-scope-chip {
  pointer-events: auto !important;
  user-select: none;
}
.sidebar-scope-name {
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  background: transparent !important;
}
.sidebar-scope-label {
  color: rgba(255, 255, 255, 0.45) !important;
  opacity: 1 !important;
}

/* Light theme — dark text on cream chip */
[data-theme="white"] .sidebar-scope-name,
[data-theme="light"] .sidebar-scope-name {
  color: #0c5b3c !important;
}
[data-theme="white"] .sidebar-scope-label,
[data-theme="light"] .sidebar-scope-label {
  color: rgba(15, 82, 54, 0.55) !important;
}


/* ── 2. Bug-report FAB upgraded to "Sun" gradient ────────────────── */

.bug-report-fab {
  /* Warm sun gradient — amber to orange, mirrors macOS / iOS
     status-indicator pattern from Daniel's reference image. */
  background: linear-gradient(135deg, #ffb45b 0%, #ff7a3d 100%) !important;
  border: 1px solid rgba(255, 215, 145, 0.40) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(255, 122, 61, 0.40),
    0 0 24px rgba(255, 180, 91, 0.30) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  transition:
    transform 0.14s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}
.bug-report-fab:hover {
  background: linear-gradient(135deg, #ffc375 0%, #ff8a4f 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 215, 145, 0.60) !important;
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 10px 22px rgba(255, 122, 61, 0.50),
    0 0 32px rgba(255, 180, 91, 0.45) !important;
}
.bug-report-fab svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
.bug-fab-label {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* ── 3. Light-theme cheerful icon palette ────────────────────────── */
/* Per-section icon colors when sidebar is in light theme — each
   section's icons inherit a tinted hue (still muted enough to feel
   premium, not loud) so the cream surface feels welcoming. Hover /
   active states still pick up the per-section accent from v11.
*/

[data-theme="white"] .portal-section-group[data-section-group="dokumenti"] .portal-section-items .nav-ico,
[data-theme="light"] .portal-section-group[data-section-group="dokumenti"] .portal-section-items .nav-ico {
  color: #1f4f8a;          /* navy blue — documents feel "official" */
}
[data-theme="white"] .portal-section-group[data-section-group="knjige"] .portal-section-items .nav-ico,
[data-theme="light"] .portal-section-group[data-section-group="knjige"] .portal-section-items .nav-ico,
[data-theme="white"] .portal-section-group[data-section-group="knjigovodstvo"] .portal-section-items .nav-ico,
[data-theme="light"] .portal-section-group[data-section-group="knjigovodstvo"] .portal-section-items .nav-ico {
  color: #0c5b3c;          /* deep emerald — books, accounting */
}
[data-theme="white"] .portal-section-group[data-section-group="financije"] .portal-section-items .nav-ico,
[data-theme="light"] .portal-section-group[data-section-group="financije"] .portal-section-items .nav-ico {
  color: #6b3d80;          /* purple — finance, capital */
}
[data-theme="white"] .portal-section-group[data-section-group="place"] .portal-section-items .nav-ico,
[data-theme="light"] .portal-section-group[data-section-group="place"] .portal-section-items .nav-ico {
  color: #b85c1f;          /* warm copper — people, payroll */
}
[data-theme="white"] .portal-section-group[data-section-group="revizija"] .portal-section-items .nav-ico,
[data-theme="light"] .portal-section-group[data-section-group="revizija"] .portal-section-items .nav-ico {
  color: #993b3b;          /* rust — audit, compliance */
}
[data-theme="white"] .portal-section-group[data-section-group="mreza"] .portal-section-items .nav-ico,
[data-theme="light"] .portal-section-group[data-section-group="mreza"] .portal-section-items .nav-ico {
  color: #c08a2a;          /* warm gold — network, partners */
}
[data-theme="white"] .portal-section-group[data-section-group="sustav"] .portal-section-items .nav-ico,
[data-theme="light"] .portal-section-group[data-section-group="sustav"] .portal-section-items .nav-ico {
  color: #2a7e7e;          /* teal — system, admin */
}

/* Top-level nav icons on light theme — soft variant of the brand */
[data-theme="white"] .portal-nav > a .nav-ico,
[data-theme="light"] .portal-nav > a .nav-ico {
  color: #2a6d4e;
}
[data-theme="white"] .portal-nav > a:hover .nav-ico,
[data-theme="light"] .portal-nav > a:hover .nav-ico {
  color: #0c5b3c;
}

/* Active item — icon flips to dark for legibility against the
   accent-coloured pill. (Dark theme already handles this in v11.) */
[data-theme="white"] .portal-section-group[data-expanded="true"] .portal-section-items a.active .nav-ico,
[data-theme="light"] .portal-section-group[data-expanded="true"] .portal-section-items a.active .nav-ico {
  color: #042720 !important;
}


/* ════════════════════════════════════════════════════════════════════
 * Day-101 v13 — Light theme readability + dashboard icon palette +
 *               Settings / Favorites icon polish.
 *
 *   1. Submenu item labels were invisible on white theme (white text
 *      on white surface). v13 forces dark-emerald colour for submenu
 *      anchors under light theme so they read clearly.
 *
 *   2. Section-landing dashboard tiles (the icon-circle + label rows
 *      under /centrala/place, /finance, /accounting, /audit, etc.)
 *      get per-section colour + subtle accent glow so the white-theme
 *      dashboard feels cheerful and modern without losing premium feel.
 *
 *   3. The dropdown-menu links ★ Postavke bočne trake and ⚙ Postavke
 *      now show their icons as proper coloured glyphs — bright yellow
 *      star for favourites, emerald cog for settings, both bigger,
 *      both with a soft glow.
 * ════════════════════════════════════════════════════════════════════ */

/* ── 1. Light-theme submenu labels — dark emerald for legibility ── */

[data-theme="white"] .portal-section-group[data-expanded="true"] .portal-section-items a,
[data-theme="light"] .portal-section-group[data-expanded="true"] .portal-section-items a {
  color: #0c5b3c !important;
  font-weight: 500;
}
[data-theme="white"] .portal-section-group[data-expanded="true"] .portal-section-items a:hover,
[data-theme="light"] .portal-section-group[data-expanded="true"] .portal-section-items a:hover {
  color: #04342c !important;
  background-color: rgba(15, 82, 54, 0.06) !important;
}
[data-theme="white"] .portal-section-group[data-expanded="true"] .portal-section-items a::after,
[data-theme="light"] .portal-section-group[data-expanded="true"] .portal-section-items a::after {
  color: rgba(15, 82, 54, 0.45) !important;
}
/* Item dividers on light theme need a soft greenish hairline */
[data-theme="white"] .portal-section-group[data-expanded="true"] .portal-section-items a,
[data-theme="light"] .portal-section-group[data-expanded="true"] .portal-section-items a {
  border-bottom-color: rgba(15, 82, 54, 0.08) !important;
}

/* Active item label keeps dark text on the green pill — already in v11 */


/* ── 2. Section-landing dashboard tiles — colourful icons + glow ── */
/* These are the rows inside the landing page cards (Dokumenti,
   Knjige, Financije, Plaće i ljudi, Revizija, Mreža, Sustav). Each
   row has a circular icon-badge on the left. We paint each badge a
   different muted-but-cheerful colour and add a soft glow halo. */

[data-theme="white"] .health-row > span:first-child,
[data-theme="light"] .health-row > span:first-child {
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.18) 0%,
    rgba(132, 216, 184, 0.06) 100%) !important;
  border: 1px solid rgba(132, 216, 184, 0.35) !important;
  color: #0c5b3c !important;
  box-shadow:
    0 4px 10px rgba(12, 91, 60, 0.08),
    0 0 14px rgba(132, 216, 184, 0.20) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease;
}

/* Nth-of-type cycle gives every other tile a distinct hue, so the
   landing reads as a cheerful palette instead of monochrome green. */
[data-theme="white"] .health-row:nth-of-type(7n+2) > span:first-child,
[data-theme="light"] .health-row:nth-of-type(7n+2) > span:first-child {
  background: linear-gradient(135deg, rgba(120, 180, 232, 0.18), rgba(120, 180, 232, 0.06)) !important;
  border-color: rgba(120, 180, 232, 0.35) !important;
  color: #1f4f8a !important;
  box-shadow: 0 4px 10px rgba(31, 79, 138, 0.08), 0 0 14px rgba(120, 180, 232, 0.20) !important;
}
[data-theme="white"] .health-row:nth-of-type(7n+3) > span:first-child,
[data-theme="light"] .health-row:nth-of-type(7n+3) > span:first-child {
  background: linear-gradient(135deg, rgba(216, 170, 232, 0.18), rgba(216, 170, 232, 0.06)) !important;
  border-color: rgba(216, 170, 232, 0.35) !important;
  color: #6b3d80 !important;
  box-shadow: 0 4px 10px rgba(107, 61, 128, 0.08), 0 0 14px rgba(216, 170, 232, 0.20) !important;
}
[data-theme="white"] .health-row:nth-of-type(7n+4) > span:first-child,
[data-theme="light"] .health-row:nth-of-type(7n+4) > span:first-child {
  background: linear-gradient(135deg, rgba(240, 180, 120, 0.20), rgba(240, 180, 120, 0.06)) !important;
  border-color: rgba(240, 180, 120, 0.40) !important;
  color: #b85c1f !important;
  box-shadow: 0 4px 10px rgba(184, 92, 31, 0.08), 0 0 14px rgba(240, 180, 120, 0.20) !important;
}
[data-theme="white"] .health-row:nth-of-type(7n+5) > span:first-child,
[data-theme="light"] .health-row:nth-of-type(7n+5) > span:first-child {
  background: linear-gradient(135deg, rgba(232, 140, 140, 0.18), rgba(232, 140, 140, 0.06)) !important;
  border-color: rgba(232, 140, 140, 0.35) !important;
  color: #993b3b !important;
  box-shadow: 0 4px 10px rgba(153, 59, 59, 0.08), 0 0 14px rgba(232, 140, 140, 0.20) !important;
}
[data-theme="white"] .health-row:nth-of-type(7n+6) > span:first-child,
[data-theme="light"] .health-row:nth-of-type(7n+6) > span:first-child {
  background: linear-gradient(135deg, rgba(232, 200, 120, 0.20), rgba(232, 200, 120, 0.06)) !important;
  border-color: rgba(232, 200, 120, 0.40) !important;
  color: #8a6e1c !important;
  box-shadow: 0 4px 10px rgba(138, 110, 28, 0.08), 0 0 14px rgba(232, 200, 120, 0.20) !important;
}
[data-theme="white"] .health-row:nth-of-type(7n) > span:first-child,
[data-theme="light"] .health-row:nth-of-type(7n) > span:first-child {
  background: linear-gradient(135deg, rgba(120, 200, 200, 0.18), rgba(120, 200, 200, 0.06)) !important;
  border-color: rgba(120, 200, 200, 0.35) !important;
  color: #2a7e7e !important;
  box-shadow: 0 4px 10px rgba(42, 126, 126, 0.08), 0 0 14px rgba(120, 200, 200, 0.20) !important;
}

/* Hover — lift the tile + intensify glow */
[data-theme="white"] .health-row:hover > span:first-child,
[data-theme="light"] .health-row:hover > span:first-child {
  transform: translateY(-2px);
  filter: brightness(1.05);
}


/* ── 3. Settings / Favorites menu-item icons — bigger + coloured ── */

.user-menu-item .menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  font-size: 17px;
  line-height: 1;
  border-radius: 6px;
  flex-shrink: 0;
  transition: transform 0.16s ease, filter 0.18s ease;
}

/* Sidebar favorites — bright yellow star, soft amber glow */
.user-menu-item .icon-favorites {
  color: #ffd24a;
  background: rgba(255, 210, 74, 0.10);
  text-shadow:
    0 0 6px rgba(255, 210, 74, 0.55),
    0 0 12px rgba(255, 210, 74, 0.30);
  filter: drop-shadow(0 0 4px rgba(255, 210, 74, 0.35));
}
.user-menu-item:hover .icon-favorites {
  transform: rotate(6deg) scale(1.08);
}

/* Settings — emerald cog, accent glow */
.user-menu-item .icon-settings {
  color: var(--aco-green, #84d8b8);
  background: rgba(132, 216, 184, 0.10);
  text-shadow:
    0 0 6px rgba(132, 216, 184, 0.45),
    0 0 12px rgba(132, 216, 184, 0.25);
  filter: drop-shadow(0 0 4px rgba(132, 216, 184, 0.30));
}
.user-menu-item:hover .icon-settings {
  transform: rotate(60deg);
}

/* Light theme — darker glow colours so they don't blow out cream bg */
[data-theme="white"] .user-menu-item .icon-favorites,
[data-theme="light"] .user-menu-item .icon-favorites {
  color: #c89000;
  background: rgba(200, 144, 0, 0.10);
  text-shadow:
    0 0 6px rgba(200, 144, 0, 0.35),
    0 0 12px rgba(200, 144, 0, 0.20);
}
[data-theme="white"] .user-menu-item .icon-settings,
[data-theme="light"] .user-menu-item .icon-settings {
  color: #0c5b3c;
  background: rgba(12, 91, 60, 0.08);
  text-shadow:
    0 0 6px rgba(12, 91, 60, 0.30),
    0 0 12px rgba(12, 91, 60, 0.18);
}

/* ── 2026-05-18 polish — UX corrections from Daniel's review ──────── */

/*
 * Number input spinners — dark-theme visibility fix.
 *
 * Problem: on /klijent/racuni/novi the qty/price spinner arrows were
 * rendered using the browser's default light-theme glyphs against our
 * dark surface, making them nearly invisible.
 *
 * Fix: set `color-scheme: dark` so WebKit (Chrome, Safari, Edge) emits
 * its dark-theme spinner glyphs. As a belt-and-braces fallback for
 * Firefox (which renders type=number with a different mechanism) we
 * bump the spin-button opacity and re-tint with currentColor.
 */
input[type="number"] {
  color-scheme: dark;
}
[data-theme="white"] input[type="number"],
[data-theme="light"] input[type="number"] {
  color-scheme: light;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
  filter: brightness(1.6) saturate(0.4);
  margin-left: 4px;
  cursor: pointer;
}
[data-theme="white"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="light"] input[type="number"]::-webkit-inner-spin-button {
  filter: none;
}

/*
 * Info tooltip — reusable hover-explanation pattern.
 *
 * Use via {% include "components/_info_tooltip.html" %} with the
 * `tip` context var, or inline:
 *   <label>Cijena <span class="info-tip" data-tip="...">i</span></label>
 *
 * The dot is a small superscript "i" beside a required-marker (*).
 * On hover/focus it pops a card above the field with the explanation.
 * On mobile (no hover) a tap toggles the .show state — we wire that
 * in _info_tooltip.html itself.
 */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(132, 216, 184, 0.14);
  border: 1px solid rgba(132, 216, 184, 0.32);
  color: var(--aco-green, #84d8b8);
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  cursor: help;
  position: relative;
  user-select: none;
  vertical-align: middle;
  transition: background 0.12s, transform 0.12s;
}
.info-tip:hover,
.info-tip:focus-visible,
.info-tip.show {
  background: rgba(132, 216, 184, 0.28);
  transform: scale(1.08);
  outline: none;
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 320px;
  padding: 8px 12px;
  background: var(--aco-surface1, #1a1a1a);
  border: 1px solid var(--aco-border, rgba(255,255,255,0.14));
  border-radius: 8px;
  color: var(--aco-text, rgba(255,255,255,0.92));
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.info-tip:hover::after,
.info-tip:focus-visible::after,
.info-tip.show::after {
  opacity: 1;
}
.required-mark {
  color: var(--aco-money-payable, #e86e6e);
  margin-left: 2px;
}

/*
 * Bug-report FAB — collapse-on-idle redesign.
 *
 * Problem (2026-05-18): the full pill ("⚠ Prijavi grešku") sits over
 * interactive content on small layouts. Daniel reported it obstructs
 * the dashboard calendar.
 *
 * Fix: default to a 40×40 circular icon button (low visual weight).
 * Hover / focus / keyboard-tab expands it to the full labelled pill.
 * The expand happens via max-width transition so it animates smoothly.
 * The hover-target is the whole button so users discover the label
 * just by moving past it.
 */
.bug-report-fab {
  /* override the previous fixed-width pill */
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  justify-content: center;
  gap: 0;
  opacity: 0.72;
  transition: width 0.22s ease, opacity 0.18s, background 0.15s,
              color 0.15s, border-color 0.15s, padding 0.22s ease;
}
.bug-report-fab:hover,
.bug-report-fab:focus-visible {
  width: auto;
  padding: 8px 14px 8px 10px;
  gap: 6px;
  opacity: 1;
  border-radius: 20px;
  justify-content: flex-start;
}
.bug-fab-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.22s ease, margin-left 0.18s;
}
.bug-report-fab:hover .bug-fab-label,
.bug-report-fab:focus-visible .bug-fab-label {
  max-width: 160px;
  margin-left: 2px;
}

/* ── 2026-05-18 polish — Altoria action-button system ─────────────── */
/*
 * Standard form-button pairing for the platform:
 *   .alt-btn-send   — primary positive action (Pošalji, Spremi, Potvrdi)
 *                     Brand-green fill + white text.
 *   .alt-btn-cancel — step-back action (Odustani, Zatvori, Vrati)
 *                     Brand-orange outline; on hover fills with orange.
 *   .alt-btn        — base class, neutral surface
 *
 * Daniel's review 2026-05-18: the old client-messages modal used
 * .kli-btn / .kli-btn-primary which didn't follow the Altoria palette.
 * The new classes are portal-wide so every form picks up the same
 * Pošalji/Odustani semantics without per-page overrides.
 */
.alt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s,
              transform 0.06s;
  text-decoration: none;
  line-height: 1.2;
}
.alt-btn:active { transform: translateY(1px); }

/* Pošalji / Spremi — Altoria green */
.alt-btn-send {
  background: var(--aco-green, #84d8b8);
  color: #062017;
  border-color: var(--aco-green, #84d8b8);
}
.alt-btn-send:hover {
  background: var(--aco-green-light, #9ae8c8);
  border-color: var(--aco-green-light, #9ae8c8);
}
[data-theme="white"] .alt-btn-send,
[data-theme="light"] .alt-btn-send {
  background: #2da882;
  color: #ffffff;
  border-color: #2da882;
}
[data-theme="white"] .alt-btn-send:hover,
[data-theme="light"] .alt-btn-send:hover {
  background: #1f8d6a;
  border-color: #1f8d6a;
}

/* Odustani / Zatvori — Altoria orange */
.alt-btn-cancel {
  background: transparent;
  color: var(--aco-orange, #ff9a4d);
  border-color: var(--aco-orange, #ff9a4d);
}
.alt-btn-cancel:hover {
  background: rgba(255, 154, 77, 0.14);
  color: var(--aco-orange, #ff9a4d);
  border-color: var(--aco-orange, #ff9a4d);
}
[data-theme="white"] .alt-btn-cancel,
[data-theme="light"] .alt-btn-cancel {
  color: #d96a16;
  border-color: #d96a16;
}
[data-theme="white"] .alt-btn-cancel:hover,
[data-theme="light"] .alt-btn-cancel:hover {
  background: rgba(217, 106, 22, 0.10);
}

/* ── 2026-05-18 polish — Topbar icons + tenant pill (Daniel review) ── */

/*
 * Topbar icon buttons — larger touch target + crisper SVG.
 * Daniel reported messaging/notification icons felt too small to land
 * on accurately. New sizing: 36×36 hit target, 22px glyph (was 28×28 / 18px).
 */
.tb-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.tb-icon-btn svg {
  width: 22px !important;
  height: 22px !important;
}
.tb-icon-btn .tb-icon-badge {
  /* Badge is now relative to the larger button — re-anchor + grow. */
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  padding: 0 4px;
  border-radius: 9px;
  font-weight: 700;
}

/* The bell icon variant (open-queue) — match the sizing. */
.tb-oq-btn { width: 36px; height: 36px; border-radius: 10px; }
.tb-oq-btn svg { width: 22px !important; height: 22px !important; }

/*
 * Tenant pill in the topbar — replaces the flat grey rectangle with
 * a soft Altoria-green-tinted chip. Mirrors the brand without
 * shouting; on white theme uses a darker emerald.
 */
.portal-topbar-right .pill,
.portal-topbar .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--af-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg,
    rgba(132, 216, 184, 0.16) 0%,
    rgba(132, 216, 184, 0.06) 100%);
  color: var(--aco-green-light, #b6efd4);
  border: 1px solid rgba(132, 216, 184, 0.28);
  transition: background 0.15s, border-color 0.15s;
}
.portal-topbar-right .pill:hover,
.portal-topbar .pill:hover {
  background: rgba(132, 216, 184, 0.22);
  border-color: rgba(132, 216, 184, 0.45);
}

/* Light theme — darker emerald for legibility on cream surface */
[data-theme="white"] .portal-topbar-right .pill,
[data-theme="white"] .portal-topbar .pill,
[data-theme="light"] .portal-topbar-right .pill,
[data-theme="light"] .portal-topbar .pill {
  background: linear-gradient(135deg,
    rgba(45, 168, 130, 0.16) 0%,
    rgba(45, 168, 130, 0.06) 100%);
  color: #1f8d6a;
  border-color: rgba(45, 168, 130, 0.35);
}
[data-theme="white"] .portal-topbar-right .pill:hover,
[data-theme="light"] .portal-topbar-right .pill:hover {
  background: rgba(45, 168, 130, 0.22);
  border-color: rgba(45, 168, 130, 0.55);
}

/* Scope-reset pill (operator's "back to centrala") — same family but
 * subtler so it doesn't compete with the active-tenant chip. */
.portal-topbar-right .pill.scope-reset,
.portal-topbar .pill.scope-reset {
  background: transparent;
  border-color: var(--aco-glass-border);
  color: var(--aco-text-muted);
}
.portal-topbar-right .pill.scope-reset:hover,
.portal-topbar .pill.scope-reset:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--aco-text);
}

/* ════════════════════════════════════════════════════════════════════
 * Stage 3.7 final-override block (2026-05-23) — Premium white theme.
 *
 * Daniel feedback batch:
 *   1. "Pregled firme/Moji klijenti/Radni prostor klijenta" + ikone
 *      moraju biti bijeli na zelenom sidebaru.
 *   2. "Status sustava" mora biti čitljiv na bijeloj temi.
 *   3. Sidebar mora biti "endless" — bez bijelog gap-a ispod.
 *   4. Logo Altoria mora biti bijel na zelenom sidebaru.
 *   5. Liquid Glass design za sidebar — premium look.
 *   6. Wow-efekt boja ikona na dashboardu, finance-premium feel.
 *
 * Ovaj blok je NAMJERNO POSLJEDNJI U CSS-u tako da NIJEDAN raniji
 * legacy "tamno-zeleni tekst na bijelom sidebaru" override ga ne može
 * potući kasnijim cascade pravilom. Sve deklaracije s !important zbog
 * istog razloga. Trade-off: !important je teško refaktorirati kasnije,
 * ali pravilna alternativa (izbrisati svaki legacy blok individualno
 * kroz 8300+ redova) je previše rizična u jednom polish prolazu.
 *
 * Kad netko dođe ovdje za 6 mjeseci i pita "zašto !important svuda":
 * portal.css je rastao layer-po-layer kroz Day 1-100; tema-aware CSS
 * je prešao kroz 4 različita design pivota; jedini siguran način da
 * se garantira deep-emerald sidebar + bijeli forge je override-block.
 * ════════════════════════════════════════════════════════════════════ */

/* ── (A) Top-level sidebar links + Status sustava → bijeli na zelenoj ─ */
[data-theme="light"] .portal-sidebar,
[data-theme="white"]  .portal-sidebar {
  /* Stage 3.7 — endless sidebar. Bijeli gap ispod (Status sustava se
   * nije protezao do bottoma) bio je vizualna katastrofa. min-height:
   * 100vh + flex-1 na bottom slot tako da pozadina pokriva sav prostor. */
  min-height: 100vh !important;
  /* Liquid Glass na deep-emerald: tanak svjetlosni naglasak (linear
   * gradient + subtle inner highlight + saturate blur) koji daje
   * "frosted premium" feel bez gubljenja brand zelene. */
  background:
    linear-gradient(180deg,
      rgba(15, 100, 68, 0.95) 0%,
      rgba(10, 80, 54, 0.97) 60%,
      rgba(8, 70, 48, 0.98) 100%),
    linear-gradient(135deg,
      rgba(159, 245, 205, 0.06) 0%,
      transparent 40%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset -1px 0 0 rgba(0, 0, 0, 0.12) !important;
}
/* Stage 3.8e (2026-05-23) FIX — Daniel screenshot: "Radni prostor
 * klijenta" prikazivao se s CRNIM tekstom na zelenom sidebaru. Root
 * cause: Stage 3.8b je konvertirao top sidebar nav <a> elemente u
 * <button> radi URL preview suppression. Postojeći color override
 * iznad ciljao je `nav > a`, ne `nav > button` — buttonima padao
 * default tamno-zeleni `color: #1a3326` iz dark-on-dark cascade-a.
 * Fix: dodano `> nav > button` u sve selektore tako da i konverzijski
 * buttoni nasljeđuju bijeli tekst i icon-stroke. */
[data-theme="light"] .portal-sidebar .ph-link,
[data-theme="white"]  .portal-sidebar .ph-link,
[data-theme="light"] .portal-sidebar > nav > a,
[data-theme="white"]  .portal-sidebar > nav > a,
[data-theme="light"] .portal-sidebar > nav > button,
[data-theme="white"]  .portal-sidebar > nav > button,
[data-theme="light"] .portal-sidebar > nav > button.nav-link-btn,
[data-theme="white"]  .portal-sidebar > nav > button.nav-link-btn {
  color: rgba(255, 255, 255, 0.96) !important;
}
[data-theme="light"] .portal-sidebar .ph-link svg,
[data-theme="white"]  .portal-sidebar .ph-link svg,
[data-theme="light"] .portal-sidebar > nav > a svg,
[data-theme="white"]  .portal-sidebar > nav > a svg,
[data-theme="light"] .portal-sidebar > nav > button svg,
[data-theme="white"]  .portal-sidebar > nav > button svg,
[data-theme="light"] .portal-nav .nav-ico,
[data-theme="white"]  .portal-nav .nav-ico {
  color: rgba(255, 255, 255, 0.96) !important;
  stroke: rgba(255, 255, 255, 0.96) !important;
  opacity: 0.92;
}
[data-theme="light"] .portal-sidebar > nav > a.active,
[data-theme="white"]  .portal-sidebar > nav > a.active,
[data-theme="light"] .portal-sidebar > nav > button.active,
[data-theme="white"]  .portal-sidebar > nav > button.active,
[data-theme="light"] .portal-sidebar .ph-link.active,
[data-theme="white"]  .portal-sidebar .ph-link.active {
  background: rgba(159, 245, 205, 0.22) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px rgba(159, 245, 205, 0.34) !important;
}
[data-theme="light"] .portal-sidebar .ph-link-firm,
[data-theme="white"]  .portal-sidebar .ph-link-firm {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* ── (B) Status sustava block — readable on green ─────────────────── */
[data-theme="light"] .portal-status,
[data-theme="white"]  .portal-status {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] .portal-status-title,
[data-theme="white"]  .portal-status-title {
  color: #FFFFFF !important;
}
[data-theme="light"] .portal-status-line,
[data-theme="white"]  .portal-status-line {
  color: rgba(255, 255, 255, 0.92) !important;
}
[data-theme="light"] .portal-status-line .status-line-label,
[data-theme="white"]  .portal-status-line .status-line-label {
  color: rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] .portal-status-line .status-line-value.ok,
[data-theme="white"]  .portal-status-line .status-line-value.ok {
  color: var(--aco-green-light, #9FF5CD) !important;
}
[data-theme="light"] .portal-status-line .status-dot.ok,
[data-theme="white"]  .portal-status-line .status-dot.ok {
  background: var(--aco-green-light, #9FF5CD) !important;
  box-shadow: 0 0 10px rgba(159, 245, 205, 0.55) !important;
}
[data-theme="light"] .portal-status-line.muted,
[data-theme="white"]  .portal-status-line.muted {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ── (C) Help + Collapse links at bottom of sidebar ──────────────── */
[data-theme="light"] .side-help,
[data-theme="white"]  .side-help,
[data-theme="light"] .side-collapse,
[data-theme="white"]  .side-collapse {
  color: rgba(255, 255, 255, 0.70) !important;
}
[data-theme="light"] .side-help:hover,
[data-theme="white"]  .side-help:hover,
[data-theme="light"] .side-collapse:hover,
[data-theme="white"]  .side-collapse:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="light"] .side-help svg,
[data-theme="white"]  .side-help svg,
[data-theme="light"] .side-collapse svg,
[data-theme="white"]  .side-collapse svg {
  color: rgba(255, 255, 255, 0.85) !important;
  stroke: rgba(255, 255, 255, 0.85) !important;
}

/* ── (D) Logo — bijela "Altoria" wordmark on green sidebar ──────── */
[data-theme="light"] .portal-sidebar .brand-logo-dark,
[data-theme="white"]  .portal-sidebar .brand-logo-dark {
  display: inline-block !important;
}
[data-theme="light"] .portal-sidebar .brand-logo-light,
[data-theme="white"]  .portal-sidebar .brand-logo-light {
  display: none !important;
}
[data-theme="light"] .portal-sidebar .portal-brand .brand-sub,
[data-theme="white"]  .portal-sidebar .portal-brand .brand-sub {
  color: rgba(255, 255, 255, 0.62) !important;
  font-weight: 600;
}
[data-theme="light"] .portal-sidebar .portal-brand img,
[data-theme="white"]  .portal-sidebar .portal-brand img {
  filter: brightness(0) invert(1);  /* Universally render any PNG/SVG
     logo asset as solid white, regardless of original color. */
}

/* ── (E) Wow-efekt boje ikona na dashboardu na bijeloj temi ─────── */
/* Daniel: "na bijeloj podlozi - pojacati boje ikona na Dashboardu za
 * sve, across the board za sva sucelja pod tom temom - stvori 'wow'
 * efekt - Predstavi Bijelu temu kao finance premium platform".
 * Pristup: KPI ikone + module-card ikone na bijeloj temi dobivaju
 * jača brand colors umjesto pale tints. Premium "Stripe Dashboard"
 * feel. */
[data-theme="light"] .kpi-icon-green,
[data-theme="white"]  .kpi-icon-green {
  background: linear-gradient(135deg, #29B87F 0%, #0C5B3C 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(41, 184, 127, 0.30) !important;
}
[data-theme="light"] .kpi-icon-blue,
[data-theme="white"]  .kpi-icon-blue {
  background: linear-gradient(135deg, #5fb7ff 0%, #2c87ff 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(44, 135, 255, 0.30) !important;
}
[data-theme="light"] .rp-card-icon,
[data-theme="white"]  .rp-card-icon {
  background: linear-gradient(135deg,
    rgba(41, 184, 127, 0.14),
    rgba(12, 91, 60, 0.06)) !important;
  border: 1px solid rgba(41, 184, 127, 0.22);
}
[data-theme="light"] .rp-card-icon svg,
[data-theme="white"]  .rp-card-icon svg {
  color: var(--aco-green-deep, #0C5B3C) !important;
  stroke: var(--aco-green-deep, #0C5B3C) !important;
  opacity: 1;
}
[data-theme="light"] .rp-card:hover .rp-card-icon,
[data-theme="white"]  .rp-card:hover .rp-card-icon {
  background: linear-gradient(135deg, #29B87F 0%, #0C5B3C 100%) !important;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(41, 184, 127, 0.32);
}
[data-theme="light"] .rp-card:hover .rp-card-icon svg,
[data-theme="white"]  .rp-card:hover .rp-card-icon svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Stage 3.8b (2026-05-23) — Permanent fixes:
 *   • .nav-link-btn reset za sve <button> elemente koji nasljeđuju
 *     .ph-link / .portal-nav a / .rp-card / .portal-section-tab
 *     dizajn (button defaults moraju biti potpuno potučeni).
 *   • .acb-back AGGRESSIVE LOCK — fiksna 40x40 dimension s !important
 *     na sve ključne svojstvo da nijedan kasniji legacy override ne
 *     može vratiti oval / vertical pill shape Daniel je vidio.
 *   • Sidebar bottom PERMANENT — koristimo grid-template-rows na
 *     .portal-nav + .portal-sidebar-bottom tako da bottom slot uvijek
 *     ima minimum visine + dodatak za "endless" fill da prekrije do
 *     bottoma viewporta.
 * ════════════════════════════════════════════════════════════════════ */

/* — Button-as-link reset (Stage 3.8b URL preview fix) — */
.nav-link-btn,
button.portal-section-tab,
button.rp-card,
button.ph-link {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
  color: inherit;
  text-decoration: none;
  padding: 0;
}
.nav-link-btn:focus-visible {
  outline: 2px solid var(--aco-green, #84d8b8);
  outline-offset: 2px;
  border-radius: 4px;
}
/* `.portal-nav button` mora dobiti istu padding/gap shape kao `.portal-nav a`
 * — base .portal-nav a rule postavlja padding + gap; ovo cilja button
 * varijantu eksplicitno tako da inherited rules ne zalutaju. */
.portal-nav button.nav-link-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ar-md, 10px);
  margin: 2px 0;
  color: var(--aco-text);
  font-weight: 500;
  transition: all var(--transition-fast, 0.15s);
}
.portal-nav button.nav-link-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--aco-text);
}
.portal-nav button.nav-link-btn.active {
  font-weight: 600;
  background: linear-gradient(90deg,
                rgba(41, 184, 127, 0.18),
                rgba(41, 184, 127, 0.02));
  border-left: 2px solid var(--aco-green);
  padding-left: 10px;
}
/* Stage 3.8c (2026-05-23) URGENT FIX — Daniel: nav linkovi su prikazani
 * kao OGROMNE kartice s nereistim ikonama jer postojeći selector
 * `.portal-nav a .nav-ico` (line 2878) cilja samo <a> djecu, ne
 * <button>-ova. Stage 3.8b konverzija u <button> je razbila icon
 * sizing → SVG-ovi rastegnuti na browser default (300x150).
 *
 * Trajni fix: NOVI universal selector `.portal-nav .nav-ico` koji
 * pokriva i <a> i <button> nasljedovanje. Stari `.portal-nav a
 * .nav-ico` ostaje (parametarska protection). Plus explicit override
 * za .ph-link-label, .ph-link-firm tipografiju tako da Pregled firme
 * button izgleda identično prijašnjem anchoru. */
.portal-nav .nav-ico {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px !important;
  stroke: currentColor;
  fill: none;
  opacity: 0.78;
}
.portal-nav .active .nav-ico,
.portal-nav button.nav-link-btn.active .nav-ico {
  opacity: 1;
}
/* Pregled firme = .ph-link button. Tipografija + 2-redni label
 * (Marko vs Demo Knjigovodstvo subtitle) održati identično. */
.portal-nav button.ph-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: var(--ar-md, 10px);
}
.portal-nav button.ph-link .ph-link-label {
  display: flex; flex-direction: column; min-width: 0;
  line-height: 1.2;
  text-align: left;
}
.portal-nav button.ph-link .ph-link-primary { font-size: inherit; }
.portal-nav button.ph-link .ph-link-firm {
  font-size: 11px; opacity: 0.7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}

/* — Natrag FAB AGGRESSIVE LOCK (Stage 3.8b permanent) — */
/* Daniel: "Natrag gumb breaka - responsivnes nije rijeseno, rijesi
 * zauvijek." Stage 3.6/3.7/3.8a nisu uhvatili sve override-e — neki
 * raniji legacy rule (npr. .acb-back generic padding/min-height/grow)
 * je vraćao oval shape. Ovaj lock garantira savršeni krug bez obzira
 * na cascade. Identično .bug-report-fab matrici, samo plavo. */
.acb-back,
button.acb-back,
a.acb-back {
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  overflow: hidden !important;
}
.acb-back:hover,
.acb-back:focus-visible,
button.acb-back:hover,
button.acb-back:focus-visible {
  /* Expansion na hover je sigurna jer override ima istu specifičnost
   * + dolazi nakon u kaskadi. Min-width 40 stays; max-width raste do
   * 200 (label fits); border-radius prelazi u pill. */
  width: auto !important;
  max-width: 200px !important;
  min-width: 40px !important;
  max-height: 44px !important;
  padding: 8px 16px 8px 12px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
}

/* — Sidebar bottom PERMANENT (Stage 3.8e finalised) — Daniel:
 * "Donja granica sidebar-a nije rjesena - rijesi permanentno".
 *
 * Stage 3.8e finalna implementacija: sidebar je `position: fixed`
 * (gore u .portal-sidebar block). Top:0 + bottom:0 garantira full
 * viewport coverage neovisno o grid row/main content visini. Ovaj
 * blok ostaje za belt-and-braces flex layout unutar fixed kontejnera. */
aside.portal-sidebar {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}
aside.portal-sidebar > nav.portal-nav {
  flex: 0 0 auto;
}
aside.portal-sidebar > .portal-sidebar-bottom {
  margin-top: auto !important;
  flex: 0 0 auto;
}
/* Filler ::after element zauzima sav slobodan prostor između nav i
 * bottom slot-a tako da Status sustava block lijepi se na dno. */
aside.portal-sidebar > nav.portal-nav::after {
  content: "";
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}
/* Stage 3.8g (2026-05-23) — Daniel: "Veliki Gap. Odljepljeno -
 * popraviti taj dio". Korijenski uzrok: `min-height: 100vh /
 * 100dvh` na .portal-main je rastezao main na PUNI viewport. Kad
 * sadržaj kraći od viewporta (operator dashboard s ograničenim
 * KPI tiles + bannerima), empty flex space ispod sadržaja je
 * pokazivao body bg → vizualno "odljepljeno" / "veliki gap" između
 * zadnjeg sadržaja i FAB-ova / dna stranice.
 *
 * Fix: uklonjeno min-height — main sad raste samo do sadržaja
 * (auto height). Body bg fills rest of viewport — što je očekivano
 * behavior, ne "gap". FAB clearance ostaje kao padding-bottom.
 * Sidebar (position: fixed s top:0+bottom:0) je neovisan i
 * nepromijenjen. */
.portal-main {
  padding-bottom: 80px !important;
}

/* Altoria native select polish — production guardrail 2026-05-30.
 * Keep real <select> controls for reliability, but make every dashboard
 * dropdown share the same dark premium surface as the approved Altoria
 * menu design. Browser/OS opened menus remain native; option colors are
 * provided where the engine allows styling. */
select:not([multiple]) {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  color-scheme: dark;
  min-height: 38px;
  border-radius: 18px !important;
  border: 1px solid rgba(159, 245, 205, 0.24) !important;
  background-color: rgba(4, 15, 11, 0.92) !important;
  color: rgba(236, 244, 240, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 38px rgba(0, 0, 0, 0.28) !important;
  font-weight: 600;
}
select:not([multiple]):focus,
select:not([multiple]):focus-visible {
  outline: 0;
  border-color: rgba(159, 245, 205, 0.58) !important;
  box-shadow:
    0 0 0 4px rgba(41, 184, 127, 0.14),
    0 18px 48px rgba(0, 0, 0, 0.36) !important;
}
select option,
select optgroup {
  background: #07130f;
  color: rgba(236, 244, 240, 0.96);
}
select option:checked {
  background: #245bbd;
  color: #fff;
}

[data-theme="white"] select:not([multiple]),
[data-theme="light"] select:not([multiple]) {
  color-scheme: dark;
  background-color: rgba(4, 15, 11, 0.92) !important;
  color: rgba(236, 244, 240, 0.96) !important;
  border-color: rgba(15, 82, 54, 0.30) !important;
}

/* Altoria browser-neutral select skin — cosmetic-only layer.
 * Native <select> controls stay in the form; this skin exists so Chrome,
 * Safari, Firefox and Edge share the same dark dropdown visual language. */
.altoria-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.altoria-select-native {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.altoria-select-button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 34px 8px 14px;
  border: 1px solid rgba(159, 245, 205, 0.26);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(11, 31, 23, 0.96), rgba(4, 15, 11, 0.94));
  color: rgba(236, 244, 240, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 38px rgba(0, 0, 0, 0.28);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}
.altoria-select-button:hover,
.altoria-select[data-open] .altoria-select-button {
  border-color: rgba(159, 245, 205, 0.52);
  background:
    linear-gradient(180deg, rgba(14, 40, 29, 0.98), rgba(5, 18, 13, 0.96));
}
.altoria-select-button:focus-visible {
  outline: 0;
  border-color: rgba(159, 245, 205, 0.72);
  box-shadow:
    0 0 0 4px rgba(41, 184, 127, 0.16),
    0 18px 48px rgba(0, 0, 0, 0.36);
}
.altoria-select-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.altoria-select-chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.82;
  transform: translateY(-62%) rotate(45deg);
  transition: transform 0.16s ease;
}
.altoria-select[data-open] .altoria-select-chevron {
  transform: translateY(-32%) rotate(225deg);
}
.altoria-select[data-disabled] .altoria-select-button {
  opacity: 0.58;
  cursor: not-allowed;
}
.registry-table .altoria-select {
  min-width: 128px;
  margin-bottom: 6px;
}
.registry-table .altoria-select-button {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 12px;
}
.altoria-select-menu {
  position: fixed;
  z-index: 50000;
  max-height: min(360px, calc(100vh - 24px));
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(159, 245, 205, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(7, 20, 15, 0.98), rgba(3, 12, 8, 0.98));
  color: rgba(236, 244, 240, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 26px 70px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color-scheme: dark;
}
.altoria-select-menu::-webkit-scrollbar {
  width: 9px;
}
.altoria-select-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}
.altoria-select-menu::-webkit-scrollbar-thumb {
  background: rgba(159, 245, 205, 0.24);
  border-radius: 999px;
}
.altoria-select-option {
  position: relative;
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(236, 244, 240, 0.94);
  padding: 7px 12px 7px 34px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  white-space: normal;
}
.altoria-select-option:hover,
.altoria-select-option:focus-visible {
  outline: 0;
  background: rgba(159, 245, 205, 0.10);
}
.altoria-select-option[aria-selected="true"] {
  background: #1568d6;
  color: #fff;
}
.altoria-select-option[aria-selected="true"]::before {
  content: "\2713";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: currentColor;
  font-weight: 800;
}
.altoria-select-option:disabled {
  opacity: 0.44;
  cursor: not-allowed;
}
[data-theme="white"] .altoria-select-button,
[data-theme="light"] .altoria-select-button {
  border-color: rgba(15, 82, 54, 0.30);
  background:
    linear-gradient(180deg, rgba(8, 26, 18, 0.96), rgba(4, 15, 11, 0.94));
  color: rgba(236, 244, 240, 0.96);
}

/* Phase J4 — reconciliation workbench. Bank lines and open items are
 * deliberately side by side so accountants can compare statement lines
 * against invoices without jumping between screens. */
.recon-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--as-4, 20px);
  align-items: stretch;
}
.recon-pane {
  min-height: 520px;
  display: flex;
  flex-direction: column;
}
.recon-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}
.recon-bank-line,
.recon-open-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.recon-bank-line:last-child,
.recon-open-item:last-child {
  border-bottom: 0;
}
.recon-bank-line p,
.recon-open-item p {
  margin: 4px 0 0;
  font-size: 12px;
}
.recon-amount {
  font-family: var(--af-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--aco-text, rgba(255, 255, 255, 0.92));
}
.recon-amount.ok { color: var(--aco-green, #84d8b8); }
.recon-amount.out { color: #f1a7a7; }
.recon-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--as-3, 16px);
}
.recon-suggestion {
  min-width: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.recon-suggestion:first-child,
.recon-suggestion:nth-child(2) {
  border-top: 0;
}
.recon-multi {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: var(--ar-sm, 6px);
  border: 1px solid rgba(132, 216, 184, 0.22);
  background: rgba(132, 216, 184, 0.07);
  color: var(--aco-text, rgba(255, 255, 255, 0.92));
  font-size: 12px;
}

[data-theme="white"] .recon-bank-line,
[data-theme="white"] .recon-open-item,
[data-theme="white"] .recon-suggestion,
[data-theme="light"] .recon-bank-line,
[data-theme="light"] .recon-open-item,
[data-theme="light"] .recon-suggestion {
  border-color: rgba(13, 55, 38, 0.12);
}
[data-theme="white"] .recon-amount,
[data-theme="light"] .recon-amount {
  color: #0f2a44;
}
[data-theme="white"] .recon-amount.ok,
[data-theme="light"] .recon-amount.ok {
  color: #0b6b47;
}
[data-theme="white"] .recon-amount.out,
[data-theme="light"] .recon-amount.out {
  color: #9b2d2d;
}
[data-theme="white"] .recon-multi,
[data-theme="light"] .recon-multi {
  color: #0f2a44;
  background: rgba(132, 216, 184, 0.16);
  border-color: rgba(13, 55, 38, 0.18);
}

@media (max-width: 980px) {
  .recon-workbench,
  .recon-suggestion-grid {
    grid-template-columns: 1fr;
  }
  .recon-pane {
    min-height: auto;
  }
  .recon-scroll {
    max-height: none;
  }
}

/* K6F + UX polish 2026-05-31
 * Keep global utility controls compact, right-aligned and visually
 * consistent across legacy base pages and portal layouts. */
.altoria-context-band[data-acb-empty="1"] {
  right: 22px !important;
  bottom: 138px !important;
}
.altoria-context-band[data-acb-empty="1"] .acb-right {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
}

.ai-bubble {
  width: 40px !important;
  height: 40px !important;
  right: 22px !important;
  bottom: 24px !important;
  border-radius: 12px !important;
  z-index: 980 !important;
}
.ai-bubble svg {
  width: 19px !important;
  height: 19px !important;
}
.bug-report-fab {
  right: 22px !important;
  bottom: 82px !important;
  z-index: 990 !important;
}

.topbar .env .pill,
.portal-topbar-right .pill,
.portal-topbar .pill,
.portal-topbar .tb-icon-btn,
.portal-topbar .user-menu-trigger,
.portal-topbar .scope-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 32px;
  height: 32px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: rgba(132,216,184,0.38) !important;
  color: var(--aco-text, rgba(255,255,255,0.92)) !important;
  background: linear-gradient(135deg,
    rgba(132,216,184,0.16) 0%,
    rgba(132,216,184,0.07) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(132,216,184,0.04) !important;
}
.topbar .env a.pill[href="/settings"] {
  min-width: 32px;
  width: 32px;
  justify-content: center;
  text-align: center;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 32px;
  color: var(--aco-green-light, #b6efd4) !important;
  text-shadow: 0 0 10px rgba(132,216,184,0.42);
}
.portal-topbar .tb-icon-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.1;
}
[data-theme="white"] .topbar .env .pill,
[data-theme="light"] .topbar .env .pill,
[data-theme="white"] .portal-topbar-right .pill,
[data-theme="light"] .portal-topbar-right .pill,
[data-theme="white"] .portal-topbar .tb-icon-btn,
[data-theme="light"] .portal-topbar .tb-icon-btn,
[data-theme="white"] .portal-topbar .user-menu-trigger,
[data-theme="light"] .portal-topbar .user-menu-trigger,
[data-theme="white"] .portal-topbar .scope-pill,
[data-theme="light"] .portal-topbar .scope-pill {
  color: #0f5236 !important;
  background: linear-gradient(135deg,
    rgba(45,168,130,0.17) 0%,
    rgba(45,168,130,0.08) 100%) !important;
  border-color: rgba(15,82,54,0.24) !important;
}

.section-nav-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.section-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(132,216,184,0.24);
  background: rgba(132,216,184,0.07);
  color: var(--aco-text-muted, rgba(255,255,255,0.68));
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.section-nav-forward {
  color: var(--aco-green-light, #b6efd4);
}
.section-nav-btn:hover,
.section-nav-btn:focus-visible {
  color: var(--aco-text, #ffffff);
  border-color: rgba(132,216,184,0.44);
  background: rgba(132,216,184,0.13);
}

.filter-action-btn,
.cc-msg-filters button[type="submit"] {
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  aspect-ratio: auto !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  align-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 13px !important;
}

.portal-topbar .tb-icon-btn,
.portal-topbar-right .tb-icon-btn {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
}

/* 2026-05-31 K9 polish — compact top-right controls.
   Daniel's screenshot showed API/user/settings/logout controls still
   too tall. This final override keeps the same visual language but
   brings the touch targets into one quiet 28px rail. */
.topbar .env {
  gap: 8px !important;
  align-items: center !important;
}
.topbar .env .pill,
.topbar .env .lang-toggle,
.portal-topbar-right .pill,
.portal-topbar .pill,
.portal-topbar .user-menu-trigger,
.portal-topbar .scope-pill {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
.topbar .env .lang-pill {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.topbar .env a.pill[href="/settings"] {
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 28px !important;
}
.portal-topbar .tb-icon-btn,
.portal-topbar-right .tb-icon-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}
.portal-topbar .tb-icon-btn svg,
.portal-topbar-right .tb-icon-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* K9 account-picker polish — native select for reliability, but with
   accounting-office copy: code + naziv konta are visible in every line. */
.account-picker-help {
  margin-bottom: 12px;
}
.account-picker-select {
  width: 100%;
  min-width: 180px;
  max-width: 280px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(132,216,184,0.24);
  background: rgba(0,0,0,0.22);
  color: var(--aco-text, #fff);
  font: 600 12px var(--af-mono, ui-monospace, monospace);
}
.account-picker-select:focus {
  outline: none;
  border-color: rgba(132,216,184,0.62);
  box-shadow: 0 0 0 3px rgba(132,216,184,0.12);
}
[data-theme="white"] .account-picker-select,
[data-theme="light"] .account-picker-select {
  background: rgba(255,255,255,0.9);
  color: #0c1a14;
  border-color: rgba(15,82,54,0.22);
}

/* K13.10 cosmetic polish — keep the centrala profile thumb as one
   coherent pill. Earlier compact topbar rules forced the trigger to
   28px tall while avatar rings still rendered larger, which made the
   profile image hang over the left edge in some browsers. */
.portal-topbar details.user-menu > .user-menu-trigger {
  align-items: center !important;
  gap: 10px !important;
  height: 46px !important;
  justify-content: flex-start !important;
  min-height: 46px !important;
  overflow: visible;
  padding: 4px 13px 4px 6px !important;
}
.portal-topbar .user-menu-trigger .user-menu-avatar {
  align-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  display: inline-flex !important;
  flex: 0 0 36px !important;
  height: 36px !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  width: 36px !important;
}
.portal-topbar .user-menu-trigger .user-avatar,
.portal-topbar .user-menu-trigger .user-menu-avatar-inner {
  height: 34px !important;
  margin: 0 !important;
  min-height: 34px !important;
  min-width: 34px !important;
  transform: none !important;
  width: 34px !important;
}
.portal-topbar .user-menu-trigger .user-avatar:hover {
  transform: none !important;
}
.portal-topbar .user-menu-trigger .user-menu-meta {
  align-items: flex-start !important;
  line-height: 1.08 !important;
  min-width: 0;
}
.portal-topbar .user-menu-trigger .user-menu-name,
.portal-topbar .user-menu-trigger .user-menu-role {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-topbar .user-menu-trigger .user-menu-chevron {
  margin-left: 2px;
}

@media (max-width: 760px) {
  .portal-topbar details.user-menu > .user-menu-trigger {
    height: 42px !important;
    min-height: 42px !important;
    padding-right: 10px !important;
  }
  .portal-topbar .user-menu-trigger .user-menu-avatar {
    flex-basis: 34px !important;
    height: 34px !important;
    width: 34px !important;
  }
  .portal-topbar .user-menu-trigger .user-avatar,
  .portal-topbar .user-menu-trigger .user-menu-avatar-inner {
    height: 32px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    width: 32px !important;
  }
}

/* K13.11 cosmetic polish — tooltip/menu layering + compact dashboard
   surfaces. Visual-only: no route, POST, scope or accounting behavior. */
.altoria-scrollpane {
  color-scheme: dark;
  overscroll-behavior: contain;
  scrollbar-color: rgba(159, 245, 205, 0.46) rgba(3, 12, 8, 0.76);
  scrollbar-width: thin;
}
.altoria-scrollpane::-webkit-scrollbar {
  width: 10px;
}
.altoria-scrollpane::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(3, 12, 8, 0.86), rgba(8, 22, 16, 0.70));
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(159, 245, 205, 0.06);
}
.altoria-scrollpane::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(159, 245, 205, 0.48), rgba(69, 170, 127, 0.34));
  border: 2px solid rgba(3, 12, 8, 0.88);
  border-radius: 999px;
  min-height: 44px;
}
.altoria-scrollpane::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(183, 244, 216, 0.68), rgba(85, 196, 148, 0.50));
}
.portal-body .scope-switcher[open] .scope-dropdown,
.portal-body .user-menu[open] .user-menu-dropdown,
.portal-body .sidebar-scope[open] .sidebar-scope-menu {
  background:
    linear-gradient(180deg, rgba(7, 20, 15, 0.98), rgba(3, 12, 8, 0.98)) !important;
  border-color: rgba(159, 245, 205, 0.24) !important;
}
.portal-body .scope-switcher[open] .scope-dropdown,
.portal-body .sidebar-scope[open] .sidebar-scope-menu {
  max-height: min(72vh, 640px) !important;
  overflow-y: auto !important;
  padding-right: 12px;
}
.portal-body .workspace-banner {
  gap: 14px;
  margin-bottom: 14px;
  padding: 11px 16px;
}
.portal-body .workspace-banner-title {
  font-size: 16px;
}
.portal-body .workspace-banner-subtitle {
  font-size: 12.5px;
  line-height: 1.35;
  margin-top: 2px;
}
.portal-body .workspace-banner-actions .btn,
.portal-body .workspace-boundary-actions .btn,
.portal-body .rp-hero-actions .btn,
.portal-body .ccb-actions .ccb-action {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 36px;
  padding: 7px 14px;
}
.portal-body .workspace-boundary-card {
  padding: clamp(18px, 2.5vw, 30px);
}
.portal-body .operator-role-card {
  gap: 8px;
  min-height: 0;
  padding: 14px 16px;
}
.portal-body .operator-role-card strong {
  font-size: 16px;
}
.portal-body .operator-role-card p {
  font-size: 12.5px;
  line-height: 1.35;
}
.portal-body .dash-kpi {
  min-height: 118px;
  padding: 16px;
}
.portal-body .dash-kpi-icon {
  height: 34px;
  margin-bottom: 2px;
  width: 34px;
}
.portal-body .dash-kpi-value {
  font-size: 28px;
}
.portal-body .dash-card {
  margin-bottom: 14px;
  padding: 16px;
}
.portal-body .dash-card-head {
  margin-bottom: 12px;
}
.portal-body .rp-hero {
  gap: 18px;
  margin-bottom: 16px;
  padding: 20px 24px;
}
.portal-body .rp-client-name {
  font-size: clamp(24px, 2.2vw, 28px);
}
.portal-body .rp-intro {
  margin-bottom: 18px;
}
.portal-body .rp-grid {
  gap: 12px;
}
.portal-body button.rp-card,
.portal-body a.rp-card {
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 13px 15px;
}
.portal-body .rp-card-icon {
  border-radius: 9px;
  height: 34px;
  width: 34px;
}
.portal-body .rp-card-icon svg {
  height: 18px;
  width: 18px;
}
.portal-body .rp-card-title {
  font-size: 14px;
  margin-bottom: 2px;
}
.portal-body .rp-card-sub {
  font-size: 11.8px;
  line-height: 1.3;
}
.portal-body .current-client-banner {
  gap: 12px;
  margin-bottom: 14px;
  padding: 11px 18px;
}
.portal-body .ccb-icon {
  height: 38px;
  width: 38px;
}
.portal-body .ccb-name {
  font-size: clamp(17px, 1.8vw, 22px);
}

@media (max-width: 760px) {
  .portal-body .workspace-banner,
  .portal-body .current-client-banner,
  .portal-body .rp-hero {
    padding: 12px 14px;
  }
  .portal-body button.rp-card,
  .portal-body a.rp-card {
    min-height: 68px;
  }
}

/* K13.14 cosmetic polish — Partner copy + white-theme control contrast.
   Visual-only: no route, POST, scope, accounting or engine behavior. */
.lang-toggle {
  align-items: center !important;
  box-sizing: border-box;
  display: inline-grid !important;
  grid-auto-flow: column;
  gap: 2px !important;
  justify-content: center;
  line-height: 1 !important;
  min-height: 34px !important;
  overflow: hidden;
  padding: 3px !important;
}
.lang-pill {
  align-items: center !important;
  box-sizing: border-box;
  display: inline-flex !important;
  height: 28px !important;
  justify-content: center;
  line-height: 1 !important;
  min-height: 28px !important;
  min-width: 36px;
  padding: 0 10px !important;
}
.portal-topbar .lang-toggle,
.portal-topbar-right .lang-toggle,
.topbar .env .lang-toggle {
  height: 34px !important;
  min-height: 34px !important;
}
.portal-topbar .lang-pill,
.portal-topbar-right .lang-pill,
.topbar .env .lang-pill {
  height: 28px !important;
  min-height: 28px !important;
}

[data-theme="white"] .lang-toggle,
[data-theme="light"] .lang-toggle {
  background: rgba(255, 255, 255, 0.84) !important;
  border: 1px solid rgba(15, 82, 54, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 8px 22px rgba(15, 82, 54, 0.07) !important;
}
[data-theme="white"] .lang-pill,
[data-theme="light"] .lang-pill {
  color: rgba(15, 82, 54, 0.72) !important;
  background: transparent !important;
}
[data-theme="white"] .lang-pill.active,
[data-theme="light"] .lang-pill.active {
  background: linear-gradient(135deg, #42b986 0%, #18895d 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 5px 14px rgba(24, 137, 93, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  transform: none !important;
}

[data-theme="white"] .topbar .env a.pill[href="/settings"],
[data-theme="light"] .topbar .env a.pill[href="/settings"] {
  align-items: center !important;
  background: linear-gradient(135deg, #d8f2e6 0%, #b4e3cc 100%) !important;
  border-color: rgba(15, 82, 54, 0.34) !important;
  box-shadow:
    0 8px 20px rgba(15, 82, 54, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  color: #0b5d3e !important;
  display: inline-flex !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  height: 36px !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  text-shadow: none !important;
  width: 36px !important;
}
[data-theme="white"] .user-menu-item .icon-settings,
[data-theme="light"] .user-menu-item .icon-settings,
[data-theme="white"] .user-menu-item[href="/settings"],
[data-theme="light"] .user-menu-item[href="/settings"] {
  color: #0b5d3e !important;
}
[data-theme="white"] .user-menu-item .icon-settings,
[data-theme="light"] .user-menu-item .icon-settings {
  background: linear-gradient(135deg, rgba(24, 137, 93, 0.16), rgba(24, 137, 93, 0.08)) !important;
  box-shadow: 0 0 0 1px rgba(15, 82, 54, 0.16) inset !important;
  font-size: 18px !important;
}

[data-theme="white"] .dash-hero-glass-mark,
[data-theme="light"] .dash-hero-glass-mark,
[data-theme="white"] .empty-state-icon,
[data-theme="light"] .empty-state-icon {
  background: linear-gradient(135deg, #d8f2e6 0%, #b4e3cc 100%) !important;
  border-color: rgba(15, 82, 54, 0.32) !important;
  box-shadow:
    0 12px 26px rgba(15, 82, 54, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 0 0 1px rgba(24, 137, 93, 0.08) !important;
}
[data-theme="white"] .dash-hero-glass-mark svg,
[data-theme="light"] .dash-hero-glass-mark svg,
[data-theme="white"] .empty-state-icon svg,
[data-theme="light"] .empty-state-icon svg {
  color: #0b5d3e !important;
  filter: drop-shadow(0 3px 8px rgba(15, 82, 54, 0.22)) !important;
  opacity: 1 !important;
}
[data-theme="white"] .dash-hero-glass-mark svg *,
[data-theme="light"] .dash-hero-glass-mark svg * {
  stroke: #0b5d3e !important;
}
[data-theme="white"] .dash-hero-glass-mark svg rect,
[data-theme="light"] .dash-hero-glass-mark svg rect {
  fill: rgba(24, 137, 93, 0.09) !important;
}

[data-theme="white"] .card .value.mint,
[data-theme="light"] .card .value.mint,
[data-theme="white"] .card .value.green,
[data-theme="light"] .card .value.green,
[data-theme="white"] .report-tile .value.mint,
[data-theme="light"] .report-tile .value.mint,
[data-theme="white"] .report-tile .value.green,
[data-theme="light"] .report-tile .value.green {
  color: #12845a !important;
  -webkit-text-fill-color: #12845a !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * K13.37 — Boutique Zagreb login revamp
 *
 * Frontend-only authentication surface polish. Preserves the existing
 * /login POST mechanics, field names and hidden `next` field.
 * ════════════════════════════════════════════════════════════════════ */

.login-shell {
  --login-card-radius: 34px;
  --login-emerald: #37f0b0;
  --login-emerald-soft: rgba(55, 240, 176, 0.26);
  --login-gold: rgba(255, 204, 132, 0.76);
  --login-ink: #f7fff9;
  align-items: center !important;
  background:
    linear-gradient(115deg,
      rgba(6, 17, 18, 0.72) 0%,
      rgba(6, 20, 24, 0.34) 35%,
      rgba(7, 18, 24, 0.20) 56%,
      rgba(5, 11, 15, 0.72) 100%),
    radial-gradient(circle at 16% 48%,
      rgba(255, 184, 96, 0.26) 0%,
      rgba(255, 184, 96, 0.05) 25%,
      transparent 43%),
    radial-gradient(circle at 78% 66%,
      rgba(55, 240, 176, 0.22) 0%,
      rgba(55, 240, 176, 0.08) 24%,
      transparent 48%),
    var(--login-bg-image) center / cover no-repeat !important;
  display: grid !important;
  justify-items: center !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  padding: clamp(20px, 4vw, 48px) !important;
  perspective: 1400px;
}

.login-shell::before {
  background:
    linear-gradient(180deg,
      rgba(2, 10, 13, 0.08) 0%,
      rgba(2, 10, 13, 0.30) 48%,
      rgba(1, 7, 9, 0.72) 100%),
    radial-gradient(ellipse 74% 58% at 50% 52%,
      transparent 0%,
      rgba(0, 0, 0, 0.08) 54%,
      rgba(0, 0, 0, 0.42) 100%) !important;
  opacity: 1 !important;
}

.login-shell::after {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.22),
      transparent 24%,
      transparent 72%,
      rgba(0, 0, 0, 0.30)),
    radial-gradient(circle at 50% 51%,
      rgba(55, 240, 176, 0.10) 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.48) 100%) !important;
  opacity: 1 !important;
}

.login-starfield,
.login-aurora,
.login-orbit {
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.login-starfield {
  inset: 0;
  background-image:
    radial-gradient(circle at 62% 10%, rgba(255, 255, 255, 0.80) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 18%, rgba(255, 225, 174, 0.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 11%, rgba(180, 255, 232, 0.66) 0 1px, transparent 1.4px),
    radial-gradient(circle at 91% 28%, rgba(255, 255, 255, 0.54) 0 1px, transparent 1.4px),
    radial-gradient(circle at 52% 22%, rgba(255, 255, 255, 0.40) 0 1px, transparent 1.3px);
  opacity: 0.60;
  animation: login-star-breathe 12s ease-in-out infinite alternate;
}

.login-aurora-left {
  width: min(46vw, 620px);
  height: min(46vw, 620px);
  left: -14vw;
  top: -6vw;
  background:
    radial-gradient(circle,
      rgba(255, 186, 101, 0.22) 0%,
      rgba(255, 186, 101, 0.09) 31%,
      transparent 68%);
  filter: blur(2px);
  opacity: 0.74;
}

.login-aurora-right {
  width: min(55vw, 760px);
  height: min(55vw, 760px);
  right: -18vw;
  bottom: -16vw;
  background:
    radial-gradient(circle,
      rgba(55, 240, 176, 0.26) 0%,
      rgba(43, 205, 255, 0.08) 36%,
      transparent 70%);
  opacity: 0.72;
}

.login-orbit {
  border: 1px solid rgba(55, 240, 176, 0.48);
  border-radius: 50%;
  box-shadow:
    0 0 32px rgba(55, 240, 176, 0.30),
    inset 0 0 24px rgba(55, 240, 176, 0.12);
  opacity: 0.52;
  transform: rotate(-12deg);
}

.login-orbit-one {
  bottom: -31vh;
  height: 56vh;
  left: -12vw;
  width: 124vw;
}

.login-orbit-two {
  height: 68vh;
  right: -62vw;
  top: -20vh;
  transform: rotate(24deg);
  width: 112vw;
}

.login-glass {
  animation: login-card-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  background:
    linear-gradient(145deg,
      rgba(255, 222, 164, 0.15) 0%,
      rgba(29, 54, 52, 0.62) 24%,
      rgba(8, 31, 35, 0.76) 66%,
      rgba(22, 65, 57, 0.58) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: var(--login-card-radius) !important;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(55, 240, 176, 0.14),
    0 0 72px rgba(55, 240, 176, 0.16),
    -22px 18px 58px rgba(255, 183, 92, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
  color: var(--login-ink) !important;
  inline-size: clamp(360px, 38vw, 560px) !important;
  max-inline-size: calc(100vw - 32px) !important;
  overflow: hidden !important;
  padding: clamp(32px, 4vw, 54px) clamp(28px, 4vw, 46px) clamp(28px, 3.2vw, 38px) !important;
  transform-style: preserve-3d;
}

.login-glass::before {
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.08) 20%,
      transparent 42%),
    radial-gradient(circle at 18% 18%,
      rgba(255, 215, 150, 0.24) 0%,
      transparent 34%),
    radial-gradient(circle at 86% 90%,
      rgba(55, 240, 176, 0.22) 0%,
      transparent 42%) !important;
  border-radius: inherit !important;
  z-index: 1 !important;
}

.login-stage .login-glass::after {
  background:
    linear-gradient(135deg,
      rgba(255, 216, 150, 0.62),
      rgba(255, 255, 255, 0.12) 22%,
      rgba(55, 240, 176, 0.60) 78%,
      rgba(43, 205, 255, 0.42)) border-box !important;
  border: 1px solid transparent;
  border-radius: inherit;
  content: "" !important;
  display: block !important;
  inset: 0;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  opacity: 0.88;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.login-glass > * {
  position: relative;
  z-index: 2;
}

.login-language {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  position: absolute !important;
  right: clamp(24px, 3vw, 34px);
  top: clamp(22px, 3vw, 32px);
}

.login-lang-pill {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

.login-lang-pill + .login-lang-pill {
  border-left: 1px solid rgba(255, 255, 255, 0.34);
  padding-left: 10px;
}

.login-lang-pill.active {
  color: #37f0b0;
  text-shadow: 0 0 18px rgba(55, 240, 176, 0.42);
}

.login-lang-pill:hover {
  color: #ffffff;
}

.login-stage .login-brand {
  align-items: center !important;
  display: flex !important;
  gap: 12px;
  justify-content: center;
  margin: 0 0 clamp(28px, 4vw, 38px) !important;
}

.login-stage .login-brand-mark {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(55, 240, 176, 0.24) 48%,
      rgba(12, 102, 83, 0.52) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 20px !important;
  box-shadow:
    0 14px 34px rgba(55, 240, 176, 0.24),
    0 0 0 1px rgba(55, 240, 176, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
  height: 58px !important;
  margin: 0 !important;
  width: 58px !important;
}

.login-brand-mark img {
  filter:
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 12px rgba(55, 240, 176, 0.40));
  height: 38px !important;
  position: relative;
  width: 38px !important;
  z-index: 2;
}

.login-wordmark {
  color: #ffffff;
  font-size: clamp(30px, 2.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.04em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.42);
}

.login-title {
  color: #fff8ef !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(42px, 4.1vw, 62px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.98 !important;
  margin: 0 0 14px !important;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.10),
    0 14px 38px rgba(0, 0, 0, 0.60) !important;
}

.login-subtitle {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(15px, 1.05vw, 17px) !important;
  letter-spacing: 0.01em;
  margin: 0 auto clamp(24px, 3vw, 34px) !important;
  max-inline-size: 34ch;
  text-align: center;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.44) !important;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-sr-only {
  block-size: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.login-field {
  margin: 0 !important;
  position: relative;
}

.login-field input {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.07)) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 520 !important;
  height: 62px !important;
  letter-spacing: 0.01em;
  padding: 0 56px !important;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

.login-field input::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

.login-field input:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
}

.login-field input:focus {
  background: rgba(255, 255, 255, 0.17) !important;
  border-color: rgba(55, 240, 176, 0.84) !important;
  box-shadow:
    0 0 0 4px rgba(55, 240, 176, 0.14),
    0 16px 34px rgba(16, 194, 139, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  box-shadow:
    0 0 0 1000px rgba(14, 44, 42, 0.78) inset,
    0 0 0 4px rgba(55, 240, 176, 0.12) !important;
  caret-color: #ffffff;
}

.login-field-icon {
  align-items: center;
  color: rgba(255, 255, 255, 0.70) !important;
  display: inline-flex;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.login-field-icon.left {
  left: 18px !important;
  right: auto !important;
}

.login-field-icon.right {
  left: auto !important;
  right: 18px !important;
}

.login-password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.70);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  width: 40px;
  z-index: 4;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
  background: rgba(55, 240, 176, 0.12);
  box-shadow: 0 0 0 3px rgba(55, 240, 176, 0.16);
  color: #b8ffe7;
  outline: none;
}

.login-password-toggle .login-eye-closed {
  display: none;
}

.login-password-toggle[aria-pressed="true"] .login-eye-open {
  display: none;
}

.login-password-toggle[aria-pressed="true"] .login-eye-closed {
  display: block;
}

.login-submit {
  align-items: center !important;
  background:
    linear-gradient(135deg,
      #94ffc9 0%,
      #22e3a1 34%,
      #04bb93 72%,
      #19e9d0 100%) !important;
  border: 1px solid rgba(211, 255, 235, 0.56) !important;
  border-radius: 18px !important;
  box-shadow:
    0 20px 46px rgba(2, 224, 164, 0.28),
    0 0 34px rgba(55, 240, 176, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(1, 88, 70, 0.30) !important;
  color: #05251d !important;
  display: flex !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  height: 62px !important;
  justify-content: center !important;
  letter-spacing: 0.24em !important;
  margin-top: 10px !important;
  min-height: 62px !important;
  padding: 0 56px !important;
  position: relative;
  text-transform: uppercase;
}

.login-submit span:first-child {
  transform: translateX(10px);
}

.login-submit-arrow {
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-52%);
  transition: transform 0.18s ease;
}

.login-submit:hover .login-submit-arrow {
  transform: translate(5px, -52%);
}

.login-submit::after {
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.50) 48%,
    transparent 100%) !important;
  opacity: 0.78;
}

.login-error {
  background:
    linear-gradient(135deg,
      rgba(255, 111, 125, 0.24),
      rgba(123, 22, 35, 0.18)) !important;
  border: 1px solid rgba(255, 162, 171, 0.54) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.22) !important;
  color: #ffe8eb !important;
  margin: 0 0 18px !important;
}

.login-help {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px !important;
  line-height: 1.55;
  margin: 22px auto 0 !important;
  max-inline-size: 34ch;
  text-align: center;
}

.login-trust {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 28px;
  padding-top: 24px;
}

.login-trust-icon {
  align-items: center;
  border: 1px solid rgba(184, 255, 231, 0.38);
  border-radius: 16px;
  color: #b8ffe7;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  width: 46px;
  background: rgba(55, 240, 176, 0.08);
  box-shadow:
    0 0 22px rgba(55, 240, 176, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.login-trust strong,
.login-trust small {
  display: block;
}

.login-trust strong {
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 750;
}

.login-trust small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.35;
  margin-top: 3px;
}

@keyframes login-card-arrive {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes login-star-breathe {
  from { opacity: 0.38; }
  to { opacity: 0.72; }
}

@media (max-width: 640px) {
  .login-shell {
    padding: 18px !important;
  }

  .login-glass {
    border-radius: 28px !important;
    inline-size: min(100%, 430px) !important;
    padding: 30px 22px 24px !important;
  }

  .login-language {
    right: 24px;
    top: 24px;
  }

  .login-brand {
    margin-top: 14px !important;
  }

  .login-brand-mark {
    height: 50px !important;
    width: 50px !important;
  }

  .login-brand-mark img {
    height: 32px !important;
    width: 32px !important;
  }

  .login-wordmark {
    font-size: 30px;
  }

  .login-title {
    font-size: clamp(38px, 12vw, 48px) !important;
  }

  .login-field input,
  .login-submit {
    height: 58px !important;
    min-height: 58px !important;
  }

  .login-orbit-one {
    left: -42vw;
    width: 170vw;
  }
}

@media (max-height: 740px) {
  .login-shell {
    align-items: start !important;
    overflow-y: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-glass,
  .login-starfield,
  .login-brand-mark::before,
  .login-submit::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * K13.38 — Reference-faithful Zagreb login correction
 *
 * Tightens K13.37 into the attached boutique login target: layered
 * floating glass, stronger cinematic city treatment and a calmer
 * enterprise-security composition. Frontend-only; auth mechanics stay
 * in the existing form.
 * ════════════════════════════════════════════════════════════════════ */

.login-shell {
  --login-card-radius: 36px;
  --login-card-width: clamp(410px, 42vw, 575px);
  --login-emerald: #36f3b6;
  --login-cyan: #4ff7ff;
  --login-gold: rgba(255, 205, 132, 0.82);
  background:
    radial-gradient(circle at 14% 54%,
      rgba(255, 169, 70, 0.30) 0%,
      rgba(255, 169, 70, 0.10) 20%,
      transparent 42%),
    radial-gradient(circle at 76% 64%,
      rgba(54, 243, 182, 0.26) 0%,
      rgba(54, 243, 182, 0.10) 22%,
      transparent 48%),
    linear-gradient(118deg,
      rgba(2, 9, 14, 0.52) 0%,
      rgba(3, 14, 19, 0.36) 33%,
      rgba(4, 18, 25, 0.34) 58%,
      rgba(2, 8, 12, 0.70) 100%),
    var(--login-bg-image) center / cover no-repeat !important;
  min-height: 100dvh !important;
  padding: clamp(18px, 3.8vw, 48px) !important;
  place-items: center !important;
}

.login-shell::before {
  background:
    linear-gradient(180deg,
      rgba(2, 9, 13, 0.20) 0%,
      rgba(2, 9, 13, 0.18) 34%,
      rgba(2, 9, 13, 0.74) 100%),
    linear-gradient(90deg,
      rgba(2, 9, 13, 0.34) 0%,
      transparent 28%,
      transparent 68%,
      rgba(2, 9, 13, 0.38) 100%),
    radial-gradient(ellipse at 50% 53%,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.28) 74%,
      rgba(0, 0, 0, 0.58) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  position: absolute !important;
  z-index: 0 !important;
}

.login-shell::after {
  background:
    radial-gradient(ellipse 62% 52% at 50% 50%,
      rgba(54, 243, 182, 0.12) 0%,
      rgba(54, 243, 182, 0.04) 44%,
      transparent 72%),
    radial-gradient(circle at 35% 42%,
      rgba(255, 220, 160, 0.12) 0%,
      transparent 36%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(2, 13, 16, 0.22) 55%,
      rgba(1, 7, 9, 0.50) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  opacity: 1 !important;
  position: absolute !important;
  z-index: 1 !important;
}

.login-stage {
  box-sizing: border-box;
  display: grid;
  inline-size: var(--login-card-width);
  max-inline-size: calc(100vw - 34px);
  min-block-size: min(100%, clamp(580px, 72dvh, 720px));
  place-items: center;
  position: relative;
  z-index: 3;
}

.login-stage::before {
  background:
    radial-gradient(circle,
      rgba(54, 243, 182, 0.20) 0%,
      rgba(54, 243, 182, 0.07) 36%,
      transparent 70%);
  border-radius: 999px;
  content: "";
  filter: blur(1px);
  inset: 9% -10% 8%;
  opacity: 0.88;
  position: absolute;
  z-index: 0;
}

.login-glass-backplate {
  backdrop-filter: blur(18px) saturate(1.24);
  -webkit-backdrop-filter: blur(18px) saturate(1.24);
  background:
    linear-gradient(145deg,
      rgba(255, 246, 224, 0.13),
      rgba(11, 45, 48, 0.30) 36%,
      rgba(5, 38, 43, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--login-card-radius) + 5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 28px 78px rgba(0, 0, 0, 0.24);
  inset: 38px 28px;
  opacity: 0.54;
  position: absolute;
  transform-origin: center;
  z-index: 1;
}

.login-glass-backplate-a {
  border-color: rgba(255, 210, 146, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 46px rgba(255, 186, 95, 0.18),
    0 24px 72px rgba(0, 0, 0, 0.25);
  transform: translate(-40px, 28px) rotate(-2.2deg);
}

.login-glass-backplate-b {
  border-color: rgba(70, 255, 207, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 58px rgba(54, 243, 182, 0.18),
    0 24px 72px rgba(0, 0, 0, 0.22);
  opacity: 0.62;
  transform: translate(26px, -18px) rotate(1.4deg);
}

.login-glass {
  backdrop-filter: blur(28px) saturate(1.26) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.26) brightness(1.02) !important;
  background:
    linear-gradient(150deg,
      rgba(255, 228, 172, 0.18) 0%,
      rgba(47, 69, 63, 0.54) 17%,
      rgba(13, 41, 43, 0.78) 52%,
      rgba(9, 32, 39, 0.88) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-sizing: border-box !important;
  box-shadow:
    0 42px 120px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(54, 243, 182, 0.16),
    0 0 74px rgba(54, 243, 182, 0.18),
    -26px 20px 72px rgba(255, 187, 96, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -1px 0 rgba(54, 243, 182, 0.16) !important;
  inline-size: min(100%, 548px) !important;
  margin: 0 !important;
  min-block-size: clamp(560px, 67dvh, 680px);
  padding:
    clamp(34px, 4.2vw, 56px)
    clamp(30px, 4vw, 48px)
    clamp(30px, 3.4vw, 42px) !important;
  position: relative !important;
  z-index: 2;
}

.login-glass::before {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.12) 16%,
      transparent 38%),
    radial-gradient(circle at 12% 16%,
      rgba(255, 211, 148, 0.28) 0%,
      transparent 32%),
    radial-gradient(circle at 89% 86%,
      rgba(54, 243, 182, 0.24) 0%,
      transparent 38%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.00)) !important;
}

.login-glass::after {
  background:
    linear-gradient(142deg,
      rgba(255, 218, 150, 0.86),
      rgba(255, 255, 255, 0.17) 22%,
      rgba(54, 243, 182, 0.84) 73%,
      rgba(79, 247, 255, 0.54)) border-box !important;
  border-width: 1.2px;
  opacity: 1;
}

.login-brand {
  gap: 13px !important;
  margin: 6px 0 clamp(30px, 3.6vw, 42px) !important;
}

.login-brand-mark {
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.30),
      rgba(54, 243, 182, 0.26) 45%,
      rgba(6, 105, 88, 0.62)) !important;
  border-radius: 22px !important;
  height: 64px !important;
  width: 64px !important;
}

.login-stage .login-brand-mark::before {
  border-color: rgba(54, 243, 182, 0.40) !important;
  opacity: 0.75 !important;
}

.login-stage .login-brand-mark img {
  height: 43px !important;
  width: 43px !important;
}

.login-stage .login-wordmark {
  font-size: clamp(34px, 2.45vw, 42px) !important;
  font-weight: 820 !important;
}

.login-stage .login-title {
  font-size: clamp(46px, 4.35vw, 66px) !important;
  margin-bottom: 15px !important;
}

.login-stage .login-subtitle {
  color: rgba(255, 255, 255, 0.79) !important;
  font-size: clamp(15px, 1.08vw, 18px) !important;
  margin-bottom: clamp(28px, 3.1vw, 38px) !important;
}

.login-stage .login-form {
  gap: 17px !important;
}

.login-stage .login-field input {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.055)) !important;
  border-color: rgba(255, 255, 255, 0.31) !important;
  border-radius: 18px !important;
  height: 64px !important;
  min-height: 64px !important;
}

.login-stage .login-field input:focus {
  border-color: rgba(54, 243, 182, 0.92) !important;
  box-shadow:
    0 0 0 4px rgba(54, 243, 182, 0.13),
    0 18px 40px rgba(15, 225, 167, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
}

.login-stage .login-submit {
  border-radius: 18px !important;
  height: 64px !important;
  margin-top: 11px !important;
  min-height: 64px !important;
}

.login-stage .login-help {
  margin-top: 24px !important;
}

.login-stage .login-trust {
  margin-top: 28px !important;
  padding-top: 24px !important;
}

.login-orbit-one {
  border-color: rgba(54, 243, 182, 0.68) !important;
  border-top-color: rgba(79, 247, 255, 0.20) !important;
  bottom: -34vh !important;
  box-shadow:
    0 0 34px rgba(54, 243, 182, 0.40),
    0 -5px 42px rgba(79, 247, 255, 0.18),
    inset 0 0 26px rgba(54, 243, 182, 0.12) !important;
  height: 61vh !important;
  left: -10vw !important;
  opacity: 0.76 !important;
  transform: rotate(-10deg) !important;
  width: 118vw !important;
  z-index: 2 !important;
}

.login-orbit-one::before,
.login-orbit-one::after {
  border-radius: inherit;
  content: "";
  inset: -7px;
  pointer-events: none;
  position: absolute;
}

.login-orbit-one::before {
  border-bottom: 2px solid rgba(54, 243, 182, 0.44);
  filter: blur(2px);
}

.login-orbit-one::after {
  border-bottom: 1px solid rgba(255, 224, 168, 0.36);
  inset: 14px;
  opacity: 0.56;
}

.login-orbit-two {
  border-color: rgba(79, 247, 255, 0.30) !important;
  opacity: 0.34 !important;
  z-index: 2 !important;
}

@media (max-height: 780px) and (min-width: 761px) {
  .login-shell.login-shell {
    padding-block: 14px !important;
  }

  .login-stage {
    min-block-size: auto;
  }

  .login-stage .login-glass {
    min-block-size: auto;
    padding: 32px 44px 30px !important;
  }

  .login-stage .login-brand {
    margin: 6px 0 24px !important;
  }

  .login-stage .login-brand-mark {
    height: 56px !important;
    width: 56px !important;
  }

  .login-stage .login-brand-mark img {
    height: 38px !important;
    width: 38px !important;
  }

  .login-stage .login-title {
    font-size: clamp(42px, 4vw, 54px) !important;
    line-height: 1.02 !important;
  }

  .login-stage .login-subtitle {
    margin-bottom: 24px !important;
  }

  .login-stage .login-form {
    gap: 12px !important;
  }

  .login-stage .login-field input,
  .login-stage .login-submit {
    height: 56px !important;
    min-height: 56px !important;
  }

  .login-stage .login-help {
    margin-top: 16px !important;
  }

  .login-stage .login-trust {
    margin-top: 18px !important;
    padding-top: 18px !important;
  }

  .login-stage .login-trust-icon {
    height: 40px;
    width: 40px;
  }
}

@media (max-width: 760px) {
  .login-stage {
    inline-size: min(100%, 440px);
    min-block-size: auto;
  }

  .login-glass-backplate {
    display: none;
  }

  .login-stage .login-glass {
    inline-size: min(100%, 430px) !important;
    min-block-size: auto;
  }
}

@media (max-width: 480px) {
  .login-shell.login-shell {
    padding: 16px !important;
  }

  .login-stage .login-glass {
    border-radius: 28px !important;
    padding: 30px 22px 24px !important;
  }

  .login-language {
    right: 22px !important;
    top: 22px !important;
  }

  .login-stage .login-brand {
    margin-top: 18px !important;
  }

  .login-stage .login-title {
    font-size: clamp(38px, 11.5vw, 48px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-stage,
  .login-stage::before,
  .login-glass-backplate,
  .login-orbit-one::before,
  .login-orbit-one::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * K13.39 — Compact production login panel
 *
 * Keeps the boutique Zagreb composition, but reduces the glass panel so
 * it feels calm on desktop Safari/Chrome and no longer dominates the
 * first viewport. Frontend-only; auth form mechanics stay untouched.
 * ════════════════════════════════════════════════════════════════════ */

.login-shell.login-shell {
  --login-card-radius: 32px;
  --login-card-width: clamp(360px, 34vw, 480px);
  padding: clamp(16px, 2.6vw, 34px) !important;
}

.login-stage {
  inline-size: var(--login-card-width) !important;
  min-block-size: auto !important;
}

.login-glass-backplate {
  inset: 28px 22px;
}

.login-glass-backplate-a {
  transform: translate(-30px, 22px) rotate(-2deg);
}

.login-glass-backplate-b {
  transform: translate(20px, -14px) rotate(1.2deg);
}

.login-stage .login-glass {
  inline-size: min(100%, 480px) !important;
  min-block-size: auto !important;
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 38px) clamp(24px, 2.5vw, 32px) !important;
}

.login-language {
  right: clamp(22px, 2.4vw, 30px) !important;
  top: clamp(20px, 2.4vw, 28px) !important;
}

.login-stage .login-brand {
  gap: 11px !important;
  margin: 2px 0 clamp(20px, 2.4vw, 28px) !important;
}

.login-stage .login-brand-mark {
  border-radius: 18px !important;
  height: 50px !important;
  width: 50px !important;
}

.login-stage .login-brand-mark img {
  height: 34px !important;
  width: 34px !important;
}

.login-stage .login-wordmark {
  font-size: clamp(28px, 2vw, 34px) !important;
}

.login-stage .login-title {
  font-size: clamp(38px, 3.35vw, 50px) !important;
  line-height: 1.02 !important;
  margin-bottom: 10px !important;
}

.login-stage .login-subtitle {
  font-size: clamp(14px, 0.92vw, 16px) !important;
  margin-bottom: clamp(20px, 2.25vw, 28px) !important;
}

.login-stage .login-form {
  gap: 13px !important;
}

.login-stage .login-field input {
  border-radius: 16px !important;
  font-size: 15px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding-inline: 50px !important;
}

.login-field-icon.left {
  left: 16px !important;
}

.login-field-icon.right {
  right: 16px !important;
}

.login-password-toggle {
  height: 36px;
  right: 9px;
  width: 36px;
}

.login-stage .login-submit {
  border-radius: 16px !important;
  font-size: 13px !important;
  height: 54px !important;
  letter-spacing: 0.22em !important;
  margin-top: 8px !important;
  min-height: 54px !important;
}

.login-submit-arrow {
  font-size: 24px;
  right: 22px;
}

.login-stage .login-help {
  font-size: 13px !important;
  margin-top: 18px !important;
}

.login-stage .login-trust {
  gap: 12px;
  margin-top: 20px !important;
  padding-top: 18px !important;
}

.login-trust-icon {
  border-radius: 14px;
  height: 40px;
  width: 40px;
}

.login-trust strong {
  font-size: 13px;
}

.login-trust small {
  font-size: 12px;
}

@media (max-height: 780px) and (min-width: 761px) {
  .login-stage .login-glass {
    padding: 24px 34px 22px !important;
  }

  .login-stage .login-brand {
    margin-bottom: 18px !important;
  }

  .login-stage .login-title {
    font-size: clamp(34px, 3vw, 44px) !important;
  }

  .login-stage .login-subtitle {
    margin-bottom: 18px !important;
  }

  .login-stage .login-form {
    gap: 10px !important;
  }

  .login-stage .login-field input,
  .login-stage .login-submit {
    height: 50px !important;
    min-height: 50px !important;
  }
}

@media (max-width: 760px) {
  .login-stage {
    inline-size: min(100%, 400px) !important;
  }

  .login-stage .login-glass {
    inline-size: min(100%, 400px) !important;
  }
}