:root{
  --ink: #6366F1;
  --ink-2: #4F46E5;
  --paper: #12142B;
  --paper-2: #1D2142;
  --amber: #F472B6;
  --amber-2: #FB923C;
  --rust: #F87171;
  --tint-rgb: 255,255,255;
  --bar-bg-rgb: 18,20,43;
  --line: rgba(var(--tint-rgb),0.09);
  --text: #F3F4FB;
  --text-dim: #8B90B8;
  --ok: #34D399;
  --bad: #F87171;
  --cyan: #22D3EE;
  --lime: #A3E635;
  --violet2: #A78BFA;
  --blue2: #60A5FA;
  --radius: 20px;
  --sidebar-w: 310px;
  --glass-bg: rgba(29,33,66,0.52);
  --glass-bg-2: rgba(29,33,66,0.72);
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
/* ============ СВЕТЛА ТЕМА (Настройки → Тема) ============
   Само повърхности/текст/тинтове се обръщат — наситената акцентна палитра
   (--ink, --amber, --ok, --bad, --cyan, --lime, --violet2, --blue2) остава
   същата и в двете теми, защото вече е достатъчно контрастна на бял фон. */
:root[data-theme="light"]{
  --paper: #F3F4FA;
  --paper-2: #E7E9F5;
  --text: #1B1E33;
  --text-dim: #5B6081;
  --tint-rgb: 15,23,42;
  --bar-bg-rgb: 244,245,250;
  --glass-bg: rgba(255,255,255,0.68);
  --glass-bg-2: rgba(255,255,255,0.85);
}
:root[data-theme="light"] .navbtn.active{ color: var(--ink-2); }
:root[data-theme="light"] .tag{ color: var(--ink-2); }
:root[data-theme="light"] .m-tag{ color: var(--ink-2); }
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x:hidden;
}
/* Ambient blurred glow blobs behind the glass panels */
body::before, body::after{
  content:''; position:fixed; z-index:0; border-radius:50%; pointer-events:none;
  filter: blur(10px);
}
body::before{
  width:640px; height:640px; top:-220px; right:-160px;
  background: radial-gradient(circle, rgba(139,92,246,0.35), transparent 65%);
}
body::after{
  width:560px; height:560px; bottom:-200px; left:220px;
  background: radial-gradient(circle, rgba(34,211,238,0.22), transparent 65%);
}
.bg-blob-3{
  content:''; position:fixed; z-index:0; pointer-events:none; border-radius:50%;
  width:480px; height:480px; top:40%; right:15%;
  background: radial-gradient(circle, rgba(244,114,182,0.16), transparent 65%);
  filter: blur(10px);
}
h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
  color: var(--text);
}
.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
button{ font-family: inherit; }
::selection{ background: var(--ink); color: #fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: rgba(var(--tint-rgb),0.12); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(var(--tint-rgb),0.2); }

/* ===== App shell: sidebar + main ===== */
.app-shell{ position:relative; z-index:1; display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w); flex-shrink:0;
  position: sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-right: 1px solid var(--line);
  z-index: 20;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding: 26px 24px 20px 24px;
  font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing:-0.01em;
}
.sidebar-brand .dot{
  width:12px;height:12px;border-radius:50%;
  background: linear-gradient(135deg, var(--ink), var(--amber));
  box-shadow: 0 0 14px rgba(244,114,182,0.7);
  display:inline-block; flex-shrink:0;
}
.sidebar-nav{
  flex:1; overflow-y:auto; padding: 4px 14px; display:flex; flex-direction:column; gap:3px;
}
.navbtn{
  display:flex; flex-direction:row; align-items:center; gap:14px;
  padding: 13px 14px; border-radius:13px; border:none; background:none;
  color: var(--text-dim); cursor:pointer; text-align:left; width:100%;
  font-size:14px; position:relative;
}
.navbtn:hover{ background: rgba(var(--tint-rgb),0.05); color: var(--text); }
.navbtn .ic{ font-size:21px; line-height:1; width:24px; text-align:center; flex-shrink:0; }
.navbtn .lb{ font-size:22.5px; font-weight:600; letter-spacing:0.01em; }
.navbtn.active{
  background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(167,139,250,0.12));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(139,92,246,0.35);
}
.navbtn.active::before{
  content:''; position:absolute; left:-14px; top:8px; bottom:8px; width:3px; border-radius:3px;
  background: linear-gradient(180deg, var(--ink), var(--amber));
}
.sidebar-footer{
  padding: 14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.iconbtn{
  background: rgba(var(--tint-rgb),0.05);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 11px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor:pointer;
  display:flex; align-items:center; gap:8px;
  width:100%;
}
.iconbtn:hover{ background: rgba(var(--tint-rgb),0.1); }

.main-area{ flex:1; min-width:0; position:relative; z-index:1; }
main{ padding: 40px 44px 60px 44px; max-width: 1180px; margin: 0 auto; }

/* Sticky section header (title, stats, actions, filters) */
.sticky-head{
  position: sticky; top: 0; z-index: 15;
  margin: -40px -44px 22px -44px;
  padding: 32px 44px 18px 44px;
  background: rgba(var(--bar-bg-rgb),0.86);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.sticky-head .section-sub{ margin-bottom: 0; }
.sticky-head > *:not(:last-child){ margin-bottom: 14px; }
.sticky-head .eyebrow, .sticky-head .section-title{ margin-bottom: 0; }

/* Drag & drop sortable items */
[data-sort-id]{ cursor: grab; }
[data-sort-id]:active{ cursor: grabbing; }
[data-sort-id].dragging{ opacity: 0.35; }
.drag-handle{
  cursor: grab; color: var(--text-dim); font-size: 15px; padding: 4px 6px;
  user-select: none; flex-shrink:0;
}
.drag-handle:active{ cursor: grabbing; }

.section{ display:none; animation: fadein .2s ease; }
.section.active{ display:block; }
@keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 6px;
}
.section-title{ font-size: 32px; margin-bottom: 4px; }
.section-sub{ color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }

/* ===== Glass cards ===== */
.card{
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.28), inset 0 1px 0 rgba(var(--tint-rgb),0.05);
}
.card h3{ font-size: 15.5px; margin-bottom: 12px; }

