/* Rok radar — styles. No framework, no external dependencies. */

:root {
  --bg:#eef1f6; --surface:#fff; --surface-2:#e6ebf3;
  --text:#151c29; --text-2:#46536a; --text-3:#6f7b8f;
  --line:#d2dae6; --line-2:#bcc7d8;
  --accent:#1f4e79; --accent-soft:#e3ecf5;

  --bad:#b3261e;     --bad-bg:#fae7e5;
  --warn:#a9631a;    --warn-bg:#fbeadb;
  --soon:#8a6d1f;    --soon-bg:#fbf3d8;
  --good:#2e6b4f;    --good-bg:#e2f0e9;
  --unknown:#68738a; --unknown-bg:#e9edf3;

  --shadow:0 1px 2px rgba(21,28,41,.06), 0 4px 12px rgba(21,28,41,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#10141b; --surface:#171d27; --surface-2:#1f2734;
    --text:#e6eaf1; --text-2:#adb8c9; --text-3:#7d8899;
    --line:#293241; --line-2:#3a4557;
    --accent:#7faad8; --accent-soft:#1b2836;
    --bad:#f0857c;     --bad-bg:#33191a;
    --warn:#e0a65c;    --warn-bg:#332510;
    --soon:#d9c26a;    --soon-bg:#2e2913;
    --good:#7cc5a2;    --good-bg:#14291f;
    --unknown:#93a0b4; --unknown-bg:#1d242f;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* --------------------------------------------------------------- login */
.login-body { display:grid; place-items:center; min-height:100vh; padding:24px; }
.login {
  background:var(--surface); padding:36px 34px; border-radius:10px;
  box-shadow:var(--shadow); width:min(100%, 380px);
  display:flex; flex-direction:column; gap:14px;
}
.login-mark {
  width:46px; height:46px; border-radius:9px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:700; letter-spacing:.04em;
}
.login h1 { margin:4px 0 0; font-size:23px; letter-spacing:-.01em; }
.login-sub { margin:0 0 6px; color:var(--text-3); font-size:13.5px; }
.login label { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--text-2); }
.login input {
  padding:10px 12px; border:1px solid var(--line-2); border-radius:6px;
  background:var(--surface); color:var(--text); font-size:15px;
}
.login input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.login button {
  margin-top:6px; padding:11px; border:0; border-radius:6px; cursor:pointer;
  background:var(--accent); color:#fff; font-size:15px; font-weight:600;
}
.login button:hover { filter:brightness(1.1); }
.error {
  margin:0; padding:9px 12px; border-radius:6px; font-size:13.5px;
  background:var(--bad-bg); color:var(--bad); border-left:3px solid var(--bad);
}

/* --------------------------------------------------------------- shell */
.shell { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }

.sidebar {
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 0;
  /* stays in view while the table scrolls — otherwise the bottom group
     (Korisnici / Moj nalog) would sit below a very long page */
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand {
  display:flex; align-items:center; gap:9px; padding:0 18px 18px;
  font-weight:700; font-size:16px; border-bottom:1px solid var(--line);
}
.brand-mark {
  width:30px; height:30px; border-radius:7px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:12px; letter-spacing:.03em;
}
.sidebar nav { display:flex; flex-direction:column; padding:12px 10px; gap:2px; flex:1; }
.sidebar nav a {
  display:flex; flex-direction:column; gap:2px; padding:10px 12px;
  border-radius:7px; text-decoration:none; color:var(--text);
}
.sidebar nav a span { font-size:12px; color:var(--text-3); line-height:1.35; }
.sidebar nav a:hover { background:var(--surface-2); }
.sidebar nav a.active { background:var(--accent-soft); }
.sidebar nav a.active strong { color:var(--accent); }
.sidebar-foot { padding:10px 10px 0; border-top:1px solid var(--line); font-size:13px; }

/* settings / accounts — separate from the data pages above */
.system-nav { display:flex; flex-direction:column; gap:1px; margin-bottom:10px; }
.system-nav a {
  display:block; padding:7px 12px; border-radius:6px;
  text-decoration:none; color:var(--text-2); font-size:13px;
}
.system-nav a strong { font-weight:500; }
.system-nav a:hover { background:var(--surface-2); color:var(--text); }
.system-nav a.active { background:var(--accent-soft); }
.system-nav a.active strong { color:var(--accent); font-weight:600; }

.whoami { color:var(--text-3); margin:0 8px 5px; font-size:12.5px; }
.logout {
  color:var(--accent); background:none; border:0; margin:0 8px 2px; padding:0;
  font:inherit; cursor:pointer; text-decoration:none;
}
.logout:hover { text-decoration:underline; }

.main { padding:22px 26px 60px; min-width:0; }

/* ----------------------------------------------------------- page head */
.page-head {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap; margin-bottom:16px;
}
.page-head h1 { margin:0; font-size:22px; letter-spacing:-.01em; }
.count { margin:3px 0 0; color:var(--text-3); font-size:13px; }
.tools { display:flex; gap:8px; }
.tools input[type="search"] {
  padding:8px 12px; min-width:230px; border:1px solid var(--line-2);
  border-radius:6px; background:var(--surface); color:var(--text); font-size:14px;
}

/* ------------------------------------------------------------- filters */
.filters {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:11px 14px; margin-bottom:14px; font-size:13.5px;
}
.filters select {
  padding:6px 9px; border:1px solid var(--line-2); border-radius:6px;
  background:var(--surface); color:var(--text);
}
.toggle { display:flex; align-items:center; gap:6px; color:var(--text-2); cursor:pointer; }
.chips { display:flex; gap:5px; flex-wrap:wrap; }
.chip {
  border:1px solid var(--line-2); background:var(--surface); color:var(--text-2);
  padding:5px 11px; border-radius:20px; cursor:pointer; font-size:12.5px;
}
.chip:hover { border-color:var(--accent); }
.chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip.s-expired.active  { background:var(--bad);  border-color:var(--bad); }
.chip.s-critical.active { background:var(--warn); border-color:var(--warn); }
.chip.s-soon.active     { background:var(--soon); border-color:var(--soon); }
.chip.s-ok.active       { background:var(--good); border-color:var(--good); }
.btn-quiet {
  border:1px solid var(--line-2); background:var(--surface); color:var(--text-2);
  padding:6px 12px; border-radius:6px; cursor:pointer; font-size:13px;
}
.btn-quiet:hover { border-color:var(--accent); color:var(--accent); }

/* --------------------------------------------------------------- table */
.table-wrap {
  overflow-x:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow);
}
table.grid { border-collapse:collapse; width:100%; font-size:13.5px; }
table.grid th, table.grid td {
  padding:7px 11px; text-align:left; border-bottom:1px solid var(--line);
  white-space:nowrap; max-width:340px; overflow:hidden; text-overflow:ellipsis;
}
table.grid thead th {
  background:var(--surface-2); color:var(--text-2); font-weight:600;
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  position:sticky; top:0; z-index:2;
}
table.grid thead tr:nth-child(2) th { position:static; padding:5px 7px; background:var(--surface); }
table.grid thead tr:nth-child(2) input {
  width:100%; min-width:80px; padding:4px 7px; font-size:12.5px;
  border:1px solid var(--line); border-radius:4px;
  background:var(--bg); color:var(--text);
}
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--accent); }
th.sorted::after { content:' ▲'; font-size:9px; }
th.sorted.desc::after { content:' ▼'; }
table.grid tbody tr { cursor:pointer; }
table.grid tbody tr:hover { background:var(--surface-2); }
table.grid tbody tr:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
td.days { font-weight:600; }
td.strong { font-weight:700; color:var(--bad); }
.empty { text-align:center; color:var(--text-3); padding:26px !important; }

