/* ============================================================================
   BOKA License Server — admin design system
   Ported from the bokagroup.rs design language (navy / electric-blue, Sora,
   navy-tinted elevation, btn-material, underline-draw). Restyle only.
   ========================================================================== */

/* ---- Self-hosted fonts (no external CDN; app has a CSP) -------------------- */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/sora-400.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/sora-500.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/sora-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrainsmono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrainsmono-500.woff2') format('woff2')}

/* ---- Tokens --------------------------------------------------------------- */
:root{
  --navy:#0b1d3a; --navy-deep:#081428; --blue:#0066ff; --blue-hi:#1a75ff;
  --ink:#1e232b; --slate:#5d6673; --mist:#f2f4f7; --line:#e6e9ef; --surface:#ffffff;
  --ok:#0f9d58; --warn:#b45309; --danger:#dc2626;
  --ok-bg:rgba(15,157,88,.11); --warn-bg:rgba(217,119,6,.12); --danger-bg:rgba(220,38,38,.10); --blue-bg:rgba(0,102,255,.10);
  --font-sans:'Sora',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-low:0.5px 1px 1.5px hsl(217deg 45% 25% / .10), 1px 2px 3px -1.2px hsl(217deg 45% 25% / .08);
  --shadow-mid:0.5px 1px 1.5px hsl(217deg 45% 25% / .10), 2px 4px 6px -1px hsl(217deg 45% 25% / .08), 5px 10px 14px -2px hsl(217deg 45% 25% / .07);
  --shadow-high:0.5px 1px 1.5px hsl(217deg 45% 25% / .10), 3px 6px 9px -1px hsl(217deg 45% 25% / .08), 8px 16px 22px -2px hsl(217deg 45% 25% / .07), 18px 36px 46px -3px hsl(217deg 45% 25% / .06);
  --ui-ease:cubic-bezier(.4,0,.6,1); --reveal-ease:cubic-bezier(.22,1,.36,1);
  --radius:14px; --radius-sm:10px;
}

/* ---- Base ----------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans); margin:0; color:var(--ink); background:var(--mist);
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased; line-height:1.5;
}
::selection{background:var(--blue);color:#fff}
a{color:inherit}
h1,h2,h3{letter-spacing:-.02em;color:var(--navy);font-weight:600;line-height:1.15}
h1{font-size:1.7rem;margin:0 0 .2rem}
h1:focus{outline:none}
h2{font-size:1.12rem;letter-spacing:-.015em;margin:1.6rem 0 .8rem}
h3{font-size:1rem}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.mono{font-family:var(--font-mono);letter-spacing:0;font-size:.86em}

/* ---- Layout shell (legacy class names, upgraded) -------------------------- */
.page{display:flex;min-height:100vh}
main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{padding:26px 40px 56px;max-width:1240px;width:100%}
@media (max-width:720px){ .content{padding:20px 18px 40px} }

/* ---- Sidebar (fallback styles; scoped NavMenu.razor.css refines) ---------- */
.nav-sidebar{
  width:256px;flex-shrink:0;color:#c7d2e0;padding:22px 16px;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.nav-brand{padding:6px 6px 20px}
.nav-brand a{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}
.brand-badge{width:40px;height:40px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,102,255,.25);flex-shrink:0;overflow:hidden}
.brand-badge img{width:30px;height:30px;object-fit:contain}
.brand-text{font-weight:700;font-size:1.05rem;line-height:1;letter-spacing:-.02em;display:flex;flex-direction:column}
.brand-text small{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#6f88ab;font-weight:500;margin-top:5px}
.nav-links{list-style:none;padding:0;margin:.6rem 0;display:flex;flex-direction:column;gap:2px}
.nav-links li{margin:0}
.nav-section{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#5c729a;padding:14px 11px 6px}
.nav-links a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;position:relative;
  color:#aebdd2;text-decoration:none;font-size:.9rem;font-weight:500;
  transition:background .22s var(--ui-ease),color .22s var(--ui-ease);
}
.nav-ic{width:17px;height:17px;opacity:.85;flex-shrink:0}
.nav-links a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-links a:hover .nav-ic{opacity:1}
.nav-links a.active{background:linear-gradient(90deg,rgba(0,102,255,.22),rgba(0,102,255,.05));color:#fff}
.nav-links a.active .nav-ic{opacity:1}
.nav-links a.active::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--blue);box-shadow:0 0 10px rgba(0,102,255,.7)}
.nav-user{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.nav-user-chip{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nav-user .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue-hi),var(--blue));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-user .avatar svg{width:17px;height:17px}
.nav-user-meta{display:flex;flex-direction:column;line-height:1.25}
.nav-user-name{color:#dbe4f0;font-weight:500;font-size:.82rem}
.nav-user-meta small{color:#6f88ab;font-size:.68rem}
.nav-user form{margin:0}

/* ---- Topbar --------------------------------------------------------------- */
.topbar{display:flex;align-items:center;gap:20px;padding:24px 40px 2px}
.crumb{font-size:.78rem;color:var(--slate);margin-bottom:3px;font-weight:500}
.topbar .spacer{margin-left:auto}
@media (max-width:720px){ .topbar{padding:18px 18px 2px} }

/* ---- Cards / panels ------------------------------------------------------- */
.card,.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-low);
}
.panel{padding:1.15rem 1.35rem;margin:1rem 0}
.card{overflow:hidden}

