/* ============================================================
   VAŠA LEKÁREŇ PORTAL – KOMPONENTY (portal20)
   Univerzálna, prenositeľná knižnica komponentov dashboardu.
   Vyžaduje: tokens.css (načítaj pred týmto súborom)
   Závislosti: žiadne (vanilla CSS; JS správanie v portal-ui.js)
   Pôvodné názvy tried portálu sú zachované.
   ============================================================ */

/* ============ 1. FONTY + BASE ============ */
/* Brand font – nahraď vlastnými súbormi, fallback je Inter (Google Fonts):
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> */
/* Firemný font Vasa Grotesk zatiaľ nemáme v súboroch — používa sa fallback Inter.
   Keď dodávateľ dodá OTF súbory, ulož ich do public/assets/css/fonts/ a odkomentuj:
@font-face { font-family: 'Vasa Grotesk'; src: url('fonts/VasaGrotesk-Regular.otf') format('opentype'); font-weight: normal; font-display: swap; }
@font-face { font-family: 'Vasa Grotesk'; src: url('fonts/VasaGrotesk-Bold.otf') format('opentype'); font-weight: bold; font-display: swap; }
*/

* { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--white);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============ 2. LAYOUT SHELL ============ */
/* <body>
     <div class="page-container">
       <header class="header" id="header">…</header>
       <div class="content-area">
         <div><aside class="sidebar" id="sidebar">…</aside>
              <div class="sidebar-overlay" id="sidebarOverlay"></div></div>
         <main class="main-content" id="mainContent">…</main>
       </div>
     </div>
     <footer class="footer">…</footer>                              */
.page-container {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 32px 0 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-area {
  display: flex;
  flex: 1;
  gap: var(--content-gap);
  margin-top: 53px;
  position: relative;
}

.main-content {
  flex: 1;
  min-width: 0;               /* nutné, aby flex dieťa neroztiahlo layout */
  padding: 0 0 216px 0;
  transition: var(--transition-layout);
}

/* Sekčný kontajner obsahu (na portáli „frame-200") – svetlomodrý blok so sekciami */
.frame-200 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 20px 32px 20px;
  background-color: var(--sidebar-bg);
  border-radius: var(--radius-xl);
}
.frame-200 .frame-200-section { display: flex; flex-direction: column; gap: 32px; }
.frame-200 .frame-200-section-header { display: flex; flex-direction: row; gap: 10px; padding-left: 24px; }
.frame-200 .frame-200-section-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-section-title);
  line-height: 1;
  color: var(--primary-color);
  margin: 0;
}
.frame-200 .frame-200-section-container { display: flex; flex-direction: column; justify-content: center; gap: 16px; width: 100%; }

/* ============ 3. HEADER (NAVBAR) ============ */
/* Anatómia (desktop): biely pás s logom vľavo, vpravo user chip + výber pobočky,
   pod tým 1px deliaca linka (header-divider).                                    */
.header { display: flex; flex-direction: column; gap: 20px; width: 100%; }

.header-main-frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: 10px;
  padding: 0 20px;
  background-color: var(--white);
  border-radius: var(--radius-lg);
}
.header-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  gap: 24px;
}
.header-logo { display: flex; flex-direction: column; gap: 16px; width: 234px; flex-shrink: 0; text-decoration: none; }
.header-logo-img { width: 100%; height: auto; max-height: 34px; object-fit: contain; }
.header-pharmacy-info { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 24px; }
.header-divider { align-self: stretch; height: 1px; background-color: var(--text-color-20); }

/* --- User chip + dropdown --- */
.header-user-settings { position: relative; display: flex; flex-direction: row; align-items: center; gap: 16px; }
.header-user-btn {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 6px 8px 6px 6px;
  background-color: var(--bg-gray);
  border: none;
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.header-user-btn:hover { background-color: #E0E5EC; }
.header-user-icon-wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; }
.header-user-icon {
  display: flex; justify-content: center; align-items: center;
  width: 32px; height: 32px;
  background-color: var(--secondary-color);
  border-radius: 50%;
}
.header-user-icon-img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.header-user-online-indicator {
  position: absolute; top: -2px; right: -2px;
  width: 12px; height: 12px;
  background-color: var(--online-indicator);
  border: 2px solid var(--white);
  border-radius: 50%;
}
.header-user-name-wrapper { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.header-user-name {
  font-family: var(--font-primary);
  font-weight: 400; font-size: 16px; line-height: 1.5em; letter-spacing: -0.02em;
  color: var(--text-color);
}
.header-user-chevron { display: flex; align-items: center; padding: 4px; border-radius: 180px; background-color: var(--white); }
.header-chevron-icon { width: 20px; height: 20px; }

.header-user-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 200px;
  background-color: var(--white);
  border: 1px solid var(--text-color-20);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: var(--z-dropdown);
}
.header-user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.header-dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  font-family: var(--font-secondary); font-size: 14px;
  color: var(--text-color);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.header-dropdown-item:first-child { border-radius: 12px 12px 0 0; }
.header-dropdown-item:last-child { border-radius: 0 0 12px 12px; }
.header-dropdown-item:hover { background-color: var(--bg-gray); color: var(--text-color); }
.header-dropdown-item-logout:hover { background-color: var(--danger-hover-bg); color: var(--secondary-color); }
.header-dropdown-icon { width: 20px; height: 20px; }
.header-dropdown-divider { height: 1px; background-color: var(--text-color-20); margin: 4px 0; }

/* --- Výber pobočky (pill input s autocomplete) --- */
.header-pharmacy-dropdown { position: relative; width: 372px; height: 44px; }
.header-pharmacy-input-wrapper {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 6px 16px; width: 100%; height: 100%;
  background-color: var(--white);
  border: 1px solid var(--text-color-30);
  border-radius: var(--radius-input-pill);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.header-pharmacy-input-wrapper:hover,
.header-pharmacy-input-wrapper:focus-within { border-color: var(--text-color); }
.header-pharmacy-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-secondary); font-weight: 400; font-size: 15px; line-height: 1.6em; letter-spacing: -0.02em;
  color: var(--text-color);
}
.header-pharmacy-input::placeholder { color: var(--text-color-30); }
.header-pharmacy-chevron { display: flex; align-items: center; flex-shrink: 0; transition: transform 0.2s ease; }
.header-pharmacy-dropdown.open .header-pharmacy-chevron { transform: rotate(180deg); }
.header-pharmacy-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto;
  background-color: var(--white);
  border: 1px solid var(--text-color-20);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: var(--z-dropdown);
}
.header-pharmacy-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.header-pharmacy-item {
  padding: 12px 16px;
  font-family: var(--font-secondary); font-size: 14px; color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.header-pharmacy-item:first-child { border-radius: 12px 12px 0 0; }
.header-pharmacy-item:last-of-type { border-radius: 0 0 12px 12px; }
.header-pharmacy-item:hover { background-color: var(--bg-gray); }
.header-pharmacy-item.selected { background-color: var(--bg-gray); font-weight: 500; }
.header-pharmacy-item.hidden { display: none; }
.header-pharmacy-no-results { display: none; padding: 12px 16px; font-family: var(--font-secondary); font-size: 14px; color: var(--text-color-30); text-align: center; }
.header-pharmacy-no-results.visible { display: block; }

/* --- Mobilný hamburger (skrytý na desktope) --- */
.mobile-menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 8px 9px 8px 7px;
  background-color: var(--white);
  border: 3px solid var(--sidebar-bg);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.mobile-menu-toggle:hover { background-color: var(--primary-color-05); border-color: #DDF4FF; }
.mobile-menu-icon { width: 24px; height: 24px; }
.header-pharmacy-mobile, .header-mobile-separator { display: none; }
/* Mobilný pill výberu pobočky (zobrazí sa v media query ≤767) */
.header-pharmacy-mobile-wrapper {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  width: 100%; height: 44px;
  padding: 6px 16px;
  background-color: var(--white);
  border: 1px solid var(--text-color-30);
  border-radius: var(--radius-input-pill);
  cursor: pointer;
  position: relative;
}
.header-pharmacy-mobile-input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font-secondary); font-weight: 400; font-size: 15px; line-height: 1.6em; letter-spacing: -0.02em;
  color: var(--text-color);
  outline: none; cursor: pointer;
}
.header-pharmacy-mobile-input::placeholder { color: var(--text-color-60); }
.header-pharmacy-mobile-chevron { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.2s ease; }
.header-pharmacy-mobile.open .header-pharmacy-mobile-chevron { transform: rotate(180deg); }
.header-pharmacy-mobile-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background-color: var(--white);
  border: 1px solid var(--text-color-20);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  z-index: var(--z-dropdown);
  max-height: 300px; overflow-y: auto;
}
.header-pharmacy-mobile.open .header-pharmacy-mobile-menu { display: block; }

