/*
 * AAMV design system: Bootstrap 5.3 theme (DESIGN_SYSTEM.md §4).
 * Existing templates (admin included) take the new look without being rewritten.
 * Bootstrap's own custom properties are used wherever it exposes them.
 */

:root {
    --bs-body-font-family: var(--a-font-body);
    --bs-body-font-size: var(--a-fs-base);
    --bs-body-line-height: var(--a-lh);
    --bs-body-color: var(--a-ink);
    --bs-body-bg: var(--a-paper);
    --bs-emphasis-color: var(--a-ink);
    --bs-heading-color: var(--a-ink);
    --bs-secondary-color: var(--a-muted);
    --bs-tertiary-bg: var(--a-sand);
    --bs-border-color: var(--a-line);
    --bs-border-width: 2px;
    --bs-border-radius: var(--a-radius-field);
    --bs-border-radius-lg: var(--a-radius-card);
    --bs-border-radius-pill: var(--a-radius-pill);
    --bs-focus-ring-color: var(--a-sun);
    --bs-primary-rgb: var(--a-coral-rgb);
    --bs-secondary-rgb: var(--a-muted-rgb);
    --bs-success-rgb: var(--a-leaf-rgb);
    --bs-info-rgb: var(--a-sky-rgb);
    --bs-warning-rgb: var(--a-sun-rgb);
    --bs-danger-rgb: var(--a-coral-ink-rgb);
    --bs-dark-rgb: var(--a-ink-rgb);
    --bs-light-rgb: var(--a-paper-rgb);
    --bs-form-valid-color: var(--a-leaf-ink);
    --bs-form-valid-border-color: var(--a-leaf);
    --bs-form-invalid-color: var(--a-coral-ink);
    --bs-form-invalid-border-color: var(--a-coral-ink);
}

.text-muted, .text-body-secondary { color: var(--a-muted) !important; }
.lead { font-size: var(--a-fs-lead); font-weight: 400; color: var(--a-ink-2); }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--a-font-display); font-weight: 800; color: var(--a-ink); }

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-padding-x: 22px;
    --bs-btn-padding-y: 0;
    --bs-btn-font-family: var(--a-font-body);
    --bs-btn-font-size: var(--a-fs-field);
    --bs-btn-font-weight: 800;
    --bs-btn-line-height: 1.2;
    --bs-btn-border-width: var(--a-border);
    --bs-btn-border-radius: var(--a-radius-pill);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: var(--a-btn-shadow, none);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-opacity: .5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--a-h-btn);
    white-space: nowrap;
    text-decoration: none;
    box-shadow: var(--a-btn-shadow, none);
    transition: transform var(--a-ease), box-shadow var(--a-ease), background-color var(--a-ease), color var(--a-ease), border-color var(--a-ease);
}
.btn:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 2px; }
.btn .bi { font-size: 1.1em; line-height: 1; }
.btn-lg { --bs-btn-padding-x: 28px; --bs-btn-font-size: 18px; min-height: var(--a-h-btn-lg); }
.btn-sm { --bs-btn-padding-x: 16px; --bs-btn-font-size: var(--a-fs-small); }
.btn-block, .btn.w-100 { display: flex; width: 100%; }

/* Solid variants: [background, text, border]; hover darkens to the ink shade */
.btn-primary, .btn-sky, .btn-dark, .btn-danger, .btn-success {
    --bs-btn-color: var(--a-white);
    --bs-btn-hover-color: var(--a-white);
    --bs-btn-active-color: var(--a-white);
    --bs-btn-disabled-color: var(--a-white);
    --bs-btn-bg: var(--a-btn);
    --bs-btn-hover-bg: var(--a-btn-hover);
    --bs-btn-active-bg: var(--a-btn-hover);
    --bs-btn-disabled-bg: var(--a-btn);
    --bs-btn-border-color: var(--a-btn-border, var(--a-btn));
    --bs-btn-hover-border-color: var(--a-btn-border, var(--a-btn-hover));
    --bs-btn-active-border-color: var(--a-btn-border, var(--a-btn-hover));
    --bs-btn-disabled-border-color: var(--a-btn-border, var(--a-btn));
}
.btn-primary { --a-btn: var(--a-coral); --a-btn-hover: var(--a-coral-ink); --a-btn-border: var(--a-ink); --a-btn-shadow: var(--a-shadow-btn); }
.btn-sky     { --a-btn: var(--a-sky);   --a-btn-hover: var(--a-sky-ink);   --a-btn-border: var(--a-ink); --a-btn-shadow: var(--a-shadow-btn); }
.btn-dark    { --a-btn: var(--a-ink);   --a-btn-hover: var(--a-ink-2); }
.btn-danger  { --a-btn: var(--a-coral-ink); --a-btn-hover: var(--a-ink); }
.btn-success { --a-btn: var(--a-leaf);  --a-btn-hover: var(--a-leaf-ink); }

