:root {
    color-scheme: light dark;
    --bg: #f6f7fb;
    --surface: #ffffff;
    --border: #e3e5eb;
    --text: #1a1d23;
    --text-muted: #6b7280;
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-soft: #eef0ff;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --warning-bg: #fef8e8;
    --warning-border: #e8a317;
    --success: #15803d;
    --success-soft: #ecfdf3;
    --scope-personal: #0f766e;
    --scope-personal-soft: #f0fdfa;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(20, 20, 40, 0.04), 0 4px 12px rgba(20, 20, 40, 0.05);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0e0f13;
        --surface: #191b21;
        --border: #2b2e37;
        --text: #e7e8ec;
        --text-muted: #9096a3;
        --accent: #8b85f5;
        --accent-hover: #a29cf7;
        --accent-soft: #211f3a;
        --danger: #f37171;
        --danger-soft: #2a1618;
        --warning-bg: #2a220e;
        --warning-border: #c98a1f;
        --success: #4ade80;
        --success-soft: #142a1c;
        --scope-personal: #5eead4;
        --scope-personal-soft: #0f2e2b;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
    }
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    max-width: 1500px;
    margin: 0 auto;
    padding: 1.5rem 2rem 4rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 1.25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 2.5rem 0 0.4rem; }
h2 + p.hint { margin-top: 0; margin-bottom: 1rem; }

.toolbar { display: flex; justify-content: flex-start; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
.toolbar label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.35rem; }
.toolbar select { width: auto; min-width: 160px; }
.toolbar button { width: auto; }

nav.topnav {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
nav.topnav a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}
nav.topnav a:hover { background: var(--accent-soft); color: var(--accent); }
nav.topnav .nav-user { margin-left: auto; align-self: center; white-space: nowrap; }
nav.topnav .nav-user a { padding: 0; border-radius: 0; text-decoration: underline; }
nav.topnav a.active { background: var(--accent); color: #fff; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.75rem;
    overflow: hidden;
}

form.entry-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.75rem;
}
form.entry-form .full { grid-column: 1 / -1; }
form.entry-form label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.35rem; }
form.entry-form #hours_field { display: contents; }

