/* ============================================================
   QINTA — Material Design 3 brand tokens (CORE) · REBRAND
   Source of truth. Recreated 1:1 from the design handoff
   (design_handoff_qinta_complete/source/brand.css).
   Palette: white / gold / warm black (ink). Green stays the
   "positive" semantic, red stays error/expense.

   Font: Exo 2 — loaded locally from the app font library
   (primefaces-pocketerr:fonts), NOT from Google Fonts.

   Override point: only the palette (--p-*, --t-*, --e-*) and
   --font may be overridden per-app via
   app/.../primefaces-pocketerr/brand-tokens.css, which is loaded
   AFTER this file. Everything else stays here in core.
   ============================================================ */

/* ---------- Exo 2 (local, app font library) ---------- */
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/jakarta.faces.resource/fonts/Exo2-Light.woff2.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff2"),
       url("/jakarta.faces.resource/fonts/Exo2-Light.woff.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff");
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/jakarta.faces.resource/fonts/Exo2-Regular.woff2.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff2"),
       url("/jakarta.faces.resource/fonts/Exo2-Regular.woff.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff");
}
@font-face {
  font-family: 'Exo 2'; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/jakarta.faces.resource/fonts/Exo2-Italic.woff2.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff2"),
       url("/jakarta.faces.resource/fonts/Exo2-Italic.woff.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff");
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/jakarta.faces.resource/fonts/Exo2-Medium.woff2.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff2"),
       url("/jakarta.faces.resource/fonts/Exo2-Medium.woff.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff");
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/jakarta.faces.resource/fonts/Exo2-SemiBold.woff2.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff2"),
       url("/jakarta.faces.resource/fonts/Exo2-SemiBold.woff.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff");
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/jakarta.faces.resource/fonts/Exo2-Bold.woff2.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff2"),
       url("/jakarta.faces.resource/fonts/Exo2-Bold.woff.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff");
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/jakarta.faces.resource/fonts/Exo2-ExtraBold.woff2.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff2"),
       url("/jakarta.faces.resource/fonts/Exo2-ExtraBold.woff.jsf?ln=primefaces-pocketerr&v=15.0.16") format("woff");
}

