/* ── RETA Manager ─ app styles on top of Bootstrap 5.3 ─────────────────── */

:root {
  /* Approved status palette: silver / soft purple / soft red / blue */
  --status-none: #9ca3af;
  --status-in-progress: #a78bfa;
  --status-finished: #f87171;
  --status-delivered: #3b82f6;
  --sidebar-w: 232px;
  /* Links: a muted slate-blue rather than Bootstrap's #0d6efd. The app is
     dense with links inside tables, where the default bright blue plus a
     permanent underline turns every list into stripes. */
  --link: #3f6ea8;
  --link-hover: #2c527d;
}

/* ── Links ──
   Underline on hover only, and a softer colour. Applied broadly rather than
   per-component because links appear in nearly every table; excluded from
   things that only look like links (nav items, buttons, badges), which carry
   their own styling. */
a:not(.btn):not(.app-nav):not(.badge):not(.nav-link):not(.dropdown-item) {
  color: var(--link);
  text-decoration: none;
}
a:not(.btn):not(.app-nav):not(.badge):not(.nav-link):not(.dropdown-item):hover,
a:not(.btn):not(.app-nav):not(.badge):not(.nav-link):not(.dropdown-item):focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}

/* ── Brand mark ── */
.brand { font-weight: 700; letter-spacing: .12em; }
.brand-rule { height: 3px; width: 44px; border-radius: 2px; margin-top: 4px;
  background: linear-gradient(90deg, var(--status-in-progress), var(--status-delivered)); }

/* ── App shell: fixed sidebar (md+), offcanvas below ── */
.app-wrap { display: flex; min-height: 100vh; }
.app-sidebar { width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
@media (min-width: 768px) { .app-sidebar { position: sticky; top: 0; height: 100vh; } }
.app-nav { display: flex; align-items: center; gap: .6rem; border-radius: .5rem;
  color: var(--bs-body-color); padding: .5rem .75rem; margin-bottom: 2px; }
.app-nav:hover { background: var(--bs-tertiary-bg); }
.app-nav.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem;
  border-bottom: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  position: sticky; top: 0; z-index: 1020; }
.app-content { padding: 1rem; max-width: 1200px; width: 100%; }
.app-content-wide { max-width: 1600px; }

/* ── Compact projects list ──
   The list is scanned far more than it is read, so rows are tuned for density:
   tighter cell padding, slightly smaller type, and every cell kept to a single
   line. The title is the only elastic cell — it truncates with an ellipsis
   rather than wrapping, which is what used to make rows double-height. */
.projects-table { font-size: .86rem; }
.projects-table > :not(caption) > * > * { padding: .3rem .45rem; }
.projects-table .title-cell { max-width: 340px; }
.projects-table .title-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projects-table .badge { font-size: .64rem; padding: .18em .4em; vertical-align: middle; }
.projects-table .icon-toggle { font-size: .9rem; padding: 0 .1rem; }
.projects-table .fee-sub { font-size: .7rem; line-height: 1.05; }

/* Secondary EUR/USD line under a dashboard money figure — deliberately small,
   so the native-currency total stays the headline number. */
.stat-card .fx-sub { font-size: .72rem; line-height: 1.2; margin-top: -.1rem; margin-bottom: .15rem; }

/* Secondary lines inside the dashboard's pending-projects table: the EUR/USD
   equivalents under the CNY fee, and the clerk under the client. Kept smaller
   than the row text so the primary value still reads first. Scoped separately
   from .projects-table .fee-sub, which does not apply on this page. */
.dash-sub { font-size: .7rem; line-height: 1.15; }
.dash-sub .clerk-swatch { width: 9px; height: 9px; }
.projects-table .clerk-swatch { width: 10px; height: 10px; }
.projects-table .paid-compact { font-size: .75rem; padding: .1rem 1.3rem .1rem .35rem;
  height: auto; min-height: 0; background-position: right .3rem center; }
.projects-table .form-check-input { margin-top: .1rem; }

/* ── Login ── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: var(--bs-tertiary-bg); }
.login-card { width: 100%; max-width: 400px; }

/* ── Numbers & money: tabular figures for alignment ── */
.num, .text-money { font-variant-numeric: tabular-nums; }

/* ── Status chips (clickable) ── */
.status-chip { border: 0; border-radius: 100px; color: #fff; font-size: .78rem;
  font-weight: 600; padding: .28rem .7rem; white-space: nowrap; line-height: 1;
  cursor: pointer; transition: filter .12s ease, transform .05s ease; }
