/* Synced from the Olive Data platform by tools/Sync-Theme.ps1 on 2026-09-24. Edit there, then re-sync. */
/* ==========================================================================
   Olive Data — application shell and components
   Loads AFTER vona/css/app.min.css (Bootstrap 5.3 built with the "ins-"
   prefix) and after olive-tokens.css. It re-skins the Vona shell to the
   Olive look shared with Olive Tickets and Olive Giving, and adds the
   component vocabulary from Tickets (page header, KPI tiles, status pills,
   table-card, empty state, stepper). A compatibility block at the end maps
   classes left over from older templates onto the same rules.

   Sections
     1. Shell variables       6. Tables and DataTables
     2. Type and canvas       7. Pills, badges, tags, avatars
     3. Sidebar and topbar    8. KPI tiles, empty state, stepper
     4. Page header           9. Modals, tabs, alerts, toasts
     5. Cards, buttons, forms 10. Legacy class compatibility
   ========================================================================== */

/* ===== 1. Shell variables ================================================ */
/* Vona sets these per skin / sidenav colour / topbar colour on html[data-*]
   selectors with higher specificity than :root, so the overrides are marked
   !important. Dark mode is left to Vona for now. */
html:not([data-bs-theme="dark"]) {
  --ins-font-sans-serif: var(--font-sans) !important;
  --ins-body-bg: var(--cream) !important;
  --ins-body-color: var(--ink-900) !important;
  --ins-heading-color: var(--ink-900) !important;
  --ins-secondary-color: var(--ink-500) !important;
  --ins-border-color: var(--line) !important;
  --ins-border-radius: var(--radius) !important;
  --ins-link-color: var(--plum-700) !important;
  --ins-link-hover-color: var(--plum-900) !important;
  --ins-secondary-bg: var(--paper) !important;
  --ins-tertiary-bg: var(--cream-2) !important;

  --ins-primary: var(--plum-900) !important;
  --ins-primary-rgb: var(--om-primary-rgb) !important;
  --ins-secondary: var(--plum-700) !important;
  --ins-secondary-rgb: var(--om-secondary-rgb) !important;
  --ins-success: var(--olive-600) !important;
  --ins-success-rgb: 137, 151, 42 !important;
  --ins-info: var(--plum-500) !important;
  --ins-info-rgb: 124, 104, 184 !important;
  --ins-warning: #E08A2B !important;
  --ins-warning-rgb: 224, 138, 43 !important;
  --ins-danger: var(--danger) !important;
  --ins-danger-rgb: 192, 57, 43 !important;

  --ins-sidenav-width: var(--sidebar-w) !important;
  --ins-topbar-height: var(--topbar-h) !important;

  --ins-sidenav-bg: var(--plum-900) !important;
  --ins-sidenav-border-color: rgba(255, 255, 255, .08) !important;
  --ins-sidenav-item-color: rgba(255, 255, 255, .78) !important;
  --ins-sidenav-item-hover-color: #fff !important;
  --ins-sidenav-item-hover-bg: rgba(255, 255, 255, .08) !important;
  --ins-sidenav-item-active-color: #fff !important;
  --ins-sidenav-item-active-bg: rgba(var(--om-accent-rgb), .14) !important;

  --ins-topbar-bg: rgba(255, 255, 255, .92) !important;
  --ins-topbar-item-color: var(--ink-700) !important;
  --ins-topbar-item-hover-color: var(--plum-900) !important;
  --ins-topbar-search-bg: #fff !important;
  --ins-topbar-search-border: var(--line-2) !important;
}

/* ===== 2. Type and canvas ================================================ */
/* One knob for the app's type: every rem in the theme follows the root size, and the template's px base is
   tied to it so body text, buttons and tables move with the rest. 14px is seven eighths of the browser
   default. Sizes that would fall under 10px are floored with max() where they are declared. */
html { font-size: 14px !important; }   /* !important: vendor stylesheets (sig.css once did) may set their own root size */
:root { --ins-font-size-base: 1rem !important; --ins-body-font-size: 1rem !important; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The content area wears the public forms' canvas: the cream base with three soft glows (plum top left, lime
   top right, plum along the bottom), fixed to the window so they stay put while the page scrolls. The left and
   bottom glows are shifted by the sidebar's width so they sit in the content area rather than under the menu.
   App pages only (body > .wrapper); the public pages keep their own copy in olive-forms.css. Light theme only. */
