/* ================================================
   SVETLA TEMA – theme-light.css
   Slog: arnes.si (bela podlaga, indigo #3c2e7e, oranžna #e65900,
   Merriweather za naslove, Source Sans za besedilo, ostri robovi 3–6 px)

   Vklop:  <html data-theme="light">
   Datoteka se naloži ZA style.css. Vsa pravila so omejena na
   html[data-theme="light"], zato temna tema ostane nedotaknjena.
   ================================================ */

/* ---- Pisave (lokalno, da deluje brez interneta) ----
   Če datotek .woff2 ni v www/fonts/, se uporabi nadomestna pisava
   (Georgia / sistemska) – tema deluje tudi brez njih. */
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/merriweather-700.woff2') format('woff2');
  font-weight: 700 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-700.woff2') format('woff2');
  font-weight: 700 900; font-style: normal; font-display: swap;
}

/* ---- Spremenljivke ---- */
html[data-theme="light"] {
  --bg: #ffffff;
  --card: #f3f3f3;            /* Arnes: siva glava */
  --accent: #3c2e7e;          /* Arnes: indigo */
  --accent2: #b84700;         /* Arnes oranžna, potemnjena za berljivost besedila */
  --text: #231f20;
  --muted: #69696b;
  --border: #d5d5dd;
  --radius: 6px;
  --teal: #1a7fa8;            /* v style.css ni definirana – tu jo določimo */

  --arnes-orange: #e65900;    /* izvirna oranžna – samo za okras */
  --arnes-lavender: #e9e9f4;
  --on-accent: #ffffff;
  --ok: #1b7a3d;
  --danger: #c62828;
  --font-head: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: light;
}

/* ---- Osnova in tipografija ---- */
html[data-theme="light"] body { font-family: var(--font-body); }
/* orodja imajo font-family zapisan pri vsakem gumbu, zato !important */
html[data-theme="light"] button,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { font-family: var(--font-body) !important; }

html[data-theme="light"] .logo,
html[data-theme="light"] .greeting h2,
html[data-theme="light"] .screen h2,
html[data-theme="light"] .tool-name,
html[data-theme="light"] #settings-modal-title,
html[data-theme="light"] .link-name,
html[data-theme="light"] .help-tool-name { font-family: var(--font-head); }