/* status stripe on the row — a left bar keeps text readable */
tr.s-expired  td:first-child { box-shadow:inset 3px 0 0 var(--bad); }
tr.s-critical td:first-child { box-shadow:inset 3px 0 0 var(--warn); }
tr.s-soon     td:first-child { box-shadow:inset 3px 0 0 var(--soon); }
tr.s-ok       td:first-child { box-shadow:inset 3px 0 0 var(--good); }
td.s-expired  { color:var(--bad); }
td.s-critical { color:var(--warn); }
td.s-soon     { color:var(--soon); }
td.s-ok       { color:var(--good); }

/* -------------------------------------------------------------- editing */
.toggle-edit { padding:2px 9px; border-radius:20px; border:1px solid var(--line-2); }
.toggle-edit:has(input:checked) {
  background:var(--warn-bg); border-color:var(--warn); color:var(--warn); font-weight:600;
}
table.grid.editing tbody tr { cursor:default; }
td.cell-edit { cursor:text; box-shadow:inset 0 -1px 0 var(--line-2); }
td.cell-edit:hover { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
td.cell-edit input, td.cell-edit select {
  width:100%; min-width:90px; padding:3px 6px; font:inherit; font-size:13px;
  border:1px solid var(--accent); border-radius:4px;
  background:var(--surface); color:var(--text);
}
td .saving { color:var(--text-3); }
tr.manual td:first-child::before {
  content:'✎ '; color:var(--accent); font-size:11px;
}
.dialog-actions { display:flex; gap:8px; margin-top:6px; }

/* --------------------------------------------------------------- pager */
.pager { display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.pager button {
  border:1px solid var(--line-2); background:var(--surface); color:var(--text-2);
  padding:6px 11px; border-radius:6px; cursor:pointer; font-size:13px;
}
.pager button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.pager button.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.pager button:disabled { opacity:.4; cursor:default; }
.page-info { margin-left:8px; color:var(--text-3); font-size:12.5px; }

/* --------------------------------------------------------------- cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:16px; }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; box-shadow:var(--shadow);
}
.card-value { font-size:27px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.card-label { font-size:12.5px; color:var(--text-3); margin-top:2px; }
.card.s-expired  .card-value { color:var(--bad); }
.card.s-critical .card-value { color:var(--warn); }
.card.s-unknown  .card-value { color:var(--unknown); }

/* --------------------------------------------------------------- users */
.panel {
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow);
}
.panel.narrow { max-width:460px; }
.panel h2 { margin:0 0 12px; font-size:16px; }
.section-title { margin:26px 0 10px; font-size:16px; }

.form-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.form-col { display:flex; flex-direction:column; gap:12px; }
.form-row label, .form-col label { display:flex; flex-direction:column; gap:4px; }
.form-row label span, .form-col label span { font-size:12px; color:var(--text-2); }
.form-row input, .form-row select,
.form-col input, .form-col select {
  padding:8px 10px; border:1px solid var(--line-2); border-radius:6px;
  background:var(--surface); color:var(--text); font-size:14px; min-width:190px;
}
.form-row input:focus-visible, .form-col input:focus-visible,
.form-row select:focus-visible {
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
.btn {
  padding:9px 16px; border:0; border-radius:6px; cursor:pointer;
  background:var(--accent); color:#fff; font-size:14px; font-weight:600;
}
.btn:hover { filter:brightness(1.1); }

.notice {
  margin:0 0 14px; padding:9px 12px; border-radius:6px; font-size:13.5px;
  background:var(--unknown-bg); color:var(--text-2);
  border-left:3px solid var(--unknown);
}
.notice.success { background:var(--good-bg); color:var(--good); border-left-color:var(--good); }
.main > .error { margin-bottom:14px; }

.badge {
  display:inline-block; padding:2px 8px; border-radius:20px; font-size:11.5px;
  background:var(--unknown-bg); color:var(--unknown); white-space:nowrap;
}
.badge-admin { background:var(--accent-soft); color:var(--accent); }
.badge-ok    { background:var(--good-bg);     color:var(--good); }
.badge-bad   { background:var(--bad-bg);      color:var(--bad); }
.tag { color:var(--text-3); font-size:11.5px; font-style:italic; }
.actions { display:flex; gap:5px; flex-wrap:wrap; }
.actions .btn-quiet { padding:4px 9px; font-size:12px; }
tr.inactive td { opacity:.55; }
tr.inactive td:first-child { box-shadow:inset 3px 0 0 var(--unknown); }

/* ------------------------------------------------------------ calendar */
.month { margin-bottom: 22px; }
.month-head {
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.month-head h2 { margin:0; font-size:17px; text-transform:capitalize; }
.month-counts { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; }
.month-counts strong { color:var(--text-2); font-weight:600; }
.month-counts strong.strong { color:var(--bad); }

/* ------------------------------------------------------------- quality */
.quality-group { margin-bottom: 26px; }
.quality-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:10px; }
.quality-head h2 { margin:0 0 2px; font-size:16px; }
.quality-head .count { max-width:70ch; }
.quality-count {
  min-width:74px; text-align:center; padding:8px 12px; border-radius:8px;
  font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15;
  background:var(--surface-2); color:var(--text-2);
}
.quality-count.s-expired { background:var(--bad-bg);  color:var(--bad); }
.quality-count.s-ok      { background:var(--good-bg); color:var(--good); }

/* -------------------------------------------------------------- detail */
dialog.detail {
  border:0; border-radius:10px; padding:22px 26px; max-width:min(760px,92vw);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
}
dialog.detail::backdrop { background:rgba(10,14,20,.5); }
dialog.detail h2 { margin:0 0 14px; font-size:18px; }
dialog.detail h3 { margin:18px 0 8px; font-size:14px; color:var(--text-2); }
dialog.detail dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 16px; font-size:13.5px; }
dialog.detail dt { color:var(--text-3); white-space:nowrap; }
dialog.detail dd { margin:0; word-break:break-word; }
dialog.detail form { margin-top:18px; text-align:right; }

@media (max-width:820px) {
  .shell { grid-template-columns:1fr; }
  .sidebar {
    border-right:0; border-bottom:1px solid var(--line);
    position:static; height:auto; overflow:visible;
  }
  .sidebar nav { flex-direction:row; overflow-x:auto; }
  .sidebar nav a span { display:none; }
  .sidebar-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .system-nav { flex-direction:row; margin-bottom:0; }
  .whoami { margin:0; }
  .main { padding:16px; }
}