/* OWNER CONSOLE — additions on top of styles.css for owner.html and owner/*.js (same shell, palette and type). */
/* ---------- Tab colours and badges (owner.html, owner/core.js) ---------- */
body[data-tab=dashboard]{--page:var(--c-overview);--page2:#c04cf0}
body[data-tab=customers]{--page:var(--c-sscc);--page2:#45c4f0}
body[data-tab=billing]{--page:var(--c-funding);--page2:#ff8a5b}
body[data-tab=inquiries]{--page:var(--c-msf);--page2:#7fdcb0}
body[data-tab=system]{--page:var(--c-contracts);--page2:#b388ff}
body[data-tab=settings]{--page:var(--c-settings);--page2:#d8b4fe}
.nav-badge.red{display:grid;background:#e5484d;color:#fff}
.nav-badge.amber{display:grid;background:#f5a524;color:#2b1a00}
.nav-badge.blue{display:grid;background:#3b82f6;color:#fff}
/* ---------- Page header, prototype note, grids (owner/core.js) ---------- */
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--page) 75%,#000)}
.lede{color:var(--muted);font-size:var(--text-sm);max-width:70ch;margin:0}
.proto-note{
  flex:0 0 300px;
  background:var(--amber-bg);
  border:1px solid var(--amber-bd);
  color:#6b4300;
  border-radius:var(--radius);
  padding:var(--space-3) var(--space-4);
  font-size:12.5px;
  line-height:1.4;
}
.proto-note b{display:block;font-weight:800;margin-bottom:2px}
.grid.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid.g2-wide{grid-template-columns:1.2fr 1fr}
.kpi-row .card.red{border-top-color:var(--red)}
.kpi-row .card.green{border-top-color:var(--green)}
.kpi-row .card.blue{border-top-color:var(--blue)}
.card.narrow{max-width:720px}
.card.tight.red .kpi-value{color:var(--red)}
/* ---------- Dashboard: to-do list (owner/dashboard.js) ---------- */
ul.todo{list-style:none;margin:0;padding:0}
ul.todo li{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-4);
  padding:10px 0 10px 14px;
  border-bottom:1px solid var(--divider);
  font-size:var(--text-sm);
  line-height:1.45;
  position:relative;
}
ul.todo li::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--border)}
ul.todo li.red::before{background:var(--red)}
ul.todo li.amber::before{background:var(--amber)}
ul.todo li.blue::before{background:var(--blue)}
ul.todo li.green::before{background:var(--green)}
ul.todo li.grey::before{background:var(--faint)}
ul.todo li:last-child{border-bottom:0}
ul.todo .btn-sm{flex:0 0 auto}
/* ---------- Plain tables and event lists (dashboard, billing, system) ---------- */
.plain-tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.plain-tbl td{padding:9px 6px;border-bottom:1px solid var(--divider);vertical-align:top}
.plain-tbl tr:last-child td{border-bottom:0}
.plain-tbl td.n,.plain-tbl td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.plain-tbl td.nw{white-space:nowrap}
ul.events{list-style:none;margin:0;padding:0;font-size:var(--text-sm)}
ul.events li{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:var(--space-3);
  padding:8px 0;
  border-bottom:1px solid var(--divider);
  line-height:1.4;
}
ul.events li:last-child{border-bottom:0}
ul.events time{color:var(--faint);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
ul.events li.warn span::before,ul.events li.alert span::before,ul.events li.ok span::before{
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:1px;
}
ul.events li.ok span::before{background:var(--green)}
ul.events li.warn span::before{background:var(--amber)}
ul.events li.alert span::before{background:var(--red)}
ul.events.big li{grid-template-columns:170px 1fr;padding:10px 0}
/* ---------- Customer record: fields, actions, notes (owner/customers.js) ---------- */
.fgrid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3) var(--space-5);margin:var(--space-3) 0}
.fgrid4 .f span,.fgrid .f span{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:2px;
}
.fgrid4 .f b,.fgrid .f b{font-weight:600;font-size:var(--text-sm)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-3)}
.btn-sm.danger{border-color:var(--red);color:var(--red)}
.btn-sm.danger:hover{background:var(--red);color:#fff}
textarea.notes{
  width:100%;
  min-height:90px;
  font:inherit;
  font-size:var(--text-sm);
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  resize:vertical;
}
/* ---------- Customer list: search, filter, table (owner/customers.js) ---------- */
input.search{font:inherit;font-size:var(--text-sm);padding:8px 12px;border:1px solid var(--border);border-radius:999px;min-width:260px}
select[data-filter]{
  font:inherit;
  font-size:var(--text-sm);
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
}
table.cust{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
table.cust th{
  text-align:left;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 8px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
table.cust td{padding:10px 8px;border-bottom:1px solid var(--divider);vertical-align:top}
table.cust tr:hover td{background:var(--surface-2)}
table.cust td.n{text-align:right;white-space:nowrap}
table.cust td.nw{white-space:nowrap}
/* ---------- Billing rules, inquiry journey, sub-tab badges (owner/billing.js, owner/inquiries.js) ---------- */
ol.rules,ol.journey{margin:var(--space-2) 0 0;padding-left:20px;font-size:var(--text-sm);line-height:1.5}
ol.rules li,ol.journey li{margin-bottom:6px}
td.msg{max-width:480px;white-space:normal;color:var(--muted)}
.sub-badge{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:var(--blue-bg);
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  margin-left:4px;
}
/* ---------- Settings ticks, notes, footer (owner/settings.js) ---------- */
.tick{color:var(--green);font-weight:800;margin-right:6px}
.note.blue,.note.amber{display:block;margin:var(--space-3) 0}
.foot{margin-top:var(--space-6);color:var(--muted)}
.note.blue::before,.note.amber::before{content:none}