/* ============================================================
   Risk and Compliance Suite — COMPONENT LIBRARY
   Canonical component styles. Every page consumes these classes
   verbatim. Zero hex literals — everything pulls from variables.css.
   No `:root { ... }` declarations in this file.
   ============================================================ */


/* ============================================================
   PAGE CANVAS — warm off-white (#F2F1ED) under every page,
   including standalone auth/landing/error templates that don't
   extend base.html.
   ============================================================ */
html, body {
  background: var(--bg-page) !important;
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans);
  min-height: 100vh;
}


/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.page-header .page-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.2;
}
.page-header .page-subtitle {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0;
}
.page-header .page-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--text-secondary);
}


/* ============================================================
   GENERIC CARDS
   ============================================================ */
/* Bootstrap-variable layer — override --bs-card-bg / --bs-card-cap-bg
   at the document root so EVERY .card and .card-header (canonical or
   vendor-styled) renders with our unified surface color. The literal
   surface fill below is the belt to the suspenders. */
:root,
body {
  --bs-card-bg: var(--surface-bg);
  --bs-card-cap-bg: var(--surface-bg);
}
/* Bootstrap's own border colour follows the token, so its border utilities, list groups
   and dropdowns match the cards. */
:root { --bs-border-color: var(--border-color); }
.card {
  --bs-card-bg: var(--surface-bg);
  --bs-card-cap-bg: var(--surface-bg);
  background: var(--surface-bg) !important;
  background-color: var(--surface-bg) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  margin-bottom: var(--space-6);
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card-header {
  background: var(--surface-bg) !important;
  background-color: var(--surface-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-5) var(--space-6);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text-primary) !important;
}
.card-body  {
  background: var(--surface-bg) !important;
  background-color: var(--surface-bg) !important;
  padding: var(--space-6);
}
.card-footer {
  background: var(--surface-bg) !important;
  background-color: var(--surface-bg) !important;
  border-top: 1px solid var(--border-color);
  padding: var(--space-4) var(--space-6);
}

/* Section-coloured card variants (left accent strip — flat fill, not gradient) */
.card.risk-card .card-header {
  background: var(--surface-bg) !important;
  border-left: 4px solid var(--brand-orange);
}
.card.compliance-card .card-header {
  background: var(--surface-bg) !important;
  border-left: 4px solid var(--brand-green);
}

/* When a card template uses `class="card text-white"` it was relying on a
   colored gradient background underneath (now flattened to our surface).
   Force readable text so the content doesn't disappear. */
.card.text-white,
.card .text-white,
.card.text-white *,
.card-header.text-white,
.card-header .text-white {
  color: var(--text-primary) !important;
}

/* Override Bootstrap bg-* utilities when applied to card/stat surfaces so
   a few templates that still use class="card-header bg-white" or
   class="stat-card bg-light" don't break the unified panel look. */
.card.bg-white,
.card.bg-light,
.card-header.bg-white,
.card-header.bg-light,
.card-body.bg-white,
.card-body.bg-light,
.card-footer.bg-white,
.card-footer.bg-light,
.stat-card.bg-white,
.stat-card.bg-light,
.stats-card.bg-white,
.stats-card.bg-light,
.table-card.bg-white,
.table-card.bg-light {
  background-color: var(--surface-bg) !important;
}


/* ============================================================
   STAT CARD  (canonical class: .stat-card)
   Legacy aliases: .stats-card, .risk-stats-card, .card-metric
   ============================================================ */
.stat-card,
.stats-card,
.risk-stats-card,
.card-metric {
  background: var(--surface-bg) !important;
  background-color: var(--surface-bg) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.stat-card:hover,
.stats-card:hover,
.risk-stats-card:hover,
.card-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.stat-card .stat-icon,
.stats-card .stats-icon,
.risk-stats-card .stats-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-inverse);
  flex-shrink: 0;
  background: var(--primary-gradient);
}

