/*!
 * CashCount Pro — Unified Application Stylesheet
 * ==============================================
 * THE single stylesheet for the entire application. Written from scratch
 * 2026-07-04 (no code carried over from the retired css files).
 *
 * Look: "Classic Enterprise" — dense, muted, professional ERP.
 *   steel-blue primary - slate-navy chrome - 4px corners - gridlined tables
 *   square numbered badges - Segoe UI system stack - light grey canvas
 *
 * Contents
 *   01 Tokens             02 Base & typography      03 Shell & container
 *   04 Top header & nav   05 Page header            06 Buttons
 *   07 Forms & fields     08 Grids & layouts        09 Cards & sections
 *   10 Toolbars & chips   11 Tables                 12 Currency entry table
 *   13 Totals & strips    14 Sidebars & recents     15 Modals & drawers
 *   16 Toasts & pills     17 Sticky savebars        18 Badges & misc
 *   19 Dashboard & hubs   20 Reports & settings     21 Login
 *   22 Responsive         23 Print
 */

/* ============================== 01 TOKENS ============================== */
/* CashCount design system - professional but colorful (2026-07 spec) */
:root {
  /* palette */
  --c-primary:      #173B66;   /* primary navy - buttons, badges, headers */
  --c-primary-dark: #112C4E;
  --c-primary-soft: #E8EFF7;
  --c-primary-line: #C6D6E8;
  --c-action:       #2563EB;   /* action blue - links, focus, active nav */
  --c-action-soft:  #EAF1FE;

  --c-chrome:       #122A4A;   /* top header (deep navy) */
  --c-chrome-2:     #173B66;   /* subnav (primary navy) */
  --c-chrome-line:  #2A4A75;
  --c-chrome-ink:   #C9D6E5;

  --c-ink:          #1E2530;
  --c-muted:        #5B6774;
  --c-faint:        #8B96A3;

  --c-border:       #D8E0EA;
  --c-border-soft:  #E5EBF2;
  --c-canvas:       #F3F6FA;
  --c-surface:      #FFFFFF;
  --c-panel:        #EEF3F9;   /* card headers / table heads */
  --c-zebra:        #F8FAFC;
  --c-compute:      #EAF1FE;   /* computed / INR cells */
  --c-compute-line: #BFD4F2;

  --c-green:        #16A34A;
  --c-green-dark:   #128040;
  --c-green-soft:   #D5EEDD;
  --c-green-tint:   #EAF7EF;
  --c-red:          #DC2626;
  --c-red-dark:     #B21E1E;
  --c-red-soft:     #F9DADA;
  --c-amber:        #F59E0B;
  --c-amber-dark:   #B97708;
  --c-amber-soft:   #FCEBC8;
  --c-purple:       #7C3AED;
  --c-purple-soft:  #F0E8FD;
  --c-blue-info:    #2563EB;

  --r:   4px;
  --r-s: 3px;
  --shadow-1: 0 1px 2px rgba(23, 59, 102, .07);
  --shadow-2: 0 6px 20px rgba(18, 42, 74, .16);

  /* default platform fonts — no web fonts, no custom stack */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Consolas, "Courier New", monospace;

  /* type scale: label/table 12 - body/input/button 13 - section 15 - title 24 */
  --fs:      13px;
  --fs-sm:   12.5px;
  --fs-xs:   12px;
  --fs-lg:   15px;
  --fs-title:24px;

  /* layout standard */
  --container: 1600px;
  --page-pad:  24px;
  --main-grid: 1fr 340px;
  --pad-card:  12px;
  --input-h:   32px;
  --field-gap: 10px;
  --section-gap: 14px;
}

/* ============================ 02 BASE ================================== */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.45;
}
h1, h2, h3, h4, h5, h6 { color: var(--c-ink); margin: 0 0 .4em; font-weight: 700; }
a { color: var(--c-action); text-decoration: none; }
a:hover { color: var(--c-primary-dark); text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--c-border-soft); }
small { font-size: var(--fs-xs); }
::selection { background: var(--c-primary-soft); }
input, select, textarea, button { font-family: var(--font); font-size: var(--fs); }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }

/* =========================== 03 SHELL ================================== */
.ccp-shell { min-height: 100vh; display: flex; flex-direction: column; }
.dt-main, .ccp-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--page-pad) var(--page-pad);
  box-sizing: border-box;
}
.page, .page-content { max-width: none; margin: 0; padding: 0; }
.ccp-app-page { padding-bottom: 1rem; }

/* -- CANONICAL PAGE LAYOUT (target structure for all pages) --------------
   <div class="ccp-page">
     <div class="ccp-page-header">...</div>
     <div class="ccp-grid-main">
       <main class="ccp-main-col">...</main>
       <aside class="ccp-side">...</aside>
     </div>
   </div>
   New/refactored pages use ONLY these wrappers; legacy per-page layout
   classes (.trd-layout etc.) are aliased to the same geometry below.    */
.ccp-page { display: flex; flex-direction: column; gap: var(--section-gap); }
.ccp-grid-main {
  display: grid;
  grid-template-columns: var(--main-grid);
  gap: 20px;
  align-items: start;
}
.ccp-main-col { min-width: 0; }
.ccp-side {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  position: sticky;
  top: 64px;
  min-width: 0;
}
@media (max-width: 1100px) {
  .ccp-grid-main { grid-template-columns: 1fr; }
  .ccp-side { position: static; }
}

/* app footer */
.bd-footer {
  flex-shrink: 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: 8px 24px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.bd-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: var(--container); margin: 0 auto; }
.bd-footer-title { font-weight: 700; color: var(--c-ink); }
.bd-footer-sep { color: var(--c-faint); }

