/*
 * Olheiros — Design System (fonte: /design-system/design-system.html)
 *
 * Camada de tema carregada logo depois do theme.css (Bootstrap compilado).
 * Define os tokens do design system e reescreve os componentes Bootstrap usados
 * nos templates (botões, formulários, cards, badges, alertas, modais, paginação...).
 *
 * Regras de ouro:
 *  - Verde (--primary) é a única cor de marca. Só aparece como preenchimento (CTA, ícones, estados ativos).
 *  - Tinta (--ink) para texto e hairlines. Nunca usar cinza arbitrário: só --body e --mute.
 *  - Peso 900 apenas em display/títulos; todo o resto em 600 ou 400.
 *  - Raios: 24px botões/cards, 12px inputs, 16px blocos internos, 9999px badges e botões circulares.
 *  - Elevação por contraste de superfície (card branco sobre canvas sage), sem sombras.
 */

/* ============================== TOKENS ============================== */
:root {
    --primary: #9fe870;
    --primary-active: #cdffad;
    --primary-neutral: #c5edab;
    --primary-pale: #e2f6d5;
    --on-primary: #0e0f0c;
    --on-negative: #ffffff;
    --ink: #727376;
    --olheiros-green: #79b146;
    --ink-deep: #163300;
    --body: #454745;
    --mute: #868685;
    --canvas: #ffffff;
    --canvas-soft: #e8ebe6;
    --positive: #2ead4b;
    --positive-deep: #054d28;
    --warning: #ffd11a;
    --warning-deep: #b86700;
    --warning-content: #4a3b1c;
    --negative: #d03238;
    --negative-deep: #a72027;
    --negative-darkest: #a7000d;
    --negative-bg: #320707;
    --accent-orange: #ffc091;
    --accent-cyan: #38c8ff;

    --font-display: "Inter", system-ui, -apple-system, sans-serif;
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    --nav-height: 64px;
    --shadow-float: 0 0 0 1px var(--mute);
    --focus-ring: 0 0 0 3px rgba(159, 232, 112, .55);

    /* ---- Ponte com as variáveis do Bootstrap ---- */
    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #0e0f0c;
    --bs-body-color-rgb: 14, 15, 12;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-secondary-color: #454745;
    --bs-secondary-color-rgb: 69, 71, 69;
    --bs-secondary-bg: #e8ebe6;
    --bs-tertiary-color: #868685;
    --bs-tertiary-bg: #e8ebe6;
    --bs-emphasis-color: #0e0f0c;
    --bs-heading-color: #0e0f0c;
    --bs-border-color: #e8ebe6;
    --bs-border-color-translucent: #e8ebe6;
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 24px;
    --bs-border-radius-xxl: 24px;
    --bs-border-radius-pill: 9999px;
    --bs-link-color: #0e0f0c;
    --bs-link-color-rgb: 14, 15, 12;
    --bs-link-hover-color: #163300;
    --bs-link-hover-color-rgb: 22, 51, 0;
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
    --bs-focus-ring-color: rgba(159, 232, 112, .55);

    --bs-primary: #9fe870;
    --bs-primary-rgb: 159, 232, 112;
    --bs-secondary: #e8ebe6;
    --bs-secondary-rgb: 232, 235, 230;
    --bs-success: #2ead4b;
    --bs-success-rgb: 46, 173, 75;
    --bs-info: #38c8ff;
    --bs-info-rgb: 56, 200, 255;
    --bs-warning: #ffd11a;
    --bs-warning-rgb: 255, 209, 26;
    --bs-danger: #d03238;
    --bs-danger-rgb: 208, 50, 56;
    --bs-light: #e8ebe6;
    --bs-light-rgb: 232, 235, 230;
    --bs-dark: #0e0f0c;
    --bs-dark-rgb: 14, 15, 12;

    --bs-primary-text-emphasis: #163300;
    --bs-primary-bg-subtle: #e2f6d5;
    --bs-primary-border-subtle: #c5edab;
    --bs-success-text-emphasis: #054d28;
    --bs-success-bg-subtle: #e2f6d5;
    --bs-success-border-subtle: #c5edab;
    --bs-warning-text-emphasis: #4a3b1c;
    --bs-warning-bg-subtle: #ffd11a;
    --bs-warning-border-subtle: #ffd11a;
    --bs-danger-text-emphasis: #a72027;
    --bs-danger-bg-subtle: #320707;
    --bs-danger-border-subtle: #320707;
}

/* ============================== TEMA ESCURO ==============================
   O tema é escolhido no botão do navbar (Automático / Claro / Escuro) e salvo em localStorage.
   core/js/theme.js resolve "Automático" pelo sistema operacional e grava o resultado
   (light | dark) em <html data-theme>. Um script no <head> aplica isso antes da primeira pintura. */