.stat-card .stat-content,
.stats-card .stats-content { flex: 1; min-width: 0; }

.stat-card .stat-value,
.stats-card h3,
.stats-card .stats-metric-value,
.risk-stats-card .risk-metric-value,
.card-metric h3 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.1;
}
.stat-card .stat-label,
.stats-card h6,
.stats-card .stats-metric-label,
.risk-stats-card .risk-metric-label,
.card-metric h6 {
  color: var(--text-secondary);
  margin: var(--space-1) 0 0 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Icon colour variants — driven by SEMANTIC variant class */
.stat-card.primary    .stat-icon,
.stats-card.primary   .stats-icon,
.stats-card.total     .stats-icon,
.risk-stats-card.total .stats-icon  { background: var(--primary-gradient); }

.stat-card.success    .stat-icon,
.stats-card.success   .stats-icon,
.stats-card.active    .stats-icon,
.risk-stats-card.low  .stats-icon   { background: var(--success-gradient); }

.stat-card.warning    .stat-icon,
.stats-card.warning   .stats-icon,
.stats-card.risks     .stats-icon,
.risk-stats-card.high .stats-icon   { background: var(--warning-gradient); }

.stat-card.danger     .stat-icon,
.stats-card.danger    .stats-icon,
.risk-stats-card.critical .stats-icon { background: var(--danger-gradient); }

.stat-card.info       .stat-icon,
.stats-card.info      .stats-icon,
.stats-card.parent    .stats-icon   { background: var(--info-gradient); }

.stat-card.accent     .stat-icon    { background: var(--accent-gradient); }

/* Stat change pill */
.stat-change {
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.stat-change.positive { background: rgba(22,163,74,0.10);  color: var(--success-color); }
.stat-change.negative { background: rgba(220,38,38,0.10);  color: var(--danger-color); }


/* ============================================================
   ACTIONS SECTION (filter / search bar above tables)
   ============================================================ */
.actions-section {
  margin-bottom: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--surface-bg);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.actions-left,
.actions-right { display: flex; gap: var(--space-2); flex-wrap: wrap; }


/* ============================================================
   BUTTONS (design phase 2) — four kinds, one size:
     .btn-primary            navy — the page's main action (one per view)
     .btn / .btn-secondary   white with a border — everything else
     .btn-danger             red — the confirm button of a destructive dialog
     .btn-outline-danger     red outline — delete/remove in lists and rows
     .btn-link               text only
   36 px tall; .btn-sm (30 px) in tables and dense rows. Older variants
   (success, info, warning, outline-*, modern, brand, gradient) render as
   secondary or primary until their templates use the four names.
   Each kind sets --gp-btn-*; one rule paints them.
   ============================================================ */
.btn {
  --gp-btn-bg: var(--bg-white);        --gp-btn-fg: var(--text-primary);       --gp-btn-bd: var(--border-strong);
  --gp-btn-bg-hover: var(--bg-muted);  --gp-btn-fg-hover: var(--text-primary); --gp-btn-bd-hover: var(--gray-500);
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  line-height: 1.25;
  font-size: var(--fs-base);
  font-weight: 500;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  background: var(--gp-btn-bg) !important;
  background-image: none !important;
  border: 1px solid var(--gp-btn-bd) !important;
  color: var(--gp-btn-fg) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover,
.btn:focus {
  background: var(--gp-btn-bg-hover) !important;
  border-color: var(--gp-btn-bd-hover) !important;
  color: var(--gp-btn-fg-hover) !important;
  transform: none;
  box-shadow: none;
}
.btn:focus-visible { outline: 2px solid rgba(16, 22, 41, 0.55); outline-offset: 2px; }
.btn:disabled,
.btn.disabled { opacity: 0.55; cursor: not-allowed; }

/* primary (and the solid variants that meant "go") */
.btn-primary, .btn-success, .btn-dark,
.btn-modern-primary, .btn-brand, .btn-gradient, .btn-primary-theme {
  --gp-btn-bg: var(--primary-color);       --gp-btn-fg: var(--text-inverse);       --gp-btn-bd: var(--primary-color);
  --gp-btn-bg-hover: var(--primary-light); --gp-btn-fg-hover: var(--text-inverse); --gp-btn-bd-hover: var(--primary-light);
}
/* danger */
.btn-danger {
  --gp-btn-bg: var(--danger-color);       --gp-btn-fg: var(--text-inverse);       --gp-btn-bd: var(--danger-color);
  --gp-btn-bg-hover: var(--danger-dark);  --gp-btn-fg-hover: var(--text-inverse); --gp-btn-bd-hover: var(--danger-dark);
}
.btn-outline-danger {
  --gp-btn-fg: var(--danger-color);       --gp-btn-bd: rgba(220, 38, 38, 0.45);
  --gp-btn-bg-hover: var(--danger-bg);    --gp-btn-fg-hover: var(--pill-red-fg);  --gp-btn-bd-hover: var(--danger-color);
}
/* link */
.btn-link {
  --gp-btn-bg: transparent;       --gp-btn-bd: transparent;       --gp-btn-fg: var(--primary-color);
  --gp-btn-bg-hover: transparent; --gp-btn-bd-hover: transparent; --gp-btn-fg-hover: var(--primary-light);
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }
/* selected state of toggles and button groups */
.btn.active,
.btn:active,
.btn-check:checked + .btn {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}
/* sizes: one page size, one dense size */
.btn-sm,
.btn-group-sm > .btn { min-height: 1.875rem; padding: 0.25rem 0.625rem; font-size: var(--fs-xs); }
.btn-lg,
.btn-group-lg > .btn { min-height: 2.25rem; padding: 0.375rem 0.875rem; font-size: var(--fs-base); }


/* ============================================================
   TABLES & DATATABLES
   ============================================================ */
.table {
  font-size: var(--fs-base);
  color: var(--text-primary) !important;
  margin-bottom: 0;
}
.table thead th,
.table tbody td,
.table tbody th,
.table tfoot td,
.table tfoot th,
.table tr,
table.dataTable thead th,
table.dataTable tbody td,
table.dataTable tbody th {
  color: var(--text-primary) !important;
}
/* Bootstrap 5's .table paints EVERY cell via:
     .table > :not(caption) > * > * { background-color: var(--bs-table-bg); }
   plus optional inset shadows for striped/hover state. Override the
   underlying CSS vars on .table itself so the per-cell fill picks up
   our surface color, then keep an explicit !important fallback on the
   cell selector for any vendor sheet that defines its own --bs-* var. */
.table {
  --bs-table-bg:          var(--surface-bg);
  --bs-table-color:       var(--text-primary);
  --bs-table-striped-bg:  var(--surface-bg);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-active-bg:   var(--surface-bg);
  --bs-table-hover-bg:    rgba(var(--brand-orange-rgb), 0.06);
  --bs-table-accent-bg:   transparent;
  --bs-table-border-color: var(--border-color);   /* row dividers */
  background: var(--surface-bg);
  background-color: var(--surface-bg);
}
.table > :not(caption) > * > *,
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th {
  background-color: var(--surface-bg) !important;
  box-shadow: none !important;
}
.table thead th,
.table thead.table-light th,
.table > thead.table-light > tr > th,
table.dataTable thead th {
  background-color: var(--surface-bg) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--border-strong);   /* header bottom rule */
  padding: var(--space-4);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.table tbody td {
  padding: var(--space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
}
/* Bootstrap striped → flat surface so the table reads as one continuous panel */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  background-color: var(--surface-bg) !important;
  --bs-table-accent-bg: transparent;
}
.table-hover > tbody > tr:hover > *,
.table-hover tbody tr:hover,
.table-hover tbody tr:hover > * {
  background-color: rgba(var(--brand-orange-rgb), 0.06) !important;
  --bs-table-hover-bg: rgba(var(--brand-orange-rgb), 0.06);
}
/* Cells should inherit the table's black, even when per-page CSS targets
   inner anchors / spans / strong text. */
.table td a:not(.btn):not(.badge),
.table td span:not(.badge):not(.text-warning):not(.text-success):not(.text-danger):not(.text-info),
.table td strong,
.table td small {
  color: var(--text-primary) !important;
}

.table-card {
  background: var(--surface-bg) !important;
  background-color: var(--surface-bg) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-card .table thead th:first-child { padding-left: var(--space-6); }
.table-card .table tbody td:first-child { padding-left: var(--space-6); }
.table-card .table thead th:last-child  { padding-right: var(--space-6); }
.table-card .table tbody td:last-child  { padding-right: var(--space-6); }

/* DataTables overrides */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.625rem;
  font-size: var(--fs-sm);
  margin-left: var(--space-2);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-light) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}


/* ============================================================
   BADGES (design phase 2) — one status pill: soft tint, dark text of
   the same hue, sentence case.
     red = a problem · amber = due soon / warning · green = done / ok
     blue = new / information · grey = inactive / neutral · navy = category
   Bootstrap's bg-* / text-bg-*, the older badge-* and badge-soft-* names
   all map here. A badge whose colour comes from its own style attribute
   (data-driven, e.g. risk-matrix levels) keeps it.
   ============================================================ */
.badge {
  --gp-pill-bg: var(--pill-grey-bg);
  --gp-pill-fg: var(--pill-grey-fg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1875rem 0.5625rem;
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1.35;
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.badge:not([style*="background"]) {
  background: var(--gp-pill-bg) !important;
  color: var(--gp-pill-fg) !important;
  border: 0;
}
.badge.bg-danger,  .badge.text-bg-danger,  .badge-danger,  .badge-soft-danger,  .badge-high-risk,   .badge-non-compliant { --gp-pill-bg: var(--danger-bg);  --gp-pill-fg: var(--pill-red-fg); }
.badge.bg-warning, .badge.text-bg-warning, .badge-warning, .badge-soft-warning, .badge-medium-risk                       { --gp-pill-bg: var(--warning-bg); --gp-pill-fg: var(--pill-amber-fg); }
.badge.bg-success, .badge.text-bg-success, .badge-success, .badge-soft-success, .badge-low-risk,    .badge-compliant     { --gp-pill-bg: var(--success-bg); --gp-pill-fg: var(--pill-green-fg); }
.badge.bg-info,    .badge.text-bg-info,    .badge-info,    .badge-soft-info                                              { --gp-pill-bg: var(--info-bg);    --gp-pill-fg: var(--pill-blue-fg); }
.badge.bg-primary, .badge.text-bg-primary, .badge-primary, .badge-soft-primary, .badge-soft-accent,
.badge.bg-dark,    .badge.text-bg-dark,    .badge-dark                                                                   { --gp-pill-bg: var(--pill-navy-bg); --gp-pill-fg: var(--pill-navy-fg); }
.badge a { color: inherit; }


/* ============================================================
   FORMS
   ============================================================ */
.form-control,
.form-select {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--bg-white);
  transition: var(--transition-fast);
}
/* Visible input edges; the :focus rules below (higher specificity) keep the focus ring. */
.form-control, .form-select { border-color: var(--border-input); }
.form-control:focus,
.form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--brand-orange-rgb), 0.15);
  outline: none;
}
.form-control::placeholder { color: var(--text-light); }
.form-label {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  font-size: var(--fs-base);
}
.form-text { color: var(--text-secondary); font-size: var(--fs-xs); }

