/* ============================================================
   CAREVI – Flat / desktop (Fluent-like) téma
   Načítá se PO style.css a přepisuje tokeny + komponenty.
   ============================================================ */

:root {
  /* Neutrální plochy */
  --cream:   #F3F1EE;   /* pozadí aplikace */
  --cream2:  #F7F5F2;   /* jemná plocha (hlavičky tabulek, štítky) */
  --white:   #FFFFFF;   /* karty */
  --sand:    #E3DED6;   /* okraje */
  --sand-lt: #F7F5F2;

  /* Text */
  --ink:     #1C1712;
  --deep:    #1F1A15;
  --warm:    #3A3027;
  --muted:   #76695C;
  --stone:   #9C8F81;

  /* Akcent + stavy */
  --gold:    #B5820F;
  --gold-lt: #FBF2DC;
  --gold-md: #E8C878;
  --green:   #2F7A45;  --green-lt: #E6F2E9;
  --red:     #B23A2E;  --red-lt:   #FBE9E6;
  --blue:    #2F5C9E;  --blue-lt:  #E7EEF8;
  --danger:  #B23A2E;

  /* Sidebar */
  --sb-bg:     #1F1A15;
  --sb-border: #2E2720;
  --sb-text:   #B9AC9C;
  --sb-hover:  #2A231C;
  --sb-active: #2A231C;

  /* Plochý vzhled: žádné stíny, malé rádiusy */
  --sh-xs: none; --sh-sm: none; --sh-md: 0 8px 24px rgba(0,0,0,.10); --sh-lg: 0 12px 32px rgba(0,0,0,.14);
  --r-sm: 4px; --r-md: 6px; --r-lg: 6px; --r-xl: 8px;

  --sidebar-w: 232px;
  --topbar-h:  48px;

  --ff-ui:      'Segoe UI Variable','Segoe UI',Inter,system-ui,sans-serif;
  --ff-display: 'Segoe UI Variable Display','Segoe UI',Inter,system-ui,sans-serif;
}

body { font-family: var(--ff-ui); font-size: 13.5px; background: var(--cream); color: var(--ink); }
h1,h2,h3,h4,.page-title,.card-title,.modal-title { font-family: var(--ff-ui) !important; letter-spacing: 0 !important; }

/* Lucide */
svg.lucide { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; vertical-align: middle; }

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar { background: var(--sb-bg) !important; border-right: none !important; width: var(--sidebar-w); }
#sidebar .sb-logo { padding: 16px; border-bottom: 1px solid var(--sb-border); }
#sidebar .sb-logo-name { font-family: var(--ff-ui); font-size: 14px; font-weight: 700; letter-spacing: .1em; color: #F3EDE4; text-transform: uppercase; }
#sidebar .sb-section { padding: 4px 8px; }
#sidebar .sb-label { font-size: 10px; font-weight: 600; letter-spacing: .1em; color: #6E6357; padding: 12px 10px 4px; }
#sidebar .sb-divider { background: var(--sb-border); margin: 6px 12px; }
#sidebar .sb-link {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 4px; font-size: 13px; font-weight: 400;
  color: var(--sb-text); border: none; margin: 1px 0;
}
#sidebar .sb-link:hover { background: var(--sb-hover); color: #EDE5DA; }
#sidebar .sb-link.active { background: var(--sb-active); color: #fff; font-weight: 600; }
#sidebar .sb-link.active::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--gold);
}
#sidebar .sb-icon { width: 18px; display: inline-flex; align-items: center; justify-content: center; opacity: .9; font-size: 0; }
#sidebar .sb-link.active .sb-icon { color: var(--gold-md); opacity: 1; }
#sidebar .sb-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; line-height: 17px; padding: 0 6px; border-radius: 3px; min-width: 0; height: auto; }
#sidebar .sb-badge-gold { background: #3A3027; color: var(--gold-md); }
#sidebar .sb-badge-red  { background: #4A2420; color: #F2A79C; }
#sidebar .sb-footer { border-top: 1px solid var(--sb-border); color: #7F7366; font-size: 11px; }

