/* ==========================================================================
   CMA admin — design system (Strapi-style SaaS look) on Bootstrap 5.3
   Our own stylesheet. Replaces SB Admin 2 + the old "AI Tech" theme.
   Load order: bootstrap.min.css, app.css, layout.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --ai-bg: #f6f6f9;
    --ai-page: #f6f6f9;
    --ai-surface: #ffffff;
    --ai-surface-2: #fafafc;
    --ai-surface-3: #f0f0f5;

    /* Lines */
    --ai-line: #eaeaef;
    --ai-line-2: #dcdce4;
    --ai-line-card: #eaeaef;

    /* Ink */
    --ai-ink: #32324d;
    --ai-ink-2: #666687;
    --ai-ink-3: #8e8ea9;

    /* CMA brand blue */
    --ai-accent: #0073b5;
    --ai-accent-2: #015f96;
    --ai-accent-dark: #01426a;
    --ai-accent-ink: #e6f1f8;
    --ai-accent-line: #a9d9ef;
    --ai-sidebar: #0073b5;
    --ai-on-accent: #ffffff;
    --ai-on-accent-2: rgba(255, 255, 255, 0.95);
    --ai-on-accent-3: rgba(255, 255, 255, 0.75);
    --ai-accent-hover: rgba(255, 255, 255, 0.1);
    --ai-accent-line-soft: rgba(255, 255, 255, 0.18);

    /* Status */
    --ai-success: #328048;
    --ai-success-bg: #eafbe7;
    --ai-danger: #d02b20;
    --ai-danger-bg: #fcecea;
    --ai-warning: #b25e09;
    --ai-warning-bg: #fdf4dc;
    --ai-info: #0c75af;
    --ai-info-bg: #eaf5ff;

    /* Shape */
    --ai-r: 4px;
    --ai-r-sm: 4px;
    --ai-r-lg: 8px;

    --ai-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ai-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --ai-shadow: 0 1px 2px rgba(33, 33, 52, 0.06);
    --ai-shadow-card: 0 1px 4px rgba(33, 33, 52, 0.08);
    --ai-shadow-md: 0 8px 24px -8px rgba(33, 33, 52, 0.18);
    --ai-shadow-lg: 0 24px 48px -16px rgba(33, 33, 52, 0.28);
    --ai-ring: 0 0 0 3px rgba(0, 115, 181, 0.15);

    --ai-grid-line: rgba(33, 33, 52, 0.035);

    /* Bootstrap 5.3 theme variables */
    --bs-body-font-family: var(--ai-sans);
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--ai-ink);
    --bs-body-color-rgb: 50, 50, 77;
    --bs-body-bg: var(--ai-bg);
    --bs-border-color: var(--ai-line);
    --bs-border-radius: var(--ai-r);
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: var(--ai-r-lg);
    --bs-link-color: var(--ai-accent);
    --bs-link-color-rgb: 0, 115, 181;
    --bs-link-hover-color: var(--ai-accent-2);
    --bs-link-hover-color-rgb: 1, 95, 150;
    --bs-primary: #0073b5;
    --bs-primary-rgb: 0, 115, 181;
    --bs-success: #328048;
    --bs-success-rgb: 50, 128, 72;
    --bs-danger: #d02b20;
    --bs-danger-rgb: 208, 43, 32;
    --bs-warning: #f29d41;
    --bs-warning-rgb: 242, 157, 65;
    --bs-info: #0c75af;
    --bs-info-rgb: 12, 117, 175;
    --bs-secondary: #666687;
    --bs-secondary-rgb: 102, 102, 135;
    --bs-emphasis-color: var(--ai-ink);
    --bs-secondary-color: var(--ai-ink-2);
    --bs-tertiary-color: var(--ai-ink-3);
    --bs-focus-ring-color: rgba(0, 115, 181, 0.15);
}