/* Two-column / grid layout utilities for desktop */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:start; }
.two-col > *{ margin-bottom:0; }
.card-grid{ column-count: 3; column-gap: 18px; }
.card-grid > .card{ break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 1200px){ .card-grid{ column-count: 2; } }
@media (max-width: 760px){ .card-grid{ column-count: 1; } .two-col{ grid-template-columns: 1fr; } }

/* Dashboard stat grid */
.stat-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 16px;
  margin-bottom: 20px;
}
.stat-card{
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  padding: 18px 18px 16px 18px;
  position: relative;
  overflow:hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(var(--tint-rgb),0.05);
}
.stat-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.stat-card .label{ font-size: 11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-dim); margin-bottom: 8px; }
.stat-card .value{ font-family: var(--font-mono); font-size: 26px; font-weight: 700; }
.stat-card .sub{ font-size: 11.5px; color: var(--text-dim); margin-top: 5px; }

.stat-grid > .stat-card:nth-child(1)::before{ background: linear-gradient(90deg, var(--amber), var(--violet2)); }
.stat-grid > .stat-card:nth-child(1) .value{ background: linear-gradient(90deg, var(--amber), var(--violet2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-grid > .stat-card:nth-child(2)::before{ background: linear-gradient(90deg, var(--cyan), var(--blue2)); }
.stat-grid > .stat-card:nth-child(2) .value{ background: linear-gradient(90deg, var(--cyan), var(--blue2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-grid > .stat-card:nth-child(3)::before{ background: linear-gradient(90deg, var(--lime), var(--ok)); }
.stat-grid > .stat-card:nth-child(3) .value{ background: linear-gradient(90deg, var(--lime), var(--ok)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-grid > .stat-card:nth-child(4)::before{ background: linear-gradient(90deg, var(--amber-2), var(--amber)); }
.stat-grid > .stat-card:nth-child(4) .value{ background: linear-gradient(90deg, var(--amber-2), var(--amber)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Forms */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid.single{ grid-template-columns: 1fr; }
.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field label{ font-size: 11.5px; font-weight:600; color: var(--text-dim); text-transform:uppercase; letter-spacing:0.03em; }
.field input, .field select, .field textarea{
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: rgba(var(--tint-rgb),0.04);
  color: var(--text);
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}
.field textarea{ resize: vertical; min-height: 80px; font-family: var(--font-body); }
.btn{
  border:none; border-radius: 12px; padding: 11px 18px;
  font-weight:700; font-size:14px; cursor:pointer;
  background: linear-gradient(135deg, var(--ink), var(--violet2));
  color: #fff;
  width:100%;
  box-shadow: 0 8px 22px rgba(99,102,241,0.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(99,102,241,0.45); }
.btn:active{ transform: translateY(0); background: linear-gradient(135deg, var(--ink-2), var(--ink)); }
.btn.secondary{ background: rgba(var(--tint-rgb),0.06); color: var(--text); border: 1.5px solid var(--line); box-shadow:none; }
.btn.secondary:hover{ background: rgba(var(--tint-rgb),0.1); box-shadow:none; }
.btn.danger{ background: var(--rust); background-image:none; color:#fff; box-shadow: 0 8px 22px rgba(248,113,113,0.3); }
.btn.small{ width:auto; padding: 8px 14px; font-size:12.5px; }

/* Lists */
.list-item{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
  gap: 12px;
}
.list-item:last-child{ border-bottom:none; }
.list-item .li-main{ flex:1; min-width:0; }
.list-item .li-title{ font-weight:600; font-size:14.5px; color: var(--text); }
.list-item .li-meta{ font-size:12.5px; color:var(--text-dim); margin-top:3px; }
.list-item .li-tags{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.tag{
  font-size: 10.5px; font-weight:700; padding:3px 9px; border-radius: 20px;
  background: rgba(99,102,241,0.18); color: #C7C9FB; text-transform:uppercase; letter-spacing:0.02em;
}
.li-amount{ font-family: var(--font-mono); font-weight:700; font-size:15px; white-space:nowrap; }
.li-amount.neg{ color: var(--bad); }
.li-amount.pos{ color: var(--ok); }
.li-actions{ display:flex; align-items:center; gap:5px; }
.li-del, .li-edit{
  background:none; border:none; color: var(--text-dim); cursor:pointer; font-size: 16px;
  padding: 5px 6px; line-height:1; border-radius:8px;
}
.li-del:hover{ color: var(--bad); background: rgba(248,113,113,0.1); }
.li-edit:hover{ color: var(--ink); background: rgba(99,102,241,0.14); }
.li-edit{ font-size:15px; }
.tag-edit-input{
  font-family: var(--font-body); font-size: 14.5px; font-weight:600;
  padding: 8px 10px; border-radius: 9px; border: 1.5px solid var(--line);
  background: rgba(var(--tint-rgb),0.04); color: var(--text); width:100%;
}
.tag-edit-input:focus{ outline: 2px solid var(--ink); outline-offset:1px; border-color: var(--ink); }

.empty{
  text-align:center; padding: 34px 10px; color: var(--text-dim); font-size: 14px;
}

/* Filter chips */
.chiprow{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; }
.chip{
  flex-shrink:0; padding:8px 15px; border-radius:20px; border:1.5px solid var(--line);
  background: rgba(var(--tint-rgb),0.04); font-size:13px; font-weight:600; cursor:pointer; color: var(--text-dim);
}
.chip:hover{ color: var(--text); }
.chip.active{ background: linear-gradient(135deg, var(--ink), var(--violet2)); color: #fff; border-color: transparent; }

/* Subtabs (Финанси) */
.subtabs{ display:flex; gap:6px; margin-bottom:18px; background: rgba(var(--tint-rgb),0.04); border-radius: 13px; padding:5px; }
.subtab{
  flex:1; text-align:center; padding: 9px 8px; border-radius: 10px; font-size: 13.5px; font-weight:700;
  cursor:pointer; color: var(--text-dim); background:transparent;
}
.subtab.active{ background: var(--glass-bg-2); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.subpane{ display:none; }
.subpane.active{ display:block; }

/* Chart card */
.chart-wrap{ position:relative; height: 260px; }
.chart-wrap.small{ height:200px; }

/* Toast */
.toast{
  position: fixed; left:50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, var(--ink), var(--violet2)); color: #fff; padding: 12px 20px; border-radius: 30px;
  font-size: 13.5px; font-weight:600; opacity:0; pointer-events:none; transition: all .25s ease;
  z-index: 50; white-space: nowrap;
  box-shadow: 0 10px 28px rgba(99,102,241,0.4);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* Modal - centered dialog on desktop */
.modal-overlay{
  position: fixed; inset:0; background: rgba(6,7,18,0.65);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index:40;
  display:none; align-items:center; justify-content:center;
  padding: 24px;
}
.modal-overlay.show{ display:flex; }
.modal{
  background: var(--glass-bg-2);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  width:100%; max-width:520px; border-radius: 22px;
  padding: 26px 26px 26px 26px;
  max-height: 86vh; overflow-y:auto;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(var(--tint-rgb),0.06);
}
.modal-handle{ display:none; }
.row2{ display:flex; gap:10px; }
.row2 > *{ flex:1; }

/* Custom date picker */
.dp-trigger{
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: rgba(var(--tint-rgb),0.04);
  color: var(--text);
  width:100%;
  text-align:left;
  cursor:pointer;
}
.dp-trigger:focus, .dp-trigger.open{ outline: 2px solid var(--ink); outline-offset:1px; border-color: var(--ink); }
.dp-trigger.placeholder{ color: var(--text-dim); }
.dp-dropdown{
  position: fixed; z-index: 60;
  background: var(--glass-bg-2);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  padding: 14px; width: 280px;
  display:none;
}
.dp-dropdown.show{ display:block; }
.dp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dp-title{ font-weight:700; font-size:13.5px; font-family: var(--font-display); }
.dp-nav{
  background: rgba(var(--tint-rgb),0.06); border: 1px solid var(--line); border-radius:9px;
  width:28px; height:28px; cursor:pointer; font-size:15px; color: var(--text);
  display:flex; align-items:center; justify-content:center;
}
.dp-nav:hover{ background: rgba(var(--tint-rgb),0.12); }
.dp-weekdays{ display:grid; grid-template-columns: repeat(7,1fr); margin-bottom:2px; }
.dp-weekdays div{ text-align:center; font-size:10.5px; font-weight:700; color: var(--text-dim); padding:4px 0; text-transform:uppercase; }
.dp-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:2px; }
.dp-day{
  text-align:center; padding:8px 0; border-radius:9px; cursor:pointer; font-size:13px;
  font-family: var(--font-mono); color: var(--text);
}
.dp-day:hover{ background: rgba(var(--tint-rgb),0.1); }
.dp-day.other{ opacity:0.28; }
.dp-day.selected{ background: linear-gradient(135deg, var(--ink), var(--violet2)); color: #fff; font-weight:600; }
.dp-day.today:not(.selected){ box-shadow: inset 0 0 0 1.5px var(--amber-2); }
.dp-foot{ display:flex; gap:6px; margin-top:8px; }
.dp-foot button{
  flex:1; background: rgba(var(--tint-rgb),0.06); border:1px solid var(--line); border-radius:9px;
  padding:8px; font-size:12px; font-weight:700; cursor:pointer; color: var(--text);
}
.dp-foot button:hover{ background: rgba(var(--tint-rgb),0.12); }

/* Task checklist items */
.task-items{ display:flex; flex-direction:column; gap:3px; }
.task-item{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.task-check{
  flex-shrink:0; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line);
  background: rgba(var(--tint-rgb),0.04); cursor:pointer; color: #fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.task-check:hover{ border-color: var(--ink); }
.task-check.checked{ background: linear-gradient(135deg, var(--ok), var(--cyan)); border-color: transparent; }
.task-item-text{ flex:1; font-size:14.5px; word-break:break-word; color: var(--text); }
.task-item.done .task-item-text{ text-decoration: line-through; color: var(--text-dim); }
.task-item-del{ background:none; border:none; color: var(--text-dim); cursor:pointer; font-size:14px; padding:2px 4px; flex-shrink:0; }
.task-add-item-input{
  font-family: var(--font-body); font-size: 14px; padding: 9px 11px; border-radius: 9px;
  border: 1.5px dashed var(--line); background: rgba(var(--tint-rgb),0.03); color: var(--text); width:100%;
}

/* Mini stat row (fuel avg, stock summary) */
.mini-stats{ display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.mini-stat{
  flex:1; min-width:150px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border:1px solid var(--line);
  border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}
.mini-stat .ml{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim); font-weight:700; margin-bottom:5px; }
.mini-stat .mv{ font-family: var(--font-mono); font-size:19px; font-weight:700; color: var(--text); }
.mini-stats > .mini-stat:nth-child(1) .mv{ background: linear-gradient(90deg, var(--amber), var(--violet2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mini-stats > .mini-stat:nth-child(2) .mv{ background: linear-gradient(90deg, var(--cyan), var(--blue2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mini-stats > .mini-stat:nth-child(3) .mv{ background: linear-gradient(90deg, var(--lime), var(--ok)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Date picker month/year selects */
.dp-title-selects{ display:flex; gap:4px; flex:1; justify-content:center; }
.dp-title-selects select{
  font-family: var(--font-body); font-size:12.5px; font-weight:700; color: var(--text);
  border: 1px solid var(--line); border-radius:8px; background: rgba(var(--tint-rgb),0.05); padding:4px 3px;
}

/* Empty-state icon */
.eicon{ font-size: 32px; margin-bottom: 8px; opacity:0.5; }

@media (max-width: 980px){
  .sidebar{ width:84px; }
  .sidebar-brand{ justify-content:center; padding:24px 10px; }
  .sidebar-brand span:last-child{ display:none; }
  .navbtn{ justify-content:center; padding:12px 8px; }
  .navbtn .lb{ display:none; }
  .navbtn.active::before{ left:-10px; }
  main{ padding: 28px 20px 50px 20px; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
}