.input-group-text {
  background: var(--bg-light);
  border-color: var(--border-color);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* Select2 alignment */
.select2-container--bootstrap-5 .select2-selection {
  border-radius: var(--radius-md);
  border-color: var(--border-color);
  min-height: 38px;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--brand-orange-rgb), 0.15);
}


/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-base);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.alert-info    { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.20); color: #0c4a6e; }
.alert-success { background: rgba(22,163,74,0.08);  border-color: rgba(22,163,74,0.20);  color: #14532d; }
.alert-warning { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); color: #78350f; }
.alert-danger  { background: rgba(220,38,38,0.08);  border-color: rgba(220,38,38,0.20);  color: #7f1d1d; }


/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.modal-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-5) var(--space-6);
}
.modal-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.modal-body   { padding: var(--space-6); }
.modal-footer {
  border-top: 1px solid var(--border-color);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-light);
}


/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
}
.dropdown-item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--text-primary);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--bg-light);
  color: var(--text-primary);
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--primary-color);
  color: var(--text-inverse);
}


/* ============================================================
   NAV PILLS / TABS
   ============================================================ */
.nav-pills .nav-link {
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-weight: 500;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--primary-color);
  color: var(--text-inverse);
}
.nav-tabs {
  border-bottom: 1px solid var(--border-color);
}
.nav-tabs .nav-link {
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-weight: 500;
}
.nav-tabs .nav-link:hover {
  color: var(--text-primary);
  border-bottom-color: var(--border-strong);
}
.nav-tabs .nav-link.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
  background: transparent;
}