:root {
  /* ---------- Brand: Gold (MD3 tonal palette) ---------- */
  --p-0:   #000000;
  --p-10:  #261C00;
  --p-20:  #3F2E00;
  --p-30:  #5C4400;
  --p-40:  #9A7100;   /* PRIMARY on light (AA on white) */
  --p-50:  #C28C00;
  --p-60:  #E3A800;   /* primary on dark */
  --p-70:  #F3AE12;   /* brand gold — graphics, fills */
  --p-80:  #FFC72E;   /* gold soft — highlight */
  --p-90:  #FFE9B3;   /* gold container */
  --p-95:  #FCF5E2;
  --p-99:  #FFFDF6;
  --p-100: #FFFFFF;

  /* ---------- Secondary: warm ink-grey (neutral) ---------- */
  --s-10:  #16140F;
  --s-20:  #2A2721;
  --s-30:  #403C33;
  --s-40:  #57534A;
  --s-90:  #E7E3D8;
  --s-95:  #F4F1E8;

  /* ---------- Tertiary: green (savings / gains / positive) ---------- */
  --t-30:  #1F6B5C;
  --t-40:  #2E8C77;
  --t-50:  #3FAE93;
  --t-60:  #5BC7AB;
  --t-80:  #B0E5D6;
  --t-90:  #DFF3ED;

  /* ---------- Error (warm fintech red) ---------- */
  --e-40:  #BA2D3F;
  --e-60:  #E0556A;
  --e-90:  #FBE0E5;

  /* ---------- Surface (warm whites, no purple tint) ---------- */
  --bg:           #FDFCF8;
  --surface:      #FFFFFF;
  --surface-1:    #FAF8F2;
  --surface-2:    #F3EFE3;
  --surface-3:    #ECE7D8;
  --surface-dim:  #E5E0D2;
  --on-surface:        #1D1B16;
  --on-surface-muted:  #6F6A5C;
  --on-surface-subtle: #8A8474;
  --outline:           #C9C4B4;
  --outline-variant:   #E4E0D3;

  /* ---------- Dark surfaces (warm black) ---------- */
  --dark-bg:         #0F0E0B;
  --dark-surface:    #16140F;
  --dark-surface-1:  #1D1B16;
  --dark-surface-2:  #2A2620;
  --on-dark:         #F5F2E9;
  --on-dark-muted:   #ABA697;

  /* ---------- Typography (Exo 2) ---------- */
  --font:  'Exo 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --display-l:  700 64px/1.05 var(--font);
  --display-m:  700 52px/1.08 var(--font);
  --display-s:  700 40px/1.15 var(--font);
  --headline-l: 700 32px/1.2  var(--font);
  --headline-m: 600 24px/1.25 var(--font);
  --headline-s: 600 20px/1.3  var(--font);
  --title-l:    600 18px/1.4  var(--font);
  --title-m:    600 16px/1.45 var(--font);
  --body-l:     400 17px/1.55 var(--font);
  --body-m:     400 15px/1.55 var(--font);
  --body-s:     400 13px/1.5  var(--font);
  --label-l:    600 14px/1    var(--font);
  --label-m:    600 12px/1    var(--font);
  --eyebrow:    600 12px/1    var(--font);

  /* ---------- Shape (MD3 corner system) ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 9999px;

  /* ---------- Elevation (MD3 tonal) ---------- */
  --el-1: 0 1px 2px rgba(29, 27, 22, 0.05), 0 1px 3px rgba(29, 27, 22, 0.06);
  --el-2: 0 2px 6px rgba(29, 27, 22, 0.06), 0 4px 12px rgba(29, 27, 22, 0.08);
  --el-3: 0 4px 14px rgba(29, 27, 22, 0.08), 0 12px 28px rgba(29, 27, 22, 0.10);
  --el-glow-p: 0 12px 40px rgba(243, 174, 18, 0.28);
  --el-glow-t: 0 12px 40px rgba(63, 174, 147, 0.22);

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

  /* ---------- Motion ---------- */
  --ease-emph: cubic-bezier(0.2, 0, 0, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
}

/* ============================================================
   Dark theme — opt-in via <html data-theme="dark">.
   Re-maps the surface/on-surface/outline/accent tokens so all
   var(--surface)/var(--on-surface)/var(--p-95) refs flip
   automatically without touching individual component CSS.
   ============================================================ */
html[data-theme="dark"] {
  --bg:           #0F0E0B;
  --surface:      #16140F;
  --surface-1:    #1D1B16;
  --surface-2:    #2A2620;
  --surface-3:    #37322A;
  --surface-dim:  #12100C;
  --on-surface:        #F5F2E9;
  --on-surface-muted:  #ABA697;
  --on-surface-subtle: #8A8474;
  --outline:           #4A4438;
  --outline-variant:   #2F2B22;

  /* Primary accent shifts UP the tonal palette on dark
     (MD3: primary on dark = --p-60..80, containers = --p-30..20). */
  --p-95: #332600;  /* used as tinted backgrounds (chips, active row, banners) */
  --p-90: #4A3700;  /* tonal container bg */

  /* Error container bg flips dark too (light pink is too loud on dark) */
  --e-90: #4A1A22;

  /* Elevation: deeper, more opaque shadows on dark to remain visible */
  --el-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
  --el-2: 0 2px 6px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
  --el-3: 0 4px 14px rgba(0,0,0,.50), 0 12px 28px rgba(0,0,0,.40);

  color-scheme: dark;
}

/* Smooth in-place theme switch (no flash) */
html, body, .dash, .dash-side, .dash-main, .dash-appbar {
  transition: background-color .25s var(--ease-std), color .25s var(--ease-std), border-color .25s var(--ease-std);
}

/* ============================================================
   Reusable MD3 components — opt-in classes, safe alongside
   PrimeFaces (.ui-*). Use on plain markup where a PF component
   does not fit the design.
   ============================================================ */
/* Global reset — every page (standalone + templated) loads this file,
   so no page ever shows the default 8px body margin. */
html, body { margin: 0; padding: 0; }

.pkt-root {
  font: var(--body-m);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.pkt-root *, .pkt-root *::before, .pkt-root *::after { box-sizing: border-box; }
.pkt-root h1, .pkt-root h2, .pkt-root h3, .pkt-root h4, .pkt-root p { margin: 0; }
.pkt-root button { font-family: inherit; cursor: pointer; }
.pkt-root a { color: inherit; text-decoration: none; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--label-l); letter-spacing: 0.02em;
  padding: 14px 24px; border-radius: 12px;
  border: 0; cursor: pointer; transition: all var(--dur-2) var(--ease-emph);
  text-decoration: none; white-space: nowrap;
}
.btn-filled  { background: var(--on-surface); color: #fff; box-shadow: var(--el-1); }
.btn-filled:hover { background: #000; box-shadow: var(--el-2); }
.btn-tonal   { background: var(--p-90); color: var(--p-20); }
.btn-tonal:hover { background: var(--p-80); }
.btn-outline { background: transparent; color: var(--on-surface); border: 1.5px solid var(--outline); }
.btn-outline:hover { background: var(--p-95); border-color: var(--p-40); }
.btn-text    { background: transparent; color: var(--p-40); padding: 12px 16px; }
.btn-text:hover { background: var(--p-95); }
.btn-lg { padding: 18px 32px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* Filled buttons keep white text + NO underline in ANY context, even as links /
   PF commandlinks — beats `.pkt-root a { color: inherit }` and the theme's
   `.ui-commandlink:hover { text-decoration: underline }`. ONE place, reused everywhere. */
a.btn-filled, a.btn-filled:hover, a.btn-filled:focus,
.ui-commandlink.btn-filled { color: #fff; }
.btn-filled svg { stroke: #fff; }
a.btn:hover, a.btn:focus,
.ui-commandlink.btn:hover, .ui-commandlink.btn:focus { text-decoration: none; }

/* --- Validation messages: drop the theme's red box background globally,
   keep just bold error text --- */
body .ui-message.ui-message-error { background: transparent; font-weight: bold; }

/* --- Tabs (segmented) — app-wide component; mirrors the login
   Prijava | Registracija tabs. Use: a .pkt-tabs container of .pkt-tab
   buttons, active one gets .pkt-tab.on. --- */
.pkt-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border-radius: 14px;
}
.pkt-tab {
  border: 0; padding: 12px 18px; border-radius: 10px;
  font: var(--label-l); cursor: pointer; text-align: center; white-space: nowrap;
  background: transparent; color: var(--on-surface-muted);
  transition: all var(--dur-2) var(--ease-emph);
}
.pkt-tab:hover { color: var(--on-surface); }
.pkt-tab.on { background: var(--surface); color: var(--p-40); box-shadow: var(--el-1); }
/* Mobile/narrow: the segmented pill is content-width (inline-flex), so many/long tabs (e.g. the
   import-config wizard's 3 tabs) overflow the viewport and end up off-screen with no way to reach
   them. Make the track scroll horizontally instead. Applies to EVERY .pkt-tabs (import-config
   wizard, editMenuItem, …); editMenuItem's own .mmi-tabs override is now redundant but harmless. */
@media (max-width: 760px) {
  .pkt-tabs { display: flex; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pkt-tabs::-webkit-scrollbar { display: none; }
  .pkt-tabs .pkt-tab { flex: 0 0 auto; width: auto; }
}

/* --- Card --- */
.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--outline-variant);
  padding: var(--sp-7);
}
.card-elevated { box-shadow: var(--el-2); border-color: transparent; }

/* --- Chip / pill --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--p-90); color: var(--p-20);
  font: var(--label-m); letter-spacing: 0.04em; text-transform: uppercase;
}

/* --- Inputs --- */
.field { position: relative; display: block; width: 100%; }
.field input, .field select, .field textarea {
  font: var(--body-l); width: 100%;
  padding: 22px 16px 8px 16px;
  background: var(--surface-1);
  border: 1.5px solid var(--outline);
  border-radius: var(--r-sm);
  color: var(--on-surface);
  transition: border var(--dur-2) var(--ease-std), background var(--dur-2);
  outline: none;
}
.field input:hover { border-color: var(--on-surface-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--p-40);
  border-width: 2px;
  padding: 21px 15px 7px 15px;
  background: var(--surface);
}
.field label {
  position: absolute; left: 16px; top: 18px;
  font: var(--body-m); color: var(--on-surface-muted);
  pointer-events: none;
  transition: all var(--dur-2) var(--ease-emph);
  background: transparent;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field.filled label {
  top: 6px; font-size: 11px; font-weight: 600; color: var(--p-40);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.field-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--on-surface-subtle); pointer-events: none;
}

/* --- Container --- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }

/* --- Money: tabular numerals everywhere amounts are shown --- */
.tnum { font-variant-numeric: tabular-nums; }

/* --- Subtle grain texture (overlay for dark surfaces) --- */
.grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.6; mix-blend-mode: multiply;
}

/* ============ pkt-otp — segmented one-digit-per-box code input ============ */
/* .pkt-root prefix beats the generic .lgn-card .lgn-field input rules on the
   login screen (brand.css loads before login-md3.css there). */
.pkt-otp{display:flex;gap:8px}
.pkt-root .pkt-otp input.pkt-otp-box{
  width:42px;height:50px;padding:0;text-align:center;
  font-family:inherit;font-size:21px;font-weight:600;color:var(--on-surface);
  background:var(--surface);border:1.5px solid var(--outline-variant);border-radius:12px;
  outline:none;caret-color:var(--p-40);box-shadow:none;
  transition:border-color .15s,box-shadow .15s;
}
.pkt-root .pkt-otp input.pkt-otp-box:focus{border-color:var(--p-40);box-shadow:0 0 0 3px var(--p-90)}
@media (max-width:380px){
  .pkt-root .pkt-otp input.pkt-otp-box{width:36px;height:44px;font-size:18px}
}