/* Synced from the Olive Data platform by tools/Sync-Theme.ps1 on 2026-09-24. Edit there, then re-sync. */
/* ==========================================================================
   Olive Data: interaction layer
   Motion, feedback, tables, forms and shell polish on top of olive-app.css.
   Loads after olive-app.css. Paired with js/olive-ui.js.
   Colours come from olive-tokens.css only: nothing here introduces a new one.
   ========================================================================== */

/* ===== 1. Motion tokens ================================================== */
:root {
  --dur-1: 120ms;   /* hover, press */
  --dur-2: 200ms;   /* enter, open */
  --dur-3: 320ms;   /* page, large surfaces */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }

@keyframes ol-rise   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ol-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ol-pop    { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ol-slide  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes ol-pulse  { 0% { box-shadow: 0 0 0 0 rgba(181, 55, 28, .35); } 100% { box-shadow: 0 0 0 10px rgba(181, 55, 28, 0); } }
@keyframes ol-pulse-plum { 0% { box-shadow: 0 0 0 0 rgba(var(--om-secondary-rgb), .4); } 100% { box-shadow: 0 0 0 8px rgba(var(--om-secondary-rgb), 0); } }
@keyframes ol-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes ol-spin   { to { transform: rotate(360deg); } }
@keyframes ol-bar    { 0% { width: 0; } 60% { width: 70%; } 100% { width: 90%; } }

/* ===== 2. Page enter ===================================================== */
/* No page-level transform: sticky table headers inside an animated ancestor paint wrongly. Tiles and KPIs still rise. */
/* Tiles and KPI cards arrive one after another. */
.ov-grid > .ov-tile, .kpi { animation: ol-rise var(--dur-3) var(--ease-out) both; }
.ov-grid > .ov-tile:nth-child(2), .row > [class*="col"]:nth-child(2) > .kpi { animation-delay: 40ms; }
.ov-grid > .ov-tile:nth-child(3), .row > [class*="col"]:nth-child(3) > .kpi { animation-delay: 80ms; }
.ov-grid > .ov-tile:nth-child(4), .row > [class*="col"]:nth-child(4) > .kpi { animation-delay: 120ms; }
.ov-grid > .ov-tile:nth-child(n+5) { animation-delay: 160ms; }
.ol-fade-in { animation: ol-fade var(--dur-2) var(--ease) both; }

/* ===== 3. Progress bar ==================================================== */
/* A thin plum line across the top while a page or a table request is in flight. */
#ol-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 2000;
  background: linear-gradient(90deg, var(--plum-700), var(--lime-300));
  opacity: 0; transition: opacity var(--dur-2) var(--ease), width var(--dur-3) var(--ease);
  pointer-events: none;
}
#ol-progress.on { opacity: 1; animation: ol-bar 6s var(--ease-out) forwards; }
#ol-progress.done { width: 100% !important; animation: none; opacity: 0; transition: width var(--dur-1) linear, opacity var(--dur-3) var(--ease) var(--dur-1); }

/* ===== 4. Buttons ========================================================= */
.btn {
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:not(:disabled):not(.disabled):active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn-ghost:hover, .btn-link:hover, .dropdown-item:hover { transform: none; box-shadow: none; }
/* Loading: the icon becomes a spinner, the button waits. Set by olive-ui.js on submit or with OliveUI.busy(btn). */
.btn.is-loading { pointer-events: none; opacity: .85; position: relative; }
.btn.is-loading > i:first-child, .btn.is-loading > .bx:first-child { visibility: hidden; }
.btn.is-loading::before {
  content: ""; position: absolute; left: .9rem; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ol-spin .7s linear infinite;
}
.btn.is-loading.btn-icon::before { left: 50%; margin-left: -7px; }
.btn.is-loading.btn-icon > i { visibility: hidden; }
.btn-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: .45rem; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ol-spin .7s linear infinite;
}
/* Icon-only buttons are square, with the icon centred. olive-ui.js adds the class when a button holds only an icon. */
.btn-icon { width: 40px; height: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-icon i { font-size: 1.15rem; line-height: 1; }
/* Keyboard focus is always visible; mouse focus is not. */
:focus-visible { outline: 2px solid var(--plum-500); outline-offset: 2px; border-radius: var(--radius-sm); }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.btn:focus:not(:focus-visible) { box-shadow: none; }

/* ===== 5. Menus, modals, toasts ========================================== */
.dropdown-menu { animation: ol-pop var(--dur-2) var(--ease-out) both; transform-origin: top; box-shadow: var(--shadow-md); border-color: var(--line); border-radius: var(--radius); padding: .35rem; }
.dropdown-menu-end { transform-origin: top right; }
.dropdown-item { border-radius: var(--radius-sm); padding: .5rem .8rem; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--plum-50); color: var(--plum-900); }
.dropdown-item.active, .dropdown-item:active { background: var(--plum-900); color: #fff; }
.dropdown-divider { border-color: var(--line); margin: .35rem 0; }
.modal.fade .modal-dialog { transform: scale(.96) translateY(-8px); transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease); opacity: 0; }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal-backdrop { background: var(--ink-900); }
.modal-backdrop.show { opacity: .45; }
/* Danger confirmations: an icon header and the consequence sentence. */
.modal-danger .modal-header { border-bottom: 0; padding-bottom: 0; }
.modal-danger .modal-title { display: flex; align-items: center; gap: .6rem; }
.modal-danger .modal-title::before {
  content: "\ea0e"; font-family: boxicons; font-size: 1.15rem; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--bad-bg); color: var(--bad-fg);
}
.modal-danger .consequence { color: var(--ink-500); font-size: .9rem; margin: .5rem 0 0; }

