/* POS Middleware control plane.
   v1.81: rebuilt to the tasteskill house rules (no-slop). One ground, one ink, one accent;
   surfaces separated by a tone step, not by outlines or shadows; one typeface (Geist, self-hosted,
   SIL OFL) with tabular figures for every number; sentence-case labels; lines only where the
   content is a real table or a form field; shadows only on things that truly float (menus,
   dialogs, popovers). */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --ink: #141b22;
  --ink-soft: #4b5661;
  --paper: #eef0ed;        /* ground */
  --paper-raised: #fbfcfb; /* a surface one step up */
  --sunken: #e3e6e2;       /* a surface one step down (bars, tracks, table heads) */
  --line: #cfd4cf;         /* only for real tables and form fields */
  --accent: #1f5f78;       /* the one accent: actions, links, the active item */
  --accent-soft: #dbe8ed;
  --signal: #a8640f;       /* state: limits and caution */
  --ok: #2b7350;           /* state: done */
  --danger: #b23b3b;       /* state: error, void */
  --r: 4px;                /* one radius, decided once; pills are fully round */
  --mono: ui-monospace, "SF Mono", Consolas, monospace;  /* taste-skill-ignore: real code / keys only */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }

.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
}
.masthead h1 {
  margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em;
}
.masthead .sub { font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--ink-soft);
}
.masthead form { margin: 0; }

.wrap { max-width: 1000px; margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem); }

/* global settings bar */
.globals {
  display: flex; gap: 1.5rem; align-items: end; flex-wrap: wrap;
  padding: 1rem 1.2rem; margin-bottom: 1.6rem;
  background: var(--paper-raised); border: 0; border-radius: var(--r);
}
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-variant-numeric: tabular-nums; font-size: 0.68rem; color: var(--ink-soft);
}
input[type="text"], input[type="number"], input[type="time"], input[type="date"], input[type="password"] { font-variant-numeric: tabular-nums; font-size: 0.9rem;
  padding: 0.4rem 0.55rem; border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r);
  background: #fff; color: var(--ink);
}
input:focus-visible, button:focus-visible, .day:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* preset card */
.preset {
  background: var(--paper-raised); border: 0; border-radius: var(--r);
  padding: 1.2rem 1.3rem 1.4rem; margin-bottom: 1.3rem;
}
.preset-head { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.9rem; }
.preset-head input.name {
  flex: 1; font-family: var(--sans); font-size: 1.02rem; font-weight: 600;
  border: none; border-bottom: 2px solid var(--line); border-radius: 0;
  padding: 0.3rem 0.1rem; background: transparent;
}
.preset-head input.name:focus { border-bottom-color: var(--accent); outline: none; }
/* v2.00 preset on/off */
.preset-state { flex: 0 0 auto; font-size: 0.7rem; font-weight: 600; border-radius: 999px;
  padding: 0.12rem 0.55rem; white-space: nowrap; }
.preset-state.is-on { background: #e6f4e6; color: #2f7d32; }
.preset-state.is-off { background: #ececec; color: #555; }
.preset.preset-off { background: #f3f3f1; }
.preset.preset-off .preset-head input.name { color: var(--ink-soft); }
.preset-off-note { margin-bottom: 0.6rem; }

.sect-head { font-variant-numeric: tabular-nums; font-size: 0.66rem; color: var(--ink-soft); margin: 1rem 0 0.5rem;
}

/* day toggles */
.days { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.day { font-variant-numeric: tabular-nums; font-size: 0.75rem;
  padding: 0.35rem 0.6rem; border: 0; border-radius: var(--r);
  background: #fff; color: var(--ink-soft); cursor: pointer; user-select: none;
}
.day[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* 24h band , the signature element */
.band {
  position: relative; height: 46px; margin: 0.4rem 0 0.2rem; border: 0; border-radius: var(--r);
  overflow: hidden;
}
.band .seg {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--signal) 22%, transparent);
  border-left: 2px solid var(--signal); border-right: 2px solid var(--signal);
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-size: 0.7rem; color: #6a3d05; overflow: hidden;
}
.band-axis {
  display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; font-size: 0.6rem; color: var(--ink-soft); margin-top: 2px;
}

/* window rows */
.windows { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.window-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.window-row .to { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 0.8rem; }
.window-row .limit-wrap { display: flex; align-items: center; gap: 0.35rem; }
.window-row .limit-wrap::before {
  content: "≤"; font-variant-numeric: tabular-nums; color: var(--signal); font-weight: 700;
}

button {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 550;
  padding: 0.45rem 0.85rem; border-radius: var(--r); border: 0;
  background: var(--ink); color: var(--paper); cursor: pointer;
}
button.ghost { background: transparent; color: var(--ink); }
button.small { padding: 0.25rem 0.55rem; font-size: 0.78rem; }
button.danger { border-color: var(--danger); color: var(--danger); background: transparent; }
button:hover { filter: brightness(1.08); }

.actions { display: flex; gap: 0.7rem; align-items: center; margin-top: 1.5rem; }
.status { font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }

/* login */
.login { max-width: 340px; margin: 12vh auto; text-align: center; }
.login p { color: var(--ink-soft); font-size: 0.9rem; }
.login form { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  button, .day { transition: filter .12s ease, background .12s ease, color .12s ease; }
}

/* ---- app shell with left nav (added for mapping sections) ---- */
.shell { display: flex; min-height: 100dvh; }

.nav {
  width: 232px; flex-shrink: 0; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; padding: 0.9rem 0.7rem;
  transition: width .16s ease;
}
.nav.collapsed { width: 58px; }
.nav-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; padding: 0 0.3rem; }
.hamburger {
  background: transparent; border: none; color: var(--paper); font-size: 1.1rem;
  cursor: pointer; padding: 0.2rem 0.35rem; border-radius: var(--r); line-height: 1;
}
.hamburger:hover { background: rgba(255,255,255,0.12); }
.brand-text { font-variant-numeric: tabular-nums; font-size: 0.7rem;
  color: #b9c4d0; white-space: nowrap; overflow: hidden;
}
.nav.collapsed .brand-text { display: none; }

.nav nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  background: transparent; border: none; color: #c6cfd9; cursor: pointer;
  padding: 0.6rem 0.55rem; border-radius: var(--r); text-align: left;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
}
.nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-ico { width: 1.2rem; text-align: center; font-size: 0.95rem; flex-shrink: 0; }
.nav.collapsed .nav-label { display: none; }
.nav.collapsed .nav-item { justify-content: center; padding: 0.6rem 0; }
.nav-foot { margin-top: auto; }
.nav.collapsed .nav-foot { display: none; }

.main { flex: 1; padding: clamp(1rem, 3vw, 2.2rem); max-width: 1000px; }
.page-head { margin-bottom: 1.4rem; padding-bottom: 0.8rem; }
.page-head h1 { margin: 0 0 0.2rem; font-size: 1.2rem; font-weight: 650; }
.page-head .sub { font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--ink-soft);
}
.page.hidden { display: none; }
.hint { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; max-width: 68ch; }

/* v1.56: Data Transport card , two side-by-side panels (Source | Destination) */
.globals.transport-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem; align-items: start; }
.tr-side { border: 0; border-radius: var(--r); padding: 0.8rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.7rem; }
.tr-side-title { font-variant-numeric: tabular-nums; font-size: 0.7rem; color: var(--ink-soft); font-weight: 700; }
.tr-side .field input, .tr-side .field select { width: 100%; max-width: 26rem; }
.tr-api-fields { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.7rem; }
.transport-config .pdf-config-span { grid-column: 1 / -1; }
/* the hidden attribute must WIN over .field/.tr-api-fields display rules */
.transport-config [hidden] { display: none !important; }
@media (max-width: 800px) { .globals.transport-config { grid-template-columns: 1fr; } }

/* Export PDF - Configuration (v1.51): a fixed 2-column GRID instead of a wrapping flex row.
   With flex + align-items:end, the tall NPWPD field (input + multi-line hint) stretched its row
   and bottom-anchored every neighbour, staggering the whole card into a staircase on ~1000px
   renders (e.g. 1080p laptop at 90% zoom). A grid keeps labels/inputs on clean rows no matter
   how tall any one field's hint is. */
.globals.pdf-config {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem; align-items: start;
}
.pdf-config .field { min-width: 0; }
.pdf-config .field input, .pdf-config .field select { width: 100%; max-width: 32rem; }
.pdf-config .pdf-config-span { grid-column: 1 / -1; }
.hint code { font-family: var(--mono); /* taste-skill-ignore: a real code / key string */ font-size: 0.82rem; background: var(--sunken);
  padding: 0.05rem 0.35rem; border-radius: var(--r); }

/* mapping tables */
/* overflow must be visible so the searchable dropdown menu isn't clipped by the table box */
.maptable { margin: 1.1rem 0; border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r); overflow: visible; }
.map-row {
  display: grid; grid-template-columns: 1fr 2rem 1fr; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.9rem; background: var(--paper-raised); border-bottom: 1px solid var(--line); /* taste-skill-ignore: a real table row */
}
.map-row:last-child { border-bottom: none; }
.map-row.head {
  background: var(--sunken); font-variant-numeric: tabular-nums; font-size: 0.68rem; color: var(--ink-soft);
}
.map-src { display: flex; flex-direction: column; gap: 0.1rem; }
.map-src .id { font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--signal); }
.map-src .name { font-weight: 550; }
.map-arrow { text-align: center; color: var(--ink-soft); font-size: 1.1rem; }
.map-row select {
  font-family: var(--sans); font-size: 0.9rem; padding: 0.4rem 0.5rem; border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r); background: #fff; width: 100%;
}
.map-empty { padding: 1.4rem; text-align: center; color: var(--ink-soft); background: var(--paper-raised); }