/* ====================== 04 TOP HEADER & NAV ============================ */
.main-header.ccp-app-header {
  background: var(--c-chrome);
  border-bottom: 1px solid var(--c-chrome-line);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-content { max-width: none; margin: 0; }

.ccp-topheader {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 18px;
}
.ccp-topheader__left { display: flex; align-items: center; gap: 10px; }
.ccp-topheader__brand {
  color: #eef2f6;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.ccp-topheader__brand:hover { color: #fff; text-decoration: none; }
.ccp-topheader__center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.ccp-topheader__right { display: flex; align-items: center; gap: 8px; }

/* global search */
.ccp-topsearch { display: flex; align-items: center; gap: 6px; width: min(440px, 100%); }
.ccp-topsearch__inp {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 10px;
  background: #24466F;
  border: 1px solid var(--c-chrome-line);
  border-radius: var(--r);
  color: #eef2f6;
  min-width: 0;
}
.ccp-topsearch__inp::placeholder { color: #93A9C2; }
.ccp-topsearch__inp:focus { outline: none; border-color: #4A6FA0; }
.ccp-topsearch__btn {
  height: 30px;
  padding: 0 14px;
  background: var(--c-primary);
  border: none;
  border-radius: var(--r);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.ccp-topsearch__btn:hover { background: var(--c-primary-dark); }

/* FY chip + notifications + logout */
.ccp-fyform {
  background: var(--c-chrome-2);
  border: 1px solid var(--c-chrome-line);
  border-radius: var(--r);
  padding: 4px 10px;
}
.ccp-fyform__val { color: #e8edf2; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.ccp-notif-trigger {
  background: var(--c-chrome-2);
  border: 1px solid var(--c-chrome-line);
  border-radius: var(--r);
  color: #e8edf2;
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ccp-pill-count {
  background: var(--c-red);
  color: #fff;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.5;
}
.btn-logout {
  background: var(--c-red);
  border: none;
  border-radius: var(--r);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 6px 12px;
  cursor: pointer;
}
.btn-logout:hover { background: var(--c-red-dark); }
/* generic square icon button (usable anywhere) */
.btn-icon {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  color: var(--c-muted);
  width: 32px; height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-icon:hover { background: var(--c-zebra); color: var(--c-ink); }
/* the top-header hamburger instance: dark chrome + hidden until mobile */
.ccp-topheader .btn-icon {
  background: transparent;
  border-color: var(--c-chrome-line);
  color: var(--c-chrome-ink);
  display: none;               /* shown on mobile */
}

/* primary nav (subnav) */
.ccp-subnav { background: var(--c-chrome-2); border-top: 1px solid var(--c-chrome-line); }
.ccp-nav-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 auto;
  padding: 4px 14px;
  max-width: none;
}
.ccp-nav-item { position: relative; }
.ccp-nav-item > a,
.ccp-nav-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: var(--r);
  color: var(--c-chrome-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.ccp-nav-item > a:hover,
.ccp-nav-dd-toggle:hover { background: var(--c-chrome); color: #fff; text-decoration: none; }
.ccp-nav-item > a.is-active,
.ccp-nav-dd-toggle.is-active,
.ccp-nav-dd.open > .ccp-nav-dd-toggle { background: var(--c-action); color: #fff; }
.ccp-nav-dd-caret { font-size: 9px; opacity: .8; }

/* dropdown menus — JS positions them fixed against the viewport */
.ccp-nav-dd-menu {
  display: none;
  position: fixed;
  z-index: 1100;
  min-width: 220px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  padding: 6px;
}
.ccp-nav-dd-menu a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r-s);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}
.ccp-nav-dd-menu a:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); text-decoration: none; }
.ccp-nav-dd-menu a.is-active { background: var(--c-primary); color: #fff; }
.ccp-nav-dd-menu--mega { min-width: 300px; }
.ccp-nav-dd-menu--mega-1col-wide { min-width: 560px; }
.ccp-nav-dd-mega-top { padding: 4px 10px 8px; border-bottom: 1px solid var(--c-border-soft); margin-bottom: 6px; }
.ccp-nav-dd-mega-top a { font-weight: 700; color: var(--c-primary); }
.ccp-nav-dd-mega-grid { display: flex; gap: 14px; }
.ccp-nav-dd-mega-col { flex: 1 1 0; min-width: 170px; }
.ccp-nav-dd-section { margin-bottom: 8px; }
.ccp-nav-dd-section > strong,
.ccp-nav-dd-section-label {
  display: block;
  padding: 4px 10px 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-faint);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* notifications dropdown panel */
.ccp-topnotif__menu { min-width: 320px; max-width: 400px; max-height: 70vh; overflow-y: auto; }
.ccp-topnotif__hd { font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--c-border-soft); }
.ccp-topnotif__stats { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--c-muted); margin-top: 2px; }
.ccp-topnotif__item { display: block; padding: 8px 10px; border-bottom: 1px solid var(--c-border-soft); border-radius: 0; }
.ccp-topnotif__item:hover { background: var(--c-zebra); }
.ccp-topnotif__title { font-weight: 600; color: var(--c-ink); }
.ccp-topnotif__meta { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; }
.ccp-topnotif__footerlink { display: block; text-align: center; padding: 8px; font-weight: 600; color: var(--c-primary); }

/* ======================= 05 PAGE HEADER ================================ */
.page-header, .ccp-page-header { margin: 0 0 14px; }
.ccp-page-header__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ccp-page-header__copy { min-width: 0; }
.ccp-page-header__crumb { font-size: var(--fs-xs); color: var(--c-muted); }
.ccp-page-header__title { font-size: var(--fs-title); font-weight: 700; margin: 0; letter-spacing: 0; }
.ccp-page-header__sub { font-size: var(--fs-sm); color: var(--c-muted); margin: 2px 0 0; }
.ccp-page-header__actions { margin-left: auto; display: flex; gap: 8px; }

/* ========================= 06 BUTTONS ================================== */
/* one shared button base across every namespace */
.btn, .trd-btn, .adj-btn, .vch-btn, .quot2-btn, .ql-btn, .cp-btn,
.ob-btn-primary, .ob-btn-success-solid, .ob-btn-outline-print, .ob-btn-save-sm,
.ob-btn-edit-outline, .ob-btn-secondary-outline, .ob-btn-xs, .ob-save-btn,
.denom-filter-btn, .denom-save-btn, .denom-count-btn, .denom-tb-load-btn, .denom-tb-prev-btn,
.pt-f-btn, .qa-btn, .btn-quick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs);
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
  box-shadow: none;
  line-height: 1.35;
}
.btn:hover, .trd-btn:hover, .adj-btn:hover, .vch-btn:hover, .quot2-btn:hover,
.ql-btn:hover, .cp-btn:hover, .qa-btn:hover, .btn-quick:hover { background: #f2f5f8; text-decoration: none; color: var(--c-ink); }
.btn:disabled, [class*="-btn"]:disabled { opacity: .55; cursor: not-allowed; }

/* primary */
.btn-primary, .btn-login, .trd-btn--primary, .adj-btn--primary, .vch-btn--primary,
.quot2-btn--primary, .ql-btn--primary, .cp-btn--primary, .ob-btn-primary, .btn-confirm {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.btn-primary:hover, .btn-login:hover, .trd-btn--primary:hover, .adj-btn--primary:hover,
.vch-btn--primary:hover, .quot2-btn--primary:hover, .ql-btn--primary:hover,
.cp-btn--primary:hover, .ob-btn-primary:hover, .btn-confirm:hover {
  background: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  color: #fff;
}
/* success */
.btn-success, .quot2-btn--success, .ob-btn-success-solid {
  background: var(--c-green); border-color: var(--c-green); color: #fff;
}
.btn-success:hover, .quot2-btn--success:hover, .ob-btn-success-solid:hover {
  background: var(--c-green-dark); border-color: var(--c-green-dark); color: #fff;
}
/* danger */
.btn-danger, .btn-delete, .adj-btn--danger {
  background: var(--c-red); border-color: var(--c-red); color: #fff;
}
.btn-danger:hover, .btn-delete:hover, .adj-btn--danger:hover {
  background: var(--c-red-dark); border-color: var(--c-red-dark); color: #fff;
}
/* warning */
.btn-warning, .btn-warn { background: var(--c-amber); border-color: var(--c-amber); color: #fff; }
.btn-warning:hover, .btn-warn:hover { background: var(--c-amber-dark); border-color: var(--c-amber-dark); color: #fff; }
/* soft (tinted secondary - the calm colorful action) */
.btn-soft {
  background: var(--c-action-soft);
  border-color: var(--c-action-soft);
  color: var(--c-action);
}
.btn-soft:hover { background: #DCE8FD; border-color: #DCE8FD; color: var(--c-action); }
/* ghost (borderless, tinted hover) */
.btn-ghost, .trd-btn--ghost, .adj-btn--ghost, .vch-btn--ghost, .quot2-btn--ghost,
.ql-btn--ghost, .cp-btn--ghost, .quot2-btn--danger-ghost {
  background: transparent; border-color: transparent; color: var(--c-primary);
}
.btn-ghost:hover, .trd-btn--ghost:hover, .adj-btn--ghost:hover, .vch-btn--ghost:hover,
.quot2-btn--ghost:hover, .ql-btn--ghost:hover, .cp-btn--ghost:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.quot2-btn--danger-ghost { color: var(--c-red); }
.quot2-btn--danger-ghost:hover { background: var(--c-red-soft); color: var(--c-red-dark); }
/* outline */
.quot2-btn--outline, .btn-outline-secondary, .ob-btn-outline-print,
.ob-btn-edit-outline, .ob-btn-secondary-outline, .btn-secondary, .btn-light {
  background: var(--c-surface); border-color: var(--c-border); color: var(--c-ink);
}
/* small */
.btn-sm, .ql-btn--sm, .ob-btn-xs, .ob-btn-save-sm, .btn-compact { padding: 3px 10px; font-size: var(--fs-sm); }
/* row-action text buttons (Edit / View / Delete in lists) */
.btn-edit, .btn-view, .btn-edit-party, .btn-toggle {
  padding: 3px 10px; font-size: var(--fs-sm);
  background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-primary);
}
.btn-edit:hover, .btn-view:hover, .btn-edit-party:hover { background: var(--c-primary-soft); }
.action-btns { display: flex; gap: 6px; }

/* ======================= 07 FORMS & FIELDS ============================= */
label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.trd-fg, .adj-fg, .vch-fg, .ql-fg, .fg, .ccp-field, .form-group,
.trd-modal-field, .adj-modal-field, .denom-drawer-field, .dt-filter-field, .rpt-filter-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.trd-fg label, .adj-fg label, .vch-fg label, .ql-fg label, .fg label,
.ccp-field label, .form-group label { margin: 0; }
.trd-req, .adj-req, .vch-req, .req { color: var(--c-red); }
.vch-hint, .opt, .field-hint { color: var(--c-faint); font-weight: 500; }

/* one input look everywhere */
.trd-inp, .adj-inp, .vch-inp, .ql-inp, .cp-inp, .ob-input,
.form-control, .form-select, .count-input, .denom-qty-input, .denom-adj-input,
.basic-grid input, .basic-grid select,
.ccp-form-grid input, .ccp-form-grid select, .ccp-form-grid textarea {
  height: var(--input-h);
  padding: 0 9px;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs);
  width: 100%;
  box-sizing: border-box;
}
textarea.trd-inp, textarea.adj-inp, textarea.vch-inp, textarea.form-control, textarea {
  height: auto;
  min-height: 60px;
  padding: 7px 9px;
  resize: vertical;
}
select { cursor: pointer; }
.trd-inp:focus, .adj-inp:focus, .vch-inp:focus, .ql-inp:focus, .cp-inp:focus,
.ob-input:focus, .form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .18);
}
input[readonly], .trd-inp--readonly, .vch-inp--readonly, input:disabled, select:disabled {
  background: #f4f6f8;
  color: var(--c-muted);
}
.trd-inp--amount, .vch-inp--amount { font-weight: 700; font-size: var(--fs-lg); }
.trd-inp--grand {
  font-weight: 700;
  font-size: var(--fs-lg);
  border-color: var(--c-primary);
  background: var(--c-compute);
  color: var(--c-primary);
}
.vch-inp--mono { font-family: var(--mono); }
.form-control-sm { height: 28px; font-size: var(--fs-sm); }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; accent-color: var(--c-primary); }
input[type="date"] { min-width: 0; }

/* ====================== 08 GRIDS & LAYOUTS ============================= */
.trd-grid-3, .adj-grid-3, .vch-grid-3, .ccp-form-grid--3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.adj-grid-2, .grid-2, .ccp-grid-2, .de-grid-2-resp {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.vch-grid-4, .grid-4 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.basic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ccp-form-grid, .grid, .ccp-grid, .br-grid, .fm-grid, .tcs-grid, .summary-grid,
.dt-filters-grid, .currency-grid, .settings-admin-grid, .mig-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--field-gap);
}
/* canonical form grid: <div class="ccp-form-grid cols-3"> */
.ccp-form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ccp-form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccp-form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccp-form-grid .span-2 { grid-column: span 2; }
.ccp-form-grid .span-3 { grid-column: span 3; }
@media (max-width: 860px) {
  .ccp-form-grid.cols-3, .ccp-form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ccp-form-grid.cols-2, .ccp-form-grid.cols-3, .ccp-form-grid.cols-4 { grid-template-columns: 1fr; }
  .ccp-form-grid .span-2, .ccp-form-grid .span-3 { grid-column: span 1; }
}
.trd-span-3 { grid-column: span 3; }
.adj-span-2, .vch-span-2 { grid-column: span 2; }

/* main + sidebar layouts (3:1) */
/* legacy layout aliases -> SAME geometry as .ccp-grid-main (one source of truth) */
.trd-layout, .quot2-layout, .adj-layout {
  display: grid;
  grid-template-columns: var(--main-grid);
  gap: 20px;
  align-items: start;
}
.trd-form, .adj-form { min-width: 0; }
.trd-side, .quot2-sidebar, .adj-side {
  display: flex; flex-direction: column; gap: var(--field-gap);
  position: sticky; top: 64px;
  min-width: 0;
}
.quot-main { min-width: 0; }
/* payment 50/50 split */
.quot-pay-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

/* wraps */
.quot-wrap, .trd-shell, .adj-shell, .vch-shell, .ql-shell, .cp-wrap,
.elog-wrap, .mig-wrap, .rtxn-wrap, .ccp-hub-wrap {
  display: block;
}
.quot-wrap { display: flex; flex-direction: column; gap: 14px; }

/* ====================== 09 CARDS & SECTIONS ============================ */
.card, .trd-card, .adj-card, .vch-card, .qsect, .quot2-card, .quot-sec,
.invoice-panel, .denom-summary-card, .denom-ccy-card, .denom-grid-card,
.cp-agenda-card, .cs-display-order, .ccp-kpi-card, .ccp-hub-card, .chart-more-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  margin-bottom: 14px;
}
.trd-side .trd-card, .quot2-sidebar .quot2-card, .adj-side .adj-card { margin-bottom: 0; }