html:not([data-bs-theme="dark"]) body:has(> .wrapper) {
  --ol-side: 260px;
  background-color: var(--cream);
  background-image:
    radial-gradient(1100px 620px at calc(var(--ol-side) + 10%) -8%, rgba(var(--om-secondary-rgb), .16), transparent 62%),
    radial-gradient(900px 540px at 92% 4%, rgba(var(--om-accent-rgb), .20), transparent 60%),
    radial-gradient(1000px 800px at calc(50% + var(--ol-side) / 2) 108%, rgba(var(--om-primary-rgb), .10), transparent 65%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media (max-width: 991.98px) { html:not([data-bs-theme="dark"]) body:has(> .wrapper) { --ol-side: 0px; } }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink-900);
  text-wrap: balance;
}
/* Vona pins every heading to multiples of its 13px base, which leaves h5 smaller than a field
   label. A rem scale keeps headings above body text on every page. */
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .9rem; }
/* Form pages (capture, preview, designer) title their pages and sections with h5.mb-1 inside the
   card body; a page title wraps its name in .text-primary. Both must read larger than field labels,
   and a page larger than a section. */
.card-body > h5.mb-1 { font-size: 1.15rem; margin-bottom: .75rem !important; }
.card-body > h5.mb-1:has(> .text-primary) { font-size: 1.3rem; }
/* The form designer: a page is a .card.border-primary with an h4 title, a section a dashed card
   with a .card-title. Same two steps as the capture form. */
