/* ============================================================
   base.css — styles shared by both pages (theme, header, nav,
   buttons, panels, tables, dropdowns, modals, generic badges)
   ============================================================ */

:root,
[data-theme="dark"] {
  --bg: #0d0f14;
  --panel: #15171f;
  --panel-2: #1a1d27;
  --panel-offset: #1f2230;
  --text: #edeef2;
  --text-muted: #8b8fa3;
  --text-faint: #565a6e;
  --border: rgba(237, 238, 242, 0.08);
  --border-strong: rgba(237, 238, 242, 0.16);
  --accent: #4b4fc4;
  --accent-hover: #5d61d6;
  --accent-soft: rgba(75, 79, 196, 0.14);
  --accent-text: #9a9df0;
  --scrollbar-thumb: #565a80;
  --scrollbar-thumb-hover: #666a94;
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.12);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.12);
  --orange: #f6a94a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --overlay-bg: rgba(13, 15, 20, 0.85);
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-text: #8b8fa3;
  --chart-line-neutral: #edeef2;
}

[data-theme="light"] {
  --bg: #f7f6f2;
  --panel: #ffffff;
  --panel-2: #f3f0ec;
  --panel-offset: #edeae5;
  --text: #28251d;
  --text-muted: #6f6c66;
  --text-faint: #a9a69f;
  --border: rgba(40, 37, 29, 0.09);
  --border-strong: rgba(40, 37, 29, 0.18);
  --accent: #01696f;
  --accent-hover: #0c4e54;
  --accent-soft: rgba(1, 105, 111, 0.1);
  --accent-text: #01696f;
  --scrollbar-thumb: var(--border-strong);
  --scrollbar-thumb-hover: var(--accent);
  --green: #2f7a3d;
  --green-soft: rgba(47, 122, 61, 0.1);
  --red: #a1352b;
  --red-soft: rgba(161, 53, 43, 0.1);
  --orange: #b5710a;
  --shadow-sm: 0 1px 2px rgba(40, 37, 29, 0.06);
  --shadow-md: 0 8px 24px rgba(40, 37, 29, 0.08);
  --overlay-bg: rgba(247, 246, 242, 0.9);
  --chart-grid: rgba(0, 0, 0, 0.06);
  --chart-text: #6f6c66;
  --chart-line-neutral: #28251d;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background 0.15s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
*:hover {
  scrollbar-color: var(--scrollbar-thumb-hover) transparent;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Satoshi", "Inter", sans-serif;
  line-height: 1.5;
  transition: background 0.2s ease, color 0.2s ease;
}

/* ---------- Header ---------- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--overlay-bg);
  backdrop-filter: blur(12px);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.brand svg {
  flex-shrink: 0;
}
.header-nav {
  display: flex;
  gap: 2px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.nav-btn {
  padding: 7px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-btn:hover {
  color: var(--text);
}
.nav-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124, 127, 242, 0.35);
}
header .right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
header .date {
  color: var(--text-faint);
  font-size: 13px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.icon-btn[hidden] {
  /* display: flex above would otherwise win over the hidden attribute
     (the logout button, hidden until js/session.js shows it). */
  display: none;
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.sync-btn {
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--border-strong);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sync-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.sync-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.sync-status {
  font-size: 12px;
  color: var(--text-faint);
  max-width: 220px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

/* ---------- Generic layout ---------- */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 28px 20px;
}
.error-banner {
  background: var(--red-soft);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  display: none;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.panel h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--text);
  letter-spacing: -0.01em;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.panel-head h2 {
  margin: 0;
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
th,
td {
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  background-clip: padding-box;
}
th {
  color: var(--text-faint);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
tr:hover td {
  background: var(--panel-2);
}
.table-scroll {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}
.table-scroll thead {
  isolation: isolate;
}
.table-scroll thead th {
  position: sticky;
  top: -1px;
  background: var(--panel);
  z-index: 5;
  box-shadow: 0 1px 0 var(--border);
}
.table-scroll tfoot {
  isolation: isolate;
}
.table-scroll tfoot tr {
  background: var(--panel-2);
}
.table-scroll tfoot td {
  position: sticky;
  /* One offset per row, so several total rows stack instead of landing on
     top of each other. Set from JS, which is the only place that knows
     each row's real height; -1px keeps a single row where it was. */
  bottom: var(--foot-bottom, -1px);
  background: var(--panel-2);
  z-index: 5;
  box-shadow: 0 -1px 0 var(--border-strong);
}
/* Only the topmost pinned row draws the separator against the body: with
   one per row the stack would show a rule between every total. */
.table-scroll tfoot tr:not(:first-child) td {
  box-shadow: none;
}
/* Several currencies mean several rows, so they have to stay short —
   otherwise the totals eat the height the transactions need. */
.table-scroll tfoot.multi td {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: none;
}

/* Marks a figure rebuilt from several currencies rather than paid as
   shown. Deliberately quiet: the number is sound, it just is not a
   number off a statement. */
.reconstructed {
  color: var(--text-faint);
  font-weight: 700;
  cursor: help;
}

/* ---------- Badges / tags ---------- */
.badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.badge.up {
  background: var(--green-soft);
  color: var(--green);
}
.badge.down {
  background: var(--red-soft);
  color: var(--red);
}
.type-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--panel-offset);
  color: var(--text-muted);
}
.positive {
  color: var(--green);
}
.negative {
  color: var(--red);
}

/* ---------- Filters / buttons ---------- */
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.filters-spacer {
  flex: 1 1 auto;
}
.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}
.btn.secondary {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
}
.btn.secondary:hover {
  background: var(--panel-offset);
}
.btn.danger {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid var(--red);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.filters select,
.filters input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
}

