/* ============================================================
   VETSYNC / MEVETLAB THEME COMPAT
   Capa de compatibilidad sobre theme-vetsync.css
   Fuente de verdad del tema: public/css/theme-vetsync.css
   ============================================================ */

/* ------------------------------------------------------------
   Alias para compatibilidad con estilos antiguos
   ------------------------------------------------------------ */
:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"] {
    --bg-body: var(--vs-bg);
    --bg-card: var(--vs-surface);
    --bg-sidebar: var(--vs-sidebar-bg);
    --bg-table: var(--vs-table-row-bg);
    --bg-input: var(--vs-input-bg);

    --text-body: var(--vs-text);
    --text-light: var(--vs-text-soft);
    --text-sidebar: var(--vs-sidebar-text);

    --border-color: var(--vs-border);
    --hover-row: var(--vs-hover);

    --btn-primary: var(--vs-primary);
    --btn-primary-hover: var(--vs-primary);

    --accent: var(--vs-primary);
}

/* ============================================================
   BASE
   ============================================================ */
body {
    background: var(--vs-bg) !important;
    color: var(--vs-text) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    background: var(--vs-sidebar-bg) !important;
    color: var(--vs-sidebar-text) !important;
}

.sidebar a {
    color: var(--vs-sidebar-text) !important;
}

.sidebar a:hover {
    background: var(--vs-hover) !important;
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card,
.modal-content,
.dropdown-menu {
    background: var(--vs-surface) !important;
    color: var(--vs-text) !important;
    border: 1px solid var(--vs-border) !important;
}

.card-header,
.modal-header,
.modal-footer {
    background: transparent !important;
    color: var(--vs-text) !important;
    border-color: var(--vs-border) !important;
}

/* ============================================================
   TABLAS
   ============================================================ */
.table {
    background: transparent !important;
    color: var(--vs-text) !important;
}

.table th {
    background: var(--vs-table-head-bg) !important;
    color: var(--vs-text) !important;
    border-color: var(--vs-border) !important;
}

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

.table tbody tr {
    background: var(--vs-table-row-bg) !important;
}

.table tbody tr:nth-child(even) {
    background: var(--vs-table-row-alt) !important;
}

.table tbody tr:hover {
    background: var(--vs-hover) !important;
}

/* ============================================================
   INPUTS / SELECT / TEXTAREA
   ============================================================ */
.form-control,
.form-select,
textarea {
    background: var(--vs-input-bg) !important;
    color: var(--vs-input-text) !important;
    border: 1px solid var(--vs-input-border) !important;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--vs-text-soft) !important;
    opacity: 1 !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    background: var(--vs-input-bg) !important;
    color: var(--vs-input-text) !important;
    border-color: var(--vs-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15) !important;
}

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: var(--vs-primary);
}

a:hover {
    filter: brightness(1.05);
}

/* ============================================================
   BOTONES DE APOYO
   ============================================================ */
.btn-edit {
    background: #ffc107 !important;
    color: #111 !important;
    border-color: #ffc107 !important;
}

.btn-delete {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}

.btn-view {
    background: #0dcaf0 !important;
    color: #111 !important;
    border-color: #0dcaf0 !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge.bg-success { background: #198754 !important; }
.badge.bg-danger  { background: #dc3545 !important; }
.badge.bg-warning { background: #ffc107 !important; color: #111 !important; }
.badge.bg-info    { background: #0dcaf0 !important; color: #111 !important; }

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--vs-border) !important;
}

.nav-tabs .nav-link {
    color: var(--vs-text-soft) !important;
    border: 1px solid transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--vs-text) !important;
    background: var(--vs-hover) !important;
}

.nav-tabs .nav-link.active {
    background: var(--vs-primary) !important;
    color: #fff !important;
    border-color: var(--vs-primary) !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu {
    z-index: 2050 !important;
}

.dropdown-item {
    color: var(--vs-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--vs-hover) !important;
    color: var(--vs-text) !important;
}

.dropdown-divider {
    border-color: var(--vs-border) !important;
}

/* ============================================================
   FIX: DROPDOWNS EN TABLAS
   ============================================================ */
.table,
.table-wrap,
.table-responsive,
.card,
.card-body {
    overflow: visible !important;
}

.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    position: relative;
}

.table-responsive .dropdown-menu,
.table-wrap .dropdown-menu,
.main-content .dropdown-menu {
    z-index: 4002 !important;
}

/* ============================================================
   SELECT2
   ============================================================ */
select.select2-hidden-accessible + .select2-container {
    width: 100% !important;
}

.select2-container--open,
.select2-dropdown {
    z-index: 5000 !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--vs-input-bg) !important;
    border: 1px solid var(--vs-input-border) !important;
    color: var(--vs-input-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--vs-input-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-search--dropdown .select2-search__field::placeholder {
    color: var(--vs-text-soft) !important;
}

.select2-dropdown {
    background-color: var(--vs-input-bg) !important;
    border-color: var(--vs-input-border) !important;
}

.select2-results__option {
    color: var(--vs-input-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--vs-primary) !important;
    color: #fff !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: var(--vs-input-bg) !important;
    color: var(--vs-input-text) !important;
    border: 1px solid var(--vs-input-border) !important;
}

/* ============================================================
   MODALES ESTILO VETSYNC
   ============================================================ */
.vs-modal-dark .modal-content,
.vs-modal-dark .modal-header,
.vs-modal-dark .modal-footer,
.vs-modal-dark .form-control,
.vs-modal-dark .form-select,
.vs-modal-dark .table,
.vs-modal-dark .dropdown-menu,
.vs-modal-dark .dropdown-item {
    background: inherit !important;
    color: inherit !important;
    border-color: var(--vs-border) !important;
}

.vs-topbar {
    z-index: 1030;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    color: var(--vs-text-soft) !important;
}