input, select, textarea, button {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.55rem 0.7rem;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 7px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

button {
    cursor: pointer;
    font-weight: 600;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    padding: 0.6rem 1.1rem;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
form.entry-form button { grid-column: 1 / -1; }
form.entry-form #cancel_edit_btn { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
form.entry-form #cancel_edit_btn:hover { background: var(--bg); color: var(--text); }

.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.75rem; overflow-x: auto; }

/* izdaj-racune.php — "Za izdajo" accordion: <details>/<summary>, brez JS-a za odpri/zapri.
   Checkbox NE sme biti znotraj <summary> (klik nanj bi tedaj tudi zaprl/odprl accordion, kar
   je med brskalniki nekonsistentno), zato je sorojenec, absolutno pozicioniran čez summary —
   CSS grid neposredno na <details> se je izkazal za nezanesljivega (lomi native rendering). */
.accordion {
    padding: 1.25rem 1.25rem 1.25rem 3.25rem;
    overflow-x: visible;
    margin-bottom: 0.75rem;
}
.accordion > input[type="checkbox"] {
    width: 1rem; height: 1rem; position: absolute; left: 1.25rem;
    /* details padding-top (1.25rem) + pol razlike med summary line-height (1.5rem) in
       velikostjo checkboxa (1rem), da je navpično poravnan z besedilom ne glede na brskalnik. */
    top: calc(1.25rem + (1.5rem - 1rem) / 2);
}
.accordion > summary {
    cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 600; line-height: 1.5rem;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::marker { display: none; content: ""; }
.accordion > summary::after {
    content: "▾"; color: var(--text-muted); font-size: 0.8rem; font-weight: 400; margin-left: 0.5rem;
    transition: transform 0.15s;
}
.accordion:not([open]) > summary::after { transform: rotate(-90deg); }
.accordion > .accordion-body { margin-top: 0.75rem; }
.accordion tr.group-header td { background: var(--bg); }
.accordion tr.group-header:first-child td { border-top: none; }
/* Vsi zneski (postavke in Skupaj) v isti tretji celici — poravnava je zajamčena, ker gre za
   isti stolpec iste tabele, ne ločen element zunaj nje. */
/* Fiksna širina prvega stolpca (checkbox) — brez tega vsaka kartica avtomatsko preračuna svoje
   širine stolpcev glede na lastno vsebino, zato je bil zamik checkboxa različen od kartice do
   kartice (npr. pogodba z eno kratko postavko vs. delovni nalog z dolgim opisom). */
.accordion table td:nth-child(1) { width: 2rem; }
.accordion table td:nth-child(3) { text-align: right; white-space: nowrap; }
.accordion table td:nth-child(2) { overflow-wrap: break-word; word-break: break-word; }
.accordion tfoot td { border-top: 2px solid var(--border); border-bottom: none; font-size: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
/* No blanket nowrap: short values (dates, amounts, status) have no spaces so they never
   wrap anyway; long ones (customer names, descriptions) wrap instead of forcing scroll. */
thead th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--accent-soft); }
tbody tr:hover .hint { color: var(--text-muted); }

/* Delovni nalog: kratke vrednosti (datum, vrsta, ure, znesek) naj se nikoli ne prelomijo, ure
   in znesek desno poravnana za lažje primerjanje zneskov navzdol po tabeli. */
table.entries th:nth-child(1), table.entries td:nth-child(1),
table.entries th:nth-child(4), table.entries td:nth-child(4) { white-space: nowrap; }
table.entries th:nth-child(6), table.entries td:nth-child(6),
table.entries th:nth-child(7), table.entries td:nth-child(7) { white-space: nowrap; text-align: right; }

table.customers th:nth-child(5), table.customers td:nth-child(5) { white-space: nowrap; text-align: right; }

table.entries thead th:not(:last-child),
table.customers thead th:not(:last-child),
table.contracts thead th:not(:last-child) { cursor: pointer; user-select: none; }
table.entries thead th:not(:last-child):hover,
table.customers thead th:not(:last-child):hover,
table.contracts thead th:not(:last-child):hover { color: var(--accent); }
table.entries thead th .sort-indicator,
table.customers thead th .sort-indicator,
table.contracts thead th .sort-indicator { margin-left: 0.3em; color: var(--accent); }

/* Že fakturirani vnosi so zaključeni — vizualno umaknjeni v ozadje, da izstopajo tisti, ki
   še čakajo na urejanje/fakturiranje. */
table.entries tr.invoiced td { color: var(--text-muted); }
table.entries tr.invoiced:hover { background: var(--bg); }
.badge-invoiced {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--success);
    background: var(--success-soft);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* UJP (javni sektor) je samo informativna oznaka, ne dobro/slabo stanje kot .badge-invoiced —
   zato uporabi nevtralen accent, ne success zeleno. */
.badge-ujp {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-overdue {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--danger);
    background: var(--danger-soft);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.hint { font-size: 0.78rem; color: var(--text-muted); }

/* zapiski.php — flex vrstice namesto tabele (kratko besedilo bi v native table-layout raztegnilo
   stolpec in pustilo velike praznine pred datumom, glej render_note_rows()). */
.todo-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1rem; }
.todo-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--border); }
.todo-item:last-child { border-bottom: none; }
.todo-item:hover { background: var(--accent-soft); }
.todo-item input[type="checkbox"] { width: auto; flex-shrink: 0; }
.todo-text { flex: 1; min-width: 0; overflow-wrap: break-word; }
.todo-date { flex-shrink: 0; white-space: nowrap; }
.todo-actions { flex-shrink: 0; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; }
.todo-item.note-done { color: var(--text-muted); }
.todo-item.note-done:hover { background: var(--bg); }