@media (max-width: 640px) {
  .nav { position: fixed; z-index: 20; height: 100dvh; width: 58px; }
  .nav.expanded { width: 232px; }
  .nav:not(.expanded) .brand-text, .nav:not(.expanded) .nav-label,
  .nav:not(.expanded) .nav-foot { display: none; }
  .nav:not(.expanded) .nav-item { justify-content: center; padding: 0.6rem 0; }
  .main { margin-left: 58px; }
  .map-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .map-arrow { display: none; }
}

/* sign-out button + version in the dark nav footer */
.nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0.3rem; }
.nav-foot form { margin: 0; }
.nav-signout {
  width: 100%; padding: 0.5rem 0.6rem; border-radius: var(--r);
  background: transparent; color: #c6cfd9; border: 0;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 500; cursor: pointer;
}
.nav-signout:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.4); }
.nav-version { font-variant-numeric: tabular-nums; font-size: 0.66rem;
  color: #6b7885; text-align: center; padding-bottom: 0.2rem;
}
.nav.collapsed .nav-signout, .nav.collapsed .nav-version { display: none; }

/* v1.67: running External bulk push , visible from every menu */
.nav-extjob {
  display: block; width: 100%; margin: 0.3rem 0; padding: 0.45rem 0.6rem; border-radius: var(--r); border: 0;
  background: rgba(46,160,110,0.18); color: #bfeedd; cursor: pointer;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-extjob[hidden] { display: none; }
.nav-extjob:hover { background: rgba(46,160,110,0.3); color: #fff; }
.nav.collapsed .nav-extjob { font-size: 0; padding: 0.45rem 0; text-align: center; }
.nav.collapsed .nav-extjob::before { content: "⇄"; font-size: 0.9rem; }

/* v1.67: persistent bulk-push progress card at the bottom of External */
.extjob {
  margin-top: 0.8rem; padding: 0.8rem 1rem; border: 0; border-radius: var(--r); background: var(--paper-raised); position: relative;
}
.extjob-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 0.45rem; }
.extjob-title { font-weight: 600; font-size: 0.92rem; }
.extjob-pct { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; }
.extjob-meta { margin-top: 0.4rem; font-size: 0.8rem; color: var(--ink-soft); }
.extjob-done { border-color: rgba(28,122,84,0.45); background: #f1faf5; }
.extjob-done .extjob-title { color: #1c7a54; }
.extjob-stalled { border-color: #d9a441; background: #fdf6e6; }
.extjob-dismiss { margin-top: 0.5rem; }

/* inbox badge in nav */
.nav-item { position: relative; }
.nav-badge {
  margin-left: auto; background: var(--danger); color: #fff; font-variant-numeric: tabular-nums;
  font-size: 0.68rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.nav.collapsed .nav-badge { position: absolute; top: 4px; right: 4px; margin: 0; }

/* inbox items */
.inbox-item {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: var(--paper-raised); border: 0; border-left: 4px solid var(--signal); border-radius: var(--r); padding: 0.9rem 1.1rem; margin-bottom: 0.7rem;
}
.inbox-item.resolved { border-left-color: var(--ok); opacity: 0.85; }
.inbox-icon {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff;
  background: var(--signal);
}
.inbox-item.resolved .inbox-icon { background: var(--ok); }
.inbox-title { line-height: 1.5; }
.inbox-link { color: var(--accent); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* mapping row highlight (deep-link target) */
.map-row.row-highlight {
  background: #fff7e0;
  animation: pulsehl 1.2s ease-in-out 2;
}
@keyframes pulsehl { 0%,100% { background:#fff7e0; } 50% { background:#ffeab8; } }

/* control panel (Start replication) */
.control-panel {
  margin-top: 1.8rem; padding: 1rem 1.2rem; border: 0; border-radius: var(--r);
  background: var(--paper-raised); display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.control-status { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; }
.control-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--ink-soft); }
.control-dot.running { background: var(--ok); }
.control-dot.paused { background: var(--danger); }
.start-btn { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.start-btn:hover { filter: brightness(1.08); }

/* monitoring gauges */
.gauge { margin-bottom: 1rem; }
.gauge-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; }
.gauge-label { font-weight: 550; font-size: 0.92rem; }
.gauge-val { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--ink-soft); }
.gauge-bar { height: 1.1rem; background: var(--sunken); border-radius: 999px; overflow: hidden; border: 0; }
.gauge-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; min-width: 2px; }
.gauge-fill.over { background: var(--danger); }

/* snapshot history */
.snapshot-list { display: flex; flex-direction: column; gap: 0.5rem; }
.snapshot {
  position: relative; background: var(--paper-raised); border: 0; border-radius: var(--r); padding: 0.6rem 0.9rem;
}
.snapshot-when { font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--ink-soft); }
.snapshot-summary { font-size: 0.88rem; margin-top: 0.15rem; }
.snapshot-prev { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.15rem; }
.snapshot-tag {
  position: absolute; top: 0.6rem; right: 0.9rem; font-variant-numeric: tabular-nums; font-size: 0.62rem; color: var(--ok); border: 0; border-radius: var(--r); padding: 0.05rem 0.35rem;
}
/* v1.72: source flag on every Configuration change , human (webapp) / AI agent (MCP) / CC */
.snap-flag { display: inline-block; font-variant-numeric: tabular-nums; font-size: 0.62rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.5rem;
  margin-left: 0.35rem; vertical-align: 1px; white-space: nowrap; }
.snap-flag.human { background: #e6f4e6; color: #2f7d32; }
.snap-flag.agent { background: var(--accent-soft); color: var(--accent); }
.snap-flag.cc { background: #fff3cd; color: #8a6100; }
.snapshot.snap-src-agent { border-left: 3px solid var(--accent); }
.snapshot.snap-src-cc { border-left: 3px solid #c9a227; }
.snapshot-by { font-size: 0.78rem; color: var(--accent); margin-top: 0.15rem; overflow-wrap: anywhere; }
.snapshot.snap-src-cc .snapshot-by { color: #8a6100; }
.snap-hint { text-transform: none; letter-spacing: 0; font-family: inherit; margin-left: 0.4rem; }
.snapshot-info .snap-setby { margin-top: 4px; color: var(--ink); }
/* v1.72: on its own Preset page the rules card reads top-down (inputs no longer pinned to the bottom) */
#page-preset > .globals { align-items: start; }
/* v1.98: "How presets are chosen" = its own full-width row under the settings fields */
#page-preset .presets-howto { flex: 1 1 100%; max-width: 72ch; }
#page-preset .presets-howto .hint { line-height: 1.55; }
.preset-interval-unit { color: var(--ink-soft); font-size: 0.85rem; }

/* default (fallback) mapping selector */
.default-map {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  background: #eef4f0; border: 0; border-radius: var(--r);
  padding: 0.7rem 0.9rem; margin-bottom: 0.9rem;
}
.default-label { font-weight: 600; font-size: 0.9rem; }
.default-map select { min-width: 16rem; }
.default-hint { font-size: 0.78rem; color: var(--ink-soft); }

/* ===== Dashboard ===== */
.score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.score-card {
  display: flex; align-items: center; gap: 1rem; background: var(--paper-raised); border: 0; border-radius: var(--r); padding: 1.2rem 1.4rem;
}
.score-ico {
  width: 3rem; height: 3rem; border-radius: var(--r); display: flex; align-items: center;
  justify-content: center; font-size: 1.3rem; color: #fff; flex-shrink: 0;
}
.sc-blue { }
.sc-green { }
.sc-purple { }
.score-label { font-size: 0.9rem; color: var(--ink-soft); }
.score-num { font-size: 2rem; font-weight: 700; line-height: 1.1; }

.dash-clock { font-variant-numeric: tabular-nums; font-size: 5rem; font-weight: 800; text-align: center; color: var(--ink); margin-top: 1rem;
}
.dash-date { text-align: center; color: var(--accent); font-size: 1rem; margin-bottom: 2rem; }

.transfer-card {
  display: flex; align-items: center; gap: 1.2rem; background: #edf7f1; border: 0; border-radius: var(--r); padding: 1.6rem 1.8rem; margin-bottom: 2rem;
}
.transfer-ico {
  width: 3.4rem; height: 3.4rem; border-radius: var(--r);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.transfer-label { color: var(--ink-soft); font-size: 1rem; }
.transfer-num { font-size: 2.6rem; font-weight: 800; line-height: 1.15; }
.transfer-note { font-size: 0.78rem; color: var(--ink-soft); }
/* v1.52: the day's estimated sales (DOW-WMA), in red , the daily-limit reference number */
.transfer-est { font-variant-numeric: tabular-nums; font-size: 0.82rem; font-weight: 700;
  color: var(--danger); margin: 0.15rem 0 0.1rem; }

/* v1.54: (i) info beside the estimation + its calculation popover (hover or tap) */
.est-info-wrap { position: relative; display: inline-block; }
.est-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0.92rem; height: 0.92rem; border-radius: 50%; border: 0; color: var(--danger); background: transparent; font-variant-numeric: tabular-nums; font-size: 0.6rem; font-weight: 700; font-style: italic;
  line-height: 1; cursor: help; padding: 0; vertical-align: text-bottom;
}
.est-info:hover { background: var(--danger); color: #fff; }
/* v1.55: FIXED + viewport-clamped (left/top/width/max-height set by JS at open time) ,
   never cropped by the screen edge, never under the sidebar, scrolls internally */
.est-pop {
  position: fixed; z-index: 1000;
  padding: 0.75rem 0.85rem; text-align: left; cursor: default; overflow-y: auto;
  background: var(--paper-raised); border: 0; border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,0.18); /* taste-skill-ignore: this element floats */
  font-family: var(--sans, inherit); font-weight: 400; color: var(--ink);
}
.est-pop-title { font-weight: 700; font-size: 0.8rem; margin-bottom: 0.25rem; }
.est-pop-sub { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.45;
  margin-bottom: 0.45rem; }
.est-pop-formula { font-variant-numeric: tabular-nums; font-size: 0.72rem; padding: 0.3rem 0.4rem;
  background: rgba(0,0,0,0.05); border-radius: var(--r); margin-bottom: 0.45rem; }
.est-pop-row { display: flex; justify-content: space-between; gap: 0.8rem;
  font-size: 0.76rem; padding: 0.12rem 0; font-variant-numeric: tabular-nums; }
.est-pop-skip { color: var(--ink-soft); }
.est-pop-skip b { font-weight: 400; font-style: italic; }
.est-pop-total { margin-top: 0.35rem;
  padding-top: 0.35rem; font-variant-numeric: tabular-nums; font-size: 0.72rem;
  overflow-wrap: anywhere; }
.est-pop-total b { color: var(--danger); }
.est-pop-basis { margin-top: 0.4rem; font-size: 0.7rem; color: var(--ink-soft);
  font-style: italic; }

.records-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.records-sub { font-size: 0.82rem; color: var(--ink-soft); }
.records-controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.records-controls select, .records-controls input[type=date] { padding: 0.35rem 0.5rem; }

.dash-table { border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r); overflow: hidden; }
.dash-row {
  display: grid; grid-template-columns: 3rem 2.2fr 1.2fr 1.2fr 1.2fr 1fr; gap: 0.5rem;
  padding: 0.75rem 1rem; align-items: center; border-bottom: 1px solid var(--line); /* taste-skill-ignore: a real table row */ font-size: 0.9rem;
}
.dash-row:last-child { border-bottom: none; }
.dash-head { background: var(--sunken); font-weight: 600; font-size: 0.78rem; color: var(--ink-soft); }
.dash-row .ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.dash-idx { color: var(--ink-soft); }
.dash-sn { font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.pill-ok {
  background: #d9f2e5; color: #1c7a54; border: 0; border-radius: var(--r);
  padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 600;
}

/* ===== Monitoring additions ===== */
.mon-topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.mon-date-controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.mon-date-label { font-size: 0.82rem; color: var(--ink-soft); }
.mon-date-controls input[type=date] { padding: 0.35rem 0.5rem; }
.start-btn.small { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.mon-scores { grid-template-columns: repeat(3, 1fr); }
.mon-scores .score-card { display: block; }
.mon-scores .score-num { font-size: 1.7rem; }
.score-note { font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.2rem; }
.mon-limit-card { background: #edf7f1; border-color: #cfe8db; }
.mon-limit-card .score-num { color: #1c7a54; }

/* execute-by-date progress */
.exec-prog { max-width: 520px; }
.exec-prog-label { font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--ink-soft); }
.exec-bar { height: 0.9rem; background: var(--sunken); border-radius: 999px; overflow: hidden; border: 0; }
.exec-fill { height: 100%; width: 0%; background: var(--ok); border-radius: 999px; transition: width .4s ease; }
.exec-done { color: #1c7a54; font-weight: 600; }

/* ===== nav foot always visible (scroll the item list, pin sign-out) ===== */
.nav { height: 100dvh; position: sticky; top: 0; }
.nav > nav { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.nav-foot { flex-shrink: 0; margin-top: 0.6rem; }

/* ===== External (Push Invoice) ===== */
.ext-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--line); /* taste-skill-ignore: a real table row */ margin-bottom: 1.2rem; }
.ext-tab { background: none; border: none; padding: 0.5rem 0.2rem; font-weight: 600; color: var(--ink-soft);
  border-bottom: 2px solid transparent; cursor: pointer; }
.ext-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.ext-filter { background: var(--paper-raised); border: 0; border-radius: var(--r);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.ext-filter-row, .ext-filter-row2 { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.ext-filter-row2 { margin-top: 0.9rem; }
.ext-field { display: flex; flex-direction: column; gap: 0.3rem; }
.ext-field label { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }
.ext-field .opt { font-weight: 400; opacity: 0.7; }
.ext-field input, .ext-field select { padding: 0.45rem 0.6rem; }
/* v1.75: a long option ("Exclude , Bills contain menu w/o tax") must not push the select
   past the card edge on a phone */
.ext-field { min-width: 0; }
.ext-field select { max-width: 100%; text-overflow: ellipsis; }
/* v1.75: "N bill(s) not checked yet" under the menu-w/o-tax filter */
.ext-notax-note { font-size: 0.74rem; color: #9a5b00; max-width: 18rem; line-height: 1.3; }
.ext-notax-note[hidden] { display: none; }
.ext-search { flex: 1 1 16rem; }
.ext-search input { width: 100%; }

.ext-actionbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--paper-raised); border: 0; border-radius: var(--r);
  padding: 0.8rem 1rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.ext-actions-left { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ext-selcount { background: var(--accent-soft); color: var(--accent); border: 0; border-radius: var(--r);
  padding: 0.25rem 0.7rem; font-size: 0.82rem; font-weight: 600; }

/* v1.62: copied rows showing the destination's edited amounts */
.pill-edited { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; font-size: 0.62rem; font-weight: 700;
  background: #fdf0d5; color: #92600a; vertical-align: middle; cursor: help; }
.ext-selsum { background: #edf4f7; border: 0; border-radius: var(--r);
  padding: 0.6rem 0.9rem; font-size: 0.85rem; margin-bottom: 0.6rem; }

.ext-table { border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r); overflow: hidden; }
/* v1.53: 16 columns , Subtotal + the three deductions + Net Sales. The table scrolls
   sideways inside its card whenever the screen is narrower than the columns need. */
.ext-row { display: grid;
  /* v1.63: +1 column (Menu w/o Tax) between Grand Total and Status */
  grid-template-columns: 3rem 1.7fr 1.7fr 1.3fr 1fr 1.4fr 1fr 0.85fr 0.85fr 0.95fr 1fr
    0.8fr 0.8fr 1.1fr 1.25fr 1fr 1.1fr;
  gap: 0.5rem; padding: 0.7rem 0.9rem; align-items: center; border-bottom: 1px solid var(--line); /* taste-skill-ignore: a real table row */
  font-size: 0.84rem; min-width: 1480px; }
.ext-mnt { font-size: 0.76rem; color: var(--ink-soft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* v1.63: the all-pages Total row (like the ESB report's) */
.ext-row.ext-total, .rep-row.rep-total { background: #fbf3dd; font-weight: 700;
  border-top: 2px solid #e5d5a4; position: sticky; bottom: 0; }
.ext-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ext-deduct { color: var(--ink-soft); }
.ext-net { font-weight: 700; }
.ext-pm { font-size: 0.78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ext-row:last-child { border-bottom: none; }
.ext-head { background: var(--sunken); font-weight: 600; font-size: 0.72rem; color: var(--ink-soft); }
.ext-row .ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.ext-sn { font-variant-numeric: tabular-nums; font-size: 0.76rem; }
/* Copied rows: dim the DATA cells only , the action buttons (VOID / Recreate) stay at
   full opacity, because a clickable button must never look disabled. */
.ext-row.is-copied { opacity: 1; }
.ext-row.is-copied > div:not(.ext-actions) { opacity: 0.55; }
.pill-copied { background: #e5e9ef; color: #566; border: 0; border-radius: var(--r);
  padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 600; }

.ext-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 0.8rem; }
.ext-pageinfo { font-size: 0.82rem; color: var(--ink-soft); }
.ext-pagenav { display: flex; align-items: center; gap: 0.6rem; }

/* monitoring inserted table + window over-limit */
.mon-ins-row { grid-template-columns: 3rem 2.4fr 1.2fr 1.2fr; }
.gauge-fill.over { background: var(--danger); }

/* modal (Recreate) */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,30,40,0.45); display: flex;
  align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--paper); border-radius: var(--r); padding: 1.6rem; width: min(560px, 92vw);
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); /* taste-skill-ignore: this element floats */ }
.modal h2 { margin: 0 0 0.4rem; }
.recreate-fields { display: flex; gap: 1rem; margin: 1rem 0; }
.recreate-fields .ext-field { flex: 1; }
.recreate-fields input { width: 100%; padding: 0.5rem 0.6rem; font-variant-numeric: tabular-nums; }
.recreate-preview { background: #eef4f0; border: 0; border-radius: var(--r);
  padding: 0.7rem 0.9rem; font-size: 0.9rem; }
.recreate-preview b { font-variant-numeric: tabular-nums; }
.recreate-note { display: block; font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.3rem; }
.recreate-warn { background: #fdeaea; border: 0; color: #9c2b2b; border-radius: var(--r);
  padding: 0.6rem 0.9rem; font-size: 0.85rem; margin-top: 0.6rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.2rem; }

/* Non Sales flag */
.pill-nonsales { display: inline-block; margin-left: 0.5rem; background: #fdecc8; color: #8a5a00; border: 0; border-radius: var(--r); padding: 0.05rem 0.45rem; font-size: 0.68rem;
  font-weight: 700; vertical-align: middle; }
.dash-row.is-nonsales .dash-sn, .ext-row.is-nonsales .ext-sn { color: #8a5a00; }
/* voided sales: red pill, greyed row, struck-through money */
.pill-void { display: inline-block; margin-left: 0.5rem; background: #fbe0e0; color: #a11a1a; border: 0; border-radius: var(--r); padding: 0.05rem 0.45rem; font-size: 0.68rem;
  font-weight: 700; vertical-align: middle; }
.ext-row.is-void, .rep-row.is-void, .dash-row.is-void { opacity: 0.6; }
.ext-row.is-void .ta-r, .rep-row.is-void .ta-r, .dash-row.is-void .ta-r { text-decoration: line-through; }
/* Create-new: Tax / SC tick boxes (defaults from the visit purpose) */
.create-charges { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin: 0.5rem 0 0.8rem; padding: 0.55rem 0.8rem; background: var(--paper); border: 0; border-radius: var(--r); }
.cc-title { font-size: 0.74rem; font-weight: 700; color: var(--ink-soft); }
.cc-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem;
  font-weight: 600; cursor: pointer; }
.cc-item input { width: 1.05rem; height: 1.05rem; }
.cc-note { font-size: 0.76rem; color: var(--ink-soft); font-style: italic; }

/* Debug tab (v1.50) */
.nav-debug { margin-bottom: 0.4rem; }
.dbg-toolbar { display: flex; align-items: center; gap: 0.8rem; margin: 0.6rem 0 1rem; }
.dbg-banner { border-radius: var(--r); padding: 0.9rem 1.1rem; margin-bottom: 1rem; }
.dbg-banner-head { font-weight: 700; font-size: 1rem; }
.dbg-banner-sub { font-size: 0.8rem; margin-top: 0.25rem; opacity: 0.85; }
.dbg-ok { background: #e7f3ea; border: 0; color: #1c5c34; }
.dbg-warn { background: #fdf3e2; border: 0; color: #7a5410; }
.dbg-err { background: #fbe9e7; border: 0; color: #8f2317; }
.dbg-none { background: var(--sunken); border: 0; color: var(--ink-soft); }
.dbg-stats { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dbg-stat { border: 0; border-radius: var(--r); background: var(--paper-raised);
  padding: 0.6rem 0.9rem; min-width: 10rem; }
.dbg-stat-label { font-size: 0.72rem;
  color: var(--ink-soft); }
.dbg-stat-num { font-size: 1.3rem; font-weight: 700; }
.dbg-stat-sub { font-size: 0.72rem; color: var(--ink-soft); }
.dbg-area { border: 0; border-radius: var(--r); margin-bottom: 0.9rem;
  overflow: hidden; }
.dbg-area-title { background: var(--sunken); font-weight: 700; font-size: 0.82rem;
  padding: 0.45rem 0.8rem; }
.dbg-issue { display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.55rem 0.8rem; border-top: 1px solid var(--line); /* taste-skill-ignore: a real table row */ background: #fff; }
.dbg-chip { flex-shrink: 0; font-size: 0.66rem; font-weight: 800; border-radius: 999px;
  padding: 0.14rem 0.55rem; margin-top: 0.1rem; }
.dbg-sev-error .dbg-chip { background: #c0392b; color: #fff; }
.dbg-sev-warning .dbg-chip { background: #e8a33d; color: #fff; }
.dbg-sev-info .dbg-chip { background: #7f8c8d; color: #fff; }
.dbg-issue-title { font-weight: 600; font-size: 0.86rem; }
.dbg-issue-detail { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.15rem; }
.dbg-h2 { font-size: 0.95rem; margin: 1.2rem 0 0.5rem; }
.dbg-hrow { display: grid; grid-template-columns: 1.2rem 11rem 1fr 7rem; gap: 0.5rem;
  padding: 0.3rem 0.2rem; font-size: 0.82rem; border-bottom: 1px dashed var(--line); /* taste-skill-ignore: a real table row */ }
.dbg-hdot.dbg-ok { color: #1c7a54; } .dbg-hdot.dbg-warn { color: #c98718; }
.dbg-hdot.dbg-err { color: #c0392b; }
.dbg-hver { color: var(--ink-soft); }

/* Refresh History card (v1.48): push-mirror from the webapp with live progress.
   v1.59/60: two COMPACT cards side by side, spanning the full content width.
   (Class is .refresh-grid , ".pm-grid" already belongs to the payment-method tiles
   and its auto-fill columns squashed these cards into narrow towers.) */
.refresh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;
  margin: 0.8rem 0; width: 100%; }
.refresh-grid .pm-card { margin: 0; padding: 0.55rem 0.85rem; gap: 0.4rem; }
.refresh-grid .pm-title { font-size: 0.82rem; }
.refresh-grid .pm-head .hint { font-size: 0.72rem; line-height: 1.4; }
.refresh-grid .pm-row { gap: 0.5rem; }
.refresh-grid .pm-row label, .refresh-grid .pm-row .hint { font-size: 0.74rem; }
@media (max-width: 980px) { .refresh-grid { grid-template-columns: 1fr; } }
.pm-card { border: 0; border-radius: var(--r); padding: 0.8rem 1rem;
  margin: 0.8rem 0; background: var(--paper-raised); display: flex; flex-direction: column; gap: 0.55rem; }
.pm-head { display: flex; flex-direction: column; gap: 0.25rem; }
.pm-title { font-weight: 700; font-size: 0.9rem; }
.pm-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pm-row label { font-size: 0.82rem; font-weight: 600; }
.pm-row input[type=date] { padding: 0.3rem 0.5rem; border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r); }
/* v1.80: Refresh History source picker + Stop */
.pm-row select#pm-source { padding: 0.3rem 0.5rem; border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r); max-width: 100%; }
#pm-stop { padding: 0.4rem 0.8rem; font-size: 0.85rem; font-weight: 600; }
#pm-stop:hover { background: var(--danger); color: #fff; }
#pm-run:disabled, #pm-source:disabled { opacity: 0.5; cursor: not-allowed; }

/* internal VOID button (External > Copied rows): red, white font */
.btn-void { background: #c0392b; color: #fff; border: 0; border-radius: var(--r);
  padding: 0.3rem 0.7rem; font-size: 0.74rem; font-weight: 700;
  cursor: pointer; }
.btn-void:hover { background: #a93226; }
/* Export PDF paper-size menu (v1.45): A4 / Legal chooser under the Reports button */
.pdf-paper-menu { position: absolute; z-index: 40; background: #fff; border: 0; border-radius: var(--r); box-shadow: 0 6px 18px rgba(0,0,0,0.14); /* taste-skill-ignore: this element floats */ padding: 0.3rem; display: flex;
  flex-direction: column; gap: 0.2rem; min-width: 12rem; }
.pdf-paper-opt { background: none; border: 0; border-radius: var(--r); text-align: left;
  padding: 0.45rem 0.7rem; font-size: 0.82rem; cursor: pointer; color: inherit; }
.pdf-paper-opt:hover { background: var(--sunken); }

/* internal EDIT button (v1.43): deep green, white font, full opacity */
.btn-edit { background: #14683a; color: #fff; border: 0; border-radius: var(--r);
  padding: 0.3rem 0.7rem; font-size: 0.74rem; font-weight: 700;
  cursor: pointer; }
.btn-edit:hover { background: #0e5230; }
/* stacked action buttons, uniform size so Recreate matches VOID/EDIT (v1.43) */
.ext-actions { display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch; }
.ext-actions .btn-ext { width: 5.4rem; padding: 0.32rem 0.5rem; text-align: center;
  font-size: 0.74rem; box-sizing: border-box; }
/* Dashboard: Tax as a second big transfer card under Subtotal */
.transfer-card-tax { margin-top: 0.8rem; }
/* Dashboard Void mini card + Reports/Monitoring void score accents */
.mini-void .mini-num, .rep-void .score-num, .mon-void-card .score-num { color: #a11a1a; }
/* View Preset scorecards now hold 5 cards */
.mon-scores { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .mon-scores { grid-template-columns: repeat(2, 1fr); } }

/* dashboard scorecard redesign */
.transfer-sub { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.2rem; }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 1.4rem; }
.mini-card { background: var(--paper-raised); border: 0; border-radius: var(--r);
  padding: 1rem 1.1rem; }
.mini-label { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.mini-num { font-size: 1.6rem; font-weight: 700; margin: 0.3rem 0; font-variant-numeric: tabular-nums; }
.mini-sub { font-size: 0.78rem; color: var(--ink-soft); }

/* member mapping toolbar + auto-map highlight */
.member-toolbar { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.8rem; flex-wrap: wrap; }
.member-toolbar input[type=text] { flex: 1 1 16rem; padding: 0.45rem 0.6rem; }
.member-unmapped { font-size: 0.82rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.3rem; }
.map-row.map-auto { background: #fdf6d8; border-left: 3px solid #e0b400; }
.member-pager { display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  margin-top: 0.9rem; font-size: 0.85rem; color: var(--ink-soft); }

/* mapping highlights: red = unmapped, yellow = auto-mapped (needs review) */
.map-row.map-unmapped { background: #fdeeee; border-left: 3px solid #e05252; }
.nav-badge { display: inline-block; margin-left: auto; background: #e05252; color: #fff; border-radius: var(--r); padding: 0.05rem 0.5rem; font-size: 0.72rem; font-weight: 700; }
/* honour the `hidden` attribute , an author `display:` otherwise beats the UA [hidden] rule,
   which is why the badge kept showing a red "0" after everything was mapped. */
.nav-badge[hidden] { display: none !important; }
.inbox-unmapped-banner { background: #fdf6d8; border: 0; border-radius: var(--r);
  padding: 0.8rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; }
.inbox-unmapped-banner a { color: var(--accent); font-weight: 600; }
.inbox-queue-row { padding: 0.35rem 0; line-height: 1.5; }
.inbox-queue-row + .inbox-queue-row { }

/* Auto-map progress bar */
.automap-progress { height: 8px; background: #eee; border-radius: var(--r); overflow: hidden;
  margin: 0.4rem 0 0.35rem; }
.automap-bar { height: 100%; width: 0; background: var(--accent, var(--accent));
  transition: width 0.15s ease; }
.automap-bar.done { background: #2e9e5b; }
.automap-bar.err { background: #e05252; }
.automap-text { font-size: 0.82rem; color: var(--ink-soft); }

/* pinned Default (fallback) selector host at the top of each mapping tab */
.default-map-host { margin-bottom: 0.6rem; }

/* red destructive button (Recreate replace confirm) */
.danger-btn { background: #d63030; color: #fff; border: none; border-radius: var(--r);
  padding: 0.55rem 1rem; font-weight: 700; cursor: pointer; }
.danger-btn:hover { background: #b81f1f; }
.confirm-modal { max-width: 30rem; }
.confirm-modal p { line-height: 1.6; }

/* single click-twice date-range picker (External > Period) */
.daterange-wrap { position: relative; }
#ext-range { cursor: pointer; padding: 0.45rem 0.6rem; min-width: 12rem; }
.daterange-cal { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0;
  background: #fff; border: 0; border-radius: var(--r); padding: 0.6rem; box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* taste-skill-ignore: this element floats */ width: 17rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.cal-title { font-weight: 700; font-size: 0.9rem; }
.cal-nav { border: none; background: var(--sunken); border-radius: var(--r); width: 1.8rem; height: 1.8rem;
  cursor: pointer; font-size: 1rem; }
.cal-nav:hover { background: var(--sunken); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-size: 0.7rem; color: var(--ink-soft); padding: 0.2rem 0; }
.cal-title { color: var(--ink); }
.cal-day { border: none; background: transparent; border-radius: var(--r); padding: 0.35rem 0;
  cursor: pointer; font-size: 0.82rem; color: var(--ink); font-weight: 500; }
.cal-day:hover { background: var(--accent-soft); }
.cal-day.inrange { background: var(--accent-soft); color: var(--ink); }
.cal-day.sel { background: var(--accent, var(--accent)); color: #fff; font-weight: 700; }

/* searchable dropdown (combo) used across the mapping tabs */
.combo { position: relative; width: 100%; }
.combo-input { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid #cfd5db; /* taste-skill-ignore: a real form field / table */ border-radius: var(--r);
  background: #fff; cursor: text; }
.combo-menu { position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; right: 0;
  max-height: 15rem; overflow-y: auto; background: #fff; border: 0; border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* taste-skill-ignore: this element floats */ }
.combo-item { padding: 0.45rem 0.6rem; cursor: pointer; font-size: 0.88rem; color: var(--ink); }
.combo-item:hover { background: var(--accent-soft); }
.combo-item.sel { background: var(--accent-soft); font-weight: 600; }
.combo-empty { padding: 0.45rem 0.6rem; color: var(--ink-soft); font-size: 0.85rem; }

/* inbox card: pink when a mapping still has unmapped items */
.inbox-item.unresolved { border-left-color: #e05252; background: #fdeeee; }
.inbox-item.unresolved .inbox-icon { background: #e05252; }

/* live agent status chip (lives in the sidebar footer, above Sign out) */
.agent-chip { font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; }
.agent-chip.on { background: #e2f4e8; color: #1e7a3f; }
.agent-chip.warn { background: #fdf6d8; color: #8a6d00; }
.agent-chip.off { background: #fdeeee; color: #b81f1f; }
.nav-agent { display: block; text-align: center; margin: 0 0.6rem 0.6rem; white-space: normal;
  line-height: 1.4; }
.nav.collapsed .nav-agent { display: none; }

/* calendar: clearly visible month/year navigation + month-picker view */
.cal-nav { border: 0; background: #fff; color: var(--ink); border-radius: var(--r);
  width: 2rem; height: 2rem; cursor: pointer; font-size: 0.8rem; line-height: 1; }
.cal-nav:hover { background: var(--accent-soft); }
.cal-title-btn { border: none; background: transparent; font-weight: 700; font-size: 0.92rem;
  color: var(--ink); cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--r); }
.cal-title-btn:hover { background: var(--accent-soft); }
.cal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; padding: 0.3rem 0; }
.cal-month { border: 0; background: #fff; color: var(--ink); border-radius: var(--r);
  padding: 0.55rem 0; cursor: pointer; font-size: 0.85rem; }
.cal-month:hover { background: var(--accent-soft); }
.cal-month.sel { background: var(--accent, var(--accent)); color: #fff; border-color: var(--accent, var(--accent));
  font-weight: 700; }

/* Telegram hourly summary card (Configuration page) */
.tg-card { border: 0; border-radius: var(--r); padding: 1rem 1.2rem;
  background: #fff; margin-top: 0.6rem; }
.tg-fields { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.8rem; margin: 0.6rem 0; }
@media (max-width: 800px) { .tg-fields { grid-template-columns: 1fr; } }
.tg-enable { display: flex; align-items: center; gap: 0.45rem; font-weight: 600;
  font-size: 0.9rem; margin: 0.5rem 0; }
.tg-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.4rem; }

/* v1.69: AI agent bridge card (Configuration) */
.aib-card .aib-sub { font-weight: 700; font-size: 0.85rem; margin: 1.1rem 0 0.4rem;
  color: var(--ink); }
.aib-count { display: inline-block; min-width: 1.4rem; text-align: center; border-radius: 999px;
  background: #e2554d; color: #fff; font-size: 0.75rem; padding: 0 0.4rem; margin-left: 0.3rem; }
.aib-count:empty { display: none; }
.aib-list { display: flex; flex-direction: column; gap: 0.5rem; }
.aib-item { border: 0; border-radius: var(--r); padding: 0.65rem 0.8rem;
  display: flex; gap: 0.8rem; align-items: flex-start; flex-wrap: wrap; }
.aib-item.pending { border-color: #e9b949; background: #fffaf0; }
.aib-item .aib-main { flex: 1 1 320px; min-width: 0; }
.aib-item .aib-sum { font-weight: 600; overflow-wrap: anywhere; }
.aib-item .aib-meta { color: var(--ink-soft); font-size: 0.8rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
.aib-item .aib-btns { display: flex; gap: 0.5rem; align-items: center; }
.aib-pill { font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.5rem;
  white-space: nowrap; }
.aib-pill.applied { background: #e6f4e6; color: #2f7d32; }
.aib-pill.rejected, .aib-pill.failed { background: #fdecea; color: #b3261e; }
.aib-pill.expired { background: #eef0f3; color: #5f6b7a; }
.aib-empty { color: var(--ink-soft); font-size: 0.85rem; }
.aib-tokenbox { margin-top: 0.6rem; border: 0; background: #fffaf0; border-radius: var(--r); padding: 0.7rem 0.8rem; font-size: 0.85rem; }
.aib-tokenbox code { display: block; margin: 0.35rem 0; padding: 0.45rem; background: #fff; border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r); overflow-wrap: anywhere; user-select: all; }
/* v1.72: auto-apply on the client's "Ya" + paginated Recent decisions */
.aib-card .aib-auto { font-weight: 600; flex-wrap: wrap; }
.aib-tmp { font-size: 0.68rem; font-weight: 700;
  background: #fff3cd; color: #8a6100; border-radius: 999px; padding: 0.05rem 0.45rem; }
.aib-card .aib-auto-hint { margin: -0.2rem 0 0.6rem 1.6rem; }
.aib-total { color: var(--ink-soft); font-weight: 400; font-size: 0.8rem; margin-left: 0.3rem; }
.aib-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.aib-pill.auto { background: var(--accent-soft); color: var(--accent); }
.aib-item .aib-reply { color: var(--accent); }
.aib-card .aib-pager { margin-top: 0.6rem; }

/* checklist-upload summary popup */
.checklist-modal { max-width: 60rem; width: 94vw; }
.chk-table { border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r); overflow-x: auto; margin: 0.6rem 0; }
.chk-row { display: grid; grid-template-columns: 7.5rem 4.5rem repeat(7, 1fr); gap: 0.4rem;
  padding: 0.45rem 0.7rem; font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.chk-row + .chk-row { border-top: 1px solid var(--line); /* taste-skill-ignore: a real table row */ }
.chk-row.chk-head { background: var(--sunken); font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); }
.chk-row.chk-total { background: var(--accent-soft); font-weight: 800; }

/* External > Create new modal */
.create-modal { max-width: 56rem; width: 92vw; max-height: 90vh; overflow-y: auto; }
.create-lines { margin: 1rem 0 0.6rem; border: 0; border-radius: var(--r); padding: 0.5rem; }
.cl-row { display: grid; grid-template-columns: 2rem 2.2fr 4.5rem 7rem 7rem 2.6rem 2.6rem 6rem 2.2rem;
  gap: 0.4rem; align-items: center; padding: 0.25rem 0; }
.cl-row.cl-head { font-size: 0.72rem; font-weight: 700;
  color: var(--ink-soft); border-bottom: 1px solid var(--line); /* taste-skill-ignore: a real table row */ padding-bottom: 0.4rem; }
.cl-row input { width: 100%; padding: 0.35rem 0.45rem; }
.cl-cb { display: flex; justify-content: center; align-items: center; }
.cl-row .cl-cb input { width: 1.05rem; height: 1.05rem; padding: 0; cursor: pointer; }
.create-totals { margin-top: 0.8rem; border-top: 2px solid var(--line); padding-top: 0.6rem; }
.ct-row { display: grid; grid-template-columns: 11rem 10rem 1fr; gap: 0.6rem;
  align-items: center; padding: 0.18rem 0; }
.ct-label { font-weight: 600; font-size: 0.88rem; }
.ct-val { text-align: right; font-variant-numeric: tabular-nums; }
.ct-val input { width: 100%; text-align: right; padding: 0.3rem 0.45rem; }
.ct-note { font-size: 0.75rem; color: var(--ink-soft); }
.ct-grand { border-top: 1px solid var(--line); /* taste-skill-ignore: a real table row */ margin-top: 0.3rem; padding-top: 0.45rem; }
.ct-grand .ct-val { font-weight: 800; font-size: 1.05rem; }

/* dashboard 4 mini cards with colors */
.mini-cards-4 { grid-template-columns: repeat(4, 1fr); }
.mini-card.mini-tax { background: var(--accent-soft); border-color: #bcd8f5; }        /* clear blue */
.mini-card.mini-sc { background: #fdf6d8; border-color: #ecd98a; }         /* clear yellow */
.mini-card.mini-vat { background: #dfe7f5; border-color: #9db4dc; }        /* deep blue */
.mini-card.mini-vat .mini-num { color: #1e3a6e; }
.mini-card.mini-nonsales { background: #fce8ec; border-color: #f3c0cd; }   /* clear reddish/pink */
@media (max-width: 900px) { .mini-cards-4 { grid-template-columns: repeat(2, 1fr); } }

/* dashboard/config-view rows with Config button column */
.dash-row-cfg { grid-template-columns: 3rem 2fr 1.2fr 1.2fr 1.3fr 1fr 5rem; }
.snapshot-info { font-size: 0.9rem; line-height: 1.9; }
.snapshot-info b { color: var(--ink-soft); }
/* v1.71 preset snapshot: the window the bill fell in + which Configuration version it is */
.snapshot-info mark.snap-hit { background: #f2dfc4; color: inherit; padding: 1px 4px; border-radius: var(--r); font-weight: 600; }
.snapshot-info .snap-src { margin-top: 10px; padding-top: 8px; font-size: 0.82rem; line-height: 1.6; color: var(--ink-soft); }
.snapshot-info .snap-warn { margin-top: 8px; color: #a33a2a; }

/* monitoring rows with Config button */
.mon-ins-row-cfg { grid-template-columns: 3rem 2fr 1.3fr 1.3fr 5rem; }
.mon-nonsales-card { background: #fce8ec; }
.gauge-val.over { color: #c0392b; font-weight: 700; }

/* window collision warning + remark */
.window-remark { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.5rem; font-style: italic; }
.win-collide { color: #c0392b; font-size: 0.78rem; margin-left: 0.5rem; }

/* per-preset payment-method filter */
.pm-filter { margin: 0.4rem 0 0.2rem; }
.pm-shortcuts { display: flex; gap: 0.4rem; margin: 0.2rem 0 0.5rem; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem 0.9rem; }
.pm-item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem;
  padding: 0.15rem 0; cursor: pointer; }
.pm-item input { width: 1rem; height: 1rem; }
@media (max-width: 640px) { .pm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .pm-grid { grid-template-columns: 1fr; } }

/* ---------- Reports (Sales Head Report) ---------- */
.rep-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.2rem; }
@media (max-width: 900px) { .rep-charts { grid-template-columns: 1fr; } }
.rep-card {
  background: var(--paper-raised); border: 0; border-radius: var(--r);
  padding: .9rem 1rem 1rem;
}
.rep-card-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.rep-card-title { font-weight: 700; }
.rep-legend { display: flex; gap: .9rem; font-size: .8rem; color: var(--ink-soft); }
.rep-key { display: inline-flex; align-items: center; gap: .35rem; }
.rep-dot { width: 10px; height: 10px; border-radius: var(--r); display: inline-block; }
.rep-dot-origin { background: #9aa7b5; }
.rep-dot-synced { background: var(--accent); }
.rep-chart { width: 100%; }
.rep-svg { width: 100%; height: auto; display: block; }
.rep-grid { stroke: var(--line); stroke-width: 1; }
.rep-ylab, .rep-xlab { fill: var(--ink-soft); font-size: 10px; font-variant-numeric: tabular-nums; }
.rep-area-origin { fill: rgba(154, 167, 181, .22); stroke: none; }
.rep-line-origin { fill: none; stroke: #9aa7b5; stroke-width: 1.6; }
.rep-line-synced { fill: none; stroke: var(--accent); stroke-width: 2.2; }
/* v1.52: red DOW-WMA Estimation forecast , dashed so a prediction never reads as an actual */
.rep-line-est { fill: none; stroke: var(--danger); stroke-width: 2; stroke-dasharray: 5 4; }
.rep-dot-est { background: var(--danger); }
.rep-dot-est-svg { fill: var(--danger); }
.rep-hover-est { fill: #fff; stroke: var(--danger); stroke-width: 2; }
.rep-dot-svg { fill: var(--accent); }
.rep-gap { margin-top: .55rem; font-size: .85rem; color: var(--ink); }
.rep-gap b { color: var(--danger); }
.rep-scores .score-num { font-variant-numeric: tabular-nums; }
.rep-grand { background: var(--accent); }
.rep-grand .score-label, .rep-grand .score-num { color: #fff; }
.rep-tablewrap { overflow-x: auto; margin-top: 1rem; }
.rep-table { min-width: 1080px; }
.rep-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr 1.35fr 1.35fr 1.2fr 1.15fr .9fr .75fr .75fr .75fr .95fr;
  gap: .5rem; align-items: center;
  padding: .5rem .6rem; border-bottom: 1px solid var(--line); /* taste-skill-ignore: a real table row */
  font-size: .84rem; background: var(--paper-raised);
}
.rep-row.rep-head { font-weight: 700; background: var(--paper); position: sticky; top: 0;
  border-bottom: 2px solid var(--ink); font-size: .78rem; color: var(--ink-soft); }
.rep-row .ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.rep-pm { font-size: .78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.rep-row.is-nonsales { opacity: .75; }
.rep-sn { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; font-size: .8rem; }
.rep-date { font-variant-numeric: tabular-nums; font-size: .78rem; }

/* Reports: hover tooltip + Export */
.rep-hit { position: absolute; inset: 0; width: 100%; height: 100%; }
.rep-guide { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.rep-hover-origin { fill: #fff; stroke: #9aa7b5; stroke-width: 2; }
.rep-hover-synced { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.rep-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--paper-raised); border: 0; border-radius: var(--r); box-shadow: 0 6px 20px rgba(0,0,0,.12); /* taste-skill-ignore: this element floats */
  padding: .55rem .7rem; min-width: 190px; font-size: .82rem;
}
.rep-tip-date { font-weight: 700; margin-bottom: .35rem; }
.rep-tip-row { display: flex; align-items: center; gap: .4rem; margin: .15rem 0; }
.rep-tip-lab { color: var(--ink-soft); flex: 1; }
.rep-tip-row b { font-variant-numeric: tabular-nums; }
/* v1.52: the two export buttons live in one tidy stacked column (top: PDF, bottom: .xlsx),
   pushed to the right of the toolbar , same look as the mobile layout */
.rep-export-stack { display: flex; flex-direction: column; gap: 0.45rem; margin-left: auto;
  align-self: end; }
.rep-export-stack .rep-export-btn { margin-left: 0; width: 100%; min-width: 10.5rem;
  justify-content: center; }

/* v1.52: graph style toggle (Straight | Smoothed) above the charts */
.rep-chartbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
  margin: 0 0 0.6rem; }
.rep-chartbar-lab { font-variant-numeric: tabular-nums; font-size: 0.68rem; color: var(--ink-soft); }
.rep-linetoggle { display: inline-flex; border: 0; border-radius: var(--r);
  overflow: hidden; background: var(--paper-raised); }
.rep-linetoggle button { border: 0; background: transparent; padding: 0.4rem 0.85rem; font-variant-numeric: tabular-nums; font-size: 0.72rem; cursor: pointer; color: var(--ink-soft); }
.rep-linetoggle button + button { border-left: 1px solid var(--line); /* taste-skill-ignore: a real table row */ }
.rep-linetoggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }
#rep-export-status { display: block; margin-top: .4rem; }

/* ---------- Multibranch switcher (sidebar, under the brand) ---------- */
.branch-switch { position: relative; padding: .35rem .75rem .55rem; }
.branch-btn {
  width: 100%; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff; border: 0; border-radius: var(--r);
  padding: .45rem .6rem; font-size: .82rem; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: .4rem;
}
.branch-btn:hover { background: rgba(255,255,255,.14); }
.branch-btn .branch-caret { margin-left: auto; opacity: .7; }
.branch-menu {
  position: absolute; left: .75rem; right: .75rem; top: calc(100% - .3rem); z-index: 60;
  background: var(--paper-raised); border: 0; border-radius: var(--r); box-shadow: 0 10px 28px rgba(0,0,0,.28); /* taste-skill-ignore: this element floats */ overflow: hidden;
}
.branch-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line); /* taste-skill-ignore: a real table row */
  padding: .5rem .7rem; font-size: .84rem; color: var(--ink);
}
.branch-item:last-child { border-bottom: 0; }
.branch-item:hover { background: var(--paper); }
.branch-item.current { font-weight: 700; color: var(--accent); cursor: default; }
.nav.collapsed .branch-switch { display: none; }

/* ---------- Key License page ---------- */
.lic-card { background: var(--paper-raised); border: 0; border-radius: var(--r);
  padding: 1.1rem 1.3rem; margin-bottom: 1rem; max-width: 46rem; }
.lic-status-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lic-badge { font-weight: 800; font-size: .8rem; padding: .3rem .7rem;
  border-radius: 999px; border: 0; }
.lic-valid   { background: #e4f3ea; color: var(--ok); border-color: var(--ok); }
.lic-grace   { background: #fdf3e4; color: var(--signal); border-color: var(--signal); }
.lic-expired, .lic-killed { background: #fdeaea; color: var(--danger); border-color: var(--danger); }
.lic-none    { background: var(--paper); color: var(--ink-soft); }
.lic-message { font-size: .9rem; }
.lic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .9rem 1.2rem; }
.lic-label { font-size: .72rem; color: var(--ink-soft); }
.lic-val { font-weight: 700; }
.lic-val.mono { font-family: var(--mono); /* taste-skill-ignore: a real code / key string */ font-size: .8rem; font-weight: 500; word-break: break-all; }
.lic-form { display: flex; gap: .6rem; margin-top: .4rem; }
.lic-form input { flex: 1; padding: .55rem .7rem; border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r); font-family: var(--mono); /* taste-skill-ignore: a real code / key string */ font-size: .85rem; }

/* ============================================================================
   MOBILE (responsive) , tuned for 344–430px phones:
   Galaxy Z Fold cover screen (344), iPhone 12/13/16/17 (390–402),
   Redmi Note 13 / Galaxy A55/A56 (393–412), iPhone 15 Plus / Pro Max (428–440).
   The ≤640px block near the top already turns the sidebar into a 58px rail with
   a hamburger overlay; this section makes every PAGE fit and touch-friendly.
   ========================================================================== */
@media (max-width: 640px) {
  /* Re-assert the mobile nav here: an unconditional `.nav { position: sticky }` rule sits
     AFTER the original 640px block in this file and silently overrode its `position: fixed`
     , the nav then took flow space AND .main added a 58px margin, pushing every page 116px
     right and off the screen. This block is last in the file, so it wins. */
  .nav { position: fixed; z-index: 20; height: 100dvh; width: 58px; }
  .nav.expanded { width: 232px; box-shadow: 4px 0 24px rgba(0,0,0,.35); /* taste-skill-ignore: this element floats */ overflow-y: auto; }
  .main { margin-left: 58px; padding: 0.9rem 0.7rem 2rem; max-width: 100%; min-width: 0;
    width: calc(100% - 58px); box-sizing: border-box; overflow-x: hidden; }
  .page-head h1 { font-size: 1.25rem; }
  /* 16px inputs stop iOS Safari from auto-zooming on focus */
  input, select, textarea, button { font-size: 16px; }
  /* Configuration preset editor: let the window rows wrap instead of overflowing */
  .window-row, .preset-days, .date-ranges { flex-wrap: wrap; }

  /* --- Dashboard --- */
  .score-row { grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
  .score-card { padding: 0.8rem; }
  .score-num { font-size: 1.3rem; }
  .mini-cards, .mini-cards-4 { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .transfer-card { flex-direction: column; align-items: flex-start; gap: 0.7rem;
    padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
  .transfer-num { font-size: 1.7rem; word-break: break-all; }
  .dash-clock { font-size: 2rem; }
  .rep-export-stack { flex: 1 1 100%; margin-left: 0; }
  .rep-chartbar { justify-content: flex-start; }
  #dash-table, .ext-table, .chk-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-row-cfg { min-width: 620px; }
  .ext-row { min-width: 1360px; }
  .chk-row { min-width: 760px; }
  .records-controls { flex-wrap: wrap; }

  /* --- External / filters / pagers --- */
  .ext-filter { padding: 0.8rem; }
  .ext-filter-row .ext-field, .ext-filter-row2 .ext-field { flex: 1 1 100%; }
  .ext-filter-row .start-btn, .ext-filter-row2 .start-btn,
  .ext-filter-row .ghost { flex: 1 1 100%; }
  .ext-actionbar { flex-wrap: wrap; gap: 0.5rem; }
  .ext-actionbar .start-btn { width: 100%; }
  .ext-pager { flex-wrap: wrap; gap: 0.5rem; }

  /* --- Range-picker calendar: never wider than the screen --- */
  .daterange-wrap { position: relative; }
  .daterange-cal { max-width: calc(100vw - 90px); width: min(17rem, calc(100vw - 90px)); }
  .cal-day, .cal-month { min-height: 2.1rem; }   /* touch targets */

  /* --- Modals (Create new / Recreate / checklist summary) --- */
  .modal { width: 96vw; padding: 1rem 0.9rem; max-height: 88vh; overflow-y: auto; }
  .recreate-fields { flex-wrap: wrap; gap: 0.6rem; }
  .recreate-fields .ext-field { flex: 1 1 100%; }

  /* --- Configuration --- */
  .globals { flex-wrap: wrap; gap: 0.8rem; }
  .globals.pdf-config { grid-template-columns: 1fr; gap: 0.8rem; }
  .preset { padding: 0.9rem 0.8rem; }
  .preset-head { flex-wrap: wrap; gap: 0.5rem; }
  .actions { flex-wrap: wrap; gap: 0.5rem; }
  .tg-fields { grid-template-columns: 1fr; }

  /* --- Reports --- */
  .rep-card { padding: 0.7rem 0.6rem 0.8rem; }
  .rep-card-head { gap: 0.3rem; }
  .rep-scores.score-row { grid-template-columns: 1fr 1fr; }
  .rep-gap { font-size: 0.78rem; }
  .rep-tip { min-width: 160px; font-size: 0.76rem; }

  /* --- Key License --- */
  .lic-card { padding: 0.9rem 0.8rem; }
  .lic-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .lic-form { flex-wrap: wrap; }
  .lic-form input { flex: 1 1 100%; }
  .lic-form .start-btn { width: 100%; }

  /* --- Mapping pages / inbox --- */
  .maptable { overflow-x: visible; }
  .inbox-item { padding: 0.7rem 0.8rem; }
}

/* Extra-narrow: Galaxy Z Fold cover screen (~344px) and similar */
@media (max-width: 380px) {
  .score-row, .mini-cards, .mini-cards-4, .rep-scores.score-row,
  .lic-grid { grid-template-columns: 1fr; }
  .dash-clock { font-size: 1.6rem; }
  .transfer-num { font-size: 1.45rem; }
  .main { padding: 0.7rem 0.5rem 2rem; min-width: 0; }
  /* the preset editor's control rows have a ~300px minimum , scroll the CARD, not the page */
  .preset, .globals { overflow-x: auto; }
}

/* Reports: period shortcut buttons + monthly bar mode */
.rep-shortcuts { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.rep-shortcut {
  padding: 0.5rem 0.7rem; border: 0; border-radius: var(--r);
  background: var(--paper-raised); color: var(--ink); font-size: 0.8rem; cursor: pointer;
}
.rep-shortcut:hover { border-color: var(--accent); }
.rep-shortcut.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.rep-bar-origin { fill: #9aa7b5; }
.rep-bar-synced { fill: var(--accent); }
.rep-dot-gap { background: var(--danger); }
@media (max-width: 640px) {
  .rep-shortcuts { width: 100%; }
  .rep-shortcut { flex: 1 1 30%; }
}

/* v1.32: monthly bars are OVERLAID (one bar per month) , deep blue synced in front of grey origin */
.rep-bar-synced { fill: var(--accent); }

/* Agent activity panel + BUSY chip */
.agent-chip { cursor: pointer; }
.agent-chip.busy { background: #fdf3e4; color: #8a5a00; border: 0; }
.act-modal { width: min(560px, 96vw); max-height: 84vh; overflow-y: auto; }
.act-title { font-weight: 800; font-size: 0.78rem; margin: 0.9rem 0 0.3rem; color: var(--ink-soft); }
.act-title.run { color: var(--signal); }
.act-title.don { color: var(--ok); }
.act-row { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline;
  padding: 0.45rem 0.6rem; border: 1px solid var(--line); /* taste-skill-ignore: a real form field / table */ border-radius: var(--r);
  margin-bottom: 0.35rem; background: var(--paper-raised); font-size: 0.85rem; }
.act-row.run { border-left: 4px solid var(--signal); }
.act-row.don { opacity: 0.75; }
.act-label { font-weight: 600; }
.act-when { font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--ink-soft);
  white-space: nowrap; }
.act-empty { color: var(--ink-soft); font-size: 0.82rem; padding: 0.2rem 0.6rem 0.4rem; }


/* ==========================================================================
   v1.72: the left sidebar always fits the screen top-to-bottom , every menu item,
   Debug, the agent chip, Sign out and the version stay visible without scrolling the
   menu , while the main content scrolls on its own (the sidebar is sticky / fixed).
   The menu tightens step by step on shorter screens (laptops 768/720px, netbooks
   600px, phones in the browser). `dvh` = the height actually visible on phones
   (100vh there includes the hidden address bar, which pushed Sign out off-screen).
   This block is LAST in the file on purpose so it wins over the earlier .nav rules.
   ========================================================================== */
.nav { height: 100dvh; height: 100dvh; overflow: hidden; }
.nav > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
.nav-foot { flex-shrink: 0; }
.nav-item { line-height: 1.35; }

@media (max-height: 900px) {
  .nav { padding-top: 0.7rem; padding-bottom: 0.6rem; }
  .nav-brand { margin-bottom: 0.7rem; }
  .nav nav { gap: 0.1rem; }
  .nav-item { padding-top: 0.48rem; padding-bottom: 0.48rem; }
  .nav-foot { gap: 0.4rem; margin-top: 0.4rem; }
  .nav-debug { margin-bottom: 0.1rem; }
  .nav-agent { margin: 0 0.3rem 0.1rem; padding: 0.2rem 0.5rem; font-size: 0.74rem; line-height: 1.3; }
  .nav-signout { padding: 0.4rem 0.6rem; }
}
@media (max-height: 760px) {
  .nav-brand { margin-bottom: 0.45rem; }
  .nav nav { gap: 0.05rem; }
  .nav-item { padding-top: 0.34rem; padding-bottom: 0.34rem; font-size: 0.86rem; }
  .nav-foot { gap: 0.3rem; margin-top: 0.3rem; }
  .nav-agent { font-size: 0.7rem; }
  .nav-signout { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
  .nav-version { padding-bottom: 0; }
}
@media (max-height: 640px) {
  .nav { padding-top: 0.45rem; padding-bottom: 0.4rem; }
  .nav-brand { margin-bottom: 0.25rem; }
  .nav-item { padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 0.82rem; line-height: 1.25; }
  .nav-ico { font-size: 0.85rem; }
  .nav-foot { gap: 0.22rem; margin-top: 0.2rem; }
  /* agent chip on one line ("● Agent ONLINE (v1.70.00, 2s ago)") , full text in the tooltip */
  .nav-agent { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.68rem;
    padding: 0.12rem 0.45rem; }
  .nav-signout { padding: 0.22rem 0.6rem; }
  .nav-version { font-size: 0.6rem; line-height: 1.1; }
}
/* phones: the rail + overlay menu also fit the visible screen */
@media (max-width: 640px) {
  .nav { height: 100dvh; height: 100dvh; }
  .nav.expanded { overflow: hidden; }
  /* touch: keep each item comfortably tappable even when the menu tightens */
  .nav-item { min-height: 2.15rem; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .nav-item { min-height: 1.95rem; }
}


/* ===== v1.81 tasteskill layer =====
   Former uppercase/tracked mono labels are now sentence-case sans; they get a readable size and
   a medium weight instead of shouting. Icons are one SVG set (Phosphor regular) at one size. */
.field label, .page-head .sub, .masthead .sub, .sect-head, .tr-side-title, .maptable-head,
.lic-label, .brand-text, .snap-flag, .snapshot-badge {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0;
}
.brand-text { font-size: 0.9rem; font-weight: 600; color: #e6ebef; }
.sect-head { color: var(--ink); font-weight: 600; font-size: 0.85rem; margin: 1.2rem 0 0.5rem; }
.page-head h1, .page-head h2 { letter-spacing: -0.01em; }
.page-head .sub { margin-top: 0.15rem; }

svg.nav-ico { width: 1.15rem; height: 1.15rem; flex-shrink: 0; fill: currentColor; }
.hamburger svg.nav-ico { width: 1.25rem; height: 1.25rem; display: block; }
svg.branch-caret { width: 0.85rem; height: 0.85rem; fill: currentColor; margin-left: auto; opacity: 0.7; }
svg.ico { width: 1rem; height: 1rem; fill: currentColor; display: block; }
.cal-nav, button[aria-label="Remove"] { display: inline-flex; align-items: center; justify-content: center; }

/* Dashboard KPI cards: the number leads, no icon tile */
.score-card { padding: 1.1rem 1.3rem; }
.score-num, .transfer-num, .dash-clock, .gauge-val, .extjob-pct { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.transfer-card { padding: 1.4rem 1.6rem; }

/* status: a dot is a state indicator here (health table), sized as one */
.dbg-hdot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.inbox-icon { font-size: 0.7rem; font-weight: 700; }

/* one accent: category cards no longer carry their own tint (SC yellow, VAT blue, Non Sales pink);
   the label names the category, the surface is the same raised step everywhere */
.transfer-card, .mon-limit-card, .mini-card.mini-tax, .mini-card.mini-sc, .mini-card.mini-vat,
.mon-nonsales-card, .mini-card { background: var(--paper-raised); }
.mini-label { color: var(--ink-soft); font-weight: 500; }

/* secondary buttons: a tone step instead of an outline, so they still read as buttons */
button.ghost { background: var(--sunken); color: var(--ink); }
button.ghost:hover { background: var(--accent-soft); filter: none; }

/* ===== Dashboard scorecards: v1.80 look restored (Dewa 2026-10-16: "just for the Dashboard only
   you can applied only the font, without changing any style for the scorecard and color").
   Same colours, outlines, radius, gradient icon tiles and uppercase mini labels as v1.80; only the
   typeface is Geist. Scoped to #page-dashboard so Preset / Reports keep the v1.81 style. ===== */
#page-dashboard .score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
#page-dashboard .score-card { display: flex; align-items: center; gap: 1rem; background: #fffdf8; border: 1px solid #d9d3c6; border-radius: 12px; padding: 1.2rem 1.4rem; } /* taste-skill-ignore: Dashboard scorecards keep the v1.80 look (Dewa, 2026-10-16) */
#page-dashboard .score-ico { width: 3rem; height: 3rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; flex-shrink: 0; }
#page-dashboard .sc-blue { background: linear-gradient(135deg,#3aa0d8,#2f7fc0); } /* taste-skill-ignore: Dashboard scorecards keep the v1.80 look (Dewa, 2026-10-16) */
#page-dashboard .sc-green { background: linear-gradient(135deg,#35c39a,#25a37f); } /* taste-skill-ignore: Dashboard scorecards keep the v1.80 look (Dewa, 2026-10-16) */
#page-dashboard .sc-purple { background: linear-gradient(135deg,#9b7ff0,#7d5fe0); } /* taste-skill-ignore: Dashboard scorecards keep the v1.80 look (Dewa, 2026-10-16) */
#page-dashboard .score-label { font-size: 0.9rem; color: #45566a; font-weight: 400; }
#page-dashboard .score-num { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: 0; }
#page-dashboard .dash-clock { font-size: 5rem; font-weight: 800; text-align: center; color: #16202b; margin-top: 1rem; letter-spacing: 0.05em; } /* taste-skill-ignore: Dashboard scorecards keep the v1.80 look (Dewa, 2026-10-16) */
#page-dashboard .dash-date { text-align: center; color: #1f5f78; font-size: 1rem; margin-bottom: 2rem; }
#page-dashboard .transfer-card { display: flex; align-items: center; gap: 1.2rem; background: #edf7f1; border: 1px solid #cfe8db; border-radius: 12px; padding: 1.6rem 1.8rem; margin-bottom: 2rem; } /* taste-skill-ignore: Dashboard scorecards keep the v1.80 look (Dewa, 2026-10-16) */
#page-dashboard .transfer-card-tax { margin-top: 0.8rem; }
#page-dashboard .transfer-ico { width: 3.4rem; height: 3.4rem; border-radius: 10px; background: linear-gradient(135deg,#35c39a,#25a37f); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } /* taste-skill-ignore: Dashboard scorecards keep the v1.80 look (Dewa, 2026-10-16) */
#page-dashboard .transfer-label { color: #45566a; font-size: 1rem; }
#page-dashboard .transfer-num { font-size: 2.6rem; font-weight: 800; line-height: 1.15; letter-spacing: 0; }
#page-dashboard .transfer-note { font-size: 0.78rem; color: #45566a; }
#page-dashboard .transfer-sub { font-size: 0.82rem; color: #45566a; margin-top: 0.2rem; }
#page-dashboard .transfer-est { font-size: 0.82rem; font-weight: 700; color: #b23b3b; margin: 0.15rem 0 0.1rem; }
#page-dashboard .mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 1.4rem; }
#page-dashboard .mini-cards-4 { grid-template-columns: repeat(4, 1fr); }
#page-dashboard .mini-card { background: #fffdf8; border: 1px solid #d9d3c6; border-radius: 12px; padding: 1rem 1.1rem; } /* taste-skill-ignore: Dashboard scorecards keep the v1.80 look (Dewa, 2026-10-16) */
#page-dashboard .mini-label { font-size: 0.8rem; color: #45566a; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* taste-skill-ignore: Dashboard scorecards keep the v1.80 look (Dewa, 2026-10-16) */
#page-dashboard .mini-num { font-size: 1.6rem; font-weight: 700; margin: 0.3rem 0; }
#page-dashboard .mini-sub { font-size: 0.78rem; color: #45566a; }
#page-dashboard .mini-card.mini-tax { background: #e8f1fb; border-color: #bcd8f5; }
#page-dashboard .mini-card.mini-sc { background: #fdf6d8; border-color: #ecd98a; }
#page-dashboard .mini-card.mini-vat { background: #dfe7f5; border-color: #9db4dc; }
#page-dashboard .mini-card.mini-vat .mini-num { color: #1e3a6e; }
#page-dashboard .mini-card.mini-nonsales { background: #fce8ec; border-color: #f3c0cd; }
#page-dashboard .mini-void .mini-num { color: #a11a1a; }
@media (max-width: 900px) { #page-dashboard .mini-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  #page-dashboard .score-row { grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
  #page-dashboard .score-card { padding: 0.8rem; }
  #page-dashboard .score-num { font-size: 1.3rem; }
  #page-dashboard .mini-cards, #page-dashboard .mini-cards-4 { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  #page-dashboard .transfer-card { flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
  #page-dashboard .transfer-num { font-size: 1.7rem; word-break: break-all; }
  #page-dashboard .dash-clock { font-size: 2rem; }
}
@media (max-width: 380px) {
  #page-dashboard .score-row, #page-dashboard .mini-cards, #page-dashboard .mini-cards-4 { grid-template-columns: 1fr; }
  #page-dashboard .dash-clock { font-size: 1.6rem; }
  #page-dashboard .transfer-num { font-size: 1.45rem; }
}
#page-dashboard .est-info { border: 1.5px solid #b23b3b; } /* taste-skill-ignore: v1.80 circled (i) */

/* v2.02: ESB Cloud sync card, push failures, per-bill ESB state */
.esbs-facts { display: grid; gap: 0.25rem; margin: 0.5rem 0; font-size: 0.8rem; }
.esbs-fact { display: grid; grid-template-columns: minmax(9rem, 40%) 1fr; gap: 0.6rem; }
.esbs-k { color: var(--ink-soft); }
.esbs-v { font-variant-numeric: tabular-nums; }
.esbs-ok { color: var(--ok); }
.esbs-warn { color: var(--signal); }
.esbs-bad { color: var(--danger); font-weight: 600; }
.esbs-unk { color: var(--ink-soft); }
.esbs-dates { font-size: 0.74rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.esbs-fail { margin: 0.75rem 0; padding: 0.75rem 0.9rem; background: #fbeaea; border-radius: var(--r); }
.esbs-fail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; }
.esbs-fail-list { display: grid; gap: 0.15rem; margin-top: 0.5rem; max-height: 18rem; overflow: auto; font-size: 0.74rem; }
.esbs-fail-row { display: grid; grid-template-columns: 6rem 11rem 8rem 1fr 2.5rem; gap: 0.5rem; }
.esbs-err { color: var(--danger); overflow-wrap: anywhere; }
.extjob-partial { border-color: var(--danger); background: #fbeaea; }
.pill-pushfail { background: #fbe0e0; color: var(--danger); border-radius: var(--r); padding: 0.05rem 0.45rem; font-size: 0.68rem; cursor: help; }
.pill-esbok, .pill-esbwait { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: var(--r); font-size: 0.64rem; }
.pill-esbok { background: #e2efe7; color: var(--ok); }
.pill-esbwait { background: #f7ecd9; color: var(--signal); }