/* ============================================================
   CSP Unified Portal — shared.css (v2)
   Design system aligned with the redesigned home page.
   All pre-existing class names preserved so module pages
   inherit the new look without per-page edits.
   ============================================================ */

/* --- Custom Properties ------------------------------------ */
:root {
  /* CSP palette — aligned with portal v2 design language.
     Brand spec #0B5EAE / #1A6EC0 still available via --csp-brand-blue
     for materials that must match printed/external brand standards. */
  --csp-blue: #2563eb;
  --csp-blue-2: #1d4ed8;
  --csp-brand-blue: #0b5eae;
  --csp-brand-blue-2: #1a6ec0;
  --csp-charcoal: #0f172a;
  --csp-gray: #475569;
  --csp-line: #e4e9f2;
  --csp-border: #e4e9f2; /* alias used by per-module styles */
  --csp-white: #ffffff;
  --csp-ice: #f8fafc;
  --csp-success: #16a34a;
  --csp-warning: #d97706;
  --csp-danger:  #dc2626;

  /* Semantic status tokens — financial figures and report annotations.
     Distinct from the UI alert colors above (--csp-success / --csp-warning /
     --csp-danger, which color pills, banners, and status dots): use these
     for positive/negative amounts and quiet warnings on data surfaces.
     Values match pages/ledger.html (the brand-faithful report palette);
     --csp-neg is the style guide's negative red (#A94442). */
  --csp-pos:  #15724a;
  --csp-neg:  #a94442;
  --csp-warn: #8a5a00;

  /* Portal v2 design tokens */
  --bg-page:        #f0f2f5;
  --bg-card:        #ffffff;
  --border-card:    #e4e9f2;
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  --csp-blue-deep:  #0c2b6a;
  --csp-blue-mid:   #1848a0;
  --csp-blue-base:  #0d2d6e;

  --accent-ops:     #2563eb;
  --accent-pay:     #16a34a;
  --accent-hr:      #d97706;

  --shadow-card:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-hover:   0 14px 30px -12px rgba(15, 23, 42, 0.18), 0 4px 8px rgba(15, 23, 42, 0.05);
  --radius-card:    13px;
  --radius-pill:    999px;
  --radius-input:   10px;

  /* Legacy alias used by some modules */
  --shadow: var(--shadow-card);
}

/* --- Report surface tokens --------------------------------
   The sanctioned palette for report-style / financial surfaces
   (general ledger, statements, financial packs). Promoted from
   pages/ledger.html's scoped --gl-* set — ledger.html is the
   reference implementation. Per the CSP Style Guide, brand blue
   (#0B5EAE) is REQUIRED on report/financial surfaces; future
   report-style modules (finance, AP, statements) should consume
   these tokens instead of hand-rolling their own hex values.
   ----------------------------------------------------------- */
:root {
  --csp-report-blue:     #0b5eae;   /* CSP primary (style-guide spec) */
  --csp-report-blue-2:   #1a6ec0;   /* CSP secondary */
  --csp-report-blue-ink: #08487f;   /* deep brand-blue ink (hover/active) */
  --csp-report-navy:     #0c2b6a;   /* portal brand-mark gradient top */
  --csp-report-navy-2:   #0a2350;
  --csp-report-ink:      #231f20;   /* charcoal body (style-guide spec) */
  --csp-report-ink-2:    #4a4750;
  --csp-report-gray:     #6b7280;   /* secondary metadata */
  --csp-report-faint:    #9aa1ad;
  --csp-report-line:     #e6e9ef;
  --csp-report-line-2:   #eef1f6;
  --csp-report-canvas:   #f4f6fa;
  --csp-report-surface:  #ffffff;
  --csp-report-wash:     #eef4fb;   /* brand-blue wash for subtotals/active */
  --csp-report-pos:      #15724a;
  --csp-report-pos-bg:   #e7f3ec;
  --csp-report-neg:      #a94442;   /* style-guide negative red */
  --csp-report-neg-bg:   #fbecea;
  --csp-report-warn:     #8a5a00;
  --csp-report-warn-bg:  #fbf2dc;
  --csp-report-warn-bd:  #ecd9a6;
}

/* --- Reset ------------------------------------------------ */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  color: var(--text-primary);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Calibri, Arial, sans-serif;
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent-ops);
}

/* --- Top Rail (legacy — now invisible) -------------------- */
.top-rail {
  height: 0;
  background: transparent;
}

/* --- Navigation Bar (rendered by nav.js) ------------------ */
.nav-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 28px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-card);
  color: var(--text-primary);
  font-size: 0.92rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav-bar .nav-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.nav-bar a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.nav-bar a:hover {
  color: var(--text-primary);
}