/* section header bar */
.trd-card__hd, .adj-card__hd, .vch-card__hd, .qsect-hd, .quot2-card__hd,
.invoice-panel__head, .cp-day-panel__hd, .chart-more-box__head, .denom-drawer-head {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--c-panel);
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--r) var(--r) 0 0;
  padding: 9px var(--pad-card);
  font-size: var(--fs-lg);   /* section title: 15px */
  font-weight: 700;
  color: var(--c-ink);
}
.trd-card__body, .adj-card__body, .vch-card__body, .qsect-body,
.invoice-panel__body, .chart-more-box__body { padding: var(--pad-card); }

/* square numbered badge */
.trd-card__num, .adj-card__num, .vch-card__num {
  width: 20px; height: 20px; min-width: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary);
  border-radius: var(--r-s);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.trd-card__opt, .adj-card__opt { margin-left: auto; font-size: var(--fs-xs); font-weight: 500; color: var(--c-faint); }

/* ====================== 10 TOOLBARS & CHIPS ============================ */
.trd-hd, .adj-hd, .vch-hd, .quot2-hd, .ql-hd, .ob-page-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 8px 12px;
  margin-bottom: 14px;
}
.trd-hd__left, .adj-hd__left, .vch-hd__left, .quot2-hd__left, .ql-hd__left {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0;
}
.trd-hd__title, .adj-hd__title, .vch-hd__title, .quot2-hd__title, .ql-hd__title {
  font-size: var(--fs-lg); font-weight: 700; white-space: nowrap;
}
.trd-hd__fy, .adj-hd__fy, .vch-hd__fy, .quot2-hd__fy {
  font-size: 11.5px; font-weight: 700;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border: 1px solid var(--c-primary-line);
  border-radius: var(--r-s);
  padding: 2px 7px;
  white-space: nowrap;
}
.trd-hd__ref, .adj-hd__ref { font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; }
.trd-hd__right, .adj-hd__right, .vch-hd__right, .quot2-hd__right, .ql-hd__right {
  display: flex; gap: 6px; margin-left: auto;
}

