/* ALU, Ivanov METRO na mobitelu. Boje iz Ivanovog objedinjenog PDF-a (postar/kanal_ivan.py, BOJE), veća slova. */
:root {
  --tamna: #1e3a5f; --tamna-2: #2c5282; --tekst: #1f2933; --tekst2: #475569; --tekst3: #64748b;
  --pozadina: #eef1f4; --kartica: #ffffff; --crta: #d9dee5; --ivan: #dbe8fb; --ivan-tekst: #10294a;
  --ukratko: #fff4dc; --ukratko-rub: #f59e0b; --ukratko-naslov: #92400e;
  --pretp: #e8f1fd; --pretp-rub: #3b82f6; --ceka: #e7f8ef; --ceka-rub: #10b981; --nije: #f4f5f7; --nije-rub: #94a3b8;
  --crvena: #b42318; --crvena-meko: #fde8e7; --zelena: #067647; --naglasak: #1e3a5f; --naglasak-meko: #e3ebf6;
  --gore: env(safe-area-inset-top, 0px); --dolje: env(safe-area-inset-bottom, 0px);
  --slova: 18px;
  color-scheme: light dark;
}
html[data-slova="vece"] { --slova: 21px; }
@media (prefers-color-scheme: dark) {
  :root {
    --tamna: #9cc3f5; --tamna-2: #bcd6f8; --tekst: #e8eef5; --tekst2: #b6c2d0; --tekst3: #8b98a8;
    --pozadina: #0e1621; --kartica: #172231; --crta: #2a3a4f; --ivan: #213a5c; --ivan-tekst: #e8f0fb;
    --ukratko: #3a2c10; --ukratko-rub: #f5b544; --ukratko-naslov: #f8d38d;
    --pretp: #182c47; --pretp-rub: #6aa3f5; --ceka: #10301f; --ceka-rub: #34d399; --nije: #1d2734; --nije-rub: #64748b;
    --crvena: #f97066; --crvena-meko: #3b1513; --zelena: #47cd89; --naglasak: #9cc3f5; --naglasak-meko: #1f3048;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pozadina); color: var(--tekst); font: var(--slova)/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--tamna-2); }
.skriveno { display: none !important; }
main { padding: 0 16px calc(110px + var(--dolje)); max-width: 680px; margin: 0 auto; }
.prazno { padding: 48px 20px; text-align: center; color: var(--tekst3); }
.sitno { font-size: .82em; color: var(--tekst3); }

/* zaglavlje */
.zaglavlje { position: sticky; top: 0; z-index: 20; padding: calc(10px + var(--gore)) 16px 10px; background: color-mix(in srgb, var(--pozadina) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); display: flex; align-items: center; gap: 10px; min-height: 58px; }
.zaglavlje h1 { margin: 0; font-size: 1.45em; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; flex: 1; min-width: 0; }
.zaglavlje h1.dugi { font-size: 1.1em; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.natrag { flex: none; border: 0; background: none; color: var(--tamna-2); font-size: 1em; font-weight: 600; padding: 8px 6px 8px 0; min-height: 44px; }
.logo-alu { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #1e3a5f; color: #fff; font-weight: 900; font-size: 14px; letter-spacing: .04em; box-shadow: inset 0 -4px 0 #f59e0b; flex: none; }

/* stanje METRO-a */
.metro-traka { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 4px 0 14px; border-radius: 14px; background: var(--kartica); border: 1px solid var(--crta); font-size: .86em; color: var(--tekst2); }
.tocka { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--nije-rub); }
.tocka.zelena { background: #12b76a; box-shadow: 0 0 0 4px color-mix(in srgb, #12b76a 20%, transparent); }
.tocka.zuta { background: #f79009; box-shadow: 0 0 0 4px color-mix(in srgb, #f79009 20%, transparent); }

/* gumbi */
.gumb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 20px; border-radius: 14px; border: 1.5px solid var(--crta);
  background: var(--kartica); color: var(--tekst); font-weight: 650; font-size: 1em; text-decoration: none; cursor: pointer; }
.gumb.glavni { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.gumb.veliki { width: 100%; min-height: 62px; font-size: 1.12em; border-radius: 18px; }
.gumb.siroki { width: 100%; }
.gumb.opasno { color: var(--crvena); border-color: color-mix(in srgb, var(--crvena) 40%, var(--crta)); }
.gumb.mali { min-height: 40px; padding: 6px 14px; font-size: .86em; border-radius: 11px; }
.gumb[disabled], .gumb.zauzet { opacity: .55; pointer-events: none; }
.gumb svg { width: 1.2em; height: 1.2em; flex: none; }
@media (prefers-color-scheme: dark) { .gumb.glavni { background: #2c5282; border-color: #2c5282; } }
.redak-gumba { display: flex; gap: 10px; margin: 12px 0; }
.redak-gumba > .gumb { flex: 1; }

/* popis razgovora */
.kartica { background: var(--kartica); border: 1px solid var(--crta); border-radius: 18px; padding: 16px; margin: 0 0 12px; }
.kartica h2 { margin: 0 0 8px; font-size: 1.08em; }
.kartica p { margin: 6px 0; }
.razgovor { display: block; width: 100%; text-align: left; background: var(--kartica); border: 1px solid var(--crta); border-radius: 18px; padding: 15px 16px; margin: 0 0 10px; color: inherit; cursor: pointer; position: relative; }
.razgovor .gornji { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.razgovor .naslov { font-weight: 700; font-size: 1.04em; line-height: 1.3; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.razgovor .vrijeme { font-size: .78em; color: var(--tekst3); flex: none; }
.razgovor .sazetak { color: var(--tekst2); font-size: .92em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.razgovor .donji { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.razgovor.novo { border-color: color-mix(in srgb, var(--tamna) 45%, var(--crta)); box-shadow: 0 2px 10px color-mix(in srgb, var(--tamna) 14%, transparent); }
.razgovor.novo .naslov::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; margin-right: 8px; vertical-align: 2px; }
.cip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .78em; font-weight: 650; background: var(--nije); color: var(--tekst2); border: 1px solid var(--nije-rub); white-space: nowrap; }
.cip.odgovoreno { background: var(--ceka); border-color: var(--ceka-rub); color: var(--zelena); }
.cip.radi, .cip.ceka_metro, .cip.ceka_slanje { background: var(--pretp); border-color: var(--pretp-rub); color: var(--tamna-2); }
.cip.potvrda { background: var(--ukratko); border-color: var(--ukratko-rub); color: var(--ukratko-naslov); }
.cip.odbijeno, .cip.greska { background: var(--crvena-meko); border-color: var(--crvena); color: var(--crvena); }
.cip.pdf { background: var(--kartica); border-color: var(--crta); color: var(--tekst2); }

/* razgovor */
.poruke { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.poruka { max-width: 100%; }
.poruka.ivan { align-self: flex-end; max-width: 88%; background: var(--ivan); color: var(--ivan-tekst); border-radius: 18px 18px 6px 18px; padding: 12px 15px; }
.poruka.metro { background: var(--kartica); border: 1px solid var(--crta); border-radius: 6px 18px 18px 18px; padding: 15px 16px; }
.poruka.medju { align-self: flex-start; background: none; border: 1px dashed var(--crta); color: var(--tekst2); border-radius: 14px; padding: 10px 14px; font-size: .9em; }
.poruka .tko { font-size: .76em; font-weight: 700; color: var(--tekst3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; display: flex; gap: 8px; }
.poruka.ivan .tko { color: color-mix(in srgb, var(--ivan-tekst) 60%, transparent); justify-content: flex-end; }
.poruka .tekst p { margin: 0 0 .7em; overflow-wrap: anywhere; }
.poruka .tekst p:last-child { margin-bottom: 0; }
.okvir { border-radius: 14px; padding: 12px 14px; margin: 0 0 .8em; border-left: 5px solid; }
.okvir b.oznaka { display: block; font-size: .78em; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.okvir.ukratko { background: var(--ukratko); border-color: var(--ukratko-rub); }
.okvir.ukratko b.oznaka { color: var(--ukratko-naslov); }
.okvir.pretp { background: var(--pretp); border-color: var(--pretp-rub); }
.okvir.trebam { background: var(--ceka); border-color: var(--ceka-rub); }
.prilozi { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.prilog { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--naglasak-meko); color: var(--tekst); text-decoration: none; border: 1px solid var(--crta); min-height: 60px; }
.poruka.ivan .prilog { background: color-mix(in srgb, var(--kartica) 55%, transparent); }
.prilog .ik { flex: none; width: 40px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: #b42318; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.prilog .ik.slika { background: #2c5282; }
.prilog .ik.ostalo { background: #475569; }
.prilog .ime { flex: 1; min-width: 0; font-weight: 600; font-size: .92em; overflow-wrap: anywhere; line-height: 1.3; }
.prilog .ime small { display: block; font-weight: 400; color: var(--tekst3); font-size: .82em; margin-top: 2px; }
.ocjene { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--crta); }
.ocjene .sitno { margin-bottom: 8px; }
.ocjene .niz { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ocjene a { display: grid; place-items: center; height: 36px; border-radius: 9px; background: var(--nije); color: var(--tekst2); text-decoration: none; font-size: .82em; font-weight: 650; border: 1px solid var(--crta); }
.radnja-kartica { border-radius: 18px; padding: 16px; margin: 14px 0 0; border: 1.5px solid var(--ukratko-rub); background: var(--ukratko); }
.radnja-kartica.plava { border-color: var(--pretp-rub); background: var(--pretp); }
.radnja-kartica h3 { margin: 0 0 6px; font-size: 1.04em; }
.radnja-kartica p { margin: 0 0 12px; color: var(--tekst2); }
.radnja-kartica .redak-gumba { margin-bottom: 0; }
.ceka-slanje { font-size: .82em; margin-top: 8px; opacity: .85; }

/* pisanje */
.pisanje { margin-top: 16px; }
textarea, input[type="text"], input[inputmode] { width: 100%; padding: 14px 15px; border-radius: 14px; border: 1.5px solid var(--crta); background: var(--kartica); outline: none; font-size: 1em; }
textarea { min-height: 170px; resize: vertical; line-height: 1.45; }
.pisanje textarea { min-height: 96px; }
textarea:focus, input:focus { border-color: var(--tamna-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tamna-2) 18%, transparent); }
label.oznaka { display: block; font-weight: 650; margin: 16px 0 6px; font-size: .92em; }
.savjet { font-size: .82em; color: var(--tekst3); margin: 6px 2px 0; }
.prijedlozi { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.prijedlog { border: 1px solid var(--crta); background: var(--kartica); border-radius: 999px; padding: 8px 14px; font-size: .84em; color: var(--tekst2); cursor: pointer; text-align: left; }
.dodaj { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 12px; border-radius: 14px; border: 1.5px dashed var(--nije-rub); background: transparent; color: var(--tamna-2); font-weight: 650; cursor: pointer; }
.dodaj svg { width: 1.25em; height: 1.25em; }
.dodane { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dodana { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px; background: var(--kartica); border: 1px solid var(--crta); font-size: .88em; }
.dodana span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dodana button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--nije); font-size: 1.2em; }
.napredak { height: 8px; border-radius: 99px; background: var(--nije); overflow: hidden; margin-top: 10px; }
.napredak b { display: block; height: 100%; background: #1e3a5f; width: 0; transition: width .2s; }
.upozorenje { border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; background: var(--pretp); border-left: 5px solid var(--pretp-rub); font-size: .9em; color: var(--tekst2); }
.upozorenje.crveno { background: var(--crvena-meko); border-color: var(--crvena); }

/* više */
.popis { background: var(--kartica); border: 1px solid var(--crta); border-radius: 18px; overflow: hidden; margin-bottom: 14px; }
.stavka { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border: 0; border-bottom: 1px solid var(--crta); background: none; text-align: left; color: inherit; min-height: 60px; cursor: pointer; }
.stavka:last-child { border-bottom: 0; }
.stavka .sadrzaj { flex: 1; min-width: 0; }
.stavka .glavno { font-weight: 650; }
.stavka .dodatno { font-size: .82em; color: var(--tekst3); margin-top: 2px; }
.stavka .strelica { color: var(--tekst3); font-size: 1.4em; }
h2.odjeljak { font-size: .8em; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst3); margin: 22px 4px 8px; }

/* prijava */
.prijava { min-height: 100vh; padding: calc(56px + var(--gore)) 24px 40px; display: flex; flex-direction: column; align-items: stretch; max-width: 460px; margin: 0 auto; }
.prijava .veliki-logo { width: 104px; height: 104px; border-radius: 26px; background: #1e3a5f; color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 34px; letter-spacing: .05em; box-shadow: inset 0 -10px 0 #f59e0b, 0 12px 30px rgba(30,58,95,.3); margin: 0 auto 22px; }
.prijava h1 { text-align: center; font-size: 2em; margin: 0 0 6px; }
.prijava > p { text-align: center; color: var(--tekst2); margin: 0 0 26px; }
.prijava input { text-align: center; font-size: 1.25em; letter-spacing: .12em; margin-bottom: 12px; }
.prijava input::placeholder { letter-spacing: 0; font-size: .78em; }
.prijava .gumb { width: 100%; margin-bottom: 10px; }
.prijava details { margin-top: 18px; color: var(--tekst2); }
.prijava summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.greska-poruka { color: var(--crvena); text-align: center; margin-top: 10px; min-height: 1.5em; }

/* tabovi */
.tabovi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; padding: 6px 8px calc(6px + var(--dolje));
  background: color-mix(in srgb, var(--kartica) 94%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-top: 1px solid var(--crta); }
.tab { flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--tekst3); position: relative; min-height: 56px; }
.tab svg { width: 27px; height: 27px; }
.tab.aktivan { color: var(--tamna); }
.znacka { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #f59e0b; color: #1f2933; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* poruka na dnu */
.zdravica { position: fixed; left: 16px; right: 16px; bottom: calc(86px + var(--dolje)); z-index: 60; padding: 14px 16px; border-radius: 14px; background: #1f2933; color: #fff; font-size: .92em;
  box-shadow: 0 8px 26px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; max-width: 640px; margin: 0 auto; }
.zdravica.vidljiva { opacity: 1; transform: none; pointer-events: auto; }
.zdravica.greska { background: #b42318; }

/* preglednik priloga (iz MONO 1.8.2, pwa/preglednik.js): sloj s X u gornjem kutu za PDF, slike, tekst i ostalo */
html.pregled-otvoren, html.pregled-otvoren body { overflow: hidden; }
.pregled { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--pozadina); }
.pregled-traka { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--gore)) 12px 8px; background: var(--kartica); border-bottom: 1px solid var(--crta); }
.pregled-naslov { flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.pregled-naslov b, .pregled-naslov span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pregled-naslov b { font-size: 15px; }
.pregled-naslov span { font-size: 12px; color: var(--tekst3); }
.pregled-gumb { flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tekst) 9%, transparent); color: var(--tekst); }
.pregled-gumb svg { width: 22px; height: 22px; }
.pregled-gumb[disabled] { opacity: .35; }
.pregled-x { background: var(--tekst); color: var(--kartica); }
.pregled-sadrzaj { flex: 1; min-height: 0; position: relative; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pregled-sadrzaj:focus { outline: none; }
.pregled-platno { width: calc(100% * var(--zum, 1)); margin: 0 auto; padding: 12px 10px calc(84px + var(--dolje)); }
.pregled-stranica { position: relative; margin: 0 0 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); }
.pregled-stranica img { display: block; width: 100%; height: 100%; }
.pregled-stranica.greska::after { content: attr(data-poruka); position: absolute; inset: 0; display: grid; place-items: center; color: #8e8e98; font-size: 13px; }
.pregled-slika img { display: block; width: 100%; height: auto; background: #fff; }
.pregled-tekst { margin: 0; padding: 14px 16px calc(24px + var(--dolje)); white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.pregled-napomena { padding: 0 16px calc(16px + var(--dolje)); }
.pregled-okvir { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.pregled-alati { position: absolute; left: 50%; bottom: calc(14px + var(--dolje)); transform: translateX(-50%); display: flex; align-items: center; padding: 3px; border-radius: 999px; background: rgba(28,28,31,.9); color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.25); white-space: nowrap; }
.pregled-alati button { min-width: 46px; height: 42px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: inherit; font-size: 22px; line-height: 1; }
.pregled-alati .pregled-zum { min-width: 64px; font-size: 14px; font-variant-numeric: tabular-nums; }
.pregled-broj { padding: 0 12px 0 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pregled-kartica { width: calc(100% - 32px); max-width: 420px; margin: 24px auto; text-align: center; }
.pregled-ikona { width: 64px; height: 76px; margin: 4px auto 12px; border-radius: 10px; display: grid; place-items: center; background: var(--naglasak-meko); color: var(--naglasak); font-weight: 800; font-size: 14px; }
.pregled-spremi { position: absolute; left: 16px; right: 16px; bottom: calc(70px + var(--dolje)); }
.pregled-spremi .gumb { width: 100%; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.pregled-otvoren .zdravica { z-index: 80; bottom: calc(76px + var(--dolje)); }