:root {
  --page-bg: #e6e8eb;
  --surface: #ffffff;
  --panel-header: #eef0f3;
  --topbar-bg: #2c313a;
  --tabbar-bg: #3d4450;
  --tabbar-active: #ffffff;
  --sidebar-bg: #fbfbfc;
  --text: #23272e;
  --text-muted: #6b7280;
  --border: #d3d7de;
  --accent: #1a5fa8;
  --accent-hover: #114378;
  --pos: #2e7d32;
  --neg: #b3261e;
  --chart-income: #8fac4e;
  --chart-expense: #7d70ae;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(20, 30, 60, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #14171c;
    --surface: #1d222b;
    --panel-header: #262c37;
    --topbar-bg: #14171c;
    --tabbar-bg: #20242c;
    --tabbar-active: #1d222b;
    --sidebar-bg: #191d24;
    --text: #e4e7ed;
    --text-muted: #8b93a8;
    --border: #333a48;
    --accent: #6ea3e0;
    --accent-hover: #8fb8ea;
    --pos: #4caf6b;
    --neg: #e5695f;
    --chart-income: #9fbb63;
    --chart-expense: #9284c9;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  font-size: 13px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Top bar + tab bar (stil Quicken) */
.topbar {
  background: var(--topbar-bg);
  color: #fff;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tabbar {
  background: var(--tabbar-bg);
  display: flex;
  gap: 2px;
  padding: 0 10px;
}
.tabbar a {
  color: #d8dbe2;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tabbar a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,0.08); }
.tabbar a.active { background: var(--tabbar-active); color: var(--text); }
.tabbar-personal { border-top: 1px solid rgba(255,255,255,0.08); }

.topbar-mode-switch {
  background: none; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius);
  color: #fff; cursor: pointer; font-size: 16px; line-height: 1;
  width: 32px; height: 32px; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.topbar-mode-switch:hover { background: rgba(255,255,255,0.12); }

.choose-mode-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin-top: 18px; }
.choose-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--page-bg);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  min-width: 0;
}
.choose-mode-card:hover { border-color: var(--accent); background: var(--panel-header); }
.choose-mode-emoji { font-size: 34px; }
.choose-mode-label { font-size: 14px; font-weight: 700; }

/* Shell */
.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 78px);
}