/* --------------------------------------------------------------------------
   2. Base / typography
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ai-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ai-ink);
    background-color: var(--ai-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ai-sans);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ai-ink);
}

a {
    color: var(--ai-accent);
    text-decoration: none;
}

a:hover {
    color: var(--ai-accent-2);
}

small, .small {
    font-size: 0.8125rem;
}

code, kbd, samp, pre {
    font-family: var(--ai-mono);
}

code {
    padding: 0.1rem 0.35rem;
    font-size: 0.8125em;
    color: var(--ai-accent-dark);
    background: var(--ai-accent-ink);
    border-radius: 4px;
}

pre {
    padding: 0.875rem 1rem;
    color: var(--ai-ink);
    background: var(--ai-surface-3);
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-r);
}

pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}

hr {
    border-color: var(--ai-line);
    opacity: 1;
}

::selection {
    background: rgba(0, 115, 181, 0.2);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-padding-y: 7px;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 20px;
    --bs-btn-border-radius: var(--ai-r);
    --bs-btn-focus-box-shadow: var(--ai-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn > i,
.btn > .fas,
.btn > .far,
.btn > .fab {
    font-size: 0.8125rem;
    line-height: 1;
}

.btn-sm {
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-padding-y: 5px;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-line-height: 18px;
    gap: 0.375rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 9px;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-line-height: 22px;
}

.btn-link.p-0 {
    display: inline;
}

.btn-primary {
    --bs-btn-bg: #0073b5;
    --bs-btn-border-color: #0073b5;
    --bs-btn-hover-bg: #015f96;
    --bs-btn-hover-border-color: #015f96;
    --bs-btn-active-bg: #01426a;
    --bs-btn-active-border-color: #01426a;
    --bs-btn-disabled-bg: #0073b5;
    --bs-btn-disabled-border-color: #0073b5;
}

.btn-secondary {
    --bs-btn-color: var(--ai-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--ai-line-2);
    --bs-btn-hover-color: var(--ai-ink);
    --bs-btn-hover-bg: var(--ai-surface-3);
    --bs-btn-hover-border-color: var(--ai-line-2);
    --bs-btn-active-color: var(--ai-ink);
    --bs-btn-active-bg: var(--ai-line);
    --bs-btn-active-border-color: var(--ai-line-2);
    --bs-btn-disabled-color: var(--ai-ink-3);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--ai-line);
}

.btn-success {
    --bs-btn-bg: #2fa35a;
    --bs-btn-border-color: #2fa35a;
    --bs-btn-hover-bg: #28904f;
    --bs-btn-hover-border-color: #28904f;
    --bs-btn-active-bg: #217c43;
    --bs-btn-active-border-color: #217c43;
    --bs-btn-disabled-bg: #2fa35a;
    --bs-btn-disabled-border-color: #2fa35a;
}

.btn-danger {
    --bs-btn-bg: #d02b20;
    --bs-btn-border-color: #d02b20;
    --bs-btn-hover-bg: #b0231a;
    --bs-btn-hover-border-color: #b0231a;
    --bs-btn-active-bg: #911c15;
    --bs-btn-active-border-color: #911c15;
}

.btn-warning {
    --bs-btn-color: #32324d;
    --bs-btn-bg: #f29d41;
    --bs-btn-border-color: #f29d41;
    --bs-btn-hover-color: #32324d;
    --bs-btn-hover-bg: #e58c2a;
    --bs-btn-hover-border-color: #e58c2a;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0c75af;
    --bs-btn-border-color: #0c75af;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0a6291;
    --bs-btn-hover-border-color: #0a6291;
}

.btn-light {
    --bs-btn-color: var(--ai-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--ai-line-2);
    --bs-btn-hover-bg: var(--ai-surface-3);
    --bs-btn-hover-border-color: var(--ai-line-2);
}

.btn-outline-primary {
    --bs-btn-color: #0073b5;
    --bs-btn-border-color: #0073b5;
    --bs-btn-hover-bg: #0073b5;
    --bs-btn-hover-border-color: #0073b5;
    --bs-btn-active-bg: #015f96;
    --bs-btn-active-border-color: #015f96;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ai-ink-2);
    --bs-btn-border-color: var(--ai-line-2);
    --bs-btn-hover-bg: var(--ai-surface-3);
    --bs-btn-hover-color: var(--ai-ink);
    --bs-btn-hover-border-color: var(--ai-line-2);
}

.btn-outline-danger {
    --bs-btn-color: #d02b20;
    --bs-btn-border-color: #d02b20;
    --bs-btn-hover-bg: #d02b20;
    --bs-btn-hover-border-color: #d02b20;
}

.btn-link {
    --bs-btn-color: var(--ai-accent);
    --bs-btn-hover-color: var(--ai-accent-2);
    font-weight: 600;
    text-decoration: none;
}

/* SB Admin style icon + label button: the icon sits in its own darker slice.
   The slice is rounded to the button's inner radius (instead of being clipped
   by overflow: hidden), so the corners stay crisp. */
.btn-icon-split {
    gap: 0;
    padding: 0;
    align-items: stretch;
}

.btn-icon-split > .icon,
.btn-icon-split > .text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

.btn-icon-split > .icon {
    min-width: 2.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: calc(var(--ai-r) - 1px) 0 0 calc(var(--ai-r) - 1px);
    font-size: 0.8125rem;
}

.btn-icon-split > .icon.text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.btn-secondary.btn-icon-split > .icon,
.btn-light.btn-icon-split > .icon,
.btn-warning.btn-icon-split > .icon {
    background-color: rgba(33, 33, 52, 0.07);
}

.btn-secondary.btn-icon-split > .icon.text-white-50,
.btn-light.btn-icon-split > .icon.text-white-50,
.btn-warning.btn-icon-split > .icon.text-white-50 {
    color: inherit !important;
    opacity: 0.7;
}

.btn-sm.btn-icon-split > .icon {
    min-width: 1.875rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
}

.btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
}

.btn-circle.btn-sm {
    width: 1.75rem;
    height: 1.75rem;
}

/* Login form button */
.btn-user {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
}

.btn-close:focus {
    box-shadow: var(--ai-ring);
}

/* --------------------------------------------------------------------------
   4. Cards
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--ai-line);
    --bs-card-border-radius: var(--ai-r-lg);
    --bs-card-inner-border-radius: calc(var(--ai-r-lg) - 1px);
    --bs-card-cap-bg: var(--ai-surface);
    --bs-card-cap-padding-y: 0.875rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    background-color: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-r-lg);
    box-shadow: var(--ai-shadow-card);
}

.card.shadow,
.card.shadow-sm,
.card.shadow-lg {
    box-shadow: var(--ai-shadow-card) !important;
}

.card-header {
    background-color: var(--ai-surface);
    border-bottom: 1px solid var(--ai-line);
    font-weight: 600;
}

.card-header h6,
.card-header .h6,
.card-header h5,
.card-header .h5 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ai-ink);
}

.card-header .text-primary {
    color: var(--ai-ink) !important;
}

.card-footer {
    background-color: var(--ai-surface-2);
    border-top: 1px solid var(--ai-line);
}

/* Collapsible card header (was SB Admin's) */
.card-header[data-bs-toggle="collapse"] {
    position: relative;
    padding-right: 3rem;
    text-decoration: none;
}

.card-header[data-bs-toggle="collapse"]::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ai-ink-3);
}

