/* App styles - every colour/size comes from tokens.css */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-ui); font-size: var(--fs-body); color: var(--text); background: var(--bg-app);
  -webkit-font-smoothing: antialiased; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: var(--fs-display); font-weight: 600; margin: 0 0 var(--s4); }
h2 { font-size: var(--fs-h1); font-weight: 600; margin: 0 0 var(--s3); }
h3 { font-size: var(--fs-h2); font-weight: 600; margin: 0 0 var(--s2); }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--text-muted); } .secondary { color: var(--text-2); } .caption { font-size: var(--fs-caption); color: var(--text-2); }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.stack > * + * { margin-top: var(--s3); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.span2 { grid-column: span 2; } .span-all { grid-column: 1 / -1; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: var(--navy); color: var(--on-dark); display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; }
.sidebar.platform { background: var(--navy-900); }
.brand { display: flex; align-items: center; gap: var(--s2); padding: var(--s4); font-weight: 600; font-size: 12pt; }
.brand img { width: 28px; height: 28px; object-fit: contain; background: #fff; border-radius: var(--r-sm); padding: 2px; }
.brand small { display: block; font-weight: 400; font-size: 8pt; color: var(--on-dark-muted); letter-spacing: .08em; }
.nav { flex: 1; overflow-y: auto; padding: var(--s2) 0; }
.nav a { display: flex; align-items: center; gap: var(--s3); height: 40px; padding: 0 var(--s4); color: var(--on-dark-muted);
  border-left: 3px solid transparent; transition: background 120ms ease-out; }
.nav a:hover { background: var(--navy-700); color: var(--on-dark); text-decoration: none; }
.nav a.active { background: var(--navy-700); color: var(--on-dark); border-left-color: var(--gold); font-weight: 600; }
.nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; flex-shrink: 0; }
.nav .section { padding: var(--s3) var(--s4) var(--s1); font-size: 8pt; letter-spacing: .1em; color: var(--on-dark-muted); text-transform: uppercase; }
.sidebar-foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--navy-700); font-size: var(--fs-caption); }
.sidebar-foot a { color: var(--on-dark-muted); }
.main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: var(--bg-surface); border-bottom: 1px solid var(--border); display: flex;
  align-items: center; gap: var(--s3); padding: 0 var(--s5); position: sticky; top: 0; z-index: 10; }
.topbar .search { flex: 1; max-width: 420px; }
.content { padding: var(--s5); flex: 1; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.page-head h1 { margin: 0; }

/* ---------- controls ---------- */
input, select, textarea { font: inherit; color: var(--text); background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); height: var(--control-h); padding: 0 var(--s2); width: 100%; outline: none; }
textarea { height: auto; min-height: 64px; padding: var(--s2); resize: vertical; }
input:focus, select:focus, textarea:focus { border: 2px solid var(--focus); padding: 0 calc(var(--s2) - 1px); }
textarea:focus { padding: calc(var(--s2) - 1px); }
input[readonly], input:disabled, select:disabled, textarea[readonly] { background: var(--bg-subtle); color: var(--text-2); }
input[type=checkbox], input[type=radio] { width: auto; height: auto; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
label { display: block; font-size: var(--fs-caption); color: var(--text-2); margin-bottom: var(--s1); }
label.inline { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-body); color: var(--text); margin: 0; }
.field { min-width: 0; }
.field .err, .errorlist { color: var(--danger); font-size: var(--fs-caption); margin: var(--s1) 0 0; padding: 0; list-style: none; }
.help { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--s1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--control-h);
  padding: 0 var(--s4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; transition: background 120ms ease-out; }
.btn:hover { background: var(--bg-subtle); text-decoration: none; }
.btn.primary { background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 600; }
.btn.primary:hover { background: var(--gold-600); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--bg-subtle); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.small { height: 26px; padding: 0 var(--s2); font-size: var(--fs-caption); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* modern button feel: soft depth, press feedback, visible keyboard focus */
.btn { border-radius: 8px; box-shadow: var(--shadow-card); transition: background 120ms ease-out, box-shadow 120ms ease-out,
  transform 80ms ease-out, border-color 120ms ease-out; }
.btn:hover:not(:disabled) { box-shadow: 0 2px 6px rgba(20,33,61,.10); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn.primary { box-shadow: 0 1px 2px rgba(156,122,47,.35); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(156,122,47,.35); }
.btn.ghost, .btn.ghost:hover { box-shadow: none; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; }

/* ---------- cards / tables ---------- */
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4);
  box-shadow: var(--shadow-card); }
.card + .card { margin-top: var(--s4); }
.grid2 > .card, .grid3 > .card, .grid4 > .card, .kpis > .card { margin-top: 0; } /* grid gap does the spacing */

a.card { color: inherit; transition: box-shadow 160ms ease-out, transform 160ms ease-out, border-color 160ms ease-out; }
a.card:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-lift); transform: translateY(-1px); }

/* ---------- fixed "new document" card bar: one card per document type, under the top bar ---------- */
.docbar { position: sticky; top: var(--topbar-h); z-index: 9; height: var(--docbar-h); display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(158px, 1fr); gap: var(--s2); align-items: center; padding: 0 var(--s5);
  background: var(--bg-app); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scrollbar-width: none; }
.docbar::-webkit-scrollbar { display: none; }
.dt-card { position: relative; display: flex; align-items: center; gap: var(--s2); height: 50px; padding: 0 var(--s3) 0 var(--s2);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text); overflow: hidden;
  box-shadow: var(--shadow-card); scroll-snap-align: start; cursor: pointer;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out, background 140ms ease-out; }
.dt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.dt-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.dt-card:active { transform: translateY(0); }
.dt-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dt-card.active { background: var(--accent-bg); border-color: var(--accent); }
.dt-code { flex-shrink: 0; display: grid; place-items: center; min-width: 38px; height: 34px; padding: 0 6px; margin-left: 4px;
  border-radius: 9px; background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: 9pt; letter-spacing: .02em; }
.dt-card.active .dt-code { background: var(--accent); color: #fff; }
.dt-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.dt-name, .dt-short { font-weight: 600; font-size: 9.5pt; overflow: hidden; }
.dt-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* full name, up to 2 lines */
.dt-short { display: none; white-space: nowrap; text-overflow: ellipsis; }
.dt-sub { display: none; }
.dt-card::after { content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  color: var(--text-muted); font-size: 15px; font-weight: 600; transition: background 140ms ease-out, color 140ms ease-out; }
.dt-card:hover::after { background: var(--accent); color: #fff; }
.dt-grid .dt-card::after { display: none; }
.dt-desc { display: none; font-size: var(--fs-caption); color: var(--text-2); white-space: normal; }
/* big variant on the "New document" page */
.dt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s3); }
.dt-grid .dt-card { height: auto; min-height: 84px; padding: var(--s3) var(--s4) var(--s3) var(--s3); align-items: center; }
.dt-grid .dt-code { min-width: 48px; height: 44px; font-size: 10.5pt; }
.dt-grid .dt-desc { display: block; margin-top: 2px; }
.dt-grid .dt-sub { display: none; }

