/* ©David Ruman 2026 */
:root {
  --ink: #1e2328;
  --page-bg: #293048;
  --paper: #f7f6f3;
  --line: #d8d4cb;
  --accent: #293048;
  --accent-hover: #3a4468;
  --accent-soft: #e7e9f0;
  --danger: #9a3324;
  --ok: #1f8a4c;
  --on-dark: #e8eaf2;
  --brand-green: #00cf6f;
  --brand-green-hover: #00b562;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background-color: var(--page-bg);
  min-height: 100vh;
  display: flex;
}

/* Levý postranní panel (viz konverzace - dřív horní lišta, teď svislá
   navigace nalevo): logo nahoře, záložky pod ním, Nastavení/Odhlásit
   úplně dole - stejné ikony jako v RK7Reports (viz base.html). */
.sidebar {
  width: 216px;
  flex-shrink: 0;
  background: var(--accent);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 20px;
  text-decoration: none;
}
/* Zelený rovnoběžník jako akcent - stejný motiv (barva, sklon) jako
   r_keeper logo v RK7Reports, ale vlastní jednoduchá kresba (ne kopie
   jejich loga), ať je "RK Core" jasně svoje vlastní značka v podobném
   stylu. */
.sidebar-logo-mark { width: 13px; height: 22px; background: var(--brand-green); transform: skewX(-18deg); flex-shrink: 0; }
.sidebar-logo-text { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; line-height: 1.15; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; }
.sidebar-nav a {
  color: var(--on-dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 12px;
  border-radius: 6px;
}
.sidebar-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* Aktivni (aktualne otevrena) stranka v navigaci - stejne zelene
   zvyrazneni jako v RK7Reports, at je hned videt, kde clovek je. */
.sidebar-nav a.active { color: var(--brand-green); background: rgba(0, 207, 111, 0.12); }

/* Nastaveni/Odhlasit - vpravo nahore, jen ikony bez textu (viz konverzace -
   presunuto zpet z paticky postranniho panelu). */
.top-right-icons {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 150;
  display: flex;
  gap: 6px;
}
.top-right-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
}
.top-right-icons a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.page-content { flex: 1; min-width: 0; }

/* Obsah vyuziva celou sirku okna vedle sidebaru (viz konverzace - "vpravo moc
   mista"). Driv max-width 1200px. */
main { max-width: none; margin: 0; padding: 32px clamp(16px, 2.2vw, 40px) 64px; }

@media (max-width: 900px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .top-right-icons { top: auto; bottom: 12px; right: 12px; }
}