/* ============ 4. SIDEBAR ============ */
/* Anatómia: sticky panel #E9F7FF, radius 16, hore plávajúce toggle tlačidlo,
   navigácia (3 úrovne), user sekcia, kontakt, copyright.
   Stavy: expanded (268px) | .collapsed (84px) | tablet ≤991 (vždy 84px)
          | mobil ≤767 (drawer 300px sprava, trieda .mobile-open + overlay) */
.sidebar {
  position: sticky;
  top: 32px; left: 0;
  width: var(--sidebar-expanded-width);
  min-width: var(--sidebar-expanded-width);
  background-color: var(--sidebar-bg);
  border-radius: var(--radius-lg);
  padding: 32px 8px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  transition: var(--transition-layout);
  z-index: var(--z-sidebar);
  height: fit-content;
  flex-shrink: 0;
}
.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
  padding: 32px 8px 8px;
}

/* --- Toggle tlačidlo (pláva nad horným okrajom sidebaru) --- */
.sidebar-toggle-btn {
  position: absolute;
  top: -21px; right: 20px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px 8px 7px;
  background-color: var(--white);
  border: 3px solid var(--sidebar-bg);
  border-radius: 23px;
  cursor: pointer;
  transition: var(--transition-layout);
  z-index: var(--z-sidebar-toggle);
}
.sidebar-toggle-btn:hover { background-color: #F0F0F0; }
.sidebar-toggle-icon { width: 24px; height: 24px; }
.sidebar-toggle-icon-collapsed { display: none; }              /* ikona » */
.sidebar.collapsed .sidebar-toggle-icon-expanded { display: none; }   /* ikona « */
.sidebar.collapsed .sidebar-toggle-icon-collapsed { display: block; }

/* --- Navigácia: 1. úroveň --- */
.sidebar-nav { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.sidebar-menu-container { display: flex; flex-direction: column; align-self: stretch; gap: 12px; width: 252px; }

.sidebar-menu-item {
  display: flex; align-items: center; align-self: stretch;
  gap: 16px; height: 48px;
  padding: 4px 4px 4px 0;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--primary-color-80);
  font-family: var(--font-primary);
  font-size: 15px; font-weight: 700; line-height: 1.6em;
  transition: var(--transition-layout);
  cursor: pointer;
}
.sidebar-menu-item:hover { background-color: var(--white-60); color: var(--primary-color); }
.sidebar-menu-icon { width: 24px; height: 24px; flex-shrink: 0; }
.sidebar-menu-icon-wrapper { display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 21px; flex-shrink: 0; }
.sidebar-menu-icon-wrapper.with-gb { background-color: var(--primary-color-08); } /* ikona s podkladom */
.sidebar-menu-item-inner { display: flex; align-items: center; gap: 9px; padding-left: 16px; flex: 1; }
.sidebar-menu-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-menu-chevron { width: 16px; height: 16px; flex-shrink: 0; }

/* Vybraná položka: červený ľavý prúžok (3px) na inner wrapperi */
.sidebar-menu-item.selected { border-radius: var(--radius-md); padding: 16px 16px 16px 0; gap: 16px; color: var(--primary-color); }
.sidebar-menu-item.selected .sidebar-menu-item-inner { border-left: 3px solid var(--secondary-color); padding-left: 16px; }

/* --- Rozbaliteľná skupina (2. úroveň) --- */
.sidebar-menu-group { display: flex; flex-direction: column; gap: 0; }
.sidebar-menu-group .sidebar-menu-item { padding: 16px 16px 16px 24px; }
.sidebar-menu-group-container { display: flex; flex-direction: column; }
/* Otvorená skupina = polopriehľadná biela „karta" */
.sidebar-menu-group.open .sidebar-menu-group-container {
  background-color: var(--white-60);
  border-radius: var(--radius-md);
  padding: 8px 8px 16px;
}
/* Hlavička otvorenej skupiny = plná biela karta s tieňom */
.sidebar-menu-group.open .sidebar-menu-group-container .sidebar-menu-item.active {
  background-color: var(--white);
  box-shadow: var(--shadow-card-active);
  border-radius: var(--radius-sm);
  padding: 16px;
  gap: 16px;
  color: var(--primary-color);
}

/* Chevrony hore/dole podľa stavu skupiny */
.sidebar-menu-item .chevron-up, .sidebar-menu-item .chevron-down { display: none; }
.sidebar-menu-group .sidebar-menu-item .chevron-down { display: block; }
.sidebar-menu-group.open .sidebar-menu-item .chevron-up { display: block; }
.sidebar-menu-group.open .sidebar-menu-item .chevron-down { display: none; }

/* Submenu (2. úroveň) – zobrazené len pri .open */
.sidebar-submenu { display: none; flex-direction: column; gap: 0; padding: 12px 0 0 16px; }
.sidebar-menu-group.open .sidebar-submenu { display: flex; }
.sidebar-submenu-group { display: flex; flex-direction: column; gap: 0; }
.sidebar-submenu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 0;
  width: 220px;
  text-decoration: none;
  color: var(--Text-Secondary-80);
  font-family: var(--font-primary);
  font-size: 15px; font-weight: 400; line-height: 1.5em; letter-spacing: -0.234px;
  transition: var(--transition-layout);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.sidebar-submenu-item:hover { background-color: var(--white-60); }
.sidebar-submenu-item.active { color: var(--primary-color); font-weight: 700; width: 100%; }
.sidebar-submenu-text { flex: 1; }
.sidebar-submenu-chevron { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-submenu-item .chevron-up { display: none; }
.sidebar-submenu-item .chevron-down { display: block; }
.sidebar-submenu-group.open .sidebar-submenu-item .chevron-up { display: block; }
.sidebar-submenu-group.open .sidebar-submenu-item .chevron-down { display: none; }

/* 3. úroveň – vybraná položka má červenú bodku vľavo */
.sidebar-third-level { display: none; flex-direction: column; gap: 0; padding: 8px 0 0 16px; }
.sidebar-submenu-group.open .sidebar-third-level { display: flex; }
.sidebar-third-level-item {
  display: flex; align-items: center; position: relative;
  padding: 8px 16px 8px 12px;
  width: 220px;
  text-decoration: none;
  color: var(--Text-Secondary-80);
  font-family: var(--font-primary);
  font-size: 14px; font-weight: 400; line-height: 1.43em; letter-spacing: -0.31px;
  transition: var(--transition-layout);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.sidebar-third-level-item:hover { background-color: var(--white-60); }
.sidebar-third-level-item.selected { color: var(--primary-color); font-weight: 700; padding-left: 9px; }
.sidebar-third-level-item.selected::before {
  content: "";
  position: absolute; left: -3px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background-color: var(--secondary-color);
  border-radius: 50%;
}
.sidebar-third-level-text { flex: 1; }

/* --- User sekcia (v spodnej časti sidebaru) --- */
.sidebar-user-section { display: flex; flex-direction: column; gap: 0; width: 252px; }
.sidebar-divider { height: 0; border-top: 1px solid var(--primary-color-10); margin: 0 20px 24px; align-self: stretch; }
.sidebar-user-settings { display: flex; flex-direction: column; gap: 24px; border-radius: var(--radius-md); padding: 0 0 12px; }
.sidebar-user-info-wrapper { display: flex; flex-direction: column; gap: 10px; padding: 0 8px; }
.sidebar-user-info-compact {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px 6px 6px;
  background-color: var(--white-60);
  border-radius: var(--radius-circle);
}
.sidebar-user-icon-wrapper {
  position: relative; width: 32px; height: 32px;
  background-color: var(--secondary-color);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-user-icon-img { width: 20px; height: 24px; filter: brightness(0) invert(1); }
.sidebar-user-online {
  position: absolute; top: -2px; right: -2px;
  width: 12px; height: 12px;
  background-color: var(--online-indicator);
  border: 2px solid var(--white);
  border-radius: 50%;
}
.sidebar-user-name { font-family: var(--font-secondary); font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.31px; color: var(--primary-color); }
.sidebar-user-actions { display: flex; flex-direction: column; gap: 10px; }
.sidebar-user-action {
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  text-decoration: none;
  color: var(--primary-color);
  transition: var(--transition-layout);
  cursor: pointer;
}
.sidebar-user-action:hover { background-color: var(--white-60); }
.sidebar-action-icon { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-action-text { font-family: var(--font-secondary); font-weight: 400; font-size: 15px; line-height: 1.6em; letter-spacing: -0.31px; color: var(--primary-color); }

/* --- Kontaktná sekcia --- */
.sidebar-contact-section { display: flex; flex-direction: column; gap: 0; width: 252px; }
.sidebar-contact-info { display: flex; flex-direction: column; gap: 24px; background-color: var(--primary-color-05); border-radius: var(--radius-md); padding: 16px 0; }
.sidebar-contact-item-wrapper { display: flex; flex-direction: column; gap: 10px; padding: 0 24px 0 26px; }
.sidebar-contact-item { display: flex; align-items: center; gap: 20px; text-decoration: none; color: var(--primary-color); cursor: pointer; transition: var(--transition-layout); }
.sidebar-contact-item:hover { opacity: 0.8; }
.sidebar-contact-icon { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-contact-text { font-family: var(--font-secondary); font-weight: 400; font-size: 16px; line-height: 1em; color: var(--primary-color); }

/* --- Copyright v sidebari --- */
.sidebar-footer { display: flex; flex-direction: column; gap: 0; width: 252px; }
.sidebar-footer-content { display: flex; justify-content: center; align-items: center; gap: 10px; }
.sidebar-footer-text { font-family: var(--font-secondary); font-weight: 400; font-size: 15px; line-height: 1.6em; color: var(--footer-text-color); text-align: center; }

/* --- ZBALENÝ STAV (.collapsed) – iba ikony --- */
.sidebar.collapsed .sidebar-menu-container { width: auto; }
.sidebar.collapsed .sidebar-menu-item { padding: 16px; justify-content: center; gap: 0; }
.sidebar.collapsed .sidebar-menu-item.selected { padding: 16px; }
.sidebar.collapsed .sidebar-menu-item.selected .sidebar-menu-item-inner { padding-left: 0; gap: 0; }
.sidebar.collapsed .sidebar-menu-item-inner { padding: 0; justify-content: center; gap: 0; }
.sidebar.collapsed .sidebar-menu-icon-wrapper { background-color: transparent; padding: 0; }
.sidebar.collapsed .sidebar-menu-text,
.sidebar.collapsed .sidebar-menu-chevron,
.sidebar.collapsed .sidebar-submenu,
.sidebar.collapsed .sidebar-submenu-group,
.sidebar.collapsed .sidebar-third-level,
.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed .sidebar-action-text,
.sidebar.collapsed .sidebar-contact-text,
.sidebar.collapsed .sidebar-footer-text { display: none; }
.sidebar.collapsed .sidebar-menu-group.open .sidebar-menu-group-container { background-color: transparent; border-radius: 0; padding: 0; }
.sidebar.collapsed .sidebar-menu-group .sidebar-menu-item { padding: 16px; }
.sidebar.collapsed .sidebar-nav { gap: 12px; }
.sidebar.collapsed .sidebar-user-section,
.sidebar.collapsed .sidebar-contact-section,
.sidebar.collapsed .sidebar-footer { width: auto; }
.sidebar.collapsed .sidebar-user-info-wrapper { padding: 12px 8px; display: flex; justify-content: center; }
.sidebar.collapsed .sidebar-user-info-compact { padding: 6px; gap: 0; }
.sidebar.collapsed .sidebar-user-action,
.sidebar.collapsed .sidebar-contact-item { justify-content: center; padding: 12px 16px; }
.sidebar.collapsed .sidebar-contact-item-wrapper { padding: 0 10px; }
.sidebar.collapsed .sidebar-divider { margin-bottom: 12px; }
.sidebar.collapsed .sidebar-contact-info { padding: 12px 0; gap: 12px; }

/* --- Mobilná hlavička sidebaru + overlay --- */
.sidebar-mobile-header { display: none; }
.sidebar-mobile-logo { display: flex; align-items: center; padding: 10px 16px; }
.sidebar-mobile-logo-img { width: 109px; height: 16px; }
.sidebar-mobile-close {
  display: flex; justify-content: center; align-items: center;
  width: 44px; height: 44px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 3px solid var(--sidebar-bg);
  border-radius: 23px;
  cursor: pointer;
  padding: 8px 9px 8px 7px;
}
.sidebar-mobile-close-icon { width: 24px; height: 24px; }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background-color: rgba(11, 20, 97, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: var(--z-mobile-overlay);
}
.sidebar-overlay.active { display: block; }

/* ============ 5. QUICK NAVIGATION (breadcrumbs + titulok + dlaždice) ============ */
.quick-nav { display: flex; flex-direction: column; align-self: stretch; gap: 48px; width: 100%; }
.quick-nav-header { display: flex; flex-direction: column; gap: 24px; padding-left: 20px; }
.quick-nav-breadcrumbs { display: flex; align-items: center; gap: 10px; padding-right: 10px; }
.breadcrumb-list { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.breadcrumb-item { display: flex; align-items: center; gap: 8px; }
.breadcrumb-separator { display: flex; align-items: center; justify-content: center; }
.breadcrumb-chevron { width: 18px; height: 18px; }
.breadcrumb-link { font-family: var(--font-primary); font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; text-decoration: none; transition: color 0.2s ease; }
.breadcrumb-link-parent { font-weight: 700; color: var(--text-color-60); }
.breadcrumb-link-parent:hover { color: var(--text-color); }
.breadcrumb-link-current { font-weight: 400; color: var(--text-color-80); }

.quick-nav-title { font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-page-title); line-height: 1.5; color: var(--text-color); margin: 0; }

.quick-nav-buttons { display: flex; flex-direction: row; align-items: center; align-self: stretch; gap: 12px; }
.quick-nav-tile {
  display: flex; flex-direction: column; justify-content: center;
  align-self: stretch; flex: 1;
  padding: 8px 24px 8px 8px;
  background-color: var(--light-blue-bg);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color 0.2s ease, border-radius 0.2s ease;
  border-bottom: 3px solid transparent;
}
.quick-nav-tile:hover { background-color: var(--light-blue-bg-active); border-radius: 12px 12px 0 0; }
.quick-nav-tile.active { background-color: var(--light-blue-bg-active); border-radius: 12px 12px 0 0; border-bottom: 3px solid var(--primary-color); }
.quick-nav-tile-content { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.quick-nav-tile-icon-wrapper {
  display: flex; justify-content: center; align-items: center;
  width: 40px; height: 40px;
  background-color: var(--white-70);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.quick-nav-tile.active .quick-nav-tile-icon-wrapper { background-color: var(--primary-color-10); }
.quick-nav-tile-icon { width: 24px; height: 24px; }
.quick-nav-tile-text { font-family: var(--font-primary); font-weight: 700; font-size: 15px; line-height: 1.4; letter-spacing: -0.01em; color: var(--primary-color); }

/* ============ 6. KARTY ============ */
/* Univerzálna biela karta (el-box) */
.el-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-desktop);
  padding: 24px;
  width: 100%;
}
.el-box .el-box-inner { display: flex; flex-direction: column; gap: 16px; height: 100%; justify-content: space-between; }
.el-box .el-box-header { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.el-box .el-box-title-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.el-box .el-box-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.el-box .el-box-indicator-red { background-color: var(--secondary-color); }
.el-box .el-box-icon-wrapper {
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  background-color: var(--warning-icon-bg);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.el-box .el-box-icon { width: 24px; height: 24px; }
.el-box .el-box-title { font-family: var(--font-primary); font-weight: 700; font-size: 16px; line-height: 1.625em; color: var(--gray-600); margin: 0; }
.el-box .el-box-title-info { font-weight: 400; margin-left: 10px; }
.el-box .el-box-title-info::before { content: "•"; margin-right: 4px; }
.el-box .el-box-divider { width: 100%; height: 1px; background-color: var(--text-color-10); }
.el-box .el-box-content { display: flex; flex-direction: column; gap: 24px; height: 100%; }
.el-box .el-box-footer { display: flex; flex-wrap: wrap; gap: 8px; }
.el-box .el-box-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 24px; width: 100%; }
.el-box .el-box-actions.el-box-actions-centered { justify-content: center; align-items: center; }
.el-box .el-box-text { font-family: var(--font-primary); font-weight: 400; font-size: 15px; line-height: 1.73; color: var(--Text-Secondary-80); margin: 0; }
.el-box .data-grid-row { display: flex; flex-direction: row; gap: 24px; }

/* Zlepené karty v jednom rade (glued boxes) */
.section-glued-boxes .el-box { box-shadow: none; border-right: 1px solid var(--gray-100); border-radius: 0; margin: 24px 0; padding: 0 12px 0; }
.section-glued-boxes .el-box:first-child { border-radius: 24px 0 0 24px; padding-left: 24px; }
.section-glued-boxes .el-box:last-child { border-right: none; border-radius: 0 24px 24px 0; padding-right: 24px; }

/* Titulok karty/sekcie s akčným tlačidlom (napr. XLSX report) */
.box-section { display: flex; gap: 16px; flex-direction: column; }
.box-section .section-header { display: flex; flex-direction: column; gap: 16px; }
.box-section .section-header-title-frame { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; padding-left: 12px; }
.box-section .section-header-title { font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.56em; color: var(--primary-color); margin: 0; }
.box-section .section-content { display: flex; flex-direction: row; gap: 16px; }
.table-action-button {
  display: flex; flex-direction: column; gap: 10px;
  padding: 6px 10px;
  background-color: var(--gray-100);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.table-action-button:hover { background-color: #E5E5EB; }
.action-button-content { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.action-button-text { font-family: var(--font-primary); font-weight: 700; font-size: 12px; line-height: 1em; color: var(--text-color); }
.action-button-icon { width: 16px; height: 16px; }

/* Data card – farebná dlaždica s hodnotou (Získané/Potenciál…) */
.data-card { display: flex; flex: 1; }
.data-card.bg-orange { background-color: var(--warning-bg); }
.data-card.bg-green { background-color: var(--success-bg); }
.data-card.bg-grey { background-color: var(--gray-100); }
.data-card-inner { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.data-card-inner .el-box-header .el-box-title { font-size: 14px; }
.data-card-inner .data-card-content {
  font-family: var(--font-primary);
  font-weight: 400; font-size: 20px; line-height: 1.4em;
  color: var(--primary-color);
  flex: 1; display: flex; gap: 8px; width: 100%;
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  flex-direction: column;
}
.data-card-inner .data-card-content.bg-orange { background-color: var(--warning-bg); }
.data-card-inner .data-card-content.bg-green { background-color: var(--success-bg); }
.data-card-inner .data-card-content.bg-grey { background-color: var(--gray-100); }
.data-card-inner .data-card-content.bg-blue { background-color: var(--info-bg-light); }

/* Info banner (success | basic) */
.info-banner { background: var(--success-bg); border: 2px solid var(--primary-color-05); border-radius: var(--radius-lg); padding: 20px; }
.info-banner-content { display: flex; gap: 20px; align-items: flex-start; }
.info-banner-text-wrapper { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.info-banner-icon-wrapper { border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-banner-icon { width: 20px; height: 20px; }
.info-banner-title { font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.56em; margin: 0; }
.info-banner-description { font-family: var(--font-primary); font-weight: 400; font-size: 16px; line-height: 1.625em; }
.info-banner-description p { margin: 0 0 8px 0; }
.info-banner-description p:last-child { margin-bottom: 0; }
.info-banner-link { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 1.43em; display: inline-block; text-decoration: underline; }
.info-banner.info-banner-success .info-banner-title,
.info-banner.info-banner-success .info-banner-description,
.info-banner.info-banner-success .info-banner-link { color: var(--success-text-dark); }
.info-banner.info-banner-success .info-banner-link:hover { color: var(--success-text); }
.info-banner.info-banner-basic { background: var(--info-bg-light); }
.info-banner.info-banner-basic .info-banner-title,
.info-banner.info-banner-basic .info-banner-description,
.info-banner.info-banner-basic .info-banner-link { color: var(--info-text-dark); }
.info-banner.info-banner-basic .info-banner-link:hover { color: var(--primary-color); }

/* ============ 7. TLAČIDLÁ (kanonická sada) ============ */
/* Odvodené z portálu: pill radius 28, Inter 500, 15–16px.
   Výšky: L=48px (auth/CTA), M=36–40px (bežné), S=30px (v tabuľkách). */
.btn-vl {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-secondary);
  font-weight: 500; font-size: 15px; line-height: 1.33;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-control);
  white-space: nowrap;
}
.btn-vl:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--danger-tint-20); }
.btn-vl-lg { height: 48px; padding: 12px 24px; font-size: 16px; line-height: 1.5; width: 100%; }
.btn-vl-sm { padding: 6px 12px; font-size: 12px; line-height: 1.5em; font-family: var(--font-primary); font-weight: 400; }

/* Primárne – plná červená; hover tmavšia + zdvih o 1px */
.btn-vl-primary { background-color: var(--secondary-color); color: var(--white); border-color: var(--secondary-color); }
.btn-vl-primary:hover { background-color: var(--secondary-color-hover); border-color: var(--secondary-color-hover); color: var(--white); transform: translateY(-1px); }
.btn-vl-primary:active { transform: translateY(0); }
.btn-vl-primary:disabled { background-color: var(--text-color-20); border-color: var(--text-color-20); color: var(--text-color-60); transform: none; }

/* Outline – červený obrys; hover plná červená */
.btn-vl-outline { background-color: transparent; color: var(--secondary-color); border-color: var(--danger-tint-40); }
.btn-vl-outline:hover { background-color: var(--secondary-color); color: var(--white); border-color: var(--secondary-color); }

/* Sekundárne – šedý obrys, tmavomodrý text */
.btn-vl-secondary { background-color: transparent; color: var(--Text-Secondary-80); border-color: var(--text-color-20); }
.btn-vl-secondary:hover { background-color: var(--text-color-10); border-color: var(--text-color-30); color: var(--Text-Secondary-80); }

/* Outline navy – v tabuľkách */
.btn-vl-outline-navy { background-color: transparent; color: var(--primary-color); border-color: #686D9C; }
.btn-vl-outline-navy:hover { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); }

/* Success */
.btn-vl-success { background-color: var(--success-btn); color: var(--white); border-color: var(--success-btn); }
.btn-vl-success:hover { background-color: var(--success-btn-hover); border-color: var(--success-btn-hover); color: var(--white); }

/* Danger soft – deštruktívne akcie */
.btn-vl-danger-soft { background-color: var(--danger-soft-bg); color: var(--danger-soft-text); border-color: transparent; font-family: var(--font-primary); font-weight: 600; font-size: 14px; }
.btn-vl-danger-soft:hover { background-color: var(--danger-soft-bg-hover); }

/* Textové tlačidlo – červený text bez rámu */
.btn-vl-text { background-color: transparent; color: var(--secondary-color); border: none; padding: 8px 0; }
.btn-vl-text:hover { color: var(--primary-color); text-decoration: underline; }

/* ============ 8. FORMULÁRE ============ */
.auth-label, .form-label-vl { font-family: var(--font-secondary); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--text-color); }
.auth-input, .form-input-vl {
  width: 100%; height: 48px;
  padding: 12px 16px;
  font-family: var(--font-secondary); font-weight: 400; font-size: 15px; line-height: 1.6;
  color: var(--text-color);
  background-color: var(--white);
  border: 1px solid var(--text-color-30);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-input::placeholder, .form-input-vl::placeholder { color: var(--text-color-30); }
.auth-input:hover:not(:focus), .form-input-vl:hover:not(:focus) { border-color: var(--text-color-60); }
.auth-input:focus, .form-input-vl:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-color-10); }
.auth-select {
  height: 48px; padding: 0 16px;
  font-family: var(--font-secondary); font-weight: 400; font-size: 15px; line-height: 1.6;
  color: var(--text-color);
  background-color: var(--white);
  border: 1px solid var(--text-color-30);
  border-radius: var(--radius-md);
  outline: none; appearance: auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-color-10); }
.auth-radio, .auth-checkbox { width: 18px; height: 18px; accent-color: var(--secondary-color); }

/* Chybové/úspechové hlášky */
.auth-error {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background-color: var(--danger-tint-08);
  border: 1px solid var(--danger-tint-20);
  border-radius: var(--radius-sm);
  font-family: var(--font-secondary); font-size: 14px; line-height: 1.4;
  color: var(--secondary-color);
}
.auth-msg-success {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background-color: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-secondary); font-size: 14px; line-height: 1.4;
  color: #0D7A55;
}
.auth-error[hidden], .auth-msg-success[hidden] { display: none; }
.auth-field-error { display: none; font-family: var(--font-secondary); font-size: 12px; color: var(--secondary-color); margin-top: 4px; }
.was-validated .auth-input:invalid ~ .auth-field-error,
.was-validated .auth-select:invalid ~ .auth-field-error { display: block; }

/* ============ 9. CUSTOM DROPDOWN (select s vyhľadávaním) ============ */
.custom-dropdown { position: relative; width: 100%; max-width: 375px; font-family: var(--font-primary); }
.custom-dropdown .custom-dropdown-select { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; }
.custom-dropdown .custom-dropdown-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 16px;
  background: var(--white);
  border: 1px solid var(--primary-color-10);
  border-radius: var(--radius-input-pill);
  cursor: pointer;
  transition: var(--transition-control);
  min-height: 44px;
}
.custom-dropdown .custom-dropdown-trigger:hover { background: var(--info-bg-light); border-color: rgba(11, 20, 97, 0.15); }
.custom-dropdown .custom-dropdown-text { flex: 1; font-size: 15px; font-weight: 400; line-height: 1.67; color: var(--primary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-dropdown .custom-dropdown-chevron { flex-shrink: 0; width: 20px; height: 20px; color: var(--primary-color); transition: transform 0.2s ease; }
.custom-dropdown .custom-dropdown-menu {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--white);
  border: 2px solid var(--info-border-strong);
  border-radius: var(--radius-lg);
  padding: 0; max-height: 0; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: var(--transition-layout);
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-dropdown-blue);
  display: flex; flex-direction: column;
}
.custom-dropdown.is-open .custom-dropdown-trigger { opacity: 0; visibility: hidden; pointer-events: none; }
.custom-dropdown.is-open .custom-dropdown-menu { max-height: 416px; opacity: 1; visibility: visible; }
.custom-dropdown .custom-dropdown-trigger-bottom { padding: 16px 16px 0 20px; background: transparent; border-radius: 16px 16px 0 0; flex-shrink: 0; }
.custom-dropdown:not(.is-open) .custom-dropdown-trigger-bottom { display: none; }
.custom-dropdown .custom-dropdown-trigger-content { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--gray-100); }
.custom-dropdown .custom-dropdown-text-bottom { font-family: var(--font-primary); font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: -0.02em; color: var(--text-color); }
.custom-dropdown .custom-dropdown-chevron-bottom { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.3s ease; }
.custom-dropdown .custom-dropdown-search { padding: 4px 16px; flex-shrink: 0; }
.custom-dropdown .custom-dropdown-search-wrapper { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 48px; }
.custom-dropdown .custom-dropdown-search-wrapper input { flex: 1; border: none; background: transparent; outline: none; font-family: var(--font-primary); font-size: 14px; color: var(--text-color); padding: 0; }
.custom-dropdown .custom-dropdown-search-wrapper input::placeholder { color: var(--gray-500); }
.custom-dropdown .custom-dropdown-items-wrapper { position: relative; flex: 1; overflow: hidden; max-height: 348px; }
.custom-dropdown .custom-dropdown-items { padding: 4px 0 16px 0; max-height: 348px; overflow-y: auto; overflow-x: hidden; }
.custom-dropdown .custom-dropdown-items::-webkit-scrollbar { width: 6px; }
.custom-dropdown .custom-dropdown-items::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.custom-dropdown .custom-dropdown-items::-webkit-scrollbar-thumb { background: var(--gray-500); border-radius: 3px; }
.custom-dropdown .custom-dropdown-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none; z-index: 1;
}
.custom-dropdown .custom-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 8px 20px; cursor: pointer; transition: background-color 0.2s ease; }
.custom-dropdown .custom-dropdown-item.hidden { display: none; }
.custom-dropdown .custom-dropdown-item-text { flex: 1; font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--gray-500); }
.custom-dropdown .custom-dropdown-item:hover:not(.selected) { background: var(--info-bg-light); }
.custom-dropdown .custom-dropdown-item:hover:not(.selected) .custom-dropdown-item-text { color: var(--gray-600); }
.custom-dropdown .custom-dropdown-item.selected { background: rgba(121, 213, 255, 0.15); }
.custom-dropdown .custom-dropdown-check { flex-shrink: 0; width: 24px; height: 24px; background: var(--info-bg); border-radius: 48px; display: flex; align-items: center; justify-content: center; padding: 4px; }