/* ---------- document page: details left, PDF preview right ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s4); align-items: start; }
.detail-grid > div > .card + .card, .detail-grid > div > .card { margin-top: 0; margin-bottom: var(--s4); }
.pdf-preview { display: block; width: 100%; height: 80vh; border: 0; background: var(--bg-subtle); }
.pdf-open { display: none; margin: 0 var(--s3) var(--s3); }
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .pdf-preview { display: none; }          /* phone/tablet browsers don't embed PDFs - open them instead */
  .pdf-open { display: inline-flex; }
}

/* ---------- document popup ---------- */
dialog.doc-modal { width: min(1320px, 96vw); height: 94vh; height: 94dvh; max-width: none; max-height: none; min-width: 0;
  padding: 0; border: none; border-radius: 16px; overflow: hidden; background: var(--bg-app);
  box-shadow: 0 24px 80px rgba(14,24,48,.35); }
dialog.doc-modal[open] { display: flex; flex-direction: column; animation: dm-in 200ms ease-out; }
dialog.doc-modal::backdrop { background: rgba(14,24,48,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@keyframes dm-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes dm-up { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 641px) and (max-width: 1024px) {  /* tablets: near full screen */
  dialog.doc-modal { width: 98vw; height: 96vh; height: 96dvh; border-radius: 12px; }
  .docbar { padding: 0 var(--s3); grid-auto-columns: minmax(166px, 1fr); }
}
.dm-head { display: flex; align-items: center; gap: var(--s2); height: 52px; padding: 0 var(--s2) 0 var(--s3); flex-shrink: 0;
  background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.dm-title { font-weight: 600; font-size: var(--fs-h2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dm-chip:empty { display: none; }
.dm-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0;
  transition: background 120ms ease-out, color 120ms ease-out; }
.dm-btn:hover { background: var(--bg-subtle); color: var(--text); text-decoration: none; }
.dm-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dm-close { font-size: 24px; }
.dm-close:hover { background: var(--danger-bg); color: var(--danger); }
.dm-body { position: relative; flex: 1; min-height: 0; }
.dm-body iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg-app); }
.dm-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg-app); z-index: 1; }
.dm-loading.hidden { display: none; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--gold);
  animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
body.modal-open { overflow: hidden; }

/* ---------- page rendered inside the popup: no app chrome ---------- */
html.in-popup { --topbar-h: 0px; --docbar-h: 0px; }
html.in-popup .sidebar, html.in-popup .topbar, html.in-popup .docbar, html.in-popup .mobile-nav, html.in-popup .doc-tabs,
html.in-popup .banner, html.in-popup dialog.critical-notice { display: none !important; }
html.in-popup .main { margin-left: 0; padding-bottom: 0; }
html.in-popup .content { padding: var(--s4) var(--s5); }
html.in-popup .page-head h1 { font-size: var(--fs-h1); }
@media (prefers-reduced-motion: reduce) {
  dialog.doc-modal[open], .dt-card, a.card { animation: none; transition: none; }
}
.card-title { font-size: var(--fs-h2); font-weight: 600; margin: 0 0 var(--s3); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.kpi { position: relative; overflow: hidden; padding-left: calc(var(--s4) + 4px); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--gold)); }
.kpi .t { font-size: var(--fs-caption); color: var(--text-2); }
.kpi .v { font-size: var(--fs-kpi); font-weight: 600; font-variant-numeric: tabular-nums; margin: var(--s1) 0; }
.kpi .s { font-size: var(--fs-caption); color: var(--text-2); }
table.tbl { width: 100%; border-collapse: collapse; background: var(--bg-surface); }
.tbl th { background: var(--bg-subtle); color: var(--text-2); font-size: var(--fs-caption); font-weight: 600; text-align: left;
  height: var(--grid-head-h); padding: 0 var(--s2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { height: var(--row-h); padding: var(--s1) var(--s2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:nth-child(even) td { background: var(--bg-subtle); }
.tbl tbody tr:hover td { background: var(--gold-100); }
.tbl tfoot td { font-weight: 600; border-top: 1px solid var(--border-strong); background: var(--bg-subtle); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); }
.void-num { text-decoration: line-through; color: var(--danger); }

/* ---------- chips / banners ---------- */
.chip { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s2); border-radius: 10px; font-size: 8.5pt;
  font-weight: 600; white-space: nowrap; background: var(--bg-subtle); color: var(--text-2); }
.chip.DS { color: var(--chip-DS); background: var(--chip-DS-bg); } .chip.GS { color: var(--chip-GS); background: var(--chip-GS-bg); }
.chip.DP { color: var(--chip-DP); background: var(--chip-DP-bg); } .chip.GRV { color: var(--chip-GRV); background: var(--chip-GRV-bg); }
.chip.GPV { color: var(--chip-GPV); background: var(--chip-GPV-bg); } .chip.RC { color: var(--chip-RC); background: var(--chip-RC-bg); }
.chip.PY { color: var(--chip-PY); background: var(--chip-PY-bg); }
.chip.ACTIVE, .chip.ok { color: var(--success); background: var(--success-bg); }
.chip.VOID, .chip.BLOCKED, .chip.full { color: var(--danger); background: var(--danger-bg); }
.chip.DRAFT, .chip.READ_ONLY { color: var(--text-2); background: var(--bg-subtle); border: 1px solid var(--border); }
.chip.LIMITED, .chip.warn { color: var(--warning); background: var(--warning-bg); }
.banner { padding: var(--s3) var(--s5); display: flex; align-items: center; gap: var(--s3); border-bottom: 1px solid var(--border); }
.banner.INFO, .banner.info { background: var(--info-bg); color: var(--info); }
.banner.WARNING, .banner.warning { background: var(--warning-bg); color: var(--warning); }
.banner.CRITICAL, .banner.danger { background: var(--danger-bg); color: var(--danger); }
.banner.readonly { background: var(--bg-subtle); color: var(--text-2); }
.banner .grow strong { margin-right: var(--s2); }
.alert { padding: var(--s3); border-radius: var(--r-md); margin-bottom: var(--s3); }
.alert.error { background: var(--danger-bg); color: var(--danger); } .alert.success { background: var(--success-bg); color: var(--success); }
.alert.warning { background: var(--warning-bg); color: var(--warning); } .alert.info { background: var(--info-bg); color: var(--info); }
.usage { font-size: var(--fs-caption); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--border); margin-bottom: var(--s4); overflow-x: auto; }
.tabs a, .tabs button { padding: var(--s2) var(--s3); color: var(--text-2); border: none; background: none; font: inherit;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs a.active, .tabs button.active { color: var(--text); border-bottom-color: var(--gold); font-weight: 600; }

/* ---------- dialogs / toasts ---------- */
dialog { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0; min-width: min(480px, 94vw); max-width: 94vw;
  background: var(--bg-surface); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(14,24,48,.45); }
dialog .d-head { padding: var(--s4); border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--fs-h2); }
dialog .d-body { padding: var(--s4); }
dialog .d-foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--s2); }
.toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 100; display: flex; flex-direction: column; gap: var(--s2); }
.toast { background: var(--navy); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--r-md); box-shadow: var(--shadow-card);
  transition: opacity 200ms; max-width: 360px; }
