/*
 * =============================================================
 *  MODERN COMPONENTS — Projeto Safe Room
 *  Arquivo do: Dev 2 (Júnior/Pleno)
 *  Escopo: Componentes Bootstrap — botões, cards, forms,
 *          tabelas, badges, alertas
 *
 *  REGRAS OBRIGATÓRIAS:
 *  1. Usar SEMPRE as variáveis de modern-base.css (--color-*, --radius-*, etc.)
 *  2. NUNCA usar cor em hexadecimal diretamente (ex: #001950) — use a variável
 *  3. NUNCA alterar: padding, margin, width, height, display, flex, grid
 *     (essas propriedades afetam o layout e podem quebrar relatórios)
 *  4. Pode alterar: color, background-color, border-color, border-radius,
 *     box-shadow, font-family, font-weight, outline, transition, opacity
 * =============================================================
 */


/* -------------------------------------------------------------
   1. BOTÕES
   ------------------------------------------------------------- */

.btn-block-floating-close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
}

/* Base de todos os botões */
.btn {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-base) !important;
    letter-spacing: 0.01em !important;
}

/* Botão primário */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 25, 80, 0.25) !important;
}

/* Botão secundário */
.btn-secondary {
    background-color: var(--color-text-muted) !important;
    border-color: var(--color-text-muted) !important;
    color: #ffffff !important;
}
.btn-secondary:hover {
    background-color: var(--color-text-light) !important;
    border-color: var(--color-text-light) !important;
}

/* Botão de sucesso */
.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #ffffff !important;
}
.btn-success:hover {
    background-color: #22a371 !important;
    border-color: #22a371 !important;
}

/* Botão de perigo */
.btn-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #ffffff !important;
}
.btn-danger:hover {
    background-color: #b81100 !important;
    border-color: #b81100 !important;
}

/* Botão de aviso */
.btn-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: var(--color-text) !important;
}

/* Botão info */
.btn-info {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #ffffff !important;
}
.btn-info:hover {
    background-color: #0090e8 !important;
    border-color: #0090e8 !important;
}

/* Botão outline primário */
.btn-outline-primary {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* Botão link */
.btn-link {
    color: var(--color-accent-mid) !important;
    font-weight: var(--font-weight-normal) !important;
}
.btn-link:hover {
    color: var(--color-primary) !important;
}

/* Tamanhos */
.btn-sm {
    font-size: var(--font-size-sm) !important;
    border-radius: var(--radius-sm) !important;
}
.btn-lg {
    font-size: var(--font-size-lg) !important;
    border-radius: var(--radius-lg) !important;
}


/* -------------------------------------------------------------
   2. CARDS
   ------------------------------------------------------------- */
.card {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-md) !important;
    background-color: var(--color-bg-white) !important;
    margin-bottom: var(--sniper-gap) !important; /* Gap unificado Sniper */
}

.card-header {
    background-color: var(--color-bg-white) !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-text) !important;
}

.card-footer {
    background-color: var(--color-bg-hover) !important;
    border-top: 1px solid var(--color-border) !important;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

.card-title {
    color: var(--color-text) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: var(--font-size-lg) !important;
}

.card-subtitle {
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-sm) !important;
}


/* -------------------------------------------------------------
   3. FORMULÁRIOS (somente aparência — NÃO alterar tamanhos)
   ------------------------------------------------------------- */
.form-control {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-input) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--color-bg-white) !important;
    transition: var(--transition-fast) !important;
}

.form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 25, 80, 0.12) !important;
    outline: none !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--color-bg-hover) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}

/* Labels */
label {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-text-light) !important;
}

/* Texto de ajuda */
.form-text,
small.form-text {
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-xs) !important;
}

/* Mensagem de erro */
.invalid-feedback {
    color: var(--color-danger) !important;
    font-size: var(--font-size-sm) !important;
}

/* Input válido/inválido */
.form-control.is-invalid {
    border-color: var(--color-danger) !important;
}
.form-control.is-valid {
    border-color: var(--color-success) !important;
}

/* Select2 — borda arredondada */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--color-border-input) !important;
    border-radius: var(--radius-md) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 25, 80, 0.12) !important;
}


/* -------------------------------------------------------------
   4. TABELAS
   ------------------------------------------------------------- */
.table {
    color: var(--color-text) !important;
    font-size: var(--font-size-base) !important;
    font-family: var(--font-family) !important;
}

.table thead th {
    color: var(--color-text-muted) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid var(--color-border) !important;
    background-color: var(--color-bg-hover) !important;
}

.table td,
.table th {
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 25, 80, 0.03) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input {
    border-color: var(--color-border-input) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text) !important;
}
.dataTables_wrapper .dataTables_length select {
    border-color: var(--color-border-input) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-radius: var(--radius-sm) !important;
}
.dataTables_paginate .paginate_button:hover {
    background: var(--color-bg-hover) !important;
    border-color: var(--color-border) !important;
    color: var(--color-primary) !important;
    border-radius: var(--radius-sm) !important;
}


/* -------------------------------------------------------------
   5. BADGES E PILLS
   ------------------------------------------------------------- */
.badge {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium) !important;
    border-radius: var(--radius-pill) !important;
    letter-spacing: 0.02em !important;
}

.badge-primary {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}
.badge-success {
    background-color: var(--color-success) !important;
    color: #ffffff !important;
}
.badge-danger {
    background-color: var(--color-danger) !important;
    color: #ffffff !important;
}
.badge-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-text) !important;
}
.badge-info {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
}
.badge-secondary {
    background-color: var(--color-text-muted) !important;
    color: #ffffff !important;
}
.badge-light {
    background-color: var(--color-bg-hover) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}


/* -------------------------------------------------------------
   6. ALERTAS
   ------------------------------------------------------------- */
.alert {
    border-radius: var(--radius-lg) !important;
    font-size: var(--font-size-base) !important;
    font-family: var(--font-family) !important;
    border-width: 1px !important;
}

.alert-primary {
    background-color: rgba(0, 25, 80, 0.07) !important;
    border-color: rgba(0, 25, 80, 0.2) !important;
    color: var(--color-primary) !important;
}
.alert-success {
    background-color: rgba(40, 190, 130, 0.1) !important;
    border-color: rgba(40, 190, 130, 0.3) !important;
    color: #1a7a55 !important;
}
.alert-danger {
    background-color: rgba(220, 20, 0, 0.07) !important;
    border-color: rgba(220, 20, 0, 0.2) !important;
    color: var(--color-danger) !important;
}
.alert-warning {
    background-color: rgba(255, 190, 0, 0.1) !important;
    border-color: rgba(255, 190, 0, 0.3) !important;
    color: #8a6400 !important;
}
.alert-info {
    background-color: rgba(0, 160, 255, 0.07) !important;
    border-color: rgba(0, 160, 255, 0.2) !important;
    color: #006cb3 !important;
}


/* -------------------------------------------------------------
   7. LINKS (Comentados p/ evitar vazamento global)
   ------------------------------------------------------------- */

a {
    color: none !important;
    transition: var(--transition-fast) !important;
}
a:hover {
    color: none !important;
    text-decoration: none !important;
}



/* -------------------------------------------------------------
   8. TIPOGRAFIA — headings
   ------------------------------------------------------------- */
h1, .h1 { font-size: var(--font-size-h1) !important; font-weight: var(--font-weight-bold) !important; color: var(--color-text) !important; }
h2, .h2 { font-size: var(--font-size-h2) !important; font-weight: var(--font-weight-bold) !important; color: var(--color-text) !important; }
h3, .h3 { font-size: var(--font-size-h3) !important; font-weight: var(--font-weight-medium) !important; color: var(--color-text) !important; }
h4, .h4 { font-size: var(--font-size-lg) !important; font-weight: var(--font-weight-medium) !important; color: var(--color-text) !important; }
h5, .h5 { font-size: var(--font-size-md) !important; font-weight: var(--font-weight-medium) !important; color: var(--color-text) !important; }
h6, .h6 { font-size: var(--font-size-base) !important; font-weight: var(--font-weight-medium) !important; color: var(--color-text-muted) !important; }


/* -------------------------------------------------------------
   9. PAGINAÇÃO
   ------------------------------------------------------------- */
.page-link {
    color: var(--color-primary) !important;
    border-color: var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--font-size-sm) !important;
    transition: var(--transition-fast) !important;
}
.page-link:hover {
    background-color: var(--color-bg-hover) !important;
    color: var(--color-primary) !important;
}
.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}


/* -------------------------------------------------------------
   10. DROPDOWN MENUS (fora do navbar)
   ------------------------------------------------------------- */
.dropdown-menu {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-lg) !important;
    font-size: var(--font-size-base) !important;
}
.dropdown-item {
    color: var(--color-text) !important;
    font-size: var(--font-size-base) !important;
    transition: var(--transition-fast) !important;
}
.dropdown-item:hover {
    background-color: var(--color-bg-hover) !important;
    color: var(--color-primary) !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
}
.dropdown-divider {
    border-color: var(--color-border) !important;
}