/* ============ 10. PROGRESS BAR ============ */
.el-progress-bar { display: flex; flex-direction: column; gap: 10px; }
.el-progress-bar .el-progress-bar-bar-wrapper { display: flex; align-items: center; gap: 16px; width: 100%; }
.el-progress-bar .el-progress-bar-bar {
  flex: 1; height: 10px;
  background: var(--gray-50);
  border: 0.5px solid var(--text-color-20);
  border-radius: 6px;
  position: relative; overflow: hidden;
}
.el-progress-bar .el-progress-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 6px; transition: width 0.3s ease; }
.el-progress-bar .el-progress-bar-text { font-family: var(--font-primary); font-weight: 700; font-size: 14px; line-height: 1em; white-space: nowrap; }
.el-progress-bar .el-progress-bar-text.text-green { color: var(--success-text); }
.el-progress-bar .el-progress-bar-text.text-dark { color: var(--primary-color); }
.el-progress-bar.progress-orange .el-progress-bar-fill { background-color: var(--warning-fill); }
.el-progress-bar.progress-green .el-progress-bar-fill { background-color: var(--success-fill); }
.el-progress-bar.progress-blue .el-progress-bar-fill { background-color: var(--info-fill); }

/* ============ 11. BADGE / PILL ============ */
.x-table-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 54px;
  background-color: var(--white);
  color: var(--Text-Secondary-80);
  text-align: center;
}
.x-table-badge-text { font-family: var(--font-primary); font-weight: 700; font-size: 12px; line-height: 1em; color: var(--text-color); white-space: nowrap; }
.x-table-badge-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.x-table-badge-default { border: 1px solid rgba(150, 150, 150, 0.3); }
.x-table-badge-positive { border: 1px solid rgba(150, 225, 184, 0.3); }
.x-table-badge-positive .x-table-badge-dot { background-color: var(--success-fill); }
.x-table-badge-warning { border: 1px solid rgba(255, 193, 7, 0.3); }
.x-table-badge-warning .x-table-badge-dot { background-color: var(--warning-dot); }
.x-table-badge-info { border: 1px solid rgba(145, 221, 255, 0.3); }
.x-table-badge-info .x-table-badge-dot { background-color: var(--light-blue); }
.x-table-badge-completed { border: 1px solid var(--success-border); }
.x-table-badge-completed .x-table-badge-text { color: var(--success-text); }
.x-table-badge-blue { border: 1px solid var(--info-fill); background-color: rgba(145, 221, 255, 0.3); }