/* "Gommette" buttons: solid ink shadow that moves with the pointer */
.btn-primary:hover, .btn-sky:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--a-ink); }
.btn-primary:active, .btn-sky:active,
.btn-primary.active, .btn-sky.active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--a-ink) !important; }
.btn-primary:disabled, .btn-sky:disabled, .btn-primary.disabled, .btn-sky.disabled { transform: none; box-shadow: var(--a-shadow-btn); }

/* Light variants: white background, ink text */
.btn-secondary, .btn-outline-dark, .btn-light {
    --bs-btn-color: var(--a-btn-text, var(--a-ink));
    --bs-btn-bg: var(--a-btn-bg, var(--a-card));
    --bs-btn-border-color: var(--a-btn-border, var(--a-ink));
    --bs-btn-hover-color: var(--a-btn-text, var(--a-ink));
    --bs-btn-hover-bg: var(--a-btn-hover-bg, var(--a-sun-soft));
    --bs-btn-hover-border-color: var(--a-btn-border, var(--a-ink));
    --bs-btn-active-color: var(--a-btn-text, var(--a-ink));
    --bs-btn-active-bg: var(--a-btn-hover-bg, var(--a-sun-soft));
    --bs-btn-active-border-color: var(--a-btn-border, var(--a-ink));
    --bs-btn-disabled-color: var(--a-btn-text, var(--a-ink));
    --bs-btn-disabled-bg: var(--a-btn-bg, var(--a-card));
    --bs-btn-disabled-border-color: var(--a-btn-border, var(--a-ink));
}
.btn-light { --a-btn-border: var(--a-card); --a-btn-hover-bg: var(--a-sun-soft); }

/* On a dark background */
.btn-outline-light {
    --bs-btn-color: var(--a-white);
    --bs-btn-border-color: var(--a-white);
    --bs-btn-hover-color: var(--a-ink);
    --bs-btn-hover-bg: var(--a-white);
    --bs-btn-hover-border-color: var(--a-white);
    --bs-btn-active-color: var(--a-ink);
    --bs-btn-active-bg: var(--a-white);
    --bs-btn-active-border-color: var(--a-white);
}

.btn-link {
    --bs-btn-color: inherit;
    --bs-btn-hover-color: var(--a-coral);
    --bs-btn-active-color: var(--a-coral);
    --bs-btn-border-color: transparent;
    --bs-btn-padding-x: 4px;
    font-weight: 800;
    text-decoration: underline;
}

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

/* ---------- Form fields ---------- */
.form-label, .col-form-label { margin-bottom: 6px; font-size: var(--a-fs-small); font-weight: 800; color: var(--a-ink); }
legend.col-form-label, legend.form-label { font-size: var(--a-fs-small); }
.form-text { font-size: var(--a-fs-small); color: var(--a-muted); }
.required::after { content: " *"; color: var(--a-coral-ink); }

.form-control, .form-select {
    min-height: var(--a-h-field);
    padding: 12px 16px;
    border: var(--a-border) solid var(--a-field-border);
    border-radius: var(--a-radius-field);
    background-color: var(--a-field);
    color: var(--a-ink);
    font-family: var(--a-font-body);
    font-size: var(--a-fs-field);
    font-weight: 600;
    line-height: 1.5;
}
.form-control::placeholder { color: var(--a-muted); opacity: 1; font-weight: 600; }
textarea.form-control { height: auto; min-height: 140px; }

