/* ============================================================
   SALON ROSE — CENTRÁLNÍ DESIGNOVÝ SYSTÉM
   Jeden zdroj pravdy pro barvy, typografii a základní komponenty
   (tlačítka, karty, štítky, tabulky, formuláře, hero banner...).

   Paleta vychází z loga salonu: bílá/světlá plocha, sytá červená růže
   jako hlavní akcent, kaligrafický font pro branding. Černá/tmavá se
   používá jen úsporně jako kontrastní akcent (hero pruh, patička,
   tmavá varianta tlačítka) — ne jako základ celé stránky. Zlatavá je
   jen doplňkový akcent (VIP/bonusy).

   Třídy jsou v namespace "sr-" (Salon Rose), aby se nebily se
   starším CSS (crm-, design.css apod.) při postupné migraci.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Alex+Brush&display=swap');

:root {
    /* ─── Značkové barvy (z loga) ─── */
    --sr-rose-50:  #fdecee;
    --sr-rose-100: #fbd2d7;
    --sr-rose-200: #f5a3ad;
    --sr-rose-300: #ea6f7d;
    --sr-rose-400: #dc3b4d;
    --sr-rose-500: #c8102e;   /* primární brand červená (odstín z loga) */
    --sr-rose-600: #b30d29;
    --sr-rose-700: #8f0c22;
    --sr-rose-800: #690a1a;
    --sr-rose-900: #430610;

    /* ─── Zlatavý doplňkový akcent (VIP, bonusy) ─── */
    --sr-gold-300: #f2d18c;
    --sr-gold-400: #e4b563;
    --sr-gold-500: #cf9a3e;
    --sr-gold-600: #a97a2c;
    --sr-gold-700: #8a611f;

    /* ─── Tmavá/černá škála — úsporný kontrastní akcent (hero, patička,
       tmavé tlačítko), NENÍ základ stránky ─── */
    --sr-ink-950: #060606;
    --sr-ink-900: #0d0d0e;
    --sr-ink-850: #131315;
    --sr-ink-800: #1a1a1d;
    --sr-ink-700: #232327;
    --sr-ink-600: #323238;
    --sr-ink-500: #4a4a52;
    --sr-ink-400: #6b6b74;
    --sr-ink-300: #97979f;
    --sr-ink-200: #c2c2c8;
    --sr-ink-100: #e4e4e8;
    --sr-ink-50:  #f7f7f9;

    /* ─── Sémantické barvy (odstíny tmavší, pro čitelnost na bílé) ─── */
    --sr-success:    #16815a;
    --sr-success-bg: rgba(22,129,90,.09);
    --sr-success-br: rgba(22,129,90,.28);
    --sr-danger:     var(--sr-rose-600);
    --sr-danger-bg:  rgba(200,16,46,.08);
    --sr-danger-br:  rgba(200,16,46,.26);
    --sr-info:       #2b6693;

    /* ─── Povrchy — výchozí (světlý) motiv: bílá plocha, jemný teplý
       nádech, červená a černá jen jako akcent ─── */
    --sr-bg:            #fffaf9;
    --sr-surface:       #ffffff;
    --sr-surface-alt:   #f7f0ee;
    --sr-surface-raise: #ffffff;
    --sr-border:        rgba(30,14,14,.09);
    --sr-border-strong: rgba(30,14,14,.16);

    /* ─── Text na světlém povrchu ─── */
    --sr-text:        #201615;
    --sr-text-muted:  #6c6058;
    --sr-text-faint:  #948a83;
    --sr-text-on-rose:#ffffff;

    /* ─── Typografie ─── */
    --sr-font-display: 'Playfair Display', 'Georgia', serif;
    --sr-font-script:  'Alex Brush', cursive;
    --sr-font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ─── Tvar, stín, přechody ─── */
    --sr-radius-sm: 10px;
    --sr-radius:    16px;
    --sr-radius-lg: 24px;
    --sr-radius-pill: 999px;
    --sr-shadow-sm: 0 2px 10px rgba(30,14,14,.07);
    --sr-shadow:    0 16px 40px rgba(30,14,14,.12);
    --sr-glow-rose: 0 10px 22px -6px rgba(200,16,46,.45);
    --sr-glow-gold: 0 10px 20px -6px rgba(228,181,99,.4);
    --sr-transition: .18s cubic-bezier(.4,0,.2,1);
}

/* Volitelná světlá varianta povrchu — pro tisk účtenek, formuláře
   v kontextu, kde je nutná bílá plocha (obal .sr-surface--light). */
