/* === tokens.css === */
/* ═══════════════════════════════════════════════════════════
   TOKENS — design proměnné Nodus
   ───────────────────────────────────────────────────────────
   Zde žije celý design system. Žádné jiné CSS soubory by
   neměly definovat hex hodnoty, fontové velikosti ani spacing
   bez odkazu sem.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Surfaces ── */
  --bg:        #0e0f13;
  --s1:        #16181f;
  --s2:        #1e2029;
  --s3:        #262936;
  --border:    #2a2d3a;
  --border-2:  #353947;
  /* ── Brand & semantic ── */
  --accent:    #c8f135;
  --accent-2:  #a8d420;
  --accent-soft: rgba(200, 241, 53, .12);
  --blue:      #3b82f6;
  --blue-2:    #60a5fa;
  --blue-soft: rgba(96, 165, 250, .14);
  --danger:    #f43f5e;
  --danger-soft: rgba(244, 63, 94, .14);
  --warn:      #f59e0b;
  --warn-soft: rgba(245, 158, 11, .14);
  --ok:        #10b981;
  --ok-soft:   rgba(16, 185, 129, .14);
  /* Aliasy pro finanční sémantiku — postupně migrovat na semantic */
  --income:    var(--accent);
  --expense:   var(--danger);
  --profit:    var(--blue);
  /* ── Text ── */
  --text:      #ecedf3;   /* ~14:1 na --s1 */
  --text-2:    #c4c7d2;   /* ~9:1 */
  --muted:     #8a8fa3;   /* ~5.0:1 ✓ AA (původní #6b7080 bylo pod prahem!) */
  --muted-2:   #6b7080;   /* dekorativní, ne text */
  /* ── Typografie ── */
  --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  14px;
  --fs-md:    16px;        /* iOS no-zoom threshold */
  --fs-lg:    18px;
  --fs-xl:    21px;
  --fs-2xl:   clamp(1.5rem, 1.2rem + 1vw, 1.75rem);
  /* ── Spacing ── */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  /* ── Layout ── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --sidebar-w: 230px;
  --sidebar-w-collapsed: 58px;
  /* ── Stíny ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 4px 16px rgba(0,0,0,.25);
  --shadow-lg: 0 24px 60px -10px rgba(0,0,0,.55), 0 8px 20px -8px rgba(0,0,0,.4);
  /* ── Motion ── */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t:      180ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 280ms cubic-bezier(.4, 0, .2, 1);
  /* ── Focus ring ── */
  --ring:        0 0 0 3px rgba(200, 241, 53, .35);
  --ring-danger: 0 0 0 3px rgba(244, 63, 94, .35);
  /* ── Z-index ── */
  --z-sidebar:   100;
  --z-modal:     200;
  --z-tk-detail: 300;
  --z-cal-popup: 500;
  --z-access:    500;
  --z-paste:     600;
  --z-notif:     800;
  --z-toast:     999;
  --z-lightbox:  9999;
}
/* === base.css === */
/* ═══════════════════════════════════════════════════════════
   BASE — reset, body, accessibility primitives
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}
button, input, textarea, select {
  font: inherit;
  color: inherit;
}
button { background: none; border: none; cursor: pointer; }
/* ─────────────────────────────────────────────────────────
   SKIP LINK — pro klávesnicový přístup k hlavnímu obsahu
   ───────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--sp-4);
  background: var(--accent);
  color: var(--bg);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  z-index: calc(var(--z-lightbox) + 1);
  transition: top var(--t);
}
.skip-link:focus { top: var(--sp-4); }
/* ─────────────────────────────────────────────────────────
   FOCUS — viditelný ring globálně, žádné outline:none bez náhrady
   ───────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius);
}
button:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
/* ─────────────────────────────────────────────────────────
   PREFERS REDUCED MOTION — respekt k uživatelům s vestibulárními problémy
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ─────────────────────────────────────────────────────────
   SR-ONLY — skrytý text jen pro screen readery
   ───────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* ─────────────────────────────────────────────────────────
   SORTABLE HEADERY — z preamble původního CSS
   ───────────────────────────────────────────────────────── */