/* File field (ADM-6): the button is a small outlined pill inside the field (6 + 40 + 6 px + borders = 56 px) */
/* Fixed height: the inline button on the line box of the field made it 60px (B10) */
.form-control[type="file"] { height: var(--a-h-field); padding: 6px 14px 6px 6px; line-height: 40px; }
.form-control::file-selector-button {
    height: 40px;
    margin: 0 14px 0 0;
    padding: 0 18px;
    border: var(--a-border) solid var(--a-ink);
    border-radius: var(--a-radius-pill);
    background-color: var(--a-card);
    color: var(--a-ink);
    font-family: var(--a-font-body);
    font-size: var(--a-fs-small);
    font-weight: 800;
    line-height: 36px;
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--a-sun-soft); }
.form-control[type="file"]:focus::file-selector-button { background-color: var(--a-sun-soft); }
/*
 * On a phone, the button and the name of the file do not fit on one line: the browser cut the name in the
 * middle ("Aucu…r choisi"). With JavaScript, js/forms.js writes the name under the field ([data-file-name])
 * and the field only shows its button.
 */
[data-file-name] { display: none; }
@media (max-width: 575.98px) {
    .js .form-control[type="file"] { padding-right: 6px; font-size: 0; }
    .js [data-file-name] { display: block; overflow-wrap: anywhere; }
}
.form-select {
    padding-right: 42px;
    background-image: var(--a-chevron);
    background-position: right 14px center;
    background-size: 18px 18px;
}
.form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 16px; background-image: none; }
.form-control:focus, .form-select:focus {
    border-color: var(--a-ink);
    background-color: var(--a-field);
    color: var(--a-ink);
    box-shadow: var(--a-ring);
    outline: 0;
}
/* A select on its empty option ("Choisissez un quartier") reads as a hint, not as a chosen value (B6) */
.form-select:has(option[value=""]:checked) { color: var(--a-muted); }
.form-select option { color: var(--a-ink); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--a-sand); color: var(--a-muted); }
/*
 * Invalid field: coral border and error icon (--a-invalid-icon, in --a-coral-ink; Bootstrap's own icon is a
 * hard-coded #dc3545). The same state is given to Select2 and to the rich text editor (below).
 */
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--a-coral-ink); }
.form-control.is-invalid { background-image: var(--a-invalid-icon); background-size: 20px 20px; background-position: right 14px center; padding-right: 44px; }
textarea.form-control.is-invalid { background-position: top 14px right 14px; }
.form-control.is-invalid[type="file"] { padding-right: 44px; background-position: right 14px center; }
.form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
    padding-right: 72px;
    background-image: var(--a-chevron), var(--a-invalid-icon);
    background-position: right 14px center, right 42px center;
    background-size: 18px 18px, 20px 20px;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--a-coral-ink); box-shadow: var(--a-ring); }
.invalid-feedback { font-size: var(--a-fs-small); font-weight: 700; color: var(--a-coral-ink); }

.input-group-text {
    border: var(--a-border) solid var(--a-line-strong);
    border-radius: var(--a-radius-field);
    background: var(--a-sand);
    color: var(--a-ink);
    font-weight: 700;
}

.form-check { min-height: 28px; padding-left: 2em; }
/* Same specificity as Bootstrap's ".form-check .form-check-input" (margin-left: -1.5em), or the box is offset */
.form-check-input,
.form-check .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: .15em;
    margin-left: -2em;
    border: var(--a-border) solid var(--a-field-border);
    background-color: var(--a-card);
}
.form-check-input:checked { background-color: var(--a-sky); border-color: var(--a-sky); }
.form-check-input:focus { border-color: var(--a-ink); box-shadow: var(--a-ring); }
.form-check-input:focus-visible { outline: 0; }
.form-check-label { font-weight: 600; }
.form-check-inline { margin-right: 20px; }
.form-switch { padding-left: 2.8em; }
.form-switch .form-check-input { width: 2.2em; margin-left: -2.8em; }
/*
 * Checkboxes and radios (consent, remember me, days, profiles) on 44px touch targets (CPT-10, B3).
 * In flex, the negative margin of the box no longer lands in the padding of the row: the gap replaces both
 * (or the label touches the box). The box stays on the first line of a long label (consent).
 */
@media (max-width: 767.98px) {
    .form-check,
    .form-switch { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 9px 0; }
    .form-check-inline { display: inline-flex; }
    .form-check .form-check-input { flex-shrink: 0; float: none; margin: .15em 0 0; }
}