/* Toasts (Notyf): a white card, a coloured bar down the left, and a slide in from the right. */
.notyf { --notyf-w: 360px; }
.notyf__toast {
  background: #fff !important; color: var(--ink-900); border-radius: var(--radius) !important; border: 1px solid var(--line);
  box-shadow: var(--shadow-md) !important; max-width: var(--notyf-w); padding: .2rem .3rem .2rem 0 !important; overflow: hidden;
  animation: ol-slide var(--dur-3) var(--ease-out) both;
}
/* Notyf removes a toast when its exit animation ends, so the dismissing state needs one of its own. */
.notyf__toast.notyf__toast--disappear { animation: ol-toast-out var(--dur-2) var(--ease) forwards; }
@keyframes ol-toast-out { to { opacity: 0; transform: translateX(16px); } }
.notyf__toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--plum-700); }
.notyf__toast--success::before { background: var(--olive-600); }
.notyf__toast--error::before { background: var(--danger); }
.notyf__toast--warning::before { background: #E08A2B; }
.notyf__wrapper { padding: .55rem .8rem .55rem 1rem !important; }
.notyf__icon { display: none !important; }
.notyf__message { font-size: .9rem; font-weight: 500; line-height: 1.45; color: var(--ink-900); }
.notyf__ripple { display: none !important; }
.notyf__dismiss-btn { background: transparent !important; color: var(--ink-500) !important; opacity: .8; }
.notyf__dismiss-btn::before, .notyf__dismiss-btn::after { background: var(--ink-500) !important; }
.notyf__dismiss { margin-right: .3rem !important; }
/* Micro-confirmation next to a control ("Saved"), from OliveUI.flash(el, text). */
.ol-flash {
  position: absolute; z-index: 1500; background: var(--ink-900); color: #fff; font-size: max(.78rem, 10px); font-weight: 600; letter-spacing: .01em;
  padding: .3rem .6rem; border-radius: 999px; white-space: nowrap; pointer-events: none;
  animation: ol-pop var(--dur-2) var(--ease-out) both; box-shadow: var(--shadow-md);
}
.ol-flash i { color: var(--lime-300); margin-right: .25rem; }
.ol-flash.out { opacity: 0; transition: opacity var(--dur-2) var(--ease); }

/* ===== 6. Tables ========================================================== */
/* Sticky headers need the page, not the table wrapper, to be the thing that scrolls. The records list
   collapses columns instead of scrolling sideways, so its wrapper can let content through. */
.sticky-head.table-responsive { overflow: visible; }
.sticky-head table thead > tr > th { position: sticky !important; top: var(--topbar-h); z-index: 2; background: #FCF8F2; }
.table-card tbody tr { transition: background-color var(--dur-1) var(--ease); }
.table-card tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--plum-500); }
.table-card tbody tr.is-clickable { cursor: pointer; }
/* One look for every table. Body text is ink; the row's main link is bold ink, plum on hover, whatever
   tint the old markup gave its cell; sub-lines stay light; rows alternate, and hover or selection wins. */
.table > tbody > tr > td { color: var(--ink-900); text-transform: none; }
.table > tbody > tr > td.text-primary, .table > tbody > tr > td.text-info, .table > tbody > tr > td.text-success { color: var(--ink-900) !important; }
.table > tbody > tr > td a:not(.btn):not(.badge):not(.status):not(.tag):not(.time-tag):not(.dropdown-item):not(.page-link) { color: var(--ink-900) !important; font-weight: 600; text-decoration: none; }
.table > tbody > tr > td a:not(.btn):not(.badge):not(.status):not(.tag):not(.time-tag):not(.dropdown-item):not(.page-link):hover { color: var(--plum-900) !important; }
.table > tbody > tr > td small, .table > tbody > tr > td .small, .table > tbody > tr > td .text-muted, .table > tbody > tr > td .ref { font-weight: 400; color: var(--ink-500) !important; }
/* DataTables' layout rows carry Bootstrap's negative gutters; inside a scrolling table wrapper they poke out by
   the gutter and bring up a horizontal scrollbar for nothing. No gutter there (the cells keep their own padding). */
