/* CoconutBot — zajednički dizajn sistem (sve strane). Tamna, mirna podloga; ćilibar (kokos) kao akcenat.
   Boje, razmaci i komponente su OVDE — strane imaju samo svoje specifičnosti. */
:root{
  --bg:#0e1013; --bg2:#12151a; --panel:#161a20; --panel2:#1c2129; --hover:#20262f;
  --line:#252b34; --line2:#313844;
  --text:#e9ebee; --text2:#b9bfc8; --muted:#848c98;
  --accent:#f2a93b; --accent2:#ffc56e; --accent-ink:#1b1305; --accent-soft:rgba(242,169,59,.12);
  --ok:#3ecf8e; --ok-soft:rgba(62,207,142,.12);
  --warn:#f2c14e; --warn-soft:rgba(242,193,78,.13);
  --bad:#ff6b6b; --bad-soft:rgba(255,107,107,.12);
  --info:#6aa8ff; --info-soft:rgba(106,168,255,.12);
  --r:10px; --r-sm:7px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --side:236px;
  /* stari nazivi promenljivih (search.html i ostale ih koriste) → nove boje */
  --surface:var(--panel); --surface2:var(--panel2); --surface-2:var(--panel2); --border:var(--line); --text-muted:var(--muted);
  --font-mono:var(--mono); --font-display:var(--font); --font-body:var(--font); --accent-dim:rgba(242,169,59,.35);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── okvir: bočni meni + sadržaj ── */
.cb-side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;padding:18px 14px;z-index:60}
.cb-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 10px;color:var(--text)!important;text-decoration:none!important}
.cb-brand svg{width:30px;height:30px;flex-shrink:0}
.cb-brand b{display:block;font-size:15.5px;letter-spacing:-.2px}
.cb-brand small{display:block;font-size:11.5px;color:var(--muted);margin-top:-2px}
.cb-nav{display:flex;flex-direction:column;gap:2px}
.cb-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:var(--text2);font-weight:500;text-decoration:none!important}
.cb-nav a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:.85}
.cb-nav a:hover{background:var(--hover);color:var(--text)}
.cb-nav a.on{background:var(--accent-soft);color:var(--accent2)}
.cb-ctx{margin-top:auto;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.cb-ctx label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.cb-ctx select{width:100%}
.cb-ctx p{margin:7px 0 0;font-size:11.5px;color:var(--muted);line-height:1.4}
.cb-user{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;font-size:12.5px;color:var(--muted)}
.cb-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-user button{padding:5px 10px;font-size:12px}
body.cb-app{padding-left:var(--side)}
.shell{max-width:1260px;margin:0 auto;padding:30px 34px 70px}

/* zaglavlje strane */
.cb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cb-head h1{margin:0;font-size:25px;letter-spacing:-.4px;line-height:1.2}
.cb-head p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.cb-head .cb-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── komponente ── */
.panel,.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:18px}
.panel h2,.card h2,.section-title{margin:0 0 14px;font-size:15px;font-weight:650;letter-spacing:-.1px;color:var(--text)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.panel-head h2{margin:0}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.mono{font-family:var(--mono)}

button,.btn{font:inherit;font-size:13.5px;font-weight:550;border-radius:8px;padding:8px 14px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:7px;line-height:1.2;text-decoration:none!important;transition:background .15s,border-color .15s}
button:hover,.btn:hover{background:var(--hover);border-color:#3b4350}
button:disabled{opacity:.5;cursor:default}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}
button.primary:hover,.btn.primary:hover{background:var(--accent2);border-color:var(--accent2)}
button.ghost,.btn.ghost{background:transparent}
button.danger,.btn.danger{color:var(--bad);border-color:rgba(255,107,107,.35);background:transparent}
button.danger:hover{background:var(--bad-soft)}
button.sm,.btn.sm{padding:5px 10px;font-size:12.5px}

input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],input[type=url],input[type=tel],input:not([type]),select,textarea{font:inherit;font-size:13.5px;color:var(--text);background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:8px 11px;min-height:36px;width:100%;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:#6c7480}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
select{cursor:pointer}
label{font-size:12.5px;color:var(--text2)}
textarea{min-height:70px;resize:vertical}
input[type=date]{color-scheme:dark}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover td{background:rgba(255,255,255,.02)}
tbody tr:last-child td{border-bottom:0}
.table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:var(--panel)}
.table-wrap table th:first-child{border-top-left-radius:var(--r)}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--panel2);color:var(--text2)}
.badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.off{background:var(--panel2);color:var(--muted)}
.chip{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--panel2);color:var(--text2);border:1px solid var(--line2);white-space:nowrap}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.kpi .v{font-size:28px;font-weight:700;letter-spacing:-.6px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:4px}
.kpi.warn .v{color:var(--warn)} .kpi.bad .v{color:var(--bad)} .kpi.ok .v{color:var(--ok)}

.empty{padding:36px 16px;text-align:center;color:var(--muted)}
.cb-toast{position:fixed;right:22px;bottom:22px;z-index:200;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--accent);color:var(--text);padding:11px 16px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:420px;font-size:13.5px;opacity:0;transform:translateY(8px);transition:all .2s}
.cb-toast.on{opacity:1;transform:none}
.cb-toast.bad{border-left-color:var(--bad)} .cb-toast.ok{border-left-color:var(--ok)}

/* modal (search.html i ostale koriste .modal-overlay/.modal) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:150;padding:20px}
.modal-overlay.open,.modal-overlay.show,.modal-overlay[style*="flex"]{display:flex}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:22px;width:min(520px,100%);max-height:90vh;overflow:auto}
.modal h3{margin:0 0 14px;font-size:17px}
.modal label{display:block;margin:12px 0 6px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}

/* telefon: meni gore */
@media (max-width:900px){
  body.cb-app{padding-left:0}
  .cb-side{position:sticky;top:0;inset:auto;width:auto;height:auto;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .cb-brand small,.cb-ctx p,.cb-ctx label,.cb-user span{display:none}
  .cb-brand{padding:0}
  .cb-nav{flex-direction:row}
  .cb-nav a{padding:7px 10px;white-space:nowrap}
  .cb-nav a span{display:none}
  .cb-ctx{margin:0;padding:0;border:0;background:none;min-width:150px}
  .shell{padding:20px 16px 50px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:13px 14px}
  .kpi .v{font-size:23px}
}
@media print{
  .cb-side,.cb-noprint{display:none!important}
  body.cb-app{padding-left:0}
  body{background:#fff;color:#111}
}