.card-header[data-bs-toggle="collapse"].collapsed::after {
    content: "\f105";
}

/* Stat cards: left accent bar */
.card[class*="border-left-"] {
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.border-left-primary { border-left-color: #0073b5 !important; }
.border-left-success { border-left-color: #328048 !important; }
.border-left-info { border-left-color: #0c75af !important; }
.border-left-warning { border-left-color: #f29d41 !important; }
.border-left-danger { border-left-color: #d02b20 !important; }
.border-left-secondary { border-left-color: #666687 !important; }

.border-left-primary,
.border-left-success,
.border-left-info,
.border-left-warning,
.border-left-danger,
.border-left-secondary {
    border-left-width: 4px;
    border-left-style: solid;
}

/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */
label,
.col-form-label {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ai-ink);
}

.form-control,
.form-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--ai-ink);
    background-color: var(--ai-surface);
    border: 1px solid var(--ai-line-2);
    border-radius: var(--ai-r);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    color: var(--ai-ink);
    background-color: var(--ai-surface);
    border-color: var(--ai-accent);
    box-shadow: var(--ai-ring);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--ai-ink-2);
    background-color: var(--ai-surface-3);
    opacity: 1;
}

.form-control::placeholder {
    color: var(--ai-ink-3);
    opacity: 0.8;
}

.form-control[type="file"] {
    padding: 0.375rem 0.5rem;
}

.form-control[type="file"]::file-selector-button {
    margin: -0.375rem 0.75rem -0.375rem -0.5rem;
    padding: 0.5rem 0.875rem;
    font-weight: 600;
    color: var(--ai-ink);
    background-color: var(--ai-surface-3);
    border: 0;
    border-right: 1px solid var(--ai-line-2);
}

.form-text {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ai-ink-2);
}

.invalid-feedback {
    font-size: 0.75rem;
}

.form-check-input {
    width: 1.0625rem;
    height: 1.0625rem;
    margin-top: 0.1875rem;
    border: 1px solid var(--ai-line-2);
}

.form-check-input:checked {
    background-color: var(--ai-accent);
    border-color: var(--ai-accent);
}

.form-check-input:focus {
    border-color: var(--ai-accent);
    box-shadow: var(--ai-ring);
}

.form-check-label {
    font-weight: 500;
}

.form-switch .form-check-input {
    width: 2.25em;
    height: 1.25em;
    margin-top: 0.125em;
}

.input-group-text {
    color: var(--ai-ink-2);
    background-color: var(--ai-surface-3);
    border: 1px solid var(--ai-line-2);
    border-radius: var(--ai-r);
}

.form-control-user {
    padding: 0.75rem 0.875rem;
}

.auto-height {
    resize: none;
    field-sizing: content;
}

/* Switches (`boolean` fields): a bit larger, and the read-only one in tables keeps its colour */
.form-switch .form-check-input {
    cursor: pointer;
}

.form-switch .form-check-input:disabled {
    cursor: not-allowed;
}

.switch-static {
    margin: 0;
}

.switch-static .form-check-input:disabled {
    opacity: 1;
}

.switch-static .form-check-input:disabled:not(:checked) {
    opacity: 0.55;
}

/* Collection table (DataTables, see collection-table.js): hidden until it is initialised */
.dt-pending {
    visibility: hidden;
}

/* The drag-handle column is shown only while the sort panel is open (collection-table.js) */
#collectionTableWrap.handle-hidden .sort-handle-col {
    display: none;
}

#collectionTableWrap div.dataTables_length {
    margin: 0;
    text-align: left;
    color: var(--ai-ink-3);
    font-size: 0.8125rem;
}

#collectionTableWrap div.dataTables_length select {
    width: auto;
    display: inline-block;
}

#collectionTableWrap div.dataTables_info {
    padding-top: 0;
}

/* The column being dragged by ColReorder */
table.dataTable thead th.dt-colreorder-drag,
.dtcr-moving {
    cursor: grabbing;
}

#collectionTable thead th:not(.noVis) {
    cursor: grab;
}

/* Sort panel (collection-sort.js): the controls fade in/out and the drag-handle column dims instead of
   popping in and out, so nothing around them jumps while the sort column or mode changes. */
.sort-column-fields {
    max-width: 24rem;
    overflow: visible;
    transition: max-width 0.28s ease, opacity 0.2s ease, padding 0.28s ease;
}

.sort-column-fields.is-collapsed {
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    pointer-events: none;
}

.sort-handle-col {
    transition: opacity 0.2s ease;
}

.sort-handle-col.sort-handle-off {
    opacity: 0.25;
    cursor: default !important;
    pointer-events: none;
}

/* Apply / Reset / Unpublished badge appear softly instead of popping in */
#publishSortWrap:not(.d-none),
#resetSortWrap:not(.d-none),
#clearSortWrap:not(.d-none),
#sortDirtyBadgeWrap:not(.d-none) {
    animation: sort-fade-in 0.25s ease-out both;
}

/* DataTables <-> plain table swap when the sort panel opens/closes */
#collectionTableWrap.dt-swap {
    animation: sort-fade-in 0.28s ease-out both;
}

@keyframes sort-fade-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sort-column-fields,
    .sort-handle-col,
    #publishSortWrap, #resetSortWrap, #clearSortWrap, #sortDirtyBadgeWrap,
    #collectionTableWrap.dt-swap {
        transition: none;
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   Collection toolbar (Notion-style): quiet ghost buttons, one solid button
   --------------------------------------------------------------------------- */
.btn-ghost {
    color: var(--ai-ink-2);
    background: transparent;
    border: 1px solid transparent;
    font-weight: 500;
    white-space: nowrap;
}