/*
 * ---------- Select2 4.0.13 (default theme), aligned with .form-select ----------
 * select2.min.css is loaded after this file (css block of the page): every rule here starts with
 * ".select2-container.select2-container--default" (or ".select2-container …"), one class more than the
 * rule of Select2 it replaces, or Select2 wins (pale #999 placeholder, blue highlighted option…).
 */
.select2-container.select2-container--default .select2-selection--single,
.select2-container.select2-container--default .select2-selection--multiple {
    display: flex;
    align-items: center;
    min-height: var(--a-h-field);
    height: auto;
    border: var(--a-border) solid var(--a-field-border);
    border-radius: var(--a-radius-field);
    background: var(--a-field);
    color: var(--a-ink);
    font-size: var(--a-fs-field);
    font-weight: 600;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    padding: 0 42px 0 16px;
    line-height: 1.5;
    color: var(--a-ink);
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: var(--a-muted); }
.select2-container.select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 8px; font-size: 22px; font-weight: 700; color: var(--a-muted); }
.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 14px;
    width: 18px;
    height: 100%;
    background: var(--a-chevron) center / 18px 18px no-repeat;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container.select2-container--default.select2-container--focus .select2-selection,
.select2-container.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--a-ink);
    border-radius: var(--a-radius-field);
    box-shadow: var(--a-ring);
    outline: 0;
}
.select2-container.select2-container--default.select2-container--disabled .select2-selection { background: var(--a-sand); }
/* Invalid (T9): same border and icon as an invalid .form-select; cities.js copies aria-invalid to the combobox */
select.is-invalid + .select2-container.select2-container--default .select2-selection { border-color: var(--a-coral-ink); }
select.is-invalid + .select2-container.select2-container--default .select2-selection--single {
    background-image: var(--a-invalid-icon);
    background-repeat: no-repeat;
    background-position: right 42px center;
    background-size: 20px 20px;
}
select.is-invalid + .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 72px; }
.select2-container.select2-container--default .select2-selection--multiple { padding: 4px 12px 8px; }
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0; }
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 4px 6px 0 0;
    padding: 2px 12px;
    border: 0;
    border-radius: var(--a-radius-pill);
    background: var(--a-sand);
    font-size: var(--a-fs-small);
    font-weight: 800;
}
.select2-container.select2-container--default .select2-search--inline .select2-search__field { margin-top: 6px; font-family: var(--a-font-body); }

.select2-container.select2-container--default .select2-dropdown,
.select2-container.select2-container--open .select2-dropdown--below,
.select2-container.select2-container--open .select2-dropdown--above {
    overflow: hidden;
    border: var(--a-border) solid var(--a-ink);
    border-radius: var(--a-radius-field);
    background: var(--a-card);
    box-shadow: 6px 6px 0 var(--a-sun);
    font-size: var(--a-fs-field);
}
.select2-container.select2-container--open .select2-dropdown--below { margin-top: 8px; }
.select2-container.select2-container--open .select2-dropdown--above { margin-top: -8px; }
.select2-container.select2-container--default .select2-search--dropdown { padding: 10px; }
.select2-container.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 44px;
    padding: 8px 12px;
    border: var(--a-border) solid var(--a-field-border);
    border-radius: 12px;
    background: var(--a-field);
    font-family: var(--a-font-body);
    font-size: var(--a-fs-field);
}
.select2-container.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--a-ink); outline: 0; }
.select2-container .select2-results__option { padding: 10px 16px; }
.select2-container.select2-container--default .select2-results__message { color: var(--a-muted); }
.select2-container.select2-container--default .select2-results__option[aria-selected=true] { background: var(--a-sand); color: var(--a-ink); }
.select2-container.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--a-sun-soft); color: var(--a-ink); }
.select2-container.select2-container--default .select2-results__option[role=group] .select2-results__group { font-weight: 800; }

/*
 * ---------- CKEditor 5 (rich text of the ads and news, Base/_rich_text_editor.html.twig) ----------
 * Aligned with .form-control: Nunito 17 px, 2 px borders, 16 px corners, ink border and sun ring on focus,
 * coral border when invalid, sand toolbar with 40 px buttons (T8).
 * ckeditor5.css is loaded after this file and sets its variables on :root: they are set here on every .ck
 * element (the editor, and its balloons in .ck-body-wrapper), which comes closer.
 */