.card.border-primary:not(.border-dashed) > .card-header > h4 { font-size: 1.3rem; margin: 0; }
.card.border-dashed > .card-header .card-title { font-size: 1.15rem; }
/* The sidebar's user block keeps its compact type regardless of the heading scale. */
.sidenav-user h5 { font-size: .9rem; }
.sidenav-user h6 { font-size: max(.78rem, 10px); }
.text-muted { color: var(--ink-500) !important; }
.eyebrow {
  font-size: max(.72rem, 10px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive-600);
}
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
code, kbd, pre { font-family: var(--font-mono); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links dressed as controls never underline: buttons, menu entries, tabs, pills, cards. */
a.btn, a[class*="btn-"], .dropdown-item, .nav-link, .side-nav-link, .page-link, .topbar-link, .topbar-tool, .list-group-item,
a.badge, a.status, a.tag, a.time-tag, a.card, a.kpi, a.ov-tile, a.pick, a.board-card, .breadcrumb a, .rec-views a, .ov-views a, .dt-paging a,
a.btn:hover, a[class*="btn-"]:hover, .dropdown-item:hover, .nav-link:hover, .side-nav-link:hover, .page-link:hover, .topbar-link:hover, .list-group-item:hover,
a.badge:hover, a.status:hover, a.card:hover, a.kpi:hover, a.ov-tile:hover, a.pick:hover, a.board-card:hover, .breadcrumb a:hover, .rec-views a:hover, .ov-views a:hover, .dt-paging a:hover
  { text-decoration: none !important; }
/* The top bar is sticky, so the content already flows below it; no extra offset here. */
.content-page { padding-top: .25rem; }

/* ===== 3. Sidebar and topbar ============================================= */
.sidenav-menu {
  background: var(--plum-900);
  border-right: 0;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}
.sidenav-menu .logo, .sidenav-menu .sidenav-user { border-color: rgba(255, 255, 255, .1) !important; }
.sidenav-user { background: rgba(255, 255, 255, .04); }
.sidenav-user h5, .sidenav-user h6 { color: #fff !important; }
.sidenav-user h6 { color: rgba(255, 255, 255, .6) !important; }

.side-nav .side-nav-title {
  font-size: max(.68rem, 10px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--plum-300) !important;
  padding: 1.15rem 1.25rem .4rem;
}
.side-nav .side-nav-title.text-primary { color: var(--plum-300) !important; }
.side-nav .side-nav-item .side-nav-link {
  margin: 1px .75rem;
  padding: .55rem .75rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: .92rem;
  color: rgba(255, 255, 255, .78);
  transition: background-color .12s ease, color .12s ease;
}
.side-nav .side-nav-item .side-nav-link .menu-icon,
.side-nav .side-nav-item .side-nav-link i {
  color: rgba(255, 255, 255, .55);
}
.side-nav .side-nav-item .side-nav-link:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.side-nav .side-nav-item .side-nav-link:hover .menu-icon,
.side-nav .side-nav-item .side-nav-link:hover i { color: #fff; }
.side-nav > .side-nav-item.active > a,
.side-nav .side-nav-item .side-nav-link.active,
.side-nav .side-nav-item .side-nav-link[aria-expanded="true"] {
  background: linear-gradient(180deg, rgba(var(--om-accent-rgb), .18), rgba(var(--om-accent-rgb), .08));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--om-accent-rgb), .25);
}
.side-nav > .side-nav-item.active > a .menu-icon,
.side-nav > .side-nav-item.active > a i { color: var(--lime-300); }
.side-nav .sub-menu .side-nav-link { font-size: .88rem; padding-left: 2.4rem; }
.side-nav .menu-arrow { color: rgba(255, 255, 255, .5); }
.sidenav-menu .simplebar-scrollbar:before { background: rgba(255, 255, 255, .25); }

.app-topbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.app-topbar .topbar-link { color: var(--ink-700); border-radius: var(--radius); }
.app-topbar .topbar-link:hover { color: var(--plum-900); background: rgba(var(--om-primary-rgb), .06); }
.app-topbar .dropdown-menu, .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: .4rem;
}
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-size: .92rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--plum-50); color: var(--plum-900); }
.dropdown-item.alert-info { background: var(--plum-50); color: var(--plum-900); border: 0; }
.app-topbar .topbar-search .form-control { border-radius: 999px; background: #fff; border-color: var(--line-2); }
/* Client logo in the top bar: cap the height whatever size was uploaded */
.app-topbar .logo-topbar img { max-height: 36px; width: auto; max-width: 180px; object-fit: contain; }
/* KPI tiles used as links (dashboard "Customise" tile) */
a.kpi { color: inherit; transition: border-color .12s ease, transform .12s ease; }
a.kpi:hover { border-color: var(--plum-300); transform: translateY(-1px); text-decoration: none; }
a.kpi:hover .value { color: var(--plum-900); }

/* ===== 4. Page header ==================================================== */
/* _PageTitle.cshtml renders: breadcrumb → h3.heading-color → p.text-muted.
   Turn that into the Tickets pattern: quiet crumbs, big title, muted subtitle. */
.breadcrumb.bg-dark.bg-opacity-10 {
  background: transparent !important;
  padding: 0 !important;
  font-size: max(.8rem, 10px);
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-300); content: "/"; }
.breadcrumb-item a { color: var(--ink-500); }
.breadcrumb-item a:hover { color: var(--plum-900); text-decoration: none; }
.breadcrumb-item.active { color: var(--ink-700); font-weight: 600; }
.breadcrumb-item i { margin-right: .25rem; }
h3.heading-color, h4.page-title {
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink-900);
  text-transform: none;
}
h3.heading-color + p.text-muted, .page-subtitle { font-size: .95rem; color: var(--ink-500) !important; max-width: 68ch; }

