/* ============================================================
   VAŠA LEKÁREŇ PORTAL – DESIGN TOKENS (portal20)
   Extrahované z https://portal.vasalekaren.sk (2026-09-10)
   Zdroj: /buxus/assets/portal20/styles.css
   Univerzálne aplikovateľné na akýkoľvek dashboard.
   ============================================================ */
:root {
  /* ===== ZÁKLADNÉ FAREBNÉ TOKENY (originál portálu) ===== */
  --primary-color: #0B1461;            /* tmavá námornícka modrá – texty nadpisov, aktívne stavy */
  --primary-color-80: rgba(11, 20, 97, 0.8);
  --primary-color-10: rgba(11, 20, 97, 0.1);
  --primary-color-08: rgba(11, 20, 97, 0.08);
  --primary-color-05: rgba(11, 20, 97, 0.05);
  --secondary-color: #BE0005;          /* akčná červená – primárne CTA, aktívne indikátory */
  --secondary-color-hover: #A00004;    /* hover CTA (odvodené z portálu) */

  --white: #FFFFFF;
  --white-80: rgba(255, 255, 255, 0.8);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-60: rgba(255, 255, 255, 0.6);

  --text-color: #41445D;               /* základný text */
  --text-color-80: rgba(65, 68, 93, 0.8);
  --text-color-60: rgba(65, 68, 93, 0.6);
  --text-color-30: rgba(65, 68, 93, 0.3);
  --text-color-20: rgba(65, 68, 93, 0.2);
  --text-color-10: rgba(65, 68, 93, 0.1);
  --text-alt: #474B64;
  --Text-Secondary-80: #3C4381;        /* sekundárne nadpisy, hlavičky tabuliek (alias --text-secondary-80) */

  --blue-accent: #2C5AA0;              /* informačný modrý text (trendy) */
  --light-blue: #79D5FF;               /* svetlomodrý akcent */
  --light-blue-bg: rgba(121, 213, 255, 0.25);       /* dlaždice quick-nav */
  --light-blue-bg-active: rgba(121, 213, 255, 0.6); /* hover/aktívna dlaždica */

  --sidebar-bg: #E9F7FF;               /* pozadie sidebaru aj sekcií (frame-200) */
  --bg-gray: #EEF2F7;                  /* pozadie user chip-u v headri */
  --online-indicator: #48AD31;         /* zelená bodka online */
  --user-settings-bg: rgba(30, 58, 95, 0.06);
  --footer-text-color: rgba(30, 58, 95, 0.6);

  /* ===== ROZŠÍRENÁ SÉMANTICKÁ PALETA (z komponentov portálu) ===== */
  /* Success / zelená */
  --success-fill: #50CD89;             /* výplň progress baru */
  --success-bg: #EEFAF3;               /* pozadie data-card.bg-green, info-banner-success */
  --success-border: #96E1B8;           /* okraje success prvkov (badge, riadok tabuľky) */
  --success-text: #278752;             /* text trendu/badge */
  --success-text-dark: #1B5F3A;        /* text v info-banneri */
  --success-btn: #48AD31;              /* .btn-success */
  --success-btn-hover: #3A8C27;

  /* Warning / oranžová */
  --warning-fill: #FFBFA4;             /* výplň progress baru */
  --warning-bg: #FFF5F1;               /* pozadie data-card.bg-orange */
  --warning-dot: #FFC107;              /* bodka v badge */
  --warning-text: #853700;             /* hodnota v pätičke karty */
  --warning-icon-bg: rgba(255, 191, 164, 0.2); /* pozadie ikony el-box */

  /* Info / modrá */
  --info-fill: #91DDFF;                /* výplň progress baru, okraje info prvkov */
  --info-bg: #DAF4FF;                  /* modrá hlavička tabuľky, check v dropdowne */
  --info-bg-light: #F2FAFF;            /* info-banner-basic, hover dropdown item */
  --info-border-strong: #47C6FF;       /* okraj otvoreného custom dropdownu */
  --info-text-dark: #072C66;

  /* Danger / červená (soft varianty) */
  --danger-soft-bg: #FEE2E2;           /* .auth-btn-danger, warning ikona */
  --danger-soft-bg-hover: #FECACA;
  --danger-soft-text: #DC2626;
  --danger-hover-bg: #FEF2F2;          /* hover logout položky */
  --danger-tint-08: rgba(190, 0, 5, 0.08);  /* pozadie chybovej hlášky */
  --danger-tint-20: rgba(190, 0, 5, 0.2);   /* okraj chybovej hlášky, focus ring CTA */
  --danger-tint-40: rgba(190, 0, 5, 0.4);   /* okraj outline tlačidla */

  /* Neutrálna škála (od najsvetlejšej) */
  --gray-50: #F7F7F9;                  /* hlavička tabuľky, track progress baru */
  --gray-100: #F3F3F7;                 /* jemné oddeľovače, pozadie akčných tlačidiel */
  --gray-300: #CBCEDB;                 /* okraje inputov v tabuľkách */
  --gray-400: #9DA1C0;                 /* disabled text */
  --gray-500: #878BAB;                 /* muted text, scrollbar thumb */
  --gray-600: #686D9C;                 /* šedomodrý text, titulky el-box */
  --gray-700: #6B7280;                 /* pomocný šedý text (auth) */
  --gray-border: #E5E7EB;              /* oddeľovače sekcií formulárov */

  /* ===== TYPOGRAFIA ===== */
  /* Vasa Grotesk = firemný font (OTF, self-hosted; Regular 400 + Bold 700).
     Pri prenose na iný dashboard nahraď vlastným brand fontom alebo nechaj Inter. */
  --font-primary: 'Vasa Grotesk', 'Inter', sans-serif;   /* nadpisy, menu, hodnoty, tabuľky */
  --font-secondary: 'Inter', sans-serif;                  /* UI texty, tlačidlá, formuláre */

  /* Veľkostná škála (px) – používaná na portáli */
  --fs-page-title: 38px;      /* H1 stránky (mobil 32px) */
  --fs-banner-title: 36px;
  --fs-section-title: 24px;   /* nadpis sekcie dashboardu */
  --fs-card-value: 24px;      /* veľká číselná hodnota */
  --fs-modal-title: 20px;
  --fs-widget-title: 18px;    /* titulok karty/tabuľky */
  --fs-body-lg: 16px;
  --fs-body: 15px;            /* základ UI (menu, tlačidlá, taby) */
  --fs-body-sm: 14px;         /* bunky tabuliek, breadcrumbs, dropdown položky */
  --fs-caption: 12px;         /* hlavičky tabuliek (bold), badge, malé tlačidlá */
  --fs-badge: 11px;

  /* ===== SIDEBAR ROZMERY ===== */
  --sidebar-expanded-width: 268px;
  --sidebar-collapsed-width: 84px;
  --sidebar-mobile-width: 300px;       /* šírka mobilného drawera (sprava) */

  /* ===== ŠÍRKY OBSAHU PODĽA STAVU SIDEBARU (informatívne) ===== */
  --component-width-sidebar-expanded: 1040px;
  --component-width-sidebar-minimized: 1198px;

  /* ===== TIENE ===== */
  --shadow-desktop: 0px 4px 12px -3px rgba(11, 20, 97, 0.05);   /* karty */
  --shadow-mobile: 0px 0px 25px -3px rgba(11, 20, 97, 0.08);    /* karty na mobile */
  --shadow-card-active: 0px 2px 8px 0px rgba(11, 20, 97, 0.05); /* aktívna položka menu */
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.1);             /* header dropdowny */
  --shadow-dropdown-blue: 0px 6px 15px 0px rgba(11, 20, 97, 0.12); /* custom dropdown */
  --shadow-modal: 0px 20px 60px -10px rgba(11, 20, 97, 0.15);

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 8px;      /* malé prvky, dlaždicové ikony, akčné tlačidlá */
  --radius-md: 12px;     /* položky menu, inputy, dropdown menu, dlaždice */
  --radius-lg: 16px;     /* sidebar, header, tabuľkové karty, info-banner */
  --radius-xl: 24px;     /* veľké karty (el-box), modály, sekcie, auth karta */
  --radius-pill: 28px;   /* tlačidlá (CTA) */
  --radius-circle: 50px; /* user chip, kruhové prvky */
  --radius-input-pill: 38px; /* pill inputy (výber lekárne, custom dropdown trigger) */

  /* ===== LAYOUT ===== */
  --page-max-width: 1376px;
  --content-gap: 32px;             /* medzera sidebar ↔ obsah aj medzi sekciami */
  --footer-height: 52px;

  /* ===== MOTION ===== */
  --transition-layout: all 0.3s ease;     /* zbalenie sidebaru, drawer, submenu */
  --transition-control: all 0.2s ease;    /* hovery, tlačidlá, dropdowny */

  /* ===== Z-INDEX ŠKÁLA ===== */
  --z-sidebar: 100;
  --z-sidebar-toggle: 101;
  --z-dropdown: 1000;
  --z-mobile-overlay: 1000;
  --z-mobile-drawer: 1001;
}