html[data-theme='dark'] {
    color-scheme: dark;

    --canvas: #1b1d19;
    --canvas-soft: #0f100e;
    --ink: #d7dad2;
    --ink-deep: #c5edab;
    --body: #aeb2a9;
    --mute: #858982;
    --primary-pale: #22351a;
    --positive-deep: #9fe870;
    --avatar-fill: rgba(255, 255, 255, .08);

    --bs-body-color: #d7dad2;
    --bs-body-color-rgb: 215, 218, 210;
    --bs-body-bg: #1b1d19;
    --bs-body-bg-rgb: 27, 29, 25;
    --bs-secondary-color: #aeb2a9;
    --bs-secondary-color-rgb: 174, 178, 169;
    --bs-secondary-bg: #0f100e;
    --bs-tertiary-color: #858982;
    --bs-tertiary-bg: #0f100e;
    --bs-emphasis-color: #d7dad2;
    --bs-heading-color: #d7dad2;
    --bs-border-color: #0f100e;
    --bs-border-color-translucent: #0f100e;
    --bs-link-color: #d7dad2;
    --bs-link-color-rgb: 215, 218, 210;
    --bs-link-hover-color: #c5edab;
    --bs-link-hover-color-rgb: 197, 237, 171;
    --bs-secondary: #0f100e;
    --bs-light: #0f100e;
    --bs-dark: #d7dad2;
    --bs-primary-text-emphasis: #c5edab;
    --bs-primary-bg-subtle: #22351a;
    --bs-primary-border-subtle: #2f4a23;
    --bs-success-text-emphasis: #9fe870;
    --bs-success-bg-subtle: #22351a;
    --bs-success-border-subtle: #2f4a23;
}

/* Vermelho com contraste no escuro (texto e bordas; o preenchimento dos botões continua --negative) */
html[data-theme='dark'] {
    --negative-soft: #ff8a8f;
}

html[data-theme='dark'] .btn-outline-danger {
    --bs-btn-color: var(--negative-soft);
    --bs-btn-border-color: var(--negative-soft);
    color: var(--negative-soft);
    border-color: var(--negative-soft);
}

html[data-theme='dark'] .btn-outline-danger:hover,
html[data-theme='dark'] .btn-outline-danger:active {
    color: var(--on-negative);
    border-color: var(--negative);
}

html[data-theme='dark'] .text-danger,
html[data-theme='dark'] .errorlist,
html[data-theme='dark'] .invalid-feedback {
    color: var(--negative-soft) !important;
}

html[data-theme='dark'] .form-floating > .form-control.is-invalid,
html[data-theme='dark'] .form-floating > select.is-invalid,
html[data-theme='dark'] .form-control.is-invalid,
html[data-theme='dark'] .form-select.is-invalid {
    border-color: var(--negative-soft) !important;
    color: var(--negative-soft) !important;
}

html[data-theme='dark'] .modal-backdrop {
    --bs-backdrop-bg: #000;
}

html[data-theme='dark'] img:not([src$=".svg"]) {
    /* fotos/escudos continuam naturais; só reduz o brilho para não "estourar" no escuro */
    filter: brightness(.92);
}

html[data-theme='dark'] .select2-dropdown.select2-dropdown,
html[data-theme='dark'] .select2-container.select2-container--default .select2-results__option {
    background: var(--canvas);
    color: var(--ink);
}

html[data-theme='dark'] .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
}

/* ============================== BASE ============================== */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    background: var(--canvas-soft);
    color: var(--ink);
}

main {
    letter-spacing: 0;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--ink);
}

h1, .h1 {
    font-size: clamp(40px, 6vw, 64px);
    line-height: .95;
    letter-spacing: -1.2px;
}

h2, .h2 {
    font-size: clamp(32px, 4vw, 40px);
    line-height: 1;
    letter-spacing: -1px;
}

h3, .h3 {
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.8px;
}

h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ink);
}

h4, .h4 {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -.48px;
}

h5, .h5 {
    font-size: 20px;
    line-height: 1.5;
}

h6, .h6 {
    font-size: 16px;
}

b, strong {
    font-weight: 600;
}

small, .small {
    font-size: 14px;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--ink-deep);
}

hr {
    border-color: var(--canvas-soft);
    opacity: 1;
}

::selection {
    background: var(--primary);
    color: var(--on-primary);
}

/* Utilitários de texto/cor remapeados para os tokens */
.text-primary {
    color: var(--ink-deep) !important;
}

.text-secondary {
    color: var(--body) !important;
}

.text-muted, .text-body-secondary {
    color: var(--mute) !important;
}

.text-success {
    color: var(--positive-deep) !important;
}

.text-danger {
    color: var(--negative) !important;
}

.text-warning {
    color: var(--warning-deep) !important;
}

