/*
 * BLOKY OBSAHU — sdílené styly stavebnice (vzory z Compassu/kvalita).
 * Companion k app/blocks/blocks.js. Barvy: Modernize palette
 * (#13deb9 success, #ffae1f warning, #fa896b danger, #539bff info, #5d87ff primary).
 * Bez !important mimo utility třídy; žádné přepisy globálních Bootstrap tříd.
 */

/* ── KPI dlaždice ─────────────────────────────────────────────────────────── */
.kpi-card {
  border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}
.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.kpi-label {
  font-size: .875rem;
  color: #6c757d;
}

/* ── Detail štítky ────────────────────────────────────────────────────────── */
.detail-label {
  font-size: .85rem;
  color: #6c757d;
  margin-bottom: .25rem;
}
.detail-value {
  font-weight: 500;
}

/* ── KV mřížka ────────────────────────────────────────────────────────────── */
.kv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.kv-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 575.98px) {
  .kv-grid,
  .kv-grid-3 {
    grid-template-columns: 1fr;
  }
}
.kv-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.kv-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.kv-label {
  font-size: .85rem;
  color: #6c757d;
}
.kv-value {
  font-weight: 500;
  text-align: right;
}

/* ── Prázdný stav ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--bs-secondary-color, #6c757d);
}
.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--bs-secondary-color, #6c757d);
  opacity: .5;
}
.empty-state-title {
  font-weight: 600;
  margin-bottom: .5rem;
}
.empty-state-text {
  font-size: .9rem;
  margin-bottom: 0;
}

/* ── Stavové texty ────────────────────────────────────────────────────────── */
.status-text {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status-success { color: #13deb9; }
.status-warning { color: #ffae1f; }
.status-danger  { color: #fa896b; }
.status-info    { color: #539bff; }

/* ── Skeleton loading ─────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bs-gray-100, #f8f9fa) 25%,
    var(--bs-gray-200, #e9ecef) 50%,
    var(--bs-gray-100, #f8f9fa) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: .25rem;
}
.skeleton--label {
  height: .75rem;
  width: 40%;
  margin-bottom: .5rem;
}
.skeleton--title {
  height: 1.25rem;
  width: 60%;
  margin-bottom: .75rem;
}
.skeleton--text {
  height: .875rem;
  width: 100%;
  margin-bottom: .4rem;
}
.skeleton--row {
  height: 2.5rem;
  width: 100%;
  margin-bottom: .5rem;
}

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.timeline-widget {
  position: relative;
  padding-left: 1rem;
}
.timeline-item {
  display: flex;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  position: relative;
}
.timeline-item:last-child {
  border-bottom: none;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 1.25rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5d87ff;
  flex-shrink: 0;
}
.timeline-time {
  min-width: 80px;
  font-size: .8rem;
  padding-top: .125rem;
  flex-shrink: 0;
}
.timeline-content {
  flex: 1;
  min-width: 0;
}
.timeline-clickable {
  cursor: pointer;
}
.timeline-clickable:hover .timeline-content {
  color: var(--bs-primary, #5d87ff);
}

/* ── Workflow kroky ───────────────────────────────────────────────────────── */
.step-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.wf-connector {
  height: 2px;
  background: #dee2e6;
  min-width: 24px;
}

/* ── Tabulkové buttony ────────────────────────────────────────────────────── */
table.table td:has(.btn) {
  white-space: nowrap;
}
td:has(.btn) .btn + .btn {
  margin-left: .25rem;
}

/* ── Radio score ──────────────────────────────────────────────────────────── */
.radio-score-group {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.radio-score-group input[type="radio"] {
  display: none;
}
.radio-score-group label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .375rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .875rem;
  transition: background .12s, color .12s, border-color .12s;
}
.radio-score-group input[type="radio"]:checked + label {
  background: var(--bs-primary, #5d87ff);
  color: #fff;
  border-color: var(--bs-primary, #5d87ff);
}
.radio-score-group label:hover {
  border-color: var(--bs-primary, #5d87ff);
  color: var(--bs-primary, #5d87ff);
}

/* ── Mockup banner ────────────────────────────────────────────────────────── */
.app-mockup-banner {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  font-size: .78rem;
  text-align: center;
  padding: .3rem 1rem;
}

/* ── Utility třídy ────────────────────────────────────────────────────────── */
.cursor-pointer     { cursor: pointer !important; }
.cursor-grab        { cursor: grab !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

.w-100px { width: 100px !important; }
.w-120   { width: 120px !important; }
.w-150   { width: 150px !important; }
.w-200   { width: 200px !important; }
.w-250   { width: 250px !important; }
.w-300   { width: 300px !important; }
.w-400   { width: 400px !important; }

.min-w-150 { min-width: 150px !important; }
.min-w-200 { min-width: 200px !important; }
.min-w-300 { min-width: 300px !important; }

.max-w-200 { max-width: 200px !important; }
.max-w-300 { max-width: 300px !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-500 { max-width: 500px !important; }

.square-24 { width: 24px !important; height: 24px !important; }
.square-32 { width: 32px !important; height: 32px !important; }
.square-40 { width: 40px !important; height: 40px !important; }
.square-48 { width: 48px !important; height: 48px !important; }
.square-64 { width: 64px !important; height: 64px !important; }

/* ── Sidebar: zarovnání položek v podmenu ──────────────────────────────────
   Šablona dává odrážce podpoložky (.round-16) výchozí flex-shrink, takže se
   u dlouhého názvu smrskne a text začne o několik pixelů dřív než u kratších
   sousedů. Odrážce proto pevně držíme šířku ikony hlavní položky a mezeru
   sjednocujeme s první úrovní — texty podpoložek pak začínají na stejné
   svislé ose jako texty nadřazených položek. */
#sidebarnav .first-level .sidebar-link {
  gap: 15px;
}

#sidebarnav .first-level .sidebar-link > .round-16 {
  flex: 0 0 21px;
  width: 21px;
}

/* Ikony podpoložek podmenu
   ------------------------
   Modernize počítá u druhé úrovně jen s puntíkem a zmenšuje VŠECHNY ikony
   pravidlem `.first-level .sidebar-link .ti { font-size: 7px }`. Jakmile má
   podpoložka v menu.js vlastní "icon", vykreslí sidebar.js ikonu s třídou
   `app-subicon` a tahle pravidla jí velikost vrátí. Podpoložky bez ikony
   zůstávají na původním puntíku, takže se nic staršího nerozbije. */
#sidebarnav .first-level .sidebar-link .ti.app-subicon {
  font-size: 18px;
  line-height: 1;
}

/* Obal ikony drží stejnou šířku jako puntíkový .round-16 (21 px), takže texty
   podpoložek začínají na téže svislé ose bez ohledu na to, jestli podpoložka
   ikonu má, nebo ne. */
#sidebarnav .first-level .sidebar-link > .app-subicon-wrap {
  flex: 0 0 21px;
  width: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Celoobrazovkový shell (fullscreen/index.html)
   ----------------------------------
   Shell drží sidebar i header, obsah obrazovek jede v <iframe>. Dokument se
   při přepínání neopouští, takže celoobrazovkový režim vydrží — detail
   v app/mobile.js a GENERATOR.txt §11. */

/* Shell sám nikdy neroluje — roluje se obsah uvnitř rámu. Díky tomu drží
   měření výšky v app/mobile.js (rám vyplní zbytek okna přesně). */
html.app-mobile-shell,
html.app-mobile-shell body {
  overflow: hidden;
}

/* Výšku i odsazení pod fixní hlavičkou dopočítává app/mobile.js — topbar je
   při užších šířkách vyšší (navbar se zalomí), takže natvrdo psaná hodnota
   by nesedela. */
.kiosk-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stránka vložená v rámu: vlastní sidebar a header si nekreslí (drží je shell),
   zbylé prázdné placeholdery je potřeba schovat a zrušit jejich odsazení.
   Třídu app-embedded nasazuje app/app-shell.js podle jména rámu (app-kiosk-frame). */
html.app-embedded .left-sidebar,
html.app-embedded .topbar,
html.app-embedded .preloader {
  display: none !important;
}

/* Modernize rezervuje v .body-wrapper místo pro FIXNÍ topbar (padding-top).
   V rámu je topbar schovaný, takže by ta rezerva zůstala jako prázdná mezera
   pod hlavičkou shellu — proto ji rušíme. */
html.app-embedded .body-wrapper {
  margin-left: 0 !important;
  padding-top: 0 !important;
}

/* Podmenu: vizuální oddělení od hlavní úrovně
   -------------------------------------------
   Modernize dává podpoložkám jen odrážku, takže při delším seznamu splývají
   s hlavní úrovní. Levá vodicí čára a odsazení je opticky sváže do skupiny —
   stejné řešení jako v ostatních intranetech Interlacta (assets/css/sidebar.css
   v htdocs/interlacto). Jemný oddělovač mezi položkami pomáhá v delším seznamu. */
#sidebarnav .first-level {
  position: relative;
  margin-left: 26px;
  padding-left: 12px;
  border-left: 1px solid rgba(42, 53, 71, .12);
}

#sidebarnav .first-level .sidebar-item + .sidebar-item > .sidebar-link {
  border-top: 1px solid rgba(42, 53, 71, .06);
}

/* Odsazením zleva se zúžila plocha odkazu — vrátíme mu kompaktnější padding,
   ať se delší názvy podpoložek nezalamují. */
#sidebarnav .first-level .sidebar-item > .sidebar-link {
  padding-left: 8px;
  padding-right: 8px;
}

/* ── Kalendář týdenních prodejů (admin-sales) ─────────────────────────────────
   Řádek = týden Po–Ne v CSS gridu. Podklad dne (.sales-cal-day) se táhne přes
   všechny řádky, číslo dne sedí v 1. řádku a každý prodej je pruh (.sales-cal-bar)
   ve vlastním řádku od dne otevření do dne uzavření. */
.sales-cal-head,
.sales-cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.sales-cal-head > div {
  padding: 0 .5rem .35rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.sales-cal-week {
  min-height: 84px;
}
.sales-cal-day {
  border: 1px solid var(--bs-border-color);
  margin: 0 -1px -1px 0;
}
.sales-cal-day.other-month {
  background: var(--bs-tertiary-bg);
}
.sales-cal-day.today {
  background: rgba(93, 135, 255, .08);
}
.sales-cal-num {
  padding: .3rem .5rem;
  font-size: .8rem;
  color: var(--bs-secondary-color);
}
.sales-cal-num.other-month {
  opacity: .55;
}
.sales-cal-num.today {
  color: var(--bs-primary);
  font-weight: 700;
}
.sales-cal-bar {
  position: relative;
  z-index: 1;
  margin: 0 .35rem .3rem;
  padding: .2rem .5rem;
  border-radius: 6px;
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.sales-cal-bar:hover {
  filter: brightness(.95);
  text-decoration: underline;
}