/* =====================================================
   MUMU interna — oblikovanje
   Tipografija: Anton (display) + Archivo (besedilo)
   Roza = primarna (stalni meni), modra = povezave/akcent
   ===================================================== */

:root {
  --roza: #E2447E;
  --roza-temna: #C22F66;
  --roza-svetla: #FCE9F1;
  --modra: #2B5BC7;
  --modra-svetla: #E8EEFB;
  --crnina: #241B1E;
  --siva: #7A6E72;
  --papir: #FDFBFA;
  --karta: #FFFFFF;
  --rob: #EBDFE4;
  --zelena: #1F8A5B;
  --rdeca: #C0392B;
  --senca: 0 1px 3px rgba(36, 27, 30, .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--crnina);
  background: var(--papir);
}
main { max-width: 1060px; margin: 0 auto; padding: 16px 14px 80px; }

h2 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.9rem; letter-spacing: .01em; margin: .4em 0 .3em; text-transform: uppercase; }
h3.odsek {
  font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--roza-temna);
  border-bottom: 2px solid var(--roza); padding-bottom: 4px; margin: 28px 0 12px;
}
a { color: var(--modra); }

/* ---------- glava ---------- */
.glava {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  background: var(--karta); border-bottom: 3px solid var(--roza);
  padding: 10px 14px;
}
.logo {
  font-family: 'Anton', sans-serif; font-size: 1.5rem; letter-spacing: .06em;
  color: var(--roza); text-decoration: none;
}
.logo-pod { color: var(--siva); letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; margin-top: 2px; }
.glava nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.glava nav a {
  padding: 7px 12px; border-radius: 999px; text-decoration: none;
  color: var(--crnina); font-weight: 500; white-space: nowrap; font-size: .95rem;
}
.glava nav a.aktiven { background: var(--roza-svetla); color: var(--roza-temna); }
.glava nav a.odjava { margin-left: auto; color: var(--siva); font-size: .85rem; }

