/* ============================================================
   LEGACY TOKEN NAMES (backward compatibility)

   Stari nazivi (--bg, --panel, --text, itd.) su zadržani kao
   aliases i mapiraju se na nove semantic tokene dole. Planirano
   uklanjanje: kraj Faze 2.5 (Podfaza 11 — cleanup).

   Ne dodavati nove pozive na legacy nazive. Svaki novi CSS mora
   da koristi nove tokene direktno.
   ============================================================ */

/* ACU Light Theme (visual only) */
:root{
  /* New semantic tokens (Faza 2.5) */
  --bg-primary: #EEF2F7;
  --bg-secondary: #FFFFFF;
  --bg-elevated: #F8FAFC;

  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;

  --border-default: #D7DEE8;
  --border-strong: #94A3B8;

  --accent-primary: #2F80ED;
  --accent-hover: #1E6FDB;

  /* Decorative accent — strokes, rings, active rails. Dark mode makes this
     a bright cyan; light mode keeps it in the brand blue so the same rule
     works in both themes without a per-theme override. Never a fill under
     white text. See STYLE_GUIDE.md § 2. */
  --accent-cyan:      #0E7C9B;
  --accent-cyan-soft: rgba(14, 124, 155, 0.10);
  --accent-glow:      0 0 0 rgba(0, 0, 0, 0);   /* no glow in light */

  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;

  /* State tints — the soft fill + outline behind a status pill or banner.
     Light values are the literals the admin templates used to hardcode;
     dark equivalents are alpha tints of the state colour, because a solid
     pastel that works on white turns into a glowing block on near-black. */
  --success-bg:     #ECFDF3;
  --success-border: #ABEFC6;
  --warning-bg:     #FFFAEB;
  --warning-border: #FEDF89;
  --danger-bg:      #FEF3F2;
  --danger-border:  #FECDCA;
  --info-bg:        #DBEAFE;

  /* Chip / pill / tag background (semantic token, not an alias) */
  --chip: #E2E8F0;

  /* Shadows kao explicit tokeni */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.06);

  /* Fix: --panel2 was previously only defined in dark block */
  --panel2: #F8FAFC;

  /* Legacy aliases — mapiraju se na nove tokene.
     Ne menjati, ne dodavati nove. Uklanjanje u Podfazi 11. */
  --bg:      var(--bg-primary);
  --panel:   var(--bg-secondary);
  --text:    var(--text-primary);
  --muted:   var(--text-muted);
  --line:    var(--border-default);
  --accent:  var(--accent-primary);
  --accent2: var(--accent-hover);
  --good:    var(--success);
  --warn:    var(--warning);
  --bad:     var(--danger);
  --btn:     var(--bg-elevated);
  --shadow:  var(--shadow-sm), var(--shadow-lg);

  /* Corner radius (Phase 1 glass redesign: relaxed from 0px to 12px) */
  --r: 12px;
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
}

/* Basic elements */
a{color:inherit}
hr{border:none; border-top:1px solid var(--line)}
.code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.muted{color:var(--muted); font-weight:700; font-size:12px;}

/* Layout helpers used in our templates */
.wrap{max-width:1200px; margin:0 auto; padding:24px 18px 60px;}
.topbar, .panel, .card, .mini, .table-wrap{
  border:1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.topbar{padding:14px 16px}
.panel{padding:14px 16px; margin-top:14px}
.card, .mini{padding:14px 14px}
.row{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}

/* Buttons / chips */
.btn, button.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--btn);
  color: var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  letter-spacing:.04em;
  cursor:pointer;
  user-select:none;
}
.btn:hover{border-color:#B9C4D4}
.btn.blue{
  background: var(--accent);
  border-color: var(--accent2);
  color:#fff;
}
.btn.blue:hover{filter:brightness(1.03)}

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--bg-secondary);
  font-weight:900;
  font-size:11px;
  letter-spacing:.04em;
  cursor:pointer;
  user-select:none;
}
.chip.active{border-color: var(--accent2); background: rgba(47,128,237,.10);}
.chip .dot{width:8px; height:8px; border-radius:2px; background:#94A3B8;}
.chip.pass .dot{background: var(--good);}
.chip.warn .dot{background: var(--warn);}
.chip.fail .dot{background: var(--bad);}

/* Theme toggle button — explicit theme-aware color so it survives any
   parent-inherited color (e.g. .hero { color:#fff }, .top { color:#fff },
   or a login-style :root override of legacy --text). Uses --text-primary
   directly (not the legacy --text alias) so login's scoped palette can't
   pin it to a non-flipping value. */
#themeToggle { color: var(--text-primary); }

/* Inputs */
.input, input, select{
  border:1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-secondary);
  color: var(--text);
}
.input{display:flex; align-items:center; gap:8px; padding:9px 10px}
input, select{
  padding:9px 10px;
  font-weight:800;
  font-size:12px;
  outline:none;
}
input:focus, select:focus{border-color: var(--accent2)}