.toast.error { background: var(--danger); } .toast.success { background: var(--success); }
.quick-reasons { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); }

/* ---------- auth pages ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.auth-card { width: 440px; max-width: 100%; }
.auth-card .logo { text-align: center; margin-bottom: var(--s4); }
.auth-card .logo img { height: 56px; }
.auth-card .logo div { font-weight: 600; font-size: var(--fs-h1); margin-top: var(--s2); }
.steps { display: flex; gap: var(--s2); justify-content: center; margin-bottom: var(--s4); }
.steps span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.steps span.on { background: var(--gold); }
.otp { display: flex; gap: var(--s2); justify-content: center; }
.otp input { width: 44px; height: 52px; text-align: center; font-size: 18pt; }

/* ---------- editor ---------- */
.editor-head { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
.editor-toolbar { position: sticky; top: calc(var(--topbar-h) + var(--docbar-h)); z-index: 5; background: var(--bg-app); padding: var(--s2) 0; margin-bottom: var(--s3);
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.doc-tabs { display: flex; gap: var(--s1); margin-bottom: var(--s3); overflow-x: auto; }
.doc-tabs a { padding: var(--s1) var(--s3); border: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--bg-subtle); color: var(--text-2); white-space: nowrap; font-size: var(--fs-caption); display: inline-flex; gap: var(--s2); }
.doc-tabs a.active { background: var(--bg-surface); color: var(--text); font-weight: 600; border-bottom-color: var(--bg-surface); }
.doc-tabs a .x { color: var(--text-muted); }
.grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); }
table.grid { border-collapse: collapse; width: 100%; min-width: 760px; }
.grid th { background: var(--bg-subtle); color: var(--text-2); font-size: var(--fs-caption); font-weight: 600; height: var(--grid-head-h);
  padding: 0 var(--s2); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid th.num { text-align: right; }
.grid td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0; height: var(--row-h); position: relative; }
.grid tbody tr:nth-child(even) td { background: var(--bg-subtle); }
.grid tr.selected td { background: var(--gold-100) !important; }
.grid tr.selected td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.grid td input { border: none; border-radius: 0; height: var(--row-h); background: transparent; padding: 0 var(--s2); }
.grid td input:focus { border: 2px solid var(--focus); padding: 0 calc(var(--s2) - 2px); background: var(--bg-surface); }
.grid td.computed, .grid td.computed input { background: var(--cell-computed) !important; }
.grid td.override, .grid td.override input { background: var(--cell-override) !important; }
.grid td.override { box-shadow: inset 3px 0 0 var(--cell-override-marker); }
.grid td.invalid input { background: var(--cell-invalid) !important; }
.grid td.sno { text-align: center; color: var(--text-muted); width: 40px; font-size: var(--fs-caption); }
.grid td.act { width: 70px; text-align: center; white-space: nowrap; }
.grid tr.placeholder td input::placeholder { font-style: italic; color: var(--text-muted); }
.grid tfoot td { font-weight: 600; background: var(--bg-subtle); border-top: 1px solid var(--border-strong); padding: 0 var(--s2); }
.ov-reset { position: absolute; right: 2px; top: 2px; font-size: 8pt; color: var(--gold-600); background: none; border: none; cursor: pointer; }
.totals-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--s4); margin-top: var(--s4); }
.totals-box .trow { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s1) 0; }
.totals-box .trow.net { font-weight: 600; font-size: var(--fs-h2); border-top: 1px solid var(--border-strong); margin-top: var(--s2); padding-top: var(--s2); }
.totals-box .trow input { width: 140px; }
.totals-box .trow .lbl { color: var(--text-2); }
.field.override input { background: var(--cell-override); box-shadow: inset 3px 0 0 var(--cell-override-marker); }
.field.computed input { background: var(--cell-computed); }
.rate-caption { font-size: var(--fs-caption); color: var(--text-2); margin-top: var(--s1); }
.suggest { position: absolute; z-index: 30; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,.15); max-height: 380px; overflow-y: auto; min-width: 320px; }
.suggest .opt { padding: var(--s2) var(--s3); cursor: pointer; min-height: 44px; }
.suggest .opt.active, .suggest .opt:hover { background: var(--gold-100); }
.suggest .opt .l1 { font-weight: 600; } .suggest .opt .l2 { font-size: var(--fs-caption); color: var(--text-2); }
.suggest .opt.new { color: var(--info); }
.suggest mark { background: var(--gold-100); color: inherit; }
.void-banner { background: var(--danger-bg); color: var(--danger); padding: var(--s3) var(--s4); border-radius: var(--r-md); margin-bottom: var(--s3);
  display: flex; align-items: center; gap: var(--s3); }
.history-item { border-left: 3px solid var(--border-strong); padding-left: var(--s3); margin-bottom: var(--s4); }
.history-item .diff { font-family: var(--font-mono); font-size: var(--fs-caption); }
.history-item .old { color: var(--danger); text-decoration: line-through; } .history-item .new { color: var(--success); }
.dropzone { border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--bg-subtle); padding: var(--s5);
  text-align: center; color: var(--text-2); cursor: pointer; }