.text-info {
    color: var(--body) !important;
}

.text-dark {
    color: var(--ink) !important;
}

.fw-light, .fw-lighter {
    font-weight: 400 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-bold, .fw-bolder {
    font-weight: 600 !important;
}

.bg-light {
    background-color: var(--canvas-soft) !important;
}

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

.border-secondary {
    border-color: var(--canvas-soft) !important;
}

.shadow, .shadow-sm, .shadow-lg {
    box-shadow: none !important;
}

.rounded-3 {
    border-radius: var(--radius-lg) !important;
}

.link-secondary {
    color: var(--body) !important;
}

/* ============================== BOTÕES ============================== */
.btn {
    --bs-btn-padding-x: 24px;
    --bs-btn-padding-y: 0;
    --bs-btn-font-family: var(--font-sans);
    --bs-btn-font-size: 16px;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: var(--radius-xl);
    --bs-btn-focus-box-shadow: var(--focus-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: var(--radius-xl);
    background-image: none;
    box-shadow: none;
    text-decoration: none;
    letter-spacing: .1px;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.btn:focus-visible {
    box-shadow: var(--focus-ring);
    outline: 0;
}

.btn:active {
    transform: scale(.98);
}

.btn-lg {
    --bs-btn-padding-x: 28px;
    --bs-btn-font-size: 16px;
    --bs-btn-border-radius: var(--radius-xl);
    min-height: 56px;
}

.btn-sm {
    --bs-btn-padding-x: 16px;
    --bs-btn-font-size: 14px;
    --bs-btn-border-radius: var(--radius-xl);
    min-height: 36px;
}

.btn:disabled, .btn.disabled {
    opacity: 1;
}

/* Primário — CTA verde Wise */
.btn-primary, .btn-success {
    --bs-btn-color: var(--on-primary);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-active);
    --bs-btn-hover-border-color: var(--primary-active);
    --bs-btn-focus-shadow-rgb: 159, 232, 112;
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-neutral);
    --bs-btn-active-border-color: var(--primary-neutral);
    --bs-btn-disabled-color: var(--mute);
    --bs-btn-disabled-bg: var(--primary-pale);
    --bs-btn-disabled-border-color: var(--primary-pale);
    color: var(--on-primary);
}

.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus,
.btn-primary:active, .btn-success:active {
    color: var(--ink);
}

/* Secundário — sage */
.btn-secondary, .btn-default {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--canvas-soft);
    --bs-btn-border-color: var(--canvas-soft);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--primary-pale);
    --bs-btn-hover-border-color: var(--primary-pale);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-neutral);
    --bs-btn-active-border-color: var(--primary-neutral);
    --bs-btn-disabled-color: var(--mute);
    --bs-btn-disabled-bg: var(--canvas-soft);
    --bs-btn-disabled-border-color: var(--canvas-soft);
    color: var(--ink);
    background-color: var(--canvas-soft);
    border-color: var(--canvas-soft);
}

.btn-default:hover {
    background-color: var(--primary-pale);
    border-color: var(--primary-pale);
}

/* Terciário — outline tinta (também usado por info/dark outline) */
.btn-info, .btn-light,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-dark, .btn-outline-light {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--canvas);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--primary-pale);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-neutral);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-disabled-color: var(--mute);
    --bs-btn-disabled-bg: var(--canvas);
    --bs-btn-disabled-border-color: var(--canvas-soft);
    color: var(--ink);
    background-color: var(--canvas);
    border-color: var(--ink);
}

.btn-info:hover, .btn-light:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-info:hover,
.btn-outline-dark:hover, .btn-outline-light:hover {
    color: var(--ink);
    background-color: var(--primary-pale);
}

/* Destrutivo */
.btn-danger {
    --bs-btn-color: var(--on-negative);
    --bs-btn-bg: var(--negative);
    --bs-btn-border-color: var(--negative);
    --bs-btn-hover-color: var(--canvas);
    --bs-btn-hover-bg: var(--negative-deep);
    --bs-btn-hover-border-color: var(--negative-deep);
    --bs-btn-active-color: var(--canvas);
    --bs-btn-active-bg: var(--negative-darkest);
    --bs-btn-active-border-color: var(--negative-darkest);
    --bs-btn-disabled-bg: var(--negative);
    --bs-btn-disabled-border-color: var(--negative);
    color: var(--on-negative);
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    color: var(--on-negative);
}

.btn-outline-danger {
    --bs-btn-color: var(--negative);
    --bs-btn-bg: var(--canvas);
    --bs-btn-border-color: var(--negative);
    --bs-btn-hover-color: var(--on-negative);
    --bs-btn-hover-bg: var(--negative);
    --bs-btn-hover-border-color: var(--negative);
    --bs-btn-active-color: var(--canvas);
    --bs-btn-active-bg: var(--negative-deep);
    --bs-btn-active-border-color: var(--negative-deep);
    color: var(--negative);
    background-color: var(--canvas);
}