/* Tables */
.table-wrap{overflow:auto; margin-top:12px}
table{width:100%; border-collapse:collapse}
thead th{
  background:#F1F5F9;
  color:#334155;
  font-weight:900;
  font-size:12px;
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
tbody td{
  padding:12px 14px;
  font-weight:700;
  font-size:12px;
  color: var(--text);
  border-top:1px solid var(--line);
  vertical-align:top;
}
tbody tr:hover{background:#F8FAFC}

/* Status pills */
.pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--bg-secondary);
  font-weight:900;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.pill.pass{border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.10); color: var(--good);}
.pill.warn{border-color: rgba(217,119,6,.35); background: rgba(217,119,6,.10); color: var(--warn);}
.pill.fail{border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.10); color: var(--bad);}

/* Expand link */
.expand{
  color: var(--accent2);
  text-decoration: underline;
  font-weight:900;
  cursor:pointer;
}

/* Code blocks in debug sections */
pre{
  background:#0B1220;
  border:1px solid #0B1220;
  border-radius: var(--r);
  padding:12px;
  overflow:auto;
  font-size:11px;
  line-height:1.35;
  color:#E5E7EB;
}
details summary{cursor:pointer; font-weight:900; color: var(--accent2);}

/* ===== FORCE overrides (stronger than old template CSS) ===== */

/* Logout must be blue */
a[href*="logout"], a[href="/logout"],
form[action*="logout"] button, button[name="logout"],
#logout, .logout, .logout-btn {
  background: var(--accent) !important;
  border-color: var(--accent2) !important;
  color: #fff !important;
}

/*
  Company cards:
  We don't know the exact class names, so we target any "card-like" block
  inside the Companies list that contains a link to /company/...
  (Chrome/Edge support :has())
*/
.panel div:has(a[href^="/company/"]) {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

/* ===== Fix: kill purple gradients + enforce sharp corners everywhere ===== */

/* Kill gradients that old templates add */
.btn, a.btn, button.btn,
button, a,
[class*="btn"], [class*="Button"], [class*="button"] {
  background-image: none !important;   /* kills linear-gradient */
}

/* Force primary actions to ACU blue (covers many template naming styles) */
.btn.blue,
.btn-primary, .primary, .primary-btn, .primaryButton,
[class*="primary"], [class*="Primary"] {
  background: var(--accent) !important;
  border-color: var(--accent2) !important;
  color: #fff !important;
}

a[href*="logout"], a[href="/logout"],
form[action*="logout"] button {
  background: var(--accent) !important;
  border-color: var(--accent2) !important;
  color: #fff !important;
}

/* ===== FINAL: companies cards (white + sharp) and blue app header ===== */

/* App header text color (background is now glass — see GLASS DESIGN LANGUAGE block).
   Relaxed: no !important so glass language can override with var(--text-primary). */
.topbar, header, .header, .navbar, .nav-bar, .appbar, .app-header {
  color: #fff;
}
.topbar *, header *, .header *, .navbar *, .nav-bar *, .appbar *, .app-header * {
  color: #fff;
}

/* Companies cards: record blocks usually contain a link/form to /company/... */
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}

/* Kill grey inner strips inside company cards */
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]) :is(div, section, article, li, span),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]) :is(div, section, article, li, span),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) :is(div, section, article, li, span) {
  background-image: none !important;
}

/* Make "details" text under company name readable */
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]) :is(small, .sub, .meta, .muted),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]) :is(small, .sub, .meta, .muted),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) :is(small, .sub, .meta, .muted) {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* If template used opacity, make it visible */
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]) [style*="opacity"],
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]) [style*="opacity"],
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) [style*="opacity"] {
  opacity: 1 !important;
}

/* Keep buttons from old templates flat (no gradients) */
.btn, a.btn, button.btn,
button, a,
[class*="btn"], [class*="Button"], [class*="button"] {
  background-image: none !important;
}

/* ===== Visibility polish (companies + header user badge + demo tag) ===== */