/* ============================================================
   PROGRESS
   ============================================================ */
.progress {
  height: 8px;
  background: var(--bg-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar {
  background: var(--primary-color);
}


/* ============================================================
   UTILITY (kept minimal — most utility comes from Bootstrap)
   ============================================================ */
.text-risk        { color: var(--brand-orange) !important; }
.text-compliance  { color: var(--brand-green)  !important; }
.text-accent      { color: var(--accent-color) !important; }
.bg-risk-light       { background: rgba(var(--brand-orange-rgb), 0.10) !important; }
.bg-compliance-light { background: rgba(22, 163, 74, 0.10) !important; }
.border-risk         { border-color: var(--brand-orange) !important; }
.border-compliance   { border-color: var(--brand-green)  !important; }


/* ═══ Ontech form-field actives: navy replaces the orange accent ═══ */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(16, 22, 41, 0.15);
}
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(16, 22, 41, 0.15);
}

.bg-risk-light       { background: rgba(var(--brand-orange-rgb), 0.10) !important; }
.bg-compliance-light { background: rgba(22, 163, 74, 0.10) !important; }
.border-risk         { border-color: var(--brand-orange) !important; }
.border-compliance   { border-color: var(--brand-green)  !important; }



/* ============================================================
   BOOTSTRAP FOLLOWS THE TOKENS (design phase 0)
   Bootstrap's colour variables still carried its defaults — #0d6efd
   blue on links, title icons and .border-primary cards, #212529 grey
   text. Pointing them at the tokens puts its utilities (.text-*, .bg-*,
   .border-*, links, pagination, list groups, pills, sliders) in the
   Ontech palette. The -rgb triples are the same colours as the tokens.
   ============================================================ */
