/* NUMBERS Billing — "ledger paper" theme over Bootstrap 5 */

:root {
  --paper: #f7f5f0;
  --surface: #fffefb;
  --ink: #1c2b2d;
  --ink-soft: #5c6b6d;
  --line: #e4dfd4;
  --brand: #135e5e;
  --brand-deep: #0d4747;
  --brand-tint: #e3eeec;
  --amber: #9a5b11;
  --amber-bg: #fcf1dc;
  --amber-line: #f0d9b4;
  --blue: #2c5c8f;
  --blue-bg: #e7eef6;
  --blue-line: #c9d9ea;
  --red: #ae2e24;
  --red-bg: #faece9;
  --green: #2e7d4f;
  --gray: #9aa5a6;
  --status-active-bg: #1e3a5f;
  --status-former-bg: #b8560f;
  --shadow-card: 0 1px 2px rgba(28, 43, 45, .05), 0 4px 16px rgba(28, 43, 45, .06);
  --shadow-float: 0 2px 4px rgba(28, 43, 45, .08), 0 12px 32px rgba(13, 71, 71, .14);
}

body {
  background: var(--paper);
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(19, 94, 94, .05), transparent);
  color: var(--ink);
  font-family: "Instrument Sans", "Noto Sans Georgian", system-ui, sans-serif;
  font-size: .9375rem;
}

h1, h2, .brand-name, .page-title, .panel-title, .section-title {
  font-family: "Bricolage Grotesque", "Noto Sans Georgian", sans-serif;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 254, 251, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .65rem; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .55rem;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #fff;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 2px 6px rgba(13, 71, 71, .35);
}
.brand-name { font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }
.brand-name em { font-style: normal; color: var(--brand); }
.topbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn { font-weight: 500; border-radius: .5rem; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.btn-brand, .btn-send-invoice {
  background: var(--brand);
  border: 1px solid var(--brand-deep);
  color: #fff;
}
.btn-brand:hover, .btn-send-invoice:hover { background: var(--brand-deep); color: #fff; }
.btn-brand:active, .btn-send-invoice:active { background: var(--brand-deep); color: #fff; transform: translateY(1px); }

.btn-send-debt {
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  color: var(--amber);
}
.btn-send-debt:hover { background: #f7e4c4; color: #7c490d; border-color: #e3c894; }
.btn-send-debt:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: #cfc8b8; }

.btn-edit {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--brand);
}
.btn-edit:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-deep); }

.btn-danger-soft {
  background: var(--red-bg);
  border: 1px solid #ecc8c2;
  color: var(--red);
}
.btn-danger-soft:hover { background: #f3d9d4; color: #8c241c; }

/* Solid red — the dashboard "Erase" (hard delete) button, the most destructive
   action, set apart from the muted Deactivate. */
.btn-danger-solid { background: var(--red); border: 1px solid var(--red); color: #fff; }
.btn-danger-solid:hover { background: #8c241c; border-color: #8c241c; color: #fff; }

/* ---------- page ---------- */
.page { max-width: 1320px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }

.balance-warning {
  border: 1px solid var(--amber-line);
  background: var(--amber-bg);
  color: var(--amber);
  border-radius: .65rem;
}

/* ---------- NBG FX rate ---------- */
.fx-rate {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .45rem .85rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}
.fx-rate-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--brand);
}
.fx-rate-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-rate-date { font-size: .8rem; color: var(--ink-soft); }
.fx-rate-error {
  background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber);
}
.fx-rate-error .fx-rate-label { color: var(--amber); }
.fx-rate-msg { font-size: .85rem; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.page-title { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.page-subtitle { color: var(--ink-soft); margin: .15rem 0 0; }
.page-header-actions { display: flex; gap: .5rem; }

/* ---------- schedule pills ---------- */
.schedule-pills { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .9rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
}
.pill-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .7; }
.pill-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); }
.pill-blue { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-line); }

