/* ============================================================
   components.css — Baú de Matrizes
   Botões, formulários, cards, notificações, badges, spinners.
   Depende de: design-system.css (variáveis)
   ============================================================ */


/* ============================================================
   SEÇÃO 1 — BOTÕES
   ============================================================ */

/* Base comum a todos os botões */
.btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            var(--spacing-sm);
    font-weight:    var(--font-weight-medium);
    line-height:    var(--line-height-tight);
    border-radius:  var(--radius-md);
    transition:     background-color var(--transition-base),
                    border-color     var(--transition-base),
                    color            var(--transition-base),
                    box-shadow       var(--transition-base);
    cursor: pointer;
}

/* Tamanhos */
.btn-xs  { padding: 0.2rem 0.5rem;   font-size: var(--font-size-xs); }
.btn-sm  { padding: 0.375rem 0.75rem; font-size: var(--font-size-sm); }
         /* .btn (padrão) já definido pelo Bootstrap */
.btn-lg  { padding: 0.75rem 1.5rem;   font-size: var(--font-size-lg); }
.btn-xl  { padding: 1rem 2rem;        font-size: var(--font-size-xl); }
.btn-block { width: 100%; }

/* Estado de processamento (ex: submit com spinner) */
.btn-processing {
    color:    transparent !important;
    position: relative;
    pointer-events: none;
}
.btn-processing::after {
    content:  "";
    position: absolute;
    width:    1em;
    height:   1em;
    top:      50%;
    left:     50%;
    margin:   -0.5em 0 0 -0.5em;
    border:   2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.75s linear infinite;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------
   Botão primário — laranja
   Absorvido de global.css (.btn-orange)
---------------------------------------------------------- */
.btn-orange,
.btn.btn-orange,
.btn.btn-orange.dropdown-toggle,
.navbar .btn-orange {
    background-color: var(--color-primary)      !important;
    border-color:     var(--color-primary)      !important;
    color:            var(--color-text-inverted) !important;
    font-weight:      var(--font-weight-medium);
}
.btn-orange:hover,
.btn-orange:focus,
.btn.btn-orange:hover,
.btn.btn-orange:focus,
.navbar .btn-orange:hover,
.navbar .btn-orange:focus {
    background-color: var(--color-primary-hover) !important;
    border-color:     var(--color-primary-hover) !important;
    color:            var(--color-text-inverted) !important;
}
.btn-orange:focus,
.btn.btn-orange:focus {
    box-shadow: 0 0 0 0.25rem var(--color-border-focus) !important;
    outline: none;
}
.btn-orange.dropdown-toggle::after,
.navbar .btn-orange.dropdown-toggle::after {
    border-top-color: var(--color-text-inverted) !important;
}

/* ----------------------------------------------------------
   Botão outline — laranja
   Absorvido de global.css (.btn-outline-orange)
---------------------------------------------------------- */
.btn-outline-orange,
.btn.btn-outline-orange {
    background-color: transparent            !important;
    border-color:     var(--color-primary)   !important;
    color:            var(--color-primary)   !important;
    font-weight:      var(--font-weight-medium);
}
.btn-outline-orange:hover,
.btn-outline-orange:focus,
.btn.btn-outline-orange:hover,
.btn.btn-outline-orange:focus {
    background-color: var(--color-primary)      !important;
    border-color:     var(--color-primary)      !important;
    color:            var(--color-text-inverted) !important;
}
.btn-outline-orange:focus,
.btn.btn-outline-orange:focus {
    box-shadow: 0 0 0 0.25rem var(--color-border-focus) !important;
    outline: none;
}

/* ----------------------------------------------------------
   Botão ghost — fundo transparente, borda neutra
---------------------------------------------------------- */
.btn-ghost,
.btn.btn-ghost {
    background-color: transparent                !important;
    border-color:     var(--color-border-strong) !important;
    color:            var(--color-text-primary)  !important;
}
.btn-ghost:hover,
.btn.btn-ghost:hover {
    background-color: var(--color-neutral-100)  !important;
}

/* ----------------------------------------------------------
   Foco universal para todos os botões (acessibilidade)
---------------------------------------------------------- */
.btn:focus-visible {
    outline:    2px solid var(--color-primary);
    outline-offset: 2px;
}


/* ============================================================
   SEÇÃO 2 — FORMULÁRIOS
   ============================================================ */

/* Grupo base: label + controle + feedback */
.form-group {
    display:       flex;
    flex-direction: column;
    gap:           var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

/* Label padrão */
.form-label {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color:       var(--color-text-secondary);
    margin-bottom: 0;
}

/* Asterisco de campo obrigatório */
.label-required {
    color:       var(--color-error);
    margin-left: 2px;
}

/* Input, select, textarea */
.form-control,
.form-select {
    border-color:  var(--color-border-strong);
    border-radius: var(--radius-md);
    color:         var(--color-text-primary);
    transition:    border-color var(--transition-base),
                   box-shadow   var(--transition-base);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 0.25rem var(--color-border-focus);
    outline:      none;
}
.form-control::placeholder {
    color: var(--color-text-muted);
}

/* Validação visual */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--color-success);
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-error);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Texto auxiliar abaixo do input */
.form-text {
    font-size: var(--font-size-xs);
    color:     var(--color-text-muted);
}

/* Feedback de validação */
.form-feedback {
    font-size: var(--font-size-xs);
    color:     var(--color-error);
    margin-top: var(--spacing-xs);
}
.form-feedback.success {
    color: var(--color-success);
}

/* Toggle de senha (ícone dentro do input) */
.input-password-wrapper {
    position: relative;
}
.password-toggle {
    position:   absolute;
    right:      var(--spacing-md);
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    cursor:     pointer;
    color:      var(--color-text-muted);
    padding:    0;
    transition: color var(--transition-base);
}
.password-toggle:hover {
    color: var(--color-primary);
}


/* ============================================================
   SEÇÃO 3 — CARDS
   ============================================================ */

.card {
    border-radius: var(--radius-lg);
    border-color:  var(--color-border);
    transition:    transform   var(--transition-slow),
                   box-shadow  var(--transition-slow);
}

/* Card com elevação na passagem do mouse */
.card-interactive:hover {
    transform:  translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Card com sombra fixa (destaque) */
.card-elevated {
    box-shadow: var(--shadow-md);
}

/* Card mais compacto */
.card-compact .card-body {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Overlay de informações no card de matriz */
.card-overlay-info {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        transparent 100%
    );
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ----------------------------------------------------------
   Card de exibição de matrizes — substitui card-span + max-img
   Migrado progressivamente do theme-compat.css
---------------------------------------------------------- */
.card-matriz {
    border:     0;
    overflow:   hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-matriz:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-md);
}
.card-matriz__img {
    height:     300px;
    width:      100%;
    object-fit: cover;
    display:    block;
}
@media (max-width: 575px) {
    .card-matriz__img { height: 28vw; }
}
.card-matriz__body {
    background-color: var(--color-bg-subtle);
    padding:          var(--spacing-sm) var(--spacing-md);
}
[data-theme="dark"] .card-matriz__body {
    background-color: var(--color-bg-muted);
}


/* ----------------------------------------------------------
   Skip link — acessibilidade por teclado (WCAG 2.1 AA)
   Visível apenas ao receber foco; posicionado antes do navbar.
---------------------------------------------------------- */
.skip-link {
    position:        absolute;
    top:             -100%;
    left:            var(--spacing-md);
    z-index:         var(--z-modal);
    padding:         var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-primary);
    color:           var(--color-text-inverted);
    border-radius:   var(--radius-md);
    font-weight:     var(--font-weight-semibold);
    font-size:       var(--font-size-sm);
    text-decoration: none;
    transition:      top var(--transition-base);
}
.skip-link:focus {
    top: var(--spacing-sm);
}


/* ============================================================
   SEÇÃO 4 — NOTIFICAÇÕES DO SISTEMA
   Sistema unificado: showNotification() e showAlert()
   usam a mesma classe base .notification.
   ============================================================ */

/* Base */
.notification {
    position:        fixed;
    top:             100px;
    left:            50%;
    transform:       translateX(-50%) translateY(-8px);
    display:         flex;
    align-items:     flex-start;
    gap:             var(--spacing-sm);
    padding:         12px 18px;
    border-radius:   var(--radius-md);
    box-shadow:      var(--shadow-lg);
    z-index:         var(--z-notification);
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.25s ease, transform 0.25s ease;
    max-width:       500px;
    width:           90%;
    font-weight:     var(--font-weight-medium);
    font-size:       var(--font-size-sm);
    border-left:     4px solid rgba(255, 255, 255, 0.35);
    color:           var(--color-text-inverted);
    background-color: var(--color-success);
}