/* Tickets-style header for new pages */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem 1rem; margin: .25rem 0 1.25rem;
}
.page-head h1 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem); margin: .1rem 0 .25rem; }
.page-head p { margin: 0; color: var(--ink-500); max-width: 68ch; }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===== 5. Cards, buttons, forms ========================================== */
.card {
  --ins-card-bg: #fff;
  --ins-card-border-color: var(--line);
  --ins-card-border-radius: var(--radius-lg);
  --ins-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --ins-card-cap-bg: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  background: #fff;
}
.card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.card > .card-body { padding: 1.25rem; }
.card > .card-footer { background: var(--cream-2); border-top: 1px solid var(--line); }
.card .card-title, .card .header-title, .card-title {
  font-size: 1rem; font-weight: 700; margin: 0; color: var(--ink-900); letter-spacing: -.01em;
}
.card.soft { background: var(--cream-2); }
.card.plum { background: var(--plum-900); border-color: var(--plum-900); color: #fff; }
.card.plum .card-title, .card.plum h1, .card.plum h2, .card.plum h3, .card.plum h4, .card.plum h5 { color: #fff; }
.card.plum .text-muted { color: rgba(255, 255, 255, .7) !important; }

.btn {
  --ins-btn-font-weight: 600;
  --ins-btn-border-radius: var(--radius);
  --ins-btn-padding-y: .55rem;
  --ins-btn-padding-x: 1rem;
  --ins-btn-focus-box-shadow: var(--focus-ring);
  font-weight: 600;
  border-radius: var(--radius);
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
.btn-sm { --ins-btn-border-radius: var(--radius-sm); border-radius: var(--radius-sm); padding: .38rem .75rem; font-size: .85rem; }
.btn-lg { --ins-btn-border-radius: 12px; border-radius: 12px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  --ins-btn-bg: var(--plum-900); --ins-btn-border-color: var(--plum-900); --ins-btn-color: #fff;
  --ins-btn-hover-bg: var(--om-primary-hover); --ins-btn-hover-border-color: var(--om-primary-hover); --ins-btn-hover-color: #fff;
  --ins-btn-active-bg: var(--om-primary-hover); --ins-btn-active-border-color: var(--om-primary-hover); --ins-btn-active-color: #fff;
  --ins-btn-disabled-bg: var(--plum-300); --ins-btn-disabled-border-color: var(--plum-300);
}
.btn-success {
  --ins-btn-bg: var(--olive-600); --ins-btn-border-color: var(--olive-600); --ins-btn-color: #fff;
  --ins-btn-hover-bg: var(--olive-700); --ins-btn-hover-border-color: var(--olive-700); --ins-btn-hover-color: #fff;
  --ins-btn-active-bg: var(--olive-700); --ins-btn-active-border-color: var(--olive-700); --ins-btn-active-color: #fff;
}
.btn-olive {
  --ins-btn-bg: var(--lime-300); --ins-btn-border-color: var(--lime-300); --ins-btn-color: #2C2F0A;
  --ins-btn-hover-bg: #C7D647; --ins-btn-hover-border-color: #C7D647; --ins-btn-hover-color: #2C2F0A;
  --ins-btn-active-bg: #C7D647; --ins-btn-active-border-color: #C7D647; --ins-btn-active-color: #2C2F0A;
}
.btn-secondary, .btn-light, .btn-default {
  --ins-btn-bg: #fff; --ins-btn-border-color: var(--line-2); --ins-btn-color: var(--ink-700);
  --ins-btn-hover-bg: var(--cream-2); --ins-btn-hover-border-color: var(--line-2); --ins-btn-hover-color: var(--plum-900);
  --ins-btn-active-bg: var(--cream-2); --ins-btn-active-border-color: var(--line-2); --ins-btn-active-color: var(--plum-900);
}
.btn-info {
  --ins-btn-bg: var(--plum-700); --ins-btn-border-color: var(--plum-700); --ins-btn-color: #fff;
  --ins-btn-hover-bg: var(--plum-900); --ins-btn-hover-border-color: var(--plum-900); --ins-btn-hover-color: #fff;
  --ins-btn-active-bg: var(--plum-900); --ins-btn-active-border-color: var(--plum-900); --ins-btn-active-color: #fff;
}
.btn-warning {
  --ins-btn-bg: #E08A2B; --ins-btn-border-color: #E08A2B; --ins-btn-color: #fff;
  --ins-btn-hover-bg: #C4771F; --ins-btn-hover-border-color: #C4771F; --ins-btn-hover-color: #fff;
  --ins-btn-active-bg: #C4771F; --ins-btn-active-border-color: #C4771F; --ins-btn-active-color: #fff;
}
.btn-danger {
  --ins-btn-bg: var(--danger); --ins-btn-border-color: var(--danger); --ins-btn-color: #fff;
  --ins-btn-hover-bg: #A93226; --ins-btn-hover-border-color: #A93226; --ins-btn-hover-color: #fff;
  --ins-btn-active-bg: #A93226; --ins-btn-active-border-color: #A93226; --ins-btn-active-color: #fff;
}
.btn-outline-primary, .btn-outline-info, .btn-outline-secondary {
  --ins-btn-color: var(--plum-900); --ins-btn-border-color: var(--plum-300); --ins-btn-bg: #fff;
  --ins-btn-hover-bg: var(--plum-900); --ins-btn-hover-border-color: var(--plum-900); --ins-btn-hover-color: #fff;
  --ins-btn-active-bg: var(--plum-900); --ins-btn-active-border-color: var(--plum-900); --ins-btn-active-color: #fff;
}
.btn-ghost {
  --ins-btn-color: var(--ink-700); --ins-btn-bg: transparent; --ins-btn-border-color: transparent;
  --ins-btn-hover-bg: rgba(var(--om-primary-rgb), .06); --ins-btn-hover-color: var(--plum-900); --ins-btn-hover-border-color: transparent;
  --ins-btn-active-bg: rgba(var(--om-primary-rgb), .1); --ins-btn-active-color: var(--plum-900); --ins-btn-active-border-color: transparent;
}
/* Vona's soft / label button variants: keep them tinted but on-brand.
   btn-label-* is used widely in the views but not defined by Vona 3, so give
   it the same soft treatment. */
[class*="btn-soft-"], [class*="btn-label-"] { border-radius: var(--radius-sm); font-weight: 600; }
[class*="btn-label-"] { --ins-btn-border-color: transparent; --ins-btn-hover-color: #fff; --ins-btn-active-color: #fff; }
.btn-label-primary, .btn-label-info { --ins-btn-bg: var(--plum-50); --ins-btn-color: var(--plum-900); --ins-btn-hover-bg: var(--plum-900); --ins-btn-active-bg: var(--plum-900); }
.btn-label-success { --ins-btn-bg: var(--ok-bg); --ins-btn-color: var(--ok-fg); --ins-btn-hover-bg: var(--olive-600); --ins-btn-active-bg: var(--olive-600); }
.btn-label-warning { --ins-btn-bg: var(--warn-bg); --ins-btn-color: var(--warn-fg); --ins-btn-hover-bg: #E08A2B; --ins-btn-active-bg: #E08A2B; }
.btn-label-danger { --ins-btn-bg: var(--bad-bg); --ins-btn-color: var(--bad-fg); --ins-btn-hover-bg: var(--danger); --ins-btn-active-bg: var(--danger); }
.btn-label-secondary, .btn-label-dark { --ins-btn-bg: var(--cream-2); --ins-btn-color: var(--ink-700); --ins-btn-hover-bg: var(--ink-700); --ins-btn-active-bg: var(--ink-700); }
/* views pair btn-label-* with text-* utilities; let the label colour win */
[class*="btn-label-"].text-success { color: var(--ok-fg) !important; }
[class*="btn-label-"].text-info, [class*="btn-label-"].text-primary { color: var(--plum-900) !important; }
[class*="btn-label-"].text-warning { color: var(--warn-fg) !important; }
[class*="btn-label-"].text-danger { color: var(--bad-fg) !important; }
[class*="btn-label-"].text-secondary { color: var(--ink-700) !important; }
[class*="btn-label-"]:hover.text-success, [class*="btn-label-"]:hover.text-info, [class*="btn-label-"]:hover.text-primary,
[class*="btn-label-"]:hover.text-warning, [class*="btn-label-"]:hover.text-danger, [class*="btn-label-"]:hover.text-secondary { color: #fff !important; }
.btn-circle { border-radius: 999px !important; }

.form-label, .col-form-label {
  font-weight: 600; font-size: .88rem; color: var(--ink-700); margin-bottom: .4rem;
  text-transform: none; letter-spacing: normal;
}
.form-control, .form-select {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .6rem .85rem;
  font-size: .95rem;
  color: var(--ink-900);
  background-color: #fff;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control-sm, .form-select-sm { padding: .35rem .6rem; border-radius: var(--radius-sm); font-size: .85rem; }
.form-control::placeholder { color: #A79FBA; }
.form-control:hover, .form-select:hover { border-color: var(--plum-300); }
.form-control:focus, .form-select:focus { border-color: var(--plum-500); box-shadow: var(--focus-ring); outline: 0; }
.form-control[readonly], .form-control:disabled, .form-select:disabled { background-color: var(--cream-2); color: var(--ink-500); }
textarea.form-control { min-height: 6.5rem; line-height: 1.6; }
.input-group-text { background: #fff; border-color: var(--line-2); color: var(--ink-500); border-radius: var(--radius); }
.form-check-input { width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--plum-300); margin-top: .15rem; }
.form-check-input:checked { background-color: var(--plum-900); border-color: var(--plum-900); }
.form-check-input:focus { border-color: var(--plum-500); box-shadow: var(--focus-ring); }
.form-switch .form-check-input { width: 2.2rem; }
.form-check-label { font-size: .95rem; }
.is-invalid, .parsley-error { border-color: var(--danger) !important; }
.invalid-feedback, .parsley-errors-list { color: var(--danger); font-size: max(.82rem, 10px); font-weight: 600; list-style: none; padding: 0; margin: .35rem 0 0; }
.form-text, .field-hint { color: var(--ink-500); font-size: max(.82rem, 10px); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--line-2) !important; border-radius: var(--radius) !important; min-height: 42px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; color: var(--ink-900); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--plum-500) !important; box-shadow: var(--focus-ring); }
.select2-dropdown { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--plum-900); }

/* ===== 6. Tables and DataTables ========================================== */
.table {
  --ins-table-border-color: var(--line);
  --ins-table-striped-bg: #F7F7F8;
  --ins-table-hover-bg: var(--plum-50);
  color: var(--ink-900);
}
.table thead th, .table > :not(caption) > * > th {
  font-size: max(.72rem, 10px); text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--ink-500); background: transparent; border-bottom: 1px solid var(--line) !important;
  padding: .8rem .9rem; white-space: nowrap;
}
.table tbody td { padding: .8rem .9rem; vertical-align: middle; }
.table.table-card, .table-card > .table {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.table.table-card thead tr { background: #FCF8F2; }
.table-bordered { border-color: var(--line); }
.table-bordered > :not(caption) > * > * { border-color: var(--line); }
.table .idisabled { background: transparent; border: 0; box-shadow: none; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: .4rem .7rem; margin-left: .4rem;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--plum-500); box-shadow: var(--focus-ring); outline: 0; }
.dataTables_wrapper .dataTables_info { color: var(--ink-500); font-size: .85rem; }
.page-link { border-color: var(--line); color: var(--plum-700); border-radius: var(--radius-sm); margin: 0 2px; }
.page-item.active .page-link { background: var(--plum-900); border-color: var(--plum-900); color: #fff; }
.dt-buttons .btn, .dt-button {
  background: #fff !important; border: 1px solid var(--line-2) !important; color: var(--ink-700) !important;
  border-radius: var(--radius-sm) !important; font-weight: 600; padding: .35rem .7rem; margin-right: .3rem;
}
.dt-buttons .btn:hover, .dt-button:hover { color: var(--plum-900) !important; background: var(--cream-2) !important; }

/* ===== 7. Pills, badges, tags, avatars =================================== */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .32em .65em; }
.status, .pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .22rem .6rem .22rem .55rem; border-radius: 999px;
  font-size: max(.76rem, 10px); font-weight: 700; line-height: 1.4; white-space: nowrap;
  background: var(--plum-50); color: var(--plum-900); border: 1px solid var(--plum-100);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.status.ok, .status.approved, .status.active, .status.resolved, .status.completed, .pill.ok
  { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.status.warn, .status.pending, .status.waiting, .status.open, .status.submitted, .pill.warn
  { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.status.bad, .status.rejected, .status.cancelled, .status.overdue, .status.failed, .pill.bad
  { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-line); }
.status.info, .status.in-progress, .status.review, .pill.info
  { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-line); }
.status.muted, .status.closed, .status.draft, .status.archived
  { background: #EEEAE0; color: #5B5340; border-color: #DBD3BF; }
.tag {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: max(.72rem, 10px); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; background: var(--cream-2); color: var(--ink-700); border: 1px solid var(--line-2);
}
.tag.olive { background: var(--lime-100); color: var(--olive-700); border-color: #DCE5A0; }
.avatar-olive { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--plum-100); color: var(--plum-900); font-weight: 700; font-size: .85rem; }
.avatar-olive.lime { background: var(--lime-300); color: #2C2F0A; }
.avatar-olive.plum { background: var(--plum-900); color: #fff; }
.avatar-olive.sm { width: 28px; height: 28px; font-size: max(.72rem, 10px); }
.avatar-olive.lg { width: 48px; height: 48px; font-size: 1.05rem; }

/* Time-in-step flags on boards and lists */
.time-tag { display: inline-block; font-size: max(.7rem, 10px); font-weight: 700; line-height: 1.35; border-radius: 999px; padding: .05rem .5rem; white-space: nowrap; }
.time-tag.behind { background: #FDF1D8; color: #8A5A00; }
.time-tag.overdue { background: #FBE3DE; color: #B5371C; }

/* ===== 8. KPI tiles, empty state, stepper ================================ */
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .2rem; min-height: 112px;
}
.kpi .label { font-size: max(.72rem, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.kpi .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.85rem; font-weight: 500; line-height: 1.1; color: var(--ink-900); }
.kpi .delta { font-size: max(.8rem, 10px); color: var(--ink-500); }
.kpi .delta.up { color: var(--olive-700); }
.kpi .delta.down { color: #B5371C; }
.kpi.accent-plum { background: var(--plum-900); border-color: var(--plum-900); }
.kpi.accent-plum .label { color: var(--plum-300); }
.kpi.accent-plum .value, .kpi.accent-plum .delta { color: #fff; }
.kpi.accent-lime { background: var(--lime-300); border-color: var(--lime-300); }
.kpi.accent-lime .label { color: #4F5A12; }
.kpi.accent-lime .value, .kpi.accent-lime .delta { color: #1F2306; }
.kpi .spark { margin-top: auto; height: 28px; }

.empty {
  border: 1px dashed var(--line-2); border-radius: 14px; padding: 2rem 1.25rem;
  text-align: center; color: var(--ink-500); background: rgba(255, 255, 255, .5);
}
.empty h4, .empty h5 { color: var(--ink-700); font-size: 1rem; margin-bottom: .35rem; }
.empty p { margin-bottom: .75rem; font-size: .92rem; }

.stepper { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.stepper .step { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-500); font-weight: 600; }
.stepper .step .n {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-2); background: #fff; font-family: var(--font-mono); font-size: max(.78rem, 10px); color: var(--ink-500);
}
.stepper .step.done .n { background: var(--olive-600); border-color: var(--olive-600); color: #fff; }
.stepper .step.active { color: var(--plum-900); }
.stepper .step.active .n { background: var(--plum-900); border-color: var(--plum-900); color: #fff; }
.stepper .bar { flex: 1 1 24px; height: 2px; background: var(--line-2); min-width: 16px; }
.stepper .bar.done { background: var(--olive-600); }

/* ===== 9. Modals, tabs, alerts, toasts =================================== */
.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--line); padding: 1.1rem 1.35rem; }
.modal-header .modal-title { font-size: 1.05rem; font-weight: 700; }
.modal-header.bg-primary, .modal-header.bg-success, .modal-header.bg-info { background: var(--plum-900) !important; color: #fff; }
.modal-body { padding: 1.35rem; }
.modal-footer { border-top: 1px solid var(--line); padding: 1rem 1.35rem; background: var(--cream-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.nav-tabs { border-bottom: 1px solid var(--line); gap: .25rem; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ink-500); font-weight: 600; padding: .6rem .9rem;
}
.nav-tabs .nav-link:hover { color: var(--plum-900); border-color: var(--plum-100); }
.nav-tabs .nav-link.active { color: var(--plum-900); background: transparent; border-bottom-color: var(--plum-900); }
.nav-pills .nav-link { border-radius: var(--radius); color: var(--ink-700); font-weight: 600; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--plum-900); color: #fff; }

.alert { border-radius: 12px; border: 1px solid transparent; font-size: .92rem; }
.alert-success { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.alert-warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.alert-danger { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-line); }
.alert-info, .alert-primary { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-line); }
.notyf__toast { border-radius: 12px; font-family: var(--font-sans); }
.notyf__toast--success { background: var(--olive-700); }
.notyf__toast--error { background: var(--danger); }
.swal2-popup { border-radius: var(--radius-lg) !important; font-family: var(--font-sans) !important; }
.swal2-styled.swal2-confirm { background: var(--plum-900) !important; border-radius: var(--radius) !important; }

.footer { border-top: 1px solid var(--line); color: var(--ink-500); font-size: max(.82rem, 10px); background: transparent; }
.footer a { color: var(--plum-700); }

hr { border-color: var(--line); opacity: 1; }
.progress { background: var(--cream-2); border-radius: 999px; height: 8px; }
.progress-bar { background: linear-gradient(90deg, var(--olive-600), var(--olive-300)); }
.list-group-item { border-color: var(--line); }
.offcanvas { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

/* ===== 10. Legacy class compatibility ==================================== */
/* Classes left over from the pre-Bootstrap-5 template. They are mapped here so
   old pages look right before they are swept; remove each once no view uses it. */
.m-b-0 { margin-bottom: 0 !important; }
.m-b-5 { margin-bottom: .3rem !important; }
.m-b-10 { margin-bottom: .6rem !important; }
.m-b-15 { margin-bottom: .9rem !important; }
.m-b-20 { margin-bottom: 1.25rem !important; }
.m-b-30 { margin-bottom: 1.75rem !important; }
.m-t-0 { margin-top: 0 !important; }
.m-t-5 { margin-top: .3rem !important; }
.m-t-10 { margin-top: .6rem !important; }
.m-t-15 { margin-top: .9rem !important; }
.m-t-20 { margin-top: 1.25rem !important; }
.m-t-30 { margin-top: 1.75rem !important; }
.header-title { font-size: 1rem; font-weight: 700; color: var(--ink-900); margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.btn-block { display: block; width: 100%; }
.float-right { float: right !important; }
.float-left { float: left !important; }
/* No BS4 .mr-*/.ml-* shims: Bootstrap 5 never defined them, so old markup was laid out without
   those margins, and adding them broke grid rows such as the form designer's col-sm-9 + col-md-3. */
.pl-0 { padding-left: 0 !important; } .pr-0 { padding-right: 0 !important; }
.custom-select { display: block; width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius); padding: .6rem 2rem .6rem .85rem; background: #fff; }
.custom-control { display: flex; align-items: center; gap: .5rem; }
.input-group-append, .input-group-prepend { display: flex; }
.input-group-append:empty { display: none; }
.badge-primary { background: var(--plum-900); color: #fff; }
.badge-secondary { background: var(--cream-2); color: var(--ink-700); border: 1px solid var(--line-2); }
.badge-success { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-line); }
.badge-info { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-line); }
.badge-warning { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line); }
.badge-danger { background: var(--bad-bg); color: var(--bad-fg); border: 1px solid var(--bad-line); }
.badge-pill { border-radius: 999px; }
.mini-stat { background: var(--plum-900) !important; border-radius: var(--radius-lg); }
.mini-stat .mini-stat-icon i { color: var(--lime-300); font-size: 2rem; }
.card.m-b-20, .card.m-b-30 { margin-bottom: 1.25rem !important; }
.table-vertical td { padding: .6rem .5rem; }
.waves-effect { position: relative; }

@media (max-width: 767.98px) {
  .card > .card-body { padding: 1rem; }
  .page-head { align-items: flex-start; }
  .page-head .actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .side-nav .side-nav-link, .form-control, .form-select { transition: none; }
}
@media print {
  .sidenav-menu, .app-topbar, .footer, .btn, .modal { display: none !important; }
  body { background: #fff; }
  .content-page { margin-left: 0; padding-top: 0; }
  .card { box-shadow: none; border-color: #ddd; }
}