/* summary chips in the toolbar */
.trd-summary-strip, .adj-summary-strip, .quot2-hd-chips {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0;
}
.trd-chip, .adj-chip, .quot2-hd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-zebra);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r);
  padding: 3px 9px;
  white-space: nowrap;
}
.trd-chip-l, .adj-chip-l, .quot2-hd-chip-l { font-size: 11.5px; font-weight: 600; color: var(--c-faint); }
.trd-chip-v, .adj-chip-v, .quot2-hd-chip-v { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.trd-chip-v--trunc, .adj-chip-v--trunc { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.trd-chip-v--money, .adj-chip-v--money { color: var(--c-primary); font-variant-numeric: tabular-nums; }

/* type / direction tabs */
.trd-type-tabs, .adj-dir-toggle { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; }
.trd-type-tab, .adj-dir-btn {
  border: none; background: var(--c-surface); color: var(--c-muted);
  font-weight: 700; font-size: var(--fs-sm); padding: 5px 14px; cursor: pointer;
}
.trd-type-tab + .trd-type-tab, .adj-dir-btn + .adj-dir-btn { border-left: 1px solid var(--c-border); }
.trd-type-tab--buy.active, .adj-dir-btn--in.active { background: var(--c-green); color: #fff; }
.trd-type-tab--sell.active, .adj-dir-btn--out.active { background: var(--c-red); color: #fff; }
.adj-dir-label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.adj-dir-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  border-radius: var(--r-s); padding: 2px 9px;
}
.adj-dir-badge--in { background: var(--c-green-tint); color: var(--c-green); border: 1px solid var(--c-green-soft); }
.adj-dir-badge-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.adj-subtype-label { font-size: var(--fs-xs); color: var(--c-muted); }

/* ========================== 11 TABLES ================================== */
table { border-collapse: collapse; }
.table, .trd-tbl, .adj-tbl, .vch-tbl, .ql-tbl, .ob-tbl, .pv-tbl, .rtxn-tbl,
.rpt-ledger-tbl, .quot-bdf-etbl, .quot-settle-tbl, .invoice-table, .modern-table,
.settings-table, .feature-table, .ccp-txn-table, .ccp-preview-table,
.denom-count-table, .denom-grid-table, .denom-drawer-table, .elog-db-table,
.adj-modal-tbl, .table-compact, .vault-popup__tbl, .fa-table-list {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  background: var(--c-surface);
}
.table th, .trd-tbl th, .adj-tbl th, .vch-tbl th, .ql-tbl th, .ob-tbl th, .pv-tbl th,
.rtxn-tbl th, .rpt-ledger-tbl th, .quot-bdf-etbl th, .quot-settle-tbl th,
.invoice-table th, .modern-table th, .settings-table th, .feature-table th,
.ccp-txn-table th, .ccp-preview-table th, .denom-count-table th, .denom-grid-table th,
.denom-drawer-table th, .elog-db-table th, .adj-modal-tbl th, .table-compact th,
.vault-popup__tbl th, .fa-table-list th {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: left;
  padding: 6px 8px;
  white-space: nowrap;
}
.table td, .trd-tbl td, .adj-tbl td, .vch-tbl td, .ql-tbl td, .ob-tbl td, .pv-tbl td,
.rtxn-tbl td, .rpt-ledger-tbl td, .quot-bdf-etbl td, .quot-settle-tbl td,
.invoice-table td, .modern-table td, .settings-table td, .feature-table td,
.ccp-txn-table td, .ccp-preview-table td, .denom-count-table td, .denom-grid-table td,
.denom-drawer-table td, .elog-db-table td, .adj-modal-tbl td, .table-compact td,
.vault-popup__tbl td, .fa-table-list td {
  border: 1px solid var(--c-border);
  padding: 4px 6px;
  vertical-align: middle;
}
/* zebra for read-only listing tables */
.table tbody tr:nth-child(even), .ql-tbl tbody tr:nth-child(even),
.rtxn-tbl tbody tr:nth-child(even), .rpt-ledger-tbl tbody tr:nth-child(even),
.invoice-table tbody tr:nth-child(even), .modern-table tbody tr:nth-child(even),
.settings-table tbody tr:nth-child(even), .ccp-txn-table tbody tr:nth-child(even),
.ccp-preview-table tbody tr:nth-child(even), .elog-db-table tbody tr:nth-child(even) {
  background: var(--c-zebra);
}
.table-total-row td { background: var(--c-compute); font-weight: 700; }
.text-nowrap { white-space: nowrap; }

/* scroll wraps */
.trd-tbl-wrap, .adj-tbl-wrap, .ql-tbl-wrap, .quot-bdf-wrap, .table-responsive,
.table-container, .table-scroll, .denom-table-wrap, .denom-drawer-tablewrap,
.denom-table-scroller, .pt-matrix-wrap, .ob-inr-denom-wrap {
  overflow-x: auto;
  border-radius: var(--r);
}
/* inputs inside dense tables stay compact */
.trd-tbl input, .trd-tbl select, .adj-tbl input, .adj-tbl select,
.quot-bdf-etbl input, .quot-bdf-etbl select,
.denom-count-table input, .ob-tbl input {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-s);
  font-size: var(--fs-sm);
  width: 100%;
  box-sizing: border-box;
  background: var(--c-surface);
}

/* ================== 12 CURRENCY ENTRY TABLE ============================ */
.quot-bdf-etbl { min-width: 640px; table-layout: fixed; }
.quot-row-num { text-align: center; color: var(--c-faint); font-weight: 600; }
.quot-bdf-etbl input.inr-value, .trd-tbl .inr-value, .inr-col {
  background: var(--c-compute);
  border-color: var(--c-compute-line);
  font-weight: 600;
  text-align: right;
}
.quot-act-cell { display: flex; align-items: center; justify-content: center; gap: 4px; }
.quot-ico-add, .quot-ico-del, .adj-add-btn, .adj-del-btn {
  width: 26px; height: 26px;
  border: none; border-radius: var(--r-s);
  font-size: 14px; font-weight: 800; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.quot-ico-add, .adj-add-btn { background: var(--c-green-soft); color: var(--c-green); }
.quot-ico-del, .adj-del-btn { background: var(--c-red-soft); color: var(--c-red); }
.quot-ico-add:hover, .quot-ico-del:hover { filter: brightness(.94); }
/* confirmed / locked row */
tr.qrow-confirmed td, tr.te-row-locked td { background: var(--c-green-tint); }
tr.qrow-confirmed .quot-ico-add, tr.te-row-locked .quot-ico-add { background: var(--c-green); color: #fff; }
.te-row-locked input, .te-row-locked select { background: #f4f6f8; color: var(--c-muted); pointer-events: none; }
.quot-row-hint { font-size: var(--fs-xs); color: var(--c-faint); font-weight: 500; }
.usd-warn { font-size: var(--fs-xs); color: var(--c-amber); font-weight: 600; }

/* ====================== 13 TOTALS & STRIPS ============================= */
.trd-settle-strip, .adj-settle-strip, .denom-summary-strip {
  display: flex;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
  overflow: hidden;
  margin: 12px 0 6px;
}
.trd-settle-item, .adj-settle-item { flex: 1 1 0; padding: 8px 12px; min-width: 0; }
.trd-settle-sep, .adj-settle-sep { width: 1px; align-self: stretch; background: var(--c-border); flex-shrink: 0; }
.trd-settle-lbl, .adj-settle-lbl { display: block; font-size: 11.5px; font-weight: 600; color: var(--c-muted); }
.trd-settle-val, .adj-settle-val { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.trd-settle-item--grand, .adj-settle-item--grand { background: var(--c-compute); }
.trd-settle-item--grand .trd-settle-val, .adj-settle-item--grand .adj-settle-val { color: var(--c-primary); }
.trd-settle-item--balance .trd-settle-val { color: var(--c-blue-info); }

/* key-value pairs (live preview) */
.trd-kv, .adj-kv { display: flex; flex-direction: column; gap: 2px; }
.trd-kv__k, .adj-kv__k { font-size: 11.5px; font-weight: 600; color: var(--c-muted); }
.trd-kv__v, .adj-kv__v { font-size: var(--fs); font-weight: 700; }
.trd-kv__v--money, .adj-kv__v--money { color: var(--c-green); font-variant-numeric: tabular-nums; }

/* currency breakdown mini-rows */
.trd-cur-summary, .adj-cur-breakdown { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--fs-xs); }
.adj-cur-row, .te-sum-row {
  display: flex; justify-content: space-between; gap: 8px;
  background: var(--c-zebra);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-s);
  padding: 2px 8px;
}
.adj-cur-row-code { font-weight: 700; }
.adj-cur-row-val { color: var(--c-muted); }

/* balance pill */
.trd-balance-pill, .adj-balance-pill {
  display: block;
  text-align: center;
  border-radius: var(--r);
  padding: 7px 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--c-green-tint);
  color: var(--c-green);
  border: 1px solid var(--c-green-soft);
  margin-top: 8px;
}
.trd-balance-pill--empty, .adj-balance-pill--empty {
  background: var(--c-zebra); color: var(--c-faint); border-color: var(--c-border-soft);
}

/* ==================== 14 SIDEBARS & RECENT LISTS ======================= */
.trd-recent-list, .adj-recent-list, .quot2-recent-list, .vch-search-list {
  list-style: none; margin: 0; padding: 0;
}
.trd-recent-item, .adj-recent-item, .quot2-recent-item, .vch-search-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--c-border-soft);
  font-size: var(--fs-sm);
}
.trd-recent-item:last-child, .adj-recent-item:last-child, .quot2-recent-item:last-child { border-bottom: none; }
.trd-recent-item:hover, .adj-recent-item:hover, .quot2-recent-item:hover { background: var(--c-zebra); }
.trd-recent-ref, .adj-recent-ref, .quot2-recent-item__ref { font-weight: 700; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trd-recent-party, .adj-recent-party, .quot2-recent-item__cust { color: var(--c-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trd-recent-amt, .adj-recent-amt, .quot2-recent-item__total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trd-recent-actions, .adj-recent-actions { display: flex; gap: 4px; }
.trd-recent-actions button, .adj-recent-actions button {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--r-s);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-primary);
  padding: 2px 8px;
  cursor: pointer;
}
.trd-recent-actions button:hover, .adj-recent-actions button:hover { background: var(--c-primary-soft); }
.trd-recent-badge, .adj-recent-badge, .quot2-badge, .ql-badge {
  font-size: 11px; font-weight: 700;
  border-radius: var(--r-s);
  padding: 2px 6px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  white-space: nowrap;
}
.quot2-badge--sell { background: #fdeceb; color: var(--c-red); }
.quot2-badge--draft { background: var(--c-amber-soft); color: var(--c-amber); }
.ql-badge--converted { background: var(--c-green-tint); color: var(--c-green); }

/* ===================== 15 MODALS & DRAWERS ============================= */
.trd-modal-backdrop, .adj-modal-backdrop, .vch-modal, .cp-modal-backdrop,
.vault-popup-overlay, .chart-more-overlay, .denom-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 38, .55);
  z-index: 1200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
}
.trd-modal-backdrop.open, .adj-modal-backdrop.open, .vch-modal.open,
.vault-popup-overlay.open, .chart-more-overlay.open, .denom-drawer-backdrop.open,
.trd-modal-backdrop.visible, .adj-modal-backdrop.visible { display: flex; }
.trd-modal, .adj-modal, .vch-modal__card, .cp-modal, .vault-popup, .denom-drawer {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  width: min(720px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 16px;
  position: relative;
}
.trd-modal-close, .adj-modal-close, .cp-modal__x, .vault-popup__close, .pv-close {
  position: absolute;
  top: 8px; right: 10px;
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--c-faint);
  cursor: pointer;
  line-height: 1;
}
.trd-modal-close:hover, .adj-modal-close:hover { color: var(--c-ink); }
.trd-modal-grid, .adj-modal-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
  margin: 10px 0;
}
.vch-modal__hd, .cp-modal__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vch-modal__title, .cp-modal__ttl { font-size: var(--fs-lg); font-weight: 700; }
.vch-modal__body { font-size: var(--fs-sm); }
.cp-modal__ft { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* denominations drawer */
.denom-drawer { width: min(860px, 100%); }
.denom-drawer-head { margin: -16px -16px 12px; }
.denom-drawer-title { font-weight: 700; font-size: var(--fs-lg); }
.denom-drawer-sub { font-size: var(--fs-xs); color: var(--c-muted); }
.denom-drawer-body { font-size: var(--fs-sm); }

/* ====================== 16 TOASTS & PILLS ============================== */
.trd-toast-wrap, .adj-toast-wrap {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 1400;
  display: flex; flex-direction: column; gap: 8px;
}
.trd-toast, .adj-toast, .pv-toast, .denom-toast {
  background: var(--c-chrome);
  color: #eef2f6;
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  padding: 10px 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  max-width: 340px;
}
.trd-toast--success, .adj-toast--success, .trd-toast.success, .adj-toast.success { background: var(--c-green); color: #fff; }
.trd-toast--error, .adj-toast--error, .trd-toast.error, .adj-toast.error { background: var(--c-red); color: #fff; }
.pv-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1400; }

/* ===================== 17 STICKY SAVEBARS ============================== */
.trd-savebar, .adj-savebar, .quot2-savebar, .quot-sticky-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -2px 8px rgba(31, 41, 55, .08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 24px;
  margin: 0;
}
.quot2-savebar__inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.trd-shell, .adj-shell, .quot-wrap { padding-bottom: 72px; }
.trd-save-msg, .adj-save-msg, .vch-save-msg { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.vch-save-msg--ok { color: var(--c-green); }

/* ====================== 18 BADGES & MISC =============================== */
.badge, .mig-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--r-s);
  padding: 2px 8px;
  background: var(--c-panel);
  color: var(--c-muted);
  white-space: nowrap;
}
.badge-in, .badge-success, .badge--success { background: var(--c-green-tint); color: var(--c-green); }
.badge-out, .badge-danger { background: #fdeceb; color: var(--c-red); }
.badge-info, .badge-account { background: var(--c-primary-soft); color: var(--c-primary); }
.badge-neutral, .badge--neutral { background: var(--c-panel); color: var(--c-muted); }
.gst-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  border-radius: var(--r-s); padding: 2px 9px;
  background: var(--c-primary-soft); color: var(--c-primary);
}
.gst-badge.gb-none { background: var(--c-panel); color: var(--c-faint); }
.ccp-ccy-badge, .ccp-ccy-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-zebra); border: 1px solid var(--c-border-soft);
  border-radius: var(--r-s); padding: 2px 8px;
  font-size: var(--fs-xs); font-weight: 600;
}
.ccp-ccy-chip__code { font-weight: 700; }
.hero-emoji { color: var(--c-faint); margin-bottom: 8px; }
/* voucher debit/credit banner */
.vch-dc {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r); padding: 5px 12px;
  font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid var(--c-border);
  background: var(--c-zebra);
}
.vch-dc--dr { border-left: 3px solid var(--c-red); }
.vch-dc--cr { border-left: 3px solid var(--c-green); }
.vch-dc__label { font-weight: 800; color: var(--c-muted); font-size: var(--fs-xs); }
.vch-dc__acct { color: var(--c-ink); }

