/* =============================================================================
 * FEO reskin pro Gatus — vlož CELÝ tento soubor do config: ui.custom-css (blokový scalar |).
 * Gatus custom-css je jeden CSS string, proto je blok SELF-CONTAINED (tokeny jsou uvnitř,
 * neimportuje se). Zdroj hodnot: feo-storybook design systém.
 *
 * Gatus = Vue SPA + Tailwind (mount na #app). Reskin jde jen přebarvit/přefontit/přelogovat,
 * ne přeskládat layout. Bloky označené  // >>> DOLADIT  cílí Tailwind utility a je vhodné je
 * ověřit v inspektoru proti konkrétní verzi Gatusu (odstíny green-500 vs -600 se mezi verzemi liší).
 * ============================================================================= */

/* ── 1) FONTY ─────────────────────────────────────────────────────────────────
 * Varianta A (nejjednodušší, výchozí): Google Fonts. Archivo i DM Mono tam jsou.
 * Varianta B (bez externích requestů): zakomentuj @import a odkomentuj @font-face níž,
 *   fonty z assets/fonts/*.woff2 nahraj na server a uprav url(). Varianta C (data-URI) viz README. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&family=DM+Mono:wght@400;500&display=swap');

/* Varianta B — self-hosted (uprav cesty podle toho, kam woff2 nahraješ):
@font-face { font-family:'Archivo'; font-weight:100 900; font-display:swap;
  src:url('/assets/archivo-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:100 900; font-display:swap;
  src:url('/assets/archivo-latin-ext-wght-normal.woff2') format('woff2'); }
@font-face { font-family:'DM Mono'; font-weight:400; font-display:swap;
  src:url('/assets/dm-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'DM Mono'; font-weight:500; font-display:swap;
  src:url('/assets/dm-mono-latin-500-normal.woff2') format('woff2'); }
*/

/* ── 2) FEO TOKENY (light výchozí) ───────────────────────────────────────────── */
:root {
  --feo-brand: #db0b5b;
  --feo-brand-navy: #1b2b4b;
  --feo-on-brand: #ffffff;
  --feo-accent-text: #cc0a55;

  --feo-bg: #f6f7fb;
  --feo-surface: #ffffff;
  --feo-surface-sunken: #eef0f6;

  --feo-ink: #181920;
  --feo-muted: #42454f;
  --feo-subtle: #63656f;

  --feo-line: #c8ccd6;
  --feo-line-soft: #e8eaf0;

  --feo-up: #157a4a;
  --feo-down: #c8102e;
  --feo-warning: #a3590a;
  --feo-info: #224a9e;
  --feo-on-status: #ffffff;

  --feo-font-sans: 'Archivo', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --feo-font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  --feo-radius: 10px;
}

/* Dark — Gatus přepíná dark třídou na <html>; kryjeme třídu, atribut i OS preferenci. */
.dark, html.dark, [data-theme='dark'] {
  --feo-bg: #15223b;
  --feo-surface: #1b2b4b;
  --feo-surface-sunken: #13203a;
  --feo-ink: #ececec;
  --feo-muted: #cfcfcf;
  --feo-subtle: #a8a8a8;
  --feo-line: #5b667d;
  --feo-line-soft: #44516b;
  --feo-accent-text: #ececec;   /* crimson se v dark nesvětlá do růžové → text bílý */
  --feo-up: #48c78a;
  --feo-down: #f26861;
  --feo-warning: #e0b657;
  --feo-info: #5f8ee0;
  --feo-on-status: #1b2b4b;
}

/* ── 2b) SHADCN proměnné (novější gatus UI: bg-primary/bg-card/… = hsl(var(--x))).
 * Přemapováno na FEO tokeny jako HSL triplety. Tohle je hlavní reskin tohoto UI. */
:root {
  --background: 228 30% 97%;
  --foreground: 232 14% 11%;
  --card: 0 0% 100%;
  --card-foreground: 232 14% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 232 14% 11%;
  --primary: 337 90% 45%;            /* FEO crimson #db0b5b */
  --primary-foreground: 0 0% 100%;   /* bílá */
  --secondary: 228 30% 94%;
  --secondary-foreground: 232 14% 11%;
  --muted: 228 30% 94%;
  --muted-foreground: 226 9% 28%;
  --accent: 228 30% 94%;
  --accent-foreground: 232 14% 11%;
  --destructive: 350 85% 42%;        /* FEO down #c8102e */
  --destructive-foreground: 0 0% 100%;
  --border: 223 15% 81%;
  --input: 223 15% 81%;
  --ring: 337 90% 45%;
}
.dark, html.dark, [data-theme='dark'] {
  --background: 219 48% 16%;         /* #15223b */
  --foreground: 0 0% 93%;            /* #ececec */
  --card: 220 47% 20%;               /* #1b2b4b */
  --card-foreground: 0 0% 93%;
  --popover: 220 47% 20%;
  --popover-foreground: 0 0% 93%;
  --primary: 337 90% 45%;            /* crimson drží i na dark */
  --primary-foreground: 0 0% 100%;
  --secondary: 219 48% 13%;
  --secondary-foreground: 0 0% 93%;
  --muted: 219 48% 13%;
  --muted-foreground: 0 0% 81%;
  --accent: 219 48% 13%;
  --accent-foreground: 0 0% 93%;
  --destructive: 2 84% 67%;          /* #f26861 */
  --destructive-foreground: 220 47% 15%;
  --border: 220 16% 42%;
  --input: 220 16% 42%;
  --ring: 337 90% 45%;
}

