/* =============================================================================
   customer.css — vizuální vrstva ZÁKAZNICKÝCH stránek (IL-login, IL-sale,
   IL-confirmation). Back-office stránky se jí nedotknou: KAŽDÉ pravidlo je
   scopované pod `body.app-customer`.

   Záměr (design direction): "honky-tonk broadside" — utilitární B2B formulář
   oblečený do značkové palety klienta (The Next Big Twang). Navy nese
   strukturu (hlavičky, popisky, číslice), červená je JEDINÝ akcent a značí
   vždy akci nebo právě to, co ubývá. Žádné gradienty, žádné obrázky —
   opakujícím se motivem je 4–5px červená linka, která "otevírá" prvky
   (accent bar hlavičky, horní hrana přihlašovací karty, ikona sekce).

   Obsah:
     1. Paleta a plátno
     2. Topbar + logo značky
     3. Karty, hlavičky karet
     4. Hlavička stránky (page header)
     5. Tlačítka, odkazy, formuláře
     6. IL-login — brána
     7. IL-sale — odpočet, dostupnost, KPI, formulář žádosti
     8. IL-confirmation — workflow, alert, e-maily
     9. Tisk
   ========================================================================== */

/* ── 1. Paleta a plátno ─────────────────────────────────────────────────── */

body.app-customer {
  --nbt-red: #D80008;
  --nbt-navy: #001860;
  --nbt-red-soft: #fdeaea;
  --nbt-navy-soft: #e8ecf5;

  /* odvozené odstíny — držíme je tady, ať se ladí na jednom místě */
  --nbt-red-dark: #a80006;
  --nbt-navy-dark: #00113f;
  --nbt-navy-mid: #2b3f7d;
  --nbt-line: #dfe4ee;
  --nbt-canvas: #f3f5fa;

  background-color: var(--nbt-canvas);
}

body.app-customer .body-wrapper {
  background-color: var(--nbt-canvas);
}

/* Obsahová typografie — odkazy v obsahu jdou do navy, ne do themové modré. */
body.app-customer .container-fluid a:not(.btn):not(.dropdown-item):not(.nav-link):not(.customer-brand) {
  color: var(--nbt-navy);
  text-decoration-color: rgba(0, 24, 96, .35);
}

body.app-customer .container-fluid a:not(.btn):not(.dropdown-item):not(.nav-link):not(.customer-brand):hover {
  color: var(--nbt-red);
  text-decoration-color: rgba(216, 0, 8, .45);
}

/* ── 2. Topbar + logo značky ────────────────────────────────────────────── */

/* Zákaznický web nemá administrátorské hledání ani přepínač person.
   SKRÝVÁME, nemažeme — smoke test potřebuje user-switcher v DOMu. */
body.app-customer #navbarNav {
  display: none !important;
}

/* Zákaznické stránky nemají ani levé menu — shell (sidebar) zůstává v DOMu
   kvůli testům, jen se nezobrazuje; hamburger by tedy nic nepřepínal. */
body.app-customer .left-sidebar,
body.app-customer .topbar .sidebartoggler {
  display: none !important;
}

body.app-customer .body-wrapper,
body.app-customer .left-sidebar.with-vertical.mini-sidebar ~ .body-wrapper {
  margin-left: 0 !important;
}

/* Bez sidebaru drží obsah rozumnou šířku a je vycentrovaný. */
body.app-customer:not(.app-customer-gate) .container-fluid {
  max-width: 1180px !important;
  margin-left: auto;
  margin-right: auto;
}

body.app-customer .topbar {
  /* Téma počítá šířku topbaru bez sidebaru (100 % − 270 px); ten je tu skrytý. */
  width: 100% !important;
  left: 0 !important;
  background-color: #fff;
  border-bottom: 1px solid var(--nbt-line);
  box-shadow: inset 0 -3px 0 0 var(--nbt-red);
}

body.app-customer .topbar .nav-icon-hover,
body.app-customer .topbar .sidebartoggler {
  color: var(--nbt-navy);
}