.dropzone.drag { background: var(--gold-100); border-color: var(--gold); }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.thumb { width: 112px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-surface); font-size: var(--fs-caption); }
.thumb .img { height: 84px; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); }
.thumb .img img { max-width: 100%; max-height: 84px; }
.thumb .nm { padding: var(--s1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-bar { position: sticky; bottom: 0; background: var(--navy); color: #fff; padding: var(--s2) var(--s4); border-radius: var(--r-md);
  display: flex; gap: var(--s3); align-items: center; margin-top: var(--s3); }
.batch-bar .btn { height: 28px; }
.statusbar { font-size: var(--fs-caption); color: var(--text-2); display: flex; align-items: center; gap: var(--s1); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; }
.dot.warn { background: var(--warning); } .dot.bad { background: var(--danger); }
.verify-card { text-align: center; }
.verify-card .big { font-size: 28pt; font-weight: 700; margin: var(--s3) 0; }
.verify-card .big.ok { color: var(--success); } .verify-card .big.bad { color: var(--danger); }
.pager { display: flex; gap: var(--s2); align-items: center; justify-content: flex-end; margin-top: var(--s3); }
.mobile-nav { display: none; }
.legal { max-width: 820px; line-height: 1.6; }
.legal h2 { margin-top: var(--s5); }

/* ---------- phone (<= 640px) ---------- */
@media (max-width: 900px) {
  .editor-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .totals-panel { grid-template-columns: 1fr; }
  .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding-bottom: 64px; }
  .topbar { padding: 0 var(--s3); }
  /* phone: compact cards with short names, swipe sideways; bar scrolls away to save height */
  .docbar { position: static; padding: 0 var(--s3); grid-auto-columns: minmax(118px, 1fr); height: 60px; }
  .dt-card { height: 44px; padding-right: var(--s2); }
  .dt-code { min-width: 34px; height: 30px; font-size: 8.5pt; }
  .dt-name, .dt-sub, .dt-card::after { display: none; }
  .dt-short { display: block; }
  .dt-grid .dt-name { display: block; }
  .dt-grid .dt-short { display: none; }
  /* top bar must never be wider than the phone (otherwise the whole page zooms out) */
  .topbar { gap: var(--s2); }
  .topbar .search { min-width: 0; }
  .topbar .usage, .statusbar [data-t], .hide-phone { display: none; }
  .topbar .grow { display: none; }
  /* popup fills the whole phone screen */
  dialog.doc-modal { inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; border-radius: 0; }
  dialog.doc-modal[open] { animation-name: dm-up; }
  html.in-popup .content { padding: var(--s3) var(--s3) 84px; }
  html.in-popup .ed-actions { bottom: 0; }
  .content { padding: var(--s3); }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: var(--navy); z-index: 30; }
  .mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--on-dark-muted); font-size: 8pt; gap: 2px; }
  .mobile-nav a.new { color: var(--gold); font-weight: 600; }
  .mobile-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; }
  /* lists become cards */
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--s2); background: var(--bg-surface); padding: var(--s2); }
  table.cards td { border: none; height: auto; padding: 2px var(--s2); text-align: left !important; background: none !important; }
  table.cards td[data-l]::before { content: attr(data-l) ": "; color: var(--text-muted); font-size: var(--fs-caption); }
  /* editor: line cards */
  .grid-wrap { border: none; background: none; overflow: visible; }
  table.grid { min-width: 0; }
  table.grid thead { display: none; }
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid tbody tr { border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--s2); background: var(--bg-surface); padding: var(--s2); }
  table.grid td { border: none; height: auto; }
  table.grid td[data-l]::before { content: attr(data-l); display: block; font-size: var(--fs-caption); color: var(--text-muted); padding: 2px var(--s2) 0; }
  table.grid td input { border: 1px solid var(--border); border-radius: var(--r-md); }
  table.grid tfoot { display: block; }
  table.grid tfoot tr { display: flex; flex-wrap: wrap; gap: var(--s2); }
  table.grid tfoot td { display: inline-block; width: auto; border: none; background: none; }
  table.grid tfoot td:empty { display: none; }
  /* editor actions become a sticky bottom bar on phones */
  .ed-actions { position: fixed; bottom: 60px; left: 0; right: 0; z-index: 25; margin: 0 !important; border-radius: 0;
    display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); box-shadow: 0 -4px 16px rgba(14,24,48,.12); }
  .ed-actions-row { display: flex; gap: var(--s1); }
  .ed-actions-row .grow, .ed-actions-row [data-act="duplicate"] { display: none; }
  .ed-actions .btn.lg { flex: 1; width: auto; height: 42px; margin: 0; }
  .page-head h1 { font-size: var(--fs-h1); }
}
@media print { .sidebar, .topbar, .docbar, .mobile-nav, .ed-actions { display: none; } .main { margin: 0; } }

/* =====================================================================================
   MODERN THEME (applies to every screen): navy headers with a gold line, dark summary
   panels, gold-accent input cards, navy table heads, big green "post" action.
   ===================================================================================== */
