/* POS middleware control plane.
   Direction: an operations ledger. The subject is sequences, shifts, time windows and limits,
   so numerics are set in a monospace face (receipt/POS heritage) and the signature element is a
   24-hour band that turns each preset's abstract windows into something you can read at a glance.
   Palette is ink + paper with a single amber "limit/caution" signal — deliberately not the
   terracotta/acid-green defaults. */

:root {
  --ink: #16202b;
  --ink-soft: #45566a;
  --paper: #f6f4ee;
  --paper-raised: #fffdf8;
  --line: #d9d3c6;
  --accent: #1f5f78;      /* deep teal-ink: structural, links, primary action */
  --signal: #c8791b;      /* amber: limits and caution */
  --ok: #2f7d55;
  --danger: #b23b3b;
  --mono: "SF Mono", "JetBrains Mono", "Consolas", ui-monospace, monospace;
  --sans: "Inter", 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);
  line-height: 1.5;
}

.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
  border-bottom: 2px solid var(--ink);
}
.masthead h1 {
  margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em;
}
.masthead .sub {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.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: 1px solid var(--line); border-radius: 6px;
}
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-soft);
}
input[type="text"], input[type="number"], input[type="time"], input[type="date"], input[type="password"] {
  font-family: var(--mono); font-size: 0.9rem;
  padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 4px;
  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: 1px solid var(--line); border-radius: 8px;
  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; }

.eyebrow {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--ink-soft); margin: 1rem 0 0.5rem;
}

/* day toggles */
.days { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.day {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em;
  padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink-soft); cursor: pointer; user-select: none;
  text-transform: uppercase;
}
.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: 1px solid var(--line); border-radius: 4px; background:
    repeating-linear-gradient(90deg, transparent, transparent calc(100%/24 - 1px),
      var(--line) calc(100%/24 - 1px), var(--line) calc(100%/24));
  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-family: var(--mono); font-size: 0.7rem; color: #6a3d05; overflow: hidden;
}
.band-axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); 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-family: var(--mono); 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-family: var(--mono); 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: 5px; border: 1px solid var(--ink);
  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-family: var(--mono); 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: 100vh; }

.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: 4px; line-height: 1;
}
.hamburger:hover { background: rgba(255,255,255,0.12); }
.brand-text {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  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: 6px; 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; border-bottom: 2px solid var(--ink); padding-bottom: 0.8rem; }
.page-head h1 { margin: 0 0 0.2rem; font-size: 1.2rem; font-weight: 650; }
.page-head .sub {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-soft);
}
.page.hidden { display: none; }
.hint { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; max-width: 68ch; }
.hint code { font-family: var(--mono); font-size: 0.82rem; background: #ece6da;
  padding: 0.05rem 0.35rem; border-radius: 3px; }

/* 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); border-radius: 8px; 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);
}
.map-row:last-child { border-bottom: none; }
.map-row.head {
  background: #efeade; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-soft);
}
.map-src { display: flex; flex-direction: column; gap: 0.1rem; }
.map-src .id { font-family: var(--mono); 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); border-radius: 5px; 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: 100vh; 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: 6px;
  background: transparent; color: #c6cfd9; border: 1px solid rgba(255,255,255,0.25);
  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-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  color: #6b7885; text-align: center; padding-bottom: 0.2rem;
}
.nav.collapsed .nav-signout, .nav.collapsed .nav-version { display: none; }

/* inbox badge in nav */
.nav-item { position: relative; }
.nav-badge {
  margin-left: auto; background: var(--danger); color: #fff; font-family: var(--mono);
  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: 1px solid var(--line); border-left: 4px solid var(--signal);
  border-radius: 8px; 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; box-shadow: inset 0 0 0 2px var(--signal);
  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: 1px solid var(--line); border-radius: 8px;
  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-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); }
.gauge-bar { height: 1.1rem; background: #ece6da; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.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: 1px solid var(--line);
  border-radius: 6px; padding: 0.6rem 0.9rem;
}
.snapshot-when { font-family: var(--mono); 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-family: var(--mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ok); border: 1px solid var(--ok);
  border-radius: 4px; padding: 0.05rem 0.35rem;
}

