/* 🌳 Linden-izgled generatora (17.9.2026 — stranica je javna).
 *
 * Ovo je SAMO ekran: glava, podnožje, prekidači zadataka, feedback. Mjere i
 * boje su prepisane iz client/src/theme.css (krem papir, teal, Nunito, radijus
 * 12/16, prekidač 48×32), jer ova stranica nije dio Vite builda i ne može
 * uvesti theme.css.
 *
 * ISPIS SE NE DIRA. Sve što mijenja izgled stoji u `@media screen`; za print
 * ovaj fajl samo sakriva vlastite dijelove. List A4 na papiru ostaje crno-bijel
 * i isti kao prije — pravila za njega su i dalje u index.html.
 */

@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/nunito-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/nunito-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/nunito-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 800; src: url(fonts/nunito-latin-800-normal.woff2) format("woff2"); }

:root {
  --lg-bg: #FAF6EF;
  --lg-card: #FFFFFF;
  --lg-ink: #2B2B33;
  --lg-muted: #6E6A61;
  --lg-line: #E8E2D6;
  --lg-line-strong: #DCD3C2;
  --lg-teal: #257D7D;
  --lg-teal-dark: #1B5E5E;
  --lg-teal-soft: #E3F0F0;
  --lg-amber-soft: #FBF0DC;
  --lg-coral: #E0715E;
  --lg-coral-soft: #FBEAE6;
  --lg-green: #7CB77B;
  --lg-green-soft: #EAF3E9;
  --lg-track: #DCD4C6;
  --lg-radius-sm: 10px;
  --lg-radius-md: 12px;
  --lg-radius: 16px;
  --lg-pill: 999px;
  --lg-shadow: 0 1px 2px rgba(43, 43, 51, 0.04), 0 2px 8px rgba(43, 43, 51, 0.05);
  --lg-shadow-md: 0 1px 2px rgba(43, 43, 51, 0.05), 0 8px 22px rgba(43, 43, 51, 0.07);
  --lg-shadow-lift: 0 2px 6px rgba(43, 43, 51, 0.06), 0 16px 34px rgba(43, 43, 51, 0.10);
  --lg-t: 180ms;
  --lg-font: "Nunito", "Segoe UI Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media print {
  .lg-head, .lg-foot, .lg-hint, .lg-switch, .fb-fab, .fb-overlay { display: none !important; }
}

