/* ──────────────────────────────────────────────────────────────────────────
   Theme — the one place the app's colours, type scale and control sizes are
   decided (the 2026-11 visual overhaul). Loaded by base.html after the vendor
   theme (styles.new.css) and style.css, so it re-points what they hard-code.

   Change a colour HERE, never in a template: every Bootstrap component, the
   pd- blocks (page-design.css), the table shell and AG Grid all read these.

     --ml-primary …      brand blue (passes 4.5:1 with white text)
     --ml-ink / -muted   body text / secondary text
     --ml-line / -soft   hairlines / header bands and quiet fills
     --ml-{green,amber,red,grey}-{bg,fg}   status tints (badges, pills)

   Status colours mean one thing everywhere:
     green = open / active / paid      amber = needs attention
     red   = error / overdue           grey  = closed / inactive / neutral
     blue  = a category label (Client, Primary, a role)
   ────────────────────────────────────────────────────────────────────────── */

:root,
[data-bs-theme="light"] {
  --ml-primary: #3448c5;
  --ml-primary-hover: #2a3ba6;
  --ml-primary-rgb: 52, 72, 197;
  --ml-primary-soft: #e8ebfb;
  --ml-ink: #1f2937;
  --ml-ink-rgb: 31, 41, 55;
  --ml-muted: #6b7280;
  --ml-line: #e5e7eb;
  --ml-soft: #f8f9fb;
  --ml-green-bg: #dcfce7;  --ml-green-fg: #166534;
  --ml-amber-bg: #fef3c7;  --ml-amber-fg: #92400e;
  --ml-red-bg: #fee2e2;    --ml-red-fg: #991b1b;
  --ml-grey-bg: #f3f4f6;   --ml-grey-fg: #4b5563;

  --bs-blue: var(--ml-primary);
  --bs-primary: var(--ml-primary);
  --bs-primary-rgb: var(--ml-primary-rgb);
  --bs-primary-text: var(--ml-primary);
  --bs-light-primary: var(--ml-primary-soft);
  --bs-secondary: #6b7280;
  --bs-secondary-rgb: 107, 114, 128;
  --bs-success: #15803d;
  --bs-success-rgb: 21, 128, 61;
  --bs-success-text: #166534;
  --bs-info: #2563eb;
  --bs-info-rgb: 37, 99, 235;
  --bs-warning: #d97706;
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-text: #92400e;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text: #991b1b;
  --bs-red: #dc2626;
  --bs-green: #15803d;
  --bs-body-color: var(--ml-ink);
  --bs-body-color-rgb: var(--ml-ink-rgb);
  --bs-heading-color: #111827;
  --bs-link-color: var(--ml-primary);
  --bs-link-hover-color: var(--ml-primary-hover);
  --bs-border-color: var(--ml-line);
}