/* default (fallback) mapping selector */
.default-map {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  background: #eef4f0; border: 1px solid var(--line); border-radius: 8px;
  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: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.4rem;
}
.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;
}
.sc-blue { background: linear-gradient(135deg,#3aa0d8,#2f7fc0); }
.sc-green { background: linear-gradient(135deg,#35c39a,#25a37f); }
.sc-purple { background: linear-gradient(135deg,#9b7ff0,#7d5fe0); }
.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-family: var(--mono); font-size: 5rem; font-weight: 800; text-align: center;
  letter-spacing: 0.05em; 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: 1px solid #cfe8db; border-radius: 12px; padding: 1.6rem 1.8rem; margin-bottom: 2rem;
}
.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;
}
.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); }

.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); border-radius: 10px; 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); font-size: 0.9rem;
}
.dash-row:last-child { border-bottom: none; }
.dash-head { background: #efeadd; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; 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-family: var(--mono); font-size: 0.82rem; }
.pill-ok {
  background: #d9f2e5; color: #1c7a54; border: 1px solid #a9dcc4; border-radius: 5px;
  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: #ece6da; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.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: 100vh; 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); 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: 1px solid var(--line); border-radius: 12px;
  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; }
.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: 1px solid var(--line); border-radius: 12px;
  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: #efe9f7; color: #6d3fb0; border: 1px solid #d9c9f0; border-radius: 6px;
  padding: 0.25rem 0.7rem; font-size: 0.82rem; font-weight: 600; }

.ext-selsum { background: #edf4f7; border: 1px solid #cfe2ea; border-radius: 8px;
  padding: 0.6rem 0.9rem; font-size: 0.85rem; margin-bottom: 0.6rem; }

.ext-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ext-row { display: grid;
  grid-template-columns: 3rem 1.7fr 1.7fr 1fr 1.4fr 1fr 0.8fr 0.8fr 1.1fr 1.1fr 1.1fr;
  gap: 0.5rem; padding: 0.7rem 0.9rem; align-items: center; border-bottom: 1px solid var(--line);
  font-size: 0.84rem; }