/* Trend pill (napr. +12 %) */
.x-table-trend { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 8px; border-radius: 30px; min-width: 108px; }
.x-table-trend-positive { background-color: rgba(73, 144, 71, 0.1); border: 1px solid rgba(150, 225, 184, 0.3); }
.x-table-trend-progress { background-color: rgba(121, 213, 255, 0.1); border: 1px solid rgba(145, 221, 255, 0.3); }
.x-table-trend-icon { width: 12px; height: 12px; }
.x-table-trend-value, .x-table-trend-suffix { font-family: var(--font-primary); font-weight: 700; font-size: 14px; line-height: 1.43em; }
.x-table-trend-positive .x-table-trend-value, .x-table-trend-positive .x-table-trend-suffix { color: var(--success-text); }
.x-table-trend-progress .x-table-trend-value, .x-table-trend-progress .x-table-trend-suffix { color: var(--blue-accent); }

/* Notifikačný badge (počet v tabe) */
.x-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-family: var(--font-primary); font-weight: 700; font-size: 11px; line-height: 1em;
  color: var(--white);
  background-color: var(--secondary-color);
  border-radius: 10px;
}

/* ============ 12. TABUĽKA (x-table) ============ */
.x-table-wrapper {
  display: flex; flex-direction: column; width: 100%;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-desktop);
  overflow: hidden;
}
.x-table-responsive { overflow-x: auto; }
.x-table { width: 100%; border-collapse: collapse; font-family: var(--font-primary); }
.x-table-header { background-color: var(--gray-50); }
.x-table-header.x-table-header-blue { background-color: var(--info-bg); }
.x-table-header-row { border-bottom: 1px solid var(--gray-300); }
.x-table-header-blue .x-table-header-row, .x-table-header-blue .x-table-header-cell { border-bottom: 1px solid var(--info-fill); }
.x-table-header-cell {
  padding: 12px 16px;
  font-family: var(--font-primary); font-weight: 700; font-size: 12px; line-height: 18px;
  color: var(--Text-Secondary-80);
  text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--gray-100);
}
.x-table-sort-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0;
  font: inherit; color: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}