/* Pogodbe: Opis je lahko dolg prost tekst — v seznamu naj deluje kot kratek naslov (obrezan,
   celotno besedilo na hover preko title), znesek pa naj se nikoli ne prelomi na dve vrstici. */
.truncate { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
td.nowrap { white-space: nowrap; }

.link-btn { width: auto; display: inline-block; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.15rem 0.4rem; font-weight: 500; }
.link-btn:hover { color: var(--danger); background: var(--danger-soft); border-radius: 5px; }

.checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-row input { width: auto; }

.import-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; }
.import-row h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.import-row .entry-form { margin: 0; border: none; padding: 0; box-shadow: none; }

.warning { display: block; background: var(--warning-bg); border-left: 3px solid var(--warning-border); padding: 0.5rem 0.75rem; font-size: 0.85rem; margin-top: 0.5rem; border-radius: 0 6px 6px 0; }
.has-notes textarea { background: var(--warning-bg); border-color: var(--warning-border); }
.imported-badge { color: var(--success); font-weight: 600; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* stroski.php — znesek obarvan glede na smer, kategorija kot barvno tonirani inline select
   (obseg firma/osebno/skupno/nekategorizirano), da se bere kot chip, a ostane pravi <select>
   za enoklik kategorizacijo (glej actions/expense_categorize.php). */
td.amount { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
td.amount.out { color: var(--danger); }
td.amount.in { color: var(--success); }

select.cat-select { width: auto; min-width: 190px; font-size: 0.85rem; padding: 0.4rem 0.55rem; }
select.cat-select.scope-firma { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
select.cat-select.scope-osebno { color: var(--scope-personal); border-color: var(--scope-personal); background: var(--scope-personal-soft); }
select.cat-select.scope-transfer { color: var(--text-muted); background: var(--bg); }
select.cat-select.scope-none { color: var(--warning-border); border-color: var(--warning-border); background: var(--warning-bg); }

/* stroski-kategorije.php — obseg kot majhna značka, isti vzorec kot .badge-invoiced/.badge-overdue. */
.chip-firma, .chip-osebno, .chip-transfer {
    display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.chip-firma { color: var(--accent); background: var(--accent-soft); }
.chip-osebno { color: var(--scope-personal); background: var(--scope-personal-soft); }
.chip-transfer { color: var(--text-muted); background: var(--bg); }

/* stroski-pregled.php — kartice s seštevki + dva palična panela (firma/osebno), brez JS knjižnice
   za grafe (širine paličk so preprosto inline % iz PHP) — v skladu z "brez build koraka". */
.expense-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.expense-stat { flex: 1; min-width: 160px; padding: 1rem 1.25rem; }
.expense-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; margin-bottom: 0.3rem; }
.expense-stat-value { font-size: 1.35rem; font-weight: 700; }
.expense-stat.firma .expense-stat-value { color: var(--accent); }
.expense-stat.osebno .expense-stat-value { color: var(--scope-personal); }
.expense-stat.neka .expense-stat-value { color: var(--warning-border); }

.expense-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.bar-panel { padding: 1.25rem 1.5rem; }
.bar-panel h2 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; }
.bar-panel.firma .bar-fill { background: var(--accent); }
.bar-panel.osebno .bar-fill { background: var(--scope-personal); }
.bar-row { display: grid; grid-template-columns: 160px 1fr 80px; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.bar-label { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: var(--bg); border-radius: 5px; height: 9px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; }
.bar-amount { font-size: 0.85rem; font-weight: 600; text-align: right; white-space: nowrap; }
.bar-total { font-size: 0.85rem; font-weight: 700; border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.2rem; }

@media (max-width: 640px) {
    body { padding: 1rem 1rem 3rem; }
    nav.topnav { gap: 0.15rem; }
    nav.topnav a { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
    .expense-panels { grid-template-columns: 1fr; }
}