/* =====================================================================
   Asseta — Data Connections · Module layout + AG Grid theme
   Page-level layout of the module (header, tabs, toolbar) and the AG Grid
   Quartz-theme overrides that map it onto Asseta. NO app shell here — the
   module mounts into your own shell (or the neutral preview frame).
   ===================================================================== */
* { box-sizing: border-box; }
/* form controls don't inherit font-family by default — force Inter Tight everywhere (incl. AG Grid's native select/inputs) */
button, input, select, textarea { font-family: inherit; }
/* minimalist scrollbar everywhere (Figma scroll-bar: navy@20%, 8px rounded thumb, transparent track) */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }
body { margin:0; font-family: var(--font); color:var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; }

/* preview frame: captured sidebar (full height) + main (captured top bar + module) */
.app { min-height: 100vh; display: flex; align-items: stretch; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; }

/* the module is a self-contained block; mount #dc-module anywhere */
.dc-module { padding:var(--sp-20) var(--sp-32) var(--sp-40); }

.dc-breadcrumb { font:var(--fw-regular) var(--fs-12) var(--font); color:var(--text-primary); display: flex; align-items: center; gap:var(--sp-8); }
.dc-breadcrumb a { color:var(--text-primary); text-decoration: none; }
.dc-breadcrumb a.current { color: var(--accent); }
.dc-breadcrumb .sep { color: var(--border-strong); }

.dc-pagehead { display: flex; align-items: center; justify-content: space-between; margin:var(--sp-6) 0 var(--sp-4); }
.dc-pagetitle { font:var(--fw-medium) var(--fs-28) var(--font); letter-spacing: normal; color:var(--text-primary); margin:0; }

.dc-btn-primary {
  display: inline-flex; align-items: center; gap:var(--sp-8); height: 48px; padding:0 var(--sp-20);
  background: var(--pill); border: 0; border-radius: var(--r-pill);
  font:var(--fw-medium) var(--fs-14) var(--font); color:var(--text-primary); cursor: pointer; transition: background .2s;
}
.dc-btn-primary:hover { background: var(--white); }

/* toolbar: search + right-side icon actions */
.dc-toolbar { display: flex; align-items: center; gap:var(--sp-12); }
.dc-toolbar-search {
  display: flex; align-items: center; gap:var(--sp-8); width: 320px; height: 40px; padding:0 var(--sp-16);
  background: var(--pill); border-radius: var(--r-pill); color:var(--text-secondary);
}
.dc-toolbar-search input { flex: 1; border: 0; background: none; outline: 0; color:var(--text-primary); font:var(--fw-medium) var(--fs-14) var(--font); }
.dc-toolbar-search input::placeholder { color:var(--text-secondary); }
.dc-toolbar-search svg { color:var(--text-secondary); flex: 0 0 18px; }

/* ===================================================================
   AG Grid — Quartz theme mapped to Asseta (header 38px, capitalize,
   no column separators, native row hover, 8px card border)
   =================================================================== */
/* NB: selector specificity (.ag-theme-quartz.dc-grid = 0,2,0) must beat AG Grid v32's
   runtime-injected theme (.ag-theme-quartz = 0,1,0), else the Quartz defaults win. */
.ag-theme-quartz.dc-grid {
  --ag-font-family: var(--font); --ag-font-size:var(--fs-14);
  --ag-foreground-color: var(--navy); --ag-data-color: var(--navy); --ag-header-foreground-color: var(--navy);
  --ag-header-background-color: var(--grid-header); --ag-background-color: var(--grid-row); --ag-odd-row-background-color: var(--grid-row);
  --ag-row-hover-color: var(--row-hover);
  --ag-border-color: var(--border); --ag-row-border-color: var(--border);  /* canonical navy@12% — match header + the rest of the UI */
  --ag-header-column-resize-handle-display: none; --ag-header-column-border: none;
  --ag-row-height: var(--row-h); --ag-header-height: var(--header-h); --ag-cell-horizontal-padding:var(--sp-24);
  --ag-borders: solid 1px; --ag-wrapper-border-radius:var(--r-8);
  --ag-selected-row-background-color: transparent; --ag-range-selection-border-color: transparent;
  --ag-input-focus-border-color: var(--accent); --ag-checkbox-checked-color: var(--accent);
  margin-top:var(--sp-12); width: 100%;
}
.dc-grid .ag-header { border-bottom: 1px solid var(--border); }
.dc-grid .ag-header-cell-text { font:var(--fw-medium) var(--fs-12) var(--font); color:var(--text-primary); text-transform: capitalize; }
.dc-grid .ag-header-cell::before, .dc-grid .ag-header-cell::after,
.dc-grid .ag-header-cell-resize { display: none !important; background: none !important; }
.dc-grid .ag-header-cell { border-left: 0 !important; border-right: 0 !important; }
/* reclaim header right padding so the hover funnel+dots fit after the title without truncating it */
.ag-theme-quartz.dc-grid .ag-header-cell { padding-right: 0; }
.dc-grid .ag-cell { display: flex; align-items: center; }
.dc-grid .ag-cell-value { width: 100%; }
.dc-grid .ag-pinned-right-cols-container .ag-cell, .dc-grid .ag-pinned-right-header { border-left: 0 !important; }
.dc-grid .coa-action-cell { padding:0; }
/* row hover — explicit so it lands on the whole row (center + pinned), like the snapshot */
.ag-theme-quartz.dc-grid .ag-row.ag-row-hover { background-color: var(--row-hover) !important; }
/* whole row is clickable (opens the account) — pointer affordance + brief pressed effect */
.ag-theme-quartz.dc-grid .ag-row { cursor: pointer; }
.ag-theme-quartz.dc-grid .ag-row:active { background-color: var(--hover-strong) !important; }
/* AG defaults its inputs to the agGridQuartz icon-font; keep them on Inter Tight (checkbox glyph is our own SVG bg, so unaffected) */
.ag-theme-quartz.dc-grid input { font-family: var(--font); }
.dc-grid .ag-paging-panel { height: var(--header-h); min-height: var(--header-h); color:var(--text-secondary); font:var(--fw-medium) var(--fs-12) var(--font); }
.dc-grid .ag-paging-panel, .dc-grid .ag-paging-panel * { font-size: var(--fs-12); }  /* match the table header (12px medium); cascade to summary / page-size select */