/* ================================================================
   Abzorb CRM — shared typography.
   ONLY two fonts are used across the record pages:
     • ITC Avant Garde Gothic — display (titles, tabs, KPI figures, table body)
     • Nunito                 — base UI text, labels, column headers
   Plus Jakarta Sans is fully retired.
   Linked into every page AFTER its inline <style> so equal-specificity
   rules win the cascade. Edit here once → every page updates.
   ================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap");
@font-face{
  font-family:"ITC Avant Garde Gothic";
  src:url("assets/itc_avant_garde_gothc_bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:"ITC Avant Garde Gothic";
  src:url("assets/itc_avant_garde_gothic_med.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:"ITC Avant Garde Gothic";
  src:url("assets/itc_avant_garde_gothic_book.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:block;
}

/* Base UI font → Nunito (replaces Plus Jakarta Sans everywhere it was inherited) */
body,
input,
select,
textarea,
button{
  font-family:"Nunito",system-ui,sans-serif;
}

/* ---------------------------------------------------------------
   FORM FIELDS — Nunito everywhere (inputs, selects, textareas).
   Passive / placeholder state = Nunito Regular (400);
   populated state           = Nunito SemiBold (600).
   Field SIZES stay with each field's own rule — only family/weight
   are set here. !important because several modals inject their CSS
   at runtime (after this sheet).
   --------------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select,
textarea{
  font-family:"Nunito",system-ui,sans-serif !important;
  font-weight:400 !important;
}
input:not([type=checkbox]):not([type=radio]):not([type=range])::placeholder,
textarea::placeholder{
  font-family:"Nunito",system-ui,sans-serif !important;
  font-weight:400 !important;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(:placeholder-shown),
textarea:not(:placeholder-shown),
select{
  font-weight:600 !important;
}
/* a select still showing its "Select…" / "All" placeholder option reads passive */
select:has(option[value=""]:checked),
select:has(option[value="all"]:checked),
select:has(option[value="All"]:checked){
  font-weight:400 !important;
}

/* Page title (customer name), card titles, section/table titles, modal titles */
.cname h1,
.card .ch h3,
.sectoolbar h2,
.sumtitle,
.tkhead h2{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif;
  font-weight:700;
}
/* Modal titles — ITC 16px / 700 (ALL modal-header variants, every page) */
.tkhead h2,
.mtop h2,
.ptmhd h3,
.mphd h3,
.vtmhead h2{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif;
  font-size:16px;
  font-weight:700;
}

/* Modal subtitle (customer / company name) — ITC 500, 14px (all variants) */
.tkhead .tksub,
.mtop p,
.ptmhd .sub,
.mphd .sub,
.vtmhead .vtsub,
.tksub,.mtop .sub,.mphd .tksub,.ptmhd .tksub,
.capzmodal .tksub,#ddSetupOv .tksub,#bqOv .tksub{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:#8E909A !important;
}

/* KPI tile titles — ITC 700, 14px */
.kpi .lbl{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif;
  font-weight:700;
  font-size:14px;
}

/* KPI figures (headline value) — ITC Medium (500) */
.kpi .val{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif;
  font-weight:500;
}

/* Company Details field list — labels Nunito 12px bold, content 12px medium */
.frow .k{
  font-family:"Nunito",system-ui,sans-serif;
  font-size:12px;
  font-weight:700;
  color:#373745;
}
.frow .v{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  color:#373745;
}

/* Primary Contact (Home Dashboard) + Invoice Contact (Invoices) phone/email lines
   share the Company Details value styling exactly. */
.cinfo a,.cinfo>span,.fccard .fcline{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
}

/* Buttons with text — ITC Avant Garde Gothic 12px Medium (500) */
.btn,
.fbtn,
.vubtn,
.bulkbtn,
.repbtn,
.mbtn,
.tknext,
.entbtn,
.edit,
/* every modal button (footers, ghost/cancel, primary) */
.tkov button,
.tkfoot button,
.tkfoot .btn,
.tkov .btn{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:500 !important;
}
/* keep modal close-button icon sizing untouched (icon-only, no text) */
.tkclose{font-size:0 !important;}