/* Sidebar — doar conturi, stil Quicken */
.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  min-height: calc(100vh - 78px);
  display: flex;
  flex-direction: column;
  padding: 0;
  /* fără sticky, header-ul cu butonul "‹" (ascunde bara) dispare din ecran de
     îndată ce userul scrollează în jos pe o pagină lungă — devine imposibil de
     apăsat, deși pare vizual că "nu face nimic" la click */
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
}
.sidebar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel-header);
  border-bottom: 1px solid var(--border);
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.sidebar-title-icons { display: flex; gap: 8px; align-items: center; }
.sidebar-title-icons a {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.sidebar-title-icons a:hover { color: var(--accent); text-decoration: none; }
.sidebar-alltxn {
  display: block;
  padding: 9px 14px;
  font-weight: 700;
  color: var(--accent);
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.sidebar-alltxn:hover { text-decoration: none; background: rgba(26,95,168,0.06); }
.sidebar-alltxn.active { color: var(--text); background: rgba(26,95,168,0.1); }
.sidebar-group { margin-bottom: 2px; padding-top: 4px; border-top: 1px solid var(--border); }
.sidebar-group:first-of-type { border-top: none; }
.sidebar-group-title {
  display: flex;
  justify-content: space-between;
  padding: 5px 14px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.sidebar-account {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 14px 4px 26px;
  font-size: 12.5px;
  color: var(--accent);
  border-radius: 3px;
  margin: 0 4px;
}
.sidebar-account:hover { text-decoration: none; background: rgba(26,95,168,0.06); }
.sidebar-account.active { background: var(--accent); color: #fff; }
.sidebar-account.active .bal { color: #fff; }
.sidebar-account.closed { opacity: 0.5; }
.sidebar-account .bal { color: var(--text); font-variant-numeric: tabular-nums; }
.sidebar-account .bal.neg { color: var(--neg); }
.sidebar-account.active .bal.neg { color: #ffd4d0; }
.sidebar-more { font-style: italic; color: var(--text-muted) !important; }
.sidebar-footer {
  margin-top: auto;
  padding: 12px 14px 10px;
  border-top: 1px solid var(--border);
}
.sidebar-networth {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 10px;
}
.sidebar-add-account {
  width: 100%;
  background: var(--surface);
  border: 1px solid #b6bcc6;
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pos);
  cursor: pointer;
}
.sidebar-add-account:hover { background: var(--panel-header); }
.sidebar-import-link {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  text-align: center;
  color: var(--text-muted);
}
.sidebar-import-link:hover, .sidebar-import-link.active { color: var(--accent); }

/* Main content */
.main-content { flex: 1; padding: 16px 18px 90px; min-width: 0; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.page-header h1 { margin: 0; font-size: 18px; font-weight: 700; }
.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Buttons */
.btn {
  background: var(--surface);
  border: 1px solid #b6bcc6;
  color: var(--text);
  padding: 6px 13px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12.5px;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12.5px;
  padding: 2px 4px;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--neg); }

/* Panel — bloc cu antet gri, stil widget Quicken */
.panel, .chart-card, .register-table-wrap, .account-group, .budget-list-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.panel-header, .chart-card h2, .account-group h2, .budget-list-wrap h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 8px 14px;
  background: var(--panel-header);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.panel-body { padding: 14px; }

/* Stil "Mașini" (car-*) - cerere userului, aplicat pe /personal/cars*: carduri
   rotunjite, header curat cu titlu colorat + iconiță, buton principal "pill"
   indigo, buton secundar tot pill dar outline. Scoped la clasele car-* (nu
   afectează restul aplicației, care rămâne pe --accent/var(--radius) normale
   - userul a cerut explicit ca schimbarea globală de design să fie anulată,
   dar cea de pe paginile de mașini să rămână). */
.car-panel { border-radius: 14px; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden; padding: 16px 18px; }
.car-panel > .panel-header { background: var(--surface); padding: 14px 18px; margin: -16px -18px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.car-panel table.register-table th { background: #f1f5f9; }
.car-panel-padded { padding: 16px 18px; }
.car-panel .car-doc-list { margin: 0 -18px -16px; }
.car-panel .panel-header span:first-child { color: #1a5fa8; font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.car-btn-add {
  border-radius: 999px !important; border: 1px solid var(--border) !important;
  background: var(--surface) !important; color: var(--text) !important; font-weight: 500;
}
.car-btn-add:hover { background: var(--panel-header) !important; }
.car-panel .btn-primary, .car-btn-primary {
  background: #1a5fa8 !important; border-color: #1a5fa8 !important; color: #fff !important; border-radius: 999px !important;
}
.car-panel .btn-primary:hover, .car-btn-primary:hover { background: #114378 !important; }
/* tabelul trebuie să meargă până la marginile cardului (linia de sub antet
   și dungile de rând full-bleed, ca în referință "Oferte furnizor"), nu doar
   textul din interior - altfel antetul arată ca o cutie gri plutind în
   padding-ul cardului, cu linia de separare scurtă/lipsă la margini. */
.car-panel .plan-table-wrap { margin: 0 -18px; }
.register-table-wrap.car-panel > table.register-table { margin: 0 -18px; width: calc(100% + 36px); }
.car-panel > .register-table-wrap:not(.car-panel) { margin: 0 -18px; }
/* header-ul tabelului și dungile alternante pe rânduri rămân stilul original
   (--panel-header shading + zebra striping) - userul a respins varianta
   "curată" pentru acestea; doar status-ul ca insignă (pill) a rămas cerut. */
.car-status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.car-status-badge.ok { background: #dcfce7; color: #15803d; }
.car-status-badge.due_soon { background: #fef3c7; color: #b45309; }
.car-status-badge.expired { background: #fee2e2; color: #b91c1c; }
.car-status-badge.none { background: var(--panel-header); color: var(--text-muted); }

.chart-card { padding: 0; }
.chart-card canvas { margin: 14px; max-width: calc(100% - 28px); }
.chart-card .empty-state { margin: 0 14px 14px; }
.account-group { padding: 0; }
.account-group .account-cards { padding: 14px; }

/* Account cards */
.account-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-card.closed { opacity: 0.55; }
.account-card-main { display: flex; flex-direction: column; gap: 6px; }
.account-card-name { font-weight: 700; }
.account-card-institution { font-size: 11.5px; color: var(--text-muted); }
.account-card-balance { font-size: 1.2rem; font-weight: 700; }
.account-card-balance.neg, .account-card-balance .neg { color: var(--neg); }
.account-card-actions { display: flex; gap: 12px; margin-top: 4px; }

.tag {
  font-size: 10.5px;
  background: var(--border);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 3px;
}
.due-tag { background: #f4dcc3; color: #8a4a00; }

/* Filter bar / forms */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar input, .filter-bar select {
  padding: 6px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
}

/* Register table */
.register-balance { font-size: 1.3rem; font-weight: 700; margin-top: 2px; }
.register-balance.neg { color: var(--neg); }
.register-table-wrap { overflow-x: auto; }
.register-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 700px; }
.register-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--panel-header);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
}
.register-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.register-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
table tbody tr:hover { background: var(--panel-header); }
.register-row:hover { background: rgba(26, 95, 168, 0.06); }
.register-row.transfer { font-style: italic; color: var(--text-muted); }
tr.due { background: rgba(230, 150, 40, 0.1); }
.col-amount { text-align: right; white-space: nowrap; }
.col-cleared { width: 24px; text-align: center; }
.col-select { width: 24px; text-align: center; }
.register-table-wrap:not(.select-mode) .col-select { display: none; }
.btn.danger { background: var(--neg); color: #fff; border-color: var(--neg); }
.view-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.view-tabs a { padding: 6px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--panel-header); border: 1px solid var(--border); }
.view-tabs a:hover { text-decoration: none; color: var(--text); }
.view-tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.plan-table-wrap { overflow-x: auto; }
.plan-table th, .plan-table td { padding: 3px 6px; font-size: 11.5px; }
.plan-table input[type="number"] { padding: 1px 3px; font-size: 11px; }
.plan-cell { vertical-align: top; min-width: 130px; }
.plan-cell-entries { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.plan-cell-entry { display: flex; justify-content: space-between; align-items: center; gap: 6px; background: var(--panel-header); border-radius: 4px; padding: 2px 6px; }
.plan-cell select { font-size: 11px; width: 100%; }
#catalog-table, #shopping-table, #pick-meals-table, #wish-table { width: auto; min-width: 0; }
#wish-table .wish-qty, #wish-table .wish-price { width: 60px !important; }
#wish-table th:nth-child(3), #wish-table td:nth-child(3) { min-width: 200px; }
#catalog-table input[type="number"], #shopping-table input[type="number"] { width: 60px !important; }
#pick-meals-table { table-layout: fixed; }
#pick-meals-table th:first-child, #pick-meals-table td:first-child { width: 340px; }
#pick-meals-table th:last-child, #pick-meals-table td:last-child { width: 90px; }
#pick-meals-table input[type="number"] { width: 60px !important; }
.plan-table td.used-in { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#forecast-table { width: auto; min-width: 0; table-layout: fixed; }
#forecast-table th, #forecast-table td { white-space: nowrap; }
#forecast-table th:first-child, #forecast-table td:first-child { width: 200px; white-space: normal; }
#forecast-table th:not(:first-child), #forecast-table td:not(:first-child) { width: 130px; }
@media (min-width: 861px) {
  .two-col.shopping-two-col { grid-template-columns: auto auto; justify-content: start; column-gap: 16px; }
  .two-col.shopping-two-col > div:first-child,
  .two-col.shopping-two-col > div:last-child { justify-self: start; min-width: 0; }
  .two-col.shopping-two-col .panel { width: fit-content; max-width: none; }
}
.plan-summary-panel .col-amount { white-space: nowrap; }
.warning-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.warning-card { border: 1px solid var(--neg); border-radius: var(--radius); background: rgba(179, 38, 30, 0.06); padding: 10px 14px; }
.warning-card p { margin: 0 0 8px; font-size: 13px; }
.warning-transfer-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.warning-transfer-form label { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); gap: 2px; }
.plan-shrink-panel { width: fit-content; max-width: 100%; justify-self: start; }
.saved-list-row:hover { background: var(--panel-header); }
.todo-row { cursor: pointer; }
.todo-row:hover { background: var(--panel-header); }
.todo-row.todo-resolved { opacity: 0.6; }
.todo-row.todo-resolved td:nth-child(2) { text-decoration: line-through; }

/* Tasks page (Todoist-style personal list) */
.tasks-two-col { grid-template-columns: 240px 1fr; align-items: start; }
@media (max-width: 860px) { .tasks-two-col { grid-template-columns: 1fr; } }
.task-nav { list-style: none; margin: 0; padding: 6px; }
.task-nav li { display: flex; align-items: center; }
.task-nav a {
  flex: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: var(--radius); font-size: 13.5px; color: var(--text);
}
.task-nav a:hover { background: var(--panel-header); text-decoration: none; }
.task-nav a.active { background: var(--accent); color: #fff; }
.task-nav a.active .muted { color: rgba(255,255,255,0.8); }
.task-nav li .btn-link { padding: 0 6px; font-size: 12px; }
.task-nav-lists-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}

.task-list-ui { list-style: none; margin: 0; padding: 4px; }
.task-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius); font-size: 13.5px;
}
.task-row:hover { background: var(--panel-header); }
.task-check {
  display: inline-block;
  width: 17px; height: 17px; min-width: 17px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer;
}
.task-check:hover { background: var(--panel-header); }
.task-check.priority-1 { border-color: #d1453b; }
.task-check.priority-2 { border-color: #eb8909; }
.task-check.priority-3 { border-color: #246fe0; }
.task-title { flex: 1; cursor: pointer; }
.task-title:hover { text-decoration: underline; }
.task-meta { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.task-date { font-size: 11.5px; color: var(--text-muted); }
.task-date.overdue { color: var(--neg); font-weight: 700; }
.task-list-badge { font-size: 11px; color: var(--text-muted); background: var(--panel-header); padding: 2px 6px; border-radius: 10px; }
.task-check.checked { background: var(--pos); border-color: var(--pos); }
.task-row.completed .task-title { text-decoration: line-through; color: var(--text-muted); }
.recipe-list { list-style: none; margin: 0; padding: 6px; max-height: 70vh; overflow-y: auto; }
.recipe-list-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 10px; border-radius: var(--radius); cursor: pointer;
  font-size: 13px; gap: 8px;
}
.recipe-list-item:hover { background: var(--panel-header); }
.recipe-list-item.active { background: var(--accent); color: #fff; }
.recipe-list-item.active .muted { color: rgba(255,255,255,0.75); }
.plan-table .plan-bucket-row td { background: var(--accent); color: #fff; font-weight: 700; }
.plan-table .plan-group-row td { background: var(--panel-header); font-weight: 700; }
.plan-table .plan-group-row td:first-child { padding-left: 18px; }
.plan-table .plan-income-row td { background: rgba(46, 125, 50, 0.10); }
.plan-table .plan-income-row td:first-child, .plan-table .plan-expense-row td:first-child { padding-left: 18px; }
.plan-table .plan-expense-row td { background: rgba(179, 38, 30, 0.08); }
.plan-table .plan-total-income td,
.plan-table .plan-total-savings.pos td { background: rgba(46, 125, 50, 0.16); color: var(--pos); font-weight: 700; border-top: 2px solid rgba(46, 125, 50, 0.4); }
.plan-table .plan-total-expense td,
.plan-table .plan-total-savings td { background: rgba(179, 38, 30, 0.12); color: var(--neg); font-weight: 700; border-top: 2px solid rgba(179, 38, 30, 0.35); }
.plan-table .plan-child-row td:first-child { padding-left: 32px; color: var(--text-muted); }
.plan-table .plan-child-row td { font-size: 11.5px; }
.plan-group-select { font-size: 10.5px; margin-left: 6px; padding: 1px 2px; border-radius: 4px; border: 1px solid var(--border); background: var(--sidebar-bg); color: var(--text-muted); vertical-align: middle; }
.rule-group-select { font-size: 10.5px; margin-left: 6px; padding: 1px 2px; border-radius: 4px; border: 1px solid var(--border); background: var(--sidebar-bg); color: var(--text-muted); vertical-align: middle; }
.rule-info-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 12px; font-size: 12.5px; }
.rule-info-body ul { margin: 6px 0 0; padding-left: 18px; }
.rule-info-body li { margin-bottom: 3px; }
@media (max-width: 900px) { .rule-info-body { grid-template-columns: 1fr; } }
.muted { color: var(--text-muted); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.row-actions { white-space: nowrap; text-align: right; }

.empty-state { color: var(--text-muted); padding: 16px; }

/* Listă de tranzacții tip card (mobil) — înlocuiește tabelul, editare doar prin modal */
.mobile-txn-list { display: none; }
.txn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.txn-card.transfer { font-style: italic; color: var(--text-muted); }
.txn-card-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; }
.txn-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Listă de medicamente/suplimente tip card (mobil) — înlocuiește tabelele
   Current/Past de la Kids Medicine și Supplements Daily Intake, cu un buton
   mare "luat azi" ușor de apăsat cu degetul (tabelele late erau greu de
   folosit pe mobil, chiar și cu scroll orizontal). */
.mobile-med-list { display: none; }
.med-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.med-card.todo-resolved { opacity: 0.75; }
.med-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.med-card-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.med-card-name .kid-dot { flex: none; }
.med-card-meta { font-size: 12px; color: var(--text-muted); }
.med-card-history { display: flex; gap: 4px; }
.med-card-actions { display: flex; gap: 14px; font-size: 12.5px; }
.med-card-taken-btn {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.med-card-taken-btn.given { background: var(--pos); border-color: var(--pos); color: #fff; }

/* Rând de adăugare rapidă (inline), stil Quicken */
.entry-row { background: rgba(26, 95, 168, 0.06); }
.entry-row td { padding: 4px 8px; }
.entry-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 7px;
  font-size: 12.5px;
  background: var(--surface);
  color: var(--text);
}
.entry-input.entry-amount { text-align: right; }
.btn-small { padding: 5px 10px; font-size: 12px; }

/* Combo box (autocomplete Payee/Categorie) */
.combo { position: relative; }
.combo .combo-input { width: 100%; }
.combo-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  z-index: 200;
}
.combo-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.combo-option:hover, .combo-option.active { background: rgba(26,95,168,0.08); }
.combo-option-payee { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.combo-option-cat { color: var(--text-muted); }
.combo-option-amount { font-variant-numeric: tabular-nums; }
.combo-option-amount.pos { color: var(--pos); }
.combo-option-amount.neg { color: var(--neg); }

.register-row.editing { background: rgba(26,95,168,0.08); }
.register-row.editing td { padding: 4px 8px; }

/* Two-column (categories) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.simple-list { list-style: none; margin: 0; padding: 14px; }
.simple-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.simple-list li:last-child { border-bottom: none; }

/* Budgets */
.month-switcher { display: flex; align-items: center; gap: 10px; }
.month-label { font-weight: 700; min-width: 70px; text-align: center; }
.budget-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 14px;
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow);
}
.budget-list-wrap .budget-list { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.budget-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.budget-row-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; }
.budget-cat-name { font-weight: 700; flex: 1; font-size: 12.5px; }
.budget-amounts { color: var(--text-muted); font-size: 12px; }
.progress-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); }
.progress-fill.over { background: var(--neg); }

/* Dashboard widgets */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dash-grid-wide { grid-column: 1 / -1; }
.dash-money-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding: 14px;
}
.dash-pie-wrap { flex: 0 0 220px; display: flex; align-items: center; justify-content: center; }
.dash-legend { flex: 1; }
.dash-legend table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dash-legend td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.dash-legend .legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.dash-legend .legend-amount { text-align: right; white-space: nowrap; }
.dash-legend .legend-row { cursor: pointer; }
.dash-legend .legend-row:hover { background: rgba(26,95,168,0.08); }
.dash-legend .legend-total { cursor: default; font-weight: 700; border-top: 1px solid var(--border); }
.dash-legend .legend-total:hover { background: none; }

.sort-link { color: var(--text-muted); }
.sort-link:hover { color: var(--accent); text-decoration: none; }

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-header);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12.5px;
  margin-bottom: 14px;
}
.active-filter-chip a { color: var(--neg); font-weight: 700; }

.category-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  margin-bottom: 10px;
  color: var(--text-muted);
}
.category-breadcrumb a { color: var(--accent); }
.category-breadcrumb a:last-child { font-weight: 700; color: var(--text); }
.dash-total-box {
  flex: 0 0 190px;
  background: var(--panel-header);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  text-align: center;
}
.dash-total-box .label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.dash-total-box .value { font-size: 1.4rem; font-weight: 700; }
.dash-networth-strip {
  display: flex;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  margin-bottom: 16px;
  align-items: baseline;
}
.dash-networth-strip .label { color: var(--text-muted); font-size: 12px; }
.dash-networth-strip .value { font-size: 1.6rem; font-weight: 700; }
.dash-networth-strip .value.neg { color: var(--neg); }
.dash-accounts-table td.name a { font-weight: 600; }

.dash-whatsleft {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px;
}
.dash-whatsleft .metric {
  flex: 1 1 160px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--panel-header);
}
.dash-whatsleft .metric.highlight { background: rgba(26,95,168,0.1); }
.dash-whatsleft .label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.dash-whatsleft .value { font-size: 1.25rem; font-weight: 700; margin-top: 4px; }
.dash-whatsleft .value.neg { color: var(--neg); }
.dash-whatsleft-note { padding: 0 14px 14px; font-size: 12px; color: var(--text-muted); }

.dash-reminder-list { display: flex; flex-direction: column; }
.dash-reminder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.dash-reminder-row:last-child { border-bottom: none; }
.dash-reminder-row:hover { background: var(--panel-header); }
.dash-reminder-date { flex: 0 0 62px; font-size: 11.5px; color: var(--text-muted); }
.dash-reminder-date.due-soon { color: var(--neg); font-weight: 700; }
.dash-reminder-main { flex: 1; min-width: 0; }
.dash-reminder-payee { font-weight: 600; font-size: 13px; }
.dash-reminder-account { font-size: 11.5px; color: var(--text-muted); }
.dash-reminder-amount { font-weight: 700; white-space: nowrap; font-size: 13px; }

.analytics-insights { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.insight-card {
  flex: 1 1 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.insight-card .label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.insight-card .value { font-size: 1.3rem; font-weight: 700; margin-top: 6px; }
.insight-card .value.neg { color: var(--neg); }
.insight-card .value.pos { color: var(--pos); }
.insight-card .value.muted { color: var(--text-muted); font-weight: 400; }

.pivot-table-wrap { overflow-x: auto; }
.pivot-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 640px; }
.pivot-table th, .pivot-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pivot-table th { background: var(--panel-header); }
.pivot-cat-col { text-align: left; min-width: 140px; }
.pivot-section td { background: var(--panel-header); font-weight: 700; padding-top: 10px; }
.pivot-total-row td { font-weight: 700; border-top: 2px solid var(--border); }
.pivot-net-row td { font-weight: 700; border-top: 2px solid var(--text); background: rgba(26,95,168,0.06); }

.savings-panel .panel-header { background: rgba(200,138,62,0.15); }
.savings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}
.savings-card { background: var(--surface); padding: 12px 14px; }
.savings-card h3 { margin: 0 0 8px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.savings-card h3 .muted { font-size: 11px; font-weight: 400; text-transform: none; }
.savings-card .register-table { font-size: 12px; }
.savings-card .register-table td { padding: 5px 4px; }
@media (max-width: 860px) {
  .savings-grid { grid-template-columns: 1fr; }
}

.print-only { display: none; }
.print-report-meta { display: none; }
@media print {
  body * { visibility: hidden; }
  .pivot-print-area, .pivot-print-area * { visibility: visible; }
  .pivot-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: none;
    border: none;
  }
  .pivot-table-wrap { overflow: visible !important; }
  .pivot-table { min-width: 0 !important; font-size: 10px; }
  .no-print { display: none !important; }
  .print-btn { display: none !important; }
  .print-only { display: block !important; }
  .print-report-meta {
    display: flex !important; gap: 18px; flex-wrap: wrap; margin: 4px 0 18px;
    padding-bottom: 10px; border-bottom: 2px solid var(--text);
    font-size: 12px; color: var(--text-muted);
  }
  .print-report-meta strong { color: var(--text); }
  @page { size: landscape; margin: 10mm; }
}

.register-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.register-footer strong { color: var(--text); font-size: 1rem; }
.register-footer strong.neg { color: var(--neg); }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 25, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  min-width: 0;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.modal-box.modal-box-wide { max-width: 620px; }
.modal-box.modal-box-xwide { max-width: 860px; }
.modal-box-wide .register-table td, .modal-box-wide .register-table th { padding: 6px 8px; }
.modal-box-wide .register-table .installment-amount-col { width: 90px; }
.modal-box-wide .register-table .installment-paid-col { width: 48px; text-align: center; }
.modal-box h3 { margin-top: 0; font-size: 14px; }
.modal-box form { display: flex; flex-direction: column; gap: 12px; }
.modal-box label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); min-width: 0; }
.modal-box input, .modal-box select, .modal-box textarea {
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--page-bg);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}
.checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; }
.checkbox-label input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.form-error { color: var(--neg); font-size: 12px; margin: 0 0 4px; }