/* ── Topbar ──────────────────────────────────────────────── */
#topbar {
  height: var(--topbar-h); background: var(--white) !important; border-bottom: 1px solid var(--sand) !important;
  box-shadow: none !important; padding: 0 18px;
}
#topbar .page-title { font-size: 15px; font-weight: 600; color: var(--ink); }
#topbar .page-title::before { content: 'CAREVI  /  '; white-space: pre; color: var(--stone); font-weight: 400; }
.topbar-actions { gap: 6px; }

#content { padding: 18px 20px 40px; }

/* ── Karty / panely ──────────────────────────────────────── */
.card, .stat-card, .session-card, .health-record, .modal {
  background: var(--white); border: 1px solid var(--sand) !important; border-radius: 6px !important; box-shadow: none !important;
}
.card-header { padding: 10px 14px; border-bottom: 1px solid var(--sand); background: var(--white); }
.card-title { font-size: 13.5px !important; font-weight: 600 !important; color: var(--ink) !important; }
.card-body { padding: 14px; }

.stat-card { padding: 12px 14px; }
.stat-num { font-family: var(--ff-ui) !important; font-size: 22px !important; font-weight: 600 !important; }
.stat-label { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.stat-icon { border-radius: 6px; }

/* ── Tlačítka ────────────────────────────────────────────── */
.btn {
  border-radius: 4px !important; box-shadow: none !important; font-weight: 500; font-size: 13px;
  padding: 6px 12px; gap: 6px; transform: none !important;
  border: 1px solid var(--sand); background: var(--white); color: var(--ink);
}
.btn:hover { background: var(--cream2); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-primary:hover { background: #9C700C; border-color: #9C700C; color: #fff; }
.btn-outline { background: var(--white); border-color: var(--sand); color: var(--ink); }
.btn-danger { background: var(--white); border-color: #E9C9C4; color: var(--red); }
.btn-danger:hover { background: var(--red-lt); }
.btn-gold { background: var(--gold-lt); border-color: var(--gold-md); color: #7A5A10; }
.btn-green { background: var(--green-lt); border-color: #BFDCC6; color: var(--green); }
.btn-sm { padding: 4px 10px; font-size: 12.5px; }
.btn-xs { padding: 2px 7px; font-size: 11.5px; }
.btn-icon { padding: 4px 7px; }

/* ── Formuláře ───────────────────────────────────────────── */
.form-control {
  border: 1px solid var(--sand) !important; border-radius: 4px !important; background: var(--white) !important;
  box-shadow: none !important; padding: 6px 10px; font-size: 13.5px; font-family: var(--ff-ui);
}
.form-control:focus { border-color: var(--gold) !important; outline: none; box-shadow: 0 0 0 2px var(--gold-lt) !important; }
.form-label, .field-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.form-section-title { font-family: var(--ff-ui) !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--sand); }
.search-input { border: 1px solid var(--sand); border-radius: 4px; background: var(--white); box-shadow: none; }

/* ── Tabulky (datová mřížka) ─────────────────────────────── */
.table-wrap { border-radius: 0; }
table th {
  background: var(--cream2) !important; color: var(--muted) !important; font-size: 11.5px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important; padding: 7px 12px !important; border-bottom: 1px solid var(--sand) !important;
}
table td { padding: 7px 12px !important; border-bottom: 1px solid #EEEAE4 !important; }
table tbody tr:hover td { background: #FBF8F2; }

/* ── Štítky ──────────────────────────────────────────────── */
.badge, .health-tag, .badge-kontra {
  border-radius: 3px !important; font-size: 11px !important; font-weight: 600 !important; padding: 2px 7px !important;
  letter-spacing: 0 !important; text-transform: none !important; border: none !important;
}
.badge-green { background: var(--green-lt); color: var(--green); }
.badge-gold  { background: var(--gold-lt);  color: #7A5A10; }
.badge-red, .badge-kontra { background: var(--red-lt); color: var(--red); }
.badge-blue  { background: var(--blue-lt); color: var(--blue); }
.badge-sand  { background: var(--cream2); color: var(--muted); }

/* ── Záložky (segmentový přepínač) ───────────────────────── */
.tabs { border-bottom: 1px solid var(--sand); gap: 2px; }
.tab { border-radius: 4px 4px 0 0; padding: 7px 12px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--ink); border-bottom-color: var(--gold); background: transparent; }

/* ── Alerty, bannery, modal ──────────────────────────────── */
.alert { border-radius: 4px !important; box-shadow: none !important; border-width: 1px; font-size: 13px; }
.lic-banner { border-radius: 4px; box-shadow: none; }
.modal-overlay { background: rgba(20,16,12,.45); }
.modal-header { border-bottom: 1px solid var(--sand); }

/* ── Avatar ──────────────────────────────────────────────── */
.client-avatar { background: var(--gold-lt) !important; color: #7A5A10 !important; font-family: var(--ff-ui) !important; font-weight: 700; }

/* ── Prázdné stavy ───────────────────────────────────────── */
.empty-state-title { font-family: var(--ff-ui) !important; font-size: 15px; font-weight: 600; }

/* ── Kalendář ────────────────────────────────────────────── */
.cal-month, .cal-week-wrap { border-radius: 6px !important; box-shadow: none !important; border: 1px solid var(--sand) !important; }
.cal-title { font-family: var(--ff-ui) !important; font-size: 17px !important; font-weight: 600 !important; }
.cal-pill, .cal-event-block { border-radius: 3px !important; box-shadow: none !important; }

/* ── Sdílené komponenty (nový styl) ──────────────────────── */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.page-head h1 { font-size:20px; font-weight:600; margin:0; color:var(--ink); }
.page-head .sub { color:var(--muted); font-size:13px; margin-top:2px; }

.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
.kpi { background:var(--white); border:1px solid var(--sand); border-radius:6px; padding:12px 14px; display:block; color:inherit; }
a.kpi:hover { border-color:var(--gold-md); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; }
.kpi-top svg { color:var(--stone); }
.kpi-num { font-size:22px; font-weight:600; margin-top:6px; color:var(--ink); font-variant-numeric:tabular-nums; }
.kpi-sub { font-size:11.5px; color:var(--muted); margin-top:2px; }

.panel { background:var(--white); border:1px solid var(--sand); border-radius:6px; overflow:hidden; }
.panel-h { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--sand); font-weight:600; font-size:13.5px; }
.panel-h svg { color:var(--stone); }
.panel-h .act { margin-left:auto; display:flex; gap:6px; }
.panel-h a.lnk { margin-left:auto; color:var(--blue); font-weight:500; font-size:12.5px; }
.panel-empty { padding:28px 14px; text-align:center; color:var(--muted); }
.panel-empty svg { width:28px; height:28px; color:var(--stone); margin-bottom:8px; }

.list-row { display:grid; grid-template-columns:64px 30px 1fr auto; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid #EEEAE4; color:inherit; }
.list-row:last-child { border-bottom:none; }
a.list-row:hover { background:#FBF8F2; }
.list-row.nodate { grid-template-columns:30px 1fr auto; }
.time-chip { font-variant-numeric:tabular-nums; font-weight:600; font-size:13px; line-height:1.2; }
.time-chip span { display:block; font-weight:400; color:var(--muted); font-size:11px; }
.av { width:30px; height:30px; border-radius:50%; background:var(--gold-lt); color:#7A5A10; font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; }
.row-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-sub { color:var(--muted); font-size:12px; }

.tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 7px; border-radius:3px; white-space:nowrap; }
.tag svg { width:12px; height:12px; }
.tag-green { background:var(--green-lt); color:var(--green); }
.tag-gold  { background:var(--gold-lt);  color:#7A5A10; }
.tag-blue  { background:var(--blue-lt);  color:var(--blue); }
.tag-red   { background:var(--red-lt);   color:var(--red); }
.tag-gray  { background:var(--cream2);   color:var(--muted); }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }

.onb { background:var(--white); border:1px solid var(--sand); border-left:3px solid var(--gold); border-radius:6px; padding:14px 16px; margin-bottom:12px; }
.onb-h { display:flex; align-items:center; gap:10px; }
.onb-h b { font-size:14px; }
.onb-h .sub { color:var(--muted); font-size:12px; }
.onb-bar { height:4px; background:var(--cream2); border-radius:2px; margin:12px 0; overflow:hidden; }
.onb-bar i { display:block; height:100%; background:var(--gold); }
.onb-steps { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.onb-step { display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border:1px solid var(--sand); border-radius:4px; font-size:13px; }
.onb-step .ck { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--sand); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--muted); flex-shrink:0; }
.onb-step.done { color:var(--muted); }
.onb-step.done .ck { background:var(--green); border-color:var(--green); color:#fff; }
.onb-step.done .ck svg { width:12px; height:12px; }
.onb-step a { display:block; color:var(--blue); font-size:12px; margin-top:2px; }

.icon-btn { background:none; border:none; cursor:pointer; color:var(--muted); padding:5px; border-radius:4px; display:inline-flex; }
.icon-btn:hover { background:var(--cream2); color:var(--ink); }

@media (max-width:900px){ .kpi-grid{ grid-template-columns:1fr 1fr; } .grid-2{ grid-template-columns:1fr; } }

/* ── Toolbar nad tabulkou ────────────────────────────────── */
.toolbar { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--sand); flex-wrap:wrap; }
.seg { display:inline-flex; border:1px solid var(--sand); border-radius:4px; overflow:hidden; background:var(--white); }
.seg button, .seg a { border:none; background:none; padding:5px 11px; font:inherit; font-size:12.5px; font-weight:500; color:var(--muted); cursor:pointer; border-right:1px solid var(--sand); display:inline-flex; align-items:center; gap:6px; }
.seg button:last-child, .seg a:last-child { border-right:none; }
.seg button span, .seg a span { font-size:11px; color:var(--stone); }
.seg .on { background:var(--cream2); color:var(--ink); }
.searchfield { margin-left:auto; display:flex; align-items:center; gap:7px; border:1px solid var(--sand); border-radius:4px; padding:0 9px; background:var(--white); min-width:260px; }
.searchfield svg { color:var(--stone); width:15px; height:15px; }
.searchfield input { border:none; outline:none; background:none; padding:6px 0; font:inherit; font-size:13px; width:100%; color:var(--ink); }
.searchfield:focus-within { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-lt); }
.cell-user { display:flex; align-items:center; gap:10px; color:inherit; }
.cell-user:hover .row-name { color:var(--gold); }
.td-actions { display:flex; gap:2px; justify-content:flex-end; }
.icon-btn-danger:hover { background:var(--red-lt); color:var(--red); }
table td a { color:inherit; }
@media (max-width:700px){ .searchfield{ margin-left:0; min-width:0; width:100%; } }

/* ── Karta klienta ───────────────────────────────────────── */
.kd-head { display:flex; gap:16px; padding:16px; margin-bottom:12px; flex-wrap:wrap; overflow:visible; }
.kd-main { display:flex; gap:14px; flex:1; min-width:280px; }
.av-lg { width:52px; height:52px; font-size:17px; flex-shrink:0; }
.kd-name { font-size:20px; font-weight:600; margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kd-meta { display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; font-size:13px; }
.kd-meta a, .kd-meta span { display:inline-flex; align-items:center; gap:6px; color:var(--ink); }
.kd-meta svg { width:14px; height:14px; color:var(--stone); }
.kd-meta a:hover { color:var(--gold); }
.kd-note { display:flex; gap:7px; align-items:flex-start; margin-top:8px; font-size:13px; color:var(--muted); background:var(--cream2); border-radius:4px; padding:6px 9px; }
.kd-note svg { width:14px; height:14px; margin-top:2px; color:var(--stone); }
.kd-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.kd-side { display:flex; gap:10px; flex-wrap:wrap; }
.kd-stat { border:1px solid var(--sand); border-radius:6px; padding:10px 12px; min-width:190px; background:var(--cream2); }
.kd-stat-v { font-weight:600; font-size:14px; margin-top:4px; }

.tab { display:inline-flex; align-items:center; gap:6px; }
.tab svg { width:15px; height:15px; color:var(--stone); }
.tab.active svg { color:var(--gold); }
.tab .cnt { font-size:11px; color:var(--stone); background:var(--cream2); border-radius:3px; padding:0 5px; }
.tab .tag { padding:1px 5px; }
.kd-tabs { margin-bottom:14px; overflow-x:auto; flex-wrap:nowrap; }

.empty-state-icon svg { width:30px; height:30px; color:var(--stone); }
.empty-state-icon { font-size:0 !important; }
.session-card, .health-record { padding:14px 16px !important; margin-bottom:10px !important; }
.session-date, .health-record-date { font-family:var(--ff-ui) !important; font-size:13px !important; font-weight:600 !important; color:var(--muted) !important; letter-spacing:0 !important; text-transform:none !important; }
.session-type { font-family:var(--ff-ui) !important; font-size:15px !important; font-weight:600 !important; }
.btn svg { width:15px; height:15px; }
.kd-side { align-items:flex-start; }
.health-record .btn-icon, .session-card .btn-icon, .session-card .td-actions { align-self:flex-start; }

/* ── Tlačítko Zpět (globální) ────────────────────────────── */
.nav-back { display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 7px; border:1px solid var(--sand); border-radius:4px; background:var(--white); color:var(--ink); font-size:12.5px; font-weight:500; margin-right:10px; }
.nav-back:hover { background:var(--cream2); }
.nav-back svg { width:15px; height:15px; }
.nav-back-dark { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#F3EDE4 !important; margin-right:0; }
.nav-back-dark:hover { background:rgba(255,255,255,.16); }
@media (max-width:600px){ .nav-back span { display:none; } .nav-back { padding:4px 6px; } }

/* ── Admin shell ─────────────────────────────────────────── */
.adm-brand { display:flex; align-items:center; gap:10px; }
.adm-mark { width:30px; height:30px; border-radius:6px; background:var(--gold); color:#1F1A15; font-weight:800; display:flex; align-items:center; justify-content:center; }
.adm-sub { font-size:10.5px; color:#7F7366; text-transform:uppercase; letter-spacing:.1em; }
.adm-user { display:flex; align-items:center; gap:10px; padding:12px 14px !important; margin-top:auto; }
.adm-user .av { background:#3A3027; color:var(--gold-md); }
.adm-user-mail { color:#F3EDE4; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-user .adm-sub { text-transform:none; letter-spacing:0; }
.adm-logout { color:#B9AC9C !important; } .adm-logout:hover { background:#2A231C !important; color:#fff !important; }
.is-admin #topbar .page-title::before { content:'Administrace  /  '; }
.is-admin #sidebar { display:flex; flex-direction:column; }
.kpi-grid.kpi-5 { grid-template-columns:repeat(5,1fr); }
.kpi[data-filter] { cursor:pointer; }
code.vs { font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:700; background:var(--cream2); border:1px solid var(--sand); border-radius:3px; padding:1px 6px; color:var(--ink); }
.meter { height:6px; background:var(--cream2); border-radius:3px; overflow:hidden; margin-top:8px; }
.meter i { display:block; height:100%; }
.mini-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--sand); border-bottom:1px solid var(--sand); }
.mini-kpis > div { background:var(--white); padding:10px 12px; }
.mini-kpis b { font-size:16px; font-weight:600; }
@media (max-width:1100px){ .kpi-grid.kpi-5 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .kpi-grid.kpi-5 { grid-template-columns:1fr 1fr; } .mini-kpis { grid-template-columns:1fr 1fr; } }

/* ── Veřejné stránky (login, registrace, katalog, rezervace) ── */
.login-logo, .reg-logo, .pub-logo, .box .logo, .setup-logo {
  font-family:var(--ff-ui) !important; font-size:20px !important; font-weight:700 !important; letter-spacing:.14em !important; color:var(--ink) !important;
}
.login-logo::before, .reg-logo::before, .pub-logo::before {
  content:'C'; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:6px;
  background:var(--gold); color:#1F1A15; font-size:15px; letter-spacing:0; margin-right:10px; vertical-align:middle;
}
.login-box, .reg-box, .pub-card, .box { border-radius:8px !important; box-shadow:none !important; border:1px solid var(--sand) !important; }
.plan-card { border-radius:6px !important; }
.plan-price, .t.serif, .book-head .t { font-family:var(--ff-ui) !important; font-weight:700; }
.sl-item { border-radius:6px !important; }
.slot { border-radius:4px !important; font-family:ui-monospace,Consolas,monospace; }
.chip { border-radius:4px !important; }