:root {
  --bs-primary: var(--primary-color);          --bs-primary-rgb: 16, 22, 41;
  --bs-secondary: var(--text-secondary);       --bs-secondary-rgb: 75, 85, 99;
  --bs-success: var(--success-color);          --bs-success-rgb: 21, 128, 61;
  --bs-info: var(--info-color);                --bs-info-rgb: 3, 105, 161;
  --bs-warning: var(--warning-color);          --bs-warning-rgb: 245, 158, 11;
  --bs-danger: var(--danger-color);            --bs-danger-rgb: 220, 38, 38;
  --bs-body-color: var(--text-primary);        --bs-body-color-rgb: 0, 0, 0;
  --bs-emphasis-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-light);
  --bs-body-font-family: var(--font-sans);
  --bs-link-color: var(--primary-color);       --bs-link-color-rgb: 16, 22, 41;
  --bs-link-hover-color: var(--primary-light); --bs-link-hover-color-rgb: 28, 37, 64;
  --bs-focus-ring-color: rgba(16, 22, 41, 0.25);
  --bs-primary-text-emphasis: var(--primary-color);
  --bs-primary-bg-subtle: var(--nav-active-bg);
  --bs-primary-border-subtle: var(--border-strong);
}
.pagination {
  --bs-pagination-color: var(--primary-color);
  --bs-pagination-hover-color: var(--primary-light);
  --bs-pagination-focus-color: var(--primary-light);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(16, 22, 41, 0.15);
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}
.list-group   { --bs-list-group-active-bg: var(--primary-color); --bs-list-group-active-border-color: var(--primary-color); }
.nav-pills    { --bs-nav-pills-link-active-bg: var(--primary-color); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--primary-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--primary-color); }
.form-range::-webkit-slider-thumb { background-color: var(--primary-color); }
.form-range::-moz-range-thumb     { background-color: var(--primary-color); }