/* ==================== 19 DASHBOARD & HUBS ============================== */
.ccp-dash-hero {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ccp-dash-hero__eyebrow { font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary); letter-spacing: .05em; text-transform: uppercase; }
.ccp-dash-hero__title { font-size: 20px; font-weight: 700; margin: 2px 0; }
.ccp-dash-hero__desc { font-size: var(--fs-sm); color: var(--c-muted); }
.ccp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.ccp-kpi-card { padding: 12px 14px; margin-bottom: 0; }
.ccp-kpi-card__label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.ccp-kpi-card__value { font-size: 20px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ccp-kpi-card__sub { font-size: var(--fs-xs); color: var(--c-faint); }
.ccp-kpi-card--sell .ccp-kpi-card__value { color: var(--c-red); }
.ccp-pos-open, .ccp-pos-close { font-weight: 700; }
/* hub landing cards */
.ccp-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.ccp-hub-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-bottom: 0;
  color: inherit;
}
.ccp-hub-card:hover { border-color: var(--c-primary); text-decoration: none; box-shadow: var(--shadow-2); }
.ccp-hub-card__ico {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: var(--r);
  font-size: 16px;
}
.ccp-hub-card__label { font-weight: 700; }
.ccp-hub-card__desc { font-size: var(--fs-xs); color: var(--c-muted); }