.nav-bar .nav-link {
  display: none; /* module links removed in v2 — home page is the launcher */
}

.nav-bar .nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  flex-shrink: 0;
}

.nav-bar .nav-logo .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--csp-blue-deep), var(--csp-blue-mid));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.nav-bar .nav-logo .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.nav-bar .nav-logo .brand-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.nav-bar .nav-logo .brand-sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.nav-bar .nav-logo img {
  display: none; /* logo replaced by gradient brand mark */
}

.nav-bar .nav-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.86rem;
  flex-shrink: 0;
}

.nav-bar .nav-username {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.nav-bar .nav-username .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--csp-blue-deep), var(--csp-blue-mid));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
}

.nav-bar .nav-user button,
.nav-bar .nav-logout {
  padding: 8px 16px;
  font-size: 0.86rem;
  background: #fff;
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nav-bar .nav-user button:hover,
.nav-bar .nav-logout:hover {
  border-color: #cbd5e1;
  color: var(--text-primary);
  background: var(--csp-ice);
}

/* --- Page Wrap -------------------------------------------- */
.page-wrap {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 40px;
}

/* --- Typography ------------------------------------------- */
h1, h2, h3 {
  margin: 0;
  color: var(--text-primary);
}

h1 {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: none;
}

h2 {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-primary);
}

h3 {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

.eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}

/* --- Hero ------------------------------------------------- */
.hero {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  margin-bottom: 24px;
}

.hero h1 + p,
.hero p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Brand Row -------------------------------------------- */
.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.brand-row img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* --- Card ------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: #d8e0ee;
}

.card h3 {
  font-size: 1.05rem;
  text-transform: none;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: 0;
}

.card p {
  margin: 0 0 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  flex: 1;
}

/* --- Card Grid -------------------------------------------- */
.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

/* --- Dropzone --------------------------------------------- */
.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 220px;
  padding: 24px;
  border: 2px dashed rgba(37, 99, 235, 0.4);
  border-radius: var(--radius-card);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0.01)),
    var(--csp-ice);
  text-align: center;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.dropzone.is-active {
  border-color: var(--accent-ops);
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.04)),
    var(--bg-card);
}

.dropzone.has-file {
  border-style: solid;
  border-color: var(--csp-success);
}

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone-title {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  text-transform: none;
  letter-spacing: 0.01em;
}

.dropzone-note {
  margin-top: 6px;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 0.9rem;
}

.file-name {
  margin-top: 10px;
  color: var(--accent-ops);
  font-weight: 700;
  word-break: break-all;
}

/* --- Status ----------------------------------------------- */
.status {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.status.hidden {
  display: none;
}

.status.success {
  border-left: 4px solid var(--csp-success);
}

.status.error {
  border-left: 4px solid var(--csp-danger);
}

.status.warning {
  border-left: 4px solid var(--csp-warning);
}

.status-title {
  margin: 0 0 6px;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
}

.status-body {
  margin: 0;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--text-secondary);
}

/* --- Buttons ---------------------------------------------- */
.btn-primary {
  display: inline-block;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--csp-blue-deep), var(--csp-blue-mid));
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 6px 16px -8px rgba(12, 43, 106, 0.55);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(12, 43, 106, 0.65);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-secondary:hover {
  border-color: #cbd5e1;
  color: var(--text-primary);
  background: var(--csp-ice);
}

/* --- Column Table ----------------------------------------- */
.col-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.col-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--csp-ice);
  border-bottom: 1px solid var(--border-card);
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.col-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-card);
}

.col-table tr:last-child td {
  border-bottom: 0;
}

.col-table .mapped {
  color: var(--csp-success);
  font-weight: 600;
}

.col-table .unmapped {
  color: var(--text-muted);
  font-style: italic;
}

/* --- Toggle Row ------------------------------------------- */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid var(--accent-ops);
  background: rgba(37, 99, 235, 0.06);
  font-size: 0.94rem;
  color: var(--text-secondary);
}

.toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-ops);
}

/* --- Info Grid & Cards ------------------------------------ */
.info-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
}

.info-card {
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.info-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.info-card p {
  margin: 0;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* --- Meta Strip ------------------------------------------- */
.meta-strip {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-card);
}

.meta-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.meta-item strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* --- Form Fields ------------------------------------------ */
.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-input);
  font: inherit;
  font-size: 0.92rem;
  color: var(--text-primary);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-ops);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* --- Divider ---------------------------------------------- */