h1 { font-size: 26px; margin-bottom: 6px; color: #fff; }
h3 { font-size: 16px; margin-top: 0; }

.report-body { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; max-width: 100%; overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; border-bottom: 2px solid var(--ink); padding: 6px 10px; }
td { border-bottom: 1px solid var(--line); padding: 6px 10px; }
code { font-size: 12px; }

/* Fieldsety (Nastaveni atd.) potrebuji VLASTNI bile pozadi - stranka
   ma tmave pozadi (--page-bg) a bez tohoto pravidla by byl tmavy
   text (--ink) i legend (--accent, skoro stejna barva jako pozadi
   stranky) prakticky neciteny. Stejne pravidlo jako v RK7Reports. */
fieldset { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 18px; padding: 16px; background: #fff; }

label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
input[type=text], input[type=date], input[type=password], input[type=number] {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.inline-form {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 8px;
}
.inline-form label { min-width: 160px; }

.btn-green {
  background: var(--brand-green);
  border: 1px solid var(--brand-green);
  color: #06231a;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.btn-green:hover { background: var(--brand-green-hover); border-color: var(--brand-green-hover); }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.btn-secondary:hover { border-color: var(--danger); color: var(--danger); }

.btn-danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}
.badge-ok { background: #e4f5e9; color: var(--ok); }
.badge-danger { background: #fbe9e6; color: var(--danger); }
/* "Odesílání do EET povoleno" - schválně NEJDE o pozitivní (zelenou) hlášku jako ostatní
   badge-ok stavy: jde o upozornění, že se z tehle provozovny/pokladny právě opravdu
   ostro hlásí do EET, proto červené a výrazné - viz konverzace ("chci mít zvýrazněno
   třeba červeným textem"). */
.badge-live { color: var(--danger); font-weight: 800; font-size: 13px; letter-spacing: .02em; }

.flash-list { margin-bottom: 18px; }
.flash { padding: 10px 14px; border-radius: 4px; margin-bottom: 8px; font-size: 14px; }
.flash-success { background: var(--accent-soft); color: var(--accent); }
.flash-error { background: #fbe9e6; color: var(--danger); }

.login-main { max-width: 360px; margin: 80px auto; padding: 0 16px; }
.login-main h1 { color: #fff; text-align: center; }
.login-form { display: flex; flex-direction: column; gap: 14px; background: #fff; padding: 24px; border-radius: 6px; border: 1px solid var(--line); }

/* Zaskrtavaci policko jako prepinac (toggle/"suplo") - stejny vzhled
   jako v RK7Reports Nastaveni, at obe appky pusobi sourodym dojmem. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  min-width: 42px;
  background: #c7c7d1;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.15s ease-in-out;
  vertical-align: middle;
}
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: left 0.15s ease-in-out;
}
input[type="checkbox"]:checked {
  background: var(--brand-green);
}
input[type="checkbox"]:checked::before {
  left: 20px;
}

/* Vyber klientu v "Nova zprava" (Zpravy a upozorneni) - vypada a
   chova se jako klasicky rozbalovaci seznam (napr. Excel data
   validation list): zavrena "schranka" se sipkou ukazuje bud
   placeholder, nebo jmena vybranych klientu; po kliknuti se rozbali
   seznam s vyhledavanim, vybrane polozky sviti zelene (misto
   checkboxu - ten je schvalne skryty, jen drzi hodnotu pro odeslani
   formulare). */
.client-combobox { position: relative; }
.client-combobox-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.client-combobox-trigger:hover { border-color: var(--accent); }
.client-combobox-trigger:disabled { cursor: not-allowed; opacity: 0.6; }
.client-combobox-summary-placeholder { color: #8a8f9a; }
.client-combobox-arrow { color: #8a8f9a; font-size: 12px; }

/* Cela "krabicka" ma pevnou max-vysku - diky tomu se pri hodne
   klientech nikdy nerozjede cela stranka do dlouha (bez tohoto by
   rostla neomezene a vznikl by dlouhy posuvnik cele stranky vpravo,
   coz uzivatel nechtel). Vyhledavaci pole je "pripnute" nahore mimo
   posuvnou cast, takze pri psani nikdy nezmizi z dohledu. */
.client-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 8px;
  max-height: 320px;
  flex-direction: column;
}
.client-dropdown.open { display: flex; }
.client-dropdown input[type=text] {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
/* Posuvna cast - jen tenky, decentni posuvnik OMEZENY na tento
   maly ramecek (nikdy ne na cele strance). */
.client-dropdown-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.client-dropdown-list::-webkit-scrollbar { width: 7px; }
.client-dropdown-list::-webkit-scrollbar-track { background: transparent; }
.client-dropdown-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.client-dropdown-list::-webkit-scrollbar-thumb:hover { background: #b9b3a4; }
.client-dropdown-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.client-dropdown-item:hover { background: var(--accent-soft); }
.client-dropdown-item.selected { background: var(--brand-green); color: #fff; }
.client-dropdown-item.selected .client-dropdown-code { color: rgba(255, 255, 255, 0.85); }
.client-dropdown-code { color: #5b6560; font-size: 12px; font-weight: 400; }
/* Kolik klientu presne odpovida hledani - vic prehlednosti nez
   proste dlouhy seznam bez kontextu. */
.client-dropdown-count { color: #5b6560; font-size: 12px; margin: 0 0 4px 2px; flex: 0 0 auto; }

@media (max-width: 700px) {
  main { padding: 16px; }
  .report-body { padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .inline-form label { min-width: 100%; }
}

/* --- Nastaveni: sidebar layout (stejny vzor jako RK7Reports) --- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}
.settings-grid fieldset { margin-bottom: 0; }
.fieldset-actions { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
legend { padding: 2px 8px; font-weight: 600; font-size: 15px; color: var(--accent); background: #fff; border-radius: 4px; }
.settings-form label {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}
.settings-form label input,
.settings-form label select {
  width: 100%;
}
.settings-form label input[type="checkbox"] { width: 42px; justify-self: start; }

/* Prava/opravneni uzivatelu (viz konverzace - "pristupy dej vedle sebe") - prebiji
   obecne pravidlo ".settings-form label" vyse (display:grid), ktere by jinak kazdy
   label zalomilo na vlastni radek. Tady chceme kratky prepinac + popisek pekne vedle
   sebe, a cele "dlazdice" pak volne zalamovane vedle sebe pres flex-wrap na rodici. */
.settings-form .perm-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 10px 0;
  padding: 4px 10px 4px 4px;
  background: var(--accent-soft);
  border-radius: 20px;
}
.settings-form .perm-row label {
  display: inline;
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
}

.settings-shell { display: flex; align-items: flex-start; gap: 24px; margin-top: 20px; }
.settings-nav {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  position: sticky;
  top: 20px;
}
.settings-nav-item {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}
.settings-nav-item:hover { background: var(--accent-soft, #f4f6f5); }
.settings-nav-item.active { background: var(--brand-green); color: #fff; font-weight: 700; }
.settings-panels { flex: 1 1 auto; min-width: 0; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
.settings-panel .fieldset-actions { margin-top: 4px; }

@media (max-width: 800px) {
  .settings-shell { flex-direction: column; }
  .settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    position: static;
  }
  .settings-nav-item { flex: 1 1 auto; text-align: center; }
  .settings-form label { grid-template-columns: 1fr; gap: 4px; }
}

/* Cislo verze v levem dolnim rohu - vzdy viditelne (fixed), nad
   ostatnim obsahem, ale malé a nenapadne, at nepřekáží. Slouží k
   rychlemu overeni po nasazeni, ze se skutecne nahrala nova verze
   (viz core/version.py, bump_version.py v build.bat). Stejny vzor
   jako v RK7Reports. */
.app-version-badge {
  position: fixed;
  left: 10px;
  bottom: 8px;
  z-index: 200;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "Segoe UI", Arial, sans-serif;
  pointer-events: none;
  user-select: text;
}

/* Autorský podpis v pravém dolním rohu - stejný vizuální princip jako
   app-version-badge vlevo, jen zrcadlově. */
.author-badge {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 200;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "Segoe UI", Arial, sans-serif;
  pointer-events: none;
  user-select: text;
}

/* Klienti Reports - karty ve stylu prehledu reportu z RK7Reports */
.reports-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 20px 0; }
.reports-card {
  display: block;
  padding: 18px;
  background: var(--brand-green);
  border: 1px solid var(--brand-green);
  border-radius: 6px;
  color: var(--accent);
}
.reports-card h2 { color: var(--accent); font-size: 18px; margin: 0 0 8px; }
.reports-card p { color: var(--accent); font-size: 13px; margin: 4px 0; opacity: 0.9; }
.reports-card a.reports-card-link { color: var(--accent); font-weight: 700; text-decoration: underline; word-break: break-all; }
.reports-card a.reports-card-link:hover { color: #fff; }
.reports-card-offline { background: #fff; border: 1px solid var(--line); }
.reports-card-offline h2, .reports-card-offline p { color: var(--accent); }
.reports-card-port-form { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.reports-card-port-form input[type="number"],
.reports-card-port-form button {
  width: 96px; height: 32px; padding: 4px 8px; border-radius: 4px; font-size: 13px; box-sizing: border-box;
}
.reports-card-port-form input[type="number"] { border: 1px solid var(--line); }
.reports-card-port-form button {
  background: #8a8f98; border: 1px solid #8a8f98; color: #fff; font-weight: 600; cursor: pointer;
}
.reports-card-port-form button:hover { background: #75797f; border-color: #75797f; }

/* Platebni terminaly (VivaRkAdapter) - zobrazuje se jako iframe uvnitr
   RK Core, sidebar zustava trvale vidět (viz konverzace). Bezesive -
   zadny ramecek, bila podlozka at nesplyva s tmavym pozadim stranky. */
.platby-frame {
  width: 100%;
  /* Vyska se nastavuje skriptem podle obsahu (templates/platby.html) - stranka
     se pak posouva cela, bez druheho posuvniku uvnitr ramecku. Tohle je jen
     vychozi hodnota, nez se obsah nacte. */
  height: calc(100vh - 160px);
  min-height: 400px;
  border: none;
  border-radius: 6px;
  background: #fff;
  display: block;
}

/* Opravneni uzivatele v JEDNOM radku (viz konverzace - "zbytecne velike okno"):
   mensi prepinace, bez "dlazdic" a bez zalamovani. Kdyz se radek na uzkem okne
   nevejde, posune se vodorovne misto zalomeni. */
.perm-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.perm-line .perm-row,
.settings-form .perm-line .perm-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  background: none;
  flex: 0 0 auto;
}
.perm-line .perm-row label,
.settings-form .perm-line .perm-row label {
  display: inline;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}
.perm-line input[type="checkbox"] {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  height: 17px;
  border-radius: 9px;
}
.perm-line input[type="checkbox"]::before {
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
}
.perm-line input[type="checkbox"]:checked::before {
  left: 15px;
}

/* Licence - klient (server) + radky jeho aplikaci (viz templates/dashboard.html,
   core/apps.py). Kazdy klient je vlastni <tbody>, at jde filtrovat celou skupinu. */
.badge-warn { background: #fff3d6; color: #8a5a00; }
.badge-muted { background: #eceeed; color: #5b6560; }
.lic-hint { color: #5b6560; font-size: 13px; margin-top: 0; }
.lic-muted { color: #5b6560; font-size: 12px; }
.lic-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lic-filters input, .lic-filters select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.lic-filters input { flex: 0 1 360px; }
.lic-add-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 12px; }
.lic-add-app { display: inline-flex; align-items: center; gap: 6px; }
.lic-add-app label { margin: 0; font-size: 13px; white-space: nowrap; }
.lic-table { width: 100%; border-collapse: collapse; }
.lic-table th { text-align: left; }
.lic-table tbody.lic-client { border-top: 2px solid var(--line); }
.lic-client-head td { background: #f4f6f5; padding-top: 10px; padding-bottom: 10px; }
.lic-head-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.lic-head-line form { margin: 0; }
.lic-name { font-size: 15px; }
.lic-hw { font-size: 12px; }
.lic-spacer { flex: 1 1 auto; }
.lic-app td:first-child { padding-left: 22px; }
.lic-date-form, .lic-module, .lic-add-app-form, .lic-edit-form { display: flex; align-items: center; gap: 6px; margin: 0; }
.lic-date-form input[type="date"] { width: 150px; }
.lic-module label { margin: 0; font-size: 13px; }
.lic-add-row td { padding-left: 22px; }
.lic-add-app-form select, .lic-add-app-form input[type="date"] { padding: 5px 8px; }
.lic-edit summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.lic-edit[open] { flex-basis: 100%; order: 10; }
.lic-edit-form { margin-top: 6px; flex-wrap: wrap; }
.lic-assign-form { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; }
.lic-assign-form select, .lic-assign-form input[type="text"] { padding: 5px 8px; }
.lic-dev-title td { padding: 10px 0 4px 22px; font-size: 12px; font-weight: 700; color: #5b6560; text-transform: uppercase; letter-spacing: .04em; }
.lic-dev td { padding-left: 22px; }
.lic-dev-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.lic-dev-line form { margin: 0; }
.lic-dev-label input { width: 170px; padding: 5px 8px; }
.lic-dev-apps { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lic-chip { background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }

/* Sbalitelni klienti v Licencich - sbaleny klient = jeden radek se souhrnem. */
.lic-client:not(.open) tr.lic-detail { display: none; }
.lic-client:not(.open) .lic-head-actions { display: none; }
.lic-client:not(.open) .lic-client-head td { background: #fff; padding-top: 7px; padding-bottom: 7px; }
.lic-head-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lic-head-actions form { margin: 0; }
.lic-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 4px 2px 0; cursor: pointer; color: inherit; font: inherit; }
.lic-chevron { display: inline-block; width: 12px; font-size: 12px; color: #5b6560; transition: transform .12s ease; }
.lic-client.open .lic-chevron { transform: rotate(90deg); }
.lic-summary { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lic-sum { border-radius: 10px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }
.lic-sum-ok { background: #e4f5e9; color: var(--ok); }
.lic-sum-danger { background: #fbe9e6; color: var(--danger); }
.lic-sum-warn { background: #fff3d6; color: #8a5a00; }
.lic-sum-muted { background: #eceeed; color: #5b6560; }
.lic-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
.eet-licence { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; margin: -6px 0 10px; }

/* Zvyrazneni ROZBALENEHO klienta (viz konverzace - "potrebuji zvyraznit klienta,
   ktereho spravuji"): zeleny pruh vlevo, zelena hlavicka a lehce podbarveny
   detail, aby se rozbaleny klient neslil se sbalenymi radky okolo. */
.lic-client:not(.open) .lic-client-head:hover td { background: #f4f6f5; cursor: pointer; }
.lic-client.open > tr > td { background: #f7fbf9; }
.lic-client.open > tr > td:first-child { box-shadow: inset 4px 0 0 var(--brand-green); }
.lic-client.open .lic-client-head td {
  background: #e3f5ec;
  border-top: 2px solid var(--brand-green);
  padding-top: 12px;
  padding-bottom: 12px;
}
.lic-client.open .lic-name { color: #0b7a4a; font-size: 16px; }
.lic-client.open > tr:last-child > td { border-bottom: 2px solid var(--brand-green); }
.lic-client.open .lic-dev-title td { background: #eef6f2; }
.lic-client.open .lic-sum-ok { background: #fff; }
.lic-inline-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin: 0; white-space: nowrap; }

/* Licence: seznam klientu (klik = stranka klienta) a stranka klienta */
.lic-list tbody.lic-client { cursor: pointer; }
.lic-open-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.lic-open-link:hover strong { text-decoration: underline; }
.lic-list tbody.lic-client:hover .lic-client-head td { background: #eef6f2; }
.lic-back { margin: 0 0 12px; font-size: 14px; }
.lic-back a { color: var(--accent); text-decoration: none; }
.lic-back a:hover { text-decoration: underline; }
.lic-detail-page .lic-name { font-size: 16px; }