/* ── 3) ZÁKLAD (jistý základ — #app má Gatus vždy) ───────────────────────────── */
body,
#app {
  font-family: var(--feo-font-sans) !important;
  background-color: var(--feo-bg) !important;
  color: var(--feo-ink) !important;
}

#app h1, #app h2, #app h3 {
  font-family: var(--feo-font-sans);
  color: var(--feo-ink);
  letter-spacing: -0.01em;
}

/* Mono „eyebrow" ráz na drobné labely/časy (volitelné, sluší monitoringu) */
#app .text-xs, #app time, #app code {
  font-family: var(--feo-font-mono);
}

/* jen prosté odkazy — NE tlačítka (bg-primary apod. si drží vlastní text) */
a:not([class*="bg-"]), #app a:not([class*="bg-"]):not(.btn) {
  color: var(--feo-accent-text);
  text-underline-offset: 2px;
}

/* ── 4) KARTY / PANELY  // >>> DOLADIT selektory dle DOM ──────────────────────
 * Gatus staví karty z Tailwind bílých/šedých ploch (bg-white / dark:bg-gray-800).
 * Přemapuj je na FEO plochu. Ověř přesné třídy v inspektoru. */
#app .bg-white,
#app .dark\:bg-gray-800 {
  background-color: var(--feo-surface) !important;
  border-color: var(--feo-line-soft) !important;
  border-radius: var(--feo-radius);
  box-shadow: var(--feo-shadow-md, 0 6px 24px -12px rgba(24,25,32,0.18));
}

/* ── 5) STAVY: UP = zelená, DOWN = červená, warning = ochre  // >>> DOLADIT ─────
 * Gatus zdravotní čtverečky/odznaky používají Tailwind green/red odstíny. Přebij je
 * FEO stavovými barvami. Rozsah odstínů je široký schválně (verze se liší) — po ověření
 * si můžeš nechat jen ty, které Gatus reálně používá. */
#app .bg-green-300, #app .bg-green-400, #app .bg-green-500, #app .bg-green-600, #app .bg-green-700 {
  background-color: var(--feo-up) !important;
}
#app .text-green-400, #app .text-green-500, #app .text-green-600 {
  color: var(--feo-up) !important;
}
#app .bg-red-300, #app .bg-red-400, #app .bg-red-500, #app .bg-red-600, #app .bg-red-700 {
  background-color: var(--feo-down) !important;
}
#app .text-red-400, #app .text-red-500, #app .text-red-600 {
  color: var(--feo-down) !important;
}
#app .bg-yellow-300, #app .bg-yellow-400, #app .bg-yellow-500, #app .bg-orange-400, #app .bg-orange-500 {
  background-color: var(--feo-warning) !important;
}
#app .text-yellow-500, #app .text-orange-500 {
  color: var(--feo-warning) !important;
}

/* ── 6) TLAČÍTKA V HLAVIČCE (ui.buttons)  // >>> DOLADIT ──────────────────────── */
#app header a[href],
#app .btn {
  color: var(--feo-accent-text);
  border-color: var(--feo-line);
}

/* ── 7) SYMBOL v headeru — theme-aware (light = tmavý střed, dark = bílý střed) ──
 * Mark má crimson vnějšek + střed; na dark tmavý střed zmizí, proto swap na dark variantu
 * (feo-mark-dark.svg má střed #ececec). content:url na <img> nahradí zobrazený obrázek. */
#app header img {
  content: url('/assets/feo-mark.svg');
  height: 36px;
  width: auto;
}
.dark #app header img,
html.dark #app header img,
[data-theme='dark'] #app header img {
  content: url('/assets/feo-mark-dark.svg');
}

/* ── 7b) LOGIN obrazovka — gatus vedle NAŠEHO loga cpe i svoje bundled logo
 *  (img alt="Gatus" = /img/logo.svg) + svislý předěl → na loginu 2 loga.
 *  Skryj gatus logo i předěl (nech jen naše) a dark-swap na bílý střed
 *  (login-container NENÍ pod #app header, sekce 7 ho nekryje). */
#login-container img[alt="Gatus"] { display: none !important; }
#login-container .w-px            { display: none !important; }  /* svislý předěl mezi logy */
.dark #login-container img,
html.dark #login-container img,
[data-theme='dark'] #login-container img {
  content: url('/assets/feo-mark-dark.svg');
}

/* ── 8) Zrušit zvětšení/posun na hover (na přání) ─────────────────────────────── */
#app *:hover {
  transform: none !important;
}

/* ── 9) Skrýt gatus github/social odkaz v patičce ─────────────────────────────── */
#social,
#app #social {
  display: none !important;
}