/* Main tabs + 2nd rail (sub-tabs) — ITC Medium (500) */
.tab,
.subtab{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif;
  font-weight:500;
  font-size:12px;
}
.subtab.active{
  font-weight:500;
}

/* Tables — ITC font throughout; body cells 12px, all text weight 500 */
.table,
.dtable,
.sumtbl{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif;
}
.table tbody td,
.dtable tbody td,
.sumtbl tbody td{
  font-size:12px;
}
.table tbody td,
.dtable tbody td,
.sumtbl tbody td,
.table tbody td *,
.dtable tbody td *,
.sumtbl tbody td *{
  font-weight:500 !important;
}
/* Column titles (table headers) — Nunito 10px Bold #373745 on #F1F3F5, UPPERCASE.
   Applies to page tables AND tables inside modals/panels. */
.table thead th,
.dtable thead th,
.dtable th,
.sumtbl thead th,
.dlhtbl thead th,
.hxtbl thead th,
.tkov table thead th,
.hxov table thead th,
.vtov table thead th{
  font-family:"Nunito",system-ui,sans-serif !important;
  font-size:10px !important;
  text-transform:uppercase;
  color:#373745 !important;
  background:#F1F3F5 !important;
}
.table thead th,
.dtable thead th,
.dtable th,
.sumtbl thead th,
.dlhtbl thead th,
.hxtbl thead th,
.tkov table thead th,
.hxov table thead th,
.vtov table thead th,
.table thead th *,
.dtable thead th *,
.sumtbl thead th *,
.dlhtbl thead th *,
.hxtbl thead th *,
.tkov table thead th *,
.hxov table thead th *{
  font-weight:700 !important;
  color:#373745 !important;
}
.table thead th.sortable:hover,
.table thead th.sorted{color:#373745 !important;}
/* Dark mode keeps its own header band (must be !important to beat the block above) */
html.dark .table thead th,
html.dark .dtable thead th,
html.dark .dtable th,
html.dark .sumtbl thead th,
html.dark .asttbl th,
html.dark .dlhtbl thead th,
html.dark .hxtbl thead th,
html.dark .tkov table thead th,
html.dark .hxov table thead th,
html.dark .vtov table thead th,
html.dark thead th{
  background:#222130 !important;
  color:#8E9099 !important;
}
/* catch-all: every column-title band in dark mode is #222130 (incl. div-based header rows) */
html.dark th,
html.dark .tutable th,
html.dark .vtatbl th,
html.dark .asttbl th,
html.dark .mptable th,
html.dark .ftptable th,
html.dark .dpaov thead th,
html.dark .asghead,
html.dark .filehead,
html.dark .thead{
  background:#222130 !important;
}
html.dark .table thead th *,
html.dark .dtable thead th *,
html.dark .sumtbl thead th *,
html.dark .dlhtbl thead th *,
html.dark .hxtbl thead th *,
html.dark .tkov table thead th *,
html.dark .hxov table thead th *,
html.dark .table thead th.sortable:hover,html.dark .table thead th.sorted{color:#8E9099 !important;}

/* Zebra striping — even data rows tinted #F9FAFB (matches the Invoices ledger).
   Wrapped in :where() for ZERO specificity so every page's own row rules —
   hover, .selected tint, .row-payment/.row-credit type-tints, sticky first
   column — always override it. Edit here once → every table page updates. */
:where(.table, .tutable, .dtable) tbody tr:nth-child(even){
  background:#F9FAFB;
}
/* Checkboxes (shared, LOCKED) — one look everywhere: 16px 5px-radius box,
   1px #D0D4D9 border, cyan #009CC7 when checked with a WHITE tick. Custom-drawn
   (appearance:none) so the tick never inherits the browser's dark glyph in dark
   mode. Toggle switches hide their own input, so they are unaffected. */
input[type=checkbox]:not([hidden]){
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex:0 0 auto;margin:0;
  border:1px solid #D0D4D9;border-radius:5px;background:#fff;
  position:relative;cursor:pointer;
}
input[type=checkbox]:not([hidden]):checked{background:#009CC7;border-color:#009CC7;}
input[type=checkbox]:not([hidden]):checked::after{
  content:"";position:absolute;left:50%;top:50%;width:4.5px;height:8.5px;
  border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-67%) rotate(45deg);
}
input[type=checkbox]:not([hidden]):focus-visible{outline:none;border-color:#009CC7;box-shadow:0 0 0 3px rgba(0,168,225,.15);}
html.dark input[type=checkbox]:not([hidden]){background:#50505D;border-color:#2a3242;}
html.dark input[type=checkbox]:not([hidden]):checked{background:#009CC7;border-color:#009CC7;}
/* toggle switches keep their visually-hidden input */
.ipsw input[type=checkbox],.astoggle input[type=checkbox],.switch input[type=checkbox],
html.dark .ipsw input[type=checkbox],html.dark .astoggle input[type=checkbox],html.dark .switch input[type=checkbox]{
  appearance:none;-webkit-appearance:none;position:absolute;opacity:0;width:0;height:0;margin:0;border:0;background:none;
}
.ipsw input[type=checkbox]:checked::after,.astoggle input[type=checkbox]:checked::after,.switch input[type=checkbox]:checked::after{content:none;}

/* List-count pill next to every table title — identical on every page.
   Connections' pill lives INSIDE the .ch h3 (so it inherited ITC Bold 14px);
   these rules pin the Nunito 12/700 grey chip used everywhere else. */
.sectoolbar .scount,.tcount,.card .ch h3 .tcount,.card .ch h3 .scount{
  font-family:"Nunito",system-ui,sans-serif !important;
  font-size:12px !important;font-weight:700 !important;letter-spacing:0 !important;
  color:#373745;background:var(--fill,#f1f3f5);
  padding:3px 10px;border-radius:999px;margin:0 !important;
  line-height:1.5;text-transform:none;
  font-variant-numeric:tabular-nums;
}
/* Connections' pill sits inside the .ch h3 flex row (gap:9px) — match the
   10px gap the .sectoolbar pages use, and never inherit the h3's ITC 14px. */
.card .ch h3{gap:10px}
/* dark mode counterpart (required — the light block above sets colour) */
html.dark .sectoolbar .scount,html.dark .tcount,html.dark .scount,
html.dark .card .ch h3 .tcount,html.dark .card .ch h3 .scount{
  background:#222130 !important;color:#8E9099 !important;
}

/* ----------------------------------------------------------------
   CHECKBOX LABELS (project-wide) — ITC Avant Garde Gothic Medium,
   12px, dark ink, with a consistent 12px gap between box and text.
   Covers every checkbox-label pattern in the app: .ascheck (Set
   Account Status), .echk (contact / address / modal check rows),
   .chk .ct (report + filter check cards), the Itemised Usage
   category menu, and the Direct Debit "Upload details…" row.
   Pages carry their own inline rules, so these need !important.
   ---------------------------------------------------------------- */
.ascheck,.ascheck>span,
.echk,.echk>span,
.chk .ct,
.iucatmenu label,.iucatmenu label>span,
.frow.ddrow>.k{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:500 !important;
  color:var(--ink,#373745) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
.ascheck,.echk,.iucatmenu label{display:flex !important;align-items:center !important;column-gap:12px !important;}
html.dark .ascheck,html.dark .ascheck>span,
html.dark .echk,html.dark .echk>span,
html.dark .chk .ct,
html.dark .iucatmenu label,html.dark .iucatmenu label>span,
html.dark .frow.ddrow>.k{color:var(--ink,#e6e6ee) !important;}

/* Left nav — ITC Avant Garde Gothic Medium (500) */.side .nav a{
  font-family:"ITC Avant Garde Gothic",system-ui,sans-serif !important;
  font-weight:500 !important;
}