/* =====================================================================
   DO THE CHANGE — TEME MJESECI (12 tema, svaka svijetla i tamna)
   <html data-mjesec="sijecanj…prosinac">; svijetla/tamna ide po data-tema (zora / grafit).
   Zadano se mijenja 1. u mjesecu; Creator može postaviti jednu temu ili ih isključiti (app_postavke.tema_mjeseca).
   Motivi su iza kartica i na rubovima; s „Smanji pokrete“ sve animacije stoje.
   Datoteka je generirana (generator: teme-mjeseci/gen.py) — ne uređuj ručno.
   ===================================================================== */
:root[data-mjesec] { background: var(--pozadina); background-attachment: fixed; background-color: var(--bg); }
:root[data-mjesec] body { background: transparent; }
:root[data-mjesec] body::before, :root[data-mjesec] body::after { content: ""; position: fixed; pointer-events: none; z-index: -1; }
:root[data-mjesec] body::before { inset: 0; }
:root[data-mjesec] body::after { left: 0; right: 0; top: -320px; height: calc(100vh + 640px); background-size: 320px 320px; background-repeat: repeat; }
@keyframes tm-pada { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 320px, 0); } }
@keyframes tm-dize { from { transform: translate3d(0, 320px, 0); } to { transform: translate3d(0, 0, 0); } }
/* prva kartica ekrana i kartica sljedećeg eventa dobivaju znak mjeseca */
:root[data-mjesec] #ekran > .kartica:not(.kartica ~ .kartica), :root[data-mjesec] #md-ev { position: relative; overflow: visible; }
:root[data-mjesec] #ekran > .kartica:not(.kartica ~ .kartica)::after, :root[data-mjesec] #md-ev::after { content: ""; position: absolute; top: -18px; right: 16px; width: 42px; height: 42px; pointer-events: none; z-index: 3; background: var(--tm-amblem) center / contain no-repeat; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); animation: tm-njise 5s ease-in-out infinite; }
@keyframes tm-njise { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-2px); } }
/* tanka ukrasna traka na vrhu ostalih kartica */
:root[data-mjesec] #ekran .kartica:not(.dtc-spojeno):not(.sudac-kartica):not(.admin-kartica):not(#md-ev) { position: relative; }
:root[data-mjesec] #ekran .kartica:not(.dtc-spojeno):not(.sudac-kartica):not(.admin-kartica):not(#md-ev):not(.kartica .kartica)::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--tm-rub); pointer-events: none; opacity: .9; }
/* uz pozdrav na Moj dan */
:root[data-mjesec] .md-bok::after, :root[data-mjesec] #ekran[data-ekran="today"] .naslov-ekrana h1::after { content: ""; display: inline-block; width: 26px; height: 26px; margin-left: 8px; vertical-align: -3px; background: var(--tm-pozdrav) center / contain no-repeat; }
/* vijenac ispod zaglavlja */
:root[data-mjesec] .vrh::after { content: ""; position: absolute; left: 0; right: 0; bottom: -30px; height: 40px; pointer-events: none; z-index: 1; background: var(--tm-vijenac, none) left top / 400px 40px repeat-x; }
/* tjedan, prsten i trake u bojama teme */
:root[data-mjesec] .md-dan:not(.danas) .md-stup i.ima { background: var(--md-stup-ima) !important; }
:root[data-mjesec] .md-dan[aria-pressed="true"]:not(.danas) { box-shadow: 0 0 0 3px var(--md-odabran), 0 6px 16px rgba(0,0,0,.14); }
:root[data-mjesec] .md-prsten svg { filter: drop-shadow(0 0 4px var(--neon-sjaj)); }
:root[data-mjesec] .dan-traka span { background: linear-gradient(90deg, var(--mj-t1) 0%, var(--mj-t2) 25%, var(--mj-t3) 50%, var(--mj-t2) 75%, var(--mj-t1) 100%); background-repeat: no-repeat; background-position: left center; }
:root[data-mjesec] .an-traka .b i { background: linear-gradient(90deg, var(--mj-t2), var(--mj-t3)); }
@media (min-width: 1100px) { :root[data-mjesec] .vrh::after { bottom: -34px; } }
/* bez zamućenja (backdrop-filter) dok je tema mjeseca: iPhone inače zamagli zaglavlje i šteka preko pokretnih motiva;
   kartice zato imaju gotovo punu podlogu */
:root[data-mjesec] *, :root[data-mjesec] *::before, :root[data-mjesec] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-mjesec] .vrh.spusteno::before { opacity: .96; }
@media (prefers-reduced-motion: reduce) {
  :root[data-mjesec] body::after, :root[data-mjesec] #ekran > .kartica::after, :root[data-mjesec] #md-ev::after { animation: none !important; transform: none !important; }
}
/* pregled teme u Creatorovom izborniku */
.tm-panel { position: relative; isolation: isolate; overflow: hidden; background: var(--pozadina); background-color: var(--bg); color: var(--tekst); }
.tm-panel::before, .tm-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tm-panel::after { background-size: 320px 320px; background-repeat: repeat; }

