/* ---------- rozvrzeni aplikace ----------
   Shell drzi vysku okna: hlavicka nahore, pod ni menu a obsah.
   Obsah roluje sam, aby mrizky mohly mit virtualni rolovani - to
   potrebuje ohranicenou vysku, jinak se roztahne pres celou stranku. */
html, body { height: 100%; margin: 0; }
.app-shell { display: flex; flex-direction: column; height: 100vh;
  height: 100dvh; background: var(--wf-bg); }
.app-toolbar { flex: 0 0 auto; background: var(--wf-card);
  border-bottom: 1px solid var(--wf-line); padding: 0 8px; z-index: 2; }
.app-drawer { flex: 1 1 auto; min-height: 0; }
.app-drawer .dx-drawer-panel-content { background: var(--wf-bg-soft);
  border-right: 1px solid var(--wf-line); }
.app-scroll { height: 100%; display: flex; flex-direction: column;
  overflow: hidden; }
.app-content { flex: 1 1 auto; min-height: 0; display: flex;
  flex-direction: column; gap: 16px; padding: 20px; overflow: auto; }

/* znacka v hlavicce */
.shell-brand { display: flex; align-items: center; gap: 10px; }
.shell-brand img { height: 24px; display: block; }
.shell-tag { color: var(--wf-muted); font-size: 13px; letter-spacing: .04em; }
.shell-user { color: var(--wf-muted); font-size: 13px; margin-right: 4px; }

/* Bocni menu.
   POZOR na dve veci, obe uz nas kously:
   1) panel musi mit pevnou sirku - dxDrawer si ji jinak meri podle
      obsahu a nafoukne ji na nesmysl (videli jsme 1 000 001 px),
   2) pozadi musi byt na samotnem menu, ne jen na panelu. V prekryvnem
      rezimu (mobil, tablet) ma panel sirku 1 px a menu z nej vycuhuje,
      takze by polozky visely pruhledne nad obsahem a text by se
      prolinal. */
/* nabidka: seznam + patka s navratem k vychozimu poradi */
.shell-menu-wrap { width: 230px; max-width: 82vw; height: 100%;
  display: flex; flex-direction: column;
  background: var(--wf-bg-soft); box-shadow: 2px 0 10px rgba(0, 0, 0, .1); }
.shell-menu { width: 100%; flex: 1 1 auto; min-height: 0;
  background: transparent; box-shadow: none; }
/* Obsah seznamu roztahnout na celou vysku nabidky. Jinak konci pod
   poslednim radkem a prazdne misto pod nim uz neni plocha pro pusteni -
   polozka tazena tam se vrati zpatky a vypada to, ze prehazovani nejde.
   Pres min-height to nejde: rodic ma vysku auto, takze procenta se
   nemaji od ceho odrazit. */
.shell-menu .dx-scrollable-content { display: flex; flex-direction: column; }
.shell-menu .dx-scrollview-content { flex: 1 1 auto; }
.shell-menu .dx-list-item { border: 0; }
.shell-item { display: flex; align-items: center; gap: 12px;
  padding: 4px 2px; font-size: 14px; }
.shell-nazev { flex: 1 1 auto; }
/* Uchyt na prehazovani si kresli seznam sam, ale v tomhle motivu mu vyjde
   prazdny ctverec - proto si tri prouzky nakreslime pozadim, at nezavisi
   na ikonovem fontu. Vyska natvrdo: bunka je table-cell, takze 100 % by
   se nemelo od ceho odrazit a uchyt by byl na chytnuti moc uzky. */
.shell-menu .dx-list-reorder-handle-container { width: 28px; }
.shell-menu .dx-list-reorder-handle { width: 100%; height: 28px;
  cursor: grab; opacity: 0; color: var(--wf-muted);
  transition: opacity .12s;
  background-image: linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 12px 2px; background-repeat: no-repeat;
  background-position: center calc(50% - 5px), center 50%,
    center calc(50% + 5px); }
.shell-menu .dx-list-reorder-handle:before { content: none; }
/* uchyt se ukaze, az kdyz na nej clovek zamiri - pri najeti kamkoliv po
   nabidce by poskakoval u kazdeho radku, pres ktery jen projede */
.shell-menu .dx-list-reorder-handle-container:hover
  .dx-list-reorder-handle { opacity: .6; }