.btn-outline-danger:hover, .btn-outline-danger:active {
    color: var(--on-negative);
}

/* Aviso */
.btn-warning, .btn-outline-warning {
    --bs-btn-color: var(--warning-content);
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--warning-content);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning-deep);
    --bs-btn-active-color: var(--warning-content);
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning-deep);
    color: var(--warning-content);
    background-color: var(--warning);
}

.btn-warning:hover, .btn-outline-warning:hover {
    color: var(--warning-content);
}

.btn-dark {
    --bs-btn-color: var(--primary);
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: var(--primary-active);
    --bs-btn-hover-bg: var(--ink-deep);
    --bs-btn-hover-border-color: var(--ink-deep);
    color: var(--primary);
}

/* Link */
.btn-link {
    --bs-btn-color: var(--ink);
    --bs-btn-hover-color: var(--ink-deep);
    min-height: 0;
    padding: 6px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Botão circular de ícone (btn-icon-circular) */
.icons-list,
.btn-responsive-primary,
.btn-responsive-danger {
    --bs-btn-padding-x: 0;
    width: 40px;
    min-height: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-pill);
    background: var(--canvas);
    color: var(--ink);
    border: 1px solid var(--canvas-soft);
    font-size: 14px;
}

.icons-list:hover, .btn-responsive-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.btn-responsive-danger:hover {
    background: var(--negative);
    border-color: var(--negative);
    color: var(--on-negative);
}

.btn-outline-info.icons-list {
    background: var(--canvas);
    border-color: var(--canvas-soft);
}

.btn-outline-info.icons-list:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* Fechar (modal/alert) */
.btn-close {
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-pill);
    background-color: var(--canvas-soft);
    background-size: 10px;
    opacity: 1;
    box-shadow: none;
}

.btn-close:hover {
    background-color: var(--primary-pale);
}

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

.alert-danger .btn-close {
    background-color: rgba(255, 255, 255, .16);
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================== FORMULÁRIOS ============================== */
.form-label, label {
    font-weight: 600;
}

.form-label {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--ink);
}

.form-control, .form-select,
.form-floating > .form-control,
.form-floating > .form-select {
    min-height: 56px;
    height: 56px;
    background-color: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    border: 1px solid var(--olheiros-green);
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control, .form-floating > textarea.form-control {
    height: auto;
    min-height: 96px;
}

.form-control::placeholder {
    color: var(--mute);
}

.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--canvas-soft);
    border-color: var(--canvas-soft);
    color: var(--mute);
}

/* Reseta o visual "underline" antigo do theme.css */
.form-floating input,
.form-floating select,
.form-floating textarea,
.form-floating input.is-invalid,
.form-floating input:not(:placeholder-shown),
.form-floating textarea:not(:placeholder-shown),
.form-floating select:not([data-selected="-1"]),
.form-floating select:not([data-selected="-1"]):not(.is-invalid) {
    background-color: var(--canvas);
    border: 1px solid var(--olheiros-green);
    border-radius: var(--radius-md);
}

.form-control:focus, .form-select:focus,
.form-floating input:focus,
.form-floating textarea:focus,
.form-floating select:focus,
.form-control.is-invalid:focus {
    background-color: var(--canvas);
    color: var(--ink);
    border: 1px solid var(--olheiros-green);
    outline: 0;
    box-shadow: none !important;
}

.form-floating > .form-control.is-invalid,
.form-floating > select.is-invalid,
.form-floating > select.is-invalid:focus,
.form-floating > input.is-invalid,
.form-control.is-invalid, .form-select.is-invalid {
    border: 1px solid var(--negative) !important;
    color: var(--negative) !important;
    background-image: none;
}

.form-floating {
    margin-bottom: 16px;
}

.form-floating > .form-control,
.form-floating > .form-select {
    padding: 1.625rem 16px .5rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .5rem;
}

.form-floating > textarea.form-control {
    padding-top: 1.75rem;
}

.form-select {
    background-position: right 16px center;
    background-size: 14px 10px;
    padding-right: 40px;
}

.form-floating > label,
.form-floating > input:required + label,
.form-floating > textarea:required + label,
.form-floating > select:required ~ label {
    top: 0;
    padding: 1rem 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--body);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    top: 0;
    opacity: 1;
    color: var(--body);
    transform: scale(.82) translateY(-.55rem) translateX(.15rem);
}

.form-floating > .form-select[data-selected="-1"] ~ label {
    top: 0;
    opacity: 1;
    font-size: 16px;
    font-weight: 600;
    transform: none;
}

