/* Design tokens — sinchronizuoti su torasjob DIZAINO_SPECIFIKACIJA.md */
:root {
  --bg: #0f1115; --surface: #171a21; --surface-2: #1f232c; --border: #2a2f3a;
  --text: #e6e8ec; --muted: #8b93a3; --accent: #4f8cff;
  --font-ui: 'Public Sans', system-ui, sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 8px; --gap: 16px;

  /* Unit status colors */
  --st-vacant: #2e7d4f; --st-reserved: #3d6fd1; --st-rented: #4a5568;
  --st-debt: #d64545; --st-expiring: #e0912f; --st-maintenance: #8a5cd1; --st-common: #2a2f3a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font-ui); display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
body.bare { display: grid; place-items: center; grid-template-columns: 1fr; }
.num, td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap); }
.brand { font-weight: 700; font-size: 18px; } .brand span, .login h1 span { color: var(--accent); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a { color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: var(--radius); }
.sidebar nav a:hover { background: var(--surface-2); color: var(--text); }
.userbox { margin-top: auto; font-size: 12px; color: var(--muted); display: grid; gap: 6px; }
.main { padding: 24px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.kpis { display: flex; gap: var(--gap); }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.kpi span { display: block; font-size: 12px; color: var(--muted); } .kpi b { font-size: 18px; }
.tabs { display: flex; gap: 4px; margin: 20px 0 10px; }
.tabs button { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: var(--radius); cursor: pointer; font: inherit; }
.tabs button.active { color: var(--text); border-color: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--muted); font-size: 12px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: -8px; }
.legend .st-vacant{background:var(--st-vacant)} .legend .st-reserved{background:var(--st-reserved)} .legend .st-rented{background:var(--st-rented)}
.legend .st-debt{background:var(--st-debt)} .legend .st-expiring{background:var(--st-expiring)} .legend .st-maintenance{background:var(--st-maintenance)} .legend .st-common{background:var(--st-common);border:1px solid var(--muted)}
.plan { margin-top: var(--gap); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 420px; padding: var(--gap); }
.plan svg .unit { stroke: var(--bg); stroke-width: 1; cursor: pointer; transition: opacity .15s; } .plan svg .unit:hover { opacity: .8; }
.muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.login { width: 340px; display: grid; gap: 12px; } .login h1 { margin: 0 0 8px; }
label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
input, select, textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: var(--radius); font: inherit; }
.btn { background: var(--accent); color: #fff; border: 0; padding: 9px 14px; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; }
.btn-ghost { background: none; border: 1px solid var(--border); color: var(--muted); padding: 4px 8px; border-radius: var(--radius); cursor: pointer; font: inherit; }
.alert { background: #3a1d1d; border: 1px solid var(--st-debt); padding: 8px 10px; border-radius: var(--radius); }
.tabs a { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: var(--radius); text-decoration: none; }
.tabs a.active { color: var(--text); border-color: var(--accent); }
.tabs a.btn-ghost { margin-left: auto; }

/* Plan editor (F1 stage A) */
.pe-warnings { display: grid; gap: 6px; margin-bottom: 8px; } .pe-warnings p { margin: 0; }
.pe-toolbar { display: grid; gap: 4px; font-size: 12px; margin-bottom: 8px; }
.pe-toolbar #pe-mode { font-size: 13px; color: var(--text); }
kbd { font-family: var(--font-num); font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.pe-wrap { display: grid; grid-template-columns: 1fr 280px; gap: var(--gap); }
.pe-canvas { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: calc(100vh - 260px); min-height: 420px; }
.pe-canvas svg { width: 100%; height: 100%; display: block; cursor: crosshair; user-select: none; }
.pe-canvas.panning svg { cursor: grab; }
.pe-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap); display: grid; gap: 10px; align-content: start; max-height: calc(100vh - 260px); overflow: auto; }
.pe-panel h2 { margin: 0; font-size: 15px; }
.pe-panel form { display: grid; gap: 10px; }
.pe-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-danger { color: var(--st-debt); border-color: var(--st-debt); }
.pe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12px; }
.pe-list li { display: flex; justify-content: space-between; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.pe-list li:hover, .pe-list li.sel { background: var(--surface-2); }
.pe-list .num { color: var(--muted); }
.pe-list li.unplaced { color: var(--muted); font-style: italic; }
#pe-svg .pe-prem { fill: var(--accent); fill-opacity: .25; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
#pe-svg .pe-prem.sel { fill: var(--st-expiring); stroke: var(--st-expiring); fill-opacity: .35; }
#pe-svg .pe-prem.noarea { stroke-dasharray: 6 4; }
#pe-svg .pe-label { font: 600 13px var(--font-ui); fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; text-anchor: middle; pointer-events: none; }
#pe-svg .pe-label-handle { fill: #111; cursor: move; }
#pe-svg .pe-draft { fill: var(--st-vacant); fill-opacity: .25; stroke: var(--st-vacant); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
#pe-svg .pe-vtx { fill: #fff; stroke: var(--st-vacant); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
#pe-svg .pe-vtx.first { fill: var(--st-vacant); }
#pe-svg .pe-edge { stroke: transparent; stroke-width: 12; vector-effect: non-scaling-stroke; fill: none; cursor: copy; }
@media (max-width: 1100px) { .pe-wrap { grid-template-columns: 1fr; } }
@media (max-width: 760px) { body { grid-template-columns: 1fr; } .sidebar { flex-direction: row; overflow-x: auto; } .sidebar nav { flex-direction: row; } }