/* static/css/components.css - shared UI components
 *
 * Loaded after theme.css / themes.css, so every colour here follows the firm theme.
 * Design tokens (type scale, radius, spacing, shadow) are defined in theme.css :root.
 *
 *   1. Buttons ......... four variants: primary, secondary, danger, ghost
 *   2. States .......... empty / error / loading / skeleton (see core/_empty_state.html etc.)
 *
 * Existing Bootstrap class names are mapped onto the four variants, so templates keep working:
 *   primary   : btn-primary, btn-prestige-primary, btn-success, btn-warning, btn-info
 *   secondary : btn-secondary, btn-light, btn-outline-secondary / -primary / -dark / -success / -warning / -info
 *   danger    : btn-danger (solid), btn-outline-danger (soft)
 *   ghost     : btn-ghost, btn-link
 */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.btn {
    --bs-btn-font-size: var(--text-base);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 0.95rem;
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-border-radius: var(--r-md);
    --bs-btn-focus-shadow-rgb: var(--secondary-rgb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1.3;
    letter-spacing: 0.005em;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}
.btn-sm {
    --bs-btn-font-size: var(--text-sm);
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-border-radius: var(--r-md);
    gap: 0.3rem;
}
.btn-lg {
    --bs-btn-font-size: var(--text-md);
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-border-radius: var(--r-lg);
}
.btn .material-symbols-outlined { font-size: 1.25em; line-height: 1; }
.btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; box-shadow: none; }
.btn:disabled, .btn.disabled { opacity: 0.55; }

/* --- primary: the main action of a screen ------------------------------- */
.btn-primary, .btn-prestige-primary, .btn-success, .btn-warning, .btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-container);
    --bs-btn-border-color: var(--primary-container);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-container);
    --bs-btn-disabled-border-color: var(--primary-container);
}
.btn-primary:hover, .btn-prestige-primary:hover, .btn-success:hover, .btn-warning:hover, .btn-info:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}
.btn-primary:active, .btn-prestige-primary:active, .btn-success:active, .btn-warning:active, .btn-info:active {
    transform: none;
    box-shadow: none;
}

/* --- secondary: everything else ----------------------------------------- */
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark,
.btn-outline-success, .btn-outline-warning, .btn-outline-info, .btn-outline-light {
    --bs-btn-color: var(--on-surface);
    --bs-btn-bg: var(--surface-container-lowest);
    --bs-btn-border-color: var(--outline-variant);
    --bs-btn-hover-color: var(--on-surface);
    --bs-btn-hover-bg: var(--surface-container-low);
    --bs-btn-hover-border-color: var(--outline);
    --bs-btn-active-color: var(--on-surface);
    --bs-btn-active-bg: var(--surface-container);
    --bs-btn-active-border-color: var(--outline);
    --bs-btn-disabled-color: var(--on-surface-variant);
    --bs-btn-disabled-bg: var(--surface-container-lowest);
    --bs-btn-disabled-border-color: var(--outline-variant);
}

/* --- danger: destructive actions ---------------------------------------- */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--error);
    --bs-btn-border-color: var(--error);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #93000a;
    --bs-btn-hover-border-color: #93000a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #93000a;
    --bs-btn-active-border-color: #93000a;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--error);
    --bs-btn-disabled-border-color: var(--error);
    --bs-btn-focus-shadow-rgb: 186, 26, 26;
}
.btn-outline-danger {
    --bs-btn-color: var(--error);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(186, 26, 26, 0.4);
    --bs-btn-hover-color: var(--on-error-container);
    --bs-btn-hover-bg: var(--error-container);
    --bs-btn-hover-border-color: var(--error);
    --bs-btn-active-color: var(--on-error-container);
    --bs-btn-active-bg: var(--error-container);
    --bs-btn-active-border-color: var(--error);
    --bs-btn-disabled-color: var(--error);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(186, 26, 26, 0.4);
    --bs-btn-focus-shadow-rgb: 186, 26, 26;
}

/* --- ghost: low-emphasis inline actions --------------------------------- */
.btn-ghost, .btn-link {
    --bs-btn-color: var(--on-surface-variant);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--on-surface);
    --bs-btn-hover-bg: var(--surface-container-low);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--on-surface);
    --bs-btn-active-bg: var(--surface-container);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--outline);
    --bs-btn-disabled-border-color: transparent;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn, .btn:hover { transition: none; transform: none; }
}

