/* ---- Nativní components section ----
   Na HLAVNÍ stránce zůstává schovaná — uptime pásek si z ní bere footer a přesouvá ho
   DOVNITŘ rozbalené karty (žádné skrolování dolů), po zavření ho vrací zpátky.
   POZOR na `body.index`: to pravidlo musí platit jen na hlavní stránce. Na
   /subscriptions/<token>/edit renderuje Statuspage do components-section formulář
   s výběrem komponent — bez toho omezení bychom ho schovali a stránka by byla prázdná. */
body.index .layout-content.status .components-section { display: none; }

/* Uptime pásek uvnitř karty — je v ní poslední, tak ho oddělíme linkou odshora. */
.gd-timeline {
  padding: 14px 16px 16px;
  border-top: 1px solid #EFEFEF;
  position: relative;   /* kotva pro popisek rozsahu */
}

/* "Last 90 days" vpravo nahoře, tedy na stejném řádku jako název metriky vlevo.
   Absolutně, protože název metriky je uvnitř přesunutého nativního bloku a doprostřed
   jednoho flex řádku ho dostat nelze bez sahání do jeho struktury.
   POZOR: font-family tady MUSÍ zůstat, jinak ho přepíše pravidlo, které celému
   .gd-timeline vnucuje systémové písmo (kvůli ikonovému fontu nativního pásku). */
.gd-timeline-cap {
  position: absolute; top: 14px; right: 16px;
  font-family: 'GoodData Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 11px; font-weight: 600; color: #A8A8AB;
  letter-spacing: .02em; white-space: nowrap; pointer-events: none;
}

/* Pásek je nativní Statuspage widget — necháme mu systémové písmo (firemní font je
   subset a neměl by znaky, které si Statuspage vypisuje). ALE ikony musí zůstat na
   svém ikonovém fontu, jinak se glyf přemapuje na náhodný obrazec. */