/* ============================================================
   TOASTS — open under the 70px topbar (they covered the user menu),
   in the status colours.
   ============================================================ */
#toast-container.toast-top-right { top: calc(70px + var(--space-3)); right: var(--space-5); }
#toast-container > div { opacity: 0.97; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
#toast-container > div:hover { box-shadow: var(--shadow-xl); }
#toast-container > .toast-success { background-color: var(--success-color); }
#toast-container > .toast-error   { background-color: var(--danger-color); }
#toast-container > .toast-info    { background-color: var(--info-color); }
#toast-container > .toast-warning { background-color: var(--warning-text); }
@media (max-width: 768px) {
  #toast-container.toast-top-right { left: var(--space-3); right: var(--space-3); }
  #toast-container.toast-top-right > div { width: auto; }
}


/* ============================================================
   STANDARD PAGE COMPONENTS (design phase 0)
   Markup: includes/ui.html macros (page_head, kpi, state); scripts fill
   them with GP.kpi / GP.state from static/js/ontech-ui.js. gp- names so
   they can't collide with the per-page classes they replace.
   ============================================================ */
.gp-page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
}
.gp-page-head__title {
  font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
  color: var(--text-primary); margin: 0;
}
.gp-page-head__subtitle { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--fs-sm); max-width: 72ch; }
.gp-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.gp-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.gp-kpi {
  background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.gp-kpi__label {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary);
}
.gp-kpi__value {
  font-size: 1.625rem; font-weight: 600; line-height: 1.2; color: var(--text-primary);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.gp-kpi__meaning { font-size: var(--fs-xs); color: var(--text-light); }
.gp-kpi.is-bad  .gp-kpi__value { color: var(--danger-color); }
.gp-kpi.is-warn .gp-kpi__value { color: var(--warning-text); }
.gp-kpi.is-good .gp-kpi__value { color: var(--success-color); }

.gp-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1);
  padding: var(--space-6) var(--space-4); color: var(--text-secondary); font-size: var(--fs-sm);
}
.gp-state__icon {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-muted); color: var(--gray-700); margin-bottom: var(--space-1);
}
.gp-state--loading .gp-state__icon { background: transparent; color: var(--primary-color); }
.gp-state--error   .gp-state__icon { background: var(--danger-bg); color: var(--danger-color); }
.gp-state__title { color: var(--text-primary); font-weight: 600; }
.gp-state__text  { max-width: 56ch; }
.gp-state .btn   { margin-top: var(--space-2); }


/* ============================================================
   PAGE FRAME (design phase 1) — every page starts the same distance
   under the topbar: tab bar, then the page title (page_head), then
   content. The first wrapper adds no vertical space of its own (pages
   used py-3, py-4, mt-4, pt-3 …); its side padding stays, so rows and
   the title line up.
   ============================================================ */