.ext-row:last-child { border-bottom: none; }
.ext-head { background: #efeadd; font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-soft); }
.ext-row .ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.ext-sn { font-family: var(--mono); font-size: 0.76rem; }
.ext-row.is-copied { opacity: 0.55; }
.pill-copied { background: #e5e9ef; color: #566; border: 1px solid #c9d2dd; border-radius: 5px;
  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: 14px; padding: 1.6rem; width: min(560px, 92vw);
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.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-family: var(--mono); }
.recreate-preview { background: #eef4f0; border: 1px solid var(--line); border-radius: 8px;
  padding: 0.7rem 0.9rem; font-size: 0.9rem; }
.recreate-preview b { font-family: var(--mono); }
.recreate-note { display: block; font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.3rem; }
.recreate-warn { background: #fdeaea; border: 1px solid #f3c2c2; color: #9c2b2b; border-radius: 8px;
  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: 1px solid #f0d090; border-radius: 5px; 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; }

/* 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: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; }
.mini-label { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; }
.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: 10px; 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: 1px solid #e0b400; border-radius: 8px;
  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 { border-top: 1px dashed #e0b400; }

/* Auto-map progress bar */
.automap-progress { height: 8px; background: #eee; border-radius: 6px; overflow: hidden;
  margin: 0.4rem 0 0.35rem; }
.automap-bar { height: 100%; width: 0; background: var(--accent, #2d7ef7);
  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: 8px;
  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: 1px solid #d7dbe0; border-radius: 10px; padding: 0.6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); 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: #f0f2f5; border-radius: 6px; width: 1.8rem; height: 1.8rem;
  cursor: pointer; font-size: 1rem; }
.cal-nav:hover { background: #e2e6ea; }
.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: #1b2431; }
.cal-day { border: none; background: transparent; border-radius: 6px; padding: 0.35rem 0;
  cursor: pointer; font-size: 0.82rem; color: #1b2431; font-weight: 500; }
.cal-day:hover { background: #eef2f7; }
.cal-day.inrange { background: #e8f1fb; color: #1b2431; }
.cal-day.sel { background: var(--accent, #2d7ef7); 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; border-radius: 8px;
  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: 1px solid #cfd5db;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.combo-item { padding: 0.45rem 0.6rem; cursor: pointer; font-size: 0.88rem; color: #1b2431; }
.combo-item:hover { background: #eef2f7; }
.combo-item.sel { background: #e8f1fb; 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: 1px solid #cfd5db; background: #fff; color: #1b2431; border-radius: 6px;
  width: 2rem; height: 2rem; cursor: pointer; font-size: 0.8rem; line-height: 1; }
.cal-nav:hover { background: #eef2f7; }
.cal-title-btn { border: none; background: transparent; font-weight: 700; font-size: 0.92rem;
  color: #1b2431; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 6px; }
.cal-title-btn:hover { background: #eef2f7; }
.cal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; padding: 0.3rem 0; }
.cal-month { border: 1px solid #e2e6ea; background: #fff; color: #1b2431; border-radius: 8px;
  padding: 0.55rem 0; cursor: pointer; font-size: 0.85rem; }
.cal-month:hover { background: #eef2f7; }
.cal-month.sel { background: var(--accent, #2d7ef7); color: #fff; border-color: var(--accent, #2d7ef7);
  font-weight: 700; }

/* Telegram hourly summary card (Configuration page) */
.tg-card { border: 1px solid var(--line); border-radius: 10px; 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; }

/* checklist-upload summary popup */
.checklist-modal { max-width: 46rem; width: 92vw; }
.chk-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 0.6rem 0; }
.chk-row { display: grid; grid-template-columns: 7.5rem 4.5rem repeat(5, 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); }
.chk-row.chk-head { background: #f4f1ea; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; color: var(--ink-soft); }
.chk-row.chk-total { background: #eef2f7; 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: 1px solid var(--line); border-radius: 8px; padding: 0.5rem; }
.cl-row { display: grid; grid-template-columns: 2rem 2.2fr 4.5rem 7rem 7rem 6rem 2.2rem;
  gap: 0.4rem; align-items: center; padding: 0.25rem 0; }
.cl-row.cl-head { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; }
.cl-row input { width: 100%; padding: 0.35rem 0.45rem; }
.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); 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: #e8f1fb; 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); }

/* 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; }

/* ---------- 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: 1px solid var(--line); border-radius: 10px;
  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: 3px; 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-family: var(--mono); }
.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; }
.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-family: var(--mono); }
.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: 980px; }
.rep-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr 1.35fr 1.35fr 1.15fr .9fr .75fr .75fr .75fr .95fr;
  gap: .5rem; align-items: center;
  padding: .5rem .6rem; border-bottom: 1px solid var(--line);
  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; text-transform: uppercase;
  letter-spacing: .02em; color: var(--ink-soft); }
.rep-row .ta-r { text-align: right; font-family: var(--mono); }
.rep-row.is-nonsales { opacity: .75; }
.rep-sn { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .8rem; }
.rep-date { font-family: var(--mono); 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: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  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-family: var(--mono); }
.rep-export-btn { margin-left: auto; }
#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: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  padding: .45rem .6rem; font-size: .82rem; font-family: var(--mono);
  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: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); overflow: hidden;
}
.branch-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  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: 1px solid var(--line); border-radius: 10px;
  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; letter-spacing: .05em; padding: .3rem .7rem;
  border-radius: 999px; border: 1px solid var(--line); }
.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; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.lic-val { font-weight: 700; }
.lic-val.mono { font-family: var(--mono); 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); border-radius: 8px;
  font-family: var(--mono); 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: 100vh; width: 58px; }
  .nav.expanded { width: 232px; box-shadow: 4px 0 24px rgba(0,0,0,.35); 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; }
  #dash-table, .ext-table, .chk-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-row-cfg { min-width: 620px; }
  .ext-row { min-width: 760px; }
  .chk-row { min-width: 560px; }
  .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; }
  .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: 1px solid var(--line); border-radius: 8px;
  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: #1d4e89; }