.gd-timeline,
.gd-timeline *:not(i):not(svg):not([class*="icon"]):not([class*="fa-"]):not(.gd-timeline-cap) {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Ikona stavu vedle názvu metriky — hlavička karty stav už říká vpravo, tak ji skryjeme. */
.gd-timeline i,
.gd-timeline [class*="icon"],
.gd-timeline [class*="fa-"] { display: none !important; }
.gd-timeline .component-container,
.gd-timeline .child-components-container,
.gd-timeline .components-children,
.gd-timeline .child-components {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.gd-timeline .name { font-size: 13px !important; color: #3a3a3d !important; }

/* Stav metriky ("Operational ✔") skryt — hlavička karty ho už říká vpravo. */
.gd-timeline .component-status,
.gd-timeline .component-status * { display: none !important; }

/* Osa pásku ("90 days ago — 99.98 % uptime — Today") je ZAPNUTÁ (zkouška 1.10.2026).
   Nativní legenda je lepší než náš vlastní popisek: Statuspage na užších obrazovkách
   zkracuje pásek na 60/30 dní a legenda se přepne s ním (číslo i "N days ago").
   Revert: vrátit ".gd-timeline .legend," do seznamu skrytých níž. */
.gd-timeline .legend { margin-top: 6px !important; color: #848486 !important; font-size: 12px !important; }
/* Cela legenda jednou barvou - zadne zvyrazneni procenta. */
.gd-timeline .legend,
.gd-timeline .legend * { color: #848486 !important; opacity: 1 !important; }
.gd-timeline .uptime-over-days,
.gd-timeline .uptime-range,
.gd-timeline .availability-time-range { display: none !important; }

/* ---- Firemní font ----
   GoodData Sans — ten samý, kterým je vysázené logo i nadpisy na gooddata.com.
   Soubory jsou veřejné a posílají Access-Control-Allow-Origin: *, takže je lze načíst
   i odsud. Doména .ai je zvolená schválně: .com na ně vrací 301 a přesměrování
   u fontů umí rozbít CORS. */
@font-face {
  font-family: 'GoodData Sans';
  src: url('https://www.gooddata.ai/fonts/dc8ebcd096d8d65d80200bbe8e045d86-subset.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GoodData Sans';
  src: url('https://www.gooddata.ai/fonts/bca6d3310b5c9dae1dae416e8abc8405-subset.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* !important je tu nutné — header i footer mají font nastavený inline a inline styl
   by jinak vyhrál. Prvky <i> a <svg> vynechány, aby to nerozbilo případné ikony. */
body,
.layout-content.status,
h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, label, li, td, th, strong, em, small, summary, details {
  font-family: 'GoodData Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---- Sekce produktů (GoodData Cloud / GoodData Legacy) ----
   Bez ?scope= jsou vidět obě pod sebou. S ?scope=cloud / ?scope=legacy footer druhou
   sekci schová přes .gd-section-hidden (pro embed z konkrétní produktové stránky). */
.gd-section { margin-bottom: 26px; }
.gd-section:last-child { margin-bottom: 0; }
.gd-section-hidden { display: none !important; }
.gd-section-head {
  font-size: 12px; font-weight: 700; color: #848486; text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 10px 2px;
}

/* Nadpisy produktů v pickeru komponent na /subscriptions/<token>/edit.
   Vizuálně shodné s .gd-section-head na hlavní stránce, ať je to jedno rozdělení.
   list-style: none kvůli případu, kdy je picker <ul> a nadpis vkládáme jako <li>. */
.gd-picker-head {
  list-style: none;
  font-size: 13px; font-weight: 700; color: #222224; text-transform: uppercase;
  letter-spacing: .06em; margin: 0; padding: 22px 20px 2px 28px;
  /* Vyrazneji nez driv (seda #848486 v prostoru "plandala"). Levy padding 28 px je jen
     vychozi hodnota — footer po zplosteni pickeru ZMERI, kde realne lezi checkbox,
     a nadpis na nej zarovna presne (alignPickerHeads). Odhad ze screenshotu uz jednou
     ujel kvuli meritku retina displeje. */
}
.gd-picker-head:first-child { margin-top: 0; }

/* ---- DC list (one status per DC, accordion expand) ---- */
.gd-card {
  background: #ffffff; border: 1px solid #EAE7E8; border-radius: 12px;
  margin-bottom: 10px; overflow: hidden; transition: border-color 0.15s ease;
}
.gd-card:hover { border-color: #cecece; }

/* Left accent by worst status (set via data-worst in JS).
   Údržba má MODROU, ne oranžovou — je plánovaná, není to porucha. Musí souhlasit
   s COLOR.under_maintenance ve footeru a se STATE v Zendesk embedu. */
.gd-card[data-worst="degraded_performance"] { border-left: 3px solid #F59E0B; }
.gd-card[data-worst="under_maintenance"] { border-left: 3px solid #2563EB; }
.gd-card[data-worst="partial_outage"] { border-left: 3px solid #F97316; }
.gd-card[data-worst="major_outage"] { border-left: 3px solid #EF4444; }

.gd-row-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; cursor: pointer;
}
.gd-dot { width: 9px; height: 9px; border-radius: 50%; background: #10B981; flex-shrink: 0; }
.gd-card-title { font-weight: 700; font-size: 15px; color: #222224; }
.gd-card-loc { font-size: 12.5px; color: #848486; }
.gd-card-status { margin-left: auto; font-size: 13px; font-weight: 600; color: #059669; white-space: nowrap; }
.gd-row-chevron { color: #B0B0B3; flex-shrink: 0; transition: transform 0.15s ease; }

.gd-card.gd-active { border-color: #09090c; }
.gd-card.gd-active .gd-row-chevron { transform: rotate(180deg); }

/* Rozbalená karta nesmí řezat obsah — subscribe panel Statuspage přetéká mimo kartu.
   U zabalených karet overflow: hidden zůstává kvůli zaobleným rohům. */
.gd-card.gd-active { overflow: visible; }

#gd-header-logo { height: 30px !important; width: auto !important; max-width: none !important; max-height: none !important; }

/* Na úzkém okně logo a titulek pod sebe, ať se titulek nemačká. */
@media (max-width: 560px) {
  #gd-header-row { grid-template-columns: 1fr !important; justify-items: center; gap: 14px !important; }
  #gd-header-row > div:last-child { display: none; }
}

#gd-host-button { background: #DAFE85 !important; color: #09090c !important; border: none !important; }
#gd-host-button:hover { background: #c9f25f !important; }

/* Nativní incidenty schované — vlastní panel oznámení kreslí footer */
.layout-content.status .unresolved-incidents { display: none !important; }

/* Souhrnný pás ("Partially Degraded Service") schován.
   Na stránce se 14 datacentry je agregovaný verdikt zavádějící — zákazník na IAD1
   si přečte, že je něco degradované, i když jeho DC běží. Seznam per DC je přesnější.
   Navíc ho náš header odstrčil pod seznam, takže tam visel bez kontextu. */
body.index .layout-content.status .page-status { display: none !important; }

/* Subscribe je JEDNO tlačítko v černém boxu vedle Check status, ne v každé kartě.
   Widget Statuspage nijak nezohledňuje, kde stojí — 14 tlačítek by dělalo totéž
   a slibovalo předvybrání DC, které se nestane. Konkrétní DC si zákazník vybere
   až na stránce správy odběru z potvrzovacího e-mailu, o čemž ho informuje hint. */
#gd-subscribe-home { display: inline-flex; align-items: stretch; }

/* Nápovědu vkládá footer dovnitř panelu subscribu, pod nativní popisek.
   Typografie schválně dědí od nativního textu (font-size/color/line-height se
   nenastavují) — jako 12px šedá se ta věta ztrácela mezi dvěma výraznými bloky,
   přitom pro multi-DC zákazníka je to nejdůležitější informace v panelu. */
#gd-subscribe-home .gd-sub-note {
  margin: 10px 0 0;
}

/* Formulář lepil na text nad sebou — "Email address:" splývalo s odstavcem. */
#gd-subscribe-home .updates-dropdown-section form {
  margin-top: 16px !important;
}
/* Než JS přepíše nativní label ("Subscribe to Updates") na "Subscribe", tlačítko
   skryjeme — jinak na zlomek sekundy blikne původní text. `visibility` drží místo,
   takže layout neposkočí. Atribut nastavuje JS, jakmile je hotový. */
/* Sekundární akce na tmavém pozadí. Obtah musí být dost výrazný, aby to na černé
   vůbec čtlo jako tlačítko — při 35% bílé nebyl vidět vůbec.
   POZOR na scope `#gd-subscribe-home`: tahle pravidla musí platit jen pro NAŠE tlačítko
   v černém boxu na hlavní stránce. Statuspage stejné id používá i na detailu incidentu,
   kde je pozadí bílé — bez omezení by tam bylo bílé písmo na bílém.
   Placeholder je ve stejném selektoru SCHVÁLNĚ: jediný způsob, jak zaručit shodnou šířku,
   je dát oběma tentýž styl. Odhadovat pixely by znamenalo, že se to rozejde při první
   změně fontu nebo paddingu. */
#gd-subscribe-home #gd-sub-placeholder,
#gd-subscribe-home a#show-updates-dropdown {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  padding: 10px 18px !important; border-radius: 8px !important;
  font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important;
  text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: none !important; line-height: 1.4 !important; white-space: nowrap !important;
}
#gd-subscribe-home a#show-updates-dropdown:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: #ffffff !important;
}

/* Výměna placeholderu za skutečné tlačítko. Obojí přes `display`, ne `visibility` —
   při visibility by v layoutu stály oba a box by byl dvakrát tak široký.
   Atribut data-gd-sub-ready nastavuje JS na #gd-subscribe-home, až je widget doopravdy
   na místě a přejmenovaný. Do té doby placeholder klikání propouští (pointer-events),
   aby nepůsobil jako rozbité tlačítko. */
#gd-sub-placeholder { pointer-events: none; }
#gd-subscribe-home a#show-updates-dropdown { display: none !important; }
#gd-subscribe-home[data-gd-sub-ready] a#show-updates-dropdown { display: inline-flex !important; }
#gd-subscribe-home[data-gd-sub-ready] #gd-sub-placeholder { display: none !important; }

/* Rozbalovací panel subscribu (nativní Statuspage widget).
   Bez stínu a zaoblení působil překryv jako chyba v layoutu; se stínem ho oko
   přečte jako vrstvu nad obsahem. Selektory ověřené v devtools. */
#gd-subscribe-home .updates-dropdown {
  background: #ffffff !important;
  border: 1px solid #EAE7E8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 36px rgba(9, 9, 12, 0.16), 0 2px 6px rgba(9, 9, 12, 0.06) !important;
}
#gd-subscribe-home .updates-dropdown-nav {
  border-bottom: 1px solid #EAE7E8 !important;
}
/* Sekce mají vlastní rámeček a rohy — ty teď drží obalový panel. */
#gd-subscribe-home .updates-dropdown-section {
  border: none !important;
  border-radius: 0 !important;
}

/* Nativní Past Incidents na hlavní stránce schováno — historii kreslíme sami v panelu
   oznámení z /api/v2/incidents.json. Důvod není vzhled: nativní HTML neprozradí, kterých
   komponent se incident týkal, takže filtrování po DC muselo matchovat kód v titulku.
   Vlastní render čte komponenty z API, takže na pojmenování incidentů už nic nestojí.
   Omezeno na body.index — na /history ta sekce zůstává jako plný archiv. */
body.index .layout-content.status .incidents-list { display: none !important; }

/* Styly pro historii v našem panelu (.gd-ann-head-past, .gd-ann-past) NEJSOU tady,
   ale v injectAnnStyle() ve footeru — u ostatních stylů té komponenty. Ten <style> se
   vkládá do <head> až za tento soubor, takže při shodné specificitě vyhrává on. */

/* Past Incidents — sladění s brandem (platí pro nativní /history) */
.layout-content.status .incidents-list {
  max-width: 820px !important;
  margin: 8px auto 40px !important;
  font-family: 'GoodData Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
.layout-content.status .incidents-list .status-day {
  border: none !important;
  border-top: 1px solid #EAE7E8 !important;
  padding: 16px 4px !important;
  background: transparent !important;
}
.layout-content.status .incidents-list .status-day .date {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #222224 !important;
  margin-bottom: 6px !important;
}
.layout-content.status .incidents-list .no-incidents,
.layout-content.status .incidents-list .empty-day,
.layout-content.status .incidents-list .status-day .color-secondary {
  color: #848486 !important;
  font-size: 13px !important;
}
.layout-content.status .incidents-list .incident-title,
.layout-content.status .incidents-list .actual-title {
  color: #222224 !important;
  font-weight: 600 !important;
}

/* Nadpisy incidentů renderuje Statuspage v theme barvě podle impactu — u `minor` je to
   žlutá, která je na bílém pozadí nečitelná. Barvu stavu nese pruh a ikona, nadpis má být
   prostě čitelný. Platí i na /history a na detailu incidentu, proto BEZ omezení na index.
   `.incident-title` / `.actual-title` jsou ověřené — na nich stojí i filtr historie. */
.incident-title, .incident-title a,
.actual-title, .actual-title a,
.incident-name, .incident-name a {
  color: #222224 !important;
}

/* Tooltip uptime pásku: delší název "Degraded service" se zalamoval do dvou řádků.
   Řádek s výpadkem držíme na jednom řádku a o stupeň menším písmem. */
#uptime-tooltip .outage-field { font-size: 14px; gap: 12px; align-items: center; }
#uptime-tooltip .outage-field .label,
#uptime-tooltip .outage-field .value-hrs,
#uptime-tooltip .outage-field .value-mins { white-space: nowrap; }
#uptime-tooltip .outage-field .label { flex: 1 1 auto; }