/* ── Text ───────────────────────────────────────────────────────────────── */
body { color: var(--ml-ink); }
a:hover { color: var(--ml-primary-hover); }
.text-muted, .form-text, caption { color: var(--ml-muted) !important; }
.link-primary { color: var(--ml-primary) !important; }
.link-danger { color: #dc2626 !important; }
.link-success { color: #15803d !important; }

/* ── Buttons: one scale (33px default, 30px small) and one palette ──────── */
.btn {
  --bs-btn-padding-y: .4rem;
  --bs-btn-padding-x: .8rem;
  --bs-btn-font-size: .8125rem;
  --bs-btn-border-radius: 6px;
  --bs-btn-color: var(--ml-ink);
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: .3rem;
  --bs-btn-padding-x: .65rem;
  --bs-btn-font-size: .8125rem;
  --bs-btn-border-radius: 6px;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ml-primary);
  --bs-btn-border-color: var(--ml-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ml-primary-hover);
  --bs-btn-hover-border-color: var(--ml-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ml-primary-hover);
  --bs-btn-active-border-color: var(--ml-primary-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--ml-primary);
  --bs-btn-disabled-border-color: var(--ml-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--ml-primary);
  --bs-btn-border-color: #c3caef;
  --bs-btn-hover-color: var(--ml-primary);
  --bs-btn-hover-bg: var(--ml-primary-soft);
  --bs-btn-hover-border-color: var(--ml-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ml-primary);
  --bs-btn-active-border-color: var(--ml-primary);
  --bs-btn-disabled-color: var(--ml-primary);
  --bs-btn-disabled-border-color: #c3caef;
}
/* "Secondary" is the neutral button, not a second brand colour. */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4b5563;
  --bs-btn-border-color: #4b5563;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #374151;
  --bs-btn-hover-border-color: #374151;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #374151;
  --bs-btn-active-border-color: #374151;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #4b5563;
  --bs-btn-disabled-border-color: #4b5563;
}
.btn-outline-secondary, .btn-outline-dark {
  --bs-btn-color: #374151;
  --bs-btn-border-color: #d1d5db;
  --bs-btn-hover-color: var(--ml-ink);
  --bs-btn-hover-bg: var(--ml-grey-bg);
  --bs-btn-hover-border-color: #9ca3af;
  --bs-btn-active-color: var(--ml-ink);
  --bs-btn-active-bg: #e5e7eb;
  --bs-btn-active-border-color: #9ca3af;
  --bs-btn-disabled-color: #9ca3af;
  --bs-btn-disabled-border-color: #e5e7eb;
}
.btn-light {
  --bs-btn-color: var(--ml-ink);
  --bs-btn-bg: var(--ml-grey-bg);
  --bs-btn-border-color: var(--ml-grey-bg);
  --bs-btn-hover-color: var(--ml-ink);
  --bs-btn-hover-bg: #e5e7eb;
  --bs-btn-hover-border-color: #e5e7eb;
  --bs-btn-active-color: var(--ml-ink);
  --bs-btn-active-bg: #d1d5db;
  --bs-btn-active-border-color: #d1d5db;
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #15803d;
  --bs-btn-border-color: #15803d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #166534;
  --bs-btn-hover-border-color: #166534;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #166534;
  --bs-btn-active-border-color: #166534;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #15803d;
  --bs-btn-disabled-border-color: #15803d;
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc2626;
  --bs-btn-disabled-border-color: #dc2626;
}
.btn-outline-danger {
  --bs-btn-color: #dc2626;
  --bs-btn-border-color: #fca5a5;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc2626;
  --bs-btn-hover-border-color: #dc2626;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-disabled-color: #dc2626;
  --bs-btn-disabled-border-color: #fca5a5;
}
.btn-outline-success {
  --bs-btn-color: #15803d;
  --bs-btn-border-color: #86efac;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #166534;
  --bs-btn-active-border-color: #166534;
}
.btn-warning {
  --bs-btn-color: #451a03;
  --bs-btn-bg: #fbbf24;
  --bs-btn-border-color: #fbbf24;
  --bs-btn-hover-color: #451a03;
  --bs-btn-hover-bg: #f59e0b;
  --bs-btn-hover-border-color: #f59e0b;
  --bs-btn-active-color: #451a03;
  --bs-btn-active-bg: #f59e0b;
  --bs-btn-active-border-color: #f59e0b;
}
.btn-link { --bs-btn-color: var(--ml-primary); --bs-btn-hover-color: var(--ml-primary-hover); }

/* ── Form controls ──────────────────────────────────────────────────────── */
.form-control, .form-select { color: var(--ml-ink); }
.form-control:focus, .form-select:focus {
  color: var(--ml-ink);
  border-color: var(--ml-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--ml-primary-rgb), .15);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--ml-primary);
  border-color: var(--ml-primary);
}
.pagination {
  --bs-pagination-color: var(--ml-ink);
  --bs-pagination-hover-color: var(--ml-primary);
  --bs-pagination-active-bg: var(--ml-primary);
  --bs-pagination-active-border-color: var(--ml-primary);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--ml-primary); }
.list-group {
  --bs-list-group-active-bg: var(--ml-primary);
  --bs-list-group-active-border-color: var(--ml-primary);
}
.dropdown-menu {
  color: var(--ml-ink);
  --bs-dropdown-link-color: var(--ml-ink);
  --bs-dropdown-link-active-bg: var(--ml-primary);
}

/* ── Badges: soft pills with one meaning per colour ─────────────────────────
   Markup stays `badge bg-…` (tests and templates rely on it); only the look
   changes. Tag badges keep the colour the user picked for the tag. */