.ck {
    --ck-font-face: var(--a-font-body);
    --ck-font-size-base: var(--a-fs-small);
    --ck-icon-size: 20px;
    --ck-color-text: var(--a-ink);
    --ck-color-base-text: var(--a-ink);
    --ck-color-base-border: var(--a-field-border);
    --ck-color-base-error: var(--a-coral-ink);
    --ck-color-focus-border: var(--a-ink);
    --ck-focus-ring: var(--a-border) solid var(--a-ink);
    --ck-inner-shadow: none;
    --ck-border-radius: 10px;
    --ck-color-toolbar-background: var(--a-sand);
    --ck-color-toolbar-border: var(--a-line-strong);
    --ck-color-button-default-hover-background: var(--a-sun-soft);
    --ck-color-button-default-active-background: var(--a-sun-soft);
    --ck-color-button-on-background: var(--a-sky-soft);
    --ck-color-button-on-hover-background: var(--a-sky-soft);
    --ck-color-button-on-active-background: var(--a-sky-soft);
    --ck-color-button-on-color: var(--a-sky-ink);
    --ck-color-panel-border: var(--a-ink);
    --ck-content-font-family: var(--a-font-body);
    --ck-content-font-size: var(--a-fs-field);
    --ck-content-font-color: var(--a-ink);
    --ck-content-line-height: var(--a-lh);
}
.ck.ck-editor { border-radius: var(--a-radius-field); }
.ck.ck-editor:focus-within { box-shadow: var(--a-ring); }
.ck.ck-editor .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
    border: var(--a-border) solid var(--a-field-border);
    border-bottom: 0;
    border-radius: var(--a-radius-field) var(--a-radius-field) 0 0;
    background: var(--a-sand);
}
.ck.ck-editor .ck.ck-editor__top .ck.ck-toolbar {
    /* 40 px buttons. CKEditor 49 sizes them with --ck-size-control-min-height, computed once on :root from
       --ck-ui-component-min-height (the variable of the previous versions): both are set here */
    --ck-ui-component-min-height: 40px;
    --ck-size-control-min-height: 40px;
    padding: 4px 6px;
    border: 0;
    border-radius: var(--a-radius-field) var(--a-radius-field) 0 0;
    background: var(--a-sand);
}
.ck.ck-editor .ck.ck-editor__top .ck.ck-toolbar > .ck-toolbar__items > :not(.ck-toolbar__line-break) { margin: 0 2px 0 0; }
.ck.ck-editor .ck.ck-editor__top .ck.ck-toolbar .ck.ck-button { border-radius: 10px; color: var(--a-ink); cursor: pointer; }
.ck.ck-editor .ck.ck-editor__top .ck.ck-toolbar .ck.ck-button:focus-visible { outline: 3px solid var(--a-sun); outline-offset: -3px; box-shadow: none; }
.ck.ck-editor .ck.ck-editor__top .ck.ck-toolbar .ck.ck-toolbar__separator { width: var(--a-border); margin: 8px 6px 8px 4px; background: var(--a-line-strong); }
.ck.ck-editor .ck.ck-editor__main > .ck-editor__editable {
    min-height: 220px;
    padding: 0 16px;
    border: var(--a-border) solid var(--a-field-border);
    border-radius: 0 0 var(--a-radius-field) var(--a-radius-field);
    background: var(--a-field);
    box-shadow: none;
}
.ck.ck-editor .ck.ck-editor__main > .ck-editor__editable.ck-focused { border-color: var(--a-ink); outline: 0; }
.ck.ck-editor:focus-within .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content { border-color: var(--a-ink); }
/* Invalid (error of the server, or empty content refused by the editor): coral border, even with the focus */
.ck.ck-editor.rich-text-invalid .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content,
.ck.ck-editor.rich-text-invalid .ck.ck-editor__main > .ck-editor__editable,
.ck.ck-editor.rich-text-invalid .ck.ck-editor__main > .ck-editor__editable.ck-focused { border-color: var(--a-coral-ink); }
/*
 * The whole toolbar stays visible on a phone (no "⋮" menu, shouldNotGroupWhenFull): no separators nor gaps,
 * the 7 buttons of 40 px fit in 290 px, on one line at 390 px; narrower, the toolbar wraps.
 */