.x-table-sort-btn:hover { color: var(--primary-color); }
.x-table-sort-icon { width: 16px; height: 16px; transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease; opacity: 0.35; filter: grayscale(1); }
.x-table-sort-btn:hover .x-table-sort-icon { opacity: 0.6; }
.x-table-sort-btn.sorted-asc .x-table-sort-icon, .x-table-sort-btn.sorted-desc .x-table-sort-icon { opacity: 1; filter: none; }
.x-table-sort-btn.sorted-asc .x-table-sort-icon { transform: rotate(180deg); }
.x-table-body { background-color: var(--white); }
.x-table-row { border-bottom: 1px solid var(--gray-100); transition: background-color 0.2s ease; }
.x-table-row.bg-green { background-color: var(--success-bg); border-bottom: 1px solid var(--success-border); }
.x-table-row.bg-green td { border-bottom: 1px solid var(--success-border); }
.x-table-striped .x-table-row:nth-child(even) { background-color: rgba(247, 247, 249, 0.3); }
.x-table-hover .x-table-row:hover { background-color: rgba(121, 213, 255, 0.08); }
.x-table-cell {
  padding: 16px;
  font-family: var(--font-primary); font-size: 14px; line-height: 1.43em;
  color: var(--primary-color);
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-100);
}
.x-table-footer .x-table-row.x-table-footer-row-grey { background-color: var(--gray-50); }
.x-table-footer .x-table-row.x-table-footer-row-blue { background-color: var(--info-bg); }
.x-table-align-left { text-align: left; }
.x-table-align-center { text-align: center; }
.x-table-align-right { text-align: right; }
.x-table-empty-state { padding: 40px 20px; text-align: center; font-family: var(--font-primary); font-size: 14px; color: var(--text-color-60); }