/* ==========================================================================
   2. STATES: empty / error / loading / skeleton
   Markup lives in core/_empty_state.html, _error_state.html, _loading_state.html
   (and in static/js/ui_feedback.js -> UI.state for JavaScript-built screens).
   ========================================================================== */
.ds-empty, .ds-error, .ds-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--on-surface-variant);
}
.ds-empty--compact, .ds-error--compact, .ds-loading--compact { padding: var(--space-5) var(--space-3); gap: var(--space-1); }

/* framed variant: replaces the old dashed "text-center py-5 bg-white rounded border border-dashed" boxes */
.ds-empty--framed, .ds-error--framed {
    background: var(--surface-container-lowest);
    border: 1px dashed var(--outline-variant);
    border-radius: var(--r-lg);
}

.ds-empty__icon, .ds-error__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--r-pill);
    background: var(--surface-container-low);
    color: var(--secondary);
    font-size: 1.6rem;
    margin-bottom: var(--space-1);
}
.ds-empty--compact .ds-empty__icon, .ds-error--compact .ds-error__icon { width: 2.5rem; height: 2.5rem; font-size: 1.3rem; }
.ds-error__icon { background: var(--error-container); color: var(--error); }

.ds-empty__title, .ds-error__title {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--on-surface);
}
.ds-empty__text, .ds-error__text {
    margin: 0;
    max-width: 34rem;
    font-size: var(--text-base);
    color: var(--on-surface-variant);
}
.ds-empty__action, .ds-error__action { margin-top: var(--space-2); }

/* a <td> that only holds an empty state */
td.ds-empty-cell { padding: 0 !important; border: 0 !important; background: transparent !important; }

/* loading */
.ds-spinner {
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--surface-container-high);
    border-top-color: var(--secondary);
    border-radius: var(--r-pill);
    animation: ds-spin 0.7s linear infinite;
}
.ds-loading__text { font-size: var(--text-sm); font-weight: 600; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* skeleton blocks */
.ds-skeleton {
    display: block;
    height: 0.9rem;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--surface-container-low) 25%, var(--surface-container) 37%, var(--surface-container-low) 63%);
    background-size: 400% 100%;
    animation: ds-shimmer 1.4s ease infinite;
}
.ds-skeleton + .ds-skeleton { margin-top: var(--space-2); }
.ds-skeleton--title { height: 1.25rem; width: 40%; }
.ds-skeleton--short { width: 60%; }
@keyframes ds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    .ds-spinner, .ds-skeleton { animation: none; }
}

/* ==========================================================================
   3. MOTION: page transition, navigation progress bar, table skeleton
   ========================================================================== */
/* `backwards`, not `both`: once the fade has played, no animation (and so no stacking context) stays on <main>,
   otherwise a modal that lives inside the page content ends up *behind* its own backdrop. */
#page-content-wrapper > main { animation: ds-page-in 0.28s ease backwards; }
/* dim the page while the next one loads, with an overlay below the modals (opacity/filter on <main> would trap them) */
body.ds-leaving::after { content: ''; position: fixed; inset: 0; z-index: 1040; background: color-mix(in srgb, var(--surface-container-lowest) 35%, transparent); pointer-events: none; }
@keyframes ds-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* slim progress bar under the top bar while the next page loads */
#ds-progress {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 3px;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
}
#ds-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--secondary), var(--secondary-fixed-dim));
    box-shadow: 0 0 8px rgba(var(--secondary-rgb), 0.5);
    transition: width 0.4s ease;
}
#ds-progress.is-active { opacity: 1; }
#ds-progress.is-active > span { width: 85%; transition: width 8s cubic-bezier(0.1, 0.6, 0.2, 1); }

/* Tables: show a shimmering placeholder until DataTables has built the real table.
   (If the script never runs, the real table is revealed after 4 s anyway.) */
.table-responsive:has(> table.datatable:not(.dataTable)) { position: relative; min-height: 14rem; }
table.datatable:not(.dataTable) { visibility: hidden; animation: ds-reveal 0s linear 4s forwards; }
.table-responsive:has(> table.datatable:not(.dataTable))::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%) 0 0 / 60% 100% no-repeat,
        repeating-linear-gradient(to bottom, var(--surface-container-low) 0 2.2rem, transparent 2.2rem 3.4rem) 0 0.8rem / 100% 100% no-repeat;
    animation: ds-sweep 1.3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ds-reveal { to { visibility: visible; } }
