/*!
 * ObiskoMeter — Kazalnik obiska Blejskega jezera
 * Copyright by Turizem Bled 2026 (Rok Lesjak)
 * verzija: v1.081026a
 * Vse pravice pridržane. Kopiranje, spreminjanje in ponovna uporaba te kode brez pisnega dovoljenja Turizma Bled ni dovoljena.
 * All rights reserved. Copying, modifying or reusing this code without prior written permission of Bled Tourist Board is prohibited.
 */
:root {
  --brand: #005038;        /* CGP bled.si — R0 G80 B56 */
  --brand-dark: #003a28;
  --brand-tint: #d9e2e0; /* enako kot ozadje odseka "Zeleni Bled" na bled.si naslovnici */
  --ink: #000000; /* cista crna - najvecja mozna kontrastna rezerva za slabovidne (21:1) */
  /* NAMENOMA enako kot --ink (cista crna) - stran mora biti dosledno AA (in vec) za
     slabovidne, zato tudi "podrejeno" besedilo (vreme, imena zavihkov/dni, opombe) ni vec
     sivo, ampak crno. Spremenljivki ostajata loceni od --ink v kodi zaradi morebitne
     prihodnje potrebe po hierarhiji, a danes kazeta na isto barvo. */
  --muted: #000000;
  --hint: #000000;
  --line: #e2e6e8;
  --line-strong: #c9d1d4;
  --surface: #ffffff;
  --surface-2: #f6f8f9;
  --radius: 10px;
  --font: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* En sam odtenek (CGP zelena) v narascajoci temnosti namesto "semaforske" lestvice -
     glej isto obrazlozitev pri statusLevels v config.js. Ozadje oblacka (znacke) je NAMENOMA
     ENAKO za vseh 5 stopenj (samo besedilo/rob potemni) - loceni "tinti" bi bili med
     sabo prakticno neopazno razlicni (vsi zelo bledo zeleni) in bi le motili.
     Trenutna paleta: besedilo/rob oblacka #357049 -> #003a28 (zelo nizek -> zelo visok obisk),
     ozadje oblacka #e6f3ea. Te barve so NAMENOMA TEMNEJSE od barvnega prehoda ploskev v
     config.js (gradientFrom/To: #c7ebd6 -> #003a28 za polnilo jezera, stolpce grafa in
     kvadratka legende, kjer svetlejsi odtenki delujejo dobro); tu gre za BESEDILO na svetlem
     ozadju, kjer bi enako svetli odtenki imeli prenizek kontrast/citljivost. */
  --status-very-low: #357049; /* WCAG AA (4.5:1) na --status-very-low-tint ozadju */
  --status-very-low-tint: #e6f3ea;
  --status-low: #2f6b47;
  --status-low-tint: #e6f3ea;
  --status-medium: #235c3d;
  --status-medium-tint: #e6f3ea;
  --status-high: #164a32;
  --status-high-tint: #e6f3ea;
  --status-very-high: #003a28;
  --status-very-high-tint: #e6f3ea;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.om-widget {
  max-width: 400px;
  margin: 0 auto;
  background: var(--surface);
  padding: 16px;
}

.om-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.om-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

/* telefon: daljsi naslov mora v eno vrstico ob gumbu SL/EN */
@media (max-width: 639px) {
  .om-title { font-size: 14px; }
}

.om-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.om-updated {
  font-size: 11px;
  color: var(--hint);
  white-space: nowrap;
}

.om-lang {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
}

.om-lang button {
  border: 0;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  cursor: pointer;
}

.om-lang button.is-active {
  background: var(--brand);
  color: #fff;
}

.om-tabs {
  display: flex;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
}

.om-tab {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, color 0.2s;
}

.om-tab.active {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.om-panel { display: none; }
.om-panel.active { display: block; }

#panel-current.active {
  background: var(--brand-tint);
  padding: 14px;
  margin: 0 -2px;
}

.om-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}

.om-loading-note {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 0 2px;
}

