@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  --bg:            #f0f4ff;
  --bg-2:          #e4ecff;
  --surface:       #ffffff;
  --surface-2:     #f4f7ff;
  --border:        rgba(26,86,219,.09);
  --border-mid:    rgba(26,86,219,.15);
  --border-strong: rgba(26,86,219,.22);

  --ink:    #080617;
  --ink-2:  #49456b;
  --ink-3:  #9c98b5;

  --v:      #1a56db;
  --v-dark: #1347c0;
  --v-lt:   #dbeafe;
  --v-glow: rgba(26,86,219,.18);

  --green:    #0ec98a;
  --green-bg: #eafaf4;
  --red:      #f03f3f;
  --red-bg:   #fff0f0;

  --r0: 5px;  --r1: 8px;  --r2: 12px;
  --r3: 16px; --r4: 22px; --r5: 30px;

  --s0: 0 1px 2px rgba(8,6,23,.05);
  --s1: 0 2px 8px rgba(8,6,23,.07), 0 1px 2px rgba(8,6,23,.04);
  --s2: 0 6px 24px rgba(8,6,23,.09), 0 2px 6px rgba(8,6,23,.05);
  --s3: 0 16px 56px rgba(8,6,23,.13), 0 6px 16px rgba(8,6,23,.07);
  --s4: 0 30px 90px rgba(8,6,23,.18), 0 12px 30px rgba(8,6,23,.09);

  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --t: .17s;
  --nav-h: 60px;
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a { color:var(--v); text-decoration:none; }
a:hover { text-decoration:underline; }
code {
  font-family:'SF Mono','Fira Code',monospace;
  background:var(--v-lt); color:var(--v);
  padding:1px 6px; border-radius:4px; font-size:12px;
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-mid); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--ink-3); }

/* ════════════════ NAV ════════════════════════════════════════════════════════ */
.navbar {
  height:var(--nav-h);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center;
  padding:0 26px; justify-content:space-between; gap:20px;
}

.nav-brand {
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:15px; letter-spacing:-.35px;
  color:var(--ink); text-decoration:none; flex-shrink:0;
}
.nav-brand:hover { text-decoration:none; }

.nav-logo-svg { flex-shrink:0; display:block; }

.nav-pills {
  display:flex; align-items:center; gap:2px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:3px;
}
.nav-pills a {
  padding:6px 16px; border-radius:7px;
  color:var(--ink-2); font-weight:500; font-size:13px;
  white-space:nowrap; text-decoration:none;
  transition:all var(--t) var(--ease);
}
.nav-pills a:hover { color:var(--ink); background:rgba(255,255,255,.7); text-decoration:none; }
.nav-pills a.active {
  background:var(--surface); color:var(--v);
  font-weight:700; box-shadow:var(--s0);
}

/* ════════════════ LAYOUT ════════════════════════════════════════════════════ */
.container { width:100%; max-width:calc(50% + 720px); margin-left:auto; margin-right:0; padding:26px 26px 26px 22px; box-sizing:border-box; }
.container--center { margin-left:auto; margin-right:auto; max-width:1360px; }
/* index header: sidebar-width gap + page-header spanning remaining width */
.index-header { display:flex; align-items:center; padding:20px 26px 16px 0; }
.index-header-gap { width:220px; flex-shrink:0; }
.index-page-header { flex:1; margin-bottom:0; }

.content-layout { display:flex; align-items:flex-start; width:100%; }
.sidebar { width:220px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; position:sticky; top:calc(var(--nav-h) + 16px); padding:0 14px 26px 22px; }
.main-content { flex:1; min-width:0; padding:0 26px 26px 0; }