.form-floating > .form-select[data-selected="-1"]:focus ~ label,
.form-floating > .form-select:not([data-selected="-1"]) ~ label {
    transform: scale(.82) translateY(-.55rem) translateX(.15rem);
}

/* Campo flutuante que também é coluna do grid (.row > .col-* .form-floating):
   o input fica dentro do padding de gutter da coluna, então o label precisa
   começar no mesmo ponto — senão o texto encosta na borda do input. */
.row > .form-floating > label {
    left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    width: calc(100% - var(--bs-gutter-x, 1.5rem));
}

.form-floating input:required + label:after,
.form-floating select:required ~ label:after {
    content: " *";
    color: var(--negative);
}

/* Evita fundo cinza do autofill do navegador */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--canvas) inset !important;
    -webkit-text-fill-color: var(--ink);
}

.form-text, .obs-text, .help-text {
    font-size: 14px;
    color: var(--body);
    font-weight: 400;
}

.errorlist, .invalid-feedback {
    list-style: none;
    padding: 4px 4px 0;
    margin: 0 0 8px;
    color: var(--negative);
    font-size: 14px;
    font-weight: 600;
}

/* Grupo de input com botão (ex.: busca da sidebar) */
.input-group:not(.form-floating) > .form-control,
.input-group:not(.form-floating) > .form-select {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group:not(.form-floating) > .input-group-text,
.input-group:not(.form-floating) > .btn {
    border: 1px solid var(--olheiros-green);
    border-left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--primary);
    color: var(--on-primary);
    min-height: 56px;
}

.input-group:not(.form-floating) > .form-control:focus {
    z-index: 3;
}

/* Campo flutuante dentro de input-group mantém o raio cheio */
.form-floating.input-group > .form-control,
.form-floating.input-group > .form-select {
    border-radius: var(--radius-md) !important;
    width: 1%;
    flex: 1 1 auto;
}

.btn-outline-help {
    position: absolute !important;
    right: 12px;
    top: 14px;
    z-index: 5;
    min-height: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-size: 16px;
}

.btn-outline-help:hover, .btn-outline-help:focus {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: none;
}

.is-invalid + label + .btn-outline-help {
    right: 12px;
}

/* Botão de ajuda (?) em campo de texto dentro do grid: afasta da borda do input
   (o botão é posicionado a partir da coluna, que tem o gutter como padding). */
.row > .form-floating > .btn-outline-help {
    right: calc(var(--bs-gutter-x, 1.5rem) * .5 + 12px);
}

/* Botão "adicionar" ao lado do select: deixa a seta do select visível */
.form-floating > .form-select ~ .btn-outline-help {
    right: 44px;
}

/* Checkbox, radio e switch */
.form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: .125em;
    background-color: var(--canvas);
    border: 1px solid var(--ink);
    box-shadow: none;
}

.form-check-input:focus {
    border-color: var(--ink);
    box-shadow: none;
}

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

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230e0f0c' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230e0f0c'/%3e%3c/svg%3e");
}

.form-switch .form-check-input {
    width: 2.5em;
    height: 1.5em;
    border-radius: var(--radius-pill);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230e0f0c'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-color: var(--primary);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230e0f0c'/%3e%3c/svg%3e");
}

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

input[type="color"] {
    min-height: 56px;
    padding: 6px;
}

/* Tags/filtros em pill (radio e checkbox customizados) */
.form-radio-color {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.form-radio-color label.lbl-radio-color {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 16px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    background: var(--canvas);
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.form-radio-color label.lbl-radio-color:hover {
    background: var(--primary-pale);
}

.form-radio-color input[type='radio']:checked + label {
    background: var(--primary);
    color: var(--on-primary);
}

.form-basic {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    background: var(--canvas);
    border: 1px solid var(--olheiros-green);
    border-radius: var(--radius-md);
    -webkit-appearance: none;
    appearance: none;
}

.form-basic:focus, .form-basic:focus-within, .form-basic:focus-visible {
    border: 1px solid var(--olheiros-green);
    outline: 0;
    box-shadow: none;
}

form .form-footer, .row-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 0;
}

/* ============================== CARDS ============================== */
.card {
    --bs-card-border-radius: var(--radius-xl);
    --bs-card-border-color: var(--canvas-soft);
    --bs-card-inner-border-radius: var(--radius-xl);
    --bs-card-bg: var(--canvas);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-x: 28px;
    --bs-card-cap-padding-y: 24px;
    --bs-card-spacer-x: 28px;
    --bs-card-spacer-y: 24px;
    background: var(--canvas);
    border: 1px solid var(--canvas-soft);
    border-radius: var(--radius-xl);
    box-shadow: none;
}

.card-header {
    padding: 24px 28px 8px;
    background: transparent;
    border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.card-body {
    padding: 16px 28px 24px;
}

.card-footer {
    padding: 20px 28px;
    background: transparent;
    border-top: 1px solid var(--canvas-soft);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.card-footer-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 28px;
}

.card-footer-buttons button:first-child,
.card-footer-buttons a:first-child {
    margin-right: 0;
}

.card-footer-buttons .btn.ms-3 {
    margin-left: 0 !important;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.6px;
    color: var(--ink);
}

/* Ícone do título = contêiner circular verde */
.card-title > i:first-child,
.card-title > span > i:first-child,
.card-title > div > span > i:first-child {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--on-primary);
    font-size: 16px;
    line-height: 1;
}

.card-title > div > span > i:first-child {
    margin-right: 12px;
}

/* Subtítulo alinhado ao texto do título: 40px do ícone circular + 12px de espaço */
.card-title > div > .card-subtitle {
    margin-left: 52px;
}

.card-subtitle {
    font-family: var(--font-sans);
    font-size: 14px !important;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--body);
}