.attachment-list { list-style: none; margin: 0 0 10px; padding: 0; }
.attachment-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.4;
}
.attachment-list li:last-child { border-bottom: none; }
.attachment-list .attachment-name { font-weight: 600; }
.attachment-list .attachment-meta { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 400; margin-top: 1px; }

/* Pagini autentificare (login, resetare parolă) — nu au sidebar/nav */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-bg);
  padding: 16px;
}
.auth-page .modal-box { box-shadow: 0 10px 40px rgba(0,0,0,0.15); }
.auth-title { font-size: 18px; margin: 0 0 14px; text-align: center; }
.auth-links { margin-top: 14px; font-size: 12.5px; text-align: center; }
.topbar-user { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12.5px; }
.topbar-user .role-tag {
  background: rgba(255,255,255,0.12);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  text-transform: capitalize;
}
.topbar-user a, .topbar-user button {
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  padding: 0;
}

.lang-switch { display: flex; gap: 2px; font-size: 11px; margin-left: 10px; }
.lang-switch a { padding: 2px 7px; border: 1px solid rgba(255,255,255,0.3); text-decoration: none; color: #fff; border-radius: 3px; }
.lang-switch a.active { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); font-weight: 600; }

/* Bottom nav (mobil) */
.bottom-nav { display: none; }

