:root {
  --bg:        #0f172a;
  --surface:   #1e293b;
  --surface2:  #273549;
  --border:    #334155;
  --text:      #f1f5f9;
  --text-sec:  #94a3b8;
  --text-dim:  #64748b;
  --primary:   #6366f1;
  --primary-l: rgba(99,102,241,.15);
  --high:      #ef4444;
  --high-l:    rgba(239,68,68,.15);
  --mid:       #f59e0b;
  --mid-l:     rgba(245,158,11,.15);
  --low:       #22c55e;
  --low-l:     rgba(34,197,94,.15);
  --done:      #475569;
  --danger:    #dc2626;
  --cikel-men: #f87171;
  --cikel-fol: #60a5fa;
  --cikel-ovu: #34d399;
  --cikel-lut: #fbbf24;
  --nav-h:     64px;
  --header-h:  56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Header ── */
#app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
}
#app-header h1 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
#app-header .header-right { display: flex; gap: .5rem; align-items: center; }

/* ── Main content ── */
#app-main {
  margin-top: var(--header-h);
  margin-bottom: var(--nav-h);
  min-height: calc(100dvh - var(--header-h) - var(--nav-h));
  padding: 1rem;
  overflow-y: auto;
}

/* ── Bottom nav ── */
#bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.nav-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; border: none; background: none; color: var(--text-dim);
  font-size: .65rem; font-weight: 600; cursor: pointer; transition: color .15s;
  padding: .5rem 0;
}
.nav-tab .nav-icon { font-size: 1.3rem; line-height: 1; }
.nav-tab.active { color: var(--primary); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .55rem 1rem; border-radius: 8px; font-size: .875rem; font-weight: 600;
  border: none; cursor: pointer; transition: opacity .15s, background .15s;
}
.btn:active { opacity: .75; }
.btn-primary   { background: var(--primary);    color: #fff; }
.btn-secondary { background: var(--surface2);   color: var(--text); }
.btn-danger    { background: var(--danger);      color: #fff; }
.btn-ghost     { background: transparent; color: var(--text-sec); border: 1px solid var(--border); }
.btn-icon      { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%; font-size: 1.1rem; background: var(--surface2); color: var(--text); }
.btn-add       { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; font-size: 1.5rem; background: var(--primary); color: #fff; }
.btn-sm        { padding: .35rem .75rem; font-size: .8rem; }
.btn-full      { width: 100%; }

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

/* ── Task card ── */
.task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
  position: relative;
  border-left: 3px solid transparent;
  transition: opacity .2s;
}
.task-card.prioriteta-visoka { border-left-color: var(--high); }
.task-card.prioriteta-srednja { border-left-color: var(--mid); }
.task-card.prioriteta-nizka { border-left-color: var(--low); }
.task-card.stanje-dokoncano { opacity: .55; }

.task-naslov {
  font-size: .95rem; font-weight: 600; margin-bottom: .2rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
}
.task-opis  { font-size: .82rem; color: var(--text-sec); line-height: 1.5; margin-bottom: .55rem; }
.task-meta  { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.task-actions {
  display: flex; gap: .35rem; margin-top: .65rem; padding-top: .65rem;
  border-top: 1px solid var(--border);
}

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .2rem .55rem; border-radius: 20px; font-size: .72rem; font-weight: 600;
}
.badge-high  { background: var(--high-l); color: var(--high); }
.badge-mid   { background: var(--mid-l);  color: var(--mid); }
.badge-low   { background: var(--low-l);  color: var(--low); }
.badge-caka      { background: rgba(148,163,184,.15); color: #94a3b8; }
.badge-izvajanje { background: var(--primary-l);      color: var(--primary); }
.badge-dokoncano { background: rgba(71,85,105,.25);   color: var(--done); }
.badge-alarm     { background: rgba(251,191,36,.12);  color: #fbbf24; font-size: .7rem; }
.badge-overdue   { background: var(--high-l);         color: var(--high); font-size: .7rem; }

/* ── Filter tabs ── */
.filter-tabs { display: flex; gap: .35rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-tab {
  padding: .35rem .85rem; border-radius: 20px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--border); background: transparent; color: var(--text-sec); cursor: pointer;
  transition: all .15s;
}
.filter-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Empty state ── */
.empty-state {
  text-align: center; padding: 3rem 1rem; color: var(--text-dim);
}
.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.empty-state p { font-size: .9rem; line-height: 1.6; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.65); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%; max-height: 92dvh;
  overflow-y: auto; padding: 1.25rem 1rem 2rem;
}
.modal-handle {
  width: 36px; height: 4px; background: var(--border);
  border-radius: 2px; margin: 0 auto .75rem;
}
.modal-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 1.25rem; }

/* ── Forms ── */
.form-group { margin-bottom: .85rem; }
.form-group label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--text-sec); margin-bottom: .35rem; letter-spacing: .02em;
}
input[type="text"], input[type="datetime-local"], input[type="date"],
input[type="number"], textarea, select {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: .65rem .85rem;
  font-size: .9rem; font-family: inherit; outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--primary); }
textarea { resize: vertical; min-height: 80px; }
select option { background: var(--surface); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

/* ── Section heading ── */
.section-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: .65rem; margin-top: 1.25rem;
}
.section-title:first-child { margin-top: 0; }

/* ── Cikel ── */
.cikel-status {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem;
}
.cikel-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem; text-align: center;
}
.cikel-tile .ct-val { font-size: 1.8rem; font-weight: 700; line-height: 1; margin-bottom: .3rem; }
.cikel-tile .ct-lbl { font-size: .75rem; color: var(--text-sec); }