.divider {
  height: 1px;
  background: var(--border-card);
  margin: 18px 0;
}

/* --- Footer ----------------------------------------------- */
.footer {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border-card);
  font-size: 0.84rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Login Card ------------------------------------------- */
.login-card {
  max-width: 420px;
  margin: 80px auto 0;
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover);
}

.login-card h1 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin-bottom: 4px;
}

.login-card .field {
  margin-top: 16px;
}

.login-card .btn-primary {
  width: 100%;
  margin-top: 22px;
}

.login-card .brand-row img {
  width: 38px;
  height: 38px;
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 900px) {
  .card-grid,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .nav-bar {
    padding: 10px 18px;
    gap: 10px;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .nav-bar {
    padding: 10px 14px;
  }

  .nav-bar .nav-logo .brand-sub {
    display: none;
  }

  .nav-bar .nav-username {
    padding: 5px 10px 5px 5px;
  }

  .nav-bar .nav-username .uname-text {
    display: none;
  }

  .page-wrap {
    width: calc(100% - 16px);
    padding: 16px 0 24px;
  }

  .hero {
    padding: 18px 16px;
    margin-bottom: 16px;
  }

  h1 {
    font-size: 1.6rem;
  }
}

/* --- Shared data-freshness pill ----------------------------
   One definition reused across modules (ICE, finance, analytics,
   break report, etc.). Green = current, amber = >24h stale,
   red (critical) = >7 days stale. Drive level by setting the
   modifier class on the .freshness-pill element.
   ----------------------------------------------------------- */
.freshness-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e4e9f2);
  font-size: 13px;
  line-height: 1.3;
  color: var(--csp-gray, #475569);
  white-space: nowrap;
}

.freshness-pill .freshness-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--csp-success, #16a34a);
  flex: none;
}