.status-chip:hover { filter: brightness(1.08); }
.status-chip:active { transform: scale(.96); }
.status-none        { background: var(--status-none); }
.status-in_progress { background: var(--status-in-progress); }
.status-finished    { background: var(--status-finished); }
.status-delivered   { background: var(--status-delivered); }

/* ── Stat cards ── */
.stat-card .card-body { padding: .8rem 1rem; }

/* ── Tables: tighter, calmer ── */
.table > :not(caption) > * > * { padding-top: .55rem; padding-bottom: .55rem; }
.paid-select { min-width: 118px; }

/* ── Dark mode niceties ── */
[data-bs-theme="dark"] .app-sidebar,
[data-bs-theme="dark"] .app-topbar { background: var(--bs-dark-bg-subtle, var(--bs-body-bg)); }
[data-bs-theme="dark"] .status-chip { color: #0c0d10; }

/* ── Phase 2 ─────────────────────────────────────────────────────────── */

/* Global search dropdown */
.app-search { position: relative; }
.app-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 1050;
  max-height: 60vh; overflow-y: auto; }
.app-search-results .group { padding: .4rem .8rem .1rem; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.app-search-results a.item { display: block; padding: .45rem .8rem;
  color: var(--bs-body-color); text-decoration: none; }
.app-search-results a.item:hover, .app-search-results a.item.active { background: var(--bs-tertiary-bg); }
.app-search-results .empty { padding: .8rem; color: var(--bs-secondary-color); font-size: .9rem; }

/* Audit diff */
.audit-diff pre { background: var(--bs-tertiary-bg); border-radius: .4rem;
  padding: .5rem .7rem; max-width: 420px; max-height: 240px; overflow: auto; }
.audit-diff summary { cursor: pointer; }

/* ── Phase 3: invoice status badges ─────────────────────────────────── */
.badge.inv-draft  { background: var(--status-none); }
.badge.inv-issued { background: var(--status-delivered); }
.badge.inv-paid   { background: #22c55e; }
.badge.inv-void   { background: #6b7280; text-decoration: line-through; }

/* Status chip error flash (self-correcting handler) */
.status-chip.chip-error { outline: 2px solid #ef4444; outline-offset: 1px; transition: outline .1s; }

/* ── Phase 4: clerks, star/flag toggles ─────────────────────────────── */
.clerk-swatch { display:inline-block; width:12px; height:12px; border-radius:3px;
  vertical-align:middle; border:1px solid rgba(0,0,0,.15); }
.icon-toggle { background:none; border:0; cursor:pointer; font-size:1rem; line-height:1;
  padding:0 2px; color:var(--bs-secondary-color); transition:transform .08s, color .1s; }
.icon-toggle:hover { transform:scale(1.2); }
.icon-toggle.star-toggle.on { color:#f59e0b; }
.icon-toggle.flag-toggle { filter:grayscale(1) opacity(.5); }
.icon-toggle.flag-toggle.on { filter:none; }

/* Invoice logo preview thumbnail in settings — top-right of the card */
.logo-preview { position: absolute; top: 12px; right: 12px;
  height: 96px; max-width: 320px; width: auto; object-fit: contain; cursor: zoom-in;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px; padding: 6px; background-color: #fff;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
                    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px;
  transition: box-shadow .1s; }
.logo-preview:hover { box-shadow: 0 2px 10px rgba(0,0,0,.15); }

/* Lightbox overlay (click a preview to enlarge) */
.lightbox { position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,.72); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: 800px; width: auto; max-height: 90vh; object-fit: contain;
  background: #fff; padding: 12px; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }

/* YICAT credential labels: one click selects the whole value for copying */
.yicat-cred { font-family: var(--bs-font-monospace); user-select: all; cursor: copy;
  background: var(--bs-tertiary-bg); border-radius: 4px; padding: 1px 6px; }

/* Sortable table headers */
.sort-header { color: inherit; text-decoration: none; white-space: nowrap; display: inline-block; }
.sort-header:hover { text-decoration: underline; }
.sort-header.active { font-weight: 600; }

/* Dashboard FX cards — three compact charts side by side */
.fx-widget { --fx-up: #2e9e5b; --fx-down: #d1495b; }
[data-bs-theme="dark"] .fx-widget { --fx-up: #4ade80; --fx-down: #f87171; }
.fx-widget .fx-ranges > .btn { padding: .05rem .25rem; font-size: .68rem; line-height: 1.3; }
.fx-widget .fx-chart { color: var(--bs-body-color); }   /* gridlines inherit currentColor */

/* Wires: the Wise/sender/FX split under a fees total */
.fee-split { font-size: .7rem; line-height: 1.25; }
.fee-split-sm { font-size: .68rem; }