.sr-surface--light {
    --sr-surface: #ffffff;
    --sr-surface-alt: var(--sr-ink-50);
    --sr-surface-raise: #ffffff;
    --sr-border: var(--sr-ink-100);
    --sr-border-strong: var(--sr-ink-200);
    --sr-text: var(--sr-ink-900);
    --sr-text-muted: var(--sr-ink-500);
    --sr-text-faint: var(--sr-ink-400);
}

/* ============================================================
   ZÁKLAD
   ============================================================ */
.sr, .sr-app {
    font-family: var(--sr-font-sans);
    color: var(--sr-text);
    background: var(--sr-bg);
}
.sr *, .sr *::before, .sr *::after { box-sizing: border-box; }

.sr h1, .sr h2, .sr h3, .sr h4 {
    font-family: var(--sr-font-display);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--sr-text);
}
/* styl.css definuje strong/b s pevnou tmavou barvou (--text-primary: #1a1a1a),
   která by v .sr kontextu mohla přebít barvu — vracíme na aktuální --sr-text. */
.sr strong, .sr b { color: var(--sr-text); }
/* .sr-hero zůstává záměrně tmavý akcentní blok i v jinak světlém systému —
   tučný text uvnitř něj musí být světlý, ne tmavý --sr-text. */
.sr-hero strong, .sr-hero b { color: #fff; }
.sr-brand-script {
    font-family: var(--sr-font-script);
    color: var(--sr-rose-600);
    line-height: 1;
}
.sr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sr-rose-600);
}

/* ============================================================
   TLAČÍTKA — .sr-btn + modifikátory
   ============================================================ */
.sr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid var(--sr-border-strong);
    border-radius: var(--sr-radius-sm);
    background: var(--sr-surface-raise);
    color: var(--sr-text);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--sr-transition), background var(--sr-transition), box-shadow var(--sr-transition), filter var(--sr-transition);
}
.sr-btn svg, .sr-btn i[data-lucide] { width: 18px; height: 18px; flex: 0 0 auto; }
.sr-btn:hover { transform: translateY(-1px); }
.sr-btn:active { transform: translateY(0); }
.sr-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.sr-btn--primary {
    background: linear-gradient(135deg, var(--sr-rose-500), var(--sr-rose-700));
    color: #fff;
    box-shadow: var(--sr-glow-rose);
}
.sr-btn--primary:hover { filter: brightness(1.08); }

.sr-btn--gold {
    background: linear-gradient(135deg, var(--sr-gold-400), var(--sr-gold-600));
    color: #241a06;
    box-shadow: var(--sr-glow-gold);
}
.sr-btn--gold:hover { filter: brightness(1.06); }

.sr-btn--dark {
    background: var(--sr-ink-950);
    color: #fff;
    border-color: var(--sr-border-strong);
}
.sr-btn--dark:hover { background: #000; }

.sr-btn--ghost {
    background: transparent;
    border-color: var(--sr-border-strong);
    color: var(--sr-text);
}
.sr-btn--ghost:hover { background: var(--sr-surface-alt); }

.sr-btn--success { background: var(--sr-success); color: #fff; }
.sr-btn--success:hover { filter: brightness(1.08); }

.sr-btn--block { width: 100%; }
.sr-btn--mini  { padding: 8px 14px; font-size: .76rem; border-radius: 9px; }
.sr-btn--lg    { padding: 15px 26px; font-size: .98rem; border-radius: 14px; }
.sr-btn--icon  { padding: 10px; width: 42px; height: 42px; }

/* ============================================================
   KARTY — .sr-card (každý blok = vlastní posuvné okno)
   ============================================================ */
.sr-card {
    background: var(--sr-surface);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-lg);
    box-shadow: var(--sr-shadow-sm);
    padding: 22px;
}
.sr-card--flush { padding: 0; overflow: hidden; }
.sr-card--scroll {
    max-height: var(--sr-card-max-h, 420px);
    overflow-y: auto;
}

.sr-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--sr-border);
}
.sr-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--sr-font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--sr-text);
}
.sr-card-title .sr-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(200,16,46,.10);
    color: var(--sr-rose-600);
    flex: 0 0 auto;
}
.sr-card-title .sr-ico--gold    { background: rgba(228,181,99,.18); color: var(--sr-gold-700); }
.sr-card-title .sr-ico--success { background: var(--sr-success-bg); color: var(--sr-success); }
.sr-card-note { margin: 0; font-size: .8rem; color: var(--sr-text-muted); }