/* Header: make user/admin badge readable on blue bar (avoid affecting Logout) */
:where(html:not([data-theme="dark"])) .topbar a[href*="admin"],
:where(html:not([data-theme="dark"])) .topbar .admin-pill,
:where(html:not([data-theme="dark"])) .topbar .user-pill,
:where(html:not([data-theme="dark"])) .topbar .username,
:where(html:not([data-theme="dark"])) .topbar .user-name,
:where(html:not([data-theme="dark"])) .topbar .user{
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.60) !important;
  color: var(--accent2) !important;
}
.topbar a[href*="admin"] *,
.topbar .admin-pill *, .topbar .user-pill *, .topbar .username *, .topbar .user-name *, .topbar .user * {
  color: var(--accent2) !important;
}

/* Companies cards: force readable text (titles dark, meta muted) */
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) {
  color: var(--text) !important;
}
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]) *:not(.btn):not(a.btn):not(button):not(input[type=submit]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]) *:not(.btn):not(a.btn):not(button):not(input[type=submit]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) *:not(.btn):not(a.btn):not(button):not(input[type=submit]) {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* Make the main company title line strong/dark */
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]) :is(h1,h2,h3,h4,strong,b,.title,.name,.company-name,.company-title),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]) :is(h1,h2,h3,h4,strong,b,.title,.name,.company-name,.company-title),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) :is(h1,h2,h3,h4,strong,b,.title,.name,.company-name,.company-title) {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Keep action buttons readable */
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]) :is(.btn, a.btn, button, input[type=submit]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]) :is(.btn, a.btn, button, input[type=submit]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) :is(.btn, a.btn, button, input[type=submit]) {
  color: #fff !important;
}

/* Badge styling inside company cards (makes small tags visible and "app-like")

   Never a badge that carries a verdict. This rule paints every small tag
   inside any card that links to /company/ the same blue, with
   !important, and a card whose badges report PASS / WARN / FAIL holds
   badges whose entire job is to differ from one another. On the due
   diligence table it flattened three outcomes into one colour: the row
   said FAIL and the badge looked like the row above it that passed.

   It predates the screens that carry verdicts, and its own target — the
   old company cards, where a tag was decoration — still wants it. So it
   keeps its reach and gives up the classes that mean something. The
   filter pills fought the same rule earlier and won with a wall of
   !important overrides on the page; those can come out as each screen
   lands. */
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]) :is(.pill,.chip,.tag,.badge):not(.pass):not(.warn):not(.fail):not(.skip):not(.missing),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]) :is(.pill,.chip,.tag,.badge):not(.pass):not(.warn):not(.fail):not(.skip):not(.missing),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) :is(.pill,.chip,.tag,.badge):not(.pass):not(.warn):not(.fail):not(.skip):not(.missing) {
  background: rgba(47,128,237,.10) !important;
  border-color: rgba(47,128,237,.35) !important;
  color: var(--accent2) !important;
  opacity: 1 !important;
}