.main-content > .container-fluid,
.main-content > .container,
.main-content > .content-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
.main-content > .container { max-width: none; }
.page-tabs { margin-bottom: var(--space-5) !important; }
.page-subtabs { margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-4) !important; }
/* Page-specific root wrappers (.reports-container, .learning-container, .import-container …, 14 pages)
   added 20–32px on top and their own grey canvas; the page frame owns both. Phase 3 removes their CSS. */
.main-content > [class*="-container"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}


/* ============================================================
   CARDS AND TABLES (design phase 2) — one card: 1px border, no colour
   strips or borderless variants, a 15 px header; one table header:
   11 px uppercase grey on a single rule. Cards aren't interactive, so
   they don't lift on hover.
   ============================================================ */
.card,
.card.border-0 { border: 1px solid var(--border-color) !important; }
.card.border-primary, .card.border-secondary, .card.border-success, .card.border-danger,
.card.border-warning, .card.border-info, .card.border-dark, .card.border-light { border-color: var(--border-color) !important; }
.card:hover { box-shadow: var(--shadow-sm); }
.card-header { padding: var(--space-3) var(--space-5); font-size: 0.9375rem; }
.card-body { padding: var(--space-5); }
.card.risk-card .card-header,
.card.compliance-card .card-header { border-left: 0; }

.table thead th,
.table > thead > tr > th,
.table thead.table-light th,
table.dataTable thead th {
  color: var(--text-secondary) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid var(--border-strong);
  padding: var(--space-3) var(--space-4);
}
.table tbody td { padding: var(--space-3) var(--space-4); }
.table-sm tbody td,
.table-sm thead th { padding: var(--space-2) var(--space-3); }

/* A tile that filters or links (<a class="gp-kpi">) shows it on hover; the selected filter carries
   .border-primary + aria-current. */
a.gp-kpi { color: inherit; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; }
a.gp-kpi:hover,
.gp-kpi[data-filter-type]:hover { border-color: var(--border-strong); background: var(--bg-light); cursor: pointer; }
a.gp-kpi[aria-current] { box-shadow: inset 0 0 0 1px var(--primary-color); }

/* Tile rows fill their columns on wide screens: the column count follows the number of tiles, so no
   tile sits alone on a second row (six on the AML dashboard, eight on metrics, twelve on the filing
   calendar). Narrower screens keep auto-fit. */
@media (min-width: 992px) {
  .gp-kpis:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gp-kpis:has(> :nth-child(4):last-child),
  .gp-kpis:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gp-kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gp-kpis:has(> :nth-child(6):last-child),
  .gp-kpis:has(> :nth-child(12):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}


/* A lookup that came back empty-handed: a result, not a failed load. Its own class so it is
   never confused with the error states GP.state owns. */
.lookup-failed { color: var(--danger-color); }

/* ============================================================
   PAGES OUTSIDE THE APP SHELL (design phase 4) — sign-in and its
   flows, the error pages, the coverage gate: one centred card on the
   page canvas, the Ontech wordmark above it. Markup: layouts/plain.html.
   ============================================================ */
.gp-plain {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: var(--bg-page);
  color: var(--text-primary);
}
.gp-plain__card {
  width: 100%;
  max-width: 27rem;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-6);
}
.gp-plain--wide .gp-plain__card { max-width: 42rem; }
/* A long document rather than a form (the public coverage page): the card takes the
   page width and sits at the top, and the layout heading is left to the document. */
.gp-plain--doc { align-items: flex-start; padding: var(--space-6) var(--space-4) var(--space-10); }
.gp-plain--doc .gp-plain__card { max-width: 1200px; padding: var(--space-6) var(--space-4); }
.gp-plain__brand { display: block; text-align: center; margin-bottom: var(--space-6); }
.gp-plain__brand img { height: 34px; width: auto; }
.gp-plain__title {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  margin: 0;
  color: var(--text-primary);
}
.gp-plain__subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin: var(--space-2) 0 0;
}
.gp-plain__body { margin-top: var(--space-6); }
.gp-plain__footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-light);
}
.gp-plain__footer a { color: var(--text-secondary); }