.card-filter {
    margin: 8px 28px 0;
    padding: 12px 16px 0;
    background: var(--canvas-soft);
    border: 0;
    border-radius: var(--radius-lg);
}

.card-filter .row {
    margin: 0;
}

.card-filter > .row > a {
    display: block;
    padding: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
}

.card-filter a:link, .card-filter a:visited {
    color: var(--ink);
}

.card-filter .form-floating {
    margin-bottom: 12px;
}

.card-filter .form-floating + .form-floating {
    margin-top: 0;
}

.card-filter form .row {
    padding-bottom: 4px;
}

a.link-list, .card-body a.link-list {
    color: inherit;
    text-decoration: none;
}

/* ===== Listas (linhas padrão do sistema) ===== */
.row-header-padrao {
    margin: 0;
    padding: 4px 0 8px;
    line-height: 1.43;
    font-size: 13px;
    font-weight: 600;
    color: var(--body);
    border-bottom: 1px solid var(--canvas-soft);
}

.row-list-padrao {
    margin: 0;
    min-height: 56px;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    border-bottom: 1px solid var(--canvas-soft);
    transition: background-color .2s ease;
}

.row-list-padrao:last-child {
    border-bottom: 0;
}

.row-list-padrao:hover {
    background-color: color-mix(in srgb, var(--canvas-soft) 50%, transparent);
}

.row-list-padrao .button-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.button-group a, .button-group button {
    margin: 8px 0;
}

.button-group button:not(:first-child),
.button-group a:not(:first-child) {
    margin-left: 0;
}