/* ---- Stat tiles ----------------------------------------------------------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:1.4rem 0 2rem}
.stat-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:var(--shadow-low);transition:transform .3s var(--reveal-ease),box-shadow .3s var(--reveal-ease);
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-mid)}
.stat-value{font-size:2.3rem;font-weight:600;letter-spacing:-.03em;color:var(--navy);line-height:1}
.stat-label{color:var(--slate);font-size:.85rem;margin-top:6px;font-weight:500}
.stat-card.accent{background:linear-gradient(145deg,#0b1d3a,#0f2547);border-color:transparent}
.stat-card.accent .stat-value{color:#fff}
.stat-card.accent .stat-label{color:#aec2e0}
.stat-card.accent .stat-label a{color:#7db8ff;background-image:linear-gradient(#7db8ff,#7db8ff)}
.icon-chip{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.icon-chip svg{width:19px;height:19px}
.i-blue{background:var(--blue-bg);color:var(--blue)}
.i-amber{background:var(--warn-bg);color:var(--warn)}
.i-red{background:var(--danger-bg);color:var(--danger)}
.i-green{background:var(--ok-bg);color:var(--ok)}

/* ---- Tables --------------------------------------------------------------- */
.data-table{
  width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-low);
}
.data-table th,.data-table td{text-align:left;padding:14px 20px;font-size:.9rem}
.data-table th{
  background:#fafbfc;color:var(--slate);font-weight:600;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line);
}
.data-table td{border-bottom:1px solid #f1f3f7;color:var(--ink)}
.data-table tbody tr{transition:background .18s var(--ui-ease)}
.data-table tbody tr:hover{background:#f7f9fc}
.data-table tbody tr:last-child td{border-bottom:none}
.detail-cell{max-width:380px;overflow-wrap:anywhere}

/* ---- Badges --------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:999px;letter-spacing:.01em;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-active{color:var(--ok);background:var(--ok-bg)}
.b-trial,.b-info{color:var(--blue);background:var(--blue-bg)}
.b-warn{color:var(--warn);background:var(--warn-bg)}
.b-lapsed{color:var(--danger);background:var(--danger-bg)}

/* ---- Buttons -------------------------------------------------------------- */
button,.btn{
  font-family:inherit;font-weight:600;font-size:.88rem;letter-spacing:-.01em;color:#fff;cursor:pointer;
  border:none;border-radius:999px;padding:10px 20px;display:inline-flex;align-items:center;gap:7px;
  background-image:linear-gradient(to bottom,var(--blue-hi),var(--blue));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(11,29,58,.2),0 3px 8px rgba(0,102,255,.24);
  transition:box-shadow .24s var(--ui-ease),transform .15s var(--ui-ease),background .2s var(--ui-ease);
}
button:hover,.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(11,29,58,.2),0 6px 16px rgba(0,102,255,.34)}
button:active,.btn:active{transform:scale(.97)}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
button.ghost,.btn.ghost{background:var(--surface);background-image:none;color:var(--navy);border:1px solid var(--line);box-shadow:var(--shadow-low)}
button.ghost:hover,.btn.ghost:hover{border-color:#cdd5e0;box-shadow:var(--shadow-mid)}
button.danger,.btn.danger{background-image:linear-gradient(to bottom,#e2483a,#dc2626);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 8px rgba(220,38,38,.28)}
button.success-btn,.btn.success-btn{background-image:linear-gradient(to bottom,#18ad63,#0f9d58);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 8px rgba(15,157,88,.28)}
.link-button{background:none;background-image:none;border:none;color:var(--slate);cursor:pointer;padding:0;text-decoration:underline;box-shadow:none;font-weight:500;border-radius:2px}
.link-button:hover{box-shadow:none;transform:none;color:var(--ink)}
.actions{display:flex;gap:.6rem;margin:.9rem 0;flex-wrap:wrap}

/* ---- Links (underline-draw) ---------------------------------------------- */
.link,.underline-draw,.content a{
  color:var(--navy);font-weight:500;text-decoration:none;
  background-image:linear-gradient(var(--blue),var(--blue));
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--reveal-ease),color .2s var(--ui-ease);
}
.link:hover,.underline-draw:hover,.underline-draw:focus-visible,.content a:hover{background-size:100% 1.5px}
.data-table tbody tr:hover .link{background-size:100% 1.5px}

/* ---- Forms ---------------------------------------------------------------- */
input,select{
  font-family:inherit;font-size:.92rem;padding:10px 13px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);
  transition:border-color .22s var(--ui-ease),box-shadow .22s var(--ui-ease);
}
input::placeholder{color:#9aa4b2}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,102,255,.14)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:.6rem 0}
.form-grid label,.toolbar label,.login-card label{display:flex;flex-direction:column;font-size:.8rem;font-weight:600;color:var(--ink);gap:.35rem}
.toolbar{display:flex;gap:.6rem;align-items:flex-end;margin:1.1rem 0;flex-wrap:wrap}
.checkbox{flex-direction:row!important;align-items:center;gap:.4rem;font-weight:500}

/* ---- Key/value lists ------------------------------------------------------ */
.kv{display:grid;grid-template-columns:180px 1fr;gap:.45rem 1rem;margin:.6rem 0}
.kv dt{font-weight:600;color:var(--slate);font-size:.85rem}
.kv dd{margin:0}

/* ---- Status text / notices ----------------------------------------------- */
.error{color:var(--danger);font-weight:600}
.success{color:var(--ok);font-weight:600}
.muted{color:var(--slate);font-size:.9rem}
.warning-text{background:#fff8e1;border:1px solid #ffe082;color:#7a5c00;padding:.85rem 1rem;border-radius:var(--radius-sm)}
.amnesty-banner{background:linear-gradient(90deg,#dc2626,#b91c1c);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-weight:600;box-shadow:var(--shadow-low)}
.amnesty-banner a{color:#fff;margin-left:1rem;background-image:linear-gradient(#fff,#fff);text-decoration:none}

/* ---- Login card ----------------------------------------------------------- */
.login-card{max-width:392px;margin:5rem auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:40px 38px;box-shadow:var(--shadow-high)}
.login-card form{display:flex;flex-direction:column;gap:.9rem;margin-top:1.2rem}
.login-card h2{font-size:1.5rem}
.login-sub{color:var(--slate);font-size:.9rem;margin-top:6px}

/* ---- Centered auth (login / 2FA / MFA enroll) — deliberately minimal ------ */
/* Internal-only tool: brandmark + card, no description of what the system is. */
.auth-center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px;background:var(--mist)}
.auth-brandmark{display:flex;align-items:center;gap:12px}
.auth-badge{width:46px;height:46px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,102,255,.16);flex-shrink:0}
.auth-badge img{width:34px;height:34px;object-fit:contain}
.auth-wordmark{font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--navy)}
.auth-center .login-card{margin:0}
.recovery-codes{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.recovery-codes li code{font-family:var(--font-mono);font-size:.82rem;background:var(--mist);border:1px solid var(--line);border-radius:6px;padding:.35rem .5rem;display:block;text-align:center}
.login-card code{font-family:var(--font-mono);font-size:.84rem;background:var(--mist);border:1px solid var(--line);border-radius:6px;padding:.12rem .4rem;word-break:break-all}
.qr{border-radius:12px;margin:.5rem 0;box-shadow:var(--shadow-low);max-width:100%;height:auto}

/* ---- Empty / error states ------------------------------------------------- */
.empty-state{max-width:460px;margin:12vh auto;text-align:center;padding:2rem}
.empty-state .empty-icon{width:64px;height:64px;border-radius:18px;background:var(--blue-bg);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.empty-state .empty-icon.danger{background:var(--danger-bg);color:var(--danger)}
.empty-state .empty-icon svg{width:30px;height:30px}
.empty-state .empty-num{font-size:3.4rem;font-weight:600;color:var(--navy);letter-spacing:-.03em;line-height:1;margin-bottom:.2rem}
.empty-state h1{margin:0}
.empty-state h2{color:var(--navy);font-size:1.35rem;margin:.2rem 0}
.empty-state p{margin:.6rem 0 1.5rem}
.empty-state .btn{text-decoration:none}
@media (max-width:860px){
  .auth-center{padding:28px 18px}
}

/* ---- Reveal + skeleton ---------------------------------------------------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.reveal{animation:fadeUp .7s var(--reveal-ease) both}
.r1{animation-delay:.04s}.r2{animation-delay:.10s}.r3{animation-delay:.16s}.r4{animation-delay:.22s}.r5{animation-delay:.29s}.r6{animation-delay:.36s}
@keyframes shimmer{100%{background-position:-200% 0}}
.skeleton{border-radius:8px;background:linear-gradient(90deg,#eef1f5 25%,#e2e7ee 37%,#eef1f5 63%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;color:transparent;min-height:1em}
.skeleton-row{height:44px}
.skeleton-stack{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- Blazor framework bits ------------------------------------------------ */
.valid.modified:not([type=checkbox]){outline:1px solid var(--ok)}
.invalid{outline:1px solid var(--danger)}
.validation-message{color:var(--danger);font-size:.85rem}
#blazor-error-ui{
  background:#fff3cd;color:#664d03;bottom:0;box-shadow:0 -1px 4px rgba(0,0,0,.15);
  display:none;left:0;padding:.7rem 1.2rem;position:fixed;width:100%;z-index:1000;font-size:.9rem;
}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.9rem;top:.6rem}
.blazor-error-boundary{background:var(--danger);padding:1rem;color:#fff;border-radius:var(--radius-sm)}
.blazor-error-boundary::after{content:"Došlo je do greške."}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none}
  .skeleton{animation:none}
  *{transition:none!important}
}