.om-gauge-svg {
  width: 290px;
  height: auto;
  /* fijaker pri Veliki Zaki vozi levo od jezera, kjer je risba (23 enot siroka) izven viewBox-a -
     vodoravno jo pustimo videti, navpicno pa se se vedno obreze na okvir risbe */
  overflow: visible;
  clip-path: inset(0 -40px 0 -40px);
}

.om-level-fill {
  transition: y 1s ease, height 1s ease, fill 1s ease;
}

.om-gauge-label {
  text-align: center;
  position: relative;
}

.om-gauge-count-row {
  display: flex;
  align-items: flex-end;
  /* napis "nosilne zmogljivosti" ima isto osnovnico kot odstotek (starejsi brskalniki: spodnji rob) */
  align-items: last baseline;
  justify-content: center;
  gap: 6px;
}

.om-gauge-count {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.om-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.om-bike-btn {
  font-style: normal;
  font-size: 10px;
}

.om-pause-btn {
  font-style: normal;
  font-size: 9px;
}

.om-pause-btn.is-paused {
  background: var(--brand-tint);
  color: var(--brand-dark);
  border-color: var(--brand);
}

.om-info-btn:hover, .om-info-btn.is-active {
  background: var(--brand-tint);
  color: var(--brand-dark);
  border-color: var(--brand);
}

/* "position: absolute" sam po sebi NE potisne sosednje vsebine navzdol, a lahko vseeno
   pogolta vec navpicnega prostora, kot ga ima zaprt widget - npr. v fiksno visokem iframe
   vgrajenem na bled.si to pomeni, da se del oblacka odreze/skrije POD spodnjim robom
   (namesto da bi ga potisnil navzdol). Zato je oblacek sidran na DNO CELOTNE ".om-gauge-label"
   (ne le majhnega prostora pod stevilko) - s tem se NIKOLI ne razteza pod dejanski spodnji
   rob ze obstojece (zaprte) vsebine widgeta, ne glede na dolzino besedila. */
.om-info-popover {
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  z-index: 20;
  cursor: pointer;
}

.om-info-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.om-info-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

#om-bike-text {
  white-space: pre-line;
}

.om-info-credit {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--hint);
}

.om-landmark-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: underline;
}
.om-landmark-link:empty { display: none; }

.om-gauge-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.om-gauge-btns {
  display: flex;
  gap: 6px;
}