.badge:not(.tag-badge) {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.35;
  padding: .15rem .55rem;
  border-radius: 999px;
  letter-spacing: 0;
}
.badge.bg-success:not(.tag-badge) { background-color: var(--ml-green-bg) !important; color: var(--ml-green-fg) !important; }
.badge.bg-warning:not(.tag-badge) { background-color: var(--ml-amber-bg) !important; color: var(--ml-amber-fg) !important; }
.badge.bg-danger:not(.tag-badge)  { background-color: var(--ml-red-bg) !important;   color: var(--ml-red-fg) !important; }
.badge.bg-secondary:not(.tag-badge),
.badge.bg-light:not(.tag-badge),
.badge.bg-dark:not(.tag-badge)    { background-color: var(--ml-grey-bg) !important;  color: var(--ml-grey-fg) !important; }
.badge.bg-primary:not(.tag-badge),
.badge.bg-info:not(.tag-badge)    { background-color: var(--ml-primary-soft) !important; color: var(--ml-primary) !important; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert-warning { color: var(--ml-amber-fg); background-color: #fffbeb; border-color: #fde68a; }
.alert-danger  { color: var(--ml-red-fg);   background-color: #fef2f2; border-color: #fecaca; }
.alert-success { color: var(--ml-green-fg); background-color: #f0fdf4; border-color: #bbf7d0; }
.alert-info, .alert-primary { color: #1e3a8a; background-color: #eff3ff; border-color: #c7d2fe; }
.alert-secondary, .alert-light { color: var(--ml-grey-fg); background-color: var(--ml-soft); border-color: var(--ml-line); }
.alert a { color: inherit; text-decoration: underline; }

/* ── Tables: one header style for every server-rendered table ───────────────
   Small muted label on a soft band; rows are single-height with ink text.
   .pd-table (rows inside a form) and .table-sm keep their own compact rules. */
.table { color: var(--ml-ink); --bs-table-color: var(--ml-ink); }
.table:not(.pd-table) > thead > tr > th {
  font-size: .75rem;
  font-weight: 500;
  color: var(--ml-muted);
  background-color: var(--ml-soft);
  text-transform: none;
  letter-spacing: 0;
  padding-top: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ml-line);
  vertical-align: middle;
}
.table:not(.pd-table):not(.table-sm) > tbody > tr > td {
  padding-top: .6rem;
  padding-bottom: .6rem;
  vertical-align: middle;
}
.table > :not(caption) > * > * { border-bottom-color: var(--ml-line); }
.table td .badge { vertical-align: middle; }

/* An empty table says so in the middle of the space, not as an italic row. */
.table td[colspan].fst-italic {
  text-align: center;
  font-style: normal !important;
  color: var(--ml-muted) !important;
  padding: 2.5rem 1rem !important;
  border-bottom: 0;
}

/* ── AG Grid: same header band, ink and hairlines as the tables above ───── */
.ag-root-wrapper {
  --ag-foreground-color: var(--ml-ink);
  --ag-text-color: var(--ml-ink);
  --ag-header-text-color: var(--ml-muted);
  --ag-header-background-color: var(--ml-soft);
  --ag-header-font-size: 12px;
  --ag-header-font-weight: 500;
  --ag-border-color: var(--ml-line);
  --ag-row-border-color: var(--ml-line);
  --ag-accent-color: var(--ml-primary);
  --ag-row-hover-color: #f5f6fd;
  --ag-selected-row-background-color: var(--ml-primary-soft);
}
.ag-header-cell-text { font-size: 12px; font-weight: 500; color: var(--ml-muted); }

/* ── Filter tabs: add `ml-tabs` to a .btn-group of links or radio labels ───
   One look for "which slice of this list" everywhere (Matters uses the same
   underline in its own bar). The buttons keep their Bootstrap classes. */
.ml-tabs { gap: 1.25rem; align-items: stretch; }
.ml-tabs > .btn {
  flex: 0 0 auto;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ml-muted) !important;
  font-weight: 500;
  margin: 0 !important;
  padding: .4rem 0;
}
.ml-tabs > .btn:hover { color: var(--ml-ink) !important; }
.ml-tabs > .btn.btn-primary,
.ml-tabs > .btn.active,
.ml-tabs > .btn-check:checked + .btn {
  color: var(--ml-ink) !important;
  border-bottom-color: var(--ml-primary) !important;
}
.ml-tabs > .btn-check:focus-visible + .btn,
.ml-tabs > .btn:focus-visible { outline: 2px solid var(--ml-primary); outline-offset: 2px; }

/* ── Cards: flat with a hairline, the same box as .pd-card ───────────────── */
.card { box-shadow: none; border: 1px solid var(--ml-line); border-radius: .5rem; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar-nav ul .sidebar-item .sidebar-link { color: #374151; }
.sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background-color: var(--ml-grey-bg);
  color: var(--ml-ink);
}
.sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active,
.sidebar-nav ul .sidebar-item > .sidebar-link.active {
  background-color: var(--ml-primary-soft);
  color: var(--ml-primary);
  font-weight: 500;
}
.nav-small-cap {
  margin-top: 16px;
  color: var(--ml-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 22px;
  text-transform: none;
}
/* The quiet links at the foot of the sidebar (legal, support, demo). */
.sidebar-nav ul .sidebar-item .sidebar-link.sidebar-link-quiet {
  color: var(--ml-muted);
  font-size: 13px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.sidebar-nav ul .sidebar-item .sidebar-link.sidebar-link-quiet i { font-size: 15px; }

/* ── Top bar ────────────────────────────────────────────────────────────── */
.app-header { border-bottom: 1px solid var(--ml-line); }
.header-title h3, .nav-item .header-title2 { color: #111827; font-weight: 600; }
.header-title h3 { font-size: 1.125rem; }
.nav-item .header-title2 { font-size: 1.0625rem; }
.profile-circle { background: var(--ml-primary); }

/* ── Spots in style.css that hard-coded the old blue ────────────────────── */
.card-body-icon, .icon-word i, .file-icon,
.preview-tool-btn:hover:not(:disabled), .preview-download-btn:hover,
#sliderContainer.unlocked #sliderBackground { color: var(--ml-primary); }
.preview-tool-btn:hover:not(:disabled), .preview-download-btn:hover { background: rgba(var(--ml-primary-rgb), .1); }
#slider, #sliderContainer.unlocked #slider { background-color: var(--ml-primary); }

/* Phones: the top bar keeps the title, the timer and the avatar on one line. */
@media (max-width: 575.98px) {
  .app-header #drop2 > span.px-2 { display: none; }
  .header-title h3 { font-size: 1rem; }
  .app-header .navbar-collapse { flex: 0 0 auto; }
  .app-header .navbar > .navbar-nav:first-child { min-width: 0; flex: 1 1 0; overflow: hidden; flex-wrap: nowrap; }
  .app-header .navbar > .navbar-nav:first-child > .nav-item:last-child {
    min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap;
  }
  .app-header .header-title h3,
  .app-header .nav-item .header-title2 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Corners and control heights: one shape for every control ──────────────
   Buttons, inputs and dropdowns are all 6px; default controls are 34px tall
   and small ones 31px, the same as the buttons above, so a search box lines
   up with the button beside it. (Older bars in style.css made some of these
   30px pills — .dropdown-style, .input-search.) Floating labels keep their
   own height (.form-floating sizes its control). */
.form-control, .form-select, .input-group-text {
  border-radius: 6px;
  font-size: .875rem;
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.form-control-sm, .form-select-sm {
  border-radius: 6px;
  font-size: .8125rem;
  padding-top: .3rem;
  padding-bottom: .3rem;
}
.input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dropdown-style, .dropdown-style .btn, .input-search { border-radius: 6px !important; }
.dropdown-style .btn.remove-dups-btn,
.dropdown-style .btn.remove-exclusions-btn { border-radius: 6px !important; }
.dropdown-menu { border-radius: 8px; }
.pagination { --bs-pagination-border-radius: 6px; }

/* ── Plain tables: the same rounded header band AG Grid draws ───────────────
   Separate borders (each cell draws its own rule) so the header's corner
   cells can be rounded; a .table-bordered grid keeps collapsed borders. */
.table:not(.pd-table):not(.table-bordered) { border-collapse: separate; border-spacing: 0; }
.table:not(.pd-table):not(.table-bordered) > thead > tr:first-child > th:first-child { border-top-left-radius: 8px; }
.table:not(.pd-table):not(.table-bordered) > thead > tr:first-child > th:last-child { border-top-right-radius: 8px; }
.table:not(.pd-table):not(.table-bordered) > thead > tr > th { border-bottom: 0; }

/* ── Matter pages: room between the matter's title row and its tabs ─────── */
.matter-shell > .matter-shell-header { margin-bottom: .875rem; }

/* ── A row of filter tabs that sits on its own rule above a table ───────── */
.ml-tabbar { border-bottom: 1px solid var(--ml-line); margin-bottom: .5rem; }
.ml-tabbar > .ml-tabs > .btn { margin-bottom: -1px !important; padding: .5rem 0; }