/* ============================================
   KONCERT — Tematski sistem
   - Privzeto: Svetla
   - data-theme="dark": Temna
   - data-theme="linear": Nevtralna siva (kot Linear app)
   - data-theme="auto": sledi sistemu (preko prefers-color-scheme)
   ============================================ */

/* ============== ACCESSIBILITY: FOCUS STYLES ==============
   WCAG AA standard - keyboard navigacija mora imeti viden focus indicator
*/
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent, #3b82f6) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible {
  outline-offset: 3px !important;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0 !important;
  outline: 2px solid var(--accent, #3b82f6) !important;
}
/* Skip focus indikator za neke elemente kjer je distrakcija */
.kanban-card:focus-visible,
.projekt-card:focus-visible {
  outline: 3px solid var(--accent, #3b82f6) !important;
  outline-offset: -2px !important;
}

/* ============== TEMNA TEMA ==============
   Uporablja !important da override-a inline :root definicije v vsaki strani
*/
html[data-theme="dark"] {
  --bg: #0f0f10 !important;
  --bg-panel: #181819 !important;
  --bg-elevated: #232325 !important;
  --ink: #f5f5f4 !important;
  --ink-dim: #c4c4c8 !important;
  --ink-muted: #8b8b94 !important;
  --accent: #60a5fa !important;
  --accent-soft: #93c5fd !important;
  --ok: #34d399 !important;
  --warn: #fbbf24 !important;
  --err: #f87171 !important;
  --line: #2a2a2c !important;
  --line-soft: #1f1f21 !important;
  --shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
  --shadow-card: 0 4px 14px rgba(0,0,0,0.4) !important;
  color-scheme: dark;
}

/* Posebne barve v temni temi */
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--bg-elevated); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] .topbar { background: var(--bg); border-color: var(--line); }
html[data-theme="dark"] .sidebar { background: var(--bg-panel); border-color: var(--line); }
html[data-theme="dark"] .table-wrap { background: var(--bg-panel); border-color: var(--line); }
html[data-theme="dark"] th { background: var(--bg-elevated); }
html[data-theme="dark"] tr:hover { background: var(--bg-elevated); }
html[data-theme="dark"] .cell:hover { background: var(--bg-elevated); }
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .breakdown-card,
html[data-theme="dark"] .config-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .hint-box,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .viewer,
html[data-theme="dark"] .activity-item,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .dates-card,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .section {
  background: var(--bg-panel); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] .breakdown-item,
