/**
 * Alternativa Gestao de RH - Custom CSS
 * Complementa Metronic 9.2.1 / KTUI / Tailwind CSS
 */

/* ============================================
   BRAND TOKENS
   ============================================ */
:root {
    --brand: #C8102E;
    --brand-hover: #A40D26;
    --brand-subtle: #F9E5E8;
    --brand-dark: #8A0B20;
    --focus-ring: rgba(200, 16, 46, 0.15);
    --surface-alt: #F2E6DA;
    --surface-alt-muted: #E8D9C9;
}

/* ============================================
   BRAND PRIMARY OVERRIDE
   Metronic usa --primary para botoes/links.
   Sobrescrevemos para usar a cor brand.
   ============================================ */
:root,
[data-kt-theme-mode="light"] {
    --tw-primary: var(--brand);
}

.kt-btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.kt-btn-primary:hover,
.kt-btn-primary:focus-visible {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
}

a.kt-link,
a.text-primary {
    color: var(--brand);
}
a.kt-link:hover,
a.text-primary:hover {
    color: var(--brand-hover);
}

/* ============================================
   INPUT FOCUS - cor brand
   ============================================ */
.kt-input:focus-within,
.kt-select:focus,
.kt-textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 2px var(--focus-ring) !important;
    outline: none;
}

/* ============================================
   KEENICONS - SVG font-face fallback
   ============================================ */
@font-face {
    font-family: 'keenicons-filled';
    src: url('../vendors/keenicons/fonts/keenicons-filled.svg#keenicons-filled') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'keenicons-duotone';
    src: url('../vendors/keenicons/fonts/keenicons-duotone.svg#keenicons-duotone') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'keenicons-outline';
    src: url('../vendors/keenicons/fonts/keenicons-outline.svg#keenicons-outline') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'keenicons-solid';
    src: url('../vendors/keenicons/fonts/keenicons-solid.svg#keenicons-solid') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* ============================================
   LOADING / DISABLED
   ============================================ */
.kt-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   SPIN ANIMATION
   ============================================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* ============================================
   MODAL RESPONSIVO
   ============================================ */
@media (max-width: 768px) {
    .kt-modal .max-w-2xl { max-width: 95%; margin: 1rem; }
}

/* ============================================
   SIDEBAR - brand accent na borda do item ativo
   ============================================ */
.kt-sidebar .kt-menu-item.active > .kt-menu-link,
.kt-sidebar .kt-menu-item[aria-current="page"] > .kt-menu-link {
    border-inline-start: 3px solid var(--brand);
    border-radius: 0.375rem;
}

/* ============================================
   ALERTS - suavizar cantos e espa�amento
   ============================================ */
.kt-alert {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

/* ============================================
   CARD - sombra sutil e transi��o hover
   ============================================ */
.kt-card {
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.kt-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ============================================
   TABLE - linhas com hover suave
   ============================================ */
.kt-table tbody tr {
    transition: background-color 0.15s ease;
}
.kt-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.015);
}

/* ============================================
   BADGE - brand variant
   ============================================ */
.kt-badge-brand {
    background-color: var(--brand-subtle);
    color: var(--brand);
}

/* ============================================
   SCROLLBAR - mais fina e discreta
   ============================================ */
.kt-scrollable-y-hover::-webkit-scrollbar {
    width: 4px;
}
.kt-scrollable-y-hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 9999px;
}
.kt-scrollable-y-hover::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================
   UTILITARIOS BRAND
   ============================================ */
.text-brand       { color: var(--brand) !important; }
.bg-brand         { background-color: var(--brand) !important; }
.bg-brand-light   { background-color: var(--brand-subtle) !important; }
.bg-brand-surface { background-color: var(--surface-alt) !important; }
.border-brand     { border-color: var(--brand) !important; }
.ring-brand       { --tw-ring-color: var(--focus-ring); }

/* ============================================
   TRANSITION HELPERS
   ============================================ */
.transition-colors-fast {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* ============================================
   ABERTURA VAGA — grid compacto (evita “vão” entre colunas)
   ============================================ */
.abertura-form-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    width: 100%;
    min-width: 0;
}
@media (min-width: 1024px) {
    .abertura-form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abertura-form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================
   SELECT2 — visual próximo ao kt-input
   ============================================ */
.select2-container {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 0 !important;
}
.select2-container .select2-selection--single {
    height: auto !important;
    min-height: 2.375rem;
    padding: 0.125rem 0.25rem 0.125rem 0.75rem;
    display: flex !important;
    align-items: center;
    background-color: var(--tw-light, #fff) !important;
    border: 1px solid var(--tw-gray-200, #e5e7eb) !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding-left: 0 !important;
    padding-right: 1.75rem !important;
    color: inherit !important;
    font-size: 0.875rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 0.35rem !important;
    width: 1.25rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin-left: -5px !important;
    margin-top: -2px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 2px var(--focus-ring) !important;
    outline: none !important;
}
.select2-dropdown {
    border: 1px solid var(--tw-gray-200, #e5e7eb) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    background: var(--tw-light, #fff) !important;
}
.select2-container--default .select2-search--dropdown {
    padding: 0.5rem;
    border-bottom: 1px solid var(--tw-gray-100, #f3f4f6);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--tw-gray-200, #e5e7eb) !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.5rem !important;
    font-size: 0.875rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand) !important;
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}
.select2-results__option {
    font-size: 0.875rem;
    padding: 0.45rem 0.65rem !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand) !important;
    color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--brand-subtle) !important;
    color: var(--brand) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}

/* Abas / stepper — brand em vez de azul Tailwind primary */
.abertura-tab-active {
    border-bottom-color: var(--brand) !important;
    color: var(--brand) !important;
    font-weight: 600;
}
.abertura-stepper-active {
    background-color: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
}
.abertura-stepper-active .stepper-num {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}
.abertura-stepper-inactive {
    background-color: var(--tw-light, #fff);
    color: var(--tw-gray-600, #4b5563);
    border-color: var(--tw-gray-200, #e5e7eb);
}
.abertura-stepper-inactive .stepper-num {
    background-color: #e5e7eb;
    color: #64748b;
}
.abertura-stepper-done {
    background-color: var(--brand-subtle);
    color: var(--brand);
    border: 2px solid var(--brand);
}
.abertura-stepper-done .stepper-num {
    background-color: rgba(200, 16, 46, 0.12);
    color: var(--brand);
}
.abertura-sec-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 0.25rem;
    background-color: var(--brand-subtle);
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 0.5rem;
}