/* =================== 20 REPORTS & SETTINGS ============================= */
.ccp-report-hero {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.ccp-report-hero__eyebrow { font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary); letter-spacing: .05em; text-transform: uppercase; }
.ccp-report-hero__title { font-size: var(--fs-title); font-weight: 700; margin: 2px 0 0; }
.ccp-report-hero--compact { padding: 9px 14px; }
.dt-filters-grid, .rpt-filter-field { align-items: end; }
/* invoice numbering / settings panels */
.invoice-settings-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.invoice-code {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  border: 1px solid var(--c-primary-line);
  border-radius: var(--r-s);
  padding: 2px 7px;
  white-space: nowrap;
}
.invoice-badge {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  border-radius: var(--r-s); padding: 2px 8px;
  background: var(--c-green-tint); color: var(--c-green);
}
.invoice-badge--soft { background: var(--c-primary-soft); color: var(--c-primary); }
.invoice-badge--muted { background: var(--c-panel); color: var(--c-muted); }
.invoice-preview { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.invoice-preview__item {
  flex: 1 1 180px;
  background: var(--c-zebra);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r);
  padding: 9px 12px;
}
.invoice-policy { display: flex; flex-direction: column; gap: 10px; }
.invoice-policy > div {
  background: var(--c-zebra);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: var(--fs-sm);
}