/* Bunkové typy */
.x-table-logo { display: flex; align-items: center; justify-content: left; white-space: nowrap; }
.x-table-logo-img { width: 57px; object-fit: contain; border-radius: 6px; border: 1px solid var(--gray-100); background-color: var(--white); }
.x-table-number { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.x-table-progress-wrapper { display: flex; align-items: center; gap: 12px; padding: 2px 8px; }
.x-table-progress-bar-container { flex: 1; height: 12px; background-color: rgba(30, 58, 95, 0.05); border: 1px solid rgba(145, 221, 255, 0.3); border-radius: 30px; overflow: hidden; }
.x-table-progress-bar { height: 100%; background-color: var(--light-blue); border-radius: 30px; transition: width 0.3s ease; }
.x-table-progress-text { font-family: var(--font-primary); font-weight: 700; font-size: 14px; color: var(--primary-color); min-width: 45px; text-align: right; }
.x-table-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Tlačidlá v bunkách = .btn-vl.btn-vl-sm.btn-vl-outline alebo .btn-vl-outline-navy */

/* Mini-utility (portál ich berie z Bootstrapu; tu pre samostatnosť kitu) */
.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.fw-bold { font-weight: 700; }

/* Číselný input so spinnermi (editovateľná bunka) */
.x-table-number-input-wrapper { display: flex; align-items: center; justify-content: center; gap: 4px; position: relative; }
.x-table-number-input {
  width: 74px; height: 40px;
  padding: 8px 12px;
  font-family: var(--font-primary); font-size: 14px; text-align: center;
  color: var(--primary-color);
  background-color: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  transition: var(--transition-control);
  -moz-appearance: textfield;
}
.x-table-number-input::-webkit-outer-spin-button, .x-table-number-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.x-table-number-input:hover { border-color: var(--gray-500); }
.x-table-number-input:focus { outline: none; border-color: var(--gray-500); box-shadow: 0 0 0 4px rgba(104, 109, 156, 0.35); }
.x-table-number-input:disabled { background-color: var(--gray-100); color: var(--gray-400); border-color: var(--gray-300); cursor: not-allowed; }
.x-table-number-controls { display: flex; flex-direction: column; position: absolute; right: 5px; top: 1px; height: 38px; }
.x-table-number-btn {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  font-family: var(--font-primary); font-size: 14px; font-weight: 500; line-height: 1;
  color: var(--primary-color);
  background-color: var(--gray-100);
  border: none; cursor: pointer; user-select: none;
  opacity: 0.6;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.x-table-number-btn.x-table-number-btn-up { border-radius: 0 8px 0 0; }
.x-table-number-btn.x-table-number-btn-down { border-radius: 0 0 8px 0; }
.x-table-number-btn:hover { opacity: 1; background-color: var(--primary-color-08); }

/* ============ 13. TABY (x-tabs) ============ */
.x-tabs-wrapper { display: flex; flex-direction: column; width: 100%; }
.x-tabs-header { display: flex; align-items: stretch; gap: 16px; width: 100%; }
.x-tabs-nav {
  display: flex; align-items: center; gap: 8px;
  background-color: var(--white);
  border-bottom: 1px solid var(--primary-color-05);
  box-shadow: 0px 2px 3px -3px rgba(11, 20, 97, 0.05);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  flex: 1; min-width: 0;
}
.x-tabs-nav::-webkit-scrollbar { height: 4px; }
.x-tabs-nav::-webkit-scrollbar-thumb { background: var(--primary-color-10); border-radius: 2px; }
.x-tabs-nav-center { justify-content: center; }
.x-tabs-nav-right { justify-content: flex-end; }
.x-tabs-nav-full .x-tab-item { flex: 1; justify-content: center; }
.x-tab-item {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 12px;
  font-family: var(--font-primary); font-weight: 400; font-size: 15px; line-height: 1.67em;
  color: var(--Text-Secondary-80);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: var(--transition-control);
  cursor: pointer; position: relative;
}
.x-tab-item:hover:not(.x-tab-disabled) { color: var(--primary-color); background-color: rgba(11, 20, 97, 0.02); }
.x-tab-active { font-weight: 700; color: var(--primary-color); border-bottom-color: var(--secondary-color); }
.x-tab-active:hover { background-color: transparent; }
.x-tab-disabled { color: rgba(60, 67, 129, 0.4); cursor: not-allowed; pointer-events: none; }
.x-tab-icon { width: 20px; height: 20px; flex-shrink: 0; }
.x-tabs-content, .x-tabs-panels { padding: 24px 0; }
.x-tab-panel { display: none; animation: fadeIn 0.2s ease-in-out; }
.x-tab-panel.x-tab-panel-active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Variant: pills */
.x-tabs-pills { gap: 4px; background-color: transparent; border-bottom: none; box-shadow: none; }
.x-tabs-pills .x-tab-item { padding: 10px 16px; border-radius: 20px; border-bottom: none; background-color: var(--primary-color-05); }
.x-tabs-pills .x-tab-item:hover:not(.x-tab-disabled) { background-color: var(--primary-color-10); }
.x-tabs-pills .x-tab-active { background-color: var(--primary-color); color: var(--white); }
/* Variant: underline (hrubší 3px) */
.x-tabs-underline { background-color: transparent; border-bottom: 1px solid var(--primary-color-10); box-shadow: none; }
.x-tabs-underline .x-tab-item { padding: 12px 16px; border-bottom-width: 3px; }
.x-tabs-underline .x-tab-item:hover:not(.x-tab-disabled) { background-color: transparent; border-bottom-color: rgba(190, 0, 5, 0.3); }
.x-tabs-underline .x-tab-active { border-bottom-color: var(--secondary-color); }

/* ============ 14. MODÁL ============ */
/* Kompatibilné s Bootstrap 5 modálom; funguje aj standalone s portal-ui.js */
.modal-backdrop { background-color: rgba(11, 20, 97, 0.4); }
.modal-backdrop.show { opacity: 1; }
.modal-content {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  border: none;
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--text-color-10); padding: 24px 32px; background: var(--white); display: flex; align-items: center; justify-content: space-between; }
.modal-header .modal-title { font-family: var(--font-primary); font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--Text-Secondary-80); margin: 0; }
.modal-header .btn-close { width: 32px; height: 32px; padding: 0; margin: 0; border: none; border-radius: var(--radius-sm); opacity: 1; cursor: pointer; background: transparent; transition: var(--transition-control); }
.modal-header .btn-close:hover { background-color: var(--text-color-10); }
.modal-header .btn-close:focus { box-shadow: 0 0 0 3px var(--primary-color-10); outline: none; }
.modal-body { padding: 32px; background: var(--white); color: var(--text-color); font-family: var(--font-primary); font-size: 15px; line-height: 1.73; }
.modal-body p { margin: 0 0 16px; color: var(--text-color-80); }
.modal-body p:last-child { margin-bottom: 0; }
.modal-footer { border-top: 1px solid var(--text-color-10); padding: 20px 32px; background: var(--white); gap: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; }