/* Logo vpravo v topbaru (vkládá ho inline skript stránky do .topbar .navbar). */
body.app-customer .customer-brand {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 4px 0 4px 16px;
  line-height: 0;
  flex: 0 0 auto;
}

body.app-customer .customer-brand img {
  display: block;
  max-height: 58px;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── 3. Karty ───────────────────────────────────────────────────────────── */

body.app-customer .card {
  border: 1px solid var(--nbt-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 17, 63, .04), 0 8px 24px -16px rgba(0, 17, 63, .35);
}

body.app-customer .card-header,
body.app-customer .card-header.bg-light {
  background-color: #fff !important;
  border-bottom: 1px solid var(--nbt-line);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

body.app-customer .card-header .card-title,
body.app-customer .card-header h5 {
  color: var(--nbt-navy);
  font-weight: 600;
  letter-spacing: .1px;
}

/* Ikona v hlavičce karty je červený akcent. */
body.app-customer .card-header h5 > i.ti,
body.app-customer .card-header .card-title > i.ti {
  color: var(--nbt-red);
}

/* Tabulky uvnitř factCard — jemnější linky, navy hodnoty. */
body.app-customer .card-body > .table > tbody > tr > td {
  border-color: var(--nbt-line);
}

body.app-customer .card-body > .table > tbody > tr > td.fw-medium {
  color: var(--nbt-navy-dark);
}

/* ── 4. Hlavička stránky (B.renderPageHeader) ───────────────────────────── */

body.app-customer #sale-header > .card,
body.app-customer #confirmation-header > .card,
body.app-customer .container-fluid > div > .card.bg-primary-subtle {
  position: relative;
  overflow: hidden;
  background-color: var(--nbt-navy) !important;
  border-color: var(--nbt-navy);
  box-shadow: 0 10px 28px -18px rgba(0, 17, 63, .9);
}

/* Červená "signální" lišta na levé hraně — opakující se motiv celé sady. */
body.app-customer #sale-header > .card::before,
body.app-customer #confirmation-header > .card::before,
body.app-customer .container-fluid > div > .card.bg-primary-subtle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--nbt-red);
}

body.app-customer #sale-header .card-body,
body.app-customer #confirmation-header .card-body {
  padding-left: 1.85rem;
}

body.app-customer #sale-header .card-title,
body.app-customer #confirmation-header .card-title {
  color: #fff;
  letter-spacing: -.2px;
}

body.app-customer #sale-header .card-title > i.ti,
body.app-customer #confirmation-header .card-title > i.ti {
  color: var(--nbt-red);
}

body.app-customer #sale-header .card-subtitle,
body.app-customer #confirmation-header .card-subtitle,
body.app-customer #sale-header .card-subtitle.text-muted,
body.app-customer #confirmation-header .card-subtitle.text-muted {
  color: rgba(255, 255, 255, .72) !important;
}

/* Velká ikona vpravo se chová jako vodoznak, ne jako druhý akcent. */
body.app-customer #sale-header .display-6,
body.app-customer #confirmation-header .display-6 {
  color: rgba(255, 255, 255, .28) !important;
}

/* Akce v tmavé hlavičce (Back to the sale) — bílý outline. */
body.app-customer #confirmation-header .btn-outline-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
}

body.app-customer #confirmation-header .btn-outline-secondary:hover,
body.app-customer #confirmation-header .btn-outline-secondary:focus {
  color: var(--nbt-navy);
  background: #fff;
  border-color: #fff;
}

/* ── 5. Tlačítka, odkazy, formuláře ─────────────────────────────────────── */

/* !important na custom properties: téma Modernize deklaruje --bs-btn-* i pod
   selektorem [data-bs-theme][data-color-theme]:root .btn-primary (specificita
   0,4,0), který by jinak náš scope přebil. */
