:root {
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --border: #E4E1DA;
  --text: #1F2422;
  --text-muted: #6B7280;
  --accent: #0F766E;
  --accent-bg: #E6F4F1;
  --warn: #B45309;
  --warn-bg: #FEF3E2;
  --danger: #B91C1C;
  --danger-bg: #FDECEC;
  --lime: #65A30D;
  --lime-bg: #ECFCCB;
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute must always win over any class's `display` rule
   (e.g. .login-screen/.app set display:flex), otherwise both panels can show
   at once -- author CSS normally beats the UA stylesheet's [hidden] rule
   even at equal specificity, so we restate it explicitly here. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Work Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

button {
  font-family: inherit;
  cursor: pointer;
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 280px;
}

.login-card h1 { font-size: 18px; margin: 0 0 6px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.login-card input {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
}
.login-card button {
  padding: 10px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600;
}
.error { color: var(--danger); font-size: 13px; margin: 0; }

.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  height: 56px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 8px;
}
.brand { font-weight: 700; margin-right: 16px; }
.nav { padding: 6px 12px; border-radius: 6px; font-size: 13px; color: var(--text-muted); }
.nav.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.link-btn { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 13px; }

.content { flex: 1; padding: 24px 32px; overflow: hidden; display: flex; flex-direction: column; }

.list-panel, .detail-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px;
  overflow: auto; flex: 1; min-height: 0;
  max-width: 1600px;
  width: 100%;
}

/* Oprema: Seznam/Pokvarjeno/Nabava podzavihki znotraj enega list-panela */
.subtabs { display: flex; gap: 4px; margin: 2px 0 18px; border-bottom: 1px solid var(--border); }
.subtab {
  padding: 8px 14px; font-size: 13px; color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.subtab:hover:not(.active) { color: var(--text); }
.oprema-subview[hidden] { display: none; }

/* Slusalke (glavna, dolga tabela) levo, oddajniki+kovcki (kratka tabela)
   desno -- ko zmanjka prostora (ozek zaslon/okno), se sklada spodaj. */
.oprema-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 24px;
  align-items: start;
}
.oprema-split-main, .oprema-split-side { min-width: 0; }
@media (max-width: 860px) {
  .oprema-split { grid-template-columns: 1fr; }
}

.app-footer {
  margin-top: auto; padding: 14px 32px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); text-align: center; flex-shrink: 0;
}

.list-panel[hidden], .detail-panel[hidden] { display: none; }

.back-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted);
  cursor: pointer; margin-bottom: 16px; background: none; border: none; padding: 0; font-family: inherit;
}
.back-link:hover { color: var(--accent); }
.back-link::before { content: "\2190"; font-size: 14px; }

.section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid #F0EEE8;
}
.section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.list-header h1 { font-size: 20px; margin: 0; }
.filters { display: flex; gap: 8px; }
.filters select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--text-muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--border); }
td { padding: 8px; border-bottom: 1px solid #F0EEE8; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge.na_voljo { background: var(--accent-bg); color: var(--accent); }
.badge.rezervirano, .badge.v_uporabi { background: var(--warn-bg); color: var(--warn); }
.badge.v_servisu { background: #F0EEE8; color: var(--text-muted); }
.badge.uniceno, .badge.izgubljeno { background: var(--danger-bg); color: var(--danger); }

.hint { color: var(--text-muted); font-size: 13px; }

.detail-panel h2 { font-size: 18px; margin: 0 0 12px; }
.detail-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #F0EEE8; }
.detail-row span:first-child { color: var(--text-muted); }
.progress { height: 8px; border-radius: 999px; background: var(--accent-bg); overflow: hidden; margin: 12px 0; }
.progress > div { height: 100%; background: var(--accent); }

.detail-actions { display: flex; gap: 8px; margin-top: 16px; }
.detail-actions button {
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: #fff;
}
.detail-actions button.danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.detail-actions button.btn-warn { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }

/* --- Rezervacije --- */
.primary-btn {
  padding: 9px 14px; border-radius: 8px; border: none; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
}

.badge.potrjeno, .badge.v_teku { background: var(--accent-bg); color: var(--accent); }
.badge.na_cakanju { background: var(--warn-bg); color: var(--warn); }
.badge.zakljuceno { background: #F0EEE8; color: var(--text-muted); }
.badge.preklicano { background: var(--danger-bg); color: var(--danger); }
.badge.prednostna-predlagana { background: var(--warn-bg); color: var(--warn); }
.badge.prednostna-potrjena { background: var(--accent-bg); color: var(--accent); }

.rez-form { display: flex; flex-direction: column; gap: 14px; }
.rez-form .row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.rez-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-muted); }
.rez-form input, .rez-form select {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text);
}
.rez-form .radio-row { display: flex; gap: 18px; font-size: 13px; color: var(--text); }
.rez-form .radio-row label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.rez-form .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }

.avail-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.avail-row { display: flex; flex-direction: column; gap: 4px; }
.avail-row .label-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.avail-bar { height: 7px; border-radius: 999px; background: #F0EEE8; overflow: hidden; }
.avail-bar > div { height: 100%; background: var(--accent); }
.avail-bar.short > div { background: var(--warn); }

.warn-card { background: var(--warn-bg); border: 1px solid #F3D9AE; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.warn-card .title { font-size: 13px; font-weight: 700; color: var(--warn); }
.warn-card .body { font-size: 13px; color: #8A5A16; line-height: 1.5; }

.swap-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.swap-card .title { font-size: 13px; font-weight: 700; color: var(--text); }
.swap-card .body { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.swap-card button { align-self: flex-start; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent-bg); color: var(--accent); font-size: 12px; font-weight: 600; }

.rez-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rez-actions button { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: #fff; }
.rez-actions button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.rez-actions button.danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

/* --- Uporabniki --- */
.current-user { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.link-btn { margin-left: 12px; }

.badge.aktiven { background: var(--accent-bg); color: var(--accent); }
.badge.neaktiven { background: #F0EEE8; color: var(--text-muted); }
.badge.administrator { background: var(--warn-bg); color: var(--warn); }
.badge.komercialist { background: #F0EEE8; color: var(--text-muted); }

/* --- Status (zacetni zavihek) --- */
.stat-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin: 14px 0 6px;
}
.stat-group-label:first-of-type { margin-top: 0; }

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 6px;
}
.stat-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card .n { font-size: 22px; font-weight: 700; color: var(--accent); }
.stat-card .n .of { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.stat-card .label { font-size: 12px; color: var(--text-muted); }
.stat-card.low .n { color: var(--warn); }
.stat-card.critical .n { color: var(--danger); }

/* Stopnja amortizacije: 100% pomeni, da je oprema ze "odplacala" svojo nabavno
   vrednost -- to je dober/zeljen izid, zato je zelena; nizek odstotek (se ni
   povrnil strosek nakupa) je rdec. 4 stopnje: rdeca -> oranzna -> limeta -> zelena. */
.obraba-nizka { color: var(--danger); font-weight: 600; }      /* 0-49% */
.obraba-srednja { color: var(--warn); font-weight: 600; }       /* 50-74% */
.obraba-visoka { color: var(--lime); font-weight: 600; }        /* 75-99% */
.obraba-polna { color: var(--accent); font-weight: 600; }       /* 100% */

/* --- Odkupi (buyback) --- */
.badge.odkupljeno { background: var(--lime-bg); color: var(--lime); }

.checklist-group { margin-bottom: 14px; }
.checklist-group .checklist-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.checklist-group .checklist-head span { font-size: 12px; font-weight: 600; color: var(--text); }
.checklist-group .checklist-head button {
  font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: #fff;
}
.checklist-box {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; max-height: 160px; overflow: auto;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.checklist-box label {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); width: 90px;
}