.btn-ghost i {
    color: var(--ai-ink-3);
    margin-right: 0.25rem;
}

.btn-ghost:hover,
.btn-ghost:focus-visible,
.btn-ghost[aria-expanded="true"],
.btn-ghost.show {
    color: var(--ai-ink);
    background: var(--ai-surface-3);
    border-color: transparent;
}

.btn-ghost:active {
    background: var(--ai-line);
    color: var(--ai-ink);
}

.collection-toolbar .btn-sm {
    padding: 0.3rem 0.6rem;
}

/* Dot on the Sort button: amber = unpublished changes, blue = a sort is applied */
.sort-dot {
    display: none;
    width: 0.45rem;
    height: 0.45rem;
    margin-left: 0.3rem;
    border-radius: 50%;
    vertical-align: middle;
}

.sort-dot.is-dirty,
.sort-dot.is-applied {
    display: inline-block;
}

.sort-dot.is-dirty {
    background: var(--ai-warning);
}

.sort-dot.is-applied {
    background: var(--ai-accent);
}

/* "Layout saved": a short note that fades away; its width is reserved on wide screens so nothing shifts */
.columns-note {
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.columns-note.is-visible {
    opacity: 1;
}

/* Reserve its width only where there is room, so the toolbar does not wrap for an invisible note */
@media (min-width: 1200px) {
    .columns-note {
        min-width: 6.5rem;
        text-align: right;
    }
}

@media (max-width: 1199.98px) {
    .columns-note:not(.is-visible) {
        display: none;
    }
}

#columnsToolbar .dt-buttons {
    display: inline-flex;
    align-items: center;
}

/* Search: a magnifier that opens into a box */
.tb-search {
    display: inline-flex;
    align-items: center;
}

.tb-search-input {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    opacity: 0;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

.tb-search.is-open .tb-search-input {
    width: 13rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-width: 1px;
    opacity: 1;
}

.tb-search-btn i {
    margin-right: 0;
}

/* The Columns menu: compact, Reset layout set apart as the last item */
.dt-button-collection.dropdown-menu {
    min-width: 13rem;
    padding: 0.25rem;
}

.dt-button-collection .dt-button.dropdown-item {
    border-radius: var(--ai-r);
}

/* Reset actions: a dim amber tint, so they read as "undo my changes" and not as a column toggle */
.dt-button-collection .dt-reset-layout,
#resetSortBtn {
    background: var(--ai-warning-bg);
    color: var(--ai-warning);
}

.dt-button-collection .dt-reset-layout i,
#resetSortBtn i {
    color: var(--ai-warning);
}

.dt-button-collection .dt-reset-layout:hover,
.dt-button-collection .dt-reset-layout:focus-visible,
#resetSortBtn:hover,
#resetSortBtn:focus-visible {
    background: #f9e6b3;
    color: #8f4a06;
}

.dt-button-collection .dt-reset-layout:hover i,
#resetSortBtn:hover i {
    color: #8f4a06;
}

/* Columns / Search while the sort panel is open: same size and place, just dimmed and inactive */
#columnsToolbar .is-locked {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

/* ...with no outline or fill of their own (Bootstrap gives a disabled .btn a border): only dimmed */
#columnsToolbar .is-locked .btn,
#columnsToolbar .is-locked .btn:disabled {
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-bg: transparent;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    opacity: 1; /* the wrapper already dims them; Bootstrap's own disabled opacity would dim twice */
}

.dt-button-collection .dt-reset-layout {
    margin-top: 0.25rem;
    border-radius: var(--ai-r);
}

/* Sort panel: a light bar with the active sort on top and one row of controls that all share one size
   (every toggle, the column select and the direction toggles: 2.25rem high, 10rem wide) with room between them */
.sort-panel {
    padding: 1rem 1.25rem;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-r-lg);
    background: var(--ai-surface-2);
}

.sort-panel .btn-outline-secondary {
    --bs-btn-color: var(--ai-ink-2);
    --bs-btn-border-color: var(--ai-line-2);
    --bs-btn-hover-bg: var(--ai-surface-3);
    --bs-btn-hover-color: var(--ai-ink);
    --bs-btn-hover-border-color: var(--ai-line-2);
    --bs-btn-active-bg: var(--ai-accent-ink);
    --bs-btn-active-color: var(--ai-accent);
    --bs-btn-active-border-color: var(--ai-accent-line);
    background: var(--ai-surface);
}

.sort-panel .btn-check:checked + .btn-outline-secondary {
    background: var(--ai-accent-ink);
    color: var(--ai-accent);
    border-color: var(--ai-accent-line);
}

.sort-panel .btn-outline-secondary i {
    color: inherit;
    opacity: 0.7;
    margin-right: 0.35rem;
}

.sort-panel .sort-control-group > .btn,
.sort-panel .sort-control {
    width: 10rem;
    height: 2.25rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8125rem;
    line-height: 2.25rem;
    text-align: center;
    white-space: nowrap;
}

.sort-panel .sort-control {
    padding-left: 0.75rem;
    padding-right: 2rem;
    text-align: left;
    text-overflow: ellipsis;
}

.sort-panel .btn-sm {
    height: 2.25rem;
}

/* Searchable multiselect dropdown (reference fields with `multiple`, see multiselect.js) */
.ms {
    position: relative;
}

.ms-toggle {
    display: block;
    width: 100%;
    min-height: 2.375rem;
    height: auto;
    text-align: left;
    cursor: pointer;
}

.ms-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ms-panel {
    position: absolute;
    z-index: 1060;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    padding: 0.5rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--ai-line-2);
    border-radius: var(--ai-r);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
}