/* =========================== 21 LOGIN ================================== */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
  flex-wrap: wrap;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(37, 99, 235, .4) 0%, transparent 60%),
    linear-gradient(160deg, var(--c-chrome) 0%, var(--c-chrome-2) 70%);
  padding: 32px 24px;
  box-sizing: border-box;
}
/* -- left brand panel -- */
.brand-panel { color: #e8edf2; max-width: 480px; min-width: 0; }
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  padding: 0;
}
.brand-badge > div > div:first-child {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
}
.brand-panel .text-muted, .brand-badge .text-sm {
  color: #93a5b6 !important;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.brand-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 26px 0 10px;
  letter-spacing: -.3px;
}
.brand-sub { font-size: var(--fs-lg); line-height: 1.55; color: #aebccb; margin: 0 0 24px; }
.brand-features { display: grid; gap: 10px; }
.brand-feature { display: flex; align-items: baseline; gap: 9px; font-size: var(--fs); color: #cdd6df; }

/* -- right sign-in card -- */
.login-card {
  width: min(390px, 100%);
  background: var(--c-surface);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(10, 16, 24, .45);
  padding: 30px 30px 24px;
  box-sizing: border-box;
}
.login-h { margin-bottom: 18px; }
.login-h h2 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.2px; }
.login-h .hint { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 3px; }

.login-card .field { margin-top: 14px; }
.login-card .field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: 5px;
}
.login-card .control input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs);
  box-sizing: border-box;
}
.login-card .control input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}
.btn-login {
  width: 100%;
  height: 42px;
  background: var(--c-primary);
  border: none;
  border-radius: var(--r);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.btn-login:hover { background: var(--c-primary-dark); }
.fp-link, .fp-back {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-primary);
}
.otp-hint { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 6px; }
.fineprint {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border-soft);
  font-size: var(--fs-xs);
  color: var(--c-faint);
  line-height: 1.5;
}
/* login notices */
.alert-lite {
  border-radius: var(--r);
  border: 1px solid var(--c-border);
  background: var(--c-zebra);
  padding: 9px 12px;
  font-size: var(--fs-sm);
  margin-top: 10px;
}
.alert-lite.err { background: #fdeceb; border-color: #efc4c0; color: var(--c-red-dark); }
.alert-lite.ok  { background: var(--c-green-tint); border-color: var(--c-green-soft); color: var(--c-green-dark); }

@media (max-width: 960px) {
  .login-shell { gap: 32px; }
  .brand-panel { display: none; }
}

/* ========================= 22 RESPONSIVE =============================== */
@media (max-width: 1100px) {
  .trd-layout, .quot2-layout, .adj-layout { grid-template-columns: 1fr; }
  .trd-side, .quot2-sidebar, .adj-side { position: static; }
  .basic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .invoice-settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .trd-grid-3, .adj-grid-3, .vch-grid-3, .ccp-form-grid--3, .vch-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trd-span-3, .adj-span-2, .vch-span-2 { grid-column: span 2; }
  .quot-pay-split { grid-template-columns: 1fr; }
  .trd-summary-strip, .adj-summary-strip, .quot2-hd-chips { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .btn-icon { display: inline-flex; }
  .ccp-topheader__center { display: none; }
  .ccp-nav-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 6px;
  }
  .ccp-nav-menu.show { display: flex; }
  .dt-main, .ccp-main { padding: 10px 12px 18px; }
}
@media (max-width: 640px) {
  .trd-grid-3, .adj-grid-3, .adj-grid-2, .vch-grid-3, .vch-grid-4,
  .grid-2, .grid-4, .ccp-grid-2, .basic-grid, .de-grid-2-resp {
    grid-template-columns: 1fr;
  }
  .trd-span-3, .adj-span-2, .vch-span-2 { grid-column: span 1; }
  .trd-savebar > *, .adj-savebar > * { width: 100%; justify-content: center; }
  .trd-settle-strip, .adj-settle-strip { flex-wrap: wrap; }
  .trd-settle-item, .adj-settle-item { flex: 1 1 40%; }
  .trd-hd__right, .adj-hd__right, .vch-hd__right, .quot2-hd__right { margin-left: 0; width: 100%; }
}

/* ============== 24 IDLE-TIMEOUT MODAL (header.php dialog) ============== */
/* Hidden until the idle JS adds .ccp-idle-show; then a centered modal. */
#ccp-idle-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20, 28, 38, .6);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#ccp-idle-overlay.ccp-idle-show { display: flex; }
#ccp-idle-box {
  background: var(--c-surface);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(10, 16, 24, .45);
  padding: 26px 30px;
  width: min(380px, 100%);
  text-align: center;
}
#ccp-idle-icon { display: none; }
#ccp-idle-title { font-size: 18px; font-weight: 700; }
#ccp-idle-msg { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 4px; }
#ccp-idle-countdown {
  font-size: 36px;
  font-weight: 800;
  color: var(--c-red);
  font-variant-numeric: tabular-nums;
  margin: 8px 0 16px;
}
#ccp-idle-stay {
  width: 100%;
  height: 40px;
  background: var(--c-primary);
  border: none;
  border-radius: var(--r);
  color: #fff;
  font-size: var(--fs);
  font-weight: 600;
  cursor: pointer;
}
#ccp-idle-stay:hover { background: var(--c-primary-dark); }
#ccp-idle-logout-now {
  width: 100%;
  margin-top: 8px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