.row-list-padrao div[class^="col-"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.row-list-padrao div:first-child, .row-header-padrao div:first-child {
    padding-left: 12px;
}

.row-list-padrao div:last-child, .row-header-padrao div:last-child {
    padding-right: 12px;
}

/* ============================== BADGES ============================== */
.badge {
    --bs-badge-padding-x: 12px;
    --bs-badge-padding-y: 7px;
    --bs-badge-font-size: 13px;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.badge.bg-primary, .badge.bg-success, .badge-pill.bg-primary, .badge-pill.bg-success {
    background-color: var(--primary-pale) !important;
    color: var(--positive-deep) !important;
}

.badge.bg-warning {
    background-color: var(--warning) !important;
    color: var(--warning-content) !important;
}

.badge.bg-danger {
    background-color: var(--negative-bg) !important;
    color: var(--on-negative) !important;
}

.badge.bg-secondary, .badge.bg-light {
    background-color: var(--canvas-soft) !important;
    color: var(--ink) !important;
}

.badge.bg-dark {
    background-color: var(--ink) !important;
    color: var(--primary) !important;
}

.badge.bg-info {
    background-color: var(--canvas-soft) !important;
    color: var(--ink) !important;
}

.bg-primary:not(.badge) {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

.bg-secondary:not(.badge) {
    background-color: var(--canvas-soft) !important;
    color: var(--ink) !important;
}

.bg-success:not(.badge) {
    background-color: var(--primary-pale) !important;
    color: var(--positive-deep) !important;
}

.bg-warning:not(.badge) {
    background-color: var(--warning) !important;
    color: var(--warning-content) !important;
}

.bg-danger:not(.badge) {
    background-color: var(--negative-bg) !important;
    color: var(--on-negative) !important;
}

/* ============================== ALERTAS ============================== */
.alert {
    --bs-alert-padding-x: 20px;
    --bs-alert-padding-y: 16px;
    --bs-alert-border-radius: var(--radius-lg);
    margin-bottom: 12px;
    padding: 16px 20px;
    border: 0;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.43;
}

.alert.alert-dismissible {
    padding-right: 64px;
}

.alert .btn-close {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    padding: 0;
}

.alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.alert-success {
    background: var(--primary-pale);
    color: var(--positive-deep);
}

.alert-danger {
    background: var(--negative-bg);
    color: var(--on-negative);
}

.alert-warning {
    background: var(--warning);
    color: var(--warning-content);
}

.alert-info {
    background: var(--canvas);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

/* ============================== MODAIS / FLUTUANTES ============================== */
.modal {
    --bs-modal-border-radius: var(--radius-xl);
    --bs-modal-inner-border-radius: var(--radius-xl);
    --bs-modal-border-color: var(--canvas-soft);
    --bs-modal-header-border-width: 0;
    --bs-modal-footer-border-width: 1px;
    --bs-modal-footer-border-color: var(--canvas-soft);
    --bs-modal-padding: 28px;
}

.modal-content {
    border: 1px solid var(--canvas-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
}

.modal-header {
    padding: 24px 28px 16px;
    border-bottom: 0;
    align-items: center;
}

.modal-header .btn-close {
    width: 32px;
    height: 32px;
    margin: 0 0 0 auto;
    padding: 0;
}

.modal-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.8px;
}

.modal-body {
    padding: 16px 28px 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--canvas-soft);
    gap: 8px;
}

.modal-backdrop {
    --bs-backdrop-bg: #1a1816;
    --bs-backdrop-opacity: .5;
}

.dropdown-menu {
    --bs-dropdown-border-radius: var(--radius-lg);
    --bs-dropdown-border-color: var(--canvas-soft);
    --bs-dropdown-link-color: var(--ink);
    --bs-dropdown-link-hover-bg: var(--canvas-soft);
    --bs-dropdown-link-active-bg: var(--primary);
    --bs-dropdown-link-active-color: var(--ink);
    padding: 8px;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    font-size: 14px;
}

.dropdown-item {
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-weight: 600;
    text-decoration: none;
}

.dropdown-divider {
    border-color: var(--canvas-soft);
    margin: 8px 0;
}

.tooltip {
    --bs-tooltip-bg: var(--ink);
    --bs-tooltip-color: var(--canvas);
    --bs-tooltip-border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
}

.popover {
    --bs-popover-body-color: var(--ink);
    --bs-popover-header-color: var(--ink);
    --bs-popover-header-bg: var(--canvas-soft);
    --bs-popover-border-color: var(--canvas-soft);
    --bs-popover-border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
}

/* ============================== PAGINAÇÃO ============================== */
.pagination {
    --bs-pagination-padding-x: 12px;
    --bs-pagination-padding-y: 0;
    --bs-pagination-font-size: 14px;
    --bs-pagination-color: var(--ink);
    --bs-pagination-bg: var(--canvas);
    --bs-pagination-border-color: var(--canvas-soft);
    --bs-pagination-hover-color: var(--ink);
    --bs-pagination-hover-bg: var(--primary-pale);
    --bs-pagination-hover-border-color: var(--primary-pale);
    --bs-pagination-focus-color: var(--ink);
    --bs-pagination-focus-bg: var(--primary-pale);
    --bs-pagination-focus-box-shadow: var(--focus-ring);
    --bs-pagination-active-color: var(--canvas);
    --bs-pagination-active-bg: var(--ink);
    --bs-pagination-active-border-color: var(--ink);
    --bs-pagination-disabled-color: var(--mute);
    --bs-pagination-disabled-bg: var(--canvas);
    --bs-pagination-disabled-border-color: var(--canvas-soft);
    gap: 4px;
}

.page-link,
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    font-weight: 600;
    text-decoration: none;
    margin-left: 0;
}

.page-item:not(:first-child) .page-link {
    margin-left: 0;
}

.page-item.active .page-link {
    background: var(--ink);
    color: var(--canvas);
    border-color: var(--ink);
}

.page-link:focus {
    box-shadow: var(--focus-ring);
}

/* ============================== NAV / TABS / SPINNER ============================== */
.nav-link {
    color: var(--ink);
    font-weight: 600;
}

.nav-pills .nav-link {
    border-radius: var(--radius-pill);
}

.nav-pills .nav-link.active {
    background: var(--primary);
    color: var(--on-primary);
}

.spinner-border {
    --bs-spinner-border-width: 2px;
}

.progress {
    --bs-progress-bg: var(--canvas-soft);
    --bs-progress-bar-bg: var(--primary);
    --bs-progress-border-radius: var(--radius-pill);
    height: 12px;
}

.progress-bar {
    color: var(--ink);
}

/* ============================== SELECT2 ============================== */
.select2-container.select2-container--default .select2-selection--single {
    height: 56px;
    background: var(--canvas);
    border: 1px solid var(--olheiros-green);
    border-radius: var(--radius-md);
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
    line-height: 56px;
    padding-left: 16px;
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 54px;
    right: 8px;
}

.select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container.select2-container--default.select2-container--open .select2-selection--single {
    box-shadow: none;
}

.select2-dropdown {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

.select2-container.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--olheiros-green);
    border-radius: var(--radius-md);
    padding: 8px 12px;
}

.select2-container.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--primary);
    color: var(--on-primary);
}