.ms-panel[hidden],
.ms-option[hidden],
.ms-empty[hidden] {
    display: none;
}

.ms-options {
    max-height: 14rem;
    margin-top: 0.5rem;
    overflow-y: auto;
}

.ms-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.3rem 0.5rem;
    border-radius: var(--ai-r);
    font-weight: 400;
    cursor: pointer;
}

.ms-option:hover {
    background: var(--ai-surface-2);
}

.ms-option .form-check-input {
    margin: 0;
    flex: none;
}

.ms-empty {
    padding: 0.3rem 0.5rem;
}

/* Select2 follows the same control look */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 2.375rem;
    border: 1px solid var(--ai-line-2);
    border-radius: var(--ai-r);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.25rem !important;
    color: var(--ai-ink);
}

.select2-container .select2-selection--single {
    height: 2.375rem !important;
    margin-top: 0;
}

.select2-selection__arrow {
    height: 2.25rem !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ai-accent);
    box-shadow: var(--ai-ring);
}

/* --------------------------------------------------------------------------
   6. Tables + DataTables
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--ai-surface-2);
    --bs-table-striped-bg: transparent;
    --bs-table-border-color: var(--ai-line);
    margin-bottom: 0;
    color: var(--ai-ink);
}

.table > :not(caption) > * > * {
    padding: 0.8125rem 1rem;
    border-bottom-color: var(--ai-line);
}

.table thead th {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ai-ink-2);
    background-color: var(--ai-surface-2);
    border-bottom: 1px solid var(--ai-line);
    white-space: nowrap;
}

.table tbody tr:last-child > * {
    border-bottom-width: 0;
}

/* Column dividers */
.table > :not(caption) > tr > * + *,
.table.table-bordered > :not(caption) > tr > * + * {
    border-left: 1px solid var(--ai-line);
}

.table > :not(caption) > tr > :first-child {
    border-left-width: 0;
}

.table thead th {
    border-bottom-color: var(--ai-line-2);
}

.table-bordered {
    border: 1px solid var(--ai-line);
}

.table-bordered > :not(caption) > * > * {
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
}

/* Rows carry no border of their own (DataTables gives the last one a dark one) */
.table > :not(caption) > tr,
table.dataTable > tbody > tr {
    border-color: var(--ai-line);
    border-width: 0;
}

table.dataTable.table-bordered {
    border: 1px solid var(--ai-line) !important;
}

.table-responsive {
    border-radius: var(--ai-r);
}

div.dataTables_wrapper {
    font-size: 0.8125rem;
}

div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_info {
    color: var(--ai-ink-2);
    padding: 0.5rem 0;
}

div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_length label {
    font-weight: 500;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    height: 2.125rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    width: auto;
    display: inline-block;
    border: 1px solid var(--ai-line-2);
    border-radius: var(--ai-r);
}

div.dataTables_wrapper div.dataTables_length select {
    padding-right: 2rem;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: var(--ai-accent);
    box-shadow: var(--ai-ring);
    outline: 0;
}

table.dataTable {
    border-collapse: collapse !important;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid var(--ai-line) !important;
}

table.dataTable.no-footer {
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Pagination, nav, list-group, progress
   -------------------------------------------------------------------------- */
.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 0.8125rem;
    --bs-pagination-color: var(--ai-ink-2);
    --bs-pagination-border-color: var(--ai-line-2);
    --bs-pagination-hover-bg: var(--ai-surface-3);
    --bs-pagination-hover-color: var(--ai-ink);
    --bs-pagination-hover-border-color: var(--ai-line-2);
    --bs-pagination-active-bg: var(--ai-accent);
    --bs-pagination-active-border-color: var(--ai-accent);
    --bs-pagination-focus-box-shadow: var(--ai-ring);
    --bs-pagination-border-radius: var(--ai-r);
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--ai-accent);
    border-bottom-color: var(--ai-line);
}

.list-group {
    --bs-list-group-border-color: var(--ai-line);
    --bs-list-group-border-radius: var(--ai-r-lg);
}

.progress {
    height: 0.5rem;
    background-color: var(--ai-line);
    border-radius: 999px;
}

.progress-sm {
    height: 0.375rem;
}

.progress-bar {
    background-color: var(--ai-accent);
}

/* --------------------------------------------------------------------------
   8. Modals
   -------------------------------------------------------------------------- */
.modal {
    --bs-modal-border-color: var(--ai-line);
    --bs-modal-border-radius: var(--ai-r-lg);
    --bs-modal-header-border-color: var(--ai-line);
    --bs-modal-footer-border-color: var(--ai-line);
    --bs-modal-padding: 1.25rem;
    --bs-modal-box-shadow: var(--ai-shadow-lg);
}

.modal-header {
    padding: 1rem 1.25rem;
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
}

.modal-footer {
    background-color: var(--ai-surface-2);
    border-bottom-left-radius: var(--ai-r-lg);
    border-bottom-right-radius: var(--ai-r-lg);
}

.modal-backdrop {
    --bs-backdrop-bg: #32324d;
    --bs-backdrop-opacity: 0.45;
}

/* --------------------------------------------------------------------------
   9. Alerts, badges, dropdowns
   -------------------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--ai-r);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-width: 1px;
}

.alert-success { color: var(--ai-success); background-color: var(--ai-success-bg); border-color: #c6f0c2; }
.alert-danger { color: var(--ai-danger); background-color: var(--ai-danger-bg); border-color: #f5c0b8; }
.alert-warning { color: var(--ai-warning); background-color: var(--ai-warning-bg); border-color: #f6e4b0; }
.alert-info { color: var(--ai-info); background-color: var(--ai-info-bg); border-color: #b8e1ff; }

.alert-dismissible .btn-close {
    padding: 0.9rem 1rem;
}

/* Soft pill badges. text-bg-* forces !important colours, so override with the same weight. */
.badge {
    padding: 0.28rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0;
    border-radius: 999px;
}