body.app-customer .btn-primary {
  --bs-btn-bg: var(--nbt-red) !important;
  --bs-btn-border-color: var(--nbt-red) !important;
  --bs-btn-hover-bg: var(--nbt-red-dark) !important;
  --bs-btn-hover-border-color: var(--nbt-red-dark) !important;
  --bs-btn-active-bg: var(--nbt-red-dark) !important;
  --bs-btn-active-border-color: var(--nbt-red-dark) !important;
  --bs-btn-disabled-bg: var(--nbt-red) !important;
  --bs-btn-disabled-border-color: var(--nbt-red) !important;
  font-weight: 600;
}

body.app-customer .btn-primary:focus-visible,
body.app-customer .btn-primary:focus {
  box-shadow: 0 0 0 .22rem rgba(0, 24, 96, .35);
}

body.app-customer .btn-outline-primary {
  --bs-btn-color: var(--nbt-red) !important;
  --bs-btn-border-color: var(--nbt-red) !important;
  --bs-btn-hover-bg: var(--nbt-red) !important;
  --bs-btn-hover-border-color: var(--nbt-red) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-active-bg: var(--nbt-red) !important;
  --bs-btn-active-border-color: var(--nbt-red) !important;
  --bs-btn-disabled-color: var(--nbt-red) !important;
  --bs-btn-disabled-border-color: var(--nbt-red) !important;
  font-weight: 600;
}

/* Formulářové prvky — navy focus místo themové modré. */
body.app-customer .form-control:focus,
body.app-customer .form-select:focus {
  border-color: var(--nbt-navy-mid);
  box-shadow: 0 0 0 .2rem rgba(0, 24, 96, .12);
}

body.app-customer .form-check-input:checked {
  background-color: var(--nbt-navy);
  border-color: var(--nbt-navy);
}

body.app-customer .form-check-input:focus {
  border-color: var(--nbt-navy-mid);
  box-shadow: 0 0 0 .2rem rgba(0, 24, 96, .12);
}

body.app-customer .form-label {
  color: var(--nbt-navy-dark);
  font-weight: 500;
}

/* ── 6. IL-login — brána ────────────────────────────────────────────────── */

/* Brána se tváří jako samostatná stránka — shell zůstává v DOMu, jen se
   nezobrazuje. (Přeneseno ze zrušeného <style> uvnitř obsahu stránky.) */
body.app-customer-gate .topbar {
  display: none !important;
}

body.app-customer-gate .gate-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}

/* Červená linka na horní hraně okna — stejný motiv, jaký na IL-sale a
   IL-confirmation drží spodní hranu topbaru. Brána tak patří do stejné sady. */
body.app-customer-gate .gate-wrap::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--nbt-red);
  z-index: 5;
}

body.app-customer-gate .gate-col {
  width: 100%;
  max-width: 420px;
}

/* Logo nad kartou. Bílá deska pod ním drží logo na čistém podkladu
   a zároveň tvoří druhou "kartu" — brána tak čte jako dvoudílný plakát. */
body.app-customer .customer-brand-hero {
  display: block;
  text-align: center;
  margin-bottom: 26px;
}

body.app-customer .customer-brand-hero img {
  display: inline-block;
  max-height: 120px;
  max-width: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
}

body.app-customer-gate #login-card {
  border-top: 4px solid var(--nbt-red);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 17, 63, .05), 0 24px 48px -28px rgba(0, 17, 63, .55);
}

body.app-customer-gate #login-card .square-40 {
  background-color: var(--nbt-navy-soft) !important;
  color: var(--nbt-red) !important;
}

body.app-customer-gate #login-site-name {
  color: var(--nbt-navy);
  letter-spacing: -.2px;
}

body.app-customer-gate #login-schedule-line {
  color: var(--nbt-red) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

body.app-customer-gate #login-btn-submit {
  padding: .7rem 1rem;
  font-size: 1.0625rem;
}

body.app-customer-gate #login-btn-toggle {
  border-color: var(--bs-border-color);
  color: var(--nbt-navy-mid);
}

body.app-customer-gate #login-hint code {
  color: var(--nbt-red);
  background: var(--nbt-red-soft);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ── 7. IL-sale ─────────────────────────────────────────────────────────── */