/* Demo badge stronger green (covers common class naming) */
:where(html:not([data-theme="dark"])) .demo,
:where(html:not([data-theme="dark"])) .badge-demo,
:where(html:not([data-theme="dark"])) .pill.demo,
:where(html:not([data-theme="dark"])) .chip.demo,
:where(html:not([data-theme="dark"])) .tag.demo,
:where(html:not([data-theme="dark"])) [class*="demo"],
:where(html:not([data-theme="dark"])) [class*="Demo"]{
  background: rgba(22,163,74,.18) !important;
  border-color: rgba(22,163,74,.55) !important;
  color: #0B5D2A !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* ===== Fix: topbar user/admin badge visibility + Refresh button visibility ===== */

/* 1) Topbar: keep general header text white, BUT force the admin/user badge to be white box + blue text */
:where(html:not([data-theme="dark"])) .topbar a[href*="admin"],
:where(html:not([data-theme="dark"])) .topbar .admin,
:where(html:not([data-theme="dark"])) .topbar .admin-pill,
:where(html:not([data-theme="dark"])) .topbar .user,
:where(html:not([data-theme="dark"])) .topbar .user-pill,
:where(html:not([data-theme="dark"])) .topbar .user-badge,
:where(html:not([data-theme="dark"])) .topbar .admin-badge{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  color: var(--accent2) !important;
}

/* If the badge contains nested spans/icons, force them too */
.topbar a[href*="admin"] *,
.topbar .admin * ,
.topbar .admin-pill * ,
.topbar .user * ,
.topbar .user-pill * ,
.topbar .user-badge * ,
.topbar .admin-badge *{
  color: var(--accent2) !important;
}

/* Logout stays white text on blue button */
.topbar a[href*="logout"],
.topbar a[href="/logout"]{
  color:#fff !important;
}

/* 2) Panel buttons (e.g. Refresh): make non-primary buttons visible */
.panel .btn:not(.blue),
.panel a.btn:not(.blue),
.panel button.btn:not(.blue){
  background: var(--bg-secondary) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Make sure icons/text inside Refresh are visible */
.panel .btn:not(.blue) *,
.panel a.btn:not(.blue) *,
.panel button.btn:not(.blue) *{
  color: var(--text) !important;
}

/* Optional: if Refresh is actually disabled, still keep it readable */
:where(html:not([data-theme="dark"])) .panel button:disabled,
:where(html:not([data-theme="dark"])) .panel .btn:disabled{
  background:#F1F5F9 !important;
  color:#475569 !important;
  border-color: var(--line) !important;
  opacity: 1 !important;
}:where(html:not([data-theme="dark"])) .panel button:disabled *,
:where(html:not([data-theme="dark"])) .panel .btn:disabled *{
  color:#475569 !important;
}

/* ===== CRITICAL FIX: Company card badges visibility (NEW, UTR, dates) ===== */

/* Force ALL badges/pills inside company cards to have STRONG colors (not pale blue) */
:where(html:not([data-theme="dark"])) .panel .badge,
:where(html:not([data-theme="dark"])) .panel .pill,
:where(html:not([data-theme="dark"])) .panel .chip,
:where(html:not([data-theme="dark"])) .panel .tag,
:where(html:not([data-theme="dark"])) .panel small,
:where(html:not([data-theme="dark"])) .panel [class*="badge"],
:where(html:not([data-theme="dark"])) .panel [class*="pill"],
:where(html:not([data-theme="dark"])) .panel [class*="chip"],
:where(html:not([data-theme="dark"])) .panel [class*="tag"]{
  /* Strong border + background so it's readable on white */
  background: #E0E7FF !important;  /* Light indigo background */
  border: 1px solid #818CF8 !important;  /* Indigo border */
  color: #3730A3 !important;  /* Dark indigo text */
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* Company title should stay dark/strong */
.panel .title,
.panel strong,
.panel h1, .panel h2, .panel h3, .panel h4 {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Demo badge stays green */
:where(html:not([data-theme="dark"])) .panel .demo,
:where(html:not([data-theme="dark"])) .panel .badge-demo,
:where(html:not([data-theme="dark"])) .panel [class*="demo"]{
  background: rgba(22,163,74,.18) !important;
  border-color: rgba(22,163,74,.65) !important;
  color: #0B5D2A !important;
  font-weight: 900 !important;
}

/* Status badges (NEW, PENDING, etc.) - make them stand out */
:where(html:not([data-theme="dark"])) .panel .badge:not(.demo),
:where(html:not([data-theme="dark"])) .panel .pill:not(.demo):not(.pass):not(.warn):not(.fail),
:where(html:not([data-theme="dark"])) .panel .chip:not(.demo):not(.pass):not(.warn):not(.fail){
  background: #DBEAFE !important;  /* Light blue */
  border: 1px solid #60A5FA !important;  /* Medium blue border */
  color: #1E40AF !important;  /* Dark blue text */
}

/* ===== FINAL FIX: User badge + Refresh button + Clean badges ===== */

/* Problem 1: User badge (gore desno) - make text VISIBLE */
:where(html:not([data-theme="dark"])) .topbar .chip.dot,
:where(html:not([data-theme="dark"])) .topbar .chip{
  color: var(--accent2) !important;  /* Plavi tekst umesto belog */
  background: rgba(255,255,255,.95) !important;  /* Bela pozadina */
}

/* Problem 2: Refresh dugme - make it VISIBLE (theme-aware) */
#refreshBtn,
button#refreshBtn,
.panel button:not(.primary):not([class*="primary"]) {
  background: var(--bg-secondary) !important;  /* Theme-aware: light=#FFFFFF, dark=#111a2b */
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

/* Problem 3: Badge-ovi - SAMO plavi tekst, BEZ kutijica
   (verdict badges keep their box and their colour — same reason as
   the two rules above.) */
.panel .badge:not(.good):not(.demo):not(.pass):not(.warn):not(.fail):not(.skip),
.panel .pill:not(.pass):not(.warn):not(.fail):not(.demo):not(.good),
.panel .chip:not(.pass):not(.warn):not(.fail):not(.demo):not(.good),
.panel small {
  background: transparent !important;  /* BEZ pozadine */
  border: none !important;  /* BEZ okvira */
  color: var(--accent2) !important;  /* Samo plavi tekst */
  padding: 0 !important;  /* Ukloni padding jer nema kutijicu */
}

/* Demo badge ostaje sa zelenom kutijom */
:where(html:not([data-theme="dark"])) .panel .demo,
:where(html:not([data-theme="dark"])) .panel .badge.good,
:where(html:not([data-theme="dark"])) .panel [class*="demo"]{
  background: rgba(22,163,74,.18) !important;
  border: 1px solid rgba(22,163,74,.65) !important;
  color: #0B5D2A !important;
}

/* ===== Topbar branding: bigger logo, no clipping, bigger title ===== */

/* Make header tall enough + prevent logo clipping */
.topbar{
  min-height: 76px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Brand block alignment */
.topbar .brand{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Replace the small placeholder square with your logo (works for most templates) */
.topbar :is(.logo, .logo-box, .brand-icon, .app-logo, .logo-placeholder){
  width: 60px !important;
  height: 60px !important;
  background: transparent url("/static/acu_logo_mark.png") center/contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* If template uses <img> for logo, size it (safe) */
.topbar .brand img,
.topbar :is(img.logo, img.acu-logo, img.app-logo){
  height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Make the title text bigger (the line next to the logo) */
.topbar .brand .t{
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  line-height: 1.1 !important;
  color: #fff !important;
}

/* If you have a subtitle line, keep it smaller and readable */
.topbar .brand .s{
  font-size: 12px !important;
  font-weight: 700 !important;
  opacity: .92 !important;
  color: rgba(255,255,255,.92) !important;
}

/* ===== ACU Topbar final: use new logo, bigger, and replace brand text (CSS-only) ===== */

/* Make header tall enough (template has height:64px; override it) */
.topbar{
  height: 122px !important;
  min-height: 122px !important;
  padding: 14px 18px !important;
  overflow: visible !important;
}

/* Replace the small gradient square with the logo */
.topbar .brand-badge{
  width: 106px !important;
  height: 106px !important;
  border-radius: 999px !important;
  background: transparent url("/static/acu_logo_mark.png") center/contain no-repeat !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.20) !important;
}

/* Make brand text bigger and white */
.topbar .brand{
  gap: 14px !important;
  font-weight: 900 !important;
}

/* Replace "ACU PROTOCOL" with tagline only */
.topbar .brand > div:last-child{
  font-size: 0 !important; /* hide original text */
  line-height: 1.1 !important;
}

/* Show only tagline (no "ACU") - bigger and italic */
.topbar .brand > div:last-child::after{
  content: "Verify. Calculate. Comply." !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-style: italic !important;  /* ITALIC back! */
  letter-spacing: .02em !important;
  color: #fff !important;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif !important;
}

/* The topbar's user chip, theme toggle and logout used to sit on
   plates, and these rules existed only to keep the plates readable
   against the blue header. The plates are gone — see pg_shell.css,
   "Topbar controls carry no plate" — so their upkeep goes with them.
   Deleted rather than overridden: another layer on top would leave
   two rules fighting over one property, which is how the header got
   here in the first place. */

/* ===== Form labels visibility (Create Company + all forms) ===== */

/* Make all form field labels readable */
:where(html:not([data-theme="dark"])) .panel form label,
:where(html:not([data-theme="dark"])) .card form label,
:where(html:not([data-theme="dark"])) form label,
:where(html:not([data-theme="dark"])) form .label,
:where(html:not([data-theme="dark"])) form .form-label,
:where(html:not([data-theme="dark"])) form .field-label,
:where(html:not([data-theme="dark"])) form .input-label,
:where(html:not([data-theme="dark"])) form .control-label,
:where(html:not([data-theme="dark"])) form .field-title,
:where(html:not([data-theme="dark"])) form .field-name,
:where(html:not([data-theme="dark"])) form legend{
  color: #334155 !important;     /* readable slate */
  opacity: 1 !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* If those labels are using .muted with low opacity, force it back */
:where(html:not([data-theme="dark"])) .panel form .muted,
:where(html:not([data-theme="dark"])) .card form .muted,
:where(html:not([data-theme="dark"])) form .muted{
  color: #64748B !important;
  opacity: 1 !important;
}

/* Sometimes templates set opacity on wrapper divs of labels */
.panel form [style*="opacity"],
.card form [style*="opacity"]{
  opacity: 1 !important;
}

/* ===== Company dashboard: make section titles readable + upload CTA blue ===== */

/* 1) Fix faint section title ("Payslip Input") */
.panel h3, .panel h2, .panel h1,
.card h3, .card h2, .card h1{
  color: var(--text) !important;
  opacity: 1 !important;
}

/* If the specific title has its own class */
.section-title, .title, .heading, .block-title{
  color: var(--text) !important;
  opacity: 1 !important;
}

/* 2) Upload blocks: turn into blue CTA look (still same click area) */
.upload, .upload-box, .upload-area, .dropzone, .drop-zone, .drop-area{
  background: rgba(47,128,237,.10) !important;
  border: 1px solid rgba(47,128,237,.45) !important;
}

/* Text inside upload blocks: readable + slightly blue */
:where(html:not([data-theme="dark"])) .upload *,
:where(html:not([data-theme="dark"])) .upload-box *,
:where(html:not([data-theme="dark"])) .upload-area *,
:where(html:not([data-theme="dark"])) .dropzone *,
:where(html:not([data-theme="dark"])) .drop-zone *,
:where(html:not([data-theme="dark"])) .drop-area *{
  color: #1E6FDB !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

/* If there is a button element inside, make it primary */
.upload button, .upload-box button, .upload-area button,
.dropzone button, .drop-zone button, .drop-area button,
.upload .btn, .dropzone .btn{
  background: var(--accent) !important;
  border-color: var(--accent2) !important;
  color: #fff !important;
}

/* ===== Dark mode (opt-in). Enabled only when <html data-theme="dark"> ===== */
:root[data-theme="dark"]{
  --bg-primary: #0a0e14;
  --bg-secondary: #111823;
  --bg-elevated: #161f2b;

  --text-primary: #eef3f9;
  --text-secondary: #afbece;
  --text-muted: #7f8fa3;

  /* Hairlines carry a faint cyan cast so borders read as part of the
     accent family rather than as grey scaffolding. */
  --border-default: rgba(122, 200, 228, 0.14);
  --border-strong:  rgba(122, 200, 228, 0.30);

  /* Two accents, deliberately split:
     --accent-primary is the *interactive* colour and is the only one that
     ever sits behind white text, so it stays dark enough to carry it.
     --accent-cyan is the *decorative* one — strokes, rings, active rails,
     glow. It is too bright for white text; never use it as a fill under
     light type. See STYLE_GUIDE.md § 2. */
  --accent-primary: #1385a6;
  --accent-hover:   #17a1c7;

  --accent-cyan:       #22c8e6;
  --accent-cyan-soft:  rgba(34, 200, 230, 0.14);
  --accent-glow:       0 0 18px rgba(34, 200, 230, 0.28);

  --success: #4ade80;
  --warning: #f0b429;
  --danger:  #ff5c5c;

  /* State tints as alpha over the dark surface, not solid pastels. */
  --success-bg:     rgba(74, 222, 128, 0.12);
  --success-border: rgba(74, 222, 128, 0.40);
  --warning-bg:     rgba(240, 180, 41, 0.12);
  --warning-border: rgba(240, 180, 41, 0.40);
  --danger-bg:      rgba(255, 92, 92, 0.12);
  --danger-border:  rgba(255, 92, 92, 0.40);
  --info-bg:        rgba(34, 200, 230, 0.12);

  --chip: #16202d;

  --shadow-sm: 0 1px 2px  rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);

  /* Legacy aliases propagiraju automatski kroz var() iz :root.
     --panel2 eksplicitno, pošto u light nije alias nego direktna vrednost. */
  --panel2: var(--bg-elevated);
}

/* Make common surfaces adapt (relaxed: glass surfaces handle dark via GLASS block) */
:root[data-theme="dark"] body{
  background: var(--bg);
  color: var(--text);
}

/* Inputs */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .input{
  background: var(--panel2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Buttons (non-blue) */
:root[data-theme="dark"] .btn:not(.blue),
:root[data-theme="dark"] a.btn:not(.blue),
:root[data-theme="dark"] button.btn:not(.blue){
  background: var(--btn) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Tables */
:root[data-theme="dark"] thead th{
  background: rgba(255,255,255,.06) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
:root[data-theme="dark"] tbody td{
  color: var(--text) !important;
  border-color: var(--line) !important;
}
:root[data-theme="dark"] tbody tr:hover{ background: rgba(255,255,255,.04) !important; }

/* Chips/pills */
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .pill{
  background: rgba(255,255,255,.06) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

/* ============================================================
   GLASS DESIGN LANGUAGE
   Surface elements use semi-transparent backgrounds with
   backdrop-filter blur. Background gradient on body provides
   visual content for glass to refract.
   Hybrid scope: surfaces (topbar, panel, card, table-wrap, nav,
   drawer) become glass; functional elements (.btn.blue, badges,
   chips with state colors) remain solid.
   ============================================================ */

/* Body — light backdrop (login-style diagonal linear blue + subtle white highlights).
   Radial-with-transparent-fade was causing lavender perception against light cards;
   diagonal linear with no blue radials keeps the tone purely cool blue. */
body {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.08) 0, rgba(255,255,255,0) 35%),
    linear-gradient(135deg, #5C8BE8 0%, #4A7AD8 52%, #3865C8 100%);
  /* Pin the backdrop to the viewport so it never seams at the scroll fold
     on pages taller than one screen. */
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* Body — dark backdrop (mirror approach: linear deep navy + subtle blue radials) */
:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% 20%, rgba(75,123,255,.15) 0, rgba(0,0,0,0) 40%),
    radial-gradient(circle at 82% 16%, rgba(50,90,200,.12) 0, rgba(0,0,0,0) 35%),
    linear-gradient(135deg, #0B1220 0%, #131C30 50%, #0B1220 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Glass surface — light (0.55 alpha for stronger refraction visibility) */
.topbar, .panel, .card, .table-wrap, .nav, .drawer {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(15, 31, 86, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

/* Glass surface — dark (0.6 alpha for stronger refraction visibility) */
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .nav,
:root[data-theme="dark"] .drawer {
  background: rgba(17, 26, 43, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* Topbar text — must be readable on glass (not white anymore) */
.topbar { color: var(--text-primary); }
.topbar .chip { color: var(--text-primary); }

:root[data-theme="dark"] .topbar { color: var(--text-primary); }
:root[data-theme="dark"] .topbar .chip { color: var(--text-primary); }

/* Company list items (Blok C override) — match the same compound :has()
   selector with glass values. Specificity ties at (0,2,2), my block
   comes later in source, so glass wins. Alpha matches surface block. */
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]),
:is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 8px 32px rgba(15, 31, 86, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.4) inset !important;
}

:root[data-theme="dark"] :is(.panel, .wrap, .container, main) :is(div, li, article, section):has(a[href^="/company/"]),
:root[data-theme="dark"] :is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action^="/company/"]),
:root[data-theme="dark"] :is(.panel, .wrap, .container, main) :is(div, li, article, section):has(form[action*="/company/"]) {
  background: rgba(17, 26, 43, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

/* ============================================================
   GLASS POLISH — text legibility shadows + interactive hovers
   ============================================================ */

/* Topbar text: white text reads better on glass with a subtle
   shadow. text-shadow inherits, so descendants pick this up. */
.topbar, .topbar * {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 1px rgba(0, 0, 0, 0.3);
}

/* The brand tagline pseudo-element (Verify. Calculate. Comply.) is
   set with !important elsewhere; pseudo-elements need their own
   text-shadow rule because text-shadow on the parent doesn't
   propagate through ::after content. */
.topbar .brand > div:last-child::after {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 1px rgba(0, 0, 0, 0.3);
}

/* Primary buttons hover — lift + stronger blue shadow */
.btn:hover, button.btn:hover, a.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(47, 128, 237, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  transition: all 0.2s ease;
}

/* Glass surface hover — slightly less transparent, deeper shadow */
.card:hover, .panel:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 12px 40px rgba(15, 31, 86, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  transition: all 0.25s ease;
}

:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .panel:hover {
  background: rgba(17, 26, 43, 0.8);
}

/* Chips / pills / badges hover — small lift + brightness pop */
.chip:hover, .pill:hover, .badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  transition: all 0.15s ease;
}

/* Sidebar nav items hover — accent tint */
.nav a:hover, .nav-item:hover {
  background: rgba(47, 128, 237, 0.10);
  color: var(--accent-primary);
  transition: all 0.15s ease;
}

:root[data-theme="dark"] .nav a:hover,
:root[data-theme="dark"] .nav-item:hover {
  background: rgba(75, 123, 255, 0.15);
  color: #4b7bff;
}

/* Input field hover — subtle accent border highlight (only when not focused) */
input:hover:not(:focus), select:hover:not(:focus) {
  border-color: var(--accent-primary);
  transition: border-color 0.15s ease;
}

/* ============================================================
   DARK: undo the light-theme "FINAL FIX" rules
   ------------------------------------------------------------
   A block of rules further up hardcodes a white/pale-blue surface
   with blue or dark-green text. They were written when the topbar
   and panels were light and the problem was blue-on-blue. Carried
   into dark they invert into the opposite fault: pale boxes with
   dark type, which is the least readable thing on the page.

   Rule of thumb applied throughout: white text on a blue fill is
   fine, blue text on a white fill is not. Nothing below changes a
   light-theme value — these only take effect under data-theme=dark.
   ============================================================ */

/* Status badges (NEW, PENDING, …) — were #DBEAFE bg / #1E40AF text.
   .pill and .chip already stood aside for a verdict; .badge did not,
   which is the same hole the /company/ card rule had. Closed here too,
   before the next screen in the UI pass walks into it. */
:root[data-theme="dark"] .panel .badge:not(.demo):not(.pass):not(.warn):not(.fail):not(.skip),
:root[data-theme="dark"] .panel .pill:not(.demo):not(.pass):not(.warn):not(.fail),
:root[data-theme="dark"] .panel .chip:not(.demo):not(.pass):not(.warn):not(.fail){
  background: rgba(34,200,230,.10) !important;
  border: 1px solid rgba(34,200,230,.30) !important;
  color: #bcd9e6 !important;
}

/* Demo badge — was dark green (#0B5D2A) on a dark green tint. */
:root[data-theme="dark"] .panel [class*="demo"]{
  background: rgba(74,222,128,.14) !important;
  border-color: rgba(74,222,128,.45) !important;
  color: #9ff0bd !important;
}

/* The dark counterpart of the deleted light plate rules — the cyan
   tint the topbar chips used to sit on. Gone for the same reason:
   the controls carry no plate now. Colour on the ground is set in
   pg_shell.css. */

/* Topbar links under /admin, and the user/admin pills.
   This is the one that produced the white "Umbrella Settings" button:
   `.topbar a[href*="admin"]` (0,2,1) outranks `.btn.blue` (0,2,0), and the
   general dark button rule deliberately skips .blue — so a blue button
   whose href happens to contain "admin" was left on the light-theme
   white plate with blue text, and nothing in dark ever reclaimed it. */
:root[data-theme="dark"] .topbar a[href*="admin"],
:root[data-theme="dark"] .topbar .admin,
:root[data-theme="dark"] .topbar .admin-pill,
:root[data-theme="dark"] .topbar .admin-badge,
:root[data-theme="dark"] .topbar .user,
:root[data-theme="dark"] .topbar .user-pill,
:root[data-theme="dark"] .topbar .user-badge,
:root[data-theme="dark"] .topbar .username,
:root[data-theme="dark"] .topbar .user-name{
  background: rgba(34,200,230,.10) !important;
  border: 1px solid rgba(34,200,230,.28) !important;
  color: var(--text-primary) !important;
}
:root[data-theme="dark"] .topbar a[href*="admin"] *,
:root[data-theme="dark"] .topbar .admin *,
:root[data-theme="dark"] .topbar .admin-pill *,
:root[data-theme="dark"] .topbar .admin-badge *,
:root[data-theme="dark"] .topbar .user *,
:root[data-theme="dark"] .topbar .user-pill *,
:root[data-theme="dark"] .topbar .user-badge *,
:root[data-theme="dark"] .topbar .username *,
:root[data-theme="dark"] .topbar .user-name *{
  color: var(--text-primary) !important;
}

/* A genuinely blue button keeps white on a fill — that direction is fine,
   it is only the inverse that is unreadable. Last word, so it wins over
   the href-based rule above when both match. */
:root[data-theme="dark"] .topbar a.btn.blue,
:root[data-theme="dark"] .topbar button.btn.blue,
:root[data-theme="dark"] .btn.blue{
  background: var(--accent-primary) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}
:root[data-theme="dark"] .topbar a.btn.blue *,
:root[data-theme="dark"] .topbar button.btn.blue *,
:root[data-theme="dark"] .btn.blue *{
  color: #fff !important;
}

/* Upload dropzones — every descendant was pinned to #1E6FDB. */
:root[data-theme="dark"] .upload, 
:root[data-theme="dark"] .upload-box,
:root[data-theme="dark"] .upload-area,
:root[data-theme="dark"] .dropzone,
:root[data-theme="dark"] .drop-zone,
:root[data-theme="dark"] .drop-area{
  background: rgba(34,200,230,.07) !important;
  border: 1px solid rgba(34,200,230,.38) !important;
}
:root[data-theme="dark"] .upload *,
:root[data-theme="dark"] .upload-box *,
:root[data-theme="dark"] .upload-area *,
:root[data-theme="dark"] .dropzone *,
:root[data-theme="dark"] .drop-zone *,
:root[data-theme="dark"] .drop-area *{
  color: var(--accent-cyan) !important;
}
/* …except a real button inside one, which keeps white on a fill. */
:root[data-theme="dark"] .upload button,
:root[data-theme="dark"] .upload-box button,
:root[data-theme="dark"] .upload-area button,
:root[data-theme="dark"] .dropzone button,
:root[data-theme="dark"] .drop-zone button,
:root[data-theme="dark"] .drop-area button,
:root[data-theme="dark"] .upload .btn,
:root[data-theme="dark"] .dropzone .btn,
:root[data-theme="dark"] .upload .btn *,
:root[data-theme="dark"] .dropzone .btn *{
  color: #fff !important;
}

/* Disabled panel buttons — were #F1F5F9 on #475569. */
:root[data-theme="dark"] .panel button:disabled,
:root[data-theme="dark"] .panel .btn:disabled{
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-default) !important;
}