/* Design tokens and the system built on them (docs/DESIGN-SYSTEM.md). Loaded after the theme
   (dist/css/style.min.css, never edited) and after contrast.css; everything here overrides them. */
:root {
  --sfa-brand: #1b6d93;          /* top bar, primary buttons, links, focus ring: 5.74:1 with white */
  --sfa-brand-dark: #155a7a;
  --sfa-brand-accent: #2cabe3;   /* non-text accents only: active indicators, progress fills */
  --sfa-text: #313131;
  --sfa-text-muted: #5e6a79;
  --sfa-text-faint: #8a94a6;
  --sfa-canvas: #edf1f5;
  --sfa-surface: #ffffff;
  --sfa-surface-alt: #f7fafc;
  --sfa-border: rgba(120, 130, 140, .18);
  --sfa-success: #1c8550;
  --sfa-warning: #8a5a00;
  --sfa-warning-bg: #ffeed6;
  --sfa-danger: #c93c3c;
  --sfa-info: #207ca5;
  --sfa-space-1: 4px; --sfa-space-2: 8px; --sfa-space-3: 12px; --sfa-space-4: 16px; --sfa-space-5: 24px; --sfa-space-6: 32px;
  --sfa-radius-sm: 4px;
  --sfa-radius-md: 8px;
  --sfa-text-xs: 12px; --sfa-text-sm: 13px; --sfa-text-base: 14px; --sfa-text-lg: 16px; --sfa-text-xl: 20px; --sfa-text-2xl: 24px; --sfa-text-display: 32px;
  --sfa-shadow-card: 0 1px 4px rgba(0, 0, 0, .10);
  --sfa-shadow-raised: 0 4px 12px rgba(0, 0, 0, .12);
  --sfa-focus-ring: 0 0 0 3px rgba(27, 109, 147, .35);
}

/* The page is visible at once: the theme hid it until its script ran and showed a spinner meanwhile. */
.page-wrapper { display: block; }
.preloader { display: none; }

/* Brand bar: the same colour on every screen size (the theme painted phones near-black). The selectors match the
   theme's own specificity (#main-wrapper[data-layout] … [data-navbarbg]) so this file, loaded later, wins. */
#main-wrapper[data-layout] .topbar .navbar-collapse[data-navbarbg], .topbar .top-navbar .navbar-collapse { background: var(--sfa-brand); }
@media (max-width: 767.98px) {
  #main-wrapper[data-layout] .topbar .top-navbar .navbar-header[data-logobg], .topbar .top-navbar .navbar-header { background: var(--sfa-brand); }
}

/* One primary colour for the action to press. */
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
  color: #fff; background-color: var(--sfa-brand); border-color: var(--sfa-brand); box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus { color: #fff; background-color: var(--sfa-brand-dark); border-color: var(--sfa-brand-dark); }