.sr-hint {
    margin-top: 12px;
    font-size: .78rem;
    color: var(--sr-text-muted);
    background: var(--sr-surface-alt);
    border: 1px solid var(--sr-border);
    border-radius: 12px;
    padding: 10px 12px;
}
.sr-empty {
    padding: 22px;
    text-align: center;
    font-size: .86rem;
    color: var(--sr-text-muted);
    background: var(--sr-surface-alt);
    border: 1px dashed var(--sr-border-strong);
    border-radius: 12px;
}

/* ============================================================
   HERO / BANNER — .sr-hero (tmavý pruh se žhnoucí červení)
   ============================================================ */
.sr-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--sr-radius-lg);
    padding: 26px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(200,16,46,.16), transparent 55%), linear-gradient(120deg, #0a0a0b 0%, #161114 60%, #0a0a0b 100%);
    border: 1px solid var(--sr-border-strong);
    box-shadow: var(--sr-shadow);
    color: #fff;
}
.sr-hero::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -100px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(200,16,46,.28);
    filter: blur(80px);
    pointer-events: none;
}
.sr-hero-top {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}
.sr-hero-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sr-hero-avatar {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sr-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--sr-rose-500), var(--sr-rose-800));
    box-shadow: var(--sr-glow-rose), 0 0 0 4px rgba(255,255,255,.06);
    text-transform: uppercase;
}
.sr-hero h1, .sr-hero h2 { color: #fff; }
.sr-hero-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .78rem;
    color: #b4b0ac;
}
.sr-hero-metric {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}
.sr-hero-metric-label {
    display: block;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #cfcac6;
}
.sr-hero-metric-value {
    display: block;
    font-family: var(--sr-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sr-gold-300);
}
.sr-hero-badges {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.1);
}

/* ============================================================
   ODZNAKY / ŠTÍTKY — .sr-chip, .sr-badge
   ============================================================ */
.sr-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 11px;
    border: 1px solid var(--sr-border-strong);
    background: var(--sr-surface-alt);
    color: var(--sr-text);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--sr-transition), transform var(--sr-transition);
}
a.sr-chip:hover, button.sr-chip:hover { transform: translateY(-1px); background: var(--sr-surface-raise); }
.sr-chip--rose    { background: rgba(200,16,46,.09); border-color: rgba(200,16,46,.28); color: var(--sr-rose-700); }
.sr-chip--gold    { background: rgba(228,181,99,.16); border-color: rgba(228,181,99,.4); color: var(--sr-gold-700); }
.sr-chip--success { background: var(--sr-success-bg); border-color: var(--sr-success-br); color: var(--sr-success); }
.sr-chip--off     { background: var(--sr-surface-alt); border-color: var(--sr-border-strong); color: var(--sr-text-faint); }
.sr-chip b { font-weight: 800; }

.sr-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: var(--sr-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    background: var(--sr-surface-alt);
    color: var(--sr-text);
    border: 1px solid var(--sr-border-strong);
}
.sr-badge--rose { background: rgba(200,16,46,.1); color: var(--sr-rose-700); border-color: rgba(200,16,46,.3); }
.sr-badge--gold { background: rgba(228,181,99,.2); color: var(--sr-gold-700); border-color: rgba(228,181,99,.42); }

/* Uvnitř tmavého .sr-hero pruhu potřebují odznaky světlý (ne tmavý) styl,
   protože hero zůstává záměrně tmavý akcentní blok. */
.sr-hero .sr-badge { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.18); }
.sr-hero .sr-badge--rose { background: rgba(255,138,151,.16); color: #ffb3bb; border-color: rgba(255,138,151,.35); }
.sr-hero .sr-badge--gold { background: rgba(228,181,99,.2); color: var(--sr-gold-300); border-color: rgba(228,181,99,.4); }

/* ============================================================
   ZÁLOŽKY — .sr-tabs / .sr-tab
   ============================================================ */
.sr-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sr-border);
}
.sr-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--sr-text-muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--sr-transition), color var(--sr-transition);
}
.sr-tab:hover { background: var(--sr-surface-alt); color: var(--sr-text); }
.sr-tab.is-active {
    background: linear-gradient(135deg, var(--sr-rose-500), var(--sr-rose-700));
    color: #fff;
    box-shadow: var(--sr-glow-rose);
}

/* ============================================================
   LIŠTA NÁSTROJŮ / VYHLEDÁVÁNÍ — .sr-toolbar
   ============================================================ */
