/* ============================================================
   SKIN: DARK (viz PLAN_TEMA.md fáze 4) — dříve new-portal/assets/css/theme.css.
   Načítá se jako POSLEDNÍ stylesheet stránky (render_head() / ui_skin_href()),
   až po design-tokens.css, main.css, ui.css a CSS stránky – spoléhá na pořadí v kaskádě.
   Přepisuje tokeny na tmavé navy pozadí + modrý akcent; obrázky v ./img/.
   ============================================================ */

@font-face { font-family: 'Lexend'; src: local('Lexend'); }

:root {
  /* Přebarvení design-tokens.css na tmavé téma (stejné proměnné, nová paleta) */
  --color-primary:        #2F7EFF;
  --color-primary-hover:  #558DFF;
  --color-primary-light:  rgba(47, 126, 255, 0.16);
  --color-primary-dark:   #0A0F1C;

  --color-bg:             #101F38;   /* karty */
  --color-bg-subtle:      #0C1728;   /* jemné pozadí sekcí / inputů */
  --color-bg-page:        #0D1B30;   /* pozadí <body> */
  --color-border:         rgba(255, 255, 255, 0.10);
  --color-text:           #F3F6FB;
  --color-text-muted:     #93A6C4;
  --color-text-light:     #5E7091;
  --color-border-strong:  rgba(255, 255, 255, 0.2);   /* sekundární tlačítka, dialogy (ui.css) */
  --ui-info-border:       rgba(47, 126, 255, 0.35);
  --ui-faint:             #5E7091;
  --ui-body:              #F3F6FB;
  --ui-label:             #93A6C4;
  --ui-line:              rgba(255, 255, 255, 0.1);
  --ui-subtle:            #0C1728;
  --ui-track:             rgba(255, 255, 255, 0.1);
  --ui-faint2:            #5E7091;
  --ui-ok-text2:          #59D9A4;
  --ui-ok-text3:          #7FC8A3;
  --ui-ok-bg2:            rgba(34, 160, 107, 0.15);
  --ui-ok-bg3:            rgba(34, 160, 107, 0.15);
  --ui-ok-border:         rgba(34, 160, 107, 0.4);
  --ui-warn-bg:           rgba(245, 166, 35, 0.14);
  --ui-warn-text:         #FFD08A;
  --ui-amber-bg:          rgba(245, 166, 35, 0.14);
  --ui-amber-border:      #F5A623;
  --ui-amber-text:        #FFD08A;
  --ui-amber-icon:        #F5A623;
  --ui-blue-bg:           rgba(47, 126, 255, 0.16);
  --ui-blue-bg2:          rgba(47, 126, 255, 0.16);
  --ui-blue-text:         #F3F6FB;
  --ui-blue-border:       rgba(47, 126, 255, 0.35);
  --ui-blue-border2:      rgba(47, 126, 255, 0.35);
  --ui-navy:              #F3F6FB;
  --ui-navy2:             #93A6C4;
  --ui-err-bg:            rgba(229, 72, 77, 0.12);
  --ui-err-border:        rgba(229, 72, 77, 0.4);
  --ui-err-text:          #FCA5A5;
  --ui-err-text2:         #FCA5A5;
  --ui-red:               #E5484D;
  --ui-warn-border:       #F5A623;
  --ui-err-bg2:           rgba(229, 72, 77, 0.12);
  --ui-blue-bg3:          rgba(47, 126, 255, 0.16);
  --ui-blue-bg4:          rgba(47, 126, 255, 0.06);
  --ui-line2:             rgba(255, 255, 255, 0.2);
  --ui-line3:             rgba(255, 255, 255, 0.06);
  --ui-faint3:            #5E7091;

  --color-success:        #22A06B;
  --color-success-dark:   #59D9A4;
  --color-success-light:  rgba(34, 160, 107, 0.15);
  --color-warning:        #F5A623;
  --color-warning-light:  rgba(245, 166, 35, 0.15);
  --color-error:          #E5484D;
  --color-error-light:    rgba(229, 72, 77, 0.15);

  --font-display: 'Lexend', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 8px 20px rgba(0,0,0,.35), 0 0 0 1px var(--color-border) inset;
  --shadow-lg: 0 20px 45px -20px rgba(0,0,0,.6), 0 0 0 1px var(--color-border) inset;
}