html[data-theme="dark"] .field-input,
html[data-theme="dark"] .field-textarea,
html[data-theme="dark"] .field-input.mono { background: var(--bg-elevated); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .countdown-box { background: var(--bg-elevated); border-color: var(--line); }

/* Title in text v dark mode */
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .empty-title,
html[data-theme="dark"] .activity-text { color: var(--ink); }

/* App dialog v temni temi */
html[data-theme="dark"] .app-dialog { background: var(--bg-panel); color: var(--ink); }
html[data-theme="dark"] .app-dialog-title { color: var(--ink); }
html[data-theme="dark"] .app-dialog-message { color: var(--ink-dim); }
html[data-theme="dark"] .app-dialog-input { background: var(--bg-elevated); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .app-dialog-btn-ghost { color: var(--ink-dim); border-color: var(--line); }
html[data-theme="dark"] .app-dialog-btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
html[data-theme="dark"] .app-dialog-option { background: var(--bg-elevated); border-color: var(--line); color: var(--ink); }

/* Settings modal */
html[data-theme="dark"] .app-settings-toggle { background: var(--bg-elevated); border-color: var(--line); }
html[data-theme="dark"] .app-settings-toggle-label { color: var(--ink); }
html[data-theme="dark"] .app-settings-toggle-switch { background: #3a3a3c; }
html[data-theme="dark"] .app-settings-action-btn { background: var(--bg-elevated); border-color: var(--line); color: var(--ink-dim); }
html[data-theme="dark"] .app-settings-action-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Command palette */
html[data-theme="dark"] .app-palette { background: var(--bg-panel); }
html[data-theme="dark"] .app-palette-search { border-color: var(--line); }
html[data-theme="dark"] .app-palette-search input { color: var(--ink); }
html[data-theme="dark"] .app-palette-search .kbd { background: var(--bg-elevated); border-color: var(--line); color: var(--ink-dim); }
html[data-theme="dark"] .app-palette-item:hover, html[data-theme="dark"] .app-palette-item.active { background: var(--bg-elevated); }
html[data-theme="dark"] .app-palette-item .naslov { color: var(--ink); }
html[data-theme="dark"] .app-palette-item .badge { background: var(--bg-elevated); border-color: var(--line); color: var(--ink-muted); }
html[data-theme="dark"] .app-palette-hint { background: var(--bg-elevated); border-color: var(--line); }
html[data-theme="dark"] .app-palette-hint .kbd { background: var(--bg-panel); border-color: var(--line); }

/* Context menu */
html[data-theme="dark"] .app-ctx-menu { background: var(--bg-panel); border-color: var(--line); }
html[data-theme="dark"] .app-ctx-item { color: var(--ink); }
html[data-theme="dark"] .app-ctx-item:hover { background: var(--bg-elevated); }
html[data-theme="dark"] .app-ctx-divider { background: var(--line); }

/* Onboarding */
html[data-theme="dark"] .app-onb-tip { background: var(--bg-panel); }
html[data-theme="dark"] .app-onb-tip .title { color: var(--ink); }
html[data-theme="dark"] .app-onb-tip .text { color: var(--ink-dim); }

/* Banner-i */
html[data-theme="dark"] .app-banner.urgent { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }
html[data-theme="dark"] .app-banner.warn { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245, 158, 11, 0.3); }
html[data-theme="dark"] .app-banner.info { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border-color: rgba(59, 130, 246, 0.3); }

/* Doc bloki v scenariju */
html[data-theme="dark"] .doc-block { border-color: var(--line); background: transparent; }
html[data-theme="dark"] .doc-block:hover { background: var(--bg-elevated); }
html[data-theme="dark"] .doc-block.selected { background: rgba(96, 165, 250, 0.08); border-color: var(--accent); }
html[data-theme="dark"] .doc-block-title { color: var(--ink); }
html[data-theme="dark"] .doc-block-meta { color: var(--ink-muted); }
html[data-theme="dark"] .doc-block-type { color: var(--ink-muted); }

/* Bulk action bar */
html[data-theme="dark"] .bulk-action-bar { background: var(--bg-panel); border: 1px solid var(--line); color: var(--ink); }
html[data-theme="dark"] .bulk-action-bar .actions button { background: var(--bg-elevated); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .bulk-action-bar .actions button:hover { background: var(--bg); }

/* ============== LINEAR TEMA (nevtralna siva) ============== */
html[data-theme="linear"] {
  --bg: #fafafa !important;
  --bg-panel: #ffffff !important;
  --bg-elevated: #f4f4f5 !important;
  --ink: #18181b !important;
  --ink-dim: #52525b !important;
  --ink-muted: #a1a1aa !important;
  --accent: #5e6ad2 !important;
  --accent-soft: #7c8ce4 !important;
  --ok: #4cb782 !important;
  --warn: #ed9b40 !important;
  --err: #d4493b !important;
  --line: #e4e4e7 !important;
  --line-soft: #f1f1f4 !important;
}

/* ============== AUTO TEMA (sledi sistemu) ============== */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #0f0f10 !important;
    --bg-panel: #181819 !important;
    --bg-elevated: #232325 !important;
    --ink: #f5f5f4 !important;
    --ink-dim: #c4c4c8 !important;
    --ink-muted: #8b8b94 !important;
    --accent: #60a5fa !important;
    --accent-soft: #93c5fd !important;
    --ok: #34d399 !important;
    --warn: #fbbf24 !important;
    --err: #f87171 !important;
    --line: #2a2a2c !important;
    --line-soft: #1f1f21 !important;
    color-scheme: dark;
  }
  html[data-theme="auto"] body { background: var(--bg); color: var(--ink); }
  html[data-theme="auto"] input, html[data-theme="auto"] textarea, html[data-theme="auto"] select {
    background: var(--bg-elevated); color: var(--ink); border-color: var(--line);
  }
  html[data-theme="auto"] .topbar { background: var(--bg); border-color: var(--line); }
  html[data-theme="auto"] .sidebar { background: var(--bg-panel); border-color: var(--line); }
  html[data-theme="auto"] .table-wrap { background: var(--bg-panel); border-color: var(--line); }
  html[data-theme="auto"] th { background: var(--bg-elevated); }
  html[data-theme="auto"] tr:hover { background: var(--bg-elevated); }
  html[data-theme="auto"] .stat-card,
  html[data-theme="auto"] .card,
  html[data-theme="auto"] .modal,
  html[data-theme="auto"] .activity-item,
  html[data-theme="auto"] .alert,
  html[data-theme="auto"] .hero,
  html[data-theme="auto"] .section { background: var(--bg-panel); border-color: var(--line); color: var(--ink); }
}

/* ============================================
   FOCUS STYLES — accessibility
   ============================================ */
*:focus {
  outline: none;
}
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
.toolbar-btn:focus-visible,
.btn:focus-visible,
.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.field-input:focus-visible,
.field-textarea:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
[contenteditable]:focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
/* Cell editor */
.cell:focus-visible,
.cell.editing {
  outline: none;
}
/* Skip pin in comment buttons - imamo svoje stile */
.app-pin-btn:focus-visible,
.app-comm-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ============================================
   BOLJŠI KONTRAST za muted text (WCAG AA 4.5:1)
   ============================================ */
:root {
  --ink-muted: #6b7280 !important;  /* 4.6:1 contrast on #fbfbfa */
}
html[data-theme="dark"] {
  --ink-muted: #a1a1aa !important;  /* boljši contrast na temnem */
}
html[data-theme="linear"] {
  --ink-muted: #71717a !important;
}