html[data-theme="light"] .greeting h2,
html[data-theme="light"] .screen h2 { color: #000; font-weight: 700; }

/* Arnesova valovita oranžna črta pod naslovom */
html[data-theme="light"] .greeting h2::after {
  content: ''; display: block; width: 96px; height: 8px; margin-top: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q3 0 6 4 T12 4 T18 4 T24 4' fill='none' stroke='%23e65900' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x;
}

/* ---- Glava, noga, namizni okvir ---- */
html[data-theme="light"] .app-header { background: #f3f3f3; }
html[data-theme="light"] .lang-btn,
html[data-theme="light"] .help-btn,
html[data-theme="light"] #class-select,
html[data-theme="light"] #settings-gear-btn { background: #fff; }
html[data-theme="light"] .lang-btn { border-radius: 4px; }

@media (min-width: 768px) {
  html[data-theme="light"] body { background: var(--arnes-lavender); }
  html[data-theme="light"] #app { box-shadow: 0 0 40px rgba(60, 46, 126, 0.12); }
}

/* ---- Domači zaslon ---- */
html[data-theme="light"] .tool-card {
  background: #fff;
  box-shadow: 0 1px 3px rgba(35, 31, 32, 0.08);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
html[data-theme="light"] .tool-card:hover {
  background: var(--arnes-lavender);
  box-shadow: 0 4px 14px rgba(60, 46, 126, 0.14);
}
html[data-theme="light"] .tool-name { color: var(--accent); font-size: 0.82rem; }

html[data-theme="light"] .home-intro { background: var(--arnes-lavender); border-color: #d9d6ee; }
html[data-theme="light"] .home-intro p { color: #4a4660; }
html[data-theme="light"] .home-intro-chips span { background: #fff; border-color: #d9d6ee; color: var(--accent); }

html[data-theme="light"] .footer-warning { color: #9a4d00; }
html[data-theme="light"] .footer-warning strong { color: #7a3d00; }

/* ---- Gumbi ----
   V orodjih je na barvni podlagi zapisano color:#000 – na indigu in
   oranžni mora biti besedilo belo. */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .att-actions .btn-primary,
html[data-theme="light"] .btn-small-accent,
html[data-theme="light"] .btn-sm-primary,
html[data-theme="light"] .stt-cls-btn-activate,
html[data-theme="light"] .stt-cls-badge,
html[data-theme="light"] .btn-small,
html[data-theme="light"] .btn-small-green,
html[data-theme="light"] .btn-small-teal { color: var(--on-accent); }

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .back-btn,
html[data-theme="light"] .mode-btn,
html[data-theme="light"] .btn-small,
html[data-theme="light"] .btn-small-accent,
html[data-theme="light"] .btn-small-green,
html[data-theme="light"] .btn-small-teal,
html[data-theme="light"] .btn-sm-primary,
html[data-theme="light"] .btn-sm-secondary,
html[data-theme="light"] .links-tab-btn { border-radius: 4px; }

html[data-theme="light"] .btn-primary:hover:not(:disabled) { background: #2e2363; }
html[data-theme="light"] .btn-secondary { background: #e8e8e8; border-color: #e8e8e8; }
html[data-theme="light"] .btn-secondary:hover { border-color: var(--accent); }
html[data-theme="light"] .back-btn { background: #fff; }
html[data-theme="light"] .mode-btn { background: #e8e8e8; border-color: #e8e8e8; color: var(--text); }
html[data-theme="light"] .mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Naključni učenec / vprašanje ---- */
html[data-theme="light"] .wheel-result,
html[data-theme="light"] .questions-result { background: #fff; }
html[data-theme="light"] .questions-result { border-color: var(--arnes-orange); }
html[data-theme="light"] .result-name { font-family: var(--font-head); }

html[data-theme="light"] .excl-item:hover { background: rgba(60, 46, 126, 0.05); }
html[data-theme="light"] .excl-item.status-absent { border-color: #bdbdbd; }
html[data-theme="light"] .excl-item.status-manual { background: rgba(60, 46, 126, 0.06); }
html[data-theme="light"] .excl-item.status-override { border-color: var(--ok); background: rgba(27, 122, 61, 0.06); }
html[data-theme="light"] .excl-item.status-override .excl-checkbox { border-color: var(--ok); color: var(--ok); }
html[data-theme="light"] .badge-absent { background: #e4e4e4; color: #5a5a5a; }
html[data-theme="light"] .badge-manual { background: rgba(60, 46, 126, 0.12); }
html[data-theme="light"] .badge-override { background: rgba(27, 122, 61, 0.14); color: var(--ok); }

/* ---- Timer ---- (indigo → oranžna → rdeča) */
html[data-theme="light"] .timer-progress { stroke: var(--accent); }
html[data-theme="light"] .timer-progress.warning { stroke: var(--arnes-orange); }
html[data-theme="light"] .timer-progress.danger { stroke: var(--danger); }
html[data-theme="light"] .preset-btn { background: #fff; }
html[data-theme="light"] .preset-btn:hover,
html[data-theme="light"] .preset-btn.active { border-color: var(--accent); color: var(--accent); background: var(--arnes-lavender); }
html[data-theme="light"] .custom-input { background: #fff; }
html[data-theme="light"] .noise-fill { background: linear-gradient(90deg, #8478c9, var(--accent)); }
html[data-theme="light"] .noise-fill.loud { background: linear-gradient(90deg, var(--arnes-orange), var(--danger)); }
html[data-theme="light"] .noise-status.ok { color: var(--ok); }
html[data-theme="light"] .noise-status.loud { color: var(--danger); }
html[data-theme="light"] .noise-canvas { background: #fff; border: 1px solid var(--border); }

/* ---- Prisotnost ---- */
html[data-theme="light"] .att-stat.green { color: var(--ok); }
html[data-theme="light"] .att-stat.red { color: var(--danger); }
html[data-theme="light"] .att-item { background: #fff; }
html[data-theme="light"] .att-item.present { border-color: #37b36a; background: rgba(55, 179, 106, 0.08); }
html[data-theme="light"] .att-item.absent { border-color: #e05252; background: rgba(224, 82, 82, 0.07); }
html[data-theme="light"] .att-item.present .att-checkbox { background: #37b36a; border-color: #37b36a; color: #fff; }
html[data-theme="light"] .att-item.absent .att-checkbox { background: #e05252; border-color: #e05252; }
html[data-theme="light"] .att-history-item { background: #fff; }
html[data-theme="light"] .att-saved-toast { background: var(--ok); color: #fff; }

/* ---- Povezave ---- */
html[data-theme="light"] .links-search-input { background: #fff; }
html[data-theme="light"] .link-item { background: #fff; }
html[data-theme="light"] .link-item:hover { border-color: var(--accent); background: var(--arnes-lavender); }
html[data-theme="light"] .link-name { color: var(--accent); }
html[data-theme="light"] .links-tab-btn { background: #e8e8e8; border-color: #e8e8e8; color: var(--text); }
html[data-theme="light"] .links-tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- QR ---- */
html[data-theme="light"] .qr-canvas { border-color: var(--border); box-shadow: 0 4px 16px rgba(35, 31, 32, 0.12); }

/* ---- Navodila ---- */
html[data-theme="light"] .help-gdpr-box { background: #eaf6ec; border-color: #b7dfc0; }
html[data-theme="light"] .help-gdpr-title { color: var(--ok); }
html[data-theme="light"] .help-gdpr-text { color: #2f4f37; }
html[data-theme="light"] .help-gdpr-reset { color: #4f6b55; border-top-color: #b7dfc0; }
html[data-theme="light"] .help-card-link { background: #fff; }
html[data-theme="light"] .help-card-link:hover { background: var(--arnes-lavender); }

/* ---- Nastavitve (modal) ---- */
html[data-theme="light"] #settings-overlay { background: rgba(35, 31, 32, 0.45); }
html[data-theme="light"] #settings-modal { box-shadow: 0 8px 40px rgba(35, 31, 32, 0.25); }
html[data-theme="light"] .stt-cls-row { background: #fff; }
html[data-theme="light"] .stt-setting-sel,
html[data-theme="light"] #stt-class-active-sel { background: #fff; }
html[data-theme="light"] .stt-backup-btn { background: #fff; }
html[data-theme="light"] .stt-backup-btn:hover { background: var(--arnes-lavender); }
html[data-theme="light"] #stt-backup-status.ok { color: var(--ok); border-color: var(--ok); background: rgba(27, 122, 61, 0.1); }
html[data-theme="light"] #stt-backup-status.err { color: var(--danger); border-color: var(--danger); background: rgba(198, 40, 40, 0.08); }

/* ---- Fokus (dostopnost) ---- */
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] .tool-card:focus-visible,
html[data-theme="light"] a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- Ikona v glavi ---- */
.header-icon.icon-light { display: none; }
html[data-theme="light"] .header-icon.icon-dark { display: none; }
html[data-theme="light"] .header-icon.icon-light { display: inline; }