.ck.ck-editor .ck.ck-editor__top .ck.ck-toolbar > .ck-toolbar__items { row-gap: 4px; }
@media (max-width: 767.98px) {
    .ck.ck-editor .ck.ck-editor__top .ck.ck-toolbar { padding: 4px; }
    .ck.ck-editor .ck.ck-editor__top .ck.ck-toolbar > .ck-toolbar__items > :not(.ck-toolbar__line-break) { margin: 0; }
    .ck.ck-editor .ck.ck-editor__top .ck.ck-toolbar .ck.ck-toolbar__separator { display: none; }
}

/* ---------- Alerts ---------- */
.alert {
    --bs-alert-padding-x: 20px;
    --bs-alert-padding-y: 16px;
    --bs-alert-border-radius: var(--a-radius-field);
    --bs-alert-color: var(--a-ink);
    --bs-alert-link-color: var(--a-ink);
    --bs-alert-bg: var(--a-alert, var(--a-sand));
    --bs-alert-border-color: var(--a-alert, var(--a-sand));
    border-width: var(--a-border);
    box-shadow: none;
    font-weight: 600;
}
.alert-success { --a-alert: var(--a-leaf-soft); }
.alert-danger  { --a-alert: var(--a-coral-soft); }
.alert-warning { --a-alert: var(--a-sun-soft); }
.alert-info    { --a-alert: var(--a-sky-soft); }
.alert a, .alert .alert-link { font-weight: 800; color: var(--a-ink); }
.alert > :last-child { margin-bottom: 0; }
.alert-dismissible { padding-right: 56px; }
.alert-dismissible .btn-close { padding: 20px; }

/* ---------- Dropdown ---------- */
.dropdown-menu {
    --bs-dropdown-min-width: 220px;
    --bs-dropdown-padding-x: 8px;
    --bs-dropdown-padding-y: 8px;
    --bs-dropdown-font-size: 16px;
    --bs-dropdown-color: var(--a-ink);
    --bs-dropdown-bg: var(--a-card);
    --bs-dropdown-border-color: var(--a-ink);
    --bs-dropdown-border-width: var(--a-border);
    --bs-dropdown-border-radius: var(--a-radius-field);
    --bs-dropdown-inner-border-radius: 10px;
    --bs-dropdown-divider-bg: var(--a-line);
    --bs-dropdown-link-color: var(--a-ink);
    --bs-dropdown-link-hover-color: var(--a-ink);
    --bs-dropdown-link-hover-bg: var(--a-sun-soft);
    --bs-dropdown-link-active-color: var(--a-white);
    --bs-dropdown-link-active-bg: var(--a-ink);
    --bs-dropdown-item-padding-x: 14px;
    --bs-dropdown-item-padding-y: 10px;
    box-shadow: 6px 6px 0 var(--a-sun);
}
.dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 10px; font-weight: 700; white-space: nowrap; }
.dropdown-item:focus-visible { outline: 3px solid var(--a-sun); outline-offset: -3px; }
.dropdown-item[aria-current="page"] { background: var(--a-sun-soft); font-weight: 800; }
.dropdown-divider { border-top-width: var(--a-border); }

/* ---------- Modal ---------- */
.modal {
    --bs-modal-padding: 24px;
    --bs-modal-bg: var(--a-card);
    --bs-modal-border-color: var(--a-ink);
    --bs-modal-border-width: var(--a-border);
    --bs-modal-border-radius: var(--a-radius-card);
    --bs-modal-inner-border-radius: 22px;
    --bs-modal-box-shadow: 6px 6px 0 var(--a-sun);
    --bs-modal-header-padding: 20px 24px;
    --bs-modal-header-border-color: var(--a-line);
    --bs-modal-footer-border-color: var(--a-line);
    --bs-modal-title-line-height: 1.2;
}
.modal-content { box-shadow: var(--bs-modal-box-shadow); }
.modal-title { font-family: var(--a-font-display); font-weight: 800; }
.modal-footer { gap: 12px; }
.modal-footer > * { margin: 0; }
.modal-backdrop { --bs-backdrop-bg: var(--a-ink); --bs-backdrop-opacity: .5; }