#ccp-idle-logout-now:hover { background: var(--c-zebra); color: var(--c-red); }

/* ==================== 25 DASHBOARD POLISH ============================== */
.ccp-dash { display: flex; flex-direction: column; gap: 14px; }
.ccp-dash__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 4px 0 -6px;
}
/* hero: copy + actions left, meta stats right */
.ccp-dash-hero { justify-content: space-between; margin-bottom: 0; }
.ccp-dash-hero__copy { max-width: 640px; min-width: 0; }
.ccp-dash-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ccp-dash-hero__meta {
  display: grid;
  gap: 7px;
  min-width: 300px;
  padding-left: 20px;
  border-left: 1px solid var(--c-border-soft);
}
.ccp-dash-hero__stat { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-sm); }
.ccp-dash-hero__label { color: var(--c-muted); }
.ccp-dash-hero__value { font-weight: 700; white-space: nowrap; }
.ccp-dash-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fffaf0;
  border: 1px solid var(--c-amber-soft);
  border-left: 3px solid var(--c-amber);
  border-radius: var(--r);
  padding: 10px 14px;
}
.ccp-dash-alert__title { font-weight: 700; }
.ccp-dash-alert__desc { font-size: var(--fs-sm); color: var(--c-muted); }
/* KPI accent variants + value tones */
.ccp-kpi-card--sell   { border-left: 3px solid var(--c-red); }
.ccp-kpi-card--buy    { border-left: 3px solid var(--c-green); }
.ccp-kpi-card--profit { border-left: 3px solid var(--c-purple); }
.ccp-kpi-card--vault  { border-left: 3px solid var(--c-primary); }
.ccp-kpi-card--tx     { border-left: 3px solid var(--c-border-strong, var(--c-border)); }
.ccp-kpi-card__value--success { color: var(--c-green); }
.ccp-kpi-card__value--profit { color: var(--c-purple); }
.ccp-kpi-card__value--danger { color: var(--c-red); }
.ccp-kpi-card__value--muted { color: var(--c-muted); }
/* generic cards on the dashboard get inner padding + calm headings */
.card { padding: var(--pad-card); }
.card h3 { font-size: var(--fs-lg); margin: 0 0 8px; }
.card h4 { font-size: var(--fs); margin: 0 0 6px; }
.ccp-exposure { display: flex; flex-wrap: wrap; gap: 6px; }
/* recent transactions panel */
.rtxn-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rtxn-title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.rtxn-viewall { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.rtxn-wrap { overflow-x: auto; border-radius: var(--r); }
.rtxn-th-r, .rtxn-amt { text-align: right; }
.rtxn-ref { font-weight: 700; white-space: nowrap; }
.rtxn-date, .rtxn-ccy { white-space: nowrap; }
.rtxn-sub { color: var(--c-muted); }
.rtxn-bdg {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-s);
  padding: 2px 8px;
  white-space: nowrap;
}
.badge-buy { background: var(--c-green-tint); color: var(--c-green); }
.badge-sell { background: #fdeceb; color: var(--c-red); }
.rtxn-foot { margin-top: 8px; }
.rtxn-newbtn { font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 900px) {
  .ccp-dash-hero__meta { border-left: 0; padding-left: 0; min-width: 0; }
}

/* =========================== 23 PRINT ================================== */
@media print {
  .main-header.ccp-app-header, .ccp-subnav, .bd-footer,
  .trd-savebar, .adj-savebar, .quot2-savebar, .quot-sticky-footer,
  .trd-toast-wrap, .adj-toast-wrap, .ccp-page-header__actions { display: none !important; }
  body { background: #fff; }
  .dt-main, .ccp-main { max-width: none; padding: 0; }
  .card, .trd-card, .adj-card, .vch-card, .qsect { box-shadow: none; }
}