:root { --navy-grad: linear-gradient(100deg, #0E1830 0%, #14213D 55%, #1F3057 100%); --r-xl: 14px; }

/* cards & inputs */
.card { border-radius: var(--r-xl); }
.card.accent { border-left: 4px solid var(--gold); }
input, select, textarea { border-radius: 8px; transition: border-color 120ms ease-out, box-shadow 120ms ease-out; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(45,108,223,.15); }
textarea.auto-grow { min-height: var(--control-h); height: var(--control-h); padding-top: 6px; resize: vertical; }
.page-head h1 { letter-spacing: -.01em; }

/* navy table heads (lists + editor grid) */
.tbl th, .grid th { background: var(--navy); color: #fff; font-weight: 600; border-bottom: 0; }
.tbl th a, .tbl th label { color: #fff; }
.tbl th.num, .grid th.num { text-align: right; }
.table-wrap, .grid-wrap { border-radius: var(--r-xl); overflow: auto; box-shadow: var(--shadow-card); }
.tbl tbody tr:hover td { background: var(--gold-100); }
.tbl input[type=checkbox] { accent-color: var(--gold); }

/* tabs: pill style */
.tabs { border-bottom: 0; gap: var(--s2); padding: var(--s1); background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 12px; width: fit-content; max-width: 100%; }
.tabs a, .tabs button { border: 0; border-radius: 8px; padding: 6px var(--s3); }
.tabs a.active, .tabs button.active { background: var(--navy); color: #fff; border-bottom: 0; }
.tabs a:hover:not(.active), .tabs button:hover:not(.active) { background: var(--bg-subtle); text-decoration: none; }

/* buttons */
.btn.success { background: var(--success); border-color: var(--success); color: #fff; font-weight: 700; }
.btn.success:hover:not(:disabled) { background: #187a4d; box-shadow: 0 4px 12px rgba(30,142,90,.35); }
.btn.lg { height: 46px; width: 100%; font-size: 12.5pt; border-radius: 10px; }

/* dark summary panel (totals) */
.panel-dark { background: var(--navy-grad); color: #E8ECF5; border-radius: var(--r-xl); padding: var(--s4);
  box-shadow: 0 8px 24px rgba(14,24,48,.25); }
.panel-dark .trow { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 5px 0; }
.panel-dark .trow .lbl, .panel-dark .trow > span:first-child { color: #C9D2E6; }
.panel-dark .trow.sep { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--s1); padding-top: var(--s2); }
.panel-dark .trow.net { border-top: 1px solid rgba(255,255,255,.22); margin-top: var(--s2); padding-top: var(--s3);
  font-size: 15pt; font-weight: 700; color: var(--gold); }
.panel-dark .trow.net > span:first-child { color: var(--gold); }
.panel-dark .trow.net small { font-size: 9pt; font-weight: 600; color: #C9D2E6; }
.panel-dark .trow.net .num, .panel-dark .trow.net input { color: var(--gold); font-size: 15pt; font-weight: 700; }
.panel-dark input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; width: 140px; }
.panel-dark input::placeholder { color: #C9D2E6; opacity: 1; }
.panel-dark .trow.net input::placeholder { color: var(--gold); }
.panel-dark input.tov.ov { background: rgba(201,162,74,.22); box-shadow: inset 3px 0 0 var(--gold); }
.panel-dark input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,74,.25); }
.panel-dark input.lbl-input { width: 100%; max-width: 190px; background: transparent; border-color: transparent; color: #C9D2E6; padding-left: 0; }
.panel-dark input.lbl-input:hover, .panel-dark input.lbl-input:focus { border-color: rgba(255,255,255,.2); padding-left: var(--s2); }
.panel-dark .ov-reset { color: var(--gold); }
.panel-dark .alert { margin: 0; }
.tov-wrap { position: relative; display: inline-block; }

/* editor: two columns - entry on the left, rates / totals / actions on the right */
.ed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); align-items: start; }
.ed-main, .ed-side { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.ed-main > .card, .ed-side > .card, .ed-main > .card + .card { margin: 0; }
.ed-side { position: sticky; top: calc(var(--topbar-h) + var(--docbar-h) + var(--s3)); }
.ed-card { padding: var(--s3) var(--s4); }
.ed-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
.ed-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-more summary, .ed-notes summary { cursor: pointer; font-weight: 600; color: var(--text-2); margin-top: var(--s2); }
.ed-notes summary { margin-top: 0; }
.side-title { font-weight: 700; font-size: 10.5pt; margin-bottom: var(--s2); }
.ed-lines { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); background: var(--bg-surface); border: 1px solid var(--border); }
.ed-lines-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4);
  background: var(--navy-grad); color: #fff; border-bottom: 3px solid var(--gold); }
.ed-lines-head .caption { color: #C9D2E6; }
.ed-lines-title { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; }
.ed-lines .grid-wrap { border: 0; border-radius: 0; box-shadow: none; }
.ed-lines .grid th { background: #1B2A4D; }
.ed-actions { padding: var(--s3); }
.ed-actions-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.ed-actions-row .btn { flex: 1; }
.ed-actions-row .grow { display: none; }
.ed-head { margin-bottom: var(--s3); }

/* dialogs: navy header with gold line */
dialog { border: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 24px 80px rgba(14,24,48,.35); }
dialog::backdrop { background: rgba(14,24,48,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
dialog .d-head { background: var(--navy-grad); color: #fff; border-bottom: 3px solid var(--gold); padding: var(--s3) var(--s4); }
dialog[open]:not(.doc-modal) { animation: dm-in 180ms ease-out; }

/* document popup header */
.dm-head { background: var(--navy-grad); color: #fff; border-bottom: 3px solid var(--gold); height: 58px; padding: 0 var(--s3); }
.dm-head .dm-title { color: #fff; font-weight: 700; }
.dm-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: rgba(201,162,74,.18); color: var(--gold); border: 1px solid rgba(201,162,74,.45); }
.dm-icon svg { width: 18px; height: 18px; }
.dm-company { color: var(--on-dark-muted); font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.dm-head .dm-btn { color: #C9D2E6; }
.dm-head .dm-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.dm-head .dm-close { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-size: 20px; }
.dm-head .dm-close:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* document page: dark totals + actions on the right */
.dv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); align-items: start; }
.dv-main, .dv-side { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.dv-main > .card, .dv-side > .card, .dv-main > .card + .card, .dv-side > .card + .card { margin: 0; }
.dv-side { position: sticky; top: calc(var(--topbar-h) + var(--docbar-h) + var(--s3)); }
.dv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.dv-actions .btn { width: 100%; }
.dv-actions .full { grid-column: 1 / -1; }
.dv-actions form { display: contents; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.info-grid .k { font-size: var(--fs-caption); color: var(--text-2); }
.pdf-card { padding: 0; overflow: hidden; }
.pdf-card .pdf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
  background: var(--navy-grad); color: #fff; border-bottom: 3px solid var(--gold); }
.pdf-card .pdf-bar .btn { height: 28px; }

/* auth pages: navy band behind the card */
.auth-wrap { align-items: flex-start; padding-top: 56px; background: linear-gradient(180deg, #0E1830 0, #14213D 260px, var(--bg-app) 260px); }
.auth-card .logo div { color: #fff; }
.auth-card .logo img { background: #fff; border-radius: 12px; padding: 6px; }
.auth-card .card { border-top: 4px solid var(--gold); box-shadow: 0 16px 48px rgba(14,24,48,.18); }

/* kpi + sidebar polish */
.kpi { border-radius: var(--r-xl); }
.nav a.active { background: linear-gradient(90deg, rgba(201,162,74,.18), transparent 80%), var(--navy-700); }

@media (max-width: 1100px) {
  .ed-layout, .dv-layout { grid-template-columns: 1fr; }
  .ed-side, .dv-side { position: static; }
  .ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ed-grid, .ed-grid.two, .info-grid { grid-template-columns: 1fr; }
  .ed-grid .span2 { grid-column: auto; }
  .ed-side { padding-bottom: 76px; }   /* room above the fixed action bar */
  .ed-actions-row { margin: 0; flex-wrap: nowrap; }
  .panel-dark input { width: 120px; }
  .dm-company { display: none; }
  .tabs { width: 100%; }
  .auth-wrap { padding-top: 32px; background: linear-gradient(180deg, #0E1830 0, #14213D 220px, var(--bg-app) 220px); }
}

/* ---------- sidebar: card-style menu ---------- */
.sidebar { background: linear-gradient(180deg, #0E1830 0%, #14213D 45%, #1A2A4C 100%); padding: var(--s3) var(--s2);
  border-right: 1px solid rgba(255,255,255,.06); }
.sidebar.platform { background: linear-gradient(180deg, #070D1C 0%, #0E1830 50%, #142242 100%); }
.brand { margin: 0 var(--s1) var(--s3); padding: var(--s3); border-radius: 14px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09); line-height: 1.25; }
.brand img { width: 38px; height: 38px; border-radius: 10px; padding: 3px; flex-shrink: 0; }
.brand small { color: var(--gold); letter-spacing: .12em; margin-top: 2px; }
.nav { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--s1); }
.nav .section { padding: var(--s1) var(--s2) 0; font-size: 7.5pt; letter-spacing: .14em; color: #7D8AA8; }
.nav a { height: 46px; padding: 0 var(--s2); gap: var(--s3); border-radius: 12px; border: 1px solid transparent;
  border-left-width: 1px; color: #C3CCE0; font-weight: 500;
  transition: background 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out, box-shadow 140ms ease-out; }
.nav a svg { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: rgba(255,255,255,.06);
  transition: background 140ms ease-out, color 140ms ease-out; }
.nav a:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); color: #fff; transform: translateX(2px);
  text-decoration: none; }
.nav a:hover svg { background: rgba(255,255,255,.12); }
.nav a.active { background: linear-gradient(135deg, rgba(201,162,74,.30), rgba(201,162,74,.08)); border-color: rgba(201,162,74,.55);
  color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.nav a.active svg { background: var(--gold); color: #0E1830; }
.nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sidebar-foot { border-top: 0; padding: var(--s3) var(--s1) 0; }
.user-card { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #D8B66A, #B8913A); color: #0E1830; font-weight: 700; font-size: 11pt; }
.user-card .who { min-width: 0; line-height: 1.25; }
.user-card .nm { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card .rl { color: #9AA6C0; font-size: 8.5pt; }
.foot-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.foot-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #C3CCE0; font-size: 9pt;
  transition: background 140ms ease-out, color 140ms ease-out; }
.foot-actions a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.foot-actions a.out:hover { background: rgba(192,57,43,.35); border-color: rgba(192,57,43,.6); }
@media (prefers-reduced-motion: reduce) { .nav a, .nav a svg { transition: none; } .nav a:hover { transform: none; } }

/* ---------- company card at the top of the menu (click -> dashboard) ---------- */
.brand { position: relative; display: flex; align-items: center; gap: var(--s3); overflow: hidden; color: #fff;
  margin: 0 var(--s1) var(--s3); padding: var(--s3); border-radius: 16px; text-decoration: none; cursor: pointer;
  background: linear-gradient(140deg, rgba(201,162,74,.20) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(201,162,74,.35); box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out; }
.brand::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, #D8B66A 30%, #B8913A 70%, transparent); }
.brand::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,182,106,.30), transparent 70%); pointer-events: none; }
.brand:hover { text-decoration: none; transform: translateY(-1px); border-color: rgba(216,182,106,.8);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 0 3px rgba(201,162,74,.18); }
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.brand-logo { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 2px #C9A24A, 0 4px 10px rgba(0,0,0,.3); }
.brand-logo img { width: 36px; height: 36px; object-fit: contain; padding: 0; background: none; border-radius: 0; }
.brand-text { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.brand-name { font-weight: 800; font-size: 10pt; line-height: 1.2; letter-spacing: 0; text-transform: uppercase;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF, #E9DDBF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { display: flex; align-items: center; gap: 6px; font-size: 8pt; color: #9AA6C0; letter-spacing: .06em; white-space: nowrap; }
.brand-plan { padding: 1px 7px; border-radius: 999px; font-size: 7.5pt; font-weight: 700; letter-spacing: .04em; color: #0E1830;
  background: linear-gradient(135deg, #E2C47E, #B8913A); }
@media (prefers-reduced-motion: reduce) { .brand { transition: none; } .brand:hover { transform: none; } }

/* ---------- settings hub: one card per section, each opens in the popup ---------- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s3); }
.st-card { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 104px; padding: var(--s4);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl); color: var(--text);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out; }
.st-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); opacity: 0;
  transition: opacity 150ms ease-out; }
.st-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-lift); }
.st-card:hover::before { opacity: 1; }
.st-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-icon { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--navy-grad); color: var(--gold); box-shadow: 0 4px 12px rgba(14,24,48,.25); }
.st-card:hover .st-icon { background: linear-gradient(135deg, #D8B66A, #B8913A); color: #0E1830; }
.st-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.st-title { font-weight: 700; font-size: 11pt; }
.st-desc { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.35; }
.st-sum { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 8pt; font-weight: 600;
  background: var(--gold-100); color: var(--gold-600); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-go { flex-shrink: 0; color: var(--text-muted); transition: transform 150ms ease-out, color 150ms ease-out; }
.st-card:hover .st-go { color: var(--gold); transform: translateX(3px); }
.st-more { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); }
.st-head .st-icon { width: 44px; height: 44px; }
html.in-popup .hide-in-popup { display: none; }

/* tab bars wrap instead of showing a scrollbar */
.tabs { flex-wrap: wrap; overflow: visible; }
@media (max-width: 640px) {
  .st-card { min-height: 0; padding: var(--s3); }
  .st-icon { width: 42px; height: 42px; }
  .tabs a, .tabs button { padding: 6px var(--s2); }
}
@media (prefers-reduced-motion: reduce) { .st-card, .st-go { transition: none; } .st-card:hover { transform: none; } }

/* VAT rules editor: one card per rule on phones */
@media (max-width: 640px) {
  #rules thead { display: none; }
  #rules, #rules tbody, #rules tr, #rules td { display: block; width: 100%; }
  #rules tr { border: 1px solid var(--border); border-radius: 12px; padding: var(--s2); margin-bottom: var(--s2); background: var(--bg-surface); }
  #rules td { border: 0; height: auto; padding: 4px 0; background: none !important; }
  #rules td:nth-child(1)::before { content: "Purity at least (per-mille)"; }
  #rules td:nth-child(2)::before { content: "VAT %"; }
  #rules td:nth-child(3)::before { content: "Label"; }
  #rules td::before { display: block; font-size: var(--fs-caption); color: var(--text-2); margin-bottom: 2px; }
  #rules td:nth-child(4)::before { content: none; }
}

/* table row action buttons (Edit / Delete) side by side */
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form { display: inline; }
.row-actions .btn + form, .row-actions form + .btn { margin-left: 4px; }
@media (max-width: 640px) { .row-actions { text-align: left; padding-top: 6px !important; } }

/* ---------- party form: details + "auto-fill from documents" ---------- */
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s4); align-items: start; }
.pf-layout > .card { margin: 0; }
.pf-read { position: sticky; top: calc(var(--topbar-h) + var(--docbar-h) + var(--s3)); }
.pf-read .side-title { display: flex; align-items: center; gap: var(--s2); }
.pf-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s5) var(--s4); text-align: center;
  border: 2px dashed var(--border-strong); border-radius: var(--r-xl); background: var(--bg-subtle);
  transition: background 140ms ease-out, border-color 140ms ease-out; }
.pf-drop:hover, .pf-drop.drag { background: var(--gold-100); border-color: var(--gold); }
.pf-drop-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--navy-grad); color: var(--gold); }
.pf-privacy { display: flex; align-items: center; gap: 6px; color: var(--success); margin: var(--s2) 0 0; }
.pf-busy { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; color: var(--text-2); }
.pf-busy .spinner { width: 24px; height: 24px; }
.pf-files { display: flex; flex-direction: column; gap: 6px; margin: var(--s3) 0; }
.pf-file { display: flex; flex-direction: column; padding: 6px var(--s2); border-radius: 8px; border-left: 3px solid var(--success);
  background: var(--success-bg); }
.pf-file.bad { border-left-color: var(--warning); background: var(--warning-bg); }
.pf-file-name { font-weight: 600; font-size: 9pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-field { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 6px; cursor: pointer; background: var(--bg-surface); }
.pf-field:hover { border-color: var(--gold); }
.pf-field input { margin-top: 3px; accent-color: var(--gold); }
.pf-field-text { display: flex; flex-direction: column; min-width: 0; }
.pf-field-text .k { font-size: var(--fs-caption); color: var(--text-2); }
.pf-field-text .v { font-weight: 600; overflow-wrap: anywhere; }
.pf-field-text .was { font-size: 8pt; color: var(--warning); }
input.filled, textarea.filled { animation: pf-flash 1.6s ease-out; }
@keyframes pf-flash { 0% { background: var(--gold-100); box-shadow: 0 0 0 3px rgba(201,162,74,.35); } 100% { background: var(--bg-surface); } }
@media (max-width: 1000px) {
  .pf-layout { grid-template-columns: 1fr; }
  .pf-read { position: static; order: -1; }   /* reader first on small screens */
}

/* ---------- shared document reader (party form + invoice editor) ---------- */
.dr .dr-edit { height: 28px; margin-top: 2px; font-weight: 600; }
.dr-lines { margin-top: var(--s3); border: 1px solid var(--border); border-radius: 10px; padding: var(--s2) var(--s3); background: var(--bg-subtle); }
.dr-lines summary { cursor: pointer; font-weight: 600; color: var(--text-2); }
.dr-lines-list { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s2); max-height: 320px; overflow-y: auto; }
.dr-line { text-align: left; font: inherit; font-size: 9pt; padding: 5px var(--s2); border-radius: 6px; border: 1px solid transparent;
  background: var(--bg-surface); color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.dr-line:hover { border-color: var(--gold); background: var(--gold-100); }
.dr-pick { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; margin: 2px 0 4px; border-radius: 8px;
  background: var(--bg-surface); border: 1px solid var(--gold); box-shadow: var(--shadow-lift); }
dialog.docs-dialog { width: min(640px, 96vw); }
dialog.docs-dialog .d-body { max-height: 70vh; overflow-y: auto; }

.pf-field-text { flex: 1; }
.dr .dr-edit { width: 100%; }

/* editor right column: Document + Rates scroll, totals + actions stay in view */
.ed-layout { align-items: stretch; }
.ed-main { align-self: start; }
.ed-side { position: static; align-self: stretch; }
.ed-sticky { position: sticky; top: calc(var(--topbar-h) + var(--docbar-h) + var(--s3)); display: flex; flex-direction: column; gap: var(--s4); }
.ed-sticky > .card { margin: 0; }
.ed-grid.two > .hidden + .ed-template { grid-column: span 2; }
.ed-side input[type=date], .ed-side input[type=time] { min-width: 0; padding-right: 4px; }
@media (max-width: 1100px) { .ed-sticky { position: static; } }

/* compact right column */
.ed-side .ed-card { padding: var(--s3); }
.ed-side .ed-grid { gap: 6px var(--s2); }
.ed-side label { margin-bottom: 2px; }
.ed-side .side-title { margin-bottom: 6px; }
.side-sep { height: 1px; background: var(--border); margin: var(--s3) 0; }
.ed-side .panel-dark { padding: var(--s3) var(--s4); }
.ed-side .panel-dark .trow { padding: 3px 0; }
.ed-side .panel-dark input { height: 30px; }
.ed-side .ed-actions { padding: var(--s3); }
.ed-side .ed-actions-row { margin-bottom: var(--s2); }
.ed-side .btn.lg { height: 44px; }

/* ---------- editor action bar: pinned to the bottom, always visible ---------- */
.ed-bar { position: sticky; bottom: var(--s2); z-index: 20; display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4);
  padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: 16px; background: var(--navy-grad); color: #fff;
  border: 1px solid rgba(255,255,255,.08); border-top: 3px solid var(--gold); box-shadow: 0 -6px 24px rgba(14,24,48,.25); }
.ed-bar-total { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.ed-bar-total .caption { color: #C9D2E6; }
.ed-bar-total b { color: var(--gold); font-size: 16pt; font-variant-numeric: tabular-nums; }
.ed-bar-keys { color: #9AA6C0; flex: 1; text-align: center; }
.ed-bar .ed-actions-row { display: flex; gap: var(--s2); margin: 0; flex-wrap: nowrap; }
.ed-bar .ed-actions-row .btn { flex: none; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.ed-bar .ed-actions-row .btn:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.ed-bar .ed-actions-row .btn.danger { color: #FFB4AA; border-color: rgba(240,122,109,.6); }
.ed-bar .ed-actions-row form { display: inline; }
.ed-bar .btn.success.lg { width: auto; min-width: 200px; height: 46px; margin: 0; }
html.in-popup .ed-bar { bottom: var(--s2); }
@media (max-width: 900px) {
  .ed-bar-keys { display: none; }
  .ed-bar { flex-wrap: wrap; }
  .ed-bar-total { flex: 1; }
}
@media (max-width: 640px) {
  /* phones: full-width bar above the bottom navigation */
  .ed-bar { position: fixed; left: 0; right: 0; bottom: 60px; margin: 0; border-radius: 0; padding: var(--s2) var(--s3);
    flex-wrap: nowrap; gap: var(--s2); }
  html.in-popup .ed-bar { bottom: 0; }
  .ed-bar-total b { font-size: 12pt; }
  .ed-bar .ed-actions-row [data-act="print"], .ed-bar .ed-actions-row [data-act="duplicate"] { display: none; }
  .ed-bar .btn.success.lg { min-width: 0; flex: 1; height: 42px; }
  .ed-main { padding-bottom: 76px; }
}

/* ---------- responsive safety (audit) ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl td { overflow-wrap: anywhere; }
.tbl td.num, .tbl td .chip { overflow-wrap: normal; }
td.break, .break { overflow-wrap: anywhere; word-break: break-word; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s3); align-items: end; }
.plan-grid > div:last-child { grid-column: auto; }
img, video, iframe { max-width: 100%; }   /* not svg: icons inside buttons would shrink to nothing */

/* phones: 16px inputs so iPhone Safari does not zoom in when a field is tapped */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
  .grid td input, .panel-dark input { font-size: 16px; }
  .ed-main { padding-bottom: 0; }          /* room for the bottom bars is at the end of the page */
  .ed-side { padding-bottom: 90px; }
  .btn { min-height: 38px; }                /* comfortable tap targets */
  .btn.small { min-height: 32px; }
}
@media (hover: none) and (pointer: coarse) {
  .tbl tbody tr:hover td { background: inherit; }   /* no sticky hover colours on touch screens */
}

/* =====================================================================================
   RESPONSIVE PASS 2 (visual review): tables keep short columns on one line, filters
   adapt, tablets get a slim icon menu, phone list cards hide empty rows.
   ===================================================================================== */
.tbl td { overflow-wrap: break-word; }            /* replaces "anywhere": never crush columns letter by letter */
.tbl td[data-l="Number"], .tbl td[data-l="Date"], .tbl td[data-l="Type"], .tbl td[data-l="Status"],
.tbl td[data-l="Kind"], .tbl td[data-l="Mobile"], .tbl td[data-l="TRN"], .tbl td[data-l="Net"],
.tbl td[data-l="Pure"], .tbl td[data-l="Docs"], .tbl td[data-l="Passport"], .tbl td[data-l="EID"] { white-space: nowrap; }
.tbl td[data-l="Party"], .tbl td[data-l="Name"] { min-width: 140px; }

/* documents list filters */
.filter-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--s3) var(--s4); }
@media (max-width: 1100px) {
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-grid > .field:first-child { grid-column: 1 / -1; }
}

/* tablets / small laptops: slim icon menu (03-TOKENS: collapsed sidebar) */
@media (min-width: 641px) and (max-width: 1100px) {
  :root { --sidebar-w: 76px; }
  .sidebar { padding: var(--s3) 8px; }
  .brand { justify-content: center; padding: 8px; margin: 0 0 var(--s3); }
  .brand-text { display: none; }
  .brand-logo { width: 44px; height: 44px; }
  .nav { padding: 0; }
  .nav .section { display: none; }
  .nav a { justify-content: center; padding: 0; gap: 0; }
  .nav a > span { display: none; }
  .nav a svg { width: 38px; height: 38px; padding: 9px; }
  .nav a:hover { transform: none; }
  .sidebar-foot { padding: var(--s2) 0 0; }
  .user-card { justify-content: center; padding: 6px; }
  .user-card .who { display: none; }
  .foot-actions { grid-template-columns: 1fr; }
  .foot-actions a { font-size: 0; gap: 0; height: 32px; }
  .foot-actions a svg { width: 16px; height: 16px; }
}

/* phones: list cards skip empty fields */
@media (max-width: 640px) {
  table.cards td[data-l]:empty { display: none; }
  table.cards td:first-child:has(input[type=checkbox]) { float: right; width: auto; }
}

.dash-bottom { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .dash-bottom { grid-template-columns: 1fr; } }

/* =====================================================================================
   COMPACT INVOICE EDITOR + DOCUMENT VIEW (all document types): tighter gaps and fields
   ===================================================================================== */
.ed-head { margin-bottom: var(--s2); }
.ed-head h1 { font-size: 15pt; }
.ed-layout, .dv-layout { gap: var(--s3); }
.ed-main, .ed-side, .ed-sticky, .dv-main, .dv-side { gap: var(--s3); }
.ed-layout .ed-card, .ed-side .ed-card { padding: 10px 12px; }
.ed-layout .ed-grid, .ed-side .ed-grid { gap: 4px 10px; }
.ed-layout label { margin-bottom: 1px; font-size: 8.5pt; line-height: 1.25; }
.ed-layout input:not([type=checkbox]):not([type=radio]), .ed-layout select { height: 30px; }
.ed-layout textarea.auto-grow { height: 30px; min-height: 30px; padding-top: 5px; }
.ed-layout .ed-notes textarea { min-height: 44px; }
.ed-layout .side-title, .ed-side .side-title { font-size: 10pt; margin-bottom: 4px; }
.ed-layout .side-sep { margin: 8px 0 6px; }
.ed-layout .field .err:empty, .ed-layout #party-linked:empty { display: none; }
.ed-layout #party-linked { font-size: 8pt; margin-top: 1px; }
.ed-layout .ed-more summary { margin-top: 4px; font-size: 9pt; }
.ed-layout .ed-notes summary { font-size: 9pt; }
/* remembered-rate caption on one short line */
.rate-caption { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 8pt; line-height: 1.2; white-space: nowrap; }
.rate-caption .btn { width: 16px; height: 16px; min-height: 0; padding: 0; border-radius: 50%; font-size: 9px; line-height: 1;
  background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text-2); box-shadow: none; }
.rate-caption .btn:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
/* lines */
.ed-lines-head { padding: 5px 12px; }
.ed-layout .grid th { height: 30px; }
/* totals panel */
.ed-layout .panel-dark { padding: 10px 14px; }
.ed-layout .panel-dark .trow { padding: 2px 0; }
.ed-layout .panel-dark input { height: 28px; }
.ed-layout .panel-dark .trow.sep { margin-top: 2px; padding-top: 6px; }
.ed-layout .panel-dark .trow.net { margin-top: 6px; padding-top: 8px; font-size: 14pt; }
.ed-layout .panel-dark .trow.net input { font-size: 14pt; height: 32px; }
/* bottom action bar */
.ed-bar { margin-top: var(--s3); padding: 6px 6px 6px 14px; }
.ed-bar .btn.success.lg { height: 40px; }
.ed-bar .ed-actions-row .btn { height: 34px; }
/* document view */
.dv-layout .card { padding: 12px 14px; }
.dv-layout .panel-dark { padding: 12px 16px; }
.dv-layout .panel-dark .trow { padding: 3px 0; }
.dv-actions { gap: 6px; }
@media (max-width: 640px) {
  .ed-layout input:not([type=checkbox]):not([type=radio]), .ed-layout select { height: 36px; }   /* touch-friendly */
  .ed-layout .ed-grid, .ed-side .ed-grid { gap: 6px 10px; }
}
.rate-caption .btn { flex: none; display: inline-grid; place-items: center; }

/* QR verify page: customer name right under the Valid / VOIDED badge */
.verify-card .verify-party { margin: calc(-1 * var(--s2)) 0 var(--s3); font-size: 13pt; line-height: 1.35; }
.verify-card .verify-party .caption { font-size: 9pt; text-transform: uppercase; letter-spacing: .06em; }

/* Users: create user / set password */
.pw-row { display: flex; gap: 6px; align-items: center; }
.pw-row input { flex: 1 1 auto; min-width: 0; }
.pw-row .btn { flex: none; }
.user-create .grid4 + .grid4 { margin-top: 0; }

/* Settings -> Email: provider hint + test email row */
.smtp-hint { margin: 0; min-height: 36px; display: flex; align-items: center; line-height: 1.35; }
.smtp-test { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 8px; }
.smtp-test .field { flex: 0 1 320px; margin: 0; }
@media (max-width: 640px) { .smtp-test .field { flex-basis: 100%; } .smtp-test .btn { width: 100%; } }

/* SoftN credit: login pages (full) and sidebar footer (compact) - D-54 */
.credit { text-align: center; font-size: 8.5pt; line-height: 1.6; color: var(--text-secondary, #6B7280); margin-top: 10px; }
.credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(184,145,58,.6); text-underline-offset: 2px; }
.credit a:hover { color: var(--gold-600, #B8913A); }
.credit.compact { margin-top: 8px; font-size: 7.5pt; color: var(--on-dark-muted, rgba(255,255,255,.55)); line-height: 1.3; }
.credit.compact a { text-decoration: none; color: #E2C27A; font-weight: 600; }
@media (min-width: 641px) and (max-width: 1100px) { .credit.compact .credit-more { display: none; } .credit.compact { font-size: 6.5pt; } }
.auth-card .logo img { background: none; padding: 0; border-radius: 14px; height: 60px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* developer PC only: OTP code shown because emails are printed to the log, not sent */
.alert.dev-code { background: #FFF8E6; border: 1px dashed #B8913A; color: #6B5317; }
.alert.dev-code b { font-size: 14pt; letter-spacing: .15em; color: #1B1F2A; }