@keyframes ds-sweep { from { background-position: -60% 0, 0 0.8rem; } to { background-position: 160% 0, 0 0.8rem; } }

@media (prefers-reduced-motion: reduce) {
    #page-content-wrapper > main { animation: none; }
    #ds-progress > span, #ds-progress.is-active > span { transition: none; }
    .table-responsive:has(> table.datatable:not(.dataTable))::after { animation: none; }
}

/* ==========================================================================
   4. SMARTER TABLES: sticky header, density, row selection, bulk bar
   ========================================================================== */
/* sticky header: the scroll container is #page-content-wrapper, so the wrappers in between must not clip */
.table-responsive:has(table.datatable),
.card:has(table.datatable) { overflow: visible !important; }
table.datatable.dataTable thead > tr > th { position: sticky !important; top: var(--header-height) !important; z-index: 5; }
table.datatable thead th:first-child { border-top-left-radius: var(--r-lg); }
table.datatable thead th:last-child { border-top-right-radius: var(--r-lg); }
html[dir="rtl"] table.datatable thead th:first-child { border-top-left-radius: 0; border-top-right-radius: var(--r-lg); }
html[dir="rtl"] table.datatable thead th:last-child { border-top-right-radius: 0; border-top-left-radius: var(--r-lg); }
/* the toolbar above the table (rows / export / columns / search) scrolls away; the header band takes over */

/* density: compact rows */
.ds-compact table.dataTable tbody td,
.ds-compact .table-prestige tbody td { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; font-size: var(--text-base) !important; }
.ds-compact table.dataTable thead th,
.ds-compact .table-prestige thead th { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }
.ds-compact table.dataTable tbody .avatar-circle,
.ds-compact table.dataTable tbody .name-stack { transform: scale(0.88); transform-origin: left center; }