.tm-mob-svijetli {
  --font: "DM Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --nasl: var(--font);

  --pozadina:
    radial-gradient(120% 60% at 95% -5%, #FFA868 0%, rgba(255,168,104,0) 62%),
    radial-gradient(110% 55% at -10% 100%, #FF9460 0%, rgba(255,148,96,0) 62%),
    linear-gradient(170deg, #FFF3E8, #FFE4D2 55%, #FFD6BE);
  --bg: #FFF3E8;                         /* jednobojna zamjena (iframe, sticky) */

  --tekst: #2A1A12;                      /* glavni tekst */
  --siva: #6B5244;                       /* sporedni tekst (na karticama) */
  --siva-poz: #5A4336;                   /* sporedni tekst izravno na pozadini (kontrast i preko sjaja) */
  --siva2: #6A5043;                      /* treći tekst: osi, sitne napomene (≥ 4.5:1 i preko sjaja) */
  --nar-jaki: #C24A0C;                   /* naglasak: velike brojke, prsteni, crte, obrubi */
  --nar: #943606;                        /* naglasak za sitan tekst (oznake, aktivna stavka): ≥ 4.5:1 i preko sjaja */
  --nar-t: #9E3B08;
  --nar-m: rgba(194,74,12,.13);          /* blaga podloga, trake */
  --nar-m2: rgba(194,74,12,.24);
  --crta: rgba(107,82,68,.2);            /* razdjelnici i crte grafikona */
  --crta2: rgba(107,82,68,.3);           /* obrubi polja */

  --gumb: linear-gradient(180deg, #E86A22, #DB5F17);   /* gumbi s tekstom (tamni tekst ≥ 5:1) */
  --gumb-tekst: #1F0E03;
  --gumb-sjena: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px rgba(184,70,11,.28);
  --gotovo: linear-gradient(180deg, #E0651C, #B8460B);  /* odrađene stavke (bijela ikona / kvačica) */

  --kartica: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.58));
  --kartica-rub: 1px solid rgba(255,255,255,.8);
  --kartica-sjena: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 30px rgba(170,80,25,.16);
  --redak: rgba(255,255,255,.72);
  --redak-gotovo: rgba(255,255,255,.42);
  --pov: rgba(255,255,255,.72);          /* sitne podloge (polja, gumbi s obrubom) */
  --pov2: rgba(255,255,255,.55);
  --ploca: #FFF6EF;                      /* pune podloge: prozori, padajući izbornici */
  --zastor: rgba(42,26,18,.45);
  --zakljucano-rub: rgba(107,82,68,.35);
  --zakljucano-bg: rgba(107,82,68,.1);

  --ok: #1F7A4A; --ok-m: rgba(46,158,98,.14);
  --opasno: #B3261E; --opasno-m: rgba(214,69,65,.12);
  --uspjeh-bg: rgba(46,158,98,.14); --uspjeh-tekst: #1A5E3A;
  --istaknuto: rgba(255,236,222,.9);     /* kartice koje traže pažnju */
  --tost: #2A1A12; --tost-tekst: #FFF3E8;
  --logo-tamni: block; --logo-svijetli: none;
  color-scheme: light;
--md-dan: #2A1A12; --md-dan-tekst: #FFF3E8; --md-dan-sitno: #E9D6C9; --md-stup-prazno: rgba(255,243,232,.32); --kal-staza: rgba(0,0,0,.08); color-scheme: light; }
.tm-mob-tamni {
  --pozadina:
    radial-gradient(120% 55% at 100% -5%, rgba(214,92,24,.55) 0%, rgba(214,92,24,0) 60%),
    radial-gradient(110% 50% at -10% 105%, rgba(196,78,18,.45) 0%, rgba(196,78,18,0) 60%),
    linear-gradient(170deg, #1C1715, #141110 55%, #0F0C0B);
  --bg: #141110;

  --tekst: #F6EEE8;
  --siva: #C9B8AD;
  --siva-poz: #D2C3B9;
  --siva2: #C2B1A6;
  --nar-jaki: #FF8A3D;
  --nar: #FFA266;
  --nar-t: #FFA466;
  --nar-m: rgba(255,138,61,.16);
  --nar-m2: rgba(255,138,61,.3);
  --crta: rgba(255,255,255,.12);
  --crta2: rgba(255,255,255,.2);

  --gumb: linear-gradient(180deg, #FF9A4D, #F2711F);
  --gumb-tekst: #1F0E03;
  --gumb-sjena: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px rgba(255,122,40,.28);
  --gotovo: linear-gradient(180deg, #FF9A4D, #F2711F);

  --kartica: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
  --kartica-rub: 1px solid rgba(255,255,255,.1);
  --kartica-sjena: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.4);
  --redak: rgba(255,255,255,.06);
  --redak-gotovo: rgba(255,255,255,.03);
  --pov: rgba(255,255,255,.07);
  --pov2: rgba(255,255,255,.05);
  --ploca: #1E1917;
  --zastor: rgba(0,0,0,.6);
  --zakljucano-rub: rgba(255,255,255,.22);
  --zakljucano-bg: rgba(255,255,255,.08);

  --ok: #6FD39C; --ok-m: rgba(111,211,156,.14);
  --opasno: #FF8A80; --opasno-m: rgba(255,138,128,.14);
  --uspjeh-bg: rgba(111,211,156,.12); --uspjeh-tekst: #9BE3BB;
  --istaknuto: rgba(255,138,61,.1);
  --tost: #F6EEE8; --tost-tekst: #1F0E03;
  --logo-tamni: none; --logo-svijetli: block;
  color-scheme: dark;
--md-dan: rgba(255,255,255,.08); --md-dan-tekst: #F6EEE8; --md-dan-sitno: #D2C3B9; --md-stup-prazno: rgba(255,255,255,.22); --kal-staza: rgba(255,255,255,.1); color-scheme: dark; }