.badge.text-bg-primary { color: var(--ai-accent) !important; background-color: var(--ai-accent-ink) !important; }
.badge.text-bg-secondary { color: var(--ai-ink-2) !important; background-color: var(--ai-line) !important; }
.badge.text-bg-success { color: var(--ai-success) !important; background-color: var(--ai-success-bg) !important; }
.badge.text-bg-danger { color: var(--ai-danger) !important; background-color: var(--ai-danger-bg) !important; }
.badge.text-bg-warning { color: var(--ai-warning) !important; background-color: var(--ai-warning-bg) !important; }
.badge.text-bg-info { color: var(--ai-info) !important; background-color: var(--ai-info-bg) !important; }
.badge.text-bg-light { color: var(--ai-ink-2) !important; background-color: var(--ai-surface-3) !important; }
.badge.text-bg-dark { color: #fff !important; background-color: var(--ai-ink) !important; }

a.badge:hover,
a.badge:focus {
    filter: brightness(0.96);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--ai-line);
    --bs-dropdown-border-radius: var(--ai-r-lg);
    --bs-dropdown-padding-y: 0.375rem;
    --bs-dropdown-font-size: 0.8125rem;
    --bs-dropdown-link-hover-bg: var(--ai-surface-3);
    --bs-dropdown-link-active-bg: var(--ai-accent-ink);
    --bs-dropdown-link-active-color: var(--ai-accent);
    --bs-dropdown-box-shadow: var(--ai-shadow-md);
    box-shadow: var(--ai-shadow-md);
}

.dropdown-item {
    margin: 0 0.375rem;
    width: auto;
    padding: 0.4375rem 0.625rem;
    border-radius: 4px;
    font-weight: 500;
}

.dropdown-header {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ai-ink-3);
}

.dropdown-divider {
    border-top-color: var(--ai-line);
}