.btn-primary.active, .btn-primary:not(:disabled):not(.disabled).active, .btn-group > .btn-primary.active { color: #fff; background-color: var(--sfa-brand-dark); border-color: var(--sfa-brand-dark); box-shadow: none; }
.btn-outline-primary { color: var(--sfa-brand); border-color: var(--sfa-brand); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--sfa-brand); border-color: var(--sfa-brand); }
.btn-light { color: var(--sfa-text); background-color: #fff; border-color: #dfe4ea; }
.btn-light:hover, .btn-light:focus { color: var(--sfa-text); background-color: var(--sfa-surface-alt); border-color: #cfd6de; }
.btn-light.active, .btn-light:not(:disabled):not(.disabled).active { color: #fff; background-color: var(--sfa-brand); border-color: var(--sfa-brand); }
.badge-primary, .bg-primary, .page-item.active .page-link { background-color: var(--sfa-brand) !important; border-color: var(--sfa-brand); }
.btn-link, .page-link { color: var(--sfa-brand); }

/* Keyboard focus is always visible (the theme removed outlines). */
:focus-visible { outline: 2px solid var(--sfa-brand); outline-offset: 2px; }
.btn:focus, .btn.focus { box-shadow: none; }
.btn:focus-visible, .form-control:focus-visible, .custom-select:focus-visible, .page-link:focus-visible { outline: 0; box-shadow: var(--sfa-focus-ring); }
.form-control:focus, .custom-select:focus { border-color: var(--sfa-brand); box-shadow: none; }

/* Page header: one title, a short subtitle, the actions on the right and wrapping under the title on phones. */
.page-title { font-size: var(--sfa-text-xl); font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--sfa-text); }
.page-subtitle { font-size: var(--sfa-text-sm); margin-top: 2px; }
.breadcrumb-trail { font-size: var(--sfa-text-xs); background: transparent; }
.page-breadcrumb .btn, .page-breadcrumb .btn-group, .page-breadcrumb .dropdown { margin-top: 4px; margin-bottom: 4px; }
.page-actions > * + * { margin-left: 8px; }

/* KPI tile: a label, a number, a note. */
.kpi .card-body { padding: 16px 20px; }
.kpi-label { font-size: var(--sfa-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--sfa-text-muted); margin-bottom: 4px; }
.kpi-value { font-size: var(--sfa-text-2xl); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--sfa-text); }
.kpi-note { font-size: var(--sfa-text-xs); color: var(--sfa-text-muted); margin-top: 4px; }

/* Forms: sections with a small heading; a narrow card for confirmations. */
.form-section { border: 0; padding: 0; margin: 0 0 var(--sfa-space-5); min-width: 0; }
.form-section > legend { font-size: var(--sfa-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sfa-text-muted); margin-bottom: var(--sfa-space-3); width: auto; }
.card-narrow { max-width: 640px; }

/* ---- Phase 2: one type scale, one heading ladder, one family of shapes ---- */
small, .small { font-size: var(--sfa-text-xs); }
.font-light { font-weight: 400; }
.badge { font-size: var(--sfa-text-xs); font-weight: 500; line-height: 1.2; padding: 3px 8px; border-radius: var(--sfa-radius-sm); }
.badge-pill { border-radius: 10rem; }
.page-breadcrumb h5 { font-size: var(--sfa-text-xl); font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--sfa-text); }
.card-title { font-size: var(--sfa-text-lg); font-weight: 600; color: var(--sfa-text); }
h4.card-title { font-size: var(--sfa-text-lg); }
.card { border-radius: var(--sfa-radius-md); }
.card > .card-header:first-child { border-radius: var(--sfa-radius-md) var(--sfa-radius-md) 0 0; }
.card-header.bg-white { background: #fff !important; }
.btn, .form-control, .custom-select, .alert, .input-group-text, .dropdown-menu, .list-group-item:first-child, .list-group-item:last-child { border-radius: var(--sfa-radius-sm); }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:not(:first-child), .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.modal-content { border-radius: var(--sfa-radius-md); }

/* Tables: no stripes, a hover, quiet column heads, room for a thumb. */
.table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
.table tbody tr:hover { background-color: var(--sfa-surface-alt); }
.table thead th { font-size: var(--sfa-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--sfa-text-muted); border-top: 0; border-bottom: 1px solid var(--sfa-border); vertical-align: bottom; }
.table td, .table th { padding: 12px 8px; vertical-align: middle; border-top: 1px solid var(--sfa-border); }
.table td .font-weight-bold, .table td strong, .table td b { font-weight: 500; }
.table, .kpi-value, .text-right { font-variant-numeric: tabular-nums; }
.table.border, .table-bordered { border: 0; }

/* Links are the brand colour; inside text and cells they are underlined, so they never rely on colour alone. */
a { color: var(--sfa-brand); }
a:hover { color: var(--sfa-brand-dark); }
td a:not(.btn):not(.badge):not(.dropdown-item), dd a:not(.btn), p a:not(.btn), .list-group-item p a {
  text-decoration: underline; text-decoration-color: rgba(27, 109, 147, .45); text-underline-offset: 2px; }
td a:not(.btn):hover, dd a:hover, p a:not(.btn):hover { text-decoration-color: var(--sfa-brand-dark); }
.breadcrumb-trail a { text-decoration: none; }
.breadcrumb-trail .breadcrumb-item + .breadcrumb-item::before { color: var(--sfa-text-faint); }
.page-link { border-radius: var(--sfa-radius-sm); margin: 0 2px; border-color: var(--sfa-border); }

/* The sidebar's current item is the brand, not the theme's red; the search box reads dark on white. */
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link.active,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link:hover { background: var(--sfa-brand) !important; color: #fff !important; }
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item.selected > .sidebar-link i { color: #fff !important; }
.app-search-form .form-control { background: #fff !important; color: #212529 !important; border-color: transparent !important; }
.app-search-form .form-control::placeholder { color: var(--sfa-text-muted) !important; }

/* ---- Phase 3: states and motion ---- */
.btn, .card, a, .list-group-item, .sidebar-link, .form-control { transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease; }
.btn:not(:disabled):active { filter: brightness(.92); box-shadow: none; }
a.card:hover, .card-link:hover, .card-hover:hover { box-shadow: var(--sfa-shadow-raised); text-decoration: none; }
.list-group-item-action:hover { background-color: var(--sfa-surface-alt); }
.waves-ripple { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.is-prefilled { border-left: 3px solid var(--sfa-brand) !important; }
.empty-state .empty-title { font-size: var(--sfa-text-base); font-weight: 600; color: var(--sfa-text); }

/* Sidebar labels in the body weight (the theme used 300). */
.sidebar-nav ul .sidebar-item .sidebar-link .hide-menu, .sidebar-nav ul .sidebar-item .sidebar-link { font-weight: 400; }
.sidebar-nav ul .sidebar-item.selected > .sidebar-link .hide-menu { font-weight: 500; }

/* Inline code is readable (Bootstrap's pink was 3.8:1 at 10.5px). */
code { color: #8f1f5c; background: var(--sfa-surface-alt); padding: 1px 4px; border-radius: 3px; font-size: var(--sfa-text-xs); }

/* Outline buttons read at 4.5:1 (the theme's #ff5050 and #8898aa text did not). */
.btn-outline-danger { color: var(--sfa-danger); border-color: var(--sfa-danger); }
.btn-outline-danger:hover, .btn-outline-danger:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--sfa-danger); border-color: var(--sfa-danger); }
.btn-outline-secondary { color: var(--sfa-text-muted); border-color: #c5ccd4; }
.btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active { color: var(--sfa-text); background-color: var(--sfa-surface-alt); border-color: #b4bcc6; }
/* Links that sit inside running text in cards are underlined too. */
.card-body a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.list-group-item):not(.page-link):not(.kpi):not(.card) { text-decoration: underline; text-decoration-color: rgba(27, 109, 147, .45); text-underline-offset: 2px; }