/* ---------- selection bar ---------- */
.selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--brand-tint);
  border: 1px solid #c4d9d4;
  border-radius: .65rem;
  padding: .6rem 1rem;
  margin-bottom: 1rem;
}
.selection-count { font-weight: 600; color: var(--brand-deep); }
.selection-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- multi-select tools ---------- */
.select-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.select-search { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.select-search-input { width: 15rem; max-width: 100%; }
.select-tools-meta { font-size: .8rem; color: var(--ink-soft); }
.select-groups { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.select-groups-label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gray); margin-right: .15rem;
}
.group-set { display: inline-flex; gap: .3rem; }
.group-set + .group-set { margin-left: .35rem; padding-left: .55rem; border-left: 1px solid var(--line); }
.group-chip {
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.group-chip:hover { border-color: #cfc8b8; color: var(--ink); transform: translateY(-1px); }
.group-chip:active { transform: translateY(0) scale(.97); }
.group-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.group-chip:disabled { opacity: .4; cursor: not-allowed; transform: none; }
/* Active = this filter is applied (non-matching clients hidden) */
.group-chip.is-active { background: var(--brand); border-color: var(--brand-deep); color: #fff; }
.group-chip.is-active:hover { background: var(--brand-deep); color: #fff; }
.group-chip-fill-incomplete { border-color: #eeb4b0; color: #7a2e2a; }
.group-chip-fill-incomplete:hover { border-color: #e09490; color: #5a1e1a; }
.group-chip-fill-complete { border-color: #aee0bd; color: #1a5e35; }
.group-chip-fill-complete:hover { border-color: #8ecfa0; color: #0f4525; }
.group-chip-status-active { border-color: #aee0bd; color: #1a5e35; }
.group-chip-status-active:hover { border-color: #8ecfa0; color: #0f4525; }
.group-chip-status-former { border-color: var(--amber-line); color: var(--amber); }
.group-chip-status-former:hover { border-color: #e0c088; color: var(--amber); }

/* ---------- table card ---------- */
.table-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .8rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.client-table th {
  background: #f3f0e8;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
  padding: .6rem .6rem;
  white-space: nowrap;
}
.th-note { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--gray); }
.client-table td { padding: .6rem .6rem; border-color: #efece3; }
.client-table tbody tr:hover { background: #fbfaf6; }
/* Clients not currently billed (USD or no outstanding debt) are sorted to the
   bottom of the table and greyed. They stay on the dashboard for reference but
   every send skips them (see scheduler.send_to_client). Declared BEFORE the
   new-client rules below so a new row's red/green background still wins over this
   grey. Background is on the cells (not the <tr>) for the same Bootstrap reason. */
.client-table tbody tr.client-nonsender > td { background-color: #f7f5ef; color: var(--gray); }
.client-table tbody tr.client-nonsender:hover > td { background-color: #f1eee6; }
.client-table tbody tr.client-nonsender .cell-company,
.client-table tbody tr.client-nonsender .cell-email,
.client-table tbody tr.client-nonsender .cell-taxid { color: var(--gray); }
/* Subtle separator row introducing the not-currently-billed group. */
.nonsender-divider > td,
.client-table tbody tr.nonsender-divider:hover > td {
  background-color: #f1eee6;
  color: var(--gray);
  font-size: .8rem;
  font-style: italic;
  text-align: center;
  padding: .45rem .6rem !important;
  border-top: 2px solid #e7e2d6;
}
/* Row colour by completeness + age (see _client_row_highlight in app.py):
   green = a new client (30-day is_new window) with every required field filled,
   yellow = a new client still missing info, red = any non-new client missing info.
   A fully-filled non-new client is a plain row. The colour is set on the cells,
   not the <tr>, because Bootstrap paints an opaque cell background that would
   otherwise hide a row-level colour. Kept after .client-nonsender so an incomplete
   row still wins over the greyed not-billed background. */
.client-table tbody tr.row-complete > td { background-color: #bfe9cc; }
.client-table tbody tr.row-complete:hover > td { background-color: #aee0bd; }
.client-table tbody tr.row-new-incomplete > td { background-color: #fff59d; }
.client-table tbody tr.row-new-incomplete:hover > td { background-color: #ffec6b; }
.client-table tbody tr.row-incomplete > td { background-color: #f3c7c4; }
.client-table tbody tr.row-incomplete:hover > td { background-color: #eeb4b0; }
.col-check { width: 2.4rem; }
.col-edit { width: 4.5rem; text-align: end; }
.col-edit .btn { padding-left: .5rem; padding-right: .5rem; }
.col-dot { width: 2rem; }

.cell-company { font-weight: 600; }
.cell-email { color: var(--ink-soft); font-size: .85rem; }
.cell-taxid { color: var(--ink-soft); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-lastsent { white-space: nowrap; font-size: .87rem; }
.empty-row { text-align: center; color: var(--ink-soft); padding: 1.4rem !important; }

.lang-badge {
  display: inline-block;
  padding: .14rem .5rem;
  border-radius: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.lang-ka { background: var(--brand-tint); color: var(--brand-deep); }
.lang-en { background: var(--blue-bg); color: var(--blue); }

.fee-type-badge, .status-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .14rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s cubic-bezier(.34, 1.56, .64, 1), opacity .12s ease;
}
.fee-type-badge:hover, .status-badge:hover { transform: translateY(-1px); }
.fee-type-badge:active, .status-badge:active { transform: translateY(0) scale(.96); }
.fee-type-badge:focus-visible, .status-badge:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fee-type-badge:disabled, .status-badge:disabled { opacity: .5; cursor: wait; transform: none; }
.fee-type-fixed { background: var(--brand-tint); color: var(--brand-deep); border: 1px solid #c4d9d4; }
.fee-type-variable { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); }
/* Client status: Active is a vibrant green pill; Former is amber (former clients are
   always sent a debt notice, never an invoice). */
.status-active { background: var(--green); color: #fff; border: 1px solid var(--green); }
.status-former { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); }

.debt-positive { color: var(--red); font-weight: 600; }
.debt-zero { color: var(--gray); }
.debt-unknown { color: var(--gray); }

/* ---------- panels (add / edit) ---------- */
.edit-panel {
  background: var(--surface);
  border: 1px solid #c4d9d4;
  border-left: 4px solid var(--brand);
  border-radius: .8rem;
  box-shadow: var(--shadow-float);
  padding: 1.2rem 1.4rem 1.4rem;
  margin-top: 1rem;
}
.edit-row-cell { padding: 0 !important; background: transparent; }
.edit-row-cell .edit-panel { margin: .5rem 0 1rem; }
.panel-title { font-size: 1.1rem; font-weight: 600; margin-bottom: .9rem; }
.panel-buttons { display: flex; gap: .5rem; align-items: center; }
.edit-panel .form-label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.edit-panel .form-control, .edit-panel .form-select { border-color: var(--line); }
.edit-panel .form-control:focus, .edit-panel .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(19, 94, 94, .12);
}

/* ---------- activity log ---------- */
.activity-section { margin-top: 2.2rem; }
.section-title { font-size: 1.25rem; font-weight: 600; margin-bottom: .8rem; }
/* Section heading with a right-aligned action (e.g. Activity log + Delete history). */
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.section-header .section-title { margin-bottom: 0; }
.activity-table td { padding: .6rem .85rem; border-color: #efece3; font-size: .88rem; }
.status-dot {
  display: inline-block;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--gray);
}
.status-success { background: var(--green); box-shadow: 0 0 0 3px rgba(46, 125, 79, .15); }
.status-failure { background: var(--red); box-shadow: 0 0 0 3px rgba(174, 46, 36, .15); }
.status-simulated { background: var(--amber); box-shadow: 0 0 0 3px rgba(154, 91, 17, .15); }
.status-skipped { background: var(--gray); }
.cell-type { font-weight: 600; white-space: nowrap; }
.trigger-manual { color: var(--blue); font-weight: 600; }
.trigger-scheduled { color: var(--ink-soft); }
.cell-when { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- toasts ---------- */
.app-toast { border-radius: .6rem; border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.toast-error { background: var(--red-bg); color: var(--red); border-color: #ecc8c2; }
.toast-info { background: var(--surface); color: var(--ink); }

/* ---------- dark mode toggle ---------- */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.3rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1;
}
.theme-toggle:hover { background: var(--surface); color: var(--ink); border-color: var(--brand); }
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .topbar-inner { flex-direction: column; align-items: stretch; }
  .topbar-actions { align-items: center; }
  .topbar-actions .btn { flex: 1; }
  .topbar-actions .theme-toggle { flex: 0 0 auto; width: 100%; }
  .table-card { overflow-x: auto; }
}

/* ---------- dark theme ---------- */
[data-theme="dark"] {
  --paper: #0f1a19;
  --surface: #182625;
  --ink: #e7ece9;
  --ink-soft: #99aba8;
  --line: #2b3b39;
  --brand: #16786a;
  --brand-deep: #0f5a4f;
  --brand-tint: #19332e;
  --amber: #e0a955;
  --amber-bg: #2e2616;
  --amber-line: #4a3c1f;
  --blue: #7fb0e0;
  --blue-bg: #1a2735;
  --blue-line: #2f4660;
  --red: #e8897f;
  --red-bg: #2f1c1a;
  --green: #4cc07f;
  --gray: #7e8d8b;
  --status-active-bg: #254a73;
  --status-former-bg: #d9791f;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-float: 0 2px 4px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .55);
}

/* Patch the spots that hardcode a light colour rather than a token */
[data-theme="dark"] .topbar { background: rgba(24, 38, 37, .92); }
[data-theme="dark"] .client-table th { background: #1f2f2d; }
[data-theme="dark"] .client-table td,
[data-theme="dark"] .activity-table td { border-color: var(--line); }
[data-theme="dark"] .client-table tbody tr:hover { background: #1e2e2c; }
[data-theme="dark"] .client-table tbody tr.row-complete > td { background-color: #1f4a37; }
[data-theme="dark"] .client-table tbody tr.row-complete:hover > td { background-color: #245440; }
[data-theme="dark"] .client-table tbody tr.row-new-incomplete > td { background-color: #5d531c; }
[data-theme="dark"] .client-table tbody tr.row-new-incomplete:hover > td { background-color: #6d6120; }
[data-theme="dark"] .client-table tbody tr.row-incomplete > td { background-color: #4a2222; }
[data-theme="dark"] .client-table tbody tr.row-incomplete:hover > td { background-color: #552727; }
[data-theme="dark"] .selection-bar,
[data-theme="dark"] .edit-panel { border-color: #24463f; }
/* KA language badge + Fixed fee badge used near-invisible dark teal text on a
   dark tint — switch them to a dark red that stays legible on the dark badge. */
[data-theme="dark"] .lang-ka,
[data-theme="dark"] .fee-type-fixed { color: #d9534f; }
[data-theme="dark"] .fee-type-fixed { border-color: #5a2b26; }
/* Dark --green is brighter, so use dark text on the Active pill for contrast. */
[data-theme="dark"] .status-active { color: #0f1a19; }
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .group-chip:hover { border-color: var(--brand); }
[data-theme="dark"] .btn-send-debt:hover { background: #3a2f18; color: var(--amber); border-color: var(--amber-line); }
[data-theme="dark"] .btn-danger-soft { border-color: #5a2b26; }
[data-theme="dark"] .btn-danger-soft:hover { background: #3d2320; color: #f0a59c; }
/* Dark --red is the lighter #e8897f, so use dark text for contrast on the solid Erase. */
[data-theme="dark"] .btn-danger-solid { color: #2a1210; }
[data-theme="dark"] .btn-danger-solid:hover { background: #d96f64; border-color: #d96f64; color: #2a1210; }
[data-theme="dark"] .toast-error { border-color: #5a2b26; }

/* Form controls / menus default to white in Bootstrap — darken them */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .form-control::placeholder { color: var(--gray); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(32, 165, 141, .2);
}
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e7ece9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-theme="dark"] .form-check-input { background-color: var(--surface); border-color: var(--line); }
[data-theme="dark"] .form-check-input:checked { background-color: var(--brand); border-color: var(--brand-deep); }
[data-theme="dark"] .dropdown-menu { background-color: var(--surface); border-color: var(--line); }
[data-theme="dark"] .dropdown-item { color: var(--ink); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background-color: var(--brand-tint); color: var(--ink); }

/* Active/Former status colour block: always wins on the Checkbox + Company cells
   over both the completeness colours and the nonsender grey, since status is a
   separate fact that should stay visible regardless of row state. Two classes on
   the <td> plus the table/tbody/tr ancestry tie the specificity of the light- and
   dark-mode row-highlight rules above (including their [data-theme="dark"]
   variants) — this block must stay declared LAST in the file so it wins those ties,
   in both themes, without needing !important. */
.client-table tbody tr td.col-check.status-col-active,
.client-table tbody tr td.cell-company.status-col-active {
  background-color: var(--status-active-bg);
  color: #fff;
}
.client-table tbody tr td.col-check.status-col-former,
.client-table tbody tr td.cell-company.status-col-former {
  background-color: var(--status-former-bg);
  color: #fff;
}
.client-table tbody tr:hover td.col-check.status-col-active,
.client-table tbody tr:hover td.cell-company.status-col-active {
  background-color: var(--status-active-bg);
  filter: brightness(1.08);
}
.client-table tbody tr:hover td.col-check.status-col-former,
.client-table tbody tr:hover td.cell-company.status-col-former {
  background-color: var(--status-former-bg);
  filter: brightness(1.08);
}