/* 7a. Ovládání mockupu — záměrně NEbrandové: musí číst jako cizí prvek. */
/* Přerušovaný rámeček: ve stavu „sold out“ stojí hned nad opravdovým
   varovným alertem — čárkovaná hrana ho čitelně odliší jako nástroj mockupu. */
body.app-customer #sale-demo-state {
  background-color: #fff8e8;
  border: 1px dashed #e0a92e !important;
  box-shadow: none;
}

body.app-customer #sale-demo-state .btn-primary {
  --bs-btn-bg: #a96a00 !important;
  --bs-btn-border-color: #a96a00 !important;
  --bs-btn-hover-bg: #8a5600 !important;
  --bs-btn-hover-border-color: #8a5600 !important;
  --bs-btn-active-bg: #8a5600 !important;
  --bs-btn-active-border-color: #8a5600 !important;
}

body.app-customer #sale-demo-state .btn-primary:focus,
body.app-customer #sale-demo-state .btn-primary:focus-visible {
  box-shadow: 0 0 0 .22rem rgba(169, 106, 0, .3);
}

/* 7b. Odpočet — "marquee": červený kicker, navy číslice s tabulárními čísly. */
body.app-customer #sale-countdown-card .text-uppercase.small {
  color: var(--nbt-red) !important;
  font-weight: 700;
  letter-spacing: .16em;
}

body.app-customer #sale-countdown {
  color: var(--nbt-navy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
}

/* 7b2. Výběr týdne — karta za každý vypsaný týden; vybraný týden otevírá
   červená linka nahoře (stejný motiv jako hlavička), vyprodaný je utlumený. */
body.app-customer #sale-weeks .week-card {
  color: var(--nbt-navy-dark);
  background: #fff;
  border-color: var(--nbt-line) !important;
  border-top: 4px solid var(--nbt-line) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.app-customer #sale-weeks a.week-card:hover,
body.app-customer #sale-weeks a.week-card:focus-visible {
  color: var(--nbt-navy-dark);
  border-color: var(--nbt-navy-mid) !important;
  box-shadow: 0 0 0 .2rem rgba(0, 24, 96, .12);
}

body.app-customer #sale-weeks .week-card.active {
  border-color: var(--nbt-navy) !important;
  border-top-color: var(--nbt-red) !important;
  background: var(--nbt-navy-soft);
}

body.app-customer #sale-weeks .week-card.disabled {
  opacity: .6;
  cursor: not-allowed;
}

body.app-customer #sale-weeks .progress {
  background-color: var(--nbt-navy-soft);
}

body.app-customer #sale-weeks .week-card.active .progress {
  background-color: #fff;
}

body.app-customer #sale-weeks .progress-bar.bg-success {
  background-color: var(--nbt-red) !important;
}

/* 7c. KPI dlaždice — střídavý rytmus navy / červená. */
body.app-customer #sale-kpi h3 {
  color: var(--nbt-navy);
}

body.app-customer #sale-kpi .bg-primary.bg-opacity-10,
body.app-customer #sale-kpi .bg-warning.bg-opacity-10 {
  background-color: var(--nbt-navy-soft) !important;
}

body.app-customer #sale-kpi .bg-primary.bg-opacity-10 .ti,
body.app-customer #sale-kpi .bg-warning.bg-opacity-10 .ti {
  color: var(--nbt-navy) !important;
}

body.app-customer #sale-kpi .bg-info.bg-opacity-10,
body.app-customer #sale-kpi .bg-success.bg-opacity-10 {
  background-color: var(--nbt-red-soft) !important;
}

body.app-customer #sale-kpi .bg-info.bg-opacity-10 .ti,
body.app-customer #sale-kpi .bg-success.bg-opacity-10 .ti {
  color: var(--nbt-red) !important;
}

/* 7d. Dostupnost — alokováno červeně (ubývá), volné navy-soft. */
body.app-customer #sale-availability .progress {
  background-color: var(--nbt-navy-soft);
  border-radius: 999px;
  overflow: hidden;
}

body.app-customer #sale-availability .progress-bar.bg-success {
  background-color: var(--nbt-red) !important;
}

