/* MCL-DPP portal — zajednicki stil (teal/cyan, sidebar raspored) */
:root {
  --sidebar-width: 264px;
  --ink: #23415a;
  --heading: #173f4f;
  --muted: #5b7080;
  --accent: #0f766e;
  --teal-400: #2dd4bf;
  --cyan-500: #06b6d4;
  --emerald-500: #10b981;
  --border: rgba(148,163,184,.24);
  --danger: #dc2626;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink);
  font-family: 'Century Gothic', CenturyGothic, 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(180deg, #f4f7fb 0%, #e8edf3 100%);
  min-height: 100vh;
}

/* ---------- sidebar ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 10;
  display: flex; flex-direction: column; padding: 1.4rem 1rem;
  background: radial-gradient(circle at top left, rgba(6,182,212,.22), transparent 210px),
    linear-gradient(180deg, #0d3a45 0%, #173f4f 60%, #134e4a 100%);
  color: #d7e5ea;
}
.side-logo { padding: .4rem .8rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: .75rem; }
.side-logo img.logo { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; }
.side-logo .brand { font-size: 1.5rem; font-weight: 800; color: #fff; }
.side-logo .brand span { color: var(--teal-400); }
.side-logo .sub { font-size: .62rem; letter-spacing: .2em; color: var(--teal-400); font-weight: 700; }
.side-nav { flex: 1; margin-top: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.side-nav a {
  display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem;
  border-radius: 14px; color: #bfd5dc; text-decoration: none; font-size: .92rem; font-weight: 600;
  transition: background .15s, color .15s;
}
.side-nav a:hover { background: rgba(20,184,166,.14); color: #fff; }
.side-nav a.active {
  background: linear-gradient(135deg, rgba(6,182,212,.2), rgba(16,185,129,.14));
  color: var(--teal-400); box-shadow: inset 0 0 0 1px rgba(45,212,191,.25);
}
.side-user {
  padding: .9rem; border-radius: 14px; background: rgba(255,255,255,.06);
  font-size: .8rem;
}
.side-user .name { font-weight: 700; color: #fff; }
.side-user .mail { color: #9db8c1; word-break: break-all; }
.side-user a { color: var(--teal-400); text-decoration: none; font-weight: 700; }

/* ---------- glavni sadrzaj ---------- */
.main { margin-left: var(--sidebar-width); padding: 2rem 2.2rem 4rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.topbar h1 { margin: 0; font-size: 1.5rem; color: var(--heading); }
.topbar .who { font-size: .82rem; color: var(--muted); }

section.page { display: none; }
section.page.active { display: block; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ---------- kartice / tabele / dugmad ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; margin-bottom: 1.6rem; }
.card {
  background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 20px;
  padding: 1.3rem 1.4rem; box-shadow: 0 12px 32px rgba(15,23,42,.08);
}
.card .k { font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.card .v { font-size: 2rem; font-weight: 800; color: var(--accent); margin-top: .35rem; }
.card .s { font-size: .8rem; color: var(--muted); margin-top: .25rem; }

.panel {
  background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 20px;
  padding: 1.4rem 1.5rem; box-shadow: 0 12px 32px rgba(15,23,42,.08); margin-bottom: 1.4rem;
}

/* ---------- uputstvo (help box) ---------- */
.help {
  background: linear-gradient(135deg, rgba(6,182,212,.09), rgba(16,185,129,.07));
  border: 1.5px solid rgba(20,184,166,.3); border-radius: 16px;
  padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; font-size: .88rem; line-height: 1.75;
}
.help h3 {
  margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.help ol { margin: 0; padding-left: 1.3rem; }
.help li { margin-bottom: .3rem; }
.help .warn {
  margin-top: .7rem; padding: .6rem .9rem; border-radius: 10px;
  background: rgba(232,165,75,.14); color: #7a4e10; font-weight: 600;
}
.hint { font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.panel h2 { margin: 0 0 1rem; font-size: 1.05rem; color: var(--heading); }
.panel .desc { font-size: .82rem; color: var(--muted); margin: -.6rem 0 1rem; }

table.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tbl th {
  text-align: left; padding: .6rem .7rem; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--border);
}
.tbl td { padding: .65rem .7rem; border-bottom: 1px solid rgba(148,163,184,.15); }
.tbl tr:hover td { background: rgba(20,184,166,.05); }
.tbl code { font-size: .8rem; background: rgba(6,182,212,.1); padding: .12rem .4rem; border-radius: 6px; }

.badge { display: inline-block; padding: .18rem .6rem; border-radius: 99px; font-size: .72rem; font-weight: 700; }
.badge.draft { background: rgba(148,163,184,.2); color: #475569; }
.badge.issued { background: rgba(16,185,129,.16); color: #047857; }
.badge.revised { background: rgba(6,182,212,.16); color: #0e7490; }
.badge.withdrawn { background: rgba(220,38,38,.12); color: var(--danger); }
.badge.ok, .badge.active { background: rgba(16,185,129,.16); color: #047857; }
.badge.err, .badge.failed { background: rgba(220,38,38,.12); color: var(--danger); }

.btn {
  display: inline-block; padding: .55rem 1.1rem; border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: .85rem; font-weight: 700; text-decoration: none;
  background: linear-gradient(135deg, #0f766e, #06b6d4); color: #fff;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,118,110,.28); }
.btn.ghost { background: rgba(20,184,166,.12); color: var(--accent); }
.btn.danger { background: rgba(220,38,38,.1); color: var(--danger); }
.btn.small { padding: .35rem .7rem; font-size: .78rem; border-radius: 9px; }

.frow { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: .9rem; }
.frow > * { flex: 1; min-width: 200px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: .6rem .8rem; font-family: inherit; font-size: .88rem;
  border: 1.5px solid rgba(148,163,184,.35); border-radius: 11px; outline: none; background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.14); }
label.lbl { display: block; font-size: .75rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
textarea.code { font-family: 'Consolas', 'Courier New', monospace; font-size: .8rem; }

.notice { padding: .8rem 1rem; border-radius: 12px; font-size: .84rem; margin-bottom: 1rem; display: none; }
.notice.show { display: block; }
.notice.ok { background: rgba(16,185,129,.14); color: #047857; }
.notice.err { background: rgba(220,38,38,.1); color: var(--danger); }
.empty { color: var(--muted); font-size: .85rem; padding: 1.2rem 0; text-align: center; }
.qr-box { display: inline-block; background: #fff; padding: 1rem; border-radius: 16px; border: 1px solid var(--border); max-width: 100%; }
.qr-box svg { display: block; max-width: 100%; height: auto; }
pre.out { background: #0d2430; color: #9be8dc; padding: 1rem; border-radius: 14px; font-size: .78rem; overflow: auto; max-height: 420px; }
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.tbl-wrap { overflow-x: auto; }

/* ---------- animirani okvir (tragači oko polja) ---------- */
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes border-spin { to { --spin: 360deg; } }
.panel, .card, .help { position: relative; }
.panel::before, .card::before, .help::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--spin),
    transparent 0deg, #06b6d4 22deg, rgba(6,182,212,0) 60deg,
    transparent 180deg, #2dd4bf 202deg, rgba(45,212,191,0) 240deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-spin 7s linear infinite; pointer-events: none; z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .panel::before, .card::before, .help::before { animation: none; }
}
.panel table.tbl { min-width: 560px; }
textarea.code { min-width: 0; }
code, .tbl code { overflow-wrap: anywhere; }

/* ---------- mobilni prikaz ---------- */
@media (max-width: 900px) {
  .sidebar {
    position: static; width: 100%; flex-direction: row; flex-wrap: wrap;
    align-items: center; padding: .8rem 1rem; gap: .5rem;
  }
  .side-logo { padding: 0 .5rem; border-bottom: none; }
  .side-nav { flex: 1 1 100%; margin-top: .5rem; flex-direction: row; flex-wrap: wrap; gap: .3rem; }
  .side-nav a { padding: .5rem .8rem; font-size: .82rem; }
  .side-user { margin-left: auto; padding: .5rem .8rem; }
  .side-user .mail { display: none; }
  .main { margin-left: 0; padding: 1.2rem 1rem 3rem; }
  .topbar h1 { font-size: 1.2rem; }
  .frow > * { min-width: 100%; }
}