.sr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--sr-surface);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius);
    box-shadow: var(--sr-shadow-sm);
    padding: 14px 16px;
}
.sr-search { position: relative; flex: 1 1 320px; min-width: 0; }
.sr-search svg, .sr-search i[data-lucide] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--sr-text-faint);
    pointer-events: none;
}
.sr-search input {
    width: 100%;
    padding: 11px 12px 11px 36px;
    border: 1px solid var(--sr-border-strong);
    border-radius: 12px;
    background: var(--sr-surface-alt);
    color: var(--sr-text);
    font: inherit;
    font-size: .88rem;
}

/* ============================================================
   FORMULÁŘE — .sr-field / inputy
   ============================================================ */
.sr-field { margin-bottom: 14px; }
.sr-label {
    display: block;
    margin-bottom: 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sr-text-muted);
}
.sr-input,
.sr input[type="text"], .sr input[type="number"], .sr input[type="search"],
.sr input[type="email"], .sr input[type="password"], .sr input[type="date"],
.sr input[type="time"], .sr select, .sr textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--sr-border-strong);
    border-radius: 12px;
    background: var(--sr-surface-alt);
    color: var(--sr-text);
    font: inherit;
    font-size: .88rem;
}
.sr-input:focus,
.sr input:focus, .sr select:focus, .sr textarea:focus {
    outline: none;
    border-color: var(--sr-rose-500);
    box-shadow: 0 0 0 3px rgba(200,16,46,.22);
}
.sr-input::placeholder, .sr input::placeholder { color: var(--sr-text-faint); }

/* ============================================================
   UPOZORNĚNÍ — .sr-alert
   ============================================================ */
.sr-alert {
    position: relative;
    border-radius: 14px;
    padding: 14px 40px 14px 16px;
    font-size: .87rem;
    border: 1px solid transparent;
}
.sr-alert--success { background: var(--sr-success-bg); border-color: var(--sr-success-br); color: #0f5c40; }
.sr-alert--danger   { background: var(--sr-danger-bg);  border-color: var(--sr-danger-br);  color: var(--sr-rose-700); }
.sr-alert--info     { background: rgba(43,102,147,.08); border-color: rgba(43,102,147,.28); color: var(--sr-info); }
.sr-alert strong { display: block; margin-bottom: 4px; font-size: .92rem; }

/* ============================================================
   TABULKY — .sr-table
   ============================================================ */
.sr-tablewrap { overflow-x: auto; border: 1px solid var(--sr-border); border-radius: 14px; }
.sr-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .84rem; }
.sr-table th {
    padding: 11px 14px;
    text-align: left;
    background: var(--sr-surface-alt);
    border-bottom: 1px solid var(--sr-border);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sr-text-muted);
    white-space: nowrap;
}
.sr-table td { padding: 11px 14px; border-bottom: 1px solid var(--sr-border); color: var(--sr-text); }
.sr-table tr:last-child td { border-bottom: none; }
.sr-table tbody tr:hover { background: var(--sr-surface-alt); }
.sr-table .je-plus  { color: var(--sr-success); font-weight: 700; }
.sr-table .je-minus { color: var(--sr-rose-600); font-weight: 700; }

/* ============================================================
   MŘÍŽKA / ROZVRŽENÍ — širokoúhlé dashboardy, každý blok
   má vlastní posuvné okno místo natahování celé stránky
   ============================================================ */
.sr-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 1000px) {
    .sr-grid--3  { grid-template-columns: 4fr 5fr 3fr; }
    .sr-grid--2  { grid-template-columns: 1fr 1fr; }
    .sr-grid--5-7 { grid-template-columns: 5fr 7fr; }
    .sr-col-sticky { position: sticky; top: 16px; }
}

/* ============================================================
   TOAST NOTIFIKACE
   ============================================================ */
.sr-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--sr-shadow);
    border: 1px solid var(--sr-border-strong);
    background: var(--sr-surface-raise);
    color: var(--sr-text);
}
.sr-toast--success { background: #eafaf3; border-color: var(--sr-success-br); color: #0f5c40; }
.sr-toast--danger   { background: #fdedef; border-color: var(--sr-danger-br); color: var(--sr-rose-700); }
.sr-toast--info     { background: #fdf6ea; border-color: rgba(228,181,99,.4); color: var(--sr-gold-700); }

/* ============================================================
   MOBIL
   ============================================================ */
@media (max-width: 640px) {
    .sr-hero { padding: 18px; border-radius: 18px; }
    .sr-hero-avatar { width: 50px; height: 50px; border-radius: 15px; font-size: 1.25rem; }
    .sr-card { padding: 16px; }
    .sr-toolbar { padding: 12px; }
    .sr-tab { padding: 9px 12px; font-size: .75rem; }
}