body.app-customer #sale-availability .progress-bar.bg-primary-subtle {
  background-color: var(--nbt-navy-soft) !important;
}

body.app-customer #sale-availability .ti-circle-check.text-success {
  color: var(--nbt-red) !important;
}

body.app-customer #sale-availability .ti-coin {
  color: var(--nbt-navy) !important;
}

body.app-customer #sale-availability .card-body > .d-flex > span {
  color: var(--nbt-navy-dark);
  font-weight: 500;
}

body.app-customer #sale-availability .card-body > .d-flex > span.text-muted {
  font-weight: 400;
}

/* 7e. Formulář žádosti. */
body.app-customer #sale-prefill-note {
  display: inline-block;
  background: var(--nbt-navy-soft);
  color: var(--nbt-navy-dark) !important;
  border-radius: 999px;
  padding: 5px 14px;
}

body.app-customer #sale-quickpicks .btn {
  border-radius: 999px;
  padding: .2rem .85rem;
  font-variant-numeric: tabular-nums;
}

body.app-customer #sale-quickpicks .btn:disabled {
  opacity: .45;
}

/* "Request total" — navy-soft pruh s částkou v navy. */
body.app-customer #sale-total-line {
  background: var(--nbt-navy-soft);
  border-left: 4px solid var(--nbt-navy);
  border-radius: 8px;
  padding: .7rem 1rem !important;
}

body.app-customer #sale-total-line .text-muted {
  color: var(--nbt-navy-dark) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8125rem;
  font-weight: 600;
}

body.app-customer #sale-total {
  color: var(--nbt-navy);
  font-variant-numeric: tabular-nums;
}

/* Akční panel formuláře (renderForm ho balí do samostatné karty) se na
   zákaznické stránce zplošťuje — prázdná bílá karta pod souhrnem působila
   jako nedokončený blok. Tlačítko tak visí přímo pod pruhem s částkou. */
body.app-customer #sale-form > .card:last-child {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 1.5rem;
}

body.app-customer #sale-form > .card:last-child > .card-body {
  padding: 0;
}

/* Odeslat — velké červené tlačítko, jediný primární krok stránky. */
body.app-customer #sale-btn-submit {
  padding: .7rem 1.6rem;
  font-size: 1.0625rem;
  border-radius: 8px;
  box-shadow: 0 10px 22px -12px rgba(216, 0, 8, .85);
}

body.app-customer #sale-btn-submit:disabled {
  box-shadow: none;
}

/* ── 8. IL-confirmation ─────────────────────────────────────────────────── */

/* Zelená sémantika zůstává, navy hrana ji ukotví ke zbytku sady. */
body.app-customer #confirmation-alert .alert-success {
  border-left: 5px solid var(--nbt-navy);
  border-radius: 10px;
}

body.app-customer #confirmation-workflow .step-icon.bg-primary {
  background-color: var(--nbt-navy) !important;
}

/* Náhledy e-mailů — strojopisný blok s navy hranou. */
body.app-customer #confirmation-emails > div {
  border-color: var(--nbt-line) !important;
  border-radius: 10px;
}

body.app-customer #confirmation-emails .fw-semibold {
  color: var(--nbt-navy);
}

body.app-customer #confirmation-emails pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--nbt-navy-dark);
  background-color: #fbfcfe !important;
  border: 1px solid var(--nbt-line) !important;
  border-left: 4px solid var(--nbt-navy) !important;
  border-radius: 0 8px 8px 0;
}

body.app-customer #confirmation-timeline .timeline-content strong {
  color: var(--nbt-navy);
}

/* ── 9. Tisk — potvrzení se tiskne, ovládací prvky do tisku nepatří. ─────── */

@media print {

  body.app-customer .left-sidebar,
  body.app-customer .topbar,
  body.app-customer #confirmation-actions,
  body.app-customer #sale-demo-state {
    display: none !important;
  }

  body.app-customer .body-wrapper {
    margin-left: 0 !important;
  }

  body.app-customer .card {
    box-shadow: none;
    break-inside: avoid;
  }
}