/* row selection */
.ds-rowcheck {
    width: 1rem;
    height: 1rem;
    margin: 0 0.6rem 0 0;
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--primary-container);
}
html[dir="rtl"] .ds-rowcheck { margin: 0 0 0 0.6rem; }
table.dataTable tbody tr.ds-row-selected,
table.dataTable tbody tr.ds-row-selected:hover { background-color: color-mix(in srgb, var(--secondary-container) 45%, #fff) !important; }

/* floating bulk-action bar */
#ds-bulkbar {
    position: fixed;
    inset-inline: 0;
    bottom: 1.5rem;
    margin-inline: auto;
    width: max-content;
    max-width: calc(100vw - 2rem);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem 0.55rem 1rem;
    background: var(--primary-container);
    color: #fff;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-3);
    z-index: 1040;
    transform: translateY(160%);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
#ds-bulkbar.is-open { transform: none; opacity: 1; }
#ds-bulkbar .ds-bulkbar__count { font-weight: 800; font-size: var(--text-base); white-space: nowrap; }
#ds-bulkbar .btn { --bs-btn-font-size: var(--text-sm); border-radius: var(--r-pill); }
#ds-bulkbar .btn-ghost { --bs-btn-color: var(--primary-fixed-dim); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.12); }
#ds-bulkbar .btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--primary-container); --bs-btn-border-color: #fff; }
@media (prefers-reduced-motion: reduce) { #ds-bulkbar { transition: none; } }

/* checkbox beside the original cell content */
.ds-cellwrap { display: flex; align-items: center; }
.ds-cellwrap > .ds-rowcheck { flex: none; }
.ds-cellbody { min-width: 0; flex: 1; }

/* ==========================================================================
   5. UTILITIES - replace the repeated inline style="" attributes
   (!important on purpose: an inline style used to win over any component rule, these keep that behaviour)
   ========================================================================== */
.c-accent { color: var(--secondary) !important; }
.c-error { color: var(--error) !important; }
.c-ok { color: var(--success) !important; }
.c-slate { color: var(--slate) !important; }
.c-on-surface { color: var(--on-surface) !important; }
.bg-surface-low { background-color: var(--surface-container-low) !important; }
.bg-slate { background-color: var(--slate) !important; }

.fs-2xs { font-size: var(--text-2xs) !important; }
.fs-xs { font-size: var(--text-xs) !important; }
.fs-sm { font-size: var(--text-sm) !important; }
.fs-base { font-size: var(--text-base) !important; }
.fs-md { font-size: var(--text-md) !important; }
.icon-xl { font-size: 2.5rem !important; }

.mw-340 { max-width: 340px; }
.mw-650 { max-width: 650px; }
.mw-800 { max-width: 800px; }
.mw-900 { max-width: 900px; }

/* white bordered surface (cards that wrap a table) */
.surface-panel { background: var(--surface-container-lowest) !important; border: 1px solid rgba(196, 198, 205, 0.45) !important; }
.surface-panel--lg { border-radius: var(--r-lg) !important; }
.surface-panel--xl { border-radius: var(--r-xl) !important; }

/* small round dot (list separators, status markers) */
.dot { display: inline-block; flex: none; width: 5px; height: 5px; border-radius: var(--r-pill); }
.dot-7 { width: 7px; height: 7px; }
.dot-accent { background: var(--secondary); }

/* round initials badges */
.avatar-24 { width: 24px !important; height: 24px !important; font-size: var(--text-2xs) !important; }
.avatar-26 { width: 26px !important; height: 26px !important; font-size: var(--text-2xs) !important; }
.avatar-30 { width: 30px !important; height: 30px !important; }
.badge-circle-64 { width: 64px; height: 64px; font-size: 2rem; }

/* slim progress bar track */
.progress-slim { height: 8px; border-radius: var(--r-md); background-color: var(--surface-container-high); }

/* ==========================================================================
   6. PAGE HEADER + BREADCRUMBS (core/templatetags/ui.py)
   ========================================================================== */
.ds-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}
.ds-page-head__main { min-width: 0; }
.ds-page-head__eyebrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); flex-wrap: wrap; }
.ds-page-head__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--on-surface);
}
.ds-page-head__subtitle { margin: 2px 0 0; font-size: var(--text-sm); color: var(--on-surface-variant); }
.ds-page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.ds-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    font-weight: 600;
}
.ds-crumbs li + li::before { content: "\203A"; margin-inline-end: var(--space-2); color: var(--outline); }
html[dir="rtl"] .ds-crumbs li + li::before { content: "\2039"; }
.ds-crumbs a { color: var(--on-surface-variant); text-decoration: none; }
.ds-crumbs a:hover { color: var(--secondary); text-decoration: underline; }
.ds-crumbs [aria-current="page"] span { display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--on-surface); }

/* ==========================================================================
   7. FORMS + MODALS (core/_field.html, _form_fields.html, _form_actions.html, static/js/form_ui.js)
   ========================================================================== */
.ds-field { margin-bottom: var(--space-4); }
.ds-field .form-label { display: block; }
.ds-required { margin-inline-start: 3px; color: var(--error); font-weight: 800; }
.ds-field__help { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--on-surface-variant); }
.ds-field__error { margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--error); }
.ds-field--check { margin-bottom: var(--space-3); }
.ds-form-errors {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(186, 26, 26, 0.3);
    border-inline-start: 4px solid var(--error);
    border-radius: var(--r-md);
    background: var(--error-container);
    color: var(--on-error-container);
    font-size: var(--text-base);
    font-weight: 600;
}

/* invalid / read-only states for every input, wherever the form comes from */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--error); background-image: none; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.18); }
.form-control[readonly], .form-control:disabled, .form-select:disabled { background-color: var(--surface-container-low); color: var(--on-surface-variant); }
.form-check-input:checked { background-color: var(--primary-container); border-color: var(--primary-container); }
.form-check-input:focus { border-color: var(--secondary); box-shadow: 0 0 0 2px rgba(var(--secondary-rgb), 0.18); }
textarea.form-control { min-height: 5.5rem; }

/* legacy Django markup ({{ form.as_p }}, <p> + <br> pairs): same look without touching every template */
form p > label:first-child, form .helptext { font-size: var(--text-xs); }
form p > label:first-child {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
}
form > p { margin-bottom: var(--space-4); }
form ul.errorlist { margin: 0 0 var(--space-1); padding: 0; list-style: none; font-size: var(--text-xs); font-weight: 600; color: var(--error); }
form .helptext { display: block; margin-top: var(--space-1); color: var(--on-surface-variant); }

/* footer of a form: same place and look everywhere */
.ds-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(196, 198, 205, 0.4);
}