.tooltip {
    --bs-tooltip-bg: var(--ai-ink);
    --bs-tooltip-font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   10. Utilities that used to come from SB Admin
   -------------------------------------------------------------------------- */
.text-xs {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.text-lg {
    font-size: 1.2rem;
}

.text-gray-100 { color: #f6f6f9 !important; }
.text-gray-200 { color: #eaeaef !important; }
.text-gray-300 { color: #c0c0cf !important; }
.text-gray-400 { color: #a5a5ba !important; }
.text-gray-500 { color: #8e8ea9 !important; }
.text-gray-600 { color: #666687 !important; }
.text-gray-700 { color: #4a4a6a !important; }
.text-gray-800 { color: #32324d !important; }
.text-gray-900 { color: #212134 !important; }

.text-white-50 {
    color: rgba(255, 255, 255, 0.6) !important;
}

.bg-gray-100 { background-color: #f6f6f9 !important; }
.bg-gray-200 { background-color: #eaeaef !important; }

.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.bg-gradient-primary {
    background-color: var(--ai-sidebar);
}

.bg-white {
    background-color: var(--ai-surface) !important;
}

.bg-light {
    background-color: var(--ai-surface-2) !important;
}

.o-hidden {
    overflow: hidden !important;
}

.text-muted { color: var(--ai-ink-3) !important; }
.text-primary { color: var(--ai-accent) !important; }
.text-danger { color: #d02b20 !important; }
.text-success { color: #328048 !important; }
.text-warning { color: #b25e09 !important; }
.text-info { color: #0c75af !important; }

.rounded { border-radius: var(--ai-r) !important; }

.shadow,
.shadow-sm {
    box-shadow: var(--ai-shadow) !important;
}

.shadow-lg {
    box-shadow: var(--ai-shadow-md) !important;
}

.chart-area,
.chart-bar,
.chart-pie {
    position: relative;
    width: 100%;
}

.chart-area,
.chart-bar {
    height: 16rem;
}

.chart-pie {
    height: 15rem;
}

@media (min-width: 768px) {
    .chart-area,
    .chart-bar {
        height: 20rem;
    }

    .chart-pie {
        height: calc(20rem - 43px);
    }
}

.preview {
    max-width: 200px;
    max-height: 150px;
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-r);
    background: var(--ai-surface-2);
}

img.img-profile {
    border-radius: 50% !important;
}

/* --------------------------------------------------------------------------
   11. Legacy page bits (homepage session alerts and modal wrapper)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .mobile-mt-10 {
        margin-top: 10px;
    }
}

.bg-login-image-custom {
    background: url("/assets/img/undraw_logistics_x4dc.svg") center / cover;
}

.session-alert {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--ai-r);
    color: #fff;
}

.session-alert.success { background-color: var(--ai-success); }
.session-alert.failed { background-color: var(--ai-danger); }

.modal-wrapper {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.modal-form {
    width: 60%;
    max-height: 90%;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   12. Auth form helpers
   -------------------------------------------------------------------------- */
form.user .form-control-user,
form.user .btn-user {
    border-radius: var(--ai-r);
}

/* ==========================================================================
   Sections below were carried over from the previous theme (CKEditor,
   Dropzone, login shell, error pages, Developer tree) and still use the
   --ai-* tokens above.
   ========================================================================== */
/* --------------------------------------------------------------------------
   13. CKEditor & Dropzone
   -------------------------------------------------------------------------- */
/* CKEditor 5 */
.ck.ck-editor {
    border: 1px solid var(--ai-line-2) !important;
    border-radius: var(--ai-r-sm) !important;
    background-color: var(--ai-surface) !important;
    box-shadow: none !important;
    font-family: var(--ai-sans) !important;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.ck.ck-editor.ck-focused {
    border-color: var(--ai-accent) !important;
    box-shadow: var(--ai-ring) !important;
}

.ck.ck-editor.ck-blurred {
    border-color: var(--ai-line) !important;
}

.ck-toolbar,
.ck-toolbar.ck-balloon-panel.ck-balloon-panel-air,
.ck-balloon-panel.ck-balloon-panel-air {
    background-color: var(--ai-surface-2) !important;
    border: 1px solid var(--ai-line) !important;
    border-radius: var(--ai-r-sm) !important;
    box-shadow: var(--ai-shadow-md) !important;
    font-family: var(--ai-sans) !important;
}

.ck.ck-editor .ck-toolbar {
    border-width: 0 0 1px 0 !important;
    border-color: var(--ai-line) !important;
    border-radius: 0 !important;
    background-color: var(--ai-surface-2) !important;
}

.ck-button,
.ck-button.ck-button-primary,
.ck-button.ck-button-on {
    border-radius: var(--ai-r-sm) !important;
    background-color: transparent !important;
    color: var(--ai-ink-2) !important;
    font-family: var(--ai-sans) !important;
    font-weight: 500 !important;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.ck-button:hover,
.ck-button:active,
.ck-button.ck-on,
.ck-button.ck-active:not(.ck-disabled):hover {
    background-color: var(--ai-surface-3) !important;
    color: var(--ai-ink) !important;
}

.ck-button.ck-button-primary:not(.ck-disabled),
.ck-button.ck-button-on {
    background-color: var(--ai-accent) !important;
    border-color: var(--ai-accent) !important;
    color: #fff !important;
}

.ck-editor__editable,
.ck-editor__editable_inline {
    background-color: var(--ai-surface) !important;
    color: var(--ai-ink) !important;
    font-family: var(--ai-sans) !important;
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
    border-radius: 0 0 var(--ai-r-sm) var(--ai-r-sm) !important;
    padding: 0.85rem 1rem !important;
    min-height: 7.5rem;
}

.ck-editor__editable.ck-focused {
    background-color: var(--ai-surface) !important;
}

.ck-editor__editable h1,
.ck-editor__editable h2,
.ck-editor__editable h3,
.ck-editor__editable h4 {
    font-family: var(--ai-sans) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--ai-ink) !important;
}

.ck-content,
.ck-content * {
    font-family: var(--ai-sans) !important;
    color: var(--ai-ink) !important;
}

.ck-content a {
    color: var(--ai-accent) !important;
}

.ck-dropdown__panel,
.ck-balloon-panel.ck-balloon-panel-air,
.ck-balloon-panel[class*="cke_colorpicker"] {
    border: 1px solid var(--ai-line) !important;
    border-radius: var(--ai-r) !important;
    background-color: var(--ai-surface) !important;
    box-shadow: var(--ai-shadow-md) !important;
}

.ck-input,
.ck-labeled-field-view textarea,
.ck-labeled-field-view input {
    border: 1px solid var(--ai-line-2) !important;
    border-radius: var(--ai-r-sm) !important;
    font-family: var(--ai-sans) !important;
    font-size: 0.8125rem !important;
    color: var(--ai-ink) !important;
    background-color: var(--ai-surface) !important;
}

.ck-input:focus,
.ck-labeled-field-view textarea:focus,
.ck-labeled-field-view input:focus {
    border-color: var(--ai-accent) !important;
    box-shadow: var(--ai-ring) !important;
}

.ck-list__item,
.ck-save-dev__button {
    border-radius: var(--ai-r-sm) !important;
    font-family: var(--ai-sans) !important;
}

.ck.ck-balloon-panel .ck-balloon-panel__arrow::before {
    border-color: var(--ai-line) !important;
}

.dropzone.dropzone {
    min-height: 150px;
    background: var(--ai-surface-2) !important;
    border: 1px dashed var(--ai-line-2) !important;
    border-radius: var(--ai-r) !important;
    color: var(--ai-ink-2);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dropzone .dz-message {
    font-family: var(--ai-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ai-ink-3);
    margin: 1.5rem 0;
}

.dropzone:hover,
.dropzone.dz-drag-hover {
    background: var(--ai-accent-ink) !important;
    border-color: var(--ai-accent) !important;
}

.dropzone .dz-preview .dz-image {
    border-radius: var(--ai-r-sm);
    border: 1px solid var(--ai-line);
}

.dropzone .dz-preview .dz-details {
    font-size: 0.7rem;
}

.dropzone .dz-preview .dz-progress .dz-upload {
    background: var(--ai-accent);
}

.dropzone .dz-preview .dz-error-message {
    background: #fef2f2;
    color: #7f1d1d;
    border-radius: var(--ai-r-sm);
    font-size: 0.7rem;
    padding: 0.5rem;
}

/* --------------------------------------------------------------------------
   14. Login / auth
   -------------------------------------------------------------------------- */
body.bg-gradient-primary {
    background-color: var(--ai-sidebar) !important;
    background-image:
        radial-gradient(1100px 520px at 50% -10%, rgba(255, 255, 255, 0.14), transparent 70%),
        linear-gradient(160deg, var(--ai-accent-dark) 0%, var(--ai-sidebar) 58%, var(--ai-sidebar) 100%),
        linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px) !important;
    background-size: auto, auto, 56px 56px, 56px 56px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
}

/* Centre the card in the viewport. `margin: auto` on a column flex item keeps
   it centred when there is room and collapses to 0 when the card is taller
   than the screen, so the top never gets clipped out of reach. */
body.bg-gradient-primary {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
    /* Shortens the flex content box so the card sits optically high rather than
       dead centre. Padding (not a transform) keeps a tall card scrollable. */
    padding-bottom: 5rem;
}

body.bg-gradient-primary > .container {
    margin: auto;
    width: 100%;
}

body.bg-gradient-primary .card {
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: var(--ai-r) !important;
    box-shadow: 0 28px 60px -28px rgba(1, 20, 32, 0.55) !important;
}

body.bg-gradient-primary .card-body .row>.col-lg-6.d-none {
    background-color: var(--ai-accent-ink);
    background-image:
        linear-gradient(to right, var(--ai-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ai-grid-line) 1px, transparent 1px);
    background-size: 28px 28px;
    border-right: 1px solid var(--ai-line);
    padding: 2rem;
}

body.bg-gradient-primary h1,
body.bg-gradient-primary .h4 {
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ai-ink);
}

/* Mobile: the logo half is hidden here, so tighten the shell up and keep the
   inputs at 16px to stop iOS Safari zooming the page on focus. */
@media (max-width: 575.98px) {
    body.bg-gradient-primary {
        padding-bottom: 2.5rem;
    }

    body.bg-gradient-primary .card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.bg-gradient-primary .card-body .row>div:last-child>.p-5 {
        padding: 1.75rem 1.25rem !important;
    }

    body.bg-gradient-primary .btn-user {
        min-height: 3rem;
    }
}

/* Touch devices need 16px inputs or iOS Safari zooms the page on focus.
   Keyed off hover capability so desktop browsers keep the compact 14px. */
@media (hover: none) and (max-width: 991.98px) {
    body.bg-gradient-primary .form-control-user {
        font-size: 1rem;
        min-height: 3rem;
    }

    body.bg-gradient-primary .btn-user {
        min-height: 3rem;
    }
}

/* Short viewports (landscape phones) key off height, not width, so trim the
   shell down enough that the card never creates phantom scrolling. */
@media (max-height: 520px) {
    body.bg-gradient-primary {
        padding-bottom: 1.5rem;
    }

    body.bg-gradient-primary .card {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.bg-gradient-primary .card-body .row>div:last-child>.p-5 {
        padding: 1.5rem !important;
    }
}

/* --------------------------------------------------------------------------
   15. Error pages
   -------------------------------------------------------------------------- */
.error {
    font-family: var(--ai-mono);
    font-size: 6.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ai-ink);
    width: max-content;
}

.error::before,
.error::after {
    background: var(--ai-bg);
    color: var(--ai-ink);
}

.error::before {
    text-shadow: 1px 0 var(--ai-accent);
}

.error::after {
    text-shadow: -1px 0 #dc2626;
}

.text-center .lead {
    font-family: var(--ai-sans);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ai-ink);
}

.text-center a:not(.btn) {
    font-family: var(--ai-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ai-accent);
}

/* --------------------------------------------------------------------------
   18. Small refinements
   -------------------------------------------------------------------------- */
.img-profile {
    border-radius: var(--ai-r-sm) !important;
}

.dz-preview .dz-progress {
    border-radius: var(--ai-r-sm);
}

.table-responsive {
    border-radius: var(--ai-r-sm);
}

.chart-area,
.chart-pie,
.chart-bar {
    position: relative;
}

.empty-state,
.text-center .fa-3x,
.text-center .fa-2x {
    color: var(--ai-ink-3);
}

.preview {
    border: 1px solid var(--ai-line);
    border-radius: var(--ai-r-sm);
    background: var(--ai-surface-2);
}

/* --------------------------------------------------------------------------
   Developer Options — parent/child tree for switches that sit under a parent
   switch. Lines are cell backgrounds so they stay continuous across rows.
   -------------------------------------------------------------------------- */
.dev-tree {
    /* x of the parent switch's centre line, and where child content starts */
    --tree-x: calc(1.72rem - 1px);
    --tree-indent: 2.6rem;
    --tree-line: var(--ai-line-2);
    --tree-tick: calc(var(--tree-indent) - var(--tree-x) - 0.3rem);
}

.dev-tree-cell { border-top: 0 !important; }

/* Parent row: line leaves from below the parent's switch */
.dev-tree-parent {
    background: linear-gradient(var(--tree-line), var(--tree-line)) no-repeat var(--tree-x) 100% / 2px 50%;
}

/* Rows inside a child group that has more siblings below it */
.dev-tree-pass {
    background: linear-gradient(var(--tree-line), var(--tree-line)) no-repeat var(--tree-x) 0 / 2px 100%;
}

/* A child heading with siblings below: ├ */
.dev-tree-branch {
    background:
        linear-gradient(var(--tree-line), var(--tree-line)) no-repeat var(--tree-x) 0 / 2px 100%,
        linear-gradient(var(--tree-line), var(--tree-line)) no-repeat var(--tree-x) 50% / var(--tree-tick) 2px;
}

/* The last child heading: └ */
.dev-tree-end {
    background:
        linear-gradient(var(--tree-line), var(--tree-line)) no-repeat var(--tree-x) 0 / 2px 50%,
        linear-gradient(var(--tree-line), var(--tree-line)) no-repeat var(--tree-x) 50% / var(--tree-tick) 2px;
}

.dev-tree-child-heading { padding-left: var(--tree-indent) !important; }

.dev-tree-child-switch { margin-left: calc(var(--tree-indent) - 0.2rem) !important; }

/* Error pages: static big number (the old glitch overlay is gone) */
.error::before,
.error::after {
    display: none;
}