/* Sidebar cards */
.sidebar-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r3); padding:14px; box-shadow:var(--s1); }
.sidebar-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); margin-bottom:10px; }
.sidebar-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
.sidebar-item { display:flex; align-items:center; gap:7px; font-size:12.5px; }
.sidebar-bar { width:3px; height:18px; border-radius:2px; flex-shrink:0; }
.sidebar-name { flex:1; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-badge { font-size:10px; font-weight:800; color:#fff; padding:2px 7px; border-radius:20px; flex-shrink:0; }
.sidebar-badge-smb { background:#f59e0b; }
.sidebar-badge-warn    { background:#f59e0b; }
.sidebar-card-warn     { border-color:#fca5a5; background:#fff5f5; }
.sidebar-badge-blocker  { background:#ef4444; }
.sidebar-card-blocker   { border-color:#cbd5e1; background:#f8fafc; margin-top:60px; }
.sidebar-card-blocker .sidebar-title { color:#475569; }
.sidebar-badge-personal { background:#8b5cf6; }
.sidebar-card-personal  { border-color:#c4b5fd; background:#faf5ff; }
.sidebar-card-personal .sidebar-title { color:#7c3aed; }
.sidebar-empty { font-size:12px; color:var(--ink-3); text-align:center; padding:8px 0; }

/* SMB appointment */
.slot-smb { background:#fffbeb !important; }
.slot-smb:hover { background:#fef3c7 !important; }

/* Blocker slot */
.slot-blocker { background:#fee2e2; cursor:default; }
.slot-blocker:hover { background:#fecaca; }
.slot-blocker-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-top:3px solid #ef4444;
  height:80px; box-sizing:border-box;
}
.blocker-label {
  font-size:11px; font-weight:700; color:#dc2626;
  letter-spacing:.06em; text-transform:uppercase;
}

/* Day-off slot a řádek */
.slot-dayoff {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  cursor: default;
}
.dayoff-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 80px; box-sizing: border-box;
}
.dayoff-label {
  font-size: 13px; font-weight: 700; color: #0369a1;
  letter-spacing: .04em;
}
.btn-dayoff-cancel {
  font-size: 11px; font-weight: 600; color: #0369a1;
  background: #bae6fd; border: 1px solid #7dd3fc;
  border-radius: 5px; padding: 4px 10px; cursor: pointer;
  transition: background .15s;
}
.btn-dayoff-cancel:hover { background: #7dd3fc; }
.rep-row-dayoff { opacity: .85; }
.rep-row-dayoff .rep-name { color: #0369a1; }

/* Toggle volno button v rep-cell */
.btn-dayoff-toggle {
  margin-left: auto; background: none; border: none;
  font-size: 14px; cursor: pointer; opacity: .35;
  padding: 2px 4px; border-radius: 4px; transition: opacity .15s, background .15s;
}
.btn-dayoff-toggle:hover { opacity: 1; background: #e0f2fe; }
.btn-dayoff-toggle.btn-dayoff-active { opacity: 1; }

/* Sidebar day-off card */
.sidebar-card-dayoff { border-color: #bae6fd; background: #f0f9ff; }
.sidebar-card-dayoff .sidebar-title { color: #0369a1; }
.sidebar-badge-dayoff { background: #0369a1; font-size: 10px; padding: 2px 6px; }

/* Performance: target note */
.perf-target-note { font-size: 10px; color: #9ca3af; margin-left: 3px; }

/* Blocker button in modal */
.btn-blocker {
  background:#fee2e2; color:#dc2626; border:1px solid #fca5a5;
  padding:8px 14px; border-radius:6px; font-size:13px;
  font-weight:600; cursor:pointer; transition:background .15s;
}
.btn-blocker:hover { background:#fecaca; }

/* Personal slot (vlastní schůzka OZ) */
.slot-personal { background:#ede9fe; cursor:default; }
.slot-personal:hover { background:#ddd6fe; }
.slot-personal-inner {
  display:flex; flex-direction:column; justify-content:flex-start; gap:4px;
  padding:8px 12px; border-top:3px solid #8b5cf6;
  height:80px; box-sizing:border-box; overflow:hidden;
}
.personal-header {
  display:flex; align-items:center; justify-content:space-between;
}
.personal-label {
  font-size:11px; font-weight:700; color:#7c3aed;
  letter-spacing:.06em; text-transform:uppercase;
}
.personal-address {
  font-size:11px; color:#6d28d9; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* Personal appointment button in modal */
.btn-personal {
  background:#ede9fe; color:#7c3aed; border:1px solid #c4b5fd;
  padding:8px 14px; border-radius:6px; font-size:13px;
  font-weight:600; cursor:pointer; transition:background .15s;
}
.btn-personal:hover { background:#ddd6fe; }

/* TOP OZ toggles in settings */
.top-oz-toggles { display:flex; gap:16px; margin-bottom:14px; }
.top-oz-toggle { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-2); }
.top-oz-toggle input[type=checkbox] { width:15px; height:15px; accent-color:var(--v); cursor:pointer; }
.top-oz-toggle input:checked + span { color:var(--v); }

/* SMB toggle */
.smb-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:12px; }
.smb-toggle input[type=checkbox] { width:16px; height:16px; accent-color:#f59e0b; cursor:pointer; flex-shrink:0; }
.smb-toggle-label { font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; }
.smb-toggle input:checked + .smb-toggle-label { color:#d97706; }

/* ════════════════ BUTTONS ═══════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 17px; border-radius:var(--r1);
  font-size:13px; font-weight:700; border:none; cursor:pointer;
  transition:all var(--t) var(--ease);
  text-decoration:none; white-space:nowrap;
  letter-spacing:-.1px; font-family:inherit; line-height:1;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(.98); }
.btn:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

.btn-primary {
  background:linear-gradient(135deg, var(--v), #3b82f6);
  color:#fff;
  box-shadow:0 2px 12px var(--v-glow), 0 1px 3px rgba(26,86,219,.2);
}
.btn-primary:hover {
  background:linear-gradient(135deg, var(--v-dark), #2563eb);
  box-shadow:0 4px 20px var(--v-glow), 0 2px 6px rgba(26,86,219,.25);
}
.btn-secondary { background:var(--v-lt); color:var(--v); }
.btn-secondary:hover { background:#e2deff; }
.btn-ghost {
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--border-strong); box-shadow:var(--s0);
}
.btn-ghost:hover { color:var(--ink); box-shadow:var(--s1); }
.btn-danger  { background:var(--red); color:#fff; box-shadow:0 2px 8px rgba(240,63,63,.22); }
.btn-danger:hover  { background:#dc2626; }
.btn-warning { background:#f59e0b; color:#fff; box-shadow:0 2px 8px rgba(245,158,11,.22); }
.btn-warning:hover { background:#d97706; }
.btn-success { background:#22c55e; color:#fff; box-shadow:0 2px 8px rgba(34,197,94,.22); }
.btn-success:hover { background:#16a34a; }
.btn-sm { padding:5px 11px; font-size:12px; border-radius:var(--r0); }

/* Neaktivní karta */
.card-inactive { opacity:1; filter:grayscale(1); background:#f5f5f5; border-color:#ddd; }
.card-inactive .card-header { background:#f0f0f0; }
.rep-flag { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:8px; background:var(--v-lt); color:var(--v); white-space:nowrap; }
.rep-flag-inactive { background:#fee2e2; color:#991b1b; }
.rep-flag-region   { background:#f0fdf4; color:#15803d; }

/* ── Rep edit modal ─────────────────────────────────────────────────────── */
.rep-modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(8,6,23,.45); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
}
.rep-modal-box {
  background:#fff; border-radius:var(--r3); width:90%; max-width:560px;
  max-height:90vh; display:flex; flex-direction:column;
  box-shadow:var(--s4);
}
.rep-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px 14px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.rep-modal-title { font-size:16px; font-weight:800; color:var(--ink); }
.rep-modal-close {
  width:30px; height:30px; border-radius:50%; border:none;
  background:var(--bg-2); color:var(--ink-2); font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background var(--t);
}
.rep-modal-close:hover { background:var(--border-mid); }
.rep-modal-body { overflow-y:auto; padding:0 8px 8px; }

/* ── Region performance ──────────────────────────────────────────────────── */
.region-perf-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-bottom:16px; }
.region-perf-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:16px 20px; }
.region-perf-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.region-perf-name { font-size:14px; font-weight:700; color:var(--ink); }
.region-perf-badge { font-size:12px; font-weight:700; padding:2px 10px; border-radius:12px; }
.region-badge-green { background:#dcfce7; color:#15803d; }
.region-badge-blue  { background:#dbeafe; color:#1e3a8a; }
.region-perf-bar-wrap { height:7px; background:var(--bg-2); border-radius:4px; margin-bottom:14px; overflow:hidden; }
.region-perf-bar-fill { height:100%; border-radius:4px; transition:width .4s var(--ease); }
.region-perf-stats { display:flex; gap:0; }
.region-stat { flex:1; text-align:center; border-right:1px solid var(--border); }
.region-stat:last-child { border-right:none; }
.region-stat-val { display:block; font-size:18px; font-weight:800; color:var(--ink); line-height:1.2; }
.region-stat-lbl { display:block; font-size:10px; color:var(--ink-3); margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }

/* Sekce neaktivních */
.inactive-section { margin-top:8px; }
.inactive-section-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 0 8px; margin-bottom:10px;
  border-top:2px dashed #d1d5db;
}
.inactive-section-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#9ca3af; }
.inactive-section-count {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:#e5e7eb; color:#6b7280; font-size:11px; font-weight:700;
}
.inactive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* ════════════════ FLASH ═════════════════════════════════════════════════════ */
.flash-container { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.flash {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 15px; border-radius:var(--r2);
  font-size:13px; font-weight:500; box-shadow:var(--s1);
  animation:flashIn .2s var(--ease);
}
@keyframes flashIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }
.flash-success { background:var(--green-bg); color:#065f46; border:1px solid #6ee7b7; }
.flash-error   { background:var(--red-bg);   color:#991b1b; border:1px solid #fca5a5; }
.flash-close {
  background:none; border:none; cursor:pointer;
  font-size:18px; opacity:.45; color:inherit; padding:0 3px; line-height:1;
  transition:opacity var(--t);
}
.flash-close:hover { opacity:1; }

/* ════════════════ PAGE HEADER ═══════════════════════════════════════════════ */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:13px; margin-bottom:22px;
}
.page-title { font-size:22px; font-weight:900; letter-spacing:-.6px; }

.date-nav { display:flex; align-items:center; gap:7px; }
.date-label {
  font-size:18px; font-weight:900; letter-spacing:-.55px;
  min-width:234px; text-align:center;
}
.page-actions { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }

/* ════════════════ GRID TABLE ════════════════════════════════════════════════ */
.table-wrapper {
  background:var(--surface);
  border-radius:var(--r3); border:1px solid var(--border);
  box-shadow:var(--s2); overflow:hidden;
}
.grid-table { width:100%; border-collapse:collapse; table-layout:fixed; }

.grid-table thead {
  background:linear-gradient(180deg, var(--surface-2) 0%, #f3f2fc 100%);
}
.grid-table th {
  padding:12px 13px;
  font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-3);
  border-bottom:1px solid var(--border); text-align:center;
}
.rep-col { width:200px; text-align:left !important; }
.slot-col { /* zbývající místo se rozdělí rovnoměrně */ }
.travel-col { width:44px; padding:0; }

.travel-cell {
  width:44px; padding:0; border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  text-align:center; vertical-align:middle; background:var(--bg);
}
.travel-min {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:-.3px;
  color:var(--v); background:var(--v-lt); border-radius:10px;
  padding:2px 6px; white-space:nowrap;
}
.travel-min-warn {
  color:#991b1b; background:var(--red-bg);
}

.rep-cell {
  padding:0;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--surface-2);
  display:flex; align-items:stretch;
}
.rep-bar {
  width:4px;
  flex-shrink:0;
  border-radius:0;
}
.rep-name {
  padding:12px 8px 12px 14px;
  font-weight:700; font-size:13px; letter-spacing:-.2px;
  align-self:center; flex:1;
}
.rep-appt-count {
  align-self:center; margin-right:10px; flex-shrink:0;
  min-width:20px; height:20px; border-radius:10px;
  padding:0 6px; font-size:11px; font-weight:800;
  color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:.85;
}

.slot-cell {
  padding:0; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  vertical-align:top; position:relative;
  height:80px; overflow:hidden;
  transition:background var(--t) var(--ease);
}
.grid-table tr:last-child .slot-cell,
.grid-table tr:last-child .rep-cell { border-bottom:none; }
.grid-table tr .slot-cell:last-child { border-right:none; }

/* Booked */
.slot-booked { background:#dbeafe; }
.slot-booked:hover { background:#c7d9f8; }
.slot-booked-inner { padding:10px 12px; border-top:3px solid; height:80px; overflow:hidden; }

/* Free */
.slot-free { cursor:pointer; }
.slot-free-content {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:80px; gap:6px;
  background:repeating-linear-gradient(
    45deg, transparent, transparent 5px,
    rgba(26,86,219,.025) 5px, rgba(26,86,219,.025) 6px
  );
  transition:background var(--t) var(--ease);
}
.slot-free:hover .slot-free-content { background:var(--v-lt); }

.slot-free-ring {
  width:26px; height:26px; border-radius:50%;
  border:2px dashed var(--border-mid);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:16px; line-height:1;
  transition:all var(--t) var(--spring);
}
.slot-free:hover .slot-free-ring {
  border-color:var(--v); color:var(--v); background:#fff;
  transform:scale(1.15); box-shadow:0 0 0 5px rgba(26,86,219,.1);
}
.slot-free-label {
  font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
  transition:color var(--t);
}
.slot-free:hover .slot-free-label { color:var(--v); }

.slot-na {
  background:#f8f8fb; text-align:center; vertical-align:middle;
  color:var(--border-mid); font-size:18px; font-weight:300;
}

/* Appointment */
.appt-client { font-weight:800; font-size:13px; letter-spacing:-.2px; margin-bottom:3px; }
.appt-address { font-size:11.5px; color:var(--ink-2); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appt-notes { font-size:11px; color:var(--ink-3); font-style:italic; margin-top:3px; }

.appt-actions {
  position:absolute; top:5px; right:4px;
  display:flex; gap:2px; opacity:0;
  transition:opacity var(--t) var(--ease);
}
.slot-booked:hover .appt-actions { opacity:1; }
.slot-personal:hover .appt-actions { opacity:1; }
.appt-edit, .appt-delete {
  background:none; border:none; cursor:pointer;
  font-size:13px; line-height:1;
  padding:3px 5px; border-radius:var(--r0);
  transition:all var(--t) var(--ease);
}
.appt-edit  { color:var(--ink-3); }
.appt-edit:hover  { color:var(--v) !important; background:var(--v-lt); }
.appt-delete { color:var(--ink-3); }
.appt-delete:hover { color:var(--red) !important; background:var(--red-bg); }

/* ════════════════ REP BADGE ═════════════════════════════════════════════════ */

/* ════════════════ EMPTY STATE ═══════════════════════════════════════════════ */
.empty-state { text-align:center; padding:80px 20px; }
.empty-icon { font-size:48px; opacity:.15; display:block; margin-bottom:14px; }
.empty-state p { font-size:15px; font-weight:600; color:var(--ink-3); margin-bottom:20px; }

/* ════════════════ FORMS ═════════════════════════════════════════════════════ */
.form-group { margin-bottom:15px; }

/* ── Address autocomplete ── */
.ac-dropdown {
  display:none; position:absolute; top:calc(100% + 1px); left:0; right:0; z-index:3000;
  background:var(--surface); border:1.5px solid var(--v);
  border-radius:var(--r2);
  box-shadow:0 8px 24px rgba(26,86,219,.15); max-height:220px; overflow-y:auto;
}
.ac-item {
  padding:9px 14px; font-size:13px; color:var(--ink-2); cursor:pointer;
  border-bottom:1px solid var(--border); transition:background var(--t) var(--ease);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ac-item:last-child { border-bottom:none; }
.ac-item:hover, .ac-item.ac-active { background:var(--v-lt); color:var(--ink); }
.ac-item strong { color:var(--v); font-weight:700; }
.form-group label {
  display:block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-2); margin-bottom:6px;
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }

.input {
  width:100%; padding:10px 13px;
  border:1.5px solid var(--border-strong); border-radius:var(--r1);
  font-size:14px; font-family:inherit; outline:none;
  background:var(--surface); color:var(--ink);
  transition:border-color var(--t), box-shadow var(--t);
  -webkit-appearance:none;
}
.input::placeholder { color:var(--ink-3); }
.input:focus { border-color:var(--v); box-shadow:0 0 0 3px rgba(26,86,219,.11); }
textarea.input { resize:vertical; line-height:1.55; }

select.input {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a56db' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}
select.input:disabled { opacity:.5; cursor:not-allowed; }

.input-file {
  width:100%; padding:12px 13px;
  border:2px dashed var(--border-mid); border-radius:var(--r1);
  cursor:pointer; background:var(--surface-2); color:var(--ink-2);
  font-family:inherit; font-size:13px; transition:all var(--t) var(--ease);
}
.input-file:hover { border-color:var(--v); background:var(--v-lt); color:var(--v); }

.input-color {
  width:44px; height:40px; padding:3px;
  border:1.5px solid var(--border-strong); border-radius:var(--r1);
  cursor:pointer; background:none;
}

.color-row { display:flex; align-items:center; gap:9px; }
.color-presets { display:flex; gap:6px; flex-wrap:wrap; }
.color-swatch {
  width:23px; height:23px; border-radius:6px; cursor:pointer;
  outline:3px solid transparent; outline-offset:0;
  transition:transform var(--t) var(--spring), outline-color var(--t), outline-offset var(--t);
}
.color-swatch:hover { transform:scale(1.2); outline:3px solid rgba(26,86,219,.4); outline-offset:2px; }

.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
.hint { font-size:12px; color:var(--ink-3); margin-bottom:13px; line-height:1.6; }
.optional { font-weight:400; font-style:italic; }

/* ════════════════ MODALS ════════════════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(8,6,23,.5);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  z-index:300; align-items:center; justify-content:center; padding:18px;
}
.modal-overlay.open { display:flex; animation:bgFade .18s var(--ease); }
@keyframes bgFade { from{opacity:0} to{opacity:1} }

.modal {
  background:var(--surface);
  border-radius:var(--r4); box-shadow:var(--s4); border:1px solid var(--border);
  width:100%; max-width:510px; max-height:90vh; overflow-y:auto;
  animation:modalUp .26s var(--spring);
}
@keyframes modalUp {
  from{opacity:0;transform:translateY(22px) scale(.96)}
  to  {opacity:1;transform:none}
}
.modal-wide { max-width:640px; }
.modal-confirm {
  max-width:380px; padding:36px 32px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.confirm-icon { font-size:40px; line-height:1; }
.confirm-title { font-size:20px; font-weight:900; letter-spacing:-.4px; margin:0; }
.confirm-desc  { font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:0; }
.confirm-actions { display:flex; gap:10px; margin-top:8px; }
.btn-danger {
  background:#dc2626; color:#fff; border:none;
  padding:10px 22px; border-radius:var(--r1); font-size:14px; font-weight:700;
  cursor:pointer; transition:background var(--t) var(--ease);
}
.btn-danger:hover { background:#b91c1c; }
.btn-danger:disabled { opacity:.6; cursor:not-allowed; }

.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 16px; border-bottom:1px solid var(--border);
}
.modal-header h2 { font-size:18px; font-weight:900; letter-spacing:-.45px; }
.modal-close {
  width:32px; height:32px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:8px; cursor:pointer;
  font-size:18px; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t) var(--ease);
}
.modal-close:hover { background:var(--bg-2); color:var(--ink); }
.modal-body { padding:20px 24px; }

/* ════════════════ ALERTS ════════════════════════════════════════════════════ */
.alert { padding:11px 14px; border-radius:var(--r2); font-size:13px; margin-bottom:13px; font-weight:500; }
.alert-error { background:var(--red-bg); color:#991b1b; border:1px solid #fca5a5; }

/* ════════════════ TRAVEL PREVIEW ═══════════════════════════════════════════ */
.edit-travel-preview {
  background:var(--surface-2); border:1px solid var(--border-mid);
  border-radius:var(--r2); padding:10px 14px; margin-bottom:14px;
  display:flex; flex-direction:column; gap:7px;
}
.tp-loading { font-size:12px; color:var(--ink-3); }
.tp-row {
  display:flex; align-items:center; gap:8px; font-size:12px;
}
.tp-row.tp-warn .tp-pill { background:#fef3c7; color:#92400e; }
.tp-dir  { font-weight:800; color:var(--v); white-space:nowrap; min-width:72px; font-size:11.5px; }
.tp-info { flex:1; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-pill {
  font-size:11px; font-weight:700; padding:2px 9px;
  background:var(--v-lt); color:var(--v);
  border-radius:20px; white-space:nowrap; flex-shrink:0;
}
.tp-unknown { background:var(--bg-2); color:var(--ink-3); }

/* ════════════════ DIRECT ADD ════════════════════════════════════════════════ */
.direct-meta {
  display:flex; gap:10px; align-items:flex-start;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r2); padding:13px 15px; margin-bottom:16px; flex-wrap:wrap;
}
.direct-meta-item { display:flex; flex-direction:column; gap:4px; }
.direct-meta-label {
  font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-3);
}
.direct-meta-value {
  font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap;
}
.direct-meta-slot {
  color:var(--v); background:var(--v-lt);
  padding:2px 10px; border-radius:20px; font-size:13px;
}
.slot-pills { display:flex; gap:6px; flex-wrap:wrap; }
.slot-pill {
  background:var(--v-lt); color:var(--v);
  border:1.5px solid transparent; border-radius:20px;
  padding:4px 13px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:all var(--t) var(--ease);
}
.slot-pill:hover { background:var(--v); color:#fff; }
.slot-pill.active { background:var(--v); color:#fff; box-shadow:0 0 0 3px rgba(26,86,219,.18); }
.direct-meta-date { margin-left:auto; }
.direct-meta-date .input-sm {
  height:34px; padding:0 10px; font-size:13px; width:150px;
}

/* ════════════════ FIND BEST ═════════════════════════════════════════════════ */
.step2-summary {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r2); padding:12px 15px;
  font-size:13px; margin-bottom:15px; line-height:1.8; color:var(--ink-2);
}
.step2-summary strong { color:var(--ink); }

.rep-results { display:flex; flex-direction:column; gap:7px; max-height:360px; overflow-y:auto; margin-bottom:4px; }

.rep-result-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border:1.5px solid var(--border-strong);
  border-radius:var(--r2); cursor:pointer;
  transition:all var(--t) var(--ease); background:var(--surface);
}
.rep-result-item:hover {
  border-color:var(--v); background:#fafaff;
  transform:translateX(3px); box-shadow:var(--s1);
}
.rep-result-item.selected {
  border-color:var(--v); background:var(--v-lt);
  box-shadow:0 0 0 3px rgba(26,86,219,.1);
}
.rep-result-item input[type=radio] { flex-shrink:0; accent-color:var(--v); width:15px; height:15px; cursor:pointer; }
.rep-result-count {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex-shrink:0; width:38px; min-height:38px;
  background:#f1f5f9; border-radius:8px; padding:4px 2px;
}
.rep-count-num { font-size:15px; font-weight:800; color:var(--ink); line-height:1; }
.rep-count-lbl { font-size:9px; font-weight:600; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; margin-top:1px; }

.rep-result-info { flex:1; min-width:0; display:flex; align-items:center; gap:10px; }
.rep-result-name { font-weight:800; font-size:13.5px; letter-spacing:-.2px; }
.rep-result-slot-pill {
  display:inline-block; font-size:12px; font-weight:700;
  background:var(--v); color:#fff;
  padding:3px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0;
}

.rep-result-overhead { text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.overhead-best {
  display:inline-block;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff; font-size:9px; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em;
  padding:2px 8px; border-radius:20px;
}
.overhead-stats { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.overhead-km-val { font-weight:800; font-size:13px; letter-spacing:-.2px; color:var(--ink); }
.overhead-sep { color:var(--ink-3); font-size:12px; }
.overhead-min-val { font-size:12px; color:var(--ink-2); }

/* ════════════════ ROUTES ════════════════════════════════════════════════════ */
.routes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

.route-card {
  background:var(--surface); border-radius:var(--r3);
  border:1px solid var(--border); box-shadow:var(--s1); overflow:hidden;
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.route-card:hover { box-shadow:var(--s2); transform:translateY(-2px); }

.route-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 17px; background:var(--surface-2);
  border-bottom:1px solid var(--border); gap:10px;
}
.route-rep-info { display:flex; align-items:center; gap:9px; }
.route-rep-name { font-weight:800; font-size:14px; letter-spacing:-.25px; }
.route-totals { display:flex; gap:6px; flex-shrink:0; }
.stat-pill {
  background:var(--surface); border:1px solid var(--border-strong);
  padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:800; color:var(--ink-2);
}

/* Timeline */
.timeline { padding:14px 17px; }

.tl-item { display:flex; }
.tl-gutter {
  display:flex; flex-direction:column; align-items:center;
  width:16px; flex-shrink:0; margin-right:13px;
}
.tl-dot {
  width:10px; height:10px; border-radius:50%;
  border:2.5px solid; background:#fff; flex-shrink:0;
  margin-top:4px; transition:transform var(--t) var(--spring);
}
.tl-item:hover .tl-dot { transform:scale(1.4); }
.tl-line { width:2px; flex:1; min-height:14px; background:var(--border-mid); margin:3px 0; }

.tl-body { flex:1; padding-bottom:18px; }
.tl-time {
  font-size:10px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:4px;
}
.tl-client { font-weight:800; font-size:13.5px; letter-spacing:-.25px; }
.tl-address { font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.4; }
.tl-notes { font-size:11px; color:var(--ink-3); font-style:italic; margin-top:3px; }

.tl-leg { margin:-4px 0 2px 29px; padding-bottom:6px; }
.tl-leg-pill {
  display:inline-block;
  font-size:11px; color:var(--ink-3); font-weight:600;
  background:var(--bg-2); border:1px solid var(--border);
  padding:2px 9px; border-radius:20px;
}

.route-empty { padding:26px 17px; color:var(--ink-3); font-size:13px; font-style:italic; text-align:center; }

/* ════════════════ SETTINGS ══════════════════════════════════════════════════ */
.settings-layout { display:flex; flex-direction:column; gap:12px; max-width:1300px; }
.settings-reps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.inactive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

.card {
  background:var(--surface); border-radius:var(--r3);
  border:1px solid var(--border); box-shadow:var(--s1); overflow:hidden;
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; background:var(--surface-2);
  border-bottom:1px solid var(--border);
  font-weight:800; font-size:14px; letter-spacing:-.2px;
}
.card-body { padding:18px; }

.edit-panel { background:#faf9ff; border-top:1px solid var(--border); }
.edit-section { padding:18px; border-bottom:1px solid var(--border); }
.edit-section:last-child { border-bottom:none; }
.edit-section h4 {
  font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-3); margin-bottom:13px;
}
.edit-section.danger h4 { color:var(--red); }

.slots-row { padding:10px 14px; display:flex; flex-wrap:nowrap; gap:5px; align-items:center; overflow:hidden; }
.slot-chip {
  padding:3px 8px; border:1.5px solid; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.01em; white-space:nowrap; flex-shrink:0;
}

/* ════════════════ RESPONSIVE ════════════════════════════════════════════════ */
@media (max-width:768px) {
  .form-grid { grid-template-columns:1fr; }
  .page-header { flex-direction:column; align-items:flex-start; }
  .date-label { min-width:unset; font-size:16px; }
  .routes-grid { grid-template-columns:1fr; }
  .navbar { padding:0 14px; }
  .container { padding:16px 12px; }
  .rep-col { width:136px; }
  .nav-pills a { padding:6px 11px; }
  .modal-header, .modal-body { padding-left:17px; padding-right:17px; }
}

/* ── Performance page ───────────────────────────────────────────────────────── */
.perf-title { font-size:22px; font-weight:700; color:var(--ink); margin:0 0 2px; }
.perf-subtitle { font-size:13px; color:var(--ink-3); }

/* Period selector */
.period-bar { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 12px; }
.period-pill {
  padding:6px 14px; border-radius:20px; font-size:13px; font-weight:500;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--border);
  cursor:pointer; text-decoration:none; transition:all .15s;
}
.period-pill:hover { border-color:var(--v); color:var(--v); }
.period-pill.active { background:var(--v); color:#fff; border-color:var(--v); }

/* Flatpickr override – zaoblený, konzistentní s designem */
.flatpickr-calendar {
  border-radius: 14px !important;
  box-shadow: 0 8px 28px rgba(8,6,23,.14) !important;
  border: 1px solid var(--border-mid) !important;
  font-family: 'Inter', sans-serif !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--v) !important; border-color: var(--v) !important;
}
.flatpickr-day.inRange {
  background: var(--v-lt) !important; border-color: var(--v-lt) !important; box-shadow: none !important;
}

/* KPI cards */
.perf-cards {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0;
}
.perf-cards-3 { grid-template-columns:repeat(3,1fr); }
.perf-cards-4 { grid-template-columns:repeat(4,1fr); }
.perf-cards-5 { grid-template-columns:repeat(5,1fr); }
.perf-cards-6 { grid-template-columns:repeat(6,1fr); }
.perf-cards-7 { grid-template-columns:repeat(7,1fr); }
.perf-pct-val { line-height:1; }
.perf-pct-green  { color:#16a34a; }
.perf-pct-orange { color:#d97706; }
.perf-pct-red    { color:#dc2626; }
.perf-card-dayoff { }
.perf-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:12px 22px; text-align:center; box-shadow:0 2px 8px rgba(26,86,219,.04);
}
.perf-card-icon { font-size:18px; margin-bottom:4px; }
.perf-card-val  { font-size:26px; font-weight:800; color:var(--ink); line-height:1; }
.perf-card-lbl  { font-size:11px; font-weight:600; color:var(--ink-3); margin-top:4px; text-transform:uppercase; letter-spacing:.04em; }
.perf-card-pct  { font-size:14px; font-weight:600; color:var(--ink-3); margin-left:4px; }
.perf-card-smb    { }
.perf-card-blocker{ }
.perf-card-reps   { }

/* Charts row */
.perf-charts-row { display:grid; grid-template-columns:260px 1fr; gap:14px; margin-bottom:14px; }
.perf-chart-box {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; box-shadow:0 2px 8px rgba(26,86,219,.04);
}
.perf-chart-title { font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:14px; text-transform:uppercase; letter-spacing:.04em; }
.perf-chart-wrap  { position:relative; height:260px; }
.perf-chart-donut { height:200px; display:flex; align-items:center; justify-content:center; }

/* Donut custom legend */
.donut-custom-legend { padding:10px 16px 4px; }
.donut-legend-item { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; border-bottom:1px solid #f1f5f9; }
.donut-legend-item:last-child { border-bottom:none; }
.donut-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.donut-legend-name { flex:1; color:#374151; }
.donut-legend-count { font-weight:700; color:#111827; font-size:14px; }

/* Full-width daily chart */
.perf-chart-full {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; margin-bottom:14px; box-shadow:0 2px 8px rgba(26,86,219,.04);
}

/* Rep table */
.perf-table-box {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; margin-bottom:24px; box-shadow:0 2px 8px rgba(26,86,219,.04);
  overflow:auto;
}
.perf-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:auto; }
.pnw { white-space:nowrap; padding-left:8px; padding-right:8px; }
.perf-table th {
  text-align:left; padding:5px 8px; font-size:11px; font-weight:700;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em;
  border-bottom:2px solid var(--border); white-space:nowrap;
}
.perf-table td { padding:5px 8px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:13px; white-space:nowrap; }
.perf-td-name { white-space:nowrap; min-width:140px; }
.perf-table tr:last-child td { border-bottom:none; }
.perf-table tr:hover td { background:var(--surface-2); }
.perf-top-oz td { background:#f0f7ff; }
.ta-r { text-align:right; }
.ta-c { text-align:center; }
.fw-bold { font-weight:700; }


/* Rep dot, badges */
.rep-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.top-oz-badge {
  display:inline-block; font-size:9px; font-weight:800; color:#fff;
  background:var(--v); border-radius:4px; padding:1px 5px; margin-left:5px; letter-spacing:.05em;
}
.smb-pct-pill {
  display:inline-block; background:#fef3c7; color:#92400e;
  border-radius:10px; padding:2px 7px; font-size:11px; font-weight:700;
}
.blok-pct-pill {
  display:inline-block; background:#fee2e2; color:#991b1b;
  border-radius:10px; padding:2px 7px; font-size:11px; font-weight:700;
}

/* Progress bar in table */
.perf-bar-wrap { height:8px; background:var(--surface-2); border-radius:5px; overflow:hidden; display:flex; margin-bottom:2px; }
.perf-bar-fill { height:100%; transition:width .3s; border-radius:5px; }
.perf-bar-smb  { background:#f59e0b; }
.perf-bar-label { font-size:10px; color:var(--ink-3); font-weight:600; }

/* Chart title with legend inline */
.perf-chart-title { display:flex; align-items:center; gap:12px; }
.perf-chart-legend { font-size:11px; color:var(--ink-3); font-weight:400; text-transform:none; letter-spacing:0; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }

/* Empty state */
.perf-empty { text-align:center; padding:60px 20px; color:var(--ink-3); }
.perf-empty p { font-size:15px; margin-top:12px; }

@media (max-width:900px) {
  .perf-cards { grid-template-columns:repeat(2,1fr); }
  .perf-charts-row { grid-template-columns:1fr; }
}

/* ════════════════ NAV USER ══════════════════════════════════════════════════ */
.nav-user {
  display:flex; align-items:center; gap:9px; flex-shrink:0;
  padding:5px 10px 5px 14px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px;
}
.nav-user-name {
  font-size:13px; font-weight:700; color:var(--ink);
  white-space:nowrap; max-width:140px;
  overflow:hidden; text-overflow:ellipsis;
}
.nav-user-role {
  font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
}
.nav-role-admin    { background:#fdf2f8; color:#9d174d; border:1px solid #fbcfe8; }
.nav-role-manager  { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.nav-role-operator { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.nav-logout {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:7px;
  background:none; border:none; color:var(--ink-3);
  cursor:pointer; text-decoration:none;
  transition:background var(--t), color var(--t);
}
.nav-logout:hover { background:var(--red-bg); color:var(--red); text-decoration:none; }

/* ════════════════ SETTINGS TABS ════════════════════════════════════════════ */
.settings-tabs {
  display:flex; gap:4px; margin-bottom:20px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:4px; align-self:flex-start;
  width:fit-content;
}
.settings-tab {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 20px; border-radius:9px; border:none;
  font-size:13px; font-weight:600; color:var(--ink-2);
  background:none; cursor:pointer; font-family:inherit;
  transition:all var(--t) var(--ease); white-space:nowrap;
}
.settings-tab:hover { color:var(--ink); background:rgba(255,255,255,.6); }
.settings-tab.active {
  background:var(--surface); color:var(--v);
  font-weight:700; box-shadow:var(--s1);
}
.settings-pane { animation:fadeIn .15s var(--ease); }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* Input hint text */
.input-hint { display:block; font-size:11px; color:var(--ink-3); margin-top:4px; }

/* ════════════════ ROLE BADGE ════════════════════════════════════════════════ */
.role-badge {
  display:inline-block; font-size:10px; font-weight:800; padding:2px 8px;
  border-radius:20px; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap;
}
.role-badge-admin    { background:#fdf2f8; color:#9d174d; border:1px solid #fbcfe8; }
.role-badge-manager  { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.role-badge-operator { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }