/*
 * Fundamentos. Todas as regras do plugin ficam sob as paletas "central_*":
 * ao escolher outra paleta nas preferências, o GLPI volta ao visual original.
 * Só usa as variáveis --cs, --tblr e --glpi definidas em themes/_tokens.scss.
 */
:root[data-glpi-theme^="central_"] {
    body {
        font-size: var(--cs-text-sm);
        font-family: var(--cs-font);
        background-color: var(--cs-bg);
        color: var(--cs-text);
        -webkit-font-smoothing: antialiased;
        overflow-wrap: break-word;
    }

    :focus-visible {
        outline: 2px solid var(--cs-primary);
        outline-offset: 2px;
    }

    .card {
        background-color: var(--cs-surface);
        border: 1px solid var(--cs-border);
        border-radius: var(--cs-radius-md);
        box-shadow: var(--cs-shadow-sm);
    }

    .card-header,
    .card-footer {
        border-color: var(--cs-border);
    }

    /* Botões */
    .spinner-border {
        color: var(--cs-primary);
    }

    .btn {
        border-radius: var(--cs-radius-sm);
        font-weight: 500;
        transition: background-color var(--cs-transition), border-color var(--cs-transition), color var(--cs-transition);
    }

    .btn-primary {
        --tblr-btn-bg: var(--cs-primary);
        --tblr-btn-border-color: var(--cs-primary);
        --tblr-btn-color: var(--cs-primary-fg);
        --tblr-btn-hover-bg: var(--cs-primary-hover);
        --tblr-btn-hover-border-color: var(--cs-primary-hover);
        --tblr-btn-hover-color: var(--cs-primary-fg);
        --tblr-btn-active-bg: var(--cs-primary-hover);
        --tblr-btn-active-border-color: var(--cs-primary-hover);
        --tblr-btn-active-color: var(--cs-primary-fg);
        --tblr-btn-disabled-bg: var(--cs-primary);
        --tblr-btn-disabled-border-color: var(--cs-primary);
        --tblr-btn-disabled-color: var(--cs-primary-fg);
    }

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

    /* Campos */
    .form-control,
    .form-select,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple,
    .select2-container--bootstrap-5 .select2-selection {
        background-color: var(--cs-surface);
        border-color: var(--cs-border);
        border-radius: var(--cs-radius-sm);
        color: var(--cs-text);
    }

    .form-control:focus,
    .form-select:focus,
    .select2-container--focus .select2-selection,
    .select2-container--open .select2-selection {
        border-color: var(--cs-primary);
        box-shadow: var(--cs-focus-ring);
        outline: 0;
    }

    .form-control::placeholder {
        color: var(--cs-text-muted);
    }

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

    .form-check-input:focus {
        box-shadow: var(--cs-focus-ring);
    }

    .form-label,
    .col-form-label {
        color: var(--cs-text);
        font-weight: 500;
    }

    /* Abas: sublinhado discreto em vez de caixas */
    .nav-tabs {
        border-color: var(--cs-border);
    }

    .nav-tabs .nav-link {
        color: var(--cs-text-muted);
        font-size: var(--cs-text-sm);
        font-weight: 500;
    }

    .nav-tabs .nav-link:hover {
        color: var(--cs-text);
    }

    .nav-tabs:not(.flex-md-column) {
        gap: var(--cs-space-1);
        border-bottom: 1px solid var(--cs-border);
    }

    .nav-tabs:not(.flex-md-column) .nav-link {
        padding: var(--cs-space-2) var(--cs-space-3);
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
    }

    .nav-tabs:not(.flex-md-column) .nav-link.active {
        background: transparent;
        border-bottom-color: var(--cs-primary);
        color: var(--cs-primary-text);
        font-weight: 600;
    }

    .nav-tabs.flex-md-column .nav-link.active {
        color: var(--cs-primary-soft-fg);
    }

    a,
    .btn-link {
        text-underline-offset: 2px;
    }

    /* Listas suspensas */
    .dropdown-menu {
        background-color: var(--cs-surface);
        border: 1px solid var(--cs-border);
        border-radius: var(--cs-radius-md);
        box-shadow: var(--cs-shadow-md);
    }

    .dropdown-item {
        border-radius: var(--cs-radius-sm);
        color: var(--cs-text);
    }

    .dropdown-item:hover,
    .dropdown-item:focus-visible {
        background-color: var(--cs-row-hover);
        color: var(--cs-text);
    }

    .modal-content {
        border: 1px solid var(--cs-border);
        border-radius: var(--cs-radius-lg);
        box-shadow: var(--cs-shadow-md);
    }

    /* A cor de fundo das iniciais é sorteada pelo core; foto do usuário não é afetada. */
    .avatar {
        background-color: var(--cs-primary-soft) !important;
        border-radius: var(--cs-radius-pill) !important;
        color: var(--cs-primary-soft-fg);
        font-weight: 600;
    }

    /* Selo neutro do Tabler: no escuro, texto e fundo ficariam quase iguais. */
    .badge.bg-dark-lt {
        background-color: var(--cs-surface-2) !important;
        color: var(--cs-text) !important;
    }

    [data-glpi-kb-article-title] {
        color: var(--cs-primary-text);
    }

    .alert {
        background-color: var(--cs-surface);
        border-radius: var(--cs-radius-md);
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            transition-duration: 0ms !important;
            animation-duration: 0ms !important;
        }
    }
}