.shell-menu .dx-list-reorder-handle:active { cursor: grabbing; opacity: .9; }
/* na dotyku zadny hover neni - uchyt musi byt videt rovnou */
@media (hover: none) {
  .shell-menu .dx-list-reorder-handle { opacity: .4; }
}
.shell-menu-patka { padding: 8px 14px 12px; font-size: 12px; }
.shell-menu-patka a { color: var(--wf-muted); text-decoration: none; }
.shell-menu-patka a:hover { text-decoration: underline; }
.shell-item .dx-icon { color: var(--wf-muted); font-size: 18px; }
.shell-menu .dx-list-item-selected .shell-item { font-weight: 600;
  color: var(--wf-red-dark); }
.shell-menu .dx-list-item-selected .shell-item .dx-icon { color: var(--wf-red); }

/* karta a nadpis stranky */
/* WinFire Portal - vlastni vrstva nad DevExtreme material theme.
   Paleta a typografie podle winfire.cz (Archivo, cervena #FC1925, kremova). */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  --wf-red: #FC1925;
  --wf-red-dark: #b2121b;
  --wf-black: #141414;
  --wf-bg: #eeebdf;
  --wf-bg-soft: #f7f3e8;
  --wf-card: #ffffff;
  --wf-line: #e2ded3;
  --wf-muted: #6e6e6e;
  --wf-font: 'Archivo', 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--wf-bg);
  color: var(--wf-black); font-family: var(--wf-font); }
.dx-widget { font-family: var(--wf-font); }

/* --- prihlaseni / registrace --- */
.login-screen { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px; background: var(--wf-bg); }
.login-card { width: 380px; background: var(--wf-card); border-radius: 1rem;
  border: 1px solid var(--wf-line); border-top: 4px solid var(--wf-red);
  padding: 30px 30px 24px; box-shadow: 0 14px 40px rgba(20,20,20,.12); }
.login-logo { display: block; height: 44px; margin: 0 auto 4px; }
.login-subtitle { text-align: center; color: var(--wf-muted);
  font-size: 14px; margin: 0 0 20px; }