/* ---------- Pozadí stránky (fixní fotka, obsah scrolluje přes ni) ---------- */
/* `background-attachment: fixed` přímo na body poskakuje při scrollu;
   samostatný `body::before` s position:fixed to na desktopu vyřešil,
   ale na mobilu (iOS/Android) při schovávání/zobrazování adresního
   řádku prohlížeč mění výšku viewportu za běhu a fixed prvek to
   nestíhá přepočítat – vznikne tmavý pruh (prosvítá barva body) v
   dolní části obrazovky. Osvědčené řešení: pozadí na <html>, ne na
   body/pseudo-elementu – mobilní prohlížeče html pozadí vykreslují
   jako součást plátna stránky a rozšíří ho i pod dynamickou lištu. */
html {
  background-color: var(--color-bg-page);
  background-image: url("img/bg-circuit.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
body {
  background: transparent;
  font-family: var(--font-body);
  /* Stejny strop jako .hero na homepage (index.php) - na sirsich
     obrazovkach nez 1920px se cely obsah (ne jen hero pozadi)
     vycentruje a nenatahuje az do kraje, pozadi <html> zustane
     videt po stranach. */
  max-width: 1920px;
  margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

/* ---------- Nav (render_nav) ---------- */
/* `body > nav`, ne holé `nav` - realny markup ma dalsi <nav> i uvnitr
   paticky (.site-footer__col nav, "Rychle odkazy"); holy selektor by
   mu pridal vlastni pruhledne pozadi + blur navic k pozadi paticky,
   coz vypadalo jako samostatne plovouci okno. */
body > nav { background: rgba(8, 14, 26, 0.16); backdrop-filter: blur(10px); border-bottom-color: var(--color-border); }
.nav-a { color: var(--color-text); text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.nav-a:hover { background: rgba(255,255,255,.09); }
.nav-a.active { background: var(--color-primary-light); color: var(--color-text); box-shadow: 0 0 0 1px rgba(47,126,255,.4) inset; }
.nav-mobile-a.active { background: var(--color-primary-light); }
.nav-phone { text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.nav-mobile { background: #0B1526; border-bottom-color: var(--color-border); box-shadow: var(--shadow-md); }
.nav-mobile-a { border-bottom-color: rgba(255,255,255,.06); }
.nav-burger span { background: var(--color-text); }

/* ---------- Karty, formuláře, tlačítka (main.css) ---------- */
.card { background: var(--color-bg); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.fg input, .fg select, .fg textarea,
.form-group input, .form-group select, .form-group textarea {
  background: var(--color-bg-subtle); border-color: rgba(255,255,255,.16); color: var(--color-text);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--color-text-light); }
/* Autofill prohlizece (Chrome/Safari) jinak vyplnenemu poli vnuti vlastni
   svetle/zlute pozadi pres -webkit-box-shadow - prepsano zpet na tmave
   pozadi + svetly text, aby pole zustalo sladene i po autom. vyplneni. */
.fg input:-webkit-autofill,
.fg input:-webkit-autofill:hover,
.fg input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-subtle) inset;
  box-shadow: 0 0 0 1000px var(--color-bg-subtle) inset;
  caret-color: var(--color-text);
  transition: background-color 9999s ease-in-out 0s;
}
.btn-outline { background: transparent; border-color: rgba(255,255,255,.22); color: var(--color-text-muted); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.divider, hr.sl-div { border-top-color: var(--color-border); }
.addr-dd { background: var(--color-bg); border-color: rgba(255,255,255,.18); box-shadow: var(--shadow-lg); }
.addr-dd-item { border-bottom-color: rgba(255,255,255,.06); }
.addr-dd-item:hover, .addr-dd-item.addr-focus { background: rgba(47,126,255,.1); }
.addr-dd-item strong { color: var(--color-text); }
.addr-dd-item span { color: var(--color-text-light); }
.delivery__item, .pricing__item { background: var(--color-bg); border-color: var(--color-border); }
.testimonial { background: var(--color-bg-subtle); }

/* ---------- Timeline (track.php) ---------- */
.timeline__dot { background: var(--color-bg-subtle); border-color: rgba(255,255,255,.18); }
.timeline__step:not(:last-child)::before { background: rgba(255,255,255,.14); }

/* ---------- Footer ---------- */
.site-footer { background: rgba(10, 15, 28, 0.16); backdrop-filter: blur(10px); }
.cookie-consent { background: var(--color-primary-dark); }

/* ---------- index.php: hero / brands / steps / why / warn ---------- */
.hero {
  background: url("img/hero-laptop.jpg?v=4") center/cover no-repeat !important;
}
.brands-bar { background: var(--color-bg-subtle); border-bottom-color: var(--color-border); }
.brands-label { color: var(--color-text-light); }
.brand-pill { color: var(--color-text-muted); border-color: rgba(255,255,255,.16); background: var(--color-bg); }
.warn { background: var(--color-primary-light); border-color: rgba(47,126,255,.35); }
.warn p, .warn strong { color: var(--color-text); }
.eyebrow { color: var(--color-primary); }
.sec-h { color: var(--color-text); }
.sec-s { color: var(--color-text-muted); }
.step, .why-c { background: var(--color-bg); border-color: var(--color-border); }
.step-t, .why-t { color: var(--color-text); }
.step-d, .why-d { color: var(--color-text-muted); }
.step-no { color: var(--color-primary); }
.cta { background: linear-gradient(135deg, #0A0F1C, var(--color-primary)) !important; }


/* ---------- index.php: rozložení hero v tmavém tématu (dříve inline CSS new-portal/index.php) ---------- */
.hero { display: block; padding: 4rem 0 3rem; max-width: 1920px; margin: 0 auto; min-height: clamp(400px, 30.08vw, 578px); box-sizing: border-box; }
.hero-art { display: none; }
.hero-text { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; padding-bottom: 0; text-align: left; }
.hero-badge { background: rgba(255,255,255,.12); }
.hero p { color: rgba(255,255,255,.95); text-shadow: 0 0 6px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.6); }
@media (max-width: 640px) { .hero { padding: 2.5rem 0; min-height: clamp(400px, 30.08vw, 578px); } }
.hero { overflow: visible; }
.hero-text { color: var(--color-text); }
/* v tmavém tématu bez rámečků a stínů (dřívější new-portal/index.php je nedefinoval; barvy ohraničení dává skin výše) */
.brands-label { font-weight: 700; }
.brand-pill, .step, .why-c { border: none; }
.warn { border-color: transparent; }   /* 1px rámeček zůstává (stejná šířka/zalamování textu jako ve světlém tématu) */
.step:hover { box-shadow: none; }
.why-ic { font-size: inherit; }

/* ---------- terms.php / gdpr.php: právní texty (dříve inline CSS new-portal/includes/legal_page.php) ---------- */
.page-hero:not(:has(.page-hero-inner)) { padding: 2rem max(1.5rem, calc((100% - 820px) / 2 + 1.5rem)); }
.ctr h2, .ctr h3, .ctr strong { color: var(--color-text); }
.ctr p, .ctr li { color: var(--color-text-muted); }
.ctr a { color: var(--color-primary); }
.terms-note, .gdpr-note { color: var(--color-text-light); }
.ctr p.terms-note, .ctr p.gdpr-note { font-size: 14px; line-height: 1.75; }   /* jako dřív v new-portalu (.ctr p má vyšší specificitu) */

/* ---------- new.php: průvodce novým případem (dříve inline CSS new-portal/nova-oprava.php) ---------- */
.fg label { font-weight: 700; color: var(--color-text); }
.pw-toggle { color: var(--color-text-muted); }
.pw-bar { background: rgba(255,255,255,.1); }
.consent { border: none; }
.btn--secondary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--color-text); }
.ropt, .dopt { border: none; }
.ropt-p { color: var(--color-text); }
.dopt-check { display: none; }
.sl-body { border: none; }
hr.sl-div { margin: 0; }
.sl-badge { background: var(--color-primary); }

/* ---------- 404.php ---------- */
.box .code { color: var(--color-border); }
.box h1 { color: var(--color-text); }
.box p { color: var(--color-text-muted); }

/* ---------- dashboard.php: seznam zakázek / profil ---------- */
.case-a { border-bottom-color: rgba(255,255,255,.06); }
.case-a:hover { background: rgba(47,126,255,.06); }
.case-num { color: var(--color-primary); }
.case-dev { color: var(--color-text); }
.case-prob { color: var(--color-text-muted); }
.mini-bar { background: rgba(255,255,255,.1); }
.empty { color: var(--color-text-muted); }
.pf-item { background: var(--color-bg-subtle); border-color: var(--color-border); }
.pf-label { color: var(--color-text-light); }
.pf-val { color: var(--color-text); }
.pf-val.empty-val { color: var(--color-text-light); }
/* rozložení dashboardu jako dřív v new-portalu (ikony jsou SVG, ne emoji; bez rámečků u polí profilu) */
.card-hdr { flex-wrap: wrap; gap: 8px; }
.card-hdr h3 { display: flex; align-items: center; gap: 8px; }
.pf-item { border: none; }
.pf-icon { opacity: 1; display: inline-flex; }
.btn-outline { border-width: 1px; padding: 8px 16px; font-weight: 400; }
.btn-outline:hover { background: transparent; }
.btn-blue { padding: 9px 18px; font-size: 14px; white-space: nowrap; }

/* ---------- new.php: stepper, kroky formuláře ---------- */
.stepper { background: var(--color-bg-subtle); border-bottom-color: var(--color-border); }
.stp { color: var(--color-text-light); }
.stp.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.stp.done { color: var(--color-text-muted); }
.stp-dot { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--color-text-muted); }
.mob-progress { background: var(--color-bg-subtle); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); }
.mp-label { color: var(--color-text-muted); }
.mp-bar { background: rgba(255,255,255,.1); }
.card-title { color: var(--color-text); }
.req { color: var(--color-error); }
.consent { background: var(--color-bg-subtle); border-color: var(--color-border); }
.consent-text { color: var(--color-text-muted); }
.consent-text a { color: var(--color-primary); }
.ropt, .dopt { border-color: rgba(255,255,255,.16); background: var(--color-bg-subtle); }
.ropt:hover, .dopt:hover { border-color: var(--color-primary); }
.ropt.sel, .dopt.sel { border-color: var(--color-primary); background: var(--color-primary); }
.ropt-t, .dopt-t { color: var(--color-text); }
.ropt-d, .dopt-d { color: var(--color-text-muted); }
.upload-zone { background: var(--color-bg-subtle); border-color: rgba(255,255,255,.22); }
.upload-zone:hover { border-color: var(--color-primary); background: rgba(47,126,255,.08); }
.upload-zone p { color: var(--color-text-muted); }
.upload-zone span { color: var(--color-text-light); }
.photo-thumb { background: var(--color-bg-subtle); border-color: var(--color-border); }
.sym-tag { background: var(--color-bg-subtle); border-color: rgba(255,255,255,.14); color: var(--color-text); }
.sym-tag.chk { background: var(--color-primary); border-color: var(--color-primary); }
.cat-card { background: var(--color-bg-subtle); border-color: rgba(255,255,255,.14); }
.cat-card:hover { border-color: var(--color-primary); background: rgba(47,126,255,.08); }
.cat-card.sel { border-color: var(--color-primary); background: var(--color-primary); }
.cat-card.sel .icon-blue { color: #fff; }
.cat-label { color: var(--color-text); }
.diag-crumb { background: var(--color-bg-subtle); color: var(--color-text); }
.diag-q-text { color: var(--color-text); }
.diag-result-box { background: var(--color-primary-light); border-color: rgba(47,126,255,.35); }
.diag-result-lbl { color: var(--color-text); }
.diag-result-ttl { color: var(--color-text); }
.diag-result-desc { color: var(--color-text-muted); }
.diag-warn { background: rgba(245,166,35,.14); border-color: var(--color-warning); color: #FFD08A; }
.photo-prompt { border-bottom-color: rgba(255,255,255,.06); }
.photo-prompt-label { color: var(--color-text); }
.sl-hdr { background: var(--color-primary-dark); }
.sl-body { background: var(--color-bg); border-color: var(--color-border); }
.sl-field label { color: var(--color-text); font-weight: 700; }
.sl-field p { color: var(--color-text); }
.err-banner { background: var(--color-error-light); border-color: rgba(229,72,77,.4); color: #FCA5A5; }
.success-box h2 { color: var(--color-text) !important; }
.success-box p { color: var(--color-text-muted) !important; }
.success-icon { background: rgba(34,160,107,.15); }
#suc-id-note, #post-ship-box > div { background: var(--color-primary-light) !important; border-color: rgba(47,126,255,.35) !important; color: var(--color-text) !important; }

/* ---------- status-zakazky.php (track.php) ---------- */
.page-hero { background: linear-gradient(135deg, #0A0F1C, #0F2A52, var(--color-primary)); color: #fff; }
.page-hero p { color: rgba(255,255,255,.78); }
.search-bar { background: var(--color-bg-subtle); border-bottom-color: var(--color-border); }
.search-input { background: var(--color-bg); border: 1px solid rgba(255,255,255,.16); color: var(--color-text); }
.if label { color: var(--color-text-light); }
.if p { color: var(--color-text); }
.pay-amt { color: var(--color-primary); }
.pay-note { color: var(--color-text-muted); }
.msg.technician { background: var(--color-primary); color: #fff; }
.msg.technician .msg-meta { color: rgba(255,255,255,.7); }
.msg.system { background: rgba(255,255,255,.08); color: var(--color-text-muted); }
.msg.customer { background: var(--color-primary-light); color: var(--color-text); }
.msg.customer .msg-meta { color: var(--color-text-light); }

/* ---------- Emoji ikony → jednotné modré liniové SVG (viz nova-oprava.php/index.php/dashboard.php) ---------- */
.icon-blue { color: var(--color-primary); display: inline-flex; flex-shrink: 0; }

/* ---------- Tisk / uložení do PDF ----------
   Tmavý motiv se netiskne: tokeny se přepnou na světlé, pozadí stránky zmizí,
   skryje se navigace/patička/formuláře a tlačítka (jako track.php v produkci). */
@media print {
  :root {
    --color-bg: #fff; --color-bg-subtle: #fff; --color-bg-page: #fff;
    --color-border: #ccc; --color-text: #111; --color-text-muted: #444; --color-text-light: #666;
    --color-primary: #185FA5; --color-primary-light: #EEF4FF;
    --color-success-dark: #166534; --color-warning: #B45309;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    --ui-info-border: #C7D9F5;
    --ui-faint: #999999;
    --ui-body: #333333;
    --ui-label: #555555;
    --ui-line: #dddddd;
    --ui-subtle: #f7f7f7;
    --ui-track: #f0f0f0;
    --ui-faint2: #aaaaaa;
    --ui-ok-text2: #0D5C36;
    --ui-ok-text3: #4B7A5A;
    --ui-ok-bg2: #f0fdf4;
    --ui-ok-bg3: #ECFDF5;
    --ui-ok-border: #BBF7D0;
    --ui-warn-bg: #FFF8E1;
    --ui-warn-text: #7A4F00;
    --ui-amber-bg: #FEF3C7;
    --ui-amber-border: #FCD34D;
    --ui-amber-text: #92400E;
    --ui-amber-icon: #F59E0B;
    --ui-blue-bg: #EFF6FF;
    --ui-blue-bg2: #f0f7ff;
    --ui-blue-text: #1e40af;
    --ui-blue-border: #BFDBFE;
    --ui-blue-border2: #93C5FD;
    --ui-navy: #1e3a5f;
    --ui-navy2: #3b5998;
    --ui-err-bg: #FFF5F5;
    --ui-err-border: #FECACA;
    --ui-err-text: #991B1B;
    --ui-err-text2: #B91C1C;
    --ui-red: #E5484D;
    --ui-warn-border: #F5A623;
    --ui-err-bg2: #FFF0F0;
    --ui-blue-bg3: #e8f0fe;
    --ui-blue-bg4: #f7fbff;
    --ui-line2: #cccccc;
    --ui-line3: #f3f3f3;
    --ui-faint3: #dddddd;
  }
  html { background: #fff !important; background-image: none !important; }
  body { background: #fff !important; color: #111 !important; }
  nav, .nav-mobile, .site-footer, .cookie-consent, .page-hero, .search-bar, .no-print,
  .chat-inp-row, #modal-pay-track, [id^="qr-box-"], [id^="qr-img-"],
  .btn-blue, .btn-outline, button:not(.print-keep), .scan-overlay, .cam-overlay { display: none !important; }
  .container, .ctr, .main { padding: 0; max-width: 100%; }
  .card { border: 1px solid #ccc; border-radius: 0; margin-bottom: .5rem; box-shadow: none; background: #fff; }
  .case-hdr, .payment-box, .prog-bar, .prog-fill, .st-pill, .msg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chat-msgs { max-height: none !important; overflow: visible !important; }
}

/* ---------- přihlašovací karta: barvy hlášek (ve světlém tématu platí main.css) ---------- */
.auth-card .alert-err { border-color: rgba(229,72,77,.4); color: #FCA5A5; }
.auth-card .alert-ok { border-color: rgba(34,160,107,.4); color: #59D9A4; }