.om-gauge-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.om-status-pill {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.om-status-pill.very-low { background: var(--status-very-low-tint); color: var(--status-very-low); border-color: var(--status-very-low); }
.om-status-pill.low { background: var(--status-low-tint); color: var(--status-low); border-color: var(--status-low); }
.om-status-pill.medium { background: var(--status-medium-tint); color: var(--status-medium); border-color: var(--status-medium); }
.om-status-pill.high { background: var(--status-high-tint); color: var(--status-high); border-color: var(--status-high); }
.om-status-pill.very-high { background: var(--status-very-high-tint); color: var(--status-very-high); border-color: var(--status-very-high); }
.om-status-pill.excessive { font-weight: 700; }

.om-peak-marker {
  opacity: 0.85;
  transition: y 1s ease, height 1s ease;
}

.om-pletna {
  transition: opacity 1.2s ease;
}
.om-pletna circle {
  opacity: 0.9;
}

.om-pletna-pier circle {
  opacity: 0.55;
}

/* Klikljive oznake na zemljevidu (glej initLandmarkPopovers v app.js) - kazalec pokaze,
   da lahko nanje kliknes za vec informacij. */
.om-pletna-pier, .om-pletna, .om-fijaker, .om-landmark-island, .om-landmark-castle {
  cursor: pointer;
}

.om-now-legend {
  white-space: pre-line;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.om-peak-legend {
  white-space: pre-line;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.om-fill-legend {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.om-fill-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--hint);
}

.om-fill-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid #000;
}

.om-fill-swatch-solid {
  background: var(--brand);
}

.om-fill-swatch-striped {
  /* -45deg (ne 45deg!) - SVG "rotate(45)" v jezeru in CSS "45deg" gradient NISTA
     ekvivalentna (nasprotna smer poševnic) - -45deg se ujema s smerjo v jezeru/napovedi. */
  background: repeating-linear-gradient(-45deg, var(--brand), var(--brand) 3px, #ffffff 3px, #ffffff 6px);
}

/* vreme danes - animirana glava na zavihku "Trenutno stanje" */
.om-weather-today {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 4px 8px;
}

.om-hourly-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 4px;
}

.om-hourly-title { font-size: 11px; font-weight: 500; color: var(--muted); }
.om-hourly-srcname { font-size: 9px; font-weight: 400; color: var(--hint); }

.om-hourly-modes {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
}

.om-hourly-mode {
  width: 26px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.om-hourly-mode[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }

.om-hourly-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.om-mode-icon { display: block; margin: 2px auto; color: var(--ink); }

/* diskreten urni pas - enotno ozadje ne glede na vreme (vreme ni bistvo widgeta) */
.om-weather-today { background: var(--surface); }

.om-hourly {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  gap: 2px;
}

.om-hour-nav {
  position: relative;
  z-index: 1;
  flex: none;
  width: 20px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.om-hour-nav:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); border-radius: 6px; }
.om-hour-nav:disabled { opacity: 0.25; cursor: default; }

.om-hourly { min-height: 63px; }

.om-lake {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 63px;
}

.om-lake-val { font-size: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.om-lake-sub { font-size: 11px; color: var(--muted); }

.om-hour-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.om-sun-event { display: block; margin: 0 auto; color: var(--ink); }

.om-hour-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.om-hour-time.is-now { font-weight: 700; color: var(--ink); }
.om-hour-icon { font-size: 16px; line-height: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.om-hour-temp { font-size: 12px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.om-hour-sunlabel { font-size: 11px; font-weight: 500; }
.om-hour-precip { font-size: 9px; color: var(--muted); min-height: 10px; white-space: nowrap; }

.om-forecast-note {
  font-size: 12px;
  color: var(--brand-dark);
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin-top: 16px;
  line-height: 1.45;
}

/* Viden le na sirokem zaslonu - glej @media (min-width:640px) nizje, ki ga odkrije. Na
   ozkem (telefon) to vlogo ze opravlja zavihek "Napoved" sam. */
.om-forecast-title {
  display: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}

.om-forecast-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.om-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.om-nav-btn:hover:not(:disabled) { background: var(--surface-2); }
.om-nav-btn:disabled { opacity: 0.35; cursor: default; }

.om-forecast-nav-label {
  font-size: 11px;
  color: var(--hint);
}

.om-forecast-chart {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 260px;
  padding: 0 4px;
}

.om-forecast-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.om-forecast-weather {
  font-size: 11px;
  color: var(--muted);
  height: 16px;
  line-height: 16px;
  white-space: nowrap;
}

.om-forecast-bars-area {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.om-forecast-bar {
  position: relative;
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 2px 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
}

/* "danes" stolpec: polno (dosedanji obisk) spodaj, crtkano (preostanek do napovedi) zgoraj -
   enaka logika kot polnilo + crtkano obmocje na jezeru na "Trenutno stanje". */
.om-forecast-bar-solid,
.om-forecast-bar-striped {
  width: 100%;
}

.om-forecast-value {
  /* pozicioniran glede na .om-forecast-bars-area (ne .om-forecast-bar, ki ima
     overflow:hidden za obrezano polno/crtkano polnilo) - "bottom" nastavi app.js
     glede na visino stolpca, da stevilka vedno lebdi tik nad njim. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.15;
}

.om-forecast-pct {
  display: block;
  font-weight: 600;
  color: var(--muted);
}

.om-forecast-day {
  font-size: 10px;
  color: var(--hint);
}

.om-forecast-date {
  font-size: 9px;
  color: var(--hint);
}

.om-forecast-bar-wrap.is-today .om-forecast-day {
  color: var(--brand);
  font-weight: 700;
}

.om-forecast-bar-wrap.is-today .om-forecast-date {
  color: var(--brand);
  opacity: 1;
}


/* Sirok zaslon (npr. vgradnja na bled.si pod "Nacrtuj svoj obisk") - oba panela drug ob
   drugem, brez zavihkov "Trenutno stanje"/"Napoved". Pod to sirino (telefon) se ne
   spremeni nic - ostane danasnje zavihcno preklapljanje (glej initTabs v app.js). En sam
   vir/URL za obe postavitvi, brskalnik izbere glede na dejansko sirino. */
@media (min-width: 640px) {
  .om-widget { max-width: 960px; }

  .om-tabs { display: none; }

  .om-panels-row {
    display: flex;
    align-items: stretch;
    gap: 24px;
  }

  .om-panel {
    display: block !important;
    flex: 1;
    min-width: 0;
  }

  .om-forecast-title {
    display: block;
  }

  /* Opomba na dnu stolpca, da njen spodnji rob sovpada z zelenim poljem levo. */
  #panel-forecast {
    padding-top: 2px;
    display: flex !important;
    flex-direction: column;
  }

  /* graf zapolni prosto visino stolpca do opombe (levi stolpec je viset zaradi urnega pasu vremena) */
  #panel-forecast .om-forecast-chart {
    flex: 1 1 auto;
    height: auto;
    min-height: 260px;
  }

  /* Glavni naslov je isto velik kot "Zeleni Bled" na bled.si naslovnici (34px) - ker je
     v .om-header, ki sega cez CELO sirino widgeta (ne v ozkem stolpcu), ima dovolj prostora
     in se NE prelomi v 2 vrstici. "Predviden obisk in zgodovina" in opomba spodaj pa STA v
     ozkem stolpcu - pri 34px/18px sta se prelomila v vec vrstic in podrla razmerje visin
     med obema panela, zato ostajata manjsa. */
  .om-title {
    font-size: 34px;
    font-weight: 700;
  }

  .om-forecast-title {
    font-size: 18px;
    font-weight: 600;
  }

  .om-forecast-note {
    font-size: 12px;
  }
}


/* Stikala pregleda (mesecni / dnevni / urni) pod naslovom "Predviden obisk in zgodovina" */
[hidden] { display: none !important; }

.om-view-tabs {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 12px;
}

.om-view-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  padding: 8px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.om-view-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.om-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.om-view-month-info {
  margin: 24px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* urni pregled - ploscinski graf */
.om-hv-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.om-hv-readout { min-height: 18px; margin: 6px 0 2px; text-align: center; font-size: 12px; color: var(--muted); }
.om-hv-status { padding: 40px 8px; text-align: center; font-size: 13px; color: var(--muted); }
.om-hv-retry { margin-left: 6px; font: inherit; font-size: 12px; color: var(--brand); background: transparent; border: 1px solid var(--brand); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.om-hv-plot { flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; padding: 0 4px 0 30px; touch-action: pan-y; }
.om-hv-box { position: relative; flex: 1 1 auto; min-height: 190px; cursor: crosshair; }
.om-hv-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.om-hv-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.om-hv-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.om-hv-line-pred { stroke-dasharray: 5 4; }
.om-hv-area { fill: var(--brand); fill-opacity: 0.18; stroke: none; }
.om-hv-area-pred { fill-opacity: 0.08; }
.om-hv-ylab { position: absolute; left: -30px; width: 26px; transform: translateY(-50%); text-align: right; font-size: 9px; color: var(--hint); font-variant-numeric: tabular-nums; }
.om-hv-xaxis { position: relative; height: 16px; margin-top: 4px; }
.om-hv-xlab { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--hint); }
.om-hv-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--brand); pointer-events: none; }

.om-month-empty { color: var(--hint); }
.om-month-stub { background: var(--line-strong); border-radius: 2px; opacity: 0.6; }