/* ---------- Multi-check dropdown ---------- */
.dropdown-check {
  position: relative;
}
.dropdown-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  justify-content: space-between;
}
.dropdown-btn .arrow {
  font-size: 11px;
  color: var(--text-faint);
}
.dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: var(--shadow-md);
}
.dropdown-panel.open {
  display: block;
}
.dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.dropdown-option:hover {
  background: var(--panel-offset);
}
.dropdown-option input[type="checkbox"] {
  pointer-events: none;
}

/* ---------- Loading overlay ---------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  font-size: 16px;
  color: var(--text);
}

/* ---------- Privacy mode (hides sensitive info) ---------- */
body.privacy-mode .sensitive {
  filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  transition: filter 0.15s ease;
}
body.privacy-mode .sensitive-inline {
  filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* ---------- Modals (shared) ---------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.active {
  display: flex;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 480px;
  max-width: 90vw;
}
.modal h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.status-msg {
  font-size: 13px;
  padding: 10px;
  border-radius: 8px;
  margin-top: 12px;
  display: none;
}
.status-msg.success {
  background: var(--green-soft);
  color: var(--green);
  display: block;
}
.status-msg.error {
  background: var(--red-soft);
  color: var(--red);
  display: block;
}
/* The failed rows themselves, under the count. Monospaced because they
   line up — same shape, one per row — and a reader is comparing them
   rather than reading prose. */
.status-detail {
  margin: 8px 0 0;
  padding-left: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
}
.status-detail li {
  overflow-wrap: anywhere;
}

/* The disclaimer and the legal pages, on every page (js/session.js). */
footer.legal-footer { border-top: 1px solid var(--border); margin-top: 24px; padding: 16px 24px 24px; }
footer.legal-footer p { margin: 0 0 6px; }
footer.legal-footer a { color: var(--text-faint); margin: 0 8px; text-decoration: none; }
footer.legal-footer a:hover { color: var(--text); text-decoration: underline; }
.icon-btn[aria-current="page"] { color: var(--accent-text); }

footer {
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  padding: 24px;
}

@media (max-width: 900px) {
  header {
    padding: 10px 14px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .header-left {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .header-nav {
    width: 100%;
  }
  .nav-btn {
    flex: 1 1 120px;
    text-align: center;
  }
  header .right {
    width: 100%;
    justify-content: space-between;
  }
}
/* On a phone the four tabs share the width equally, however long their
   label: at 18 px of padding each, "Symboles" ended 46 px past the edge of
   a 390 px screen and the whole page scrolled sideways. */
@media (max-width: 480px) {
  .nav-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px;
    font-size: 12px;
  }
}

/* ---------- The header's filter menu (GitHub issues 97 and 76) ----------
   Self-contained: it sits on pages that do not load dashboard.css (the
   strategy page), so it does not borrow .pill-group's rules. A button,
   and a panel under it (js/headerFilter.js). */
.filter-menu { position: relative; }
.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.filter-btn:hover, .filter-btn[aria-expanded="true"] { color: var(--text); border-color: var(--border-strong); }
.filter-btn.has-filters { color: var(--accent-text); border-color: var(--accent); }
.filter-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.filter-count[hidden] { display: none; }
.filter-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 260px;
  max-width: calc(100vw - 32px);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 6px 14px;
}
.filter-pop[hidden] { display: none; }
.fp-section { padding: 10px 0; }
.fp-section + .fp-section { border-top: 1px solid var(--border); }
.fp-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.fp-note { font-size: 11px; color: var(--text-faint); margin: 8px 0 0; }
.fp-list { display: grid; gap: 2px; }
.fp-check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 2px; cursor: pointer; color: var(--text); }
.fp-check input { margin: 0; accent-color: var(--accent); }
.fp-check .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
/* A button that reads as a link, for an action inside a sentence or a panel. */
.link-btn { background: none; border: none; padding: 0; color: var(--accent-text); font-size: 12px; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

.fee-mode {
  display: inline-flex;
  gap: 2px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.fee-mode button {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fee-mode button:hover { color: var(--text); }
.fee-mode button.active { background: var(--accent); color: #fff; }
@media (max-width: 480px) {
  .fee-mode button { padding: 5px 8px; font-size: 11px; }
}

/* ---------- The administrator's controls (GitHub issue 154) ----------
   Not painted until the session says administrator (js/session.js; at
   once from js/theme.js within a tab): otherwise they flashed on every
   page for the other accounts. */
html:not(.is-admin) a.nav-btn[href="symbols.html"],
html:not(.is-admin) #syncBtn { display: none; }

/* Not painted in English before i18n.js writes them in the page's
   language (js/theme.js, GitHub issue 156). Invisible, not removed: the
   layout does not move when they appear. */
html.i18n-pending [data-i18n],
html.i18n-pending [data-i18n-html],
html.i18n-pending #langToggle { visibility: hidden; }

/* ---------- What the free offer does not include (chantier C, js/plan.js) ----------
   Greyed out, not hidden: the free account sees what the paid offer adds.
   The server refuses those calls on its own (backend/lib/plans.js). */
.plan-locked { position: relative; }
.plan-locked > :not(.plan-lock-note) { filter: grayscale(1) blur(1.5px); opacity: .4; pointer-events: none; user-select: none; }
.plan-lock-note {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px; text-align: center; font-size: 13px; color: var(--text-muted);
}
.plan-lock-note b { color: var(--text); font-size: 14px; }
.plan-lock-note.inline { position: static; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 0; font-size: 12px; }
.plan-lock-note.inline b { font-size: 12px; }
/* The room the free offer leaves, on the transactions page. */
.plan-usage { font-size: 12px; color: var(--text-muted); }
.plan-usage.full { color: #e5484d; }
/* The symbols asked for, on the Symbols page (chantier C). */
.symreq-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.symreq-row:first-child { border-top: 0; }
.symreq-actions { display: flex; gap: 8px; }