@media (max-width: 860px) {
  body { overflow-x: hidden; }
  /* header-ul (logo/mode-switch/lang/user) nu încăpea pe o linie sub ~450px și
     depășea viewportul în loc să încapă — cauza rădăcină a modalelor lățite
     incorect pe mobil (width:100% se calcula relativ la un layout viewport
     umflat de acest overflow). flex-wrap îl lasă să treacă pe 2 rânduri. */
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .topbar-user { margin-left: 0; }
  .tabbar { overflow-x: auto; white-space: nowrap; }
  .view-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .view-tabs a, .view-tabs span { flex: none; white-space: nowrap; }
  .app-shell { flex-direction: column; align-items: stretch; }
  .sidebar { display: none; }
  .main-content { padding: 12px 12px 90px; min-width: 0; }
  .two-col, .dash-grid { grid-template-columns: 1fr; }
  .dash-money-row { flex-direction: column; }
  .dash-pie-wrap { flex: none; }
  .dash-total-box { flex: none; }
  /* doar tabelul de tranzacții din registru are o listă-card alternativă
     (.mobile-txn-list mai jos) — celelalte pagini cu .register-table-wrap
     (rapoarte, recurente, categorii, împrumuturi, investiții etc.) rămân cu
     tabelul lor, doar scrollabil orizontal (vezi regulile de mai jos) */
  #register-table-wrap { display: none; }
  .mobile-txn-list { display: block; }

  /* Current/Past medications (Kids Medicine) și Daily Intake (Supplements) —
     tabelele late erau greu de folosit pe mobil, chiar cu scroll orizontal;
     aici trecem pe o listă-card, ca la .mobile-txn-list. */
  #kids-med-current-wrap, #kids-med-past-wrap,
  #supp-intake-current-wrap, #supp-intake-past-wrap { display: none; }
  .mobile-med-list { display: block; }

  /* tabelele late (register-table / plan-table) rămân cu scroll orizontal pe
     mobil, dar cu prima coloană fixă, ca să nu pierzi din vedere cărui rând
     îi aparțin valorile când derulezi spre dreapta — și o umbră la margine,
     ca semn vizibil că mai e conținut de văzut */
  .register-table-wrap, .plan-table-wrap {
    position: relative;
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)),
      linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) 100% 0,
      linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0)) ,
      linear-gradient(to left, rgba(0,0,0,0.12), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 8px 100%, 8px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .register-table-wrap table th:first-child,
  .register-table-wrap table td:first-child,
  .plan-table-wrap table th:first-child,
  .plan-table-wrap table td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
  }
  .plan-table .plan-bucket-row td:first-child { background: var(--accent); }
  .plan-table .plan-group-row td:first-child,
  .plan-table .plan-total-income td:first-child,
  .plan-table .plan-total-expense td:first-child,
  .plan-table .plan-total-savings td:first-child { background: var(--panel-header); }
  .dash-sections { display: flex; flex-direction: column; }
  .dash-section-accounts { order: -1; }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    z-index: 50;
  }
  .bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10.5px;
    color: var(--text-muted);
    padding: 4px 0;
  }
  .bottom-nav a span { font-size: 1.15rem; }
  .bottom-nav a.active { color: var(--accent); }
}