/* Visível */
.notification.show {
    opacity:        1;
    transform:      translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Variantes de cor */
.notification.error,
.notification.erro    { background-color: var(--color-error);   border-left-color: rgba(255,255,255,0.4); }
.notification.warning { background-color: var(--color-primary); border-left-color: rgba(255,255,255,0.4); }
.notification.info    { background-color: var(--color-info);    border-left-color: rgba(255,255,255,0.4); }

/* Ícone SVG inline (injetado pelo JS) */
.notification__icon {
    flex-shrink: 0;
    width:  18px;
    height: 18px;
    margin-top: 1px;
}

/* Texto */
.notification__text { flex: 1; line-height: 1.4; }

/* Botão de fechar (presente quando dismissible: true) */
.notification__close {
    flex-shrink: 0;
    background:  none;
    border:      none;
    color:       inherit;
    opacity:     0.7;
    cursor:      pointer;
    padding:     0 0 0 8px;
    font-size:   16px;
    line-height: 1;
    transition:  opacity 0.15s;
}
.notification__close:hover { opacity: 1; }


/* ============================================================
   SEÇÃO 5 — ALERTAS INLINE (dentro da página)
   ============================================================ */

.alert-ds {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--spacing-sm);
    padding:       var(--spacing-md);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-sm);
    border-left:   4px solid;
}
.alert-ds.alert-success {
    background-color: var(--color-success-light);
    color:            var(--color-success-text);
    border-left-color: var(--color-success);
}
.alert-ds.alert-warning {
    background-color: var(--color-warning-light);
    color:            var(--color-warning-text);
    border-left-color: var(--color-warning);
}
.alert-ds.alert-error {
    background-color: var(--color-error-light);
    color:            var(--color-error-text);
    border-left-color: var(--color-error);
}
.alert-ds.alert-info {
    background-color: var(--color-info-light);
    color:            var(--color-info-text);
    border-left-color: var(--color-info);
}


/* ============================================================
   SEÇÃO 6 — BADGES
   ============================================================ */

.badge-ds {
    display:       inline-flex;
    align-items:   center;
    padding:       2px 8px;
    border-radius: var(--radius-full);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-medium);
    white-space:   nowrap;
}
.badge-primary {
    background-color: var(--color-primary-light);
    color:            var(--color-primary-hover);
}
.badge-success {
    background-color: var(--color-success-light);
    color:            var(--color-success-text);
}
.badge-error {
    background-color: var(--color-error-light);
    color:            var(--color-error-text);
}
.badge-neutral {
    background-color: var(--color-neutral-200);
    color:            var(--color-neutral-700);
}


/* ============================================================
   SEÇÃO 7 — SPINNERS / LOADING
   Absorvido de global.css (.spinner-border.text-orange)
   ============================================================ */

.spinner-border.text-orange,
.text-orange.spinner-border {
    color: var(--color-primary) !important;
}

/* Overlay de loading para bloquear área */
.loading-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(255, 255, 255, 0.75);
    display:    flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index:    10;
}


/* ============================================================
   SEÇÃO 8 — UTILITÁRIOS DE COR
   Absorvido de global.css
   ============================================================ */

.text-orange   { color:            var(--color-primary)      !important; }
.bg-orange     { background-color: var(--color-primary)      !important;
                 color:            var(--color-text-inverted) !important; }
.bg-premium    { background-color: var(--color-primary)      !important;
                 color:            var(--color-text-inverted) !important; }
.border-orange { border-color:     var(--color-primary)      !important; }

.bg-subtle     { background-color: var(--color-bg-subtle) !important; }
.bg-muted      { background-color: var(--color-bg-muted)  !important; }


/* ============================================================
   SEÇÃO 9 — DIVISORES
   ============================================================ */

.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-lg) 0;
}
.divider-strong {
    border-top-color: var(--color-border-strong);
}


/* ============================================================
   SEÇÃO 10 — FOCO GLOBAL (acessibilidade)
   Aplica indicador de foco visível para navegação por teclado.
   ============================================================ */

:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 2px;
}
/* Remove outline padrão do navegador (substituído acima) */
:focus:not(:focus-visible) {
    outline: none;
}