/* ---------- gumbi ---------- */
.gumb {
  display: inline-block; padding: 9px 16px; border-radius: 10px;
  border: 1.5px solid var(--crnina); background: var(--karta); color: var(--crnina);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center;
}
.gumb.roza { background: var(--roza); border-color: var(--roza); color: #fff; }
.gumb.roza:hover { background: var(--roza-temna); border-color: var(--roza-temna); }
.gumb.nevaren { border-color: var(--rdeca); color: var(--rdeca); }
.gumb.velik { padding: 12px 24px; font-size: 1.05rem; }
.gumb.mini { padding: 5px 12px; font-size: .85rem; }
.povezava-gumb {
  background: none; border: none; color: var(--modra); cursor: pointer;
  font: inherit; font-size: .85rem; padding: 2px 6px; text-decoration: underline;
}
:focus-visible { outline: 3px solid var(--modra); outline-offset: 2px; }

/* ---------- kategorije / cipi ---------- */
.kategorije { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 18px; }
.cip {
  padding: 6px 14px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid var(--rob); color: var(--crnina); background: var(--karta);
  font-size: .9rem; font-weight: 500;
}
.cip.aktiven { background: var(--roza); border-color: var(--roza); color: #fff; }
.cip.mini { padding: 2px 10px; font-size: .75rem; background: var(--roza-svetla); border: none; color: var(--roza-temna); }
.cip.mini.siv { background: #EFEBEC; color: var(--siva); }

/* ---------- seznam receptov ---------- */
.orodna { display: flex; gap: 10px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.iskanje { flex: 1; min-width: 180px; }
.iskanje input {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid var(--rob); font: inherit; background: var(--karta);
}
.mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kartica {
  display: block; background: var(--karta); border: 1.5px solid var(--rob);
  border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--crnina);
  box-shadow: var(--senca);
}
.kartica:hover { border-color: var(--roza); }
.kartica.bledo { opacity: .65; }
.kartica h3 { margin: 8px 0 6px; font-size: 1.15rem; line-height: 1.25; }
.kartica-vrh { display: flex; gap: 6px; }
.kartica-meta { display: flex; gap: 12px; font-size: .85rem; color: var(--siva); flex-wrap: wrap; }
.marza.dobra { color: var(--zelena); font-weight: 600; }
.marza.slaba { color: var(--rdeca); font-weight: 600; }
.prazno { color: var(--siva); padding: 24px 0; }

/* ---------- recept ---------- */
.recept-glava { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.recept-gumbi { display: flex; gap: 8px; flex-wrap: wrap; }
.recept-gumbi form { display: inline; }
.drobtine { font-size: .85rem; color: var(--siva); margin-bottom: 4px; }
.pod-naslov { color: var(--siva); margin: 2px 0 8px; font-size: .95rem; font-weight: 400; }
.alergeni {
  display: inline-block; background: var(--modra-svetla); color: var(--modra);
  padding: 4px 12px; border-radius: 8px; font-size: .88rem; margin: 2px 0 8px;
}
.dvostolp { display: grid; grid-template-columns: 1fr; gap: 8px 32px; }
@media (min-width: 800px) { .dvostolp { grid-template-columns: 3fr 2fr; } }

/* ---------- skaliranje ---------- */
.skaliranje {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--modra-svetla); border-radius: 12px; padding: 12px 16px; margin: 14px 0;
}
.skaliranje label { font-weight: 600; }
.skaliranje input {
  width: 90px; padding: 9px 12px; font: inherit; font-size: 1.1rem; font-weight: 700;
  border: 1.5px solid var(--modra); border-radius: 10px; text-align: center; background: #fff;
}
.hitri { display: flex; gap: 6px; }
.hitri button {
  padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--modra);
  background: #fff; color: var(--modra); font: inherit; font-weight: 700; cursor: pointer;
}
.hitri button:hover { background: var(--modra); color: #fff; }
.faktor { color: var(--modra); font-weight: 600; font-size: .9rem; }
.print-skala { display: none; }

/* ---------- tabele ---------- */
.tabela { width: 100%; border-collapse: collapse; background: var(--karta); border-radius: 12px; overflow: hidden; box-shadow: var(--senca); }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rob); vertical-align: top; }
.tabela th { background: var(--roza-svetla); color: var(--roza-temna); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.tabela tfoot td { border-bottom: none; background: #FAF5F7; }
.tabela .desno { text-align: right; white-space: nowrap; }
.tabela.ozka { max-width: 640px; }
.vrstica-op { display: block; font-size: .8rem; color: var(--siva); }
.kolicina { font-weight: 600; font-variant-numeric: tabular-nums; }

.postopek {
  background: var(--karta); border: 1.5px solid var(--rob); border-radius: 12px;
  padding: 16px 18px; white-space: normal; line-height: 1.7;
}

/* ---------- kalkulacija: blagajniški listek ---------- */
.listek {
  background: #fff; border: 1px solid var(--rob); border-radius: 4px 4px 0 0;
  padding: 16px 18px 22px; margin-top: 14px; position: relative;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(36, 27, 30, .10);
}
.listek-glava {
  font-family: 'Anton', sans-serif; text-align: center; letter-spacing: .12em;
  border-bottom: 1.5px dashed var(--crnina); padding-bottom: 8px; margin-bottom: 10px;
}
.listek-vrstica { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: .95rem; }
.listek-vrstica.skupaj { border-top: 1.5px dashed var(--crnina); margin-top: 6px; padding-top: 8px; font-weight: 700; }
.marza-vrstica { font-family: 'Anton', sans-serif; font-size: 1.15rem; letter-spacing: .05em; margin-top: 4px; }
.marza-vrstica.dobra { color: var(--zelena); }
.marza-vrstica.slaba { color: var(--rdeca); }
.listek-zob {
  position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: linear-gradient(-45deg, transparent 5.5px, #fff 0) 0 0 / 11px 8px,
              linear-gradient(45deg, transparent 5.5px, #fff 0) 5.5px 0 / 11px 8px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 2px 2px rgba(36, 27, 30, .08));
}

/* ---------- opombe ---------- */
.opomba-forma { display: grid; gap: 8px; margin-bottom: 16px; }
.opomba-forma input, .opomba-forma textarea {
  padding: 10px 12px; border: 1.5px solid var(--rob); border-radius: 10px; font: inherit; background: var(--karta);
}
.opomba { background: var(--roza-svetla); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.opomba-meta { font-size: .82rem; color: var(--siva); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.opomba-meta .inline { margin-left: auto; }

/* ---------- forma recepta ---------- */
.forma textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--rob); border-radius: 12px; font: inherit; }
.polja { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0; }
.polja label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--siva); }
.polja input, .polja select { padding: 10px 12px; border: 1.5px solid var(--rob); border-radius: 10px; font: inherit; color: var(--crnina); background: var(--karta); }

.vrstica {
  display: grid; grid-template-columns: minmax(150px, 2fr) 90px 70px minmax(100px, 1.5fr) auto;
  gap: 6px; align-items: center; margin-bottom: 6px;
}
.vrstica select, .vrstica input { padding: 9px 10px; border: 1.5px solid var(--rob); border-radius: 10px; font: inherit; min-width: 0; background: var(--karta); }
.vrstica .odstrani { color: var(--rdeca); font-size: 1.1rem; text-decoration: none; }
@media (max-width: 640px) {
  .vrstica { grid-template-columns: 1fr 80px 64px auto; }
  .vrstica input[name="vrstica_opomba[]"] { grid-column: 1 / -1; }
}
#dodaj-vrstico { margin: 8px 0 4px; }

/* ---------- sestavine ---------- */
.nova-sestavina { margin: 12px 0 20px; }
.nova-sestavina summary { list-style: none; width: fit-content; }
.nova-sestavina summary::-webkit-details-marker { display: none; }
.nova-sestavina form { margin-top: 12px; grid-template-columns: 2fr 90px 70px 1.2fr 1.2fr auto; }
@media (max-width: 700px) { .nova-sestavina form { grid-template-columns: 1fr 1fr; } }

.sestavine-seznam { display: grid; gap: 8px; }
.sestavina-vrstica {
  display: grid; grid-template-columns: minmax(180px, 2fr) auto minmax(120px, 1.5fr) auto;
  gap: 8px 14px; align-items: center;
  background: var(--karta); border: 1.5px solid var(--rob); border-radius: 12px; padding: 10px 14px;
}
.sestavina-ime .drobno, .drobno { display: block; font-size: .78rem; color: var(--siva); font-weight: 400; }
.sestavina-cena { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sestavina-cena input {
  width: 84px; padding: 8px 10px; border: 1.5px solid var(--rob); border-radius: 10px;
  font: inherit; font-weight: 700; text-align: right;
}
.sestavina-opomba { padding: 8px 10px; border: 1.5px solid var(--rob); border-radius: 10px; font: inherit; font-size: .85rem; min-width: 0; }
.sestavina-gumbi { display: flex; gap: 8px; align-items: center; }
@media (max-width: 700px) {
  .sestavina-vrstica { grid-template-columns: 1fr auto; }
  .sestavina-opomba { grid-column: 1 / -1; }
}

/* ---------- nakup ---------- */
.nakup-seznam { margin: 14px 0; }
.nakup-kategorija {
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .08em;
  color: var(--roza-temna); margin: 16px 0 6px; font-size: .95rem;
}
.nakup-vrstica {
  display: flex; align-items: center; gap: 10px;
  background: var(--karta); border: 1.5px solid var(--rob); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 6px; cursor: pointer;
}
.nakup-vrstica input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--roza); }
.nakup-naziv { flex: 1; }
.nakup-kosi { width: 84px; padding: 8px 10px; border: 1.5px solid var(--rob); border-radius: 10px; font: inherit; text-align: right; }

/* ---------- tedenska nabava ---------- */
.nabava-forma {
  display: grid; grid-template-columns: 2fr 1.2fr 100px auto; gap: 8px;
  background: var(--roza-svetla); border-radius: 12px; padding: 12px; margin: 14px 0;
}
.nabava-forma input { padding: 10px 12px; border: 1.5px solid var(--rob); border-radius: 10px; font: inherit; background: #fff; min-width: 0; }
@media (max-width: 640px) {
  .nabava-forma { grid-template-columns: 1fr 1fr; }
  .nabava-forma input[name="naziv"] { grid-column: 1 / -1; }
}
.drobno-vecje { font-size: .95rem; color: var(--siva); }
.nabava-vrstica {
  display: flex; align-items: center; gap: 12px;
  background: var(--karta); border: 1.5px solid var(--rob); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 6px;
}
.nabava-vrstica input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--roza); flex-shrink: 0; cursor: pointer; }
.nabava-naziv { flex: 1; }
.nabava-naziv .drobno { display: block; }
.nabava-vrstica.kupljena { opacity: .55; }
.nabava-vrstica.kupljena .nabava-naziv strong { text-decoration: line-through; }

/* ---------- prijava ---------- */
.prijava-stran { display: grid; place-items: center; min-height: 100vh; background: var(--roza-svetla); }
.prijava {
  background: var(--karta); border-radius: 18px; padding: 36px 32px; width: min(360px, 92vw);
  display: grid; gap: 12px; text-align: center; box-shadow: 0 8px 30px rgba(226, 68, 126, .18);
}
.prijava .logo { font-size: 2.6rem; }
.prijava input { padding: 12px 14px; border: 1.5px solid var(--rob); border-radius: 12px; font: inherit; text-align: center; }
.napaka { color: var(--rdeca); margin: 0; font-size: .9rem; }

/* ---------- tisk (kuhinjski pogled) ---------- */
@media print {
  .neprint, .glava, .skaliranje, .opomba-forma, .nabava-forma { display: none !important; }
  .nabava-vrstica { border: 1px solid #999; break-inside: avoid; }
  body { background: #fff; font-size: 13px; }
  main { padding: 0; max-width: none; }
  .dvostolp { grid-template-columns: 1fr; }
  .tabela, .kartica, .postopek { box-shadow: none; border: 1px solid #999; }
  .print-skala { display: block; font-weight: 700; }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ================= DOMOV ================= */
.dom-hero{text-align:center;padding:26px 12px 14px}
.dom-datum{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;color:var(--modra)}
.dom-ura{font-family:'Anton',sans-serif;font-size:clamp(3.6rem,16vw,6.5rem);line-height:1;color:var(--roza);margin-top:6px}
.dom-ura #dom-sek{font-size:.35em;color:var(--modra);vertical-align:super}
.dom-opozorilo{display:inline-block;margin-top:14px;background:var(--modra);color:#fff;padding:8px 14px;border-radius:999px;font-weight:700;font-size:.9rem}

/* ---- vreme v slogu iOS ---- */
.ios-vreme{background:linear-gradient(178deg,#28527f 0%,#3a6ea5 45%,#5d92c4 100%);border-radius:22px;padding:20px 14px 14px;color:#fff;margin:10px 0 26px;box-shadow:0 10px 30px rgba(40,82,127,.35)}
.ios-hero{text-align:center;padding:6px 0 18px}
.ios-kraj{font-size:.85rem;font-weight:700;letter-spacing:.22em;opacity:.85}
.ios-temp{font-size:clamp(4.2rem,20vw,6rem);font-weight:200;line-height:1.05;letter-spacing:-.02em;margin-left:.35em}
.ios-opis{font-size:1.05rem;font-weight:500;opacity:.95}
.ios-minmax{font-size:.95rem;font-weight:600;opacity:.85;margin-top:2px}
.ios-kartica{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px 12px;margin-top:10px;backdrop-filter:blur(6px)}
.ios-naslov{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.75;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:7px;margin-bottom:4px}

/* urni trak — vodoravno drsenje */
.ios-ure{display:flex;overflow-x:auto;gap:2px;padding:6px 0 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ios-ure::-webkit-scrollbar{display:none}
.ios-ura{flex:0 0 auto;min-width:52px;text-align:center;padding:4px 2px}
.iu-cas{font-size:.78rem;font-weight:600;opacity:.85}
.iu-ikona{font-size:1.35rem;line-height:1.2;margin:5px 0 3px;position:relative}
.iu-dez{display:block;font-size:.66rem;font-weight:700;color:#8fe3ff}
.iu-temp{font-size:1rem;font-weight:600}

/* 7-dnevne vrstice s temperaturnim trakom */
.ios-dan{display:grid;grid-template-columns:52px 46px 34px 1fr 34px;align-items:center;gap:8px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.14)}
.ios-dan:last-child{border-bottom:none}
.ios-dan.vikend .id-ime{color:#ffd9ea;font-weight:800}
.id-ime{font-size:.92rem;font-weight:600;text-transform:capitalize}
.id-ikona{font-size:1.25rem;text-align:center;line-height:1.1}
.id-dez{display:block;font-size:.64rem;font-weight:700;color:#8fe3ff}
.id-min{font-size:.95rem;font-weight:600;opacity:.65;text-align:right}
.id-max{font-size:.95rem;font-weight:700}
.id-trak{position:relative;height:5px;background:rgba(0,0,0,.28);border-radius:99px}
.id-trak span{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#6fd3f2,#ffe08a,#ff9d54)}

/* prazniki + dogodki */
.dom-blok{margin:22px 0}
.dom-blok h2{font-family:'Anton',sans-serif;font-size:1.35rem;text-transform:uppercase;letter-spacing:.05em;color:var(--modra);margin-bottom:12px}
.dom-spodaj{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.dom-spodaj{grid-template-columns:1fr}}
.dom-seznam{list-style:none;margin:0;padding:0}
.dom-seznam li{display:flex;align-items:baseline;gap:10px;padding:9px 4px;border-bottom:1px dashed var(--roza-svetla,#f7cfe0)}
.dom-seznam .znacka{flex:0 0 auto;background:var(--roza);color:#fff;font-weight:700;font-size:.72rem;padding:3px 8px;border-radius:999px;white-space:nowrap}
.dom-seznam .znacka.modra{background:var(--modra)}
.dom-seznam .naziv{flex:1 1 auto;font-weight:500}
.dom-seznam a.naziv{color:inherit;text-decoration:none}
.dom-seznam a.naziv:hover{color:var(--roza)}
.dom-seznam .desno{flex:0 0 auto;font-size:.78rem;color:#999;white-space:nowrap}
.dom-viri{margin-top:10px;font-size:.8rem;color:#999}
.dom-viri a{color:var(--modra)}
.obvestilo{background:#fff4d6;border:2px solid #e8c56a;border-radius:12px;padding:12px 14px;margin:14px 0}

/* ---- meme ---- */
.dom-meme{background:#fff;border:2px solid var(--roza-svetla,#f7cfe0);border-radius:18px;padding:12px;margin:6px 0 16px;text-align:center}
.dom-meme img{max-width:100%;max-height:420px;border-radius:12px}
.dom-meme-naslov{margin-top:8px;font-weight:600;font-size:.9rem;color:var(--modra)}