/* ---------- Pagination ---------- */
.pagination {
    --bs-pagination-color: var(--a-ink);
    --bs-pagination-bg: var(--a-card);
    --bs-pagination-border-width: var(--a-border);
    --bs-pagination-border-color: var(--a-line-strong);
    --bs-pagination-hover-color: var(--a-ink);
    --bs-pagination-hover-bg: var(--a-sun-soft);
    --bs-pagination-hover-border-color: var(--a-ink);
    --bs-pagination-focus-color: var(--a-ink);
    --bs-pagination-focus-bg: var(--a-card);
    --bs-pagination-focus-box-shadow: var(--a-ring);
    --bs-pagination-active-color: var(--a-white);
    --bs-pagination-active-bg: var(--a-ink);
    --bs-pagination-active-border-color: var(--a-ink);
    --bs-pagination-disabled-color: var(--a-muted);
    --bs-pagination-disabled-bg: var(--a-sand);
    --bs-pagination-disabled-border-color: var(--a-line-strong);
    gap: 10px;
    margin: 0;
}
.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    margin: 0;
    padding: 0 12px;
    border-radius: 14px;
    font-size: var(--a-fs-field);
    font-weight: 800;
    text-decoration: none;
}

/* ---------- Tables (admin) ---------- */
.table {
    --bs-table-color: var(--a-ink);
    --bs-table-bg: var(--a-card);
    --bs-table-border-color: var(--a-line);
    --bs-table-striped-color: var(--a-ink);
    --bs-table-striped-bg: var(--a-paper);
    --bs-table-hover-color: var(--a-ink);
    --bs-table-hover-bg: var(--a-sun-soft);
    --bs-table-active-bg: var(--a-sun-soft);
    font-size: 16px;
}
.table > :not(caption) > * > * { padding: 12px 14px; vertical-align: middle; }
.table > thead th, .table th { font-weight: 800; }
.table > thead { border-bottom: var(--a-border) solid var(--a-ink); }
.table-responsive { border: var(--a-border) solid var(--a-line); border-radius: var(--a-radius-field); }
.table-responsive > .table { margin-bottom: 0; }
.table .btn { --bs-btn-padding-x: 16px; --bs-btn-font-size: var(--a-fs-small); }
@media (max-width: 767.98px) {
    /* Tables not wrapped in .table-responsive scroll inside themselves instead of being clipped */
    table.table { display: block; max-width: 100%; overflow-x: auto; }
    .table-responsive > table.table { display: table; }
}

/* ---------- Badges, breadcrumb, cards, tabs, list groups ---------- */
.badge { padding: .4em .8em; border-radius: var(--a-radius-pill); font-weight: 800; }

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--a-muted);
    --bs-breadcrumb-item-active-color: var(--a-ink);
    --bs-breadcrumb-item-padding-x: 8px;
    font-size: var(--a-fs-small);
    font-weight: 700;
}
.breadcrumb a { color: var(--a-muted); }

.card {
    --bs-card-border-width: var(--a-border);
    --bs-card-border-color: var(--a-line);
    --bs-card-border-radius: var(--a-radius-card);
    --bs-card-inner-border-radius: 22px;
    --bs-card-bg: var(--a-card);
    --bs-card-cap-bg: var(--a-paper);
    --bs-card-spacer-x: var(--a-pad-card);
    --bs-card-spacer-y: 20px;
    box-shadow: var(--a-shadow-card);
}

.nav-tabs {
    --bs-nav-tabs-border-width: var(--a-border);
    --bs-nav-tabs-border-color: var(--a-line);
    --bs-nav-tabs-border-radius: 16px;
    --bs-nav-tabs-link-hover-border-color: var(--a-line) var(--a-line) transparent;
    --bs-nav-tabs-link-active-color: var(--a-ink);
    --bs-nav-tabs-link-active-bg: var(--a-card);
    --bs-nav-tabs-link-active-border-color: var(--a-line) var(--a-line) var(--a-card);
    --bs-nav-link-color: var(--a-ink-2);
    --bs-nav-link-hover-color: var(--a-coral);
    --bs-nav-link-font-weight: 800;
}

.list-group {
    --bs-list-group-color: var(--a-ink);
    --bs-list-group-bg: var(--a-card);
    --bs-list-group-border-color: var(--a-line);
    --bs-list-group-border-radius: var(--a-radius-field);
    --bs-list-group-action-hover-bg: var(--a-sun-soft);
    --bs-list-group-active-bg: var(--a-ink);
    --bs-list-group-active-border-color: var(--a-ink);
}

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