.select2-container.select2-container--default .select2-results__option--selected {
    background: var(--canvas-soft);
}

/* Select2 múltiplo (campo de tags): mesmo molde dos demais inputs */
.select2-container.select2-container--default .select2-selection--multiple {
    min-height: 56px;
    padding: 6px 8px;
    background: var(--canvas);
    border: 1px solid var(--olheiros-green);
    border-radius: var(--radius-md);
}

.select2-container.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container.select2-container--default.select2-container--open .select2-selection--multiple {
    border: 1px solid var(--olheiros-green);
    box-shadow: none;
}

.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    margin: 3px 6px 3px 0;
    padding: 4px 12px;
    background: var(--primary-pale);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--positive-deep);
    font-size: 14px;
    font-weight: 600;
}

.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    float: none;
    margin: 0 6px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
}

.select2-container.select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 6px;
    color: var(--ink);
}

.select2-container.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--mute);
}

/* ============================== TIPOGRAFIA DE PÁGINA ============================== */
/* Eyebrow (primeira linha em texto pequeno) */
.ds-eyebrow {
    display: block;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--body);
}

/* Título de página externa */
.ds-title {
    margin: 0 0 24px;
    font-family: var(--font-display);
    font-size: clamp(32px, 6vw, 44px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -1.2px;
    color: var(--ink);
}

.ds-lead {
    margin: 0 0 24px;
    font-size: 16px;
    color: var(--body);
}

/* Selo circular de passo/status */
.ds-step-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--on-primary);
    font-size: 24px;
}

/* ============================== MISC ============================== */
label[for='id_color'] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.overlay {
    background: #1a1816;
}

.img-select__item img {
    width: 50px;
}

.bd-placeholder-img {
    font-size: 1.125rem;
}

/* Reduz movimento para quem pede */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Estado vazio das listas */
.empty-list {
    margin: 0;
    padding: 48px 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--body);
}

/* Radios de filtro em pill: o input fica oculto, o label é o controle */
.form-radio-color input[type='radio'] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.form-radio-color input[type='radio']:focus-visible + label {
    outline: 2px solid var(--olheiros-green);
    outline-offset: 2px;
}

/* Select cuja primeira opção tem texto (ex.: "Selecione"): o label fica sempre
   flutuando acima do valor, em vez de ficar por cima do texto da opção. */
.form-floating > .form-select.select-has-placeholder ~ label,
.form-floating > .form-select.select-has-placeholder[data-selected="-1"] ~ label {
    top: 0;
    opacity: 1;
    font-size: 16px;
    transform: scale(.82) translateY(-.55rem) translateX(.15rem);
}

.form-floating > .form-select.select-has-placeholder[data-selected="-1"] {
    color: var(--mute);
}

/* Campos de múltipla seleção: rótulo à esquerda, "Selecionar todos / Desmarcar todos" à direita */
.multiselect-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.multiselect-head > label,
.multiselect-head > .label-field {
    margin: 0 !important;
}

.multiselect-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.multiselect-action {
    padding: 4px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.multiselect-action:hover:not(:disabled) {
    background: var(--primary-pale);
}

.multiselect-action:focus-visible {
    outline: 2px solid var(--olheiros-green);
    outline-offset: 1px;
}

.multiselect-action:disabled {
    color: var(--mute);
    text-decoration: none;
    cursor: default;
}

/* Quando o campo tem o botão de ajuda (?) à direita, as ações ficam antes dele */
:has(> .btn-outline-help) > .multiselect-head .multiselect-actions {
    margin-right: 40px;
}

/* Paginação: respiro embaixo quando fica direto no card (fora de um .card-body, que já tem o próprio padding) */
.pagination-wrapper {
    padding-bottom: 24px;
}

.card-body > .pagination-wrapper {
    padding-bottom: 0;
}

/* Ícone do seletor (relógio/calendário) centralizado na altura do campo: o input flutuante tem mais
   padding em cima (label) que embaixo, o que empurrava o ícone para baixo */
.form-floating > input[type="time"]::-webkit-calendar-picker-indicator,
.form-floating > input[type="date"]::-webkit-calendar-picker-indicator,
.form-floating > input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 4px;
    cursor: pointer;
    transform: translateY(-9px);
}

/* Selo de cadastro pré-cadastrado (somente leitura), no lugar de editar/excluir nas listas */
.system-lock {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border-radius: var(--radius-pill);
    background: var(--canvas-soft);
    color: var(--body);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}