/* Standalone modál bez Bootstrapu (helper kitu; otváranie rieši portal-ui.js) */
.vl-modal {
  display: none;
  position: fixed; inset: 0;
  background-color: rgba(11, 20, 97, 0.4);
  z-index: 1050;
  align-items: flex-start; justify-content: center;
  overflow-y: auto;
  padding: 1.75rem 16px;
}
.vl-modal.vl-modal-open { display: flex; }
.vl-modal .modal-content { max-width: 500px; width: 100%; margin: auto; }
.vl-modal .modal-content.modal-lg { max-width: 800px; }

/* ============ 15. AUTH / LOGIN ============ */
.auth-app, .public-container {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
  background: linear-gradient(180deg, #E9F7FF 0%, #FFFFFF 100%);
}
.auth-card {
  width: 100%; max-width: 440px;
  background-color: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-desktop);
  overflow: hidden;
}
.auth-card-wide { max-width: 640px; }
.auth-card-inner { display: flex; flex-direction: column; gap: 32px; padding: 40px; }
.auth-card-header { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.auth-icon-wrapper { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background-color: var(--secondary-color); border-radius: 50%; }
.auth-icon-img { width: 32px; height: 32px; filter: brightness(0) invert(1); }
.auth-icon-warning { background-color: var(--danger-soft-bg); }
.auth-title { font-family: var(--font-primary); font-weight: 700; font-size: 24px; line-height: 1.3; color: var(--primary-color); margin: 0; }
.auth-subtitle { font-family: var(--font-secondary); font-size: 16px; line-height: 1.5; color: var(--text-color-60); margin: 0; }
.auth-description { font-family: var(--font-secondary); font-size: 15px; line-height: 1.6; color: var(--text-color-80); }
.auth-description p { margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-input-group { display: flex; flex-direction: column; padding-bottom: 16px; }
.auth-input-wrapper { position: relative; }
.auth-input-row { display: flex; gap: 16px; padding-bottom: 16px; }
.auth-input-row .auth-input-group { flex: 1; }
.auth-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.auth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  padding: 12px 24px;
  font-family: var(--font-secondary); font-weight: 500; font-size: 16px; line-height: 1.5;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: var(--transition-control);
  cursor: pointer;
}
.auth-btn-primary { background-color: var(--secondary-color); color: var(--white); border: none; }
.auth-btn-primary:hover { background-color: var(--secondary-color-hover); color: var(--white); transform: translateY(-1px); }
.auth-btn-primary:active { transform: translateY(0); }
.auth-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.auth-link { font-family: var(--font-secondary); font-size: 14px; line-height: 1.4; color: var(--primary-color); text-decoration: none; transition: color 0.2s ease; }
.auth-link:hover { color: var(--secondary-color); text-decoration: underline; }
.auth-link-separator { color: var(--text-color-30); }

/* Výber používateľa (krok viacfázového loginu) */
.auth-users-list { display: flex; flex-direction: column; gap: 12px; }
.auth-user-item { display: flex; flex-direction: column; gap: 16px; padding: 16px; background-color: var(--bg-gray); border-radius: var(--radius-md); border: 2px solid transparent; transition: var(--transition-control); }
.auth-user-item:hover { background-color: var(--sidebar-bg); }
.auth-user-item-selected { background-color: var(--sidebar-bg); border-color: var(--light-blue); }
.auth-user-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.auth-user-icon-wrapper { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--primary-color-08); border-radius: 50%; flex-shrink: 0; }
.auth-user-name { font-family: var(--font-primary); font-weight: 500; font-size: 15px; color: var(--primary-color); }

/* ============ 16. FOOTER ============ */
.footer {
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: var(--footer-height);
  background-color: var(--primary-color);
}
.footer-text { font-family: var(--font-secondary); font-weight: 400; font-size: 14px; line-height: 1.43; letter-spacing: -0.01em; text-align: center; color: var(--white); }

/* ============ 17. RESPONSIVE ============ */
/* Breakpointy: 1399 (XL), 1271 (glued), 991 (tablet), 767 (mobil), 575 (malý mobil) */

@media (max-width: 1399px) {
  .quick-nav { gap: 32px; }
  .quick-nav-title { font-size: 32px; }
  .quick-nav-buttons { flex-wrap: wrap; }
  .quick-nav-tile { flex: 1 1 calc(33.333% - 8px); min-width: 150px; }
}