.table-responsive .dt-container > .row, .table-responsive .dt-container > .dt-layout-row { --ins-gutter-x: 0; --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
.table-responsive .dt-container > .row > [class*="col"], .table-responsive .dt-container > .dt-layout-row > .dt-layout-cell { padding-left: 0; padding-right: 0; }
/* Stripes: white, then a very light neutral grey. */
.table > tbody > tr:nth-of-type(odd) > td { background-color: #fff; }
.table > tbody > tr:nth-of-type(even) > td { background-color: #F7F7F8; }
.table-card > tbody > tr:hover > td, .table > tbody > tr:hover > td { background-color: var(--plum-50); }
.table-card > tbody > tr.is-selected > td { background-color: var(--plum-50); }

/* Sort arrows that turn, on every DataTable. */
table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > th.sorting_desc::after { display: none !important; }
table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc { padding-right: 1.4rem !important; cursor: pointer; }
table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting::after {
  content: "\eb5b" !important; font-family: boxicons; display: inline-block !important; position: absolute; right: .55rem; top: 50%; margin-top: -.6em;
  font-size: .95rem; color: var(--ink-300); opacity: 0; transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
table.dataTable thead > tr > th.sorting:hover::after { opacity: .7; }
table.dataTable thead > tr > th.sorting_asc::after { opacity: 1; color: var(--plum-700); transform: rotate(180deg); }
table.dataTable thead > tr > th.sorting_desc::after { opacity: 1; color: var(--plum-700); transform: rotate(0deg); }
/* Row actions wait until the row is hovered or focused. */
.table-card tbody td.row-actions .btn { opacity: .45; transition: opacity var(--dur-1) var(--ease); }
.table-card tbody tr:hover td.row-actions .btn, .table-card tbody tr:focus-within td.row-actions .btn { opacity: 1; }
/* Density, remembered per person. */
.density-compact .table-card tbody td { padding-top: .42rem; padding-bottom: .42rem; }
.density-compact .table-card thead th { padding-top: .55rem; padding-bottom: .55rem; }
.density-compact .table-card { font-size: .88rem; }
/* Loading: a shimmer bar across the top of the table instead of the "Processing" box. */
div.dataTables_processing, .dataTables_wrapper .dataTables_processing {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; margin: 0 !important; padding: 0 !important; z-index: 5;
  background: linear-gradient(90deg, transparent, var(--plum-500), var(--lime-300), transparent); background-size: 800px 100%;
  animation: ol-shimmer 1.1s linear infinite; border: 0; box-shadow: none; text-indent: -9999px; overflow: hidden; color: transparent;
}
div.dataTables_processing > div, .dataTables_wrapper .dataTables_processing > div { display: none; }
.dataTables_wrapper { position: relative; }
/* Pagination as pills, the count as "1–25 of 132". */
.dataTables_wrapper .dataTables_paginate { padding-top: .75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .page-link {
  border-radius: 999px !important; min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .6rem; margin: 0 2px; border: 1px solid transparent; color: var(--ink-700); background: transparent; font-weight: 600; font-size: .85rem;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .page-link:hover { background: var(--plum-50); color: var(--plum-900); border-color: transparent; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: var(--plum-900) !important; color: #fff !important; border-color: var(--plum-900) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { opacity: .4; }
.dataTables_wrapper .dataTables_info { padding-top: 1rem; font-variant-numeric: tabular-nums; }
/* DataTables 2 names its parts dt-*: the same treatment for those. */
div.dt-processing, .dt-container div.dt-processing {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; margin: 0 !important; padding: 0 !important; z-index: 5; width: auto; transform: none;
  background: linear-gradient(90deg, transparent, var(--plum-500), var(--lime-300), transparent); background-size: 800px 100%;
  animation: ol-shimmer 1.1s linear infinite; border: 0 !important; box-shadow: none !important; text-indent: -9999px; overflow: hidden; color: transparent; border-radius: 0;
}
div.dt-processing > div, div.dt-processing.card { background-color: transparent; }
.dt-container { position: relative; margin-bottom: 1.5rem; }
.dt-container .dt-layout-row { margin: .35rem 0; }
.dt-container .dt-layout-row:first-child { margin-top: 0; }
.dt-container .dt-layout-row:last-child { margin-bottom: 0; }
#recHost { margin-bottom: 1.5rem; }
.dataTables_wrapper { margin-bottom: 1.5rem; }
.dt-container .dt-info { padding-top: 1rem; color: var(--ink-500); font-size: .85rem; font-variant-numeric: tabular-nums; }
.dt-container .dt-paging { padding-top: .75rem; }
.dt-container .dt-paging .page-link, .dt-container .dt-paging-button {
  border-radius: 999px !important; min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .6rem; margin: 0 2px; border: 1px solid transparent; color: var(--ink-700); background: transparent; font-weight: 600; font-size: .85rem;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.dt-container .dt-paging .page-link:hover { background: var(--plum-50); color: var(--plum-900); border-color: transparent; }
.dt-container .dt-paging .page-item.active .page-link, .dt-container .dt-paging .dt-paging-button.current { background: var(--plum-900) !important; color: #fff !important; border-color: var(--plum-900) !important; }
.dt-container .dt-paging .page-item.disabled .page-link { opacity: .4; }
.dt-container .dt-search input { border: 1px solid var(--line-2); border-radius: var(--radius); padding: .4rem .7rem; min-height: 38px; }
.dt-container .dt-search input:focus { border-color: var(--plum-500); box-shadow: var(--focus-ring); outline: 0; }
.dt-container .dt-length label, .dt-container .dt-search label { color: var(--ink-500); font-size: .85rem; }
table.dataTable td.dt-empty { padding: 2.5rem 1rem !important; text-align: center; color: var(--ink-500); }
/* DataTables 2 sort markers */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order { display: none !important; }
table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc { padding-right: 1.4rem !important; cursor: pointer; position: relative; }
table.dataTable thead > tr > th.dt-orderable-asc::after, table.dataTable thead > tr > th.dt-orderable-desc::after {
  content: "\eb5b"; font-family: boxicons; position: absolute; right: .55rem; top: 50%; margin-top: -.6em; font-size: .95rem; color: var(--ink-300); opacity: 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
table.dataTable thead > tr > th.dt-orderable-asc:hover::after, table.dataTable thead > tr > th.dt-orderable-desc:hover::after { opacity: .7; }
table.dataTable thead > tr > th.dt-ordering-asc::after { opacity: 1 !important; color: var(--plum-700); transform: rotate(180deg); }
table.dataTable thead > tr > th.dt-ordering-desc::after { opacity: 1 !important; color: var(--plum-700); }
/* Right-aligned columns (numbers, and anything marked text-end): the title lines up with the figures under it, so
   the header takes the cells' right padding and its sort arrow moves to the title's left. */
table.dataTable thead > tr > th.dt-type-numeric, table.dataTable thead > tr > th.dt-type-date, table.dataTable thead > tr > th.text-end, table.dataTable thead > tr > th.dt-right, table.dataTable thead > tr > th.dt-head-right { text-align: right; }
table.dataTable thead > tr > th.dt-type-numeric .dt-column-header, table.dataTable thead > tr > th.dt-type-date .dt-column-header, table.dataTable thead > tr > th.text-end .dt-column-header, table.dataTable thead > tr > th.dt-right .dt-column-header, table.dataTable thead > tr > th.dt-head-right .dt-column-header { text-align: right; justify-content: flex-end; }
/* The template pads a header's title box and its title by 30px each on the right; that would push the title off the figures. */
table.dataTable thead > tr > th.dt-type-numeric .dt-column-header, table.dataTable thead > tr > th.dt-type-numeric .dt-column-title, table.dataTable thead > tr > th.dt-type-date .dt-column-header, table.dataTable thead > tr > th.dt-type-date .dt-column-title, table.dataTable thead > tr > th.text-end .dt-column-header, table.dataTable thead > tr > th.text-end .dt-column-title, table.dataTable thead > tr > th.dt-right .dt-column-header, table.dataTable thead > tr > th.dt-right .dt-column-title, table.dataTable thead > tr > th.dt-head-right .dt-column-header, table.dataTable thead > tr > th.dt-head-right .dt-column-title { padding-right: 0 !important; }
table.dataTable thead > tr > th.dt-type-numeric.dt-orderable-asc, table.dataTable thead > tr > th.dt-type-numeric.dt-orderable-desc, table.dataTable thead > tr > th.dt-type-numeric.sorting, table.dataTable thead > tr > th.dt-type-numeric.sorting_asc, table.dataTable thead > tr > th.dt-type-numeric.sorting_desc, table.dataTable thead > tr > th.dt-type-date.dt-orderable-asc, table.dataTable thead > tr > th.dt-type-date.dt-orderable-desc, table.dataTable thead > tr > th.dt-type-date.sorting, table.dataTable thead > tr > th.dt-type-date.sorting_asc, table.dataTable thead > tr > th.dt-type-date.sorting_desc, table.dataTable thead > tr > th.text-end.dt-orderable-asc, table.dataTable thead > tr > th.text-end.dt-orderable-desc, table.dataTable thead > tr > th.text-end.sorting, table.dataTable thead > tr > th.text-end.sorting_asc, table.dataTable thead > tr > th.text-end.sorting_desc, table.dataTable thead > tr > th.dt-right.dt-orderable-asc, table.dataTable thead > tr > th.dt-right.dt-orderable-desc, table.dataTable thead > tr > th.dt-right.sorting, table.dataTable thead > tr > th.dt-right.sorting_asc, table.dataTable thead > tr > th.dt-right.sorting_desc, table.dataTable thead > tr > th.dt-head-right.dt-orderable-asc, table.dataTable thead > tr > th.dt-head-right.dt-orderable-desc, table.dataTable thead > tr > th.dt-head-right.sorting, table.dataTable thead > tr > th.dt-head-right.sorting_asc, table.dataTable thead > tr > th.dt-head-right.sorting_desc { padding-right: .9rem !important; padding-left: 1.6rem !important; }
table.dataTable thead > tr > th.dt-type-numeric.dt-orderable-asc::after, table.dataTable thead > tr > th.dt-type-numeric.dt-orderable-desc::after, table.dataTable thead > tr > th.dt-type-numeric.sorting::after, table.dataTable thead > tr > th.dt-type-numeric.sorting_asc::after, table.dataTable thead > tr > th.dt-type-numeric.sorting_desc::after, table.dataTable thead > tr > th.dt-type-date.dt-orderable-asc::after, table.dataTable thead > tr > th.dt-type-date.dt-orderable-desc::after, table.dataTable thead > tr > th.dt-type-date.sorting::after, table.dataTable thead > tr > th.dt-type-date.sorting_asc::after, table.dataTable thead > tr > th.dt-type-date.sorting_desc::after, table.dataTable thead > tr > th.text-end.dt-orderable-asc::after, table.dataTable thead > tr > th.text-end.dt-orderable-desc::after, table.dataTable thead > tr > th.text-end.sorting::after, table.dataTable thead > tr > th.text-end.sorting_asc::after, table.dataTable thead > tr > th.text-end.sorting_desc::after, table.dataTable thead > tr > th.dt-right.dt-orderable-asc::after, table.dataTable thead > tr > th.dt-right.dt-orderable-desc::after, table.dataTable thead > tr > th.dt-right.sorting::after, table.dataTable thead > tr > th.dt-right.sorting_asc::after, table.dataTable thead > tr > th.dt-right.sorting_desc::after, table.dataTable thead > tr > th.dt-head-right.dt-orderable-asc::after, table.dataTable thead > tr > th.dt-head-right.dt-orderable-desc::after, table.dataTable thead > tr > th.dt-head-right.sorting::after, table.dataTable thead > tr > th.dt-head-right.sorting_asc::after, table.dataTable thead > tr > th.dt-head-right.sorting_desc::after { right: auto; left: .45rem; }

/* A card whose body is only a table drops its chrome, so the table sits on the page as the records
   list does. olive-ui.js adds the class; the card's header row stays as a plain heading. */
.card.tt-flat { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.card.tt-flat > .card-header { background: transparent; border: 0; padding: 0 0 .85rem; }
.card.tt-flat > .card-header .card-title, .card.tt-flat > .card-header h4, .card.tt-flat > .card-header h5 { font-size: 1.05rem; }
.card.tt-flat > .card-body { padding: 0; }
.card.tt-flat > .card-body > .table-responsive > table.table-card, .card.tt-flat table.table-card { margin-bottom: 0; }
.card.tt-flat > .card-footer { background: transparent; border: 0; padding: .75rem 0 0; }

/* Table tools (js/olive-tables.js): the records list's toolbar for any table. */
.tt { margin-bottom: .75rem; }
.tt-views { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.tt-view { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-700); font-size: max(.82rem, 10px); font-weight: 600; text-decoration: none; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.tt-view:hover { border-color: var(--plum-300); color: var(--plum-900); background: var(--plum-50); }
.tt-view.active { background: var(--plum-900); border-color: var(--plum-900); color: #fff; }
.tt-view i { font-size: .95rem; }
.tt-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.tt-bar .left, .tt-bar .right { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tt-search { position: relative; }
.tt-search i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--ink-300); font-size: 1rem; pointer-events: none; }
.tt-search input { padding-left: 1.9rem; min-width: 220px; min-height: 40px; }
/* Page-length selects sit beside 40px buttons: same height, border and radius, and a chevron with room for it. */
.tt-len, #recLen, .dt-container .dt-length select, .dataTables_wrapper .dataTables_length select {
  width: auto; height: 40px; min-height: 40px; padding: .35rem 2.2rem .35rem .85rem; font-size: .875rem; font-weight: 600; color: var(--ink-700);
  border: 1px solid var(--line-2); border-radius: var(--radius); background-color: #fff; line-height: 1.4; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236E6685' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px 14px;
}
.tt-len:hover, #recLen:hover, .dt-container .dt-length select:hover { background-color: var(--cream-2); color: var(--plum-900); }
.tt-len:focus, #recLen:focus, .dt-container .dt-length select:focus { border-color: var(--plum-500); box-shadow: var(--focus-ring); outline: 0; }
.tt-menu { padding: .6rem; min-width: 260px; }
.tt-cols .dropdown-item { display: flex; align-items: center; cursor: pointer; margin: 0; }
.tt-filter-form { display: grid; gap: .45rem; min-width: 280px; }
.tt-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.tt-chips:empty { display: none; }
.tt-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .35rem .25rem .7rem; border-radius: 999px; background: var(--plum-50); border: 1px solid var(--plum-100); color: var(--plum-900); font-size: max(.8rem, 10px); animation: ol-pop var(--dur-2) var(--ease-out) both; }
.tt-chip .op { color: var(--ink-500); }
.tt-chip button { border: 0; background: transparent; color: var(--ink-500); font-size: 1rem; line-height: 1; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.tt-chip button:hover { background: var(--plum-900); color: #fff; }
.tt-clear { font-size: max(.8rem, 10px); color: var(--ink-500); margin-left: .25rem; }
.tt + .dt-container .dt-layout-row:first-child:empty { display: none; }
@media (max-width: 767.98px) { .tt-search input { min-width: 0; width: 100%; } .tt-bar .right { width: 100%; } .tt-search { flex: 1 1 auto; } }

/* Empty state inside a table. */
.table-card td.dataTables_empty, .ol-empty-row td { padding: 2.5rem 1rem !important; text-align: center; color: var(--ink-500); }
.ol-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.ol-empty svg { width: 64px; height: 64px; margin-bottom: .4rem; }
.ol-empty strong { color: var(--ink-700); font-size: .95rem; }
.ol-empty span { font-size: .88rem; }
/* Selection and the bulk bar. */
.table-card td.sel, .table-card th.sel { width: 36px; padding-right: 0 !important; }
.table-card .form-check-input { cursor: pointer; }
.table-card tbody tr.is-selected { background: var(--plum-50); }
.bulk-bar {
  position: sticky; bottom: 1rem; z-index: 30; margin: .75rem auto 0; width: fit-content; max-width: 100%;
  display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem 1rem; border-radius: 999px;
  background: var(--ink-900); color: #fff; box-shadow: var(--shadow-lg); animation: ol-rise var(--dur-2) var(--ease-out) both;
}
.bulk-bar .count { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .25rem; }
.bulk-bar .btn { --ins-btn-bg: rgba(255, 255, 255, .1); --ins-btn-border-color: transparent; --ins-btn-color: #fff; --ins-btn-hover-bg: rgba(255, 255, 255, .2); --ins-btn-hover-color: #fff; --ins-btn-hover-border-color: transparent; --ins-btn-active-bg: rgba(255, 255, 255, .25); --ins-btn-active-color: #fff; border-radius: 999px; }
.bulk-bar .btn.primary { --ins-btn-bg: var(--lime-300); --ins-btn-color: #2C2F0A; --ins-btn-hover-bg: #C7D647; --ins-btn-hover-color: #2C2F0A; }

/* ===== 7. Forms =========================================================== */
.form-control, .form-select { min-height: 44px; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.form-control-sm, .form-select-sm { min-height: 34px; }
textarea.form-control { min-height: 88px; resize: vertical; }
.form-control::placeholder { color: var(--ink-300); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); background-image: none; }
.ol-error { color: var(--bad-fg); font-size: max(.8rem, 10px); font-weight: 600; margin-top: .3rem; animation: ol-rise var(--dur-2) var(--ease-out) both; }
/* Required: a small plum dot after the label instead of a red asterisk. */
.ol-req::after, label.required::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--plum-500); margin-left: .35rem; vertical-align: middle; }
/* Select2 and the date pickers, matched to the inputs. */
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
  min-height: 44px; border: 1px solid var(--line-2) !important; border-radius: var(--radius) !important; background: #fff; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
/* The same type, padding, height and chevron as .form-select, so a searchable dropdown reads like the plain
   ones. The pages that use Select2 link its own stylesheet after this one, so the properties it also sets
   are marked !important and the selectors carry "html" to outrank equal rules that come later. */
.select2-container { font-size: .95rem; }
html .select2-container--default .select2-selection--single { height: auto !important; min-height: 44px; padding: 0 !important; }
html .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5 !important; padding: .6rem 2.6rem .6rem .85rem !important; color: var(--ink-900); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink-900); }
html .select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute; right: 2.2rem; top: 0; bottom: 0; float: none; height: auto !important; margin: 0 !important; padding: 0 .2rem; display: flex; align-items: center;
  font-size: 1.2rem; font-weight: 400; line-height: 1; color: var(--ink-500);
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--ink-900); }
html .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0; right: .35rem !important; width: 2rem; right: .35rem; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236E6685' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e") no-repeat center; background-size: 16px 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding-left: .6rem; }
.select2-container--default .select2-selection--multiple .select2-search__field { font-size: .95rem; margin-top: .55rem; }
.select2-container--default .select2-search--dropdown .select2-search__field { font-size: .95rem; }
.select2-container--default .select2-results__option { padding: .5rem .85rem; }
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--plum-500) !important; box-shadow: var(--focus-ring); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--plum-50); border: 1px solid var(--plum-100); color: var(--plum-900); border-radius: 999px; padding: .1rem .5rem; margin-top: .45rem; }
.select2-dropdown { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md); overflow: hidden; animation: ol-pop var(--dur-2) var(--ease-out) both; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--plum-50) !important; color: var(--plum-900) !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--plum-900); color: #fff; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .4rem .6rem; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--plum-500); box-shadow: var(--focus-ring); outline: 0; }
.datepicker, .daterangepicker, .flatpickr-calendar { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important; font-family: var(--font-sans); }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .flatpickr-day.selected { background: var(--plum-900) !important; border-color: var(--plum-900) !important; color: #fff; }
.datepicker table tr td.day:hover, .flatpickr-day:hover { background: var(--plum-50); }
input[type="date"], input[type="datetime-local"], input[type="time"] { font-family: var(--font-sans); }

/* The capture form's toolbar stays at the top while the form scrolls. */
.form-actions-row.is-sticky {
  position: sticky; top: calc(var(--topbar-h) + 4px); z-index: 25; padding: .5rem 0;
  border-radius: var(--radius); transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.form-actions-row.is-stuck { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: var(--shadow-md); }
/* The "on this page" rail: numbered pages and their sections, the one in view highlighted. */
.form-rail {
  position: fixed; right: 18px; top: calc(var(--topbar-h) + 96px); width: 220px; max-height: calc(100vh - var(--topbar-h) - 120px); overflow: auto;
  padding: .75rem .25rem .75rem .9rem; border-left: 1px solid var(--line-2); font-size: max(.82rem, 10px); z-index: 5;
  animation: ol-fade var(--dur-3) var(--ease) both;
}
.form-rail .rail-title { font-size: max(.68rem, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: .5rem; }
.form-rail a { display: block; color: var(--ink-700); text-decoration: none; padding: .28rem .5rem; border-radius: var(--radius-sm); line-height: 1.3; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.form-rail a.sec { padding-left: 1.15rem; color: var(--ink-500); font-size: max(.78rem, 10px); }
.form-rail a:hover { background: var(--plum-50); color: var(--plum-900); }
.form-rail a.current { color: var(--plum-900); font-weight: 700; box-shadow: inset 2px 0 0 var(--plum-700); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
#dataForm h5.mb-1 { scroll-margin-top: calc(var(--topbar-h) + 76px); }
.select2.is-invalid .select2-selection { border-color: var(--danger) !important; box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); }
.form-rail .rail-progress { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--ink-500); font-size: max(.76rem, 10px); }
.form-rail .rail-progress .bar { height: 4px; border-radius: 999px; background: var(--line); margin-top: .35rem; overflow: hidden; }
.form-rail .rail-progress .bar > i { display: block; height: 100%; width: 0; background: var(--olive-600); border-radius: 999px; transition: width var(--dur-3) var(--ease); }
.form-rail .rail-progress.done { color: var(--olive-700); }
@media (max-width: 1499.98px) { .form-rail { display: none; } }
@media (min-width: 1500px) { .has-rail .content-page > .container-fluid { padding-right: 260px; } }
/* The same rail in a page's own side column (the form designer and the preview): it sticks in its column and shows at every width. */
.form-rail.rail-inline { position: sticky; top: calc(var(--topbar-h) + 16px); right: auto; width: auto; max-height: calc(100vh - var(--topbar-h) - 32px); z-index: 1; animation: none; margin-top: .25rem; display: block; }
/* Sized to match the capture form's rail as it renders (that page has a larger root size): 14.75px links, 14px sections, 12.25px title. */
.form-rail.rail-inline { font-size: .92rem; }
.form-rail.rail-inline .rail-title { font-size: max(.765rem, 10px); }
.form-rail.rail-inline a.sec { font-size: .8775rem; }
.form-rail a .n { color: var(--ink-500); font-weight: 600; margin-right: .3rem; font-variant-numeric: tabular-nums; }
.form-rail a.current .n { color: var(--plum-700); }

/* A box that scrolls on its own (the notifications list): native scrolling, a thin bar, no scroll chaining to the page. */
.ol-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ol-scroll::-webkit-scrollbar { width: 8px; }
.ol-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.ol-scroll::-webkit-scrollbar-thumb:hover { background: var(--plum-300); }

/* ===== 8. Shell ============================================================ */
/* Sidebar: the active entry carries a lime bar on the left and a soft plum background. */
.side-nav .side-nav-item > .side-nav-link { position: relative; border-radius: var(--radius-sm); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease); }
.side-nav .side-nav-item > .side-nav-link::before {
  content: ""; position: absolute; left: -6px; top: 22%; bottom: 22%; width: 3px; border-radius: 999px; background: var(--lime-300);
  transform: scaleY(0); transition: transform var(--dur-2) var(--ease-out);
}
.side-nav .side-nav-item.active > .side-nav-link::before { transform: scaleY(1); }
.side-nav .side-nav-item > .side-nav-link:hover { padding-left: calc(var(--ins-menu-item-padding-x, 1rem) + 3px); }
.side-nav .menu-arrow { transition: transform var(--dur-2) var(--ease); }
/* The rail toggle is available on desktop as well, next to the logo. */
.topbar-menu .button-collapse-toggle { display: inline-flex !important; }
/* Top bar: quick create and the search opener. */
.topbar-tool {
  display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink-700); font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.topbar-tool:hover { background: var(--plum-50); color: var(--plum-900); border-color: var(--plum-100); transform: translateY(-1px); }
.topbar-tool i { font-size: 1.15rem; line-height: 1; }
.topbar-tool kbd { font-family: var(--font-mono); font-size: max(.68rem, 10px); background: var(--cream-2); border: 1px solid var(--line-2); border-radius: 5px; padding: .05rem .35rem; color: var(--ink-500); }
.topbar-tool.plus { background: var(--plum-900); color: #fff; border-color: var(--plum-900); width: 36px; padding: 0; justify-content: center; }
.topbar-tool.plus:hover { background: var(--om-primary-hover); color: #fff; }
@media (max-width: 767.98px) { .topbar-tool .lbl, .topbar-tool kbd { display: none; } .topbar-tool { width: 36px; padding: 0; justify-content: center; } }
.topbar-badge.pulse { animation: ol-pulse-plum 1.2s var(--ease) 2; }
/* Quick create menu */
.qc-menu { min-width: 260px; }
.qc-menu .dropdown-header { font-size: max(.68rem, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); padding: .5rem .8rem .25rem; }
.qc-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.qc-menu .dropdown-item .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--plum-50); color: var(--plum-900); display: inline-grid; place-items: center; font-size: 1rem; flex: none; }
.qc-menu .dropdown-item small { color: var(--ink-500); margin-left: auto; font-size: max(.72rem, 10px); }

/* Command palette (Ctrl+K) */
.ol-palette { position: fixed; inset: 0; z-index: 1900; display: none; }
.ol-palette.open { display: block; }
.ol-palette .backdrop { position: absolute; inset: 0; background: rgba(27, 18, 48, .45); animation: ol-fade var(--dur-2) var(--ease) both; }
.ol-palette .panel {
  position: relative; width: min(640px, calc(100% - 32px)); margin: 10vh auto 0; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; animation: ol-pop var(--dur-2) var(--ease-out) both; border: 1px solid var(--line);
}
.ol-palette .search { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.ol-palette .search i { font-size: 1.25rem; color: var(--ink-500); }
.ol-palette .search input { flex: 1; border: 0; outline: 0; font-size: 1.05rem; font-family: var(--font-sans); color: var(--ink-900); background: transparent; }
.ol-palette .search kbd { font-family: var(--font-mono); font-size: max(.68rem, 10px); background: var(--cream-2); border: 1px solid var(--line-2); border-radius: 5px; padding: .1rem .4rem; color: var(--ink-500); }
.ol-palette .results { max-height: min(60vh, 480px); overflow: auto; padding: .4rem; }
.ol-palette .group { font-size: max(.68rem, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); padding: .6rem .7rem .25rem; }
.ol-palette .item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-900); text-decoration: none; }
.ol-palette .item .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--cream-2); color: var(--ink-700); display: inline-grid; place-items: center; font-size: 1rem; flex: none; }
.ol-palette .item.record .ic { background: var(--plum-50); color: var(--plum-900); }
.ol-palette .item .t { flex: 1; min-width: 0; }
.ol-palette .item .t b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-palette .item .t small { color: var(--ink-500); }
.ol-palette .item .ref { font-family: var(--font-mono); font-size: max(.75rem, 10px); color: var(--ink-500); }
.ol-palette .item.active, .ol-palette .item:hover { background: var(--plum-50); color: var(--plum-900); }
.ol-palette .empty-hint { padding: 1.5rem; text-align: center; color: var(--ink-500); font-size: .9rem; }
.ol-palette .foot { display: flex; gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--line); font-size: max(.72rem, 10px); color: var(--ink-500); background: var(--cream-2); }
.ol-palette .foot kbd { font-family: var(--font-mono); background: #fff; border: 1px solid var(--line-2); border-radius: 4px; padding: 0 .3rem; }

/* ===== 9. Record page ===================================================== */
.rec-head.is-sticky { position: sticky; top: calc(var(--topbar-h) + 4px); z-index: 25; transition: padding var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); border-radius: var(--radius); }
.rec-head.is-stuck { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: var(--shadow-md); padding: .5rem .85rem; }
.rec-head.is-stuck .meta { font-size: max(.8rem, 10px); }
[data-copy] { cursor: copy; }
[data-copy]:hover { color: var(--plum-900); text-decoration: underline dotted; }
/* Board cards lift on hover; the lateness tag pulses once when it first appears. */
.board-card { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.board-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--plum-300); }
.time-tag.overdue { animation: ol-pulse 1.4s var(--ease) 1 .4s; }
.card, .ov-tile, .kpi { transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.ov-tile:hover { border-color: var(--plum-300); box-shadow: var(--shadow-md); }
a.kpi:hover { border-color: var(--plum-300); box-shadow: var(--shadow-md); }

/* ===== 9b. The form designer as a canvas ================================= */
.fd-control { position: relative; padding-left: 26px; border-radius: var(--radius-sm); transition: background-color var(--dur-1) var(--ease); }
.fd-control:hover { background: rgba(var(--om-primary-rgb), .03); }
.fd-handle { position: absolute; left: 2px; top: .55rem; width: 20px; height: 24px; display: grid; place-items: center; color: var(--ink-300); cursor: grab; opacity: .55; transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.fd-control:hover .fd-handle { opacity: 1; color: var(--plum-700); }
.fd-handle:active { cursor: grabbing; }
.fd-section > .card-header, .fd-page-row > .col-12 > .card > .card-header { cursor: grab; }
.fd-section > .card-header:active, .fd-page-row > .col-12 > .card > .card-header:active { cursor: grabbing; }
.fd-ghost { opacity: .35; background: var(--plum-50) !important; outline: 2px dashed var(--plum-300); outline-offset: -2px; }
.fd-chosen { box-shadow: var(--shadow-md); }
.fd-drag { opacity: .95; }
.fd-removed { display: none !important; }
.fd-undo {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1600; display: flex; align-items: center; gap: .75rem;
  padding: .55rem .55rem .55rem 1rem; border-radius: 999px; background: var(--ink-900); color: #fff; font-size: .9rem; font-weight: 600;
  box-shadow: var(--shadow-lg); overflow: hidden; animation: ol-rise var(--dur-2) var(--ease-out) both;
}
.fd-undo .btn { --ins-btn-bg: var(--lime-300); --ins-btn-color: #2C2F0A; --ins-btn-border-color: var(--lime-300); --ins-btn-hover-bg: #C7D647; --ins-btn-hover-color: #2C2F0A; --ins-btn-hover-border-color: #C7D647; border-radius: 999px; font-weight: 700; }
.fd-undo .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .35); transform-origin: left; animation: fd-drain linear forwards; }
@keyframes fd-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.fd-panel { width: min(760px, 96vw); }
/* Inside the panel the control editor reads as one column: its page-width grid squashes at this width. */
html[data-panel] .panel-page .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
html[data-panel] .panel-page .card.border-dashed { border-style: solid; }
html[data-panel] .panel-page .btn-group-vertical, html[data-panel] .panel-page .btn-group { display: flex; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
html[data-panel] .panel-page .btn-group-vertical > .btn, html[data-panel] .panel-page .btn-group > .btn { border-radius: var(--radius) !important; width: auto; }
html[data-panel] .panel-page .form-check { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; margin-bottom: .35rem; }
.fd-panel .offcanvas-header { border-bottom: 1px solid var(--line); }
/* The designer's three columns: the palette on the left, the canvas, and a narrow contents rail on the right. */
.fd-layout > .fd-col-palette { flex: 0 0 auto; width: 25%; max-width: 25%; }
.fd-layout > .fd-col-canvas { flex: 1 1 0; width: auto; min-width: 0; }
.fd-layout > .fd-col-rail { flex: 0 0 auto; width: 12.5%; max-width: 12.5%; }
@media (max-width: 991.98px) { .fd-layout > .fd-col-palette, .fd-layout > .fd-col-rail { width: 100%; max-width: 100%; } }
/* Sticky like the contents rail, with no scroll of its own: the designer script sets "top" so that a palette
   taller than the window scrolls with the page until its last tile shows, then holds. */
.fd-col-palette .fd-palette { position: sticky; top: calc(var(--topbar-h) + 16px); }
/* A published form in the designer: read-only, with the way out. */
#fdCanvas[data-can-edit="0"] .fd-handle { display: none; }
#fdCanvas[data-can-edit="0"] .fd-section > .card-header, #fdCanvas[data-can-edit="0"] .fd-page-row > .col-12 > .card > .card-header { cursor: default; }
.fd-readonly { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid var(--warn-bg, #F6E7C1); border-radius: var(--radius); background: #FFF8E6; color: var(--ink-900); }
.fd-readonly > i { font-size: 1.35rem; color: #B7791F; flex: none; }
.fd-readonly > div { flex: 1; }
.fd-readonly .btn { flex: none; }
/* The palette: field types to drag into a section. */
.fd-palette { margin-bottom: 1.25rem; }
.fd-palette-hint { color: var(--ink-500); font-size: max(.78rem, 10px); margin: -.2rem 0 .5rem; }
.fd-palette-label { font-size: max(.68rem, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin: .6rem 0 .3rem; }
.fd-palette-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.fd-tile {
  display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff;
  color: var(--ink-700); font-size: max(.8rem, 10px); font-weight: 600; cursor: grab; user-select: none; white-space: nowrap; overflow: hidden;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.fd-tile i { color: var(--plum-700); font-size: 1rem; flex: none; }
.fd-tile span { overflow: hidden; text-overflow: ellipsis; }
.fd-tile:hover { border-color: var(--plum-300); background: var(--plum-50); transform: translateY(-1px); }
.fd-tile:active { cursor: grabbing; }
/* A tile over a section, and the placeholder it becomes on drop. */
.fd-section-body > .fd-tile, .fd-placeholder { display: block; padding: .9rem; margin: .35rem 0; border: 2px dashed var(--plum-300); border-radius: var(--radius); background: var(--plum-50); color: var(--plum-900); }
.fd-placeholder { padding-left: 26px; }
.fd-placeholder-body { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.fd-placeholder-body i { font-size: 1.1rem; }
.fd-placeholder-body span { font-weight: 500; color: var(--ink-500); font-size: max(.8rem, 10px); }
/* The live preview pane, docked on the right; the page keeps clear of it. */
.fd-preview {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: clamp(380px, 38vw, 640px); background: #fff; border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg); z-index: 1030; display: flex; flex-direction: column; animation: ol-rise var(--dur-3) var(--ease-out) both;
}
.fd-preview[hidden] { display: none; }
.fd-preview-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); }
.fd-preview-head strong { font-size: .95rem; }
.fd-preview-note { color: var(--ink-500); font-size: max(.78rem, 10px); margin-right: auto; }
.fd-preview iframe { flex: 1; width: 100%; border: 0; }
body.fd-preview-open .content-page { padding-right: clamp(380px, 38vw, 640px); }
body.fd-preview-open .fd-palette-tiles { grid-template-columns: 1fr; }   /* the side column is narrow with the pane open */
#fdPreviewToggle.active { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
html[data-panel] .rail-inline, html[data-panel] .fd-palette { display: none; }
.fd-panel iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== 10. Consistency: the admin pages' coloured tiles ==================== */
/* GDPR and other admin pages colour whole cards with Bootstrap's palette. Keep the idea, use ours. */
.card.bg-primary.text-white { background: var(--plum-900) !important; border-color: var(--plum-900); }
.card.bg-info.text-white { background: var(--plum-700) !important; border-color: var(--plum-700); }
.card.bg-success.text-white { background: var(--olive-600) !important; border-color: var(--olive-600); }
.card.bg-warning.text-white { background: #E08A2B !important; border-color: #E08A2B; }
.card.bg-danger.text-white { background: var(--danger) !important; border-color: var(--danger); }
.card.bg-secondary.text-white, .card.bg-dark.text-white { background: var(--ink-700) !important; border-color: var(--ink-700); }
.card[class*="bg-"].text-white h1, .card[class*="bg-"].text-white h2, .card[class*="bg-"].text-white h3, .card[class*="bg-"].text-white h4, .card[class*="bg-"].text-white h5 { color: #fff; }
.card[class*="bg-"].text-white .card-body { font-variant-numeric: tabular-nums; }

/* ===== The profile picture modal: a square crop with previews (js/olive-avatar-crop.js) ===== */
.av-crop { margin-top: 1rem; }
.av-stage { height: 320px; border-radius: var(--radius); overflow: hidden; background: #F7F7F8; }
.av-stage img { display: block; max-width: 100%; }
.av-stage .cropper-view-box { outline: 2px solid #fff; outline-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(var(--om-primary-rgb), .35); }
.av-stage .cropper-modal { background: rgba(31, 15, 61, .55); opacity: 1; }
.av-stage .cropper-point, .av-stage .cropper-line { background-color: #fff; }
.av-bar { display: flex; align-items: center; gap: 1rem; margin-top: .75rem; }
.av-previews { display: flex; align-items: flex-end; gap: .6rem; flex: none; }
.av-prev { overflow: hidden; background: #F7F7F8; border: 1px solid var(--line); }
.av-prev-sq { width: 64px; height: 64px; border-radius: var(--radius-sm); }
.av-prev-round { width: 36px; height: 36px; border-radius: 50%; }
.av-tools { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; }
.av-tools .form-range { flex: 1; min-width: 60px; }
.av-hint { color: var(--ink-500); font-size: max(.8rem, 10px); margin: .6rem 0 0; }
.modal.profile .modal-footer .btn[disabled] { opacity: .55; }