.sortable      { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--accent); }
.sort-arrow    { font-size: 10px; margin-left: 3px; }
th.sort-asc  .sort-arrow::after { content: '↑'; color: var(--accent); }
th.sort-desc .sort-arrow::after { content: '↓'; color: var(--accent); }
input[type="color"] {
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--s2);
}
/* ─────────────────────────────────────────────────────────
   CUSTOM SCROLLBARS
   ───────────────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: rgba(200,241,53,.25); border-radius: 3px; transition: background .2s; }
::-webkit-scrollbar-thumb:hover { background: rgba(200,241,53,.5); }
::-webkit-scrollbar-corner  { background: transparent; }
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,241,53,.25) transparent;
}
/* === components.css === */
/* ═══ COMPONENTS — sdílené prvky UI ═══ */
/* ── LOGIN ── */
#login-screen{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  background: radial-gradient(ellipse at 30% 40%, rgba(200,241,53,.07) 0%, transparent 60%),
              radial-gradient(ellipse at 75% 70%, rgba(59,130,246,.06) 0%, transparent 55%),
              var(--bg);
}
.login-box{
  width:380px;max-width:95vw;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:16px;
  padding:36px 32px 32px;
  box-shadow: 0 32px 80px rgba(0,0,0,.5);
}
.login-logo{
  text-align:center;margin-bottom:28px;
}
.login-logo .mark{
  display:inline-block;
  background:var(--accent);color:#0e0f13;
  font-family:'DM Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  padding:4px 10px;border-radius:4px;margin-bottom:12px;
}
.login-logo h1{font-size:20px;font-weight:700;color:var(--text)}
.login-logo p{font-size:12px;color:var(--muted);margin-top:4px}
.login-box label{display:block;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.login-box input{
  width:100%;background:var(--s2);border:1px solid var(--border);border-radius:8px;
  color:var(--text);padding:11px 14px;font-size:14px;font-family:inherit;outline:none;
  transition:border-color .18s;margin-bottom:14px;
}
.login-box input:focus{border-color:var(--accent)}
.login-error{
  background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.3);
  border-radius:8px;padding:10px 14px;font-size:13px;color:var(--danger);
  margin-bottom:14px;display:none;
}
.login-blocked{
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  border-radius:8px;padding:10px 14px;font-size:13px;color:var(--warn);
  margin-bottom:14px;display:none;
}
.btn-login{
  width:100%;background:var(--accent);color:#0e0f13;
  border:none;border-radius:8px;padding:12px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:opacity .18s;
}
.btn-login:hover{opacity:.88}
.btn-login:disabled{opacity:.5;cursor:not-allowed}
.attempts-bar{
  margin-top:14px;text-align:center;font-size:12px;color:var(--muted);
}
.attempt-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--border);margin:0 3px;transition:background .3s;
}
.attempt-dot.used{background:var(--danger)}
/* ── APP LAYOUT ── */
#app{display:none;min-height:100vh}
.layout{display:flex;min-height:100vh}
/* ── SIDEBAR ── */
.sidebar{
  width:230px;flex-shrink:0;
  background:var(--s1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:20px 0;
  position:fixed;top:0;left:0;bottom:0;z-index:100;
}
.sidebar-logo{padding:0 18px 20px;border-bottom:1px solid var(--border);margin-bottom:12px}
.sidebar-logo .mark{font-family:'DM Mono',monospace;font-size:10px;color:var(--accent);letter-spacing:.15em;text-transform:uppercase}
.sidebar-logo h1{font-size:16px;font-weight:700;margin-top:3px}
.sidebar-logo .role-badge{
  display:inline-block;margin-top:6px;
  padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;
  background:rgba(200,241,53,.12);color:var(--accent);letter-spacing:.04em;
}
.role-badge.admin{background:rgba(59,130,246,.12);color:var(--blue)}
.role-badge.user{background:rgba(107,112,128,.12);color:var(--muted)}
nav{flex:1}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;cursor:pointer;
  color:var(--muted);font-size:13px;font-weight:500;
  border-left:3px solid transparent;transition:all .18s;
}
.nav-item:hover{color:var(--text);background:var(--s2)}
.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:rgba(200,241,53,.06)}
.nav-item svg{width:15px;height:15px;flex-shrink:0}
.nav-sep{height:1px;background:var(--border);margin:8px 18px}
.sidebar-footer{padding:14px 18px;border-top:1px solid var(--border)}
.user-info{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.user-avatar{
  width:32px;height:32px;border-radius:50%;
  background:rgba(200,241,53,.15);border:1px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--accent);
}
.user-name{font-size:13px;font-weight:600}
.user-role{font-size:11px;color:var(--muted)}
.btn-logout{
  width:100%;background:transparent;border:1px solid var(--border);
  color:var(--muted);border-radius:7px;padding:8px;
  font-family:inherit;font-size:12px;cursor:pointer;transition:all .18s;
}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}
/* ── MAIN ── */
.main{margin-left:230px;flex:1;padding:28px 32px;min-height:100vh}
.page{display:none}
.page.active{display:block}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px}
.page-title{font-size:21px;font-weight:700}
.page-sub{font-size:13px;color:var(--muted);margin-top:2px}
/* ── CARDS ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px;margin-bottom:22px}
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden}
.card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.card.green::after{background:var(--income)}
.card.red::after{background:var(--expense)}
.card.blue::after{background:var(--profit)}
.card.gray::after{background:var(--border)}
.card-label{font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px}
.card-value{font-family:'DM Mono',monospace;font-size:24px;font-weight:500}
.card-value.green{color:var(--income)}
.card-value.red{color:var(--expense)}
.card-value.blue{color:var(--profit)}
.card-sub{font-size:11px;color:var(--muted);margin-top:5px}
/* ── FORM ── */
.form-box{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:22px}
.form-box h2{font-size:14px;font-weight:600;margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:11px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
label{font-size:12px;color:var(--muted);font-weight:500}
input,select,textarea{
  background:var(--s2);border:1px solid var(--border);border-radius:7px;
  color:var(--text);padding:9px 12px;font-size:13px;font-family:inherit;
  outline:none;transition:border-color .18s;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:70px}
select option{background:var(--s2)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:7px;border:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s}
.btn-primary{background:var(--accent);color:#0e0f13}
.btn-primary:hover{opacity:.88}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:rgba(244,63,94,.12);border:1px solid var(--danger);color:var(--danger)}
.btn-danger:hover{background:rgba(244,63,94,.22)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
/* ── TABLE ── */
.table-box{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:22px}
.table-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border)}
.table-head h2{font-size:13px;font-weight:600}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:9px 13px;border-bottom:1px solid var(--border);background:var(--s1);white-space:nowrap}
td{padding:9px 13px;border-bottom:1px solid rgba(42,45,58,.5);font-size:13px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(30,32,41,.6)}
tfoot tr td{border-top:2px solid var(--border);border-bottom:none;font-weight:700}
.mono{font-family:'DM Mono',monospace}
/* ── CHARTS ── */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
.chart-box{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:17px 19px}
.chart-box.wide{grid-column:1/-1}
.chart-box h3{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:13px}
.chart-box canvas{max-height:230px}
/* ── FILTER BAR ── */
.filter-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.filter-bar select,.filter-bar input{width:auto}
/* ── EMPTY ── */
.empty{padding:44px;text-align:center;color:var(--muted)}
.empty-icon{font-size:32px;margin-bottom:8px}
/* ── MODAL ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:22px;width:420px;max-width:95vw;transform:translateY(14px);transition:transform .2s}
.overlay.open .modal{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-head h2{font-size:15px;font-weight:700}
.close-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:19px;line-height:1;padding:2px}
.close-btn:hover{color:var(--text)}
/* ── BADGE ── */
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
.badge-green{background:rgba(200,241,53,.12);color:var(--income)}
.badge-red{background:rgba(244,63,94,.12);color:var(--expense)}
.badge-blue{background:rgba(59,130,246,.12);color:var(--blue)}
.badge-gray{background:rgba(107,112,128,.12);color:var(--muted)}
.badge-orange{background:rgba(245,158,11,.12);color:var(--warn)}
/* ── TOAST ── */
#toast{
  position:fixed;bottom:24px;right:24px;z-index:999;
  background:var(--s1);border:1px solid var(--border);border-radius:9px;
  padding:12px 18px;font-size:13px;font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transform:translateY(20px);opacity:0;transition:all .25s;
  pointer-events:none;max-width:320px;
}
#toast.show{transform:none;opacity:1}
#toast.ok{border-color:var(--income);color:var(--income)}
#toast.err{border-color:var(--danger);color:var(--danger)}
/* ── LOADING ── */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── RESPONSIVE ── */
@media(max-width:900px){
  .crm-grid { grid-template-columns:1fr; }
  .crm-left { max-height:300px; }
  .crm-detail { max-height:none; }
}
@media(max-width:880px){
  .sidebar{width:58px}
  .sidebar-logo,.nav-item span,.sidebar-footer .user-name,.sidebar-footer .user-role,.btn-logout{display:none}
  .nav-item{justify-content:center;padding:13px}
  .main{margin-left:58px;padding:16px}
  .charts-grid{grid-template-columns:1fr}
  .chart-box.wide{grid-column:unset}
}
@media(max-width:560px){
  .cards{grid-template-columns:1fr 1fr}
}
.sortable { cursor:pointer; user-select:none; }
.sortable:hover { color:var(--accent); }
.sort-arrow { font-size:10px; margin-left:3px; }
th.sort-asc .sort-arrow::after  { content:'↑'; color:var(--accent); }
th.sort-desc .sort-arrow::after { content:'↓'; color:var(--accent); }
input[type="color"] { border-radius:6px; border:1px solid var(--border); background:var(--s2); }
/* ── UPLOAD PROGRESS ── */
.upload-progress-wrap {
    background:var(--s2); border:1px solid var(--border); border-radius:8px;
    padding:10px 14px; margin-bottom:8px; display:none;
}
.upload-progress-wrap.active { display:block; }
.upload-file-name { font-size:12px; font-weight:500; margin-bottom:6px; display:flex; justify-content:space-between; }
.upload-bar-bg { background:var(--border); border-radius:3px; height:6px; overflow:hidden; margin-bottom:4px; }
.upload-bar-fill { height:100%; border-radius:3px; background:var(--accent); transition:width .1s linear; width:0%; }
.upload-status { font-size:11px; color:var(--muted); display:flex; justify-content:space-between; }
/* ── ACCESS DENIED ── */
.access-denied-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
    z-index:500; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .2s;
}
.access-denied-overlay.open { opacity:1; pointer-events:all; }
.access-denied-box {
    background:var(--s1); border:1px solid var(--border); border-radius:14px;
    padding:36px 40px; max-width:400px; width:92vw; text-align:center;
    transform:scale(.95); transition:transform .2s;
}
.access-denied-overlay.open .access-denied-box { transform:scale(1); }
.access-denied-icon { font-size:48px; margin-bottom:14px; }
.access-denied-title { font-size:18px; font-weight:700; margin-bottom:8px; }
.access-denied-msg { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:20px; }
.access-denied-role { display:inline-block; background:rgba(244,63,94,.12); color:var(--expense); border-radius:5px; padding:3px 10px; font-size:12px; font-weight:600; margin-bottom:16px; }
/* ── NOTIFIKACE ── */
.notif-btn {
    position:relative; background:none; border:none; cursor:pointer;
    color:var(--muted); padding:4px; border-radius:4px;
    transition:color .15s; display:flex; align-items:center;
}
.notif-btn:hover { color:var(--text); }
.notif-count {
    position:absolute; top:-4px; right:-4px;
    background:var(--expense); color:#fff; border-radius:10px;
    font-size:9px; font-weight:700; padding:1px 5px; min-width:16px;
    text-align:center; pointer-events:none;
}
.notif-panel {
    position:fixed; top:0; right:0; width:360px; max-width:96vw; height:100vh;
    background:var(--s1); border-left:1px solid var(--border);
    z-index:800; display:flex; flex-direction:column;
    transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:-4px 0 24px rgba(0,0,0,.3);
}
.notif-panel.open { transform:translateX(0); }
.notif-panel-head {
    padding:16px 18px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.notif-panel-head h3 { margin:0; font-size:15px; }
.notif-list { flex:1; overflow-y:auto; padding:8px 0; }
.notif-item {
    padding:12px 18px; border-bottom:1px solid rgba(42,45,58,.4);
    cursor:pointer; transition:background .12s; position:relative;
}
.notif-item:hover { background:var(--s2); }
.notif-item.unread { border-left:3px solid var(--accent); }
.notif-item.unread::before {
    content:''; position:absolute; top:16px; right:16px;
    width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.notif-sender { font-size:12px; font-weight:700; color:var(--text); margin-bottom:3px; }
.notif-msg    { font-size:12px; color:var(--muted); line-height:1.4; }
.notif-task   { font-size:11px; color:var(--accent); margin-top:4px; }
.notif-time   { font-size:10px; color:var(--muted); margin-top:3px; }
.notif-type-invite  { border-left-color:var(--blue) !important; }
.notif-type-mention { border-left-color:var(--accent) !important; }
.notif-type-comment { border-left-color:var(--warn) !important; }
/* Invite modal */
.invite-modal { max-width:400px; }
/* ── CHECKLIST ── */
.checklist-item {
    display:flex; align-items:center; gap:10px;
    padding:6px 8px; border-radius:6px; transition:background .12s;
}
.checklist-item:hover { background:var(--s2); }
.checklist-cb {
    width:18px; height:18px; border-radius:4px; flex-shrink:0;
    border:2px solid var(--border); display:flex; align-items:center;
    justify-content:center; cursor:pointer; transition:all .15s;
}
.checklist-cb.done { background:var(--accent); border-color:var(--accent); }
.checklist-cb.done::after { content:'✓'; font-size:11px; color:#000; font-weight:800; }
.checklist-lbl { flex:1; font-size:13px; cursor:pointer; }
.checklist-lbl.done { text-decoration:line-through; color:var(--muted); }
.checklist-del { opacity:0; background:none; border:none; color:var(--expense); cursor:pointer; font-size:15px; padding:0 4px; transition:opacity .12s; }
.checklist-item:hover .checklist-del { opacity:1; }
.cl-progress { height:4px; border-radius:2px; background:var(--border); margin-bottom:10px; overflow:hidden; }
.cl-progress-bar { height:100%; border-radius:2px; background:var(--accent); transition:width .3s; }
/* ── CUSTOM SCROLLBARS ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(200,241,53,.25); border-radius:3px; transition:background .2s; }
::-webkit-scrollbar-thumb:hover { background:rgba(200,241,53,.5); }
::-webkit-scrollbar-corner { background:transparent; }
* { scrollbar-width:thin; scrollbar-color:rgba(200,241,53,.25) transparent; }
/* ── PASTE IMAGE ── */
.paste-hint { font-size:11px; color:var(--muted); text-align:center; padding:5px 8px; border:1px dashed var(--border); border-radius:5px; margin-top:6px; }
#paste-overlay { display:none; position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.75); align-items:center; justify-content:center; }
#paste-overlay.open { display:flex; }
.paste-box { background:var(--s1); border:1px solid var(--border); border-radius:12px; padding:20px; max-width:580px; width:90vw; }
.paste-box img { max-width:100%; max-height:300px; border-radius:6px; display:block; margin:0 auto 14px; }
/* === pages.css === */
/* ═══ PAGES — styly specifické pro stránky ═══ */
/* ── CRM ── */
.crm-grid { display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start; }
.crm-left { display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 140px); overflow-y:auto; padding-right:4px; }
.crm-left::-webkit-scrollbar { width:4px; }
.crm-left::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.project-card {
  background:var(--s2); border:1px solid var(--border); border-radius:8px;
  padding:13px 15px; cursor:pointer; transition:all .18s; position:relative;
}
.project-card:hover { border-color:var(--accent); }
.project-card.active { border-color:var(--accent); background:rgba(200,241,53,.05); }
.project-card .pc-name { font-weight:600; font-size:14px; margin-bottom:3px; }
.project-card .pc-customer { font-size:12px; color:var(--muted); }
.project-card .pc-progress { margin-top:8px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.project-card .pc-bar { height:100%; background:var(--accent); border-radius:2px; transition:width .3s; }
.project-card .pc-meta { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.status-badge {
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.s-active    { background:rgba(200,241,53,.15); color:var(--accent); }
.s-completed { background:rgba(59,130,246,.15); color:var(--blue); }
.s-paused    { background:rgba(245,158,11,.15); color:var(--warn); }
.s-cancelled { background:rgba(107,112,128,.15); color:var(--muted); }
.p-todo      { background:rgba(107,112,128,.15); color:var(--muted); }
.p-in_progress{ background:rgba(59,130,246,.15); color:var(--blue); }
.p-done      { background:rgba(200,241,53,.15); color:var(--accent); }
.p-cancelled { background:rgba(244,63,94,.15); color:var(--expense); }
.prio-low    { background:rgba(107,112,128,.12); color:var(--muted); }
.prio-medium { background:rgba(59,130,246,.12); color:var(--blue); }
.prio-high   { background:rgba(245,158,11,.12); color:var(--warn); }
.prio-urgent { background:rgba(244,63,94,.12); color:var(--expense); }
.crm-detail { background:var(--s1); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; max-height:calc(100vh - 140px); overflow-y:auto; }
.crm-detail-head { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.crm-detail-body { padding:18px 20px; }
.task-list { display:flex; flex-direction:column; gap:8px; }
.task-row {
  background:var(--s2); border:1px solid var(--border); border-radius:8px;
  padding:11px 14px; display:flex; align-items:center; gap:12px; cursor:pointer;
  transition:border-color .18s;
}
.task-row:hover { border-color:var(--muted); }
.task-row.done-row { opacity:.6; }
.task-row .task-actions { display:none; gap:4px; flex-shrink:0; }
.task-row:hover .task-actions { display:flex; }
.task-edit-btn {
  background:transparent; border:1px solid var(--border); color:var(--muted);
  border-radius:5px; padding:3px 8px; font-size:11px; cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.task-edit-btn:hover { border-color:var(--accent); color:var(--accent); }
.task-edit-btn.danger:hover { border-color:var(--expense); color:var(--expense); }
.task-check {
  width:18px; height:18px; border-radius:50%; border:2px solid var(--border);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .18s;
}
.task-check.checked { background:var(--accent); border-color:var(--accent); color:#000; font-size:11px; }
.task-check:hover { border-color:var(--accent); }
.task-info { flex:1; min-width:0; }
.task-title { font-size:13px; font-weight:500; }
.task-title.done { text-decoration:line-through; color:var(--muted); }
.task-meta-row { display:flex; gap:8px; align-items:center; margin-top:4px; flex-wrap:wrap; }
.task-due { font-size:11px; color:var(--muted); }
.task-due.overdue { color:var(--expense); }
.task-assigned { font-size:11px; color:var(--muted); }
.crm-empty { padding:40px; text-align:center; color:var(--muted); }
/* Task detail panel */
.task-detail-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); z-index:300; display:flex; justify-content:flex-end; opacity:0; pointer-events:none; transition:opacity .2s; }
.task-detail-overlay.open { opacity:1; pointer-events:all; }
.task-detail-panel {
  width:520px; max-width:96vw; background:var(--s1); border-left:1px solid var(--border);
  height:100vh; overflow-y:auto; display:flex; flex-direction:column;
  transform:translateX(30px); transition:transform .2s;
}
.task-detail-overlay.open .task-detail-panel { transform:none; }
.tdp-head { padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:12px; position:sticky; top:0; background:var(--s1); z-index:1; }
.tdp-body { padding:18px 20px; flex:1; display:flex; flex-direction:column; gap:18px; }
.tdp-section h4 { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:600; margin-bottom:10px; }
.note-item { background:var(--s2); border-radius:7px; padding:10px 13px; font-size:13px; position:relative; }
.note-item .note-meta { font-size:11px; color:var(--muted); margin-top:5px; }
.note-del { position:absolute; top:8px; right:8px; background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:2px 5px; }
.note-del:hover { color:var(--expense); }
.file-item { display:flex; align-items:center; gap:10px; background:var(--s2); border-radius:7px; padding:8px 12px; }
.file-icon { font-size:20px; flex-shrink:0; }
.file-info { flex:1; min-width:0; }
.file-name { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-size { font-size:11px; color:var(--muted); }
.progress-ring { display:flex; align-items:center; gap:12px; }
.progress-ring canvas { flex-shrink:0; }
/* ── GANTT ── */
.crm-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:16px; }
.crm-tab {
  padding:8px 18px; font-size:12px; font-weight:600; cursor:pointer;
  color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:all .18s; text-transform:uppercase; letter-spacing:.05em;
}
.crm-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.crm-tab:hover:not(.active) { color:var(--text); }
/* ═══════════════════════════════════════════════════════════
   GANTT — profesionální vzhled
   ═══════════════════════════════════════════════════════════ */
.gantt-shell {
  position: relative;
  margin-top: 4px;
}
.gantt-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 4px;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--s1);
}
.gantt-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
}
/* ── Hlavičky ── */
.gantt-table thead th {
  background: var(--s2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 3;
}
.gantt-month {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  background: var(--s1);
}
.gantt-day {
  width: 36px;
  min-width: 36px;
  padding: 4px 0 6px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  border-left: 1px solid rgba(42,45,58,.5);
  position: relative;
}
.gantt-day-dow {
  display: block;
  font-size: 9px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
  font-weight: 500;
}
.gantt-day-num {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 22px;
  padding: 2px 0;
  border-radius: 50%;
  line-height: 1.4;
}
.gantt-day.is-weekend .gantt-day-dow,
.gantt-day.is-weekend .gantt-day-num {
  color: var(--muted-2);
  opacity: .55;
}
.gantt-day.is-today .gantt-day-dow {
  color: var(--danger);
  font-weight: 700;
}
.gantt-day.is-today .gantt-day-num {
  background: var(--danger);
  color: #fff;
  font-weight: 700;
}
/* ── Task column ── */
.gantt-task-head {
  text-align: left;
  background: var(--s2);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px 14px;
  min-width: 220px;
  position: sticky;
  left: 0;
  z-index: 4;
}
.gantt-task-count {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
/* ── Rows ── */
.gantt-row {
  height: 38px;
  transition: background var(--t-fast);
}
.gantt-row:hover {
  background: rgba(255,255,255,.025);
}
.gantt-row:hover .gantt-task-name {
  background: var(--s2);
}
.gantt-row.is-done .gantt-task-title {
  text-decoration: line-through;
  color: var(--muted);
}
.gantt-task-name {
  font-size: 13px;
  font-weight: 500;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 220px;
  min-width: 220px;
  position: sticky;
  left: 0;
  background: var(--s1);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid rgba(42,45,58,.5);
  z-index: 2;
  transition: background var(--t-fast);
}
.gantt-task-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gantt-task-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}
.gantt-task-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color var(--t-fast);
}
.gantt-row:hover .gantt-task-title {
  color: var(--accent);
}
.gantt-edit-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 3px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.gantt-row:hover .gantt-edit-btn {
  opacity: 1;
}
.gantt-edit-btn:hover {
  background: var(--s3);
  color: var(--accent);
}
/* ── Buňky ── */
.gantt-cell {
  border-left: 1px solid rgba(42,45,58,.4);
  border-bottom: 1px solid rgba(42,45,58,.35);
  height: 38px;
  position: relative;
  padding: 0;
}
.gantt-cell.is-weekend {
  background: rgba(255,255,255,.015);
}
.gantt-cell.is-today-col {
  background: rgba(244,63,94,.04);
}
/* ── NOW LINE ── vertikální linka s aktuálním časem napříč celým gantem */
.gantt-now-line {
  position: absolute;
  width: 1px;
  pointer-events: none;
  z-index: 5;
  /* Tenká linka s jemným fade nahoru a dolů — "marker" feel */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(244, 63, 94, 0) 3%,
    rgba(244, 63, 94, .75) 9%,
    rgba(244, 63, 94, .75) 91%,
    rgba(244, 63, 94, 0) 97%,
    transparent 100%
  );
  /* Velmi jemný 1-2px glow — viditelnost napříč baremi */
  filter: drop-shadow(0 0 2px rgba(244, 63, 94, .35));
}
/* Pin nahoře — kruhový marker s časem uvnitř */
.gantt-now-time {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--danger);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .03em;
  font-family: var(--font-mono);
  box-shadow:
    0 0 0 2px var(--bg),
    0 2px 8px rgba(244, 63, 94, .45),
    0 4px 12px rgba(0, 0, 0, .3);
  /* Subtle pulse animation pro "live" feel */
  animation: ganttNowPulse 3s ease-in-out infinite;
}
@keyframes ganttNowPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--bg), 0 2px 8px rgba(244,63,94,.45), 0 4px 12px rgba(0,0,0,.3); }
  50%      { box-shadow: 0 0 0 2px var(--bg), 0 2px 14px rgba(244,63,94,.65), 0 4px 18px rgba(0,0,0,.35); }
}
/* Drobný kotvící bod uprostřed — kruhový "tečka" kde linka začíná */
.gantt-now-line::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: var(--danger);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg);
}
/* Spodní kotvící bod — symetrie */
.gantt-now-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: rgba(244, 63, 94, .55);
  border-radius: 50%;
}
/* ── Bary ── */
.gantt-bar {
  position: absolute;
  top: 50%;
  left: 3px;
  right: 3px;
  transform: translateY(-50%);
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 2px 4px rgba(0,0,0,.25);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.gantt-bar:hover {
  transform: translateY(-50%) translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 6px 12px rgba(0,0,0,.35);
  filter: brightness(1.08);
}
.gantt-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.gantt-bar.is-done {
  opacity: .82;
}
.gantt-bar.is-overdue {
  animation: ganttOverduePulse 2.4s ease-in-out infinite;
}
@keyframes ganttOverduePulse {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 2px 4px rgba(0,0,0,.25), 0 0 0 0 rgba(244,63,94,.4); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 2px 4px rgba(0,0,0,.25), 0 0 0 6px rgba(244,63,94,0); }
}
/* ── Legenda ── */
.gantt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 12px;
  padding: 4px 0;
}
.gantt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
  background: var(--s2);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.gantt-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gantt-chip-today {
  color: #fff;
  font-weight: 600;
  background: var(--danger);
  border-color: var(--danger);
}
.gantt-no-dates {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: var(--s1);
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-top: 8px;
}
/* ── Responsive: kompaktnější na mobilu ── */
@media (max-width: 720px) {
  .gantt-day {
    width: 30px;
    min-width: 30px;
  }
  .gantt-task-head,
  .gantt-task-name {
    min-width: 140px;
    max-width: 140px;
  }
  .gantt-bar {
    font-size: 10px;
    padding: 0 6px;
  }
}
/* ── FAKTURACE ── */
.inv-grid { display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:start; }
.inv-list { display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 160px); overflow-y:auto; }
.inv-card {
  background:var(--s2); border:1px solid var(--border); border-radius:8px;
  padding:13px 15px; cursor:pointer; transition:all .18s;
}
.inv-card:hover { border-color:var(--accent); }
.inv-card.active { border-color:var(--accent); background:rgba(200,241,53,.04); }
.inv-number { font-size:13px; font-weight:700; font-family:monospace; }
.inv-customer { font-size:12px; color:var(--muted); margin-top:2px; }
.inv-amount { font-size:15px; font-weight:700; margin-top:6px; }
.inv-meta { display:flex; justify-content:space-between; align-items:center; margin-top:6px; flex-wrap:wrap; gap:4px; }
/* Stavy faktur */
.is-draft     { background:rgba(107,112,128,.15); color:var(--muted); }
.is-sent      { background:rgba(59,130,246,.15);  color:var(--blue); }
.is-paid      { background:rgba(200,241,53,.15);  color:var(--accent); }
.is-cancelled { background:rgba(244,63,94,.15);   color:var(--expense); }
/* Tisková faktura */
.invoice-print {
  background:#fff; color:#111; font-family:'Segoe UI',Arial,sans-serif;
  padding:40px 48px; max-width:820px; margin:0 auto; font-size:13px; line-height:1.5;
}
.inv-print-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; }
.inv-print-logo { max-height:60px; max-width:180px; object-fit:contain; }
.inv-print-title { font-size:26px; font-weight:700; color:#111; }
.inv-print-number { font-size:14px; color:#666; margin-top:4px; }
.inv-print-parties { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
.inv-print-party h4 { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#888; margin-bottom:8px; font-weight:600; }
.inv-print-party .name { font-size:15px; font-weight:700; margin-bottom:4px; }
.inv-print-dates { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; background:#f8f8f8; padding:14px 18px; border-radius:6px; margin-bottom:24px; }
.inv-print-dates div span { display:block; font-size:10px; text-transform:uppercase; color:#888; margin-bottom:2px; }
.inv-print-dates div strong { font-size:13px; }
.inv-items-table { width:100%; border-collapse:collapse; margin-bottom:20px; }
.inv-items-table th { background:#f0f0f0; padding:8px 12px; text-align:left; font-size:11px; text-transform:uppercase; color:#666; font-weight:600; }
.inv-items-table th:last-child, .inv-items-table td:last-child { text-align:right; }
.inv-items-table td { padding:9px 12px; border-bottom:1px solid #eee; font-size:13px; }
.inv-items-table tr:last-child td { border-bottom:none; }
.inv-totals { margin-left:auto; width:280px; }
.inv-totals table { width:100%; border-collapse:collapse; }
.inv-totals td { padding:5px 10px; font-size:13px; }
.inv-totals td:last-child { text-align:right; font-weight:600; }
.inv-totals .total-row td { font-size:16px; font-weight:700; border-top:2px solid #111; padding-top:10px; }
.inv-print-note { margin-top:24px; padding:14px; background:#f8f8f8; border-radius:6px; font-size:12px; color:#555; }
.inv-print-footer { margin-top:40px; padding-top:16px; border-top:1px solid #ddd; font-size:11px; color:#888; text-align:center; }
@media print {
  body > *:not(#invoice-print-frame) { display:none !important; }
  #invoice-print-frame { position:fixed;inset:0;background:#fff;z-index:99999; }
  .inv-no-print { display:none !important; }
}
/* ── NABÍDKY ── */
.offer-grid { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
.offer-list { display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 200px); overflow-y:auto; padding-right:2px; }
.offer-card {
  background:var(--s2); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; cursor:pointer; transition:all .18s;
}
.offer-card:hover  { border-color:var(--accent); }
.offer-card.active { border-color:var(--accent); background:rgba(200,241,53,.04); }
.offer-card-title  { font-size:13px; font-weight:600; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.offer-card-cust   { font-size:12px; color:var(--muted); }
.offer-card-meta   { display:flex; justify-content:space-between; align-items:center; margin-top:7px; flex-wrap:wrap; gap:4px; }
/* Stavy nabídek */
.os-created   { background:rgba(107,112,128,.15); color:var(--muted); }
.os-sent      { background:rgba(59,130,246,.15);  color:var(--blue); }
.os-waiting   { background:rgba(245,158,11,.15);  color:var(--warn); }
.os-confirmed { background:rgba(200,241,53,.15);  color:var(--accent); }
.os-done      { background:rgba(16,185,129,.15);  color:#10b981; }
.os-cancelled { background:rgba(244,63,94,.15);   color:var(--expense); }
.offer-detail-head { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.offer-detail-body { padding:18px 20px; }
.offer-items-table { width:100%; border-collapse:collapse; margin-bottom:16px; font-size:13px; }
.offer-items-table th { color:var(--muted); font-size:11px; text-transform:uppercase; padding:6px 10px; text-align:left; border-bottom:1px solid var(--border); font-weight:600; }
.offer-items-table td { padding:8px 10px; border-bottom:1px solid rgba(42,45,58,.4); vertical-align:top; }
.offer-items-table tr:last-child td { border-bottom:none; }
.offer-item-name { font-weight:500; margin-bottom:3px; }
.offer-item-desc { font-size:11px; color:var(--muted); }
/* ── STAVY POLOŽEK NABÍDKY ── */
.offer-item-row { position:relative; }
.offer-item-status-badge {
    display:inline-flex; align-items:center; gap:5px;
    margin-top:5px; font-size:11px; font-weight:700;
    padding:3px 9px; border-radius:4px; cursor:pointer;
    transition:all .15s; user-select:none;
}
.ois-badge-pending   { background:rgba(107,112,128,.15); color:var(--muted); }
.ois-badge-confirmed { background:rgba(200,241,53,.15);  color:var(--accent); }
.ois-badge-rejected  { background:rgba(244,63,94,.15);   color:var(--expense); }
.offer-item-status-menu {
    display:none; position:absolute; left:0; top:100%; z-index:20;
    background:var(--s1); border:1px solid var(--border); border-radius:8px;
    padding:4px; gap:4px; flex-direction:column; min-width:140px;
    box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.offer-item-status-menu.open { display:flex; }
.ois-menu-btn {
    font-size:12px; padding:6px 12px; border-radius:5px; border:none;
    background:transparent; cursor:pointer; text-align:left; font-weight:600;
    transition:background .12s; color:var(--text);
}
.ois-menu-btn:hover { background:var(--s2); }
.ois-menu-btn.active { background:var(--s2); }
/* ── WEB ADMIN ── */
.wa-layout { display:grid; grid-template-columns:220px 1fr; gap:0; min-height:70vh; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.wa-sidebar { background:var(--s2); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.wa-nav-item { padding:10px 16px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:10px; color:var(--muted); transition:all .15s; border-left:3px solid transparent; }
.wa-nav-item:hover { color:var(--text); background:rgba(255,255,255,.04); }
.wa-nav-item.active { color:var(--accent); border-left-color:var(--accent); background:rgba(200,241,53,.05); font-weight:600; }
.wa-nav-item .badge { margin-left:auto; background:var(--expense); color:#fff; border-radius:10px; font-size:10px; padding:1px 6px; }
.wa-content { background:var(--s1); overflow:auto; }
.wa-panel { padding:20px; display:none; }
.wa-panel.active { display:block; }
.wa-site-bar { padding:10px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; font-size:12px; }
.wa-site-select { flex:1; }
/* Editor */
.wa-editor { width:100%; min-height:400px; font-family:monospace; font-size:13px; line-height:1.6; resize:vertical; background:var(--s2); border:1px solid var(--border); border-radius:6px; padding:12px; color:var(--text); }
.wa-preview { background:#fff; border:1px solid var(--border); border-radius:6px; min-height:200px; padding:16px; color:#111; }
/* Blog */
.wa-post-card { background:var(--s2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:border-color .15s; }
.wa-post-card:hover { border-color:var(--accent); }
.wa-post-title { font-weight:600; font-size:14px; margin-bottom:4px; }
.wa-post-meta  { font-size:11px; color:var(--muted); display:flex; gap:10px; }
/* Leads */
.wa-lead-card { background:var(--s2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:8px; }
.wa-lead-card.new { border-left:3px solid var(--accent); }
.wa-lead-name { font-weight:600; font-size:13px; }
.wa-lead-meta { font-size:11px; color:var(--muted); margin-top:3px; }
.wa-lead-msg  { font-size:12px; margin-top:8px; color:var(--text); white-space:pre-wrap; }
/* Uptime */
.uptime-bar { display:flex; gap:2px; margin:10px 0; }
.uptime-dot { flex:1; height:20px; border-radius:2px; cursor:pointer; }
.up      { background:var(--accent); opacity:.8; }
.down    { background:var(--expense); }
.timeout { background:var(--warn); }
.unknown { background:var(--border); }
/* ── TIME LOG ── */
.timer-bar {
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:var(--s2); border:1px solid var(--border); border-radius:8px;
    margin-bottom:14px; flex-wrap:wrap;
}
.timer-display {
    font-family:monospace; font-size:22px; font-weight:700;
    color:var(--accent); letter-spacing:.05em; min-width:80px;
}
.timer-display.running { animation: timerPulse 2s ease-in-out infinite; }
@keyframes timerPulse { 0%,100%{opacity:1} 50%{opacity:.7} }
.timer-btn-start { background:var(--accent); color:#000; border:none; border-radius:6px; padding:7px 16px; font-weight:700; font-size:13px; cursor:pointer; transition:opacity .15s; }
.timer-btn-start:hover { opacity:.85; }
.timer-btn-stop  { background:var(--expense); color:#fff; border:none; border-radius:6px; padding:7px 16px; font-weight:700; font-size:13px; cursor:pointer; transition:opacity .15s; }
.timer-btn-stop:hover { opacity:.85; }
.timelog-entry { display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid rgba(42,45,58,.4); font-size:12px; }
.timelog-entry:last-child { border-bottom:none; }
.timelog-duration { font-family:monospace; font-weight:700; color:var(--accent); min-width:55px; }
/* Výkaz práce */
.report-day { margin-bottom:14px; }
.report-day-header { font-size:13px; font-weight:700; padding:8px 12px; background:var(--s2); border-radius:6px 6px 0 0; border:1px solid var(--border); display:flex; justify-content:space-between; }
.report-day-rows { border:1px solid var(--border); border-top:none; border-radius:0 0 6px 6px; overflow:hidden; }
.report-row { display:grid; grid-template-columns:90px 1fr 140px 80px; gap:10px; padding:7px 12px; font-size:12px; border-bottom:1px solid rgba(42,45,58,.3); align-items:center; }
.report-row:last-child { border-bottom:none; }
.report-row:hover { background:var(--s2); }
/* ── LIGHTBOX & IMAGE THUMBNAILS ── */
.file-thumb {
    width:56px; height:56px; border-radius:6px; object-fit:cover;
    cursor:pointer; border:2px solid var(--border);
    transition:transform .15s, border-color .15s;
    flex-shrink:0;
}
.file-thumb:hover { transform:scale(1.06); border-color:var(--accent); }
.file-item-img {
    display:flex; align-items:center; gap:10px;
    background:var(--s2); border-radius:7px; padding:8px 12px;
    border:1px solid var(--border);
}
#lightbox-overlay {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.92); align-items:center; justify-content:center;
    cursor:zoom-out;
}
#lightbox-overlay.open { display:flex; }
#lightbox-img {
    max-width:92vw; max-height:88vh; border-radius:8px;
    object-fit:contain; box-shadow:0 8px 40px rgba(0,0,0,.6);
    cursor:default;
}
#lightbox-caption {
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    color:#fff; font-size:13px; background:rgba(0,0,0,.6);
    padding:6px 16px; border-radius:20px; pointer-events:none;
}
#lightbox-close {
    position:fixed; top:16px; right:20px;
    color:#fff; font-size:28px; cursor:pointer; line-height:1;
    background:rgba(0,0,0,.4); border:none; border-radius:50%;
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
#lightbox-close:hover { background:rgba(255,255,255,.2); }
#lightbox-prev, #lightbox-next {
    position:fixed; top:50%; transform:translateY(-50%);
    color:#fff; font-size:24px; cursor:pointer; background:rgba(0,0,0,.4);
    border:none; border-radius:50%; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center; transition:background .15s;
}
#lightbox-prev { left:16px; }
#lightbox-next { right:16px; }
#lightbox-prev:hover, #lightbox-next:hover { background:rgba(255,255,255,.2); }
/* ── OSLOVOVÁNÍ ── */
.prosp-grid { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
.prosp-card {
    background:var(--s2); border:1px solid var(--border); border-radius:8px;
    padding:12px 14px; cursor:pointer; transition:all .18s; margin-bottom:8px;
}
.prosp-card:hover { border-color:var(--accent); }
.prosp-card.active { border-color:var(--accent); background:rgba(200,241,53,.04); }
.prosp-card-name { font-size:13px; font-weight:600; margin-bottom:3px; }
.prosp-card-meta { font-size:11px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
.ps-new        { background:rgba(107,112,128,.15); color:var(--muted); }
.ps-contacted  { background:rgba(59,130,246,.15);  color:var(--blue); }
.ps-interested { background:rgba(245,158,11,.15);  color:var(--warn); }
.ps-offer_sent { background:rgba(200,241,53,.15);  color:var(--accent); }
.ps-deal       { background:rgba(16,185,129,.15);  color:#10b981; }
.ps-rejected   { background:rgba(244,63,94,.15);   color:var(--expense); }
.before-after-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.ba-section { background:var(--s2); border-radius:8px; padding:14px; border:1px solid var(--border); }
.ba-section h4 { font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.ba-images { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.ba-thumb { width:80px; height:80px; border-radius:6px; object-fit:cover; cursor:pointer; border:2px solid var(--border); transition:all .15s; }
.ba-thumb:hover { border-color:var(--accent); transform:scale(1.05); }
.contact-item { background:var(--s2); border-radius:7px; padding:12px 14px; margin-bottom:8px; border-left:3px solid var(--border); }
.contact-item.phone   { border-left-color:var(--accent); }
.contact-item.email   { border-left-color:var(--blue); }
.contact-item.meeting { border-left-color:#10b981; }
/* ── KALENDÁŘ ── */
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.cal-nav { display:flex; align-items:center; gap:8px; }
.cal-nav h2 { font-size:18px; font-weight:700; min-width:180px; text-align:center; }
.cal-view-btns { display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.cal-view-btn { padding:6px 14px; font-size:12px; font-weight:600; border:none; background:transparent; cursor:pointer; color:var(--muted); transition:all .15s; }
.cal-view-btn.active { background:var(--accent); color:#000; }
/* Měsíční mřížka */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cal-day-head { background:var(--s2); padding:8px; text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.cal-day { background:var(--s1); min-height:90px; padding:6px; position:relative; transition:background .12s; cursor:pointer; }
.cal-day:hover { background:var(--s2); }
.cal-day.today { background:rgba(200,241,53,.06); }
.cal-day.other-month { background:var(--bg); opacity:.5; }
.cal-day-num { font-size:12px; font-weight:600; margin-bottom:4px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.cal-day.today .cal-day-num { background:var(--accent); color:#000; font-weight:700; }
.cal-event-pill {
    font-size:10px; padding:2px 6px; border-radius:3px; margin-bottom:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    cursor:pointer; font-weight:600; transition:opacity .12s;
    display:block;
}
.cal-event-pill:hover { opacity:.8; }
.cal-event-pill.task-pill { border-left:2px solid; }
.cal-more { font-size:10px; color:var(--muted); cursor:pointer; padding:1px 4px; }
.cal-more:hover { color:var(--accent); }
/* Týdenní zobrazení */
.cal-week-grid { display:grid; grid-template-columns:50px repeat(7,1fr); gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cal-week-head { background:var(--s2); padding:8px; text-align:center; font-size:11px; border-bottom:1px solid var(--border); }
.cal-time-col { background:var(--s2); border-right:1px solid var(--border); }
.cal-time-slot { height:50px; border-bottom:1px solid rgba(42,45,58,.3); padding:2px 4px; font-size:10px; color:var(--muted); }
.cal-week-col { position:relative; border-right:1px solid var(--border); }
.cal-week-slot { height:50px; border-bottom:1px solid rgba(42,45,58,.2); cursor:pointer; transition:background .1s; }
.cal-week-slot:hover { background:rgba(200,241,53,.05); }
/* Denní zobrazení */
.cal-day-view { display:grid; grid-template-columns:50px 1fr; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
/* Event detail popup */
.cal-popup {
    position:fixed; z-index:500; background:var(--s1); border:1px solid var(--border);
    border-radius:10px; padding:16px; width:280px;
    box-shadow:0 8px 32px rgba(0,0,0,.4); animation:fadeIn .15s ease;
}
.cal-popup-title { font-size:14px; font-weight:700; margin-bottom:8px; }
.cal-popup-meta  { font-size:12px; color:var(--muted); margin-bottom:4px; }
/* Barevné typy */
.ev-event    { background:rgba(59,130,246,.8);  color:#fff; }
.ev-reminder { background:rgba(245,158,11,.8);  color:#000; }
.ev-meeting  { background:rgba(139,92,246,.8);  color:#fff; }
.ev-task     { color:#fff; }
/* ── PARTNERSKÝ PROGRAM ── */
.partner-code-badge {
    font-family:monospace; font-size:16px; font-weight:800; letter-spacing:.15em;
    background:var(--s2); border:1px solid var(--border); border-radius:6px;
    padding:6px 14px; color:var(--accent); display:inline-block;
    user-select:all; cursor:pointer; transition:border-color .15s;
}
.partner-code-badge:hover { border-color:var(--accent); }
.referral-row { padding:10px 14px; border-bottom:1px solid rgba(42,45,58,.4); display:grid; grid-template-columns:90px 1fr 100px 110px 120px 100px; gap:8px; align-items:center; font-size:12px; }
.referral-row:last-child { border-bottom:none; }
.pstatus-pending     { background:rgba(245,158,11,.15); color:var(--warn); }
.pstatus-paid        { background:rgba(16,185,129,.15); color:#10b981; }
.pstatus-budget_added { background:rgba(200,241,53,.15); color:var(--accent); }
.pstatus-cancelled   { background:rgba(244,63,94,.15);  color:var(--expense); }
.budget-card { background:linear-gradient(135deg,rgba(200,241,53,.08),rgba(200,241,53,.02)); border:1px solid rgba(200,241,53,.3); border-radius:10px; padding:16px 20px; }
/* ═══ MISC — neznámé sekce ═══ */
/* ── HLÍDACÍ PES ── */
.wd-item {
    background:var(--s2); border:1px solid var(--border); border-radius:8px;
    padding:12px 14px; margin-bottom:8px; transition:border-color .15s;
}
.wd-item.expiring   { border-left:3px solid var(--warn); }
.wd-item.expired    { border-left:3px solid var(--expense); opacity:.7; }
.wd-item.ok         { border-left:3px solid #10b981; }
.wd-days-badge {
    font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; flex-shrink:0;
}
.wd-days-ok       { background:rgba(16,185,129,.15); color:#10b981; }
.wd-days-warn     { background:rgba(245,158,11,.15);  color:var(--warn); }
.wd-days-critical { background:rgba(244,63,94,.15);   color:var(--expense); }
@media print {
    /* Skryj vše co není obsah */
    aside, nav, .sidebar,
    .overlay, .modal,
    #invite-overlay, #wd-overlay, #te-overlay,
    #cal-event-overlay, #contact-overlay, #email-tpl-overlay,
    #prosp-overlay, #referral-overlay, #budget-use-overlay,
    #paste-overlay, #lightbox-overlay, #cal-popup,
    #notif-panel, #notif-backdrop,
    #partner-detail-panel, #wd-panel, #wd-backdrop,
    #partner-settings-container,
    .page:not(.active),
    .page-header .btn, .page-header button,
    .btn-row, .nav-item,
    .table-head button, .form-box button { display: none !important; }
    /* Layout */
    body { margin: 0 !important; }
    .layout { display: block !important; }
    .main { margin-left: 0 !important; padding: 10px !important; }
    .page.active { display: block !important; }
}
/* ── TIKETY ── */
.tk-status-new              { background:rgba(107,114,128,.2);  color:#9ca3af; }
.tk-status-in_review        { background:rgba(59,130,246,.15);  color:#60a5fa; }
.tk-status-waiting_customer { background:rgba(245,158,11,.15);  color:var(--warn); }
.tk-status-confirmed        { background:rgba(200,241,53,.15);  color:var(--accent); }
.tk-status-in_progress      { background:rgba(139,92,246,.15);  color:#a78bfa; }
.tk-status-resolved         { background:rgba(16,185,129,.15);  color:#34d399; }
.tk-status-closed           { background:rgba(75,85,99,.2);     color:#6b7280; }
.tk-row { cursor:pointer; transition:background .12s; }
.tk-row:hover { background:var(--s2); }
.tk-comment-admin    { background:rgba(59,130,246,.08);  border-left:3px solid #60a5fa;  padding:10px 14px; border-radius:0 6px 6px 0; margin-bottom:8px; }
.tk-comment-customer { background:rgba(200,241,53,.06);  border-left:3px solid var(--accent); padding:10px 14px; border-radius:0 6px 6px 0; margin-bottom:8px; }
.tk-tab { padding:8px 16px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; transition:all .15s; }
.tk-tab.active { color:var(--text); border-bottom-color:var(--accent); }
#tk-detail-overlay { position:fixed;inset:0;z-index:450;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center; }
#tk-detail-overlay.open { display:flex; }
#tk-detail-box { background:var(--s1);border:1px solid var(--border);border-radius:10px;width:700px;max-width:96vw;max-height:90vh;display:flex;flex-direction:column; }
/* === _overrides.css === */
/* ═══════════════════════════════════════════════════════════
   OVERRIDES — opravy a doplňky k legacy CSS
   ───────────────────────────────────────────────────────────
   Tento soubor se načítá POSLEDNÍ a override-uje původní
   komponenty. Slouží jako "diff vrstva" — postupně se z něj
   bude vyjímat do tokens/base/components, jak procházíme
   refaktorem.
   ═══════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────
   1) iOS Safari zoom fix
      Inputy/selecty/textarea musí mít ≥16px na mobilu,
      jinak iOS zoomne při focusu. Desktop si zachová kompakt.
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  input, select, textarea,
  .login-box input,
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: var(--fs-md);   /* 16px */
  }
}
/* ─────────────────────────────────────────────────────────
   2) BUTTON nav-item — z <div> na <button>
      Resetujeme native styly tlačítka, jinak <button>
      přebírá příliš mnoho z user-agentu.
   ───────────────────────────────────────────────────────── */
.nav-item {
  width: 100%;
  text-align: left;
  font: inherit;
  background: transparent;   /* override native button */
}
.nav-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* nav-badge a timer-indicator (přesun z inline style) */
.nav-badge {
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  padding: 1px 6px;
  margin-left: var(--sp-1);
  font-weight: 700;
}
.timer-indicator {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 4px;
  animation: timerPulse 2s infinite;
}
/* ─────────────────────────────────────────────────────────
   3) SIDEBAR — user row v hlavičce
      Refactor inline stylů z původního sidebar logo wrapperu.
   ───────────────────────────────────────────────────────── */
.sidebar-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.sb-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-username {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sb-role {
  margin: 0;
  font-size: 9px;
  padding: 1px 5px;
}
.btn-sidebar-logout {
  color: var(--muted);
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color var(--t);
}
.btn-sidebar-logout:hover { color: var(--danger); }
/* ─────────────────────────────────────────────────────────
   4) MOBILNÍ DRAWER (< 880px)
      Místo původního "sidebar 58px ikon" přepneme na drawer
      ovládaný hamburgerem. Desktop se nemění.
   ───────────────────────────────────────────────────────── */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: calc(var(--z-sidebar) + 1);
  width: 40px; height: 40px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  align-items: center;
  justify-content: center;
  transition: background var(--t);
}
.sidebar-toggle:hover { background: var(--s2); }
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}
.sidebar-backdrop[hidden] { display: none; }
.sidebar-backdrop.open    { opacity: 1; pointer-events: all; display: block; }
@media (max-width: 880px) {
  .sidebar-toggle { display: inline-flex; }
  /* Override původního "58px collapsed" na full drawer */
  .sidebar {
    width: 260px !important;            /* override z původních 58px */
    transform: translateX(-100%);
    transition: transform var(--t-slow);
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  /* Vrátíme zpět texty (byly schované v původním responsive bloku) */
  .sidebar-logo,
  .nav-item span,
  .sidebar-footer .user-name,
  .sidebar-footer .user-role,
  .btn-logout {
    display: revert !important;
  }
  .nav-item {
    justify-content: flex-start !important;
    padding: 10px 18px !important;
  }
  /* Hlavní obsah už nemá levý odsazení */
  .main { margin-left: 0 !important; padding-top: 64px !important; }
}
/* ─────────────────────────────────────────────────────────
   5) LOGIN — password toggle, form polish
   ───────────────────────────────────────────────────────── */
.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 44px; }
.login-pw-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(calc(-50% - 7px));   /* kompenzace mb na inputu */
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t);
}
.login-pw-toggle:hover { color: var(--text); background: var(--s3); }
.login-user-hint {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.login-user-hint[hidden] { display: none; }
.btn-login-logout {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 11px;
  font-size: 11px;
  color: var(--muted);
  transition: border-color var(--t), color var(--t);
}
.btn-login-logout:hover {
  border-color: var(--danger);
  color: var(--danger);
}
/* ─────────────────────────────────────────────────────────
   6) BUTTON loading state — když probíhá API request
   ───────────────────────────────────────────────────────── */
.btn[aria-busy="true"] {
  color: transparent !important;
  position: relative;
  pointer-events: none;
}
.btn[aria-busy="true"]::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--text);
  animation: spin .7s linear infinite;
}
.btn-primary[aria-busy="true"]::after { color: var(--bg); }
/* ─────────────────────────────────────────────────────────
   7) MODAL — focus trap + better backdrop
   ───────────────────────────────────────────────────────── */
.overlay:not([hidden]) {
  /* žádná změna — jen ujistit, že přiřazený role="dialog" funguje */
}
.modal:focus-visible { outline: none; box-shadow: var(--shadow-lg); }
/* ─────────────────────────────────────────────────────────
   8) TABULKY → KARTY NA MOBILU
      Generický pattern: každé <td> musí mít data-label="…"
      (refaktor render funkcí v JS — zatím připraveno CSS).
   ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap th,
  .table-wrap td,
  .table-wrap tr {
    display: block;
  }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: var(--sp-2);
  }
  .table-wrap td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border: none;
    gap: var(--sp-3);
  }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .04em;
    flex-shrink: 0;
  }
  .table-wrap td:empty,
  .table-wrap td[data-label=""]::before { display: none; }
}
/* ─────────────────────────────────────────────────────────
   9) NOTIF PANEL — backdrop pro mobil, fullscreen
   ───────────────────────────────────────────────────────── */
.notif-panel[aria-hidden="false"] { transform: translateX(0); }
@media (max-width: 600px) {
  .notif-panel {
    width: 100vw;
    max-width: none;
  }
}
/* ─────────────────────────────────────────────────────────
   10) HIDDEN — utility
       <element hidden> má display:none; ale specificita někdy
       prohraje s class. Tady ji posílíme.
   ───────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
/* ─────────────────────────────────────────────────────────
   11) LOGIN — redesign pokusů (Krok C+)
   - 5 teček (rate limit 5/hod)
   - Zarovnaný label nad tečky, vycentrované
   - Jemnější animace přechodů
   ───────────────────────────────────────────────────────── */
.attempts-row {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.attempts-label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
.attempts-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
/* Override starých stylů .attempt-dot — větší, kruhový, příjemnější přechod */
.attempts-dots .attempt-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0;
  transition: background var(--t), transform var(--t);
}
.attempts-dots .attempt-dot.used {
  background: var(--border-2);
  transform: scale(.85);
}
/* Blokace = všech 5 červených s pulzem */
.attempts-dots.blocked .attempt-dot {
  background: var(--danger);
  animation: attemptPulse 1.6s ease-in-out infinite;
}
@keyframes attemptPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.9); }
}
/* ─────────────────────────────────────────────────────────
   12) NOTIF BACKDROP — pro zavření kliknutím mimo panel
   ───────────────────────────────────────────────────────── */
.notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: calc(var(--z-notif) - 1);
  cursor: pointer;
}
/* ─────────────────────────────────────────────────────────
   13) ARES UI v modalu zákazníka
   ───────────────────────────────────────────────────────── */
.ares-search-wrap input {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--t);
}
.ares-search-wrap input:focus {
  border-color: var(--accent);
}
.ares-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
}
.ares-suggest[hidden] { display: none; }
.ares-suggest-item {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.ares-suggest-item:last-child { border-bottom: none; }
.ares-suggest-item:hover,
.ares-suggest-item.active {
  background: var(--s3);
}
.ares-suggest-item .ares-name {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 2px;
  line-height: 1.3;
}
.ares-suggest-item .ares-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.ares-suggest-item .ares-meta strong {
  color: var(--text-2);
  font-weight: 500;
}
.ares-status {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--muted);
  z-index: 9;
}
.ares-status[hidden] { display: none; }
.ares-status.error { color: var(--danger); border-color: rgba(244,63,94,.3); }
.ares-status .spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
.ares-mini-btn {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  letter-spacing: .04em;
  transition: background var(--t), border-color var(--t);
}
.ares-mini-btn:hover {
  background: var(--accent);
  color: var(--bg);
}
.ares-mini-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.ares-mini-btn[aria-busy="true"]::after {
  content: '';
  display: inline-block;
  width: 9px; height: 9px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  margin-left: 6px;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}
/* Flash highlight pro vyplněná pole */
@keyframes aresHighlight {
  0%   { background: var(--accent-soft); }
  100% { background: var(--s2); }
}
.ares-filled {
  animation: aresHighlight 900ms ease-out;
}
/* ─────────────────────────────────────────────────────────
   14) TICKET DETAIL OVERLAY — kompletní struktura
   ───────────────────────────────────────────────────────── */
#tk-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-tk-detail);
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0;
}
#tk-detail-overlay.open { display: flex; }
.tk-detail-panel {
  background: var(--s1);
  border-left: 1px solid var(--border);
  width: 640px;
  max-width: 96vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tkDetailSlideIn 220ms cubic-bezier(.4,0,.2,1);
}
@keyframes tkDetailSlideIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}
.tk-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tk-detail-meta {
  flex-shrink: 0;
}
.tk-detail-num {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}
.tk-detail-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}
.tk-detail-head .close-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--muted);
  border-radius: 6px;
  transition: background var(--t-fast), color var(--t-fast);
}
.tk-detail-head .close-btn:hover {
  background: var(--s3);
  color: var(--text);
}
.tk-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--s1);
}
.tk-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.tk-tab:hover { color: var(--text); }
.tk-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tk-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
/* Komentáře v tiket detailu */
.tk-comment-admin, .tk-comment-customer {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 8px;
}
.tk-comment-admin {
  background: rgba(59,130,246,.08);
  border-left: 3px solid var(--blue);
}
.tk-comment-customer {
  background: var(--s2);
  border-left: 3px solid var(--border);
}
@media (max-width: 720px) {
  .tk-detail-panel {
    width: 100vw;
    max-width: 100vw;
  }
}
/* ─────────────────────────────────────────────────────────
   15) TIMELOG — timer banner + idle + filtry
   ───────────────────────────────────────────────────────── */
/* Shared: skrytý */
.tl-timer-bar[hidden],
.tl-idle-bar[hidden] { display: none !important; }
/* ── Running banner ── */
.tl-timer-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(200, 241, 53, .06);
  border: 1px solid rgba(200, 241, 53, .25);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tl-timer-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.tl-timer-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: timerPulse 2s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,241,53,.6); }
  50%      { box-shadow: 0 0 0 6px rgba(200,241,53,0); }
}
.tl-timer-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.tl-timer-task {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-timer-bar-center {
  display: flex;
  align-items: center;
}
.timer-display {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: .04em;
  white-space: nowrap;
}
.tl-timer-bar-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.tl-timer-stop-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background var(--t), transform var(--t-fast);
}
.tl-timer-stop-btn:hover {
  background: #e11d48;
  transform: translateY(-1px);
}
.tl-timer-stop-btn:active {
  transform: translateY(0);
}
/* ── Idle bar ── */
.tl-idle-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 16px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
}
.tl-idle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.tl-idle-text {
  font-size: 13px;
  color: var(--muted);
}
/* ── Filtry ── */
.tl-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.tl-filters select {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
}
.tl-filters select:focus {
  border-color: var(--accent);
  outline: none;
}
/* ═══════════════════════════════════════════════════════════
   16) LAYOUT UTILITIES — sjednocené komponenty všech stránek
   ═══════════════════════════════════════════════════════════ */
/* ── Filter bar — sjednocený pro všechny stránky ── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filter-bar select,
.filter-bar input[type="text"] {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  height: 34px;
  transition: border-color var(--t-fast);
}
.filter-bar select:focus,
.filter-bar input:focus {
  border-color: var(--accent);
  outline: none;
}
/* Šířky na různých filtrech */
.filter-bar .f-year     { width: 92px; }
.filter-bar .f-month    { width: 118px; }
.filter-bar .f-status   { width: 158px; }
.filter-bar .f-customer { width: 168px; }
.filter-bar .f-user     { width: 150px; }
.filter-bar .f-project  { width: 190px; }
.filter-bar .f-search   { flex: 1; min-width: 130px; max-width: 220px; }
.filter-bar .f-sort     { width: 145px; }
.filter-bar .f-wide     { flex: 1; min-width: 160px; }
.filter-bar .f-spacer   { flex: 1; }
.filter-bar .f-right    { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.filter-bar .f-label    { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* ── Cards — sjednocený grid ── */
.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.cards-row-wide {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* ── Page subtitle ── */
.page-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}
/* ── Split layout (list + detail) ── */
.split-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  min-height: 0;
}
.split-layout .split-list {
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.split-layout .split-detail {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 300px;
}
@media (max-width: 900px) {
  .split-layout {
    grid-template-columns: 1fr;
  }
  .split-layout .split-list {
    max-height: 40vh;
  }
}
/* ── Empty state ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  gap: 10px;
}
.empty-state .empty-icon {
  font-size: 40px;
  margin-bottom: 4px;
  opacity: .6;
}
.empty-state strong {
  color: var(--text-2);
  font-size: 15px;
}
/* ── Section divider ── */
.section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
/* ═══════════════════════════════════════════════════════════
   17) PAGE TABS — tab přepínač v page-header (CRM)
   ═══════════════════════════════════════════════════════════ */
.page-tabs {
  display: flex;
  gap: 0;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}
.page-tab {
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 3px);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--t-fast), color var(--t-fast);
}
.page-tab:hover { color: var(--text); }
.page-tab.active {
  background: var(--s1);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.page-tab .nav-badge {
  font-size: 9px;
  padding: 1px 5px;
  margin-left: 2px;
}
/* ═══════════════════════════════════════════════════════════
   18) NOTICE BAR — follow-up a varování
   ═══════════════════════════════════════════════════════════ */
.notice-bar {
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.notice-warn {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.3);
  color: var(--warn);
}
.notice-info {
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.25);
  color: var(--blue-2);
}
.notice-bar[hidden] { display: none !important; }
/* ═══════════════════════════════════════════════════════════
   19) CALENDAR HEADER — ovládání kalendáře
   ═══════════════════════════════════════════════════════════ */
.cal-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-controls .f-user    { width: 140px; }
.cal-controls .f-search  { width: 140px; }
.cal-controls select,
.cal-controls input {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  height: 32px;
}
.cal-controls select:focus,
.cal-controls input:focus {
  border-color: var(--accent);
  outline: none;
}
/* ═══════════════════════════════════════════════════════════
   20) CRM FILTERS — search + status v CRM levém panelu
   ═══════════════════════════════════════════════════════════ */
.crm-left .filter-bar {
  padding: 8px 10px;
  background: transparent;
}
.crm-left .filter-bar select {
  width: 100%;
}
/* ═══════════════════════════════════════════════════════════
   21) SPLIT LAYOUT — pro offers, invoices, prospecting
   ═══════════════════════════════════════════════════════════ */
.inv-grid,
.offer-grid,
.prosp-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
}
.inv-list,
.offer-list,
#prosp-list {
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  padding-right: 2px;
}
.inv-detail,
.offer-detail,
#prosp-detail,
#offer-detail,
#inv-detail {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 300px;
}
@media (max-width: 900px) {
  .inv-grid,
  .offer-grid,
  .prosp-grid {
    grid-template-columns: 1fr;
  }
  .inv-list,
  .offer-list,
  #prosp-list {
    max-height: 40vh;
  }
}
/* ═══════════════════════════════════════════════════════════
   22) EMPTY STATE — sjednocené na celou appku
   ═══════════════════════════════════════════════════════════ */
/* Opravit staré crm-empty aby používalo nový styl */
.crm-empty,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  gap: 8px;
}
.crm-empty > div:first-child,
.empty-state .empty-icon {
  font-size: 38px;
  margin-bottom: 4px;
  opacity: .6;
}
.empty-state strong {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════
   23) PAGE HEADER — konzistentní šířka a zarovnání
   ═══════════════════════════════════════════════════════════ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-header > div:first-child {
  min-width: 0;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.2;
  color: var(--text);
}