/* ==========================================================================
   8. COMMAND PALETTE + SHORTCUT SHEET (static/js/spotlight.js)
   ========================================================================== */
.ds-pal-dialog { margin-top: 10vh; }
.ds-pal.modal-content { border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.ds-pal__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(196, 198, 205, 0.4);
}
.ds-pal__bar > .material-symbols-outlined { color: var(--secondary); font-size: 1.4rem; }
.ds-pal__bar input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--on-surface);
    font-size: var(--text-lg);
    padding: var(--space-1) 0;
}
.ds-pal kbd, .ds-keys kbd, #ds-seqhint kbd {
    display: inline-block;
    min-width: 1.5rem;
    padding: 1px 6px;
    margin-inline-end: 3px;
    border: 1px solid var(--outline-variant);
    border-bottom-width: 2px;
    border-radius: var(--r-sm);
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
}
.ds-pal__results { max-height: min(55vh, 28rem); overflow-y: auto; padding: var(--space-2); }
.ds-pal__group {
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-size: var(--text-2xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}
.ds-pal__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 0.5rem var(--space-3);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--on-surface);
    font-size: var(--text-md);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.ds-pal__item.is-active { background: color-mix(in srgb, var(--secondary-container) 55%, transparent); color: var(--on-surface); }
.ds-pal__icon { flex: none; font-size: 1.25rem; color: var(--secondary); }
.ds-pal__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-pal__text mark { padding: 0; background: transparent; color: var(--secondary); font-weight: 800; }
.ds-pal__hint { flex: none; font-size: var(--text-xs); color: var(--on-surface-variant); }
.ds-pal__empty, .ds-pal__status { padding: var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--on-surface-variant); }
.ds-pal__clear { padding: var(--space-2) var(--space-3); text-align: end; }
.ds-pal__clear button { border: 0; background: transparent; font-size: var(--text-xs); color: var(--on-surface-variant); text-decoration: underline; }
.ds-pal__foot {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid rgba(196, 198, 205, 0.4);
    background: var(--surface-container-low);
    font-size: var(--text-xs);
    color: var(--on-surface-variant);
}
@media (max-width: 767.98px) { .ds-pal-dialog { margin-top: 0; } .ds-pal__foot { display: none; } }

.ds-keys__group { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); }
.ds-keys__group:first-child { margin-top: 0; }
.ds-keys__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 0.35rem 0; border-bottom: 1px solid rgba(196, 198, 205, 0.25); font-size: var(--text-base); }

/* "g ..." sequence hint */
#ds-seqhint {
    position: fixed;
    inset-inline-start: 1.5rem;
    bottom: 1.5rem;
    z-index: 1040;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-pill);
    background: var(--primary-container);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    box-shadow: var(--shadow-3);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
#ds-seqhint.is-open { opacity: 1; transform: none; }

/* ==========================================================================
   9. QUICK-FILTER CHIPS + SAVED VIEWS (static/js/table_views.js)
   ========================================================================== */
.ds-viewbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-3) var(--space-2);
    border-bottom: 1px solid rgba(196, 198, 205, 0.4);
}
.ds-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-pill);
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ds-chip:hover { background: var(--surface-container-low); border-color: var(--outline); }
.ds-chip > .material-symbols-outlined { font-size: 1.05rem; color: var(--secondary); }
.ds-chip__count { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--on-surface-variant); }
.ds-chip.is-active { background: var(--primary-container); border-color: var(--primary-container); color: #fff; }
.ds-chip.is-active > .material-symbols-outlined { color: var(--secondary-fixed-dim); }
.ds-chip.is-active:hover { background: var(--primary-hover); }
.ds-chip:focus-visible, .ds-chip-clear:focus-visible, .ds-view__apply:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.ds-chip-clear { border: 0; background: transparent; padding: 0.25rem 0.4rem; font-size: var(--text-xs); font-weight: 700; color: var(--on-surface-variant); text-decoration: underline; cursor: pointer; }

.ds-views .btn > .material-symbols-outlined { font-size: 1.1rem; }
.ds-views__menu { min-width: 16rem; padding: var(--space-2); border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.ds-view { display: flex; align-items: center; gap: var(--space-1); }
.ds-view__apply {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: 0.4rem var(--space-2);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--on-surface);
    font-size: var(--text-base);
    text-align: start;
}
.ds-view__apply:hover { background: var(--surface-container-low); }
.ds-view__apply .material-symbols-outlined { font-size: 1.1rem; color: var(--secondary); }
.ds-view__del { border: 0; background: transparent; padding: 0.25rem; border-radius: var(--r-pill); color: var(--on-surface-variant); line-height: 1; }
.ds-view__del:hover { background: var(--error-container); color: var(--error); }
.ds-view__del .material-symbols-outlined { font-size: 1.05rem; }
.ds-view__none { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--on-surface-variant); }
.ds-views__save { display: flex; gap: var(--space-2); padding: var(--space-1) 0 0; }
.ds-views__save input { flex: 1; min-width: 0; padding: 0.3rem 0.6rem; border: 1px solid var(--outline-variant); border-radius: var(--r-md); background: var(--surface-container-lowest); color: var(--on-surface); font-size: var(--text-sm); }
.ds-views__save input:focus { outline: 0; border-color: var(--secondary); box-shadow: 0 0 0 2px rgba(var(--secondary-rgb), 0.15); }

/* ==========================================================================
   10. APPEARANCE TOGGLE (top bar) - colours themselves live in dark.css
   ========================================================================== */
.btn-appearance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid rgba(196, 198, 205, 0.6);
    border-radius: var(--r-md);
    background: var(--surface-container-lowest);
    color: var(--on-surface-variant);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-appearance:hover { background: var(--surface-container-low); color: var(--on-surface); }
.btn-appearance:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.btn-appearance .material-symbols-outlined { font-size: 1.2rem; }

/* ==========================================================================
   11. ARABIC / RIGHT-TO-LEFT DETAILS
   (the layout itself is mirrored by Bootstrap's RTL build and logical properties; fonts are in theme.css)
   ========================================================================== */
html[dir="rtl"] .ds-arrow,
html[dir="rtl"] .msi-dir { display: inline-block; transform: scaleX(-1); }

/* Arabic letters are joined: never space them out, and give the taller Arabic fonts a little more room */
html[lang="ar"] *,
html[lang="ar"] *::before,
html[lang="ar"] *::after { letter-spacing: 0 !important; }
html[lang="ar"] body { line-height: 1.7; }
html[lang="ar"] .ds-page-head__title,
html[lang="ar"] .ch-title,
html[lang="ar"] .font-editorial,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.45; }

/* ==========================================================================
   KPI CARDS (big stat cards: Court Docket, Task Command Center)
   ========================================================================== */
.dk-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.dk-kpi {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.05rem;
    background: var(--surface-container-lowest);
    border: 1px solid rgba(196, 198, 205, 0.5);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    color: var(--on-surface);
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dk-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
    border-color: var(--secondary-fixed-dim);
    color: var(--on-surface);
}

.dk-kpi__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-lg);
}

.dk-kpi__icon .material-symbols-outlined {
    font-size: var(--text-2xl);
}

.dk-kpi__value {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
}

.dk-kpi__label {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
}

.dk-kpi--gold  .dk-kpi__icon { background: rgba(var(--secondary-rgb), 0.13); color: var(--secondary); }
.dk-kpi--navy  .dk-kpi__icon { background: rgba(var(--primary-rgb), 0.08);  color: var(--primary-ink); }
.dk-kpi--red   .dk-kpi__icon { background: rgba(186, 26, 26, 0.09); color: var(--error); }
.dk-kpi--slate .dk-kpi__icon { background: rgba(68, 71, 76, 0.1);   color: var(--on-surface-variant); }

/* Overdue only shouts when there is something overdue */
.dk-kpi--alert {
    border-color: rgba(186, 26, 26, 0.35);
    background: linear-gradient(180deg, var(--surface-container-lowest) 0%, color-mix(in srgb, var(--error-container) 35%, var(--surface-container-lowest)) 100%);
}

.dk-kpi--alert .dk-kpi__value {
    color: var(--error);
}

@media (max-width: 991.98px) {
    .dk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the card whose filter is on (tasks page: cards drive the quick filters) */
.dk-kpi.is-active {
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px rgba(var(--secondary-rgb), 0.35), var(--shadow-2);
}

/* a page that shows the cards hides the small quick-filter chips they replace (the cards click them) */
.has-kpi-cards .ds-chips .ds-chip[data-key] { display: none; }