.freshness-pill.warning .freshness-dot {
  background: var(--csp-warning, #d97706);
}

.freshness-pill.critical .freshness-dot {
  background: var(--csp-danger, #dc2626);
}

.freshness-pill.critical {
  border-color: var(--csp-danger, #dc2626);
  color: var(--csp-danger, #dc2626);
}

.freshness-pill.warning {
  border-color: var(--csp-warning, #d97706);
}

/* ==========================================================
   CRM module — migrated-from-inline classes
   All values extracted verbatim from static inline style=""
   attributes in pages/crm.html (migration 2026-06-13).
   DO NOT alter values here without verifying against the
   original inline styles — visual parity is the hard constraint.
   ========================================================== */

/* --- Overflow wrappers ---------------------------------- */
.crm-overflow-x { overflow-x: auto; }

/* --- Muted text helpers --------------------------------- */
/* Matches: color:var(--csp-gray); font-size:0.88rem; */
.crm-text-muted-sm { color: var(--csp-gray); font-size: 0.88rem; }
/* + padding:14px */
.crm-padded { padding: 14px; }
/* Matches: color:var(--csp-gray); font-size:0.85rem; margin:0; */
.crm-text-muted-sm2 { color: var(--csp-gray); font-size: 0.85rem; margin: 0; }
/* + margin:0 0 8px 0 */
.crm-text-muted-sm2-mb { color: var(--csp-gray); font-size: 0.85rem; margin: 0 0 8px 0; }
/* Matches: font-size:0.8rem; color:var(--csp-gray); margin:0; */
.crm-text-muted-xs { font-size: 0.8rem; color: var(--csp-gray); margin: 0; }
/* Matches: color:var(--csp-gray); font-size:0.82rem; */
.crm-text-muted-xs2 { color: var(--csp-gray); font-size: 0.82rem; }
/* Matches: color:var(--csp-gray); margin:4px 0; */
.crm-loading-text { color: var(--csp-gray); margin: 4px 0; }
/* Matches: color: var(--csp-gray); padding: 12px; margin: 0; */
.crm-text-muted-padded { color: var(--csp-gray); padding: 12px; margin: 0; }
/* Matches: color:var(--csp-gray); padding:16px; */
.crm-text-muted-padded-lg { color: var(--csp-gray); padding: 16px; }
/* Matches: color:var(--csp-gray); padding:20px; text-align:center; */
.crm-empty-cell-lg { color: var(--csp-gray); padding: 20px; text-align: center; }
/* Matches: color:var(--csp-gray); */
.crm-text-gray { color: var(--csp-gray); }
/* Modifier: removes font-weight from parent muted classes */
.crm-normal-weight { font-weight: 400; }
/* Matches: font-size:0.8rem; color:var(--csp-gray); margin:10px 0 0; line-height:1.5; */
.crm-footnote { font-size: 0.8rem; color: var(--csp-gray); margin: 10px 0 0; line-height: 1.5; }

/* --- Off-brand gray #939598 (same visual as --csp-gray) - */
/* Matches: color:#939598 */
.crm-text-secondary { color: #939598; }
/* Matches: color:#939598; font-size:12px */
.crm-text-secondary-xs { color: #939598; font-size: 12px; }
/* Matches: color:#939598; font-size:11px; margin-top:8px */
.crm-text-secondary-xxs { color: #939598; font-size: 11px; }

/* --- Required-field asterisk red (#C53030) -------------- */
.crm-required { color: #C53030; }
.crm-required-bold { color: #C53030; font-weight: 600; }

/* --- Success color helpers ------------------------------ */
.crm-text-success { color: var(--csp-success); }
.crm-bg-success { background: var(--csp-success); }

/* --- Readonly / disabled input backgrounds -------------- */
/* Matches: background:var(--csp-ice); */
.crm-readonly-field { background: var(--csp-ice); }
/* Matches: background:var(--csp-ice); font-family:monospace; color:var(--csp-blue); font-weight:600; */
.crm-code-field { background: var(--csp-ice); font-family: monospace; color: var(--csp-blue); font-weight: 600; }

/* --- Table empty-state cell ----------------------------- */
/* Matches: text-align:center; color:var(--csp-gray); padding:18px; */
.crm-empty-cell { text-align: center; color: var(--csp-gray); padding: 18px; }

/* --- Button / control size variants --------------------- */
/* Matches: padding:10px 18px; font-size:0.88rem; */
.crm-btn-std { padding: 10px 18px; font-size: 0.88rem; }
/* Matches: padding:8px 14px; font-size:0.84rem; */
.crm-btn-sm { padding: 8px 14px; font-size: 0.84rem; }
/* Matches: margin-left:8px; padding:4px 8px; */
.crm-select-sm { margin-left: 8px; padding: 4px 8px; }
/* Matches: padding:4px 8px; border:1px solid var(--csp-border); border-radius:6px; font-size:0.84rem; */
.crm-select-std { padding: 4px 8px; border: 1px solid var(--csp-border); border-radius: 6px; font-size: 0.84rem; }
/* Matches: width:180px; */
.crm-select-lg { width: 180px; }
/* Matches: font-size:12px; padding:5px 14px; border-radius:4px; border:1px solid #757575; cursor:pointer; background:#fff; color:#757575; */
.crm-ignore-btn { font-size: 12px; padding: 5px 14px; border-radius: 4px; border: 1px solid #757575; cursor: pointer; background: #fff; color: #757575; }

/* --- Margin utilities ----------------------------------- */
.crm-m0 { margin: 0; }
.crm-m0-bold { margin: 0; font-weight: 600; }
.crm-m0-lh { margin: 0; line-height: 1.5; }
.crm-ml0 { margin-left: 0; }
.crm-ml8 { margin-left: 8px; }
.crm-ml12 { margin-left: 12px; }
.crm-mb8 { margin-bottom: 8px; }
.crm-mb14 { margin-bottom: 14px; }
.crm-mb16 { margin-bottom: 16px; }
.crm-mb18 { margin-bottom: 18px; }
.crm-mb20 { margin-bottom: 20px; }
.crm-mb24 { margin-bottom: 24px; }
.crm-mt8 { margin-top: 8px; }
.crm-mt12 { margin-top: 12px; }
.crm-mt24 { margin-top: 24px; }
.crm-mt28 { margin-top: 28px; }
/* Matches: margin:0 0 4px 0; */
.crm-m-tight-top { margin: 0 0 4px 0; }
/* Matches: margin:0 0 6px 0; */
.crm-m-tight-top2 { margin: 0 0 6px 0; }
/* Matches: margin-left:auto; white-space:nowrap; */
.crm-ml-auto-nowrap { margin-left: auto; white-space: nowrap; }
/* Matches: margin-left:auto; color:#231F20; font-style:italic; */
.crm-status-note { margin-left: auto; color: #231F20; font-style: italic; }

/* --- Font-size utilities -------------------------------- */
.crm-text-lg   { font-size: 1.1rem; }
.crm-text-base { font-size: 0.92rem; }
.crm-text-sm   { font-size: 0.85rem; }
.crm-text-sm-bold { font-size: 0.85rem; font-weight: 600; }
.crm-text-small { font-size: 0.84rem; }
/* Matches: font-size:0.84rem; color:var(--csp-gray); */
.crm-text-small-gray { font-size: 0.84rem; color: var(--csp-gray); }
/* Matches: font-size:0.78rem; color:var(--csp-gray); margin-bottom:4px; */
.crm-text-tiny-gray { font-size: 0.78rem; color: var(--csp-gray); margin-bottom: 4px; }
/* Matches: font-size:0.78rem; color:var(--csp-gray); margin-top:4px; */
.crm-text-tiny-gray-top { font-size: 0.78rem; color: var(--csp-gray); margin-top: 4px; }
/* Matches: font-weight:700; font-size:0.86rem; color:var(--csp-charcoal); margin-right:4px; */
.crm-label-strong { font-weight: 700; font-size: 0.86rem; color: var(--csp-charcoal); margin-right: 4px; }

/* --- Section subheadings -------------------------------- */
/* Matches: margin: 0 0 8px 0; font-size: 0.95rem; */
.crm-section-subhead { margin: 0 0 8px 0; font-size: 0.95rem; }
/* Matches: margin: 20px 0 8px 0; font-size: 0.95rem; */
.crm-section-subhead-top { margin: 20px 0 8px 0; font-size: 0.95rem; }

/* --- Width / column utilities --------------------------- */
/* Matches: width:60px; text-align:center; */
.crm-col-narrow-center { width: 60px; text-align: center; }
/* Matches: width:36px; */
.crm-col-checkbox { width: 36px; }
/* Matches: width:280px; */
.crm-col-domain { width: 280px; }
/* Matches: width:100% */
.crm-full-width { width: 100%; }
/* Matches: width:20px; height:20px; min-height:auto; */
.crm-checkbox-md { width: 20px; height: 20px; min-height: auto; }
/* Matches: min-height:100px; */
.crm-textarea-tall { min-height: 100px; }

/* --- Border + background containers -------------------- */
/* Matches: border:1px solid var(--csp-line); background:var(--csp-white); */
.crm-list-box { border: 1px solid var(--csp-line); background: var(--csp-white); }
/* Matches: border:1px solid var(--csp-line); border-radius:4px; max-height:220px; overflow-y:auto; */
.crm-event-list-box { border: 1px solid var(--csp-line); border-radius: 4px; max-height: 220px; overflow-y: auto; }

/* --- Flex layout helpers -------------------------------- */
/* Matches: display:flex; gap:8px; */
.crm-flex-gap-sm { display: flex; gap: 8px; }
/* Matches: display:flex; gap:8px; margin-top:12px; align-items:center; */
.crm-flex-row-mt12 { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
/* Matches: display:flex; align-items:center; gap:8px; */
.crm-flex-row-sm { display: flex; align-items: center; gap: 8px; }
/* Matches: display:flex; gap:12px; margin-bottom:16px; */
.crm-flex-gap-md-mb16 { display: flex; gap: 12px; margin-bottom: 16px; }
/* Matches: display:flex; justify-content:flex-end; margin-bottom:8px; */
.crm-flex-end-mb8 { display: flex; justify-content: flex-end; margin-bottom: 8px; }
/* Matches: display:flex; justify-content:flex-end; gap:10px; margin:8px 0 14px; */
.crm-flex-end-row { display: flex; justify-content: flex-end; gap: 10px; margin: 8px 0 14px; }
/* Matches: display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; */
.crm-flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
/* Matches: display:flex; align-items:center; flex-wrap:wrap; gap:8px; (hero title row) */
.crm-hero-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Matches: display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; */
.crm-flex-row-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
/* Matches: margin-top:8px;display:flex;gap:8px;flex-wrap:wrap */
.crm-flex-tags-mt { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Matches: margin-left:12px; display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; color:var(--csp-gray); cursor:pointer; user-select:none; */
.crm-filter-label { margin-left: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--csp-gray); cursor: pointer; user-select: none; }

/* --- Max-width containers ------------------------------- */
.crm-panel-sm { max-width: 440px; }
.crm-panel-md { max-width: 640px; }
.crm-panel-xl { max-width: 920px; }

/* --- Hero / page-level helpers -------------------------- */
/* Matches: margin-top:8px; line-height:1.55; max-width:680px; */
.crm-hero-desc { margin-top: 8px; line-height: 1.55; max-width: 680px; }

/* --- Grid layout ---------------------------------------- */
/* Matches: grid-template-columns: repeat(4, 1fr); margin-top: 0; margin-bottom: 24px; */
.crm-stat-grid-4 { grid-template-columns: repeat(4, 1fr); margin-top: 0; margin-bottom: 24px; }