.cikel-faza-bar {
  display: flex; border-radius: 8px; overflow: hidden; height: 10px; margin-bottom: .4rem;
}
.faza-seg { height: 100%; transition: flex .3s; }

.cikel-cal {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: .75rem;
}
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: .75rem; font-weight: 600; color: var(--text-sec);
}
.cal-day.men { background: var(--cikel-men); color: #fff; }
.cal-day.ovu { background: var(--cikel-ovu); color: #fff; }
.cal-day.fol { background: rgba(96,165,250,.2); color: var(--cikel-fol); }
.cal-day.lut { background: rgba(251,191,36,.15); color: var(--cikel-lut); }
.cal-day.danes { outline: 2px solid var(--primary); }
.cal-day.prazen { opacity: 0; }
.cal-day-header { font-size: .65rem; color: var(--text-dim); text-align: center; font-weight: 600; padding: .2rem 0; }

/* ── Nastavitve ── */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: .9rem; font-weight: 500; }
.setting-desc  { font-size: .78rem; color: var(--text-sec); margin-top: .1rem; }

/* ── Divider ── */
hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* ── Utilities ── */
.text-sec  { color: var(--text-sec); }
.text-sm   { font-size: .85rem; }
.text-xs   { font-size: .75rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mt-1 { margin-top: .5rem; }
.hidden { display: none !important; }

/* ── Danes tab ── */
.danes-section-lbl {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); padding: .4rem 0 .5rem;
}

/* ── Checkbox-like state toggle ── */
.state-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
  flex-shrink: 0; cursor: pointer; background: none; display: flex; align-items: center;
  justify-content: center; font-size: .75rem; transition: all .15s;
}
.state-btn.caka     { border-color: var(--text-dim); }
.state-btn.izvajanje{ border-color: var(--primary); background: var(--primary-l); color: var(--primary); }
.state-btn.dokoncano{ border-color: var(--low); background: var(--low-l); color: var(--low); }

/* ── Toast ── */
#toast {
  position: fixed; bottom: calc(var(--nav-h) + .75rem); left: 50%; transform: translateX(-50%);
  background: var(--surface2); color: var(--text); border: 1px solid var(--border);
  padding: .6rem 1.25rem; border-radius: 24px; font-size: .85rem; font-weight: 500;
  z-index: 300; white-space: nowrap; pointer-events: none;
  transition: opacity .25s;
}
#toast.hidden { opacity: 0; }

@media (min-width: 600px) {
  #app-main { max-width: 600px; margin-left: auto; margin-right: auto; padding: 1.25rem 1.5rem; }
  .modal-overlay { align-items: center; }
  .modal-box { border-radius: 16px; max-width: 480px; margin: auto; max-height: 90dvh; }
}

/* ══════════════════════════════════════════════════════════
   TEME
══════════════════════════════════════════════════════════ */

/* ── Svetla ── */
[data-theme="svetla"] {
  --bg:        #ffffff;
  --surface:   #f8fafc;
  --surface2:  #f1f5f9;
  --border:    #e2e8f0;
  --text:      #0f172a;
  --text-sec:  #475569;
  --text-dim:  #94a3b8;
  --primary:   #6366f1;
  --primary-l: rgba(99,102,241,.12);
  --high:      #ef4444;
  --high-l:    rgba(239,68,68,.12);
  --mid:       #d97706;
  --mid-l:     rgba(217,119,6,.12);
  --low:       #16a34a;
  --low-l:     rgba(22,163,74,.12);
  --done:      #94a3b8;
  --danger:    #dc2626;
}

/* ── Modra ── */
[data-theme="modra"] {
  --bg:        #eff6ff;
  --surface:   #dbeafe;
  --surface2:  #bfdbfe;
  --border:    #93c5fd;
  --text:      #1e3a8a;
  --text-sec:  #1d4ed8;
  --text-dim:  #3b82f6;
  --primary:   #1d4ed8;
  --primary-l: rgba(29,78,216,.15);
  --high:      #dc2626;
  --high-l:    rgba(220,38,38,.12);
  --mid:       #d97706;
  --mid-l:     rgba(217,119,6,.12);
  --low:       #15803d;
  --low-l:     rgba(21,128,61,.12);
  --done:      #3b82f6;
  --danger:    #dc2626;
  --cikel-fol: #1d4ed8;
  --cikel-ovu: #15803d;
  --cikel-lut: #d97706;
}

/* ── Rdeča ── */
[data-theme="rdeca"] {
  --bg:        #fff1f2;
  --surface:   #ffe4e6;
  --surface2:  #fecdd3;
  --border:    #fda4af;
  --text:      #881337;
  --text-sec:  #be123c;
  --text-dim:  #f43f5e;
  --primary:   #e11d48;
  --primary-l: rgba(225,29,72,.12);
  --high:      #dc2626;
  --high-l:    rgba(220,38,38,.12);
  --mid:       #d97706;
  --mid-l:     rgba(217,119,6,.12);
  --low:       #15803d;
  --low-l:     rgba(21,128,61,.12);
  --done:      #f43f5e;
  --danger:    #dc2626;
  --cikel-men: #e11d48;
}

/* ── Tema opcija gumb ── */
.tema-opcija {
  display: block; width: 100%; padding: .4rem .75rem;
  text-align: left; border: none; background: none;
  color: var(--text); font-size: .85rem; font-family: inherit;
  border-radius: 6px; cursor: pointer; transition: background .1s; font-weight: 500;
}
.tema-opcija:hover  { background: var(--surface2); }
.tema-opcija.aktivna { color: var(--primary); font-weight: 700; }