/* ============================================================
   SEÇÃO 11 — DARK MODE: overrides Bootstrap
   Os componentes do Design System já respondem via variáveis CSS.
   Esta seção cobre os elementos Bootstrap com cores fixas.
   ============================================================ */

/* Transição suave ao trocar tema */
[data-theme="dark"],
[data-theme="dark"] body {
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* Body */
[data-theme="dark"] body {
    background-color: var(--color-bg-body);
    color:            var(--color-text-primary);
}

/* Navbar */
[data-theme="dark"] .navbar {
    background-color: rgba(18, 18, 18, 0.92) !important;
}
[data-theme="dark"] .navbar .border-top {
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .navbar-light .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}
[data-theme="dark"] .navbar-light .nav-link {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .navbar-light .nav-link:hover,
[data-theme="dark"] .navbar-light .nav-link.active {
    color: var(--color-text-primary);
}
[data-theme="dark"] .navbar-brand span {
    color: var(--color-text-primary) !important;
}

/* Cards */
[data-theme="dark"] .card {
    background-color: var(--color-bg-subtle);
    border-color:     var(--color-border);
    color:            var(--color-text-primary);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: var(--color-bg-muted);
    border-color:     var(--color-border);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-bg-muted);
    border-color:     var(--color-border);
}
[data-theme="dark"] .dropdown-item {
    color: var(--color-text-primary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--color-bg-dark);
    color:            var(--color-text-primary);
}
[data-theme="dark"] .dropdown-divider {
    border-color: var(--color-border);
}

/* Formulários */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--color-bg-muted);
    border-color:     var(--color-border-strong);
    color:            var(--color-text-primary);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--color-bg-muted);
    border-color:     var(--color-primary);
    color:            var(--color-text-primary);
    box-shadow:       0 0 0 0.25rem var(--color-border-focus);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--color-text-muted);
}
[data-theme="dark"] .input-group-text {
    background-color: var(--color-bg-dark);
    border-color:     var(--color-border-strong);
    color:            var(--color-text-secondary);
}
[data-theme="dark"] .form-label {
    color: var(--color-text-secondary);
}

/* Modais */
[data-theme="dark"] .modal-content {
    background-color: var(--color-bg-subtle);
    border-color:     var(--color-border);
    color:            var(--color-text-primary);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--color-border);
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}

/* Tabelas */
[data-theme="dark"] .table {
    --bs-table-color:       var(--color-text-primary);
    --bs-table-bg:          transparent;
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg:  var(--color-bg-muted);
    --bs-table-hover-bg:    var(--color-bg-dark);
    color: var(--color-text-primary);
}
[data-theme="dark"] .table > :not(caption) > * > * {
    border-color: var(--color-border);
}

/* Bordas genéricas */
[data-theme="dark"] .border     { border-color: var(--color-border)        !important; }
[data-theme="dark"] .border-top { border-color: var(--color-border)        !important; }
[data-theme="dark"] .border-bottom { border-color: var(--color-border)     !important; }

/* Listas */
[data-theme="dark"] .list-group-item {
    background-color: var(--color-bg-subtle);
    border-color:     var(--color-border);
    color:            var(--color-text-primary);
}

/* Alertas Bootstrap (banner) */
[data-theme="dark"] .alert-success {
    background-color: var(--color-success-light);
    border-color:     var(--color-success);
    color:            var(--color-success-text);
}
[data-theme="dark"] .alert-danger {
    background-color: var(--color-error-light);
    border-color:     var(--color-error);
    color:            var(--color-error-text);
}
[data-theme="dark"] .alert-warning {
    background-color: var(--color-warning-light);
    border-color:     var(--color-warning);
    color:            var(--color-warning-text);
}
[data-theme="dark"] .alert-info {
    background-color: var(--color-info-light);
    border-color:     var(--color-info);
    color:            var(--color-info-text);
}

/* Select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--color-bg-muted);
    border-color:     var(--color-border-strong);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-primary);
}
[data-theme="dark"] .select2-dropdown {
    background-color: var(--color-bg-muted);
    border-color:     var(--color-border);
}
[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--color-text-primary);
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
    color:            var(--color-text-inverted);
}
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--color-bg-muted);
    border-color:     var(--color-border-strong);
    color:            var(--color-text-primary);
}

/* Botão toggle de tema — estilos base */
#theme-toggle {
    background: none;
    border:     none;
    padding:    0;
    cursor:     pointer;
    color:      inherit;
    line-height: 1;
}