.auth-title { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.login-card .dx-texteditor { margin-bottom: 12px; }
.auth-submit { margin-top: 6px; }
.login-error { color: var(--wf-red-dark); font-size: 13px; margin: 2px 0 8px; }
.login-info { color: #1c7a34; font-size: 13px; margin: 2px 0 8px; }
.auth-links { display: flex; justify-content: space-between; gap: 10px;
  margin-top: 16px; font-size: 13px; }
.auth-links a { color: var(--wf-black); text-decoration: none;
  border-bottom: 1px solid var(--wf-line); padding-bottom: 1px; }
.auth-links a:hover { color: var(--wf-red); border-bottom-color: var(--wf-red); }
/* jediny odkaz pod prihlasenim (konzole nema registraci ani pozvanku) */
.auth-odkaz { margin-top: 14px; font-size: 13px; text-align: center; }
.auth-odkaz a { color: var(--wf-muted); text-decoration: none; }
.auth-odkaz a:hover { color: var(--wf-red); text-decoration: underline; }

/* --- shell --- */
.page-title { font-size: 22px; font-weight: 700; color: var(--wf-black);
  margin: 4px 0 18px; }
.card { display: flex; flex-direction: column; background: var(--wf-card); border: 1px solid var(--wf-line);
  border-radius: 1rem; padding: 20px 22px; margin-bottom: 18px; }
.card h3 { margin: 0 0 14px; font-size: 15px; color: var(--wf-black); }
.kv { display: grid; grid-template-columns: 190px 1fr; row-gap: 8px;
  font-size: 14px; }
.kv .k { color: var(--wf-muted); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; }
.badge.trial { background: #fff3d6; color: #8a6100; }
.badge.active { background: #ddf3e1; color: #1c7a34; }
.badge.expired, .badge.none { background: #fde3e1; color: #a3221b; }
.badge.current { background: var(--wf-bg-soft); color: var(--wf-black);
  border: 1px solid var(--wf-line); }
.muted { color: var(--wf-muted); font-size: 13px; }

/* --- DevExtreme ve firemnich barvach --- */
.dx-button-mode-contained.dx-button-default {
  background-color: var(--wf-red); border-radius: 999px;
  background-image: repeating-linear-gradient(-45deg, transparent,
    transparent 2px, rgba(255,255,255,.22) 2px, rgba(255,255,255,.22) 10px);
}
.dx-button-mode-contained.dx-button-default.dx-state-hover,
.dx-button-mode-contained.dx-button-default.dx-state-focused {
  background-color: var(--wf-red-dark);
}
.dx-button-mode-outlined.dx-button-danger { border-radius: 999px; }
.dx-editor-outlined.dx-state-focused {
  border-color: var(--wf-red) !important;
  box-shadow: inset 0 0 0 1px var(--wf-red) !important;
}

/* vyzva k potvrzeni e-mailove adresy nad obsahem stranky */
.verify-banner { display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px;
  background: #fff6e0; border: 1px solid #e8d9a8; border-left: 4px solid #e0a800;
  border-radius: .6rem; font-size: 14px; }
.verify-banner.done { background: #eef8f0; border-color: #cbe5d1;
  border-left-color: #1c7a34; }
/* konec predplatneho: vidi ho kazdy a na kazde strance, proto vyrazneji */
.verify-banner.konci { background: #fff3e0; border-color: #f0c893;
  border-left-color: #e65100; }
.verify-banner.skoncilo { background: #fdecea; border-color: #f3c1bc;
  border-left-color: #c62828; }
.verify-action { margin-left: auto; }

/* IČO + tlacitko na nacteni z ARESu */
.ico-row { display: flex; gap: 8px; align-items: center; }
.ico-row .ico-input { flex: 0 0 160px; }
.ares-msg { font-size: 12px; color: #1c7a34; margin-top: 6px; }
.ares-msg.err { color: var(--wf-red-dark); }

/* vyber uzivatele nad seznamem prihlaseni (jen pro spravce) */
.user-picker { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 14px; }

/* karta, ktera vyplni zbytek stranky - v ni mrizka s virtualnim rolovanim */
.card.grow { flex: 1 1 auto; min-height: 260px; }
/* Obal mrizky musi mit URCITOU vysku, jinak se mrizka s height:100 %
   zacykli s obalem, ktery roste podle obsahu, a spadne na vysku zahlavi.
   height:0 + flex-grow je standardni reseni: vysku urci rozvrzeni. */
.card.grow > .dx-datagrid, .card.grow > div[id$="Grid"] {
  flex: 1 1 auto; height: 0; min-height: 180px; }

/* ---------- mobil ---------- */
@media (max-width: 900px) {
  .app-content { padding: 12px; gap: 12px; }
  .page-title { font-size: 19px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv .k { color: var(--wf-muted); font-size: 12px; padding-top: 8px; }
  .toolbar > div { flex: 1 1 100% !important; }
  .verify-banner { flex-direction: column; align-items: flex-start; }
  .verify-action { margin-left: 0; }
  .login-card { width: auto; max-width: 420px; margin: 0 12px; }
}

/* akce pod formularem a napovedy uvnitr nej */
.form-akce { margin-top: 16px; display: inline-block; }
.form-note { color: var(--wf-muted); font-size: 13px; line-height: 1.5; }
.auth-intro { margin-bottom: 14px; }
.dx-form .dx-field-item-help-text { color: var(--wf-muted); font-size: 12px; }

/* zalozky - misto dlouheho sloupce karet (udaje firmy vs. uzivatele) */
.wf-zalozky { margin-top: 4px; }
.wf-zalozka { padding: 18px 18px 8px; }
.wf-zalozka > h3:first-child { margin-top: 0; }
.wf-zalozka .kv { margin-bottom: 4px; }
/* obsah zalozky uz ramecek ma - vnorena karta by kreslila druhy */
.wf-zalozka > .card { margin: 0; padding: 0; border: 0; box-shadow: none; }

/* nahled ceny v objednavce licenci */
.nabidka { margin-top: 16px; border-top: 1px solid var(--wf-border); padding-top: 12px; }
.nabidka-radek { display: flex; justify-content: space-between; gap: 16px;
  padding: 4px 0; font-size: 14px; }
.nabidka-celkem { border-top: 1px solid var(--wf-border); margin-top: 6px;
  padding-top: 8px; font-weight: 600; }

/* bunka matice edice x funkce v konzoli */
.matice-bunka { display: flex; flex-direction: column; align-items: center;
  gap: 2px; }

/* radek odberu hromadnych zprav (prepinac + popis) */
.odber-radek { display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--wf-border); }
.odber-radek:last-child { border-bottom: 0; }

/* serialni cislo licence - to, co zakaznik zna nazpamet */
.serial { font-size: 11px; color: var(--wf-muted); letter-spacing: .02em; }