@media (max-width: 1271px) {
  .section-glued-boxes .el-box { border-right: none; border-bottom: 1px solid var(--gray-100); margin: 0; padding: 12px 0; }
  .section-glued-boxes .el-box:first-child { border-radius: 24px 24px 0 0; padding-left: 0; }
  .section-glued-boxes .el-box:last-child { border-bottom: none; border-radius: 0 0 24px 24px; padding-right: 0; }
  .section-glued-boxes { padding: 0 24px; }
}

/* --- TABLET: sidebar trvale zbalený, bez toggle tlačidla --- */
@media (max-width: 991px) {
  .page-container { padding: 24px 16px 0; }
  .content-area { gap: 16px; margin-top: 16px; }
  .main-content { padding: 0 0 24px; }
  .header-pharmacy-dropdown { width: 280px; }
  .header-user-name { display: none; }
  .header-user-btn { padding: 6px; }
  .header-user-name-wrapper { gap: 0; }

  .sidebar {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
    top: 16px;
    max-height: calc(100vh - 160px);
    padding: 32px 8px 8px;
  }
  .sidebar .sidebar-menu-container { width: auto; }
  .sidebar .sidebar-menu-item { padding: 16px; justify-content: center; gap: 0; }
  .sidebar .sidebar-menu-item.selected { padding: 16px 16px 16px 13px; }
  .sidebar .sidebar-menu-item-inner { padding: 0; justify-content: center; gap: 0; }
  .sidebar .sidebar-menu-icon-wrapper { background-color: transparent; padding: 0; }
  .sidebar .sidebar-menu-text, .sidebar .sidebar-menu-chevron,
  .sidebar .sidebar-submenu, .sidebar .sidebar-submenu-group,
  .sidebar .sidebar-third-level, .sidebar .sidebar-menu-group-container,
  .sidebar .sidebar-user-name, .sidebar .sidebar-action-text,
  .sidebar .sidebar-contact-text, .sidebar .sidebar-footer-text { display: none; }
  .sidebar .sidebar-menu-group { display: none; }
  .sidebar .sidebar-user-section, .sidebar .sidebar-contact-section, .sidebar .sidebar-footer { width: auto; }
  .sidebar .sidebar-user-info-wrapper { padding: 12px 8px; justify-content: center; }
  .sidebar .sidebar-user-info-compact { padding: 6px; gap: 0; }
  .sidebar .sidebar-user-action, .sidebar .sidebar-contact-item { justify-content: center; padding: 12px 16px; }
  .sidebar .sidebar-contact-item-wrapper { padding: 0 16px; }
  .sidebar .sidebar-contact-info { padding: 12px 0; gap: 12px; }
  .sidebar-toggle-btn { display: none; }

  .x-table-header-cell { padding: 10px 12px; font-size: 11px; }
  .x-table-cell { padding: 12px; font-size: 13px; }
  .x-tab-item { padding: 14px 10px; font-size: 14px; }
  .modal-header { padding: 20px 24px; }
  .modal-header .modal-title { font-size: 18px; }
  .modal-body { padding: 24px; }
  .modal-footer { padding: 16px 24px; }
  .el-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-mobile); padding: 20px; }
}

/* --- MOBIL: header pás + drawer sprava s overlayom --- */
@media (max-width: 767px) {
  .page-container { padding: 0; }
  .content-area { flex-direction: column; gap: 0; margin-top: 12px; }
  .main-content { padding: 0 0 16px; }
  .frame-200 { gap: 48px; padding: 12px 12px 42px; border-radius: var(--radius-lg); }

  /* Header sa zmení na plnofarebný pás */
  .header { border-radius: 0 0 24px 24px; gap: 0; }
  .header-main-frame { padding: 0 12px; min-height: 90px; background-color: #DDF4FF; }
  .header-content { flex-wrap: nowrap; gap: 16px; padding: 26px 0 0; align-items: center; }
  .header-logo { flex: 1; padding: 10px 16px; }
  .header-logo-img { width: 150px; height: 22px; }
  .header-pharmacy-info { flex-direction: row; gap: 10px; }
  .header-pharmacy-dropdown { display: none; }
  .header-user-settings { order: 1; }
  .header-user-btn { padding: 8px 4px; background-color: transparent; gap: 10px; }
  .header-user-btn:hover { background-color: var(--primary-color-05); }
  .header-user-icon-wrapper, .header-user-icon { width: 36px; height: 36px; }
  .header-user-name-wrapper, .header-user-chevron, .header-divider { display: none; }
  .mobile-menu-toggle { display: flex; order: 2; }
  /* Výber pobočky sa presunie pod header ako samostatný pill */
  .header-pharmacy-mobile { display: block; position: relative; padding: 16px 12px; }
  .header-mobile-separator { display: block; height: 1px; background-color: var(--text-color-20); margin: 0 12px; }

  /* Sidebar = drawer sprava */
  .sidebar {
    position: fixed;
    transform: translateX(100%);
    width: var(--sidebar-mobile-width);
    min-width: var(--sidebar-mobile-width);
    z-index: var(--z-mobile-drawer);
    transition: transform 0.3s ease;
    top: 0; right: 0; left: auto; bottom: 0;
    border-radius: 0;
    padding: 86px 12px 24px;
    max-height: 100vh; height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-mobile-header {
    display: flex; justify-content: space-between; align-items: center;
    position: absolute; top: 0; left: 0; right: 0;
    padding: 26px 12px 16px;
    background-color: var(--sidebar-bg);
    z-index: 10;
  }
  /* V otvorenom draweri sa všetko zobrazí naplno */
  .sidebar.mobile-open .sidebar-menu-container { width: 276px; }
  .sidebar.mobile-open .sidebar-menu-item { padding: 16px 24px 16px 22px; justify-content: flex-start; gap: 16px; }
  .sidebar.mobile-open .sidebar-menu-item.selected { padding: 16px 16px 16px 0; }
  .sidebar.mobile-open .sidebar-menu-item-inner { padding-left: 16px; gap: 9px; }
  .sidebar.mobile-open .sidebar-menu-icon-wrapper { background-color: var(--primary-color-08); padding: 6px; }
  .sidebar.mobile-open .sidebar-menu-text,
  .sidebar.mobile-open .sidebar-user-name,
  .sidebar.mobile-open .sidebar-action-text,
  .sidebar.mobile-open .sidebar-contact-text,
  .sidebar.mobile-open .sidebar-footer-text { display: block; }
  .sidebar.mobile-open .sidebar-menu-group { display: flex; }
  .sidebar.mobile-open .sidebar-menu-group-container { display: flex; }
  .sidebar.mobile-open .sidebar-menu-group .sidebar-menu-item .chevron-down { display: block; }
  .sidebar.mobile-open .sidebar-menu-group.open .sidebar-menu-item .chevron-up { display: block; }
  .sidebar.mobile-open .sidebar-menu-group.open .sidebar-menu-item .chevron-down { display: none; }
  .sidebar.mobile-open .sidebar-menu-group.open .sidebar-submenu { display: flex; }
  .sidebar.mobile-open .sidebar-submenu-group { display: flex; }
  .sidebar.mobile-open .sidebar-submenu-group.open .sidebar-third-level { display: flex; }
  .sidebar.mobile-open .sidebar-user-section,
  .sidebar.mobile-open .sidebar-contact-section,
  .sidebar.mobile-open .sidebar-footer { width: 276px; }

  .quick-nav { gap: 24px; padding: 0 12px; }
  .x-tabs-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .x-tab-item { padding: 12px 8px; font-size: 13px; gap: 6px; }
  .x-table-wrapper { border-radius: var(--radius-md); }
  .x-table-header-cell { padding: 8px 10px; font-size: 10px; }
  .x-table-cell { padding: 10px; font-size: 12px; }
  .x-table-buttons { flex-direction: column; align-items: stretch; }
  .modal-content { border-radius: var(--radius-lg); }
  .modal-header { padding: 16px 20px; }
  .modal-header .modal-title { font-size: 16px; }
  .modal-body { padding: 20px; font-size: 14px; }
  .modal-footer { padding: 16px 20px; gap: 8px; }
  .footer { padding: 0 20px; }
}