@media screen {
  html, body {
    background: var(--lg-bg);
    background-image:
      radial-gradient(900px 420px at 50% -8%, rgba(255, 255, 255, 0.9), transparent 70%),
      radial-gradient(600px 300px at 100% 0%, rgba(227, 240, 240, 0.55), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--lg-ink);
  }
  body { -webkit-font-smoothing: antialiased; }
  :focus-visible { outline: 2px solid var(--lg-teal); outline-offset: 2px; }

  /* ── dugme (Linden `.btn`, `.btn.ghost`, `.btn.sm`) ── */
  .lg-btn {
    font-family: var(--lg-font); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 16px;
    border: none; border-radius: var(--lg-radius-md);
    background: linear-gradient(180deg, #2E8B8B, var(--lg-teal)); color: #fff;
    box-shadow: 0 1px 2px rgba(27, 94, 94, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--lg-t) ease-out, box-shadow var(--lg-t) ease-out, transform 120ms ease-out, filter var(--lg-t) ease-out;
  }
  .lg-btn:active { transform: translateY(1px); }
  .lg-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
  .lg-btn.ghost {
    background: rgba(255, 255, 255, 0.7); color: var(--lg-teal-dark);
    border: 1px solid var(--lg-line); box-shadow: none;
  }
  .lg-btn.sm { min-height: 40px; padding: 7px 12px; font-size: 0.875rem; border-radius: var(--lg-radius-sm); }
  @media (hover: hover) and (pointer: fine) {
    .lg-btn:not(:disabled):hover { filter: brightness(1.06); box-shadow: 0 3px 10px rgba(27, 94, 94, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
    .lg-btn.ghost:not(:disabled):hover { filter: none; background: #fff; border-color: var(--lg-teal); box-shadow: 0 2px 8px rgba(43, 43, 51, 0.07); }
  }

  /* ── znak marke: lipin list na mirnom disku ── */
  .lg-mark {
    flex: none; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lg-teal-soft);
  }
  .lg-mark svg { width: 66%; height: 66%; }
  .lg-mark.sm { width: 32px; height: 32px; }

  /* ── glava ── */
  .lg-head { font-family: var(--lg-font); }
  .lg-bar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px max(16px, calc((100% - 210mm) / 2));
    background: linear-gradient(180deg, rgba(250, 246, 239, 0.96) 70%, rgba(250, 246, 239, 0.82));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--lg-line);
  }
  .lg-brand {
    display: inline-flex; align-items: center; gap: 10px;
    color: inherit; text-decoration: none; margin-right: auto; border-radius: var(--lg-radius-md);
  }
  .lg-word { display: flex; flex-direction: column; line-height: 1.1; }
  .lg-word b { font-size: 1.25rem; font-weight: 800; color: var(--lg-teal-dark); letter-spacing: -0.02em; }
  .lg-word small { font-size: 0.8rem; font-weight: 600; color: var(--lg-muted); }
  .lg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  .lg-intro { max-width: 210mm; margin: 0 auto; padding: 22px 16px 4px; }
  .lg-intro h1 {
    margin: 0 0 6px; font-size: 1.5rem; line-height: 1.15; font-weight: 800;
    color: var(--lg-teal-dark); letter-spacing: -0.015em;
  }
  .lg-lead { margin: 0 0 14px; max-width: 62ch; color: var(--lg-muted); line-height: 1.45; font-size: 1rem; }
  .lg-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
  .lg-pick-label { font-size: 0.8rem; font-weight: 700; color: var(--lg-muted); margin-right: 2px; }
  .lg-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  /* Prijava #179 (Rijad, 22.9.2026): „treba jedan uspravni divider između
     njemački i engleski i razredi". Predmet i razred su dva izbora, a stajali
     su kao jedan niz od šest pilula. Crta stoji u sredini razmaka (22 px);
     kad se red prelomi (telefon), razredi idu u svoj red i crte nema — tad
     sam prijelom razdvaja. */
  .lg-group + .lg-group { position: relative; padding-left: 22px; }
  .lg-group + .lg-group::before {
    content: ""; position: absolute; left: 0; top: 16%; bottom: 16%;
    width: 2px; border-radius: 2px; background: var(--lg-line-strong);
  }
  @media (max-width: 760px) {
    .lg-group + .lg-group { padding-left: 0; }
    .lg-group + .lg-group::before { display: none; }
  }

  /* pilula (Linden `.tabs button`) — izbor predmeta */
  .lg-tab {
    font-family: var(--lg-font); font-size: 0.875rem; font-weight: 600; white-space: nowrap;
    min-height: 44px; padding: 8px 14px; border-radius: var(--lg-pill);
    background: rgba(255, 255, 255, 0.7); color: var(--lg-muted); border: 1px solid var(--lg-line);
    cursor: pointer; transition: background var(--lg-t) ease-out, color var(--lg-t) ease-out, border-color var(--lg-t) ease-out;
  }
  .lg-tab[aria-pressed="true"] { background: var(--lg-teal); color: #fff; border-color: var(--lg-teal); }
  @media (hover: hover) and (pointer: fine) {
    .lg-tab[aria-pressed="false"]:hover { background: #fff; border-color: #D6CDBC; color: var(--lg-ink); }
  }

  /* ── napomena kad nije izabran nijedan zadatak ── */
  .lg-hint {
    max-width: 210mm; margin: 12px auto 0; padding: 12px 16px;
    font-family: var(--lg-font); font-size: 0.95rem; line-height: 1.45;
    background: var(--lg-amber-soft); color: #7A5410;
    border: 1px solid rgba(227, 162, 60, 0.40); border-radius: var(--lg-radius);
  }

  /* ── list papira na ekranu ── */
  .page-wrap { padding: 18px 0 40px; }
  .sheet, .coming-soon { box-shadow: var(--lg-shadow-md); border-radius: 6px; }
  .task-title .num { background: var(--lg-teal); border-radius: 6px; }
  .solutions-banner { background: var(--lg-teal-dark); border-color: var(--lg-teal-dark); border-radius: 6px; }
  .task-toggle-wrap { align-items: center; }

  /* prekidač (Linden `.switch`): prava kućica ispod, klizač preko nje */
  .lg-switch { position: relative; display: inline-flex; flex: none; width: 48px; height: 32px; margin: 0; cursor: pointer; }
  .lg-switch > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .lg-switch-track {
    position: absolute; inset: 4px 0; border-radius: var(--lg-pill);
    background: var(--lg-track); transition: background var(--lg-t) ease-out;
  }
  .lg-switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform var(--lg-t) ease-out;
  }
  .lg-switch > input:checked + .lg-switch-track { background: var(--lg-teal); }
  .lg-switch > input:checked + .lg-switch-track::after { transform: translateX(24px); }
  .lg-switch > input:focus-visible + .lg-switch-track { outline: 2px solid var(--lg-teal-dark); outline-offset: 2px; }

  /* ── podnožje ── */
  .lg-foot {
    font-family: var(--lg-font); color: var(--lg-muted); text-align: center;
    max-width: 210mm; margin: 0 auto; padding: 18px 16px 96px;
    border-top: 1px solid var(--lg-line);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
  }
  .lg-foot p { margin: 0; line-height: 1.45; font-size: 0.875rem; }
  .lg-foot b { color: var(--lg-teal-dark); }
  .lg-foot a { color: var(--lg-teal); font-weight: 700; }

  /* ── feedback (Linden `.fab` + `.modal-card`) ── */
  .fb-fab {
    position: fixed; right: 14px; bottom: 16px; z-index: 200;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 48px; padding: 10px 16px; border-radius: var(--lg-pill);
    font-family: var(--lg-font); font-size: 0.875rem; font-weight: 700; color: var(--lg-teal-dark);
    background: rgba(255, 255, 255, 0.92); border: 1px solid var(--lg-line);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 6px rgba(43, 43, 51, 0.10), 0 10px 24px rgba(43, 43, 51, 0.14);
    cursor: pointer; transition: transform var(--lg-t) ease-out, box-shadow var(--lg-t) ease-out;
  }
  .fb-fab:active { transform: scale(0.96); }
  @media (hover: hover) and (pointer: fine) {
    .fb-fab:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(43, 43, 51, 0.12), 0 16px 32px rgba(43, 43, 51, 0.18); }
  }

  .fb-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(43, 43, 51, 0.42); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  .fb-modal {
    width: 100%; max-width: 460px; max-height: 88vh; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--lg-card); border: 1px solid var(--lg-line); border-radius: var(--lg-radius);
    box-shadow: 0 12px 30px rgba(43, 43, 51, 0.18), 0 30px 60px rgba(43, 43, 51, 0.18);
    font-family: var(--lg-font); color: var(--lg-ink);
  }
  .fb-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 14px 16px 4px; font-size: 1.25rem; font-weight: 800; color: var(--lg-teal-dark);
  }
  .fb-close {
    min-width: 44px; min-height: 44px; border: none; background: none; border-radius: var(--lg-radius-sm);
    font-size: 1.4rem; line-height: 1; color: var(--lg-muted); cursor: pointer;
  }
  .fb-close:hover { background: var(--lg-teal-soft); color: var(--lg-teal-dark); }
  .fb-body { padding: 8px 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
  .fb-row { display: flex; flex-direction: column; gap: 6px; }
  .fb-label { font-size: 0.875rem; font-weight: 600; color: var(--lg-muted); }
  .fb-optional { font-weight: 400; }
  .fb-type-btns, .fb-cats { display: flex; flex-wrap: wrap; gap: 6px; }
  .fb-select, .fb-textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--lg-ink); background: #fff;
    border: 1px solid var(--lg-line); border-radius: var(--lg-radius-sm); padding: 10px 12px;
    caret-color: var(--lg-teal); transition: border-color var(--lg-t) ease-out;
  }
  .fb-select { min-height: 44px; cursor: pointer; }
  .fb-textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
  .fb-select:focus, .fb-textarea:focus { border-color: var(--lg-teal); }
  .fb-footer { display: flex; justify-content: space-between; gap: 8px; }
  .fb-success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0 4px; text-align: center; font-weight: 700; color: #3d7a3c; }
  .fb-error {
    background: var(--lg-coral-soft); color: #b04430; border: 1px solid rgba(224, 113, 94, 0.35);
    border-radius: var(--lg-radius-sm); padding: 10px 12px; font-size: 0.875rem;
  }

  /* ── Tweaks (samo edit mod) — ista ploha kao kartica ── */
  .tweaks-panel { bottom: 76px; border: 1px solid var(--lg-line); border-radius: var(--lg-radius); overflow: hidden; box-shadow: var(--lg-shadow-lift); font-family: var(--lg-font); }
  .tweaks-header { background: var(--lg-teal); }

  /* ── tablet i telefon ── */
  @media (max-width: 820px) {
    .lg-bar { position: static; }
    .lg-intro { padding-top: 16px; }
  }
  @media (max-width: 650px) {
    .lg-bar { padding: 10px 12px; }
    .lg-actions { width: 100%; }
    .lg-actions .lg-btn { flex: 1 1 auto; padding-inline: 10px; font-size: 0.875rem; }
    .lg-intro { padding: 14px 12px 0; }
    .lg-intro h1 { font-size: 1.25rem; }
    .lg-lead { font-size: 0.95rem; }
    .lg-hint { margin: 10px 12px 0; }
    .page-wrap { padding-top: 12px; }
    .sheet, .coming-soon { border-radius: 0; }
    .fb-fab { bottom: 12px; right: 12px; }
  }
}