/* ============================================================
   SISTEMA DE TEMAS VETSYNC — SMARTAUTOMATE
   Reescrito profesionalmente con variables CSS
   ============================================================ */

/* ------------------------------------------------------------
   VARIABLES DEL TEMA CLARO (SmartAutomate Corporativo)
   ------------------------------------------------------------ */
:root {
    --bg-body: #eef3f9;
    --bg-card: #ffffff;
    --bg-sidebar: #002d62;
    --bg-table: #ffffff;
    --bg-input: #ffffff;

    --text-body: #001632;
    --text-light: #4a5568;
    --text-sidebar: #d9e3f0;

    --border-color: #d4dbe5;
    --hover-row: #f3f6fb;

    --btn-primary: #0d6efd;
    --btn-primary-hover: #0b5ed7;

    --btn-edit: #ffc107;
    --btn-delete: #dc3545;
    --btn-view: #0dcaf0;

    --accent: #0d6efd;
}

/* ------------------------------------------------------------
   VARIABLES DEL TEMA OSCURO
   ------------------------------------------------------------ */
body.theme-dark {
    --bg-body: #0b1a2b;
    --bg-card: #0d1f33;
    --bg-sidebar: #001a33;
    --bg-table: #121a26;
    --bg-input: #111f33;

    --text-body: #e4e6eb;
    --text-light: #a3b0c2;
    --text-sidebar: #d9e3f0;

    --border-color: #2b3d55;
    --hover-row: #162945;

    --btn-primary: #007bff;
    --btn-primary-hover: #0069d9;

    --btn-edit: #ffca2c;
    --btn-delete: #b02a37;
    --btn-view: #31d2f2;

    --accent: #3498db;
}

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

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

.sidebar a {
    color: var(--text-sidebar);
}
.sidebar a:hover {
    background: rgba(255,255,255,0.08);
}

/* ============================================================
   CARDS Y CONTENIDO
   ============================================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-body);
}

/* ============================================================
   TABLAS
   ============================================================ */
.table {
    background: var(--bg-table);
    color: var(--text-body);
}

.table th {
    background: var(--bg-card);
    color: var(--text-body);
}

.table tbody tr:hover {
    background: var(--hover-row);
}

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

.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.15rem rgba(52,152,219,0.25);
}

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: var(--accent);
}
a:hover {
    color: var(--btn-primary-hover);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn-primary {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--btn-primary-hover);
}

.btn-edit { background: var(--btn-edit); color: #000; }
.btn-delete { background: var(--btn-delete); color: #fff; }
.btn-view { background: var(--btn-view); color: #fff; }

/* ============================================================
   BADGES
   ============================================================ */
.badge.bg-success { background: #198754 !important; }
.badge.bg-danger { background: #dc3545 !important; }
.badge.bg-warning { background: #ffc107 !important; color: #000 !important; }
.badge.bg-info { background: var(--accent) !important; }

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs {
    border-bottom: 2px solid var(--border-color);
}
.nav-tabs .nav-link {
    color: var(--text-light);
}
.nav-tabs .nav-link.active {
    background: var(--accent);
    color: #fff !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu {
    background: var(--bg-card);
    color: var(--text-body);
    border: 1px solid var(--border-color);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    color: var(--text-light);
}
/* ============================================================
   FIX: DROPDOWNS EN TABLAS (evita que se corten)
   ============================================================ */

/* No permitas que la tabla recorte el menú */
.table,
.table-dark-theme {
  overflow: visible !important;
}

/* Contenedores típicos que recortan */
.table-responsive {
  overflow-x: auto;              /* mantiene scroll horizontal */
  overflow-y: visible !important; /* evita corte vertical del dropdown */
}

.card,
.card-body {
  overflow: visible !important;
}

/* Eleva el menú por sobre cards/sidebar */
.dropdown-menu {
  z-index: 2050 !important;
}
/* ============================================================
   FIX: Dropdowns dentro de tablas NO deben cortarse
   (cuando hay contenedores con overflow/scroll)
   ============================================================ */

/* 1) El contenedor responsive NO debe cortar en Y */
.table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* 2) Si tienes una “caja” con altura fija/scroll, neutralízalo */
.table-responsive,
.table-responsive.shadow-sm.rounded {
  max-height: none !important;
  height: auto !important;
}

/* 3) NO uses overflow hidden en tablas si hay dropdowns */
.table {
  overflow: visible !important;
}

/* 4) Asegura que el menú quede arriba de todo */
.table-responsive .dropdown-menu {
  z-index: 3000 !important;
}
/* ============================================================
   FIX Dropdown Bootstrap dentro de tablas (evitar corte)
   ============================================================ */
.table-wrap{
  overflow-x: auto !important;   /* solo scroll horizontal */
  overflow-y: visible !important;/* nunca cortar dropdown */
  position: relative;            /* referencia estable */
}

/* Importante: NO ocultes overflow en tablas si hay dropdowns */
.table-wrap .table{
  overflow: visible !important;
}

/* Asegura que el menú quede encima */
.table-wrap .dropdown-menu{
  z-index: 9999 !important;
}
/* ===========================
   FIX dropdown dentro de tablas
   (evita que la tabla recorte el menú)
=========================== */
.main-content .table {
  overflow: visible !important;
}

.main-content .table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important; /* ✅ permite que el dropdown "salga" */
  position: relative;
}

.main-content .dropdown-menu {
  z-index: 4002 !important;
}
.select2-container { width: 100% !important; }
.select2-container--open { z-index: 5000 !important; }
.select2-dropdown { z-index: 5000 !important; }

/* ===== Select2 FIX: ancho + z-index ===== */
.select2-container { width: 100% !important; }
.select2-container--open { z-index: 5000 !important; }
.select2-dropdown { z-index: 5000 !important; }

/* ===== Dark mode: FIX inputs/selects/placeholder (Bootstrap + custom) ===== */
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark textarea.form-control {
  background-color: #1b2734 !important;
  color: #e4e6eb !important;
  border-color: #44576a !important;
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus,
body.theme-dark textarea.form-control:focus {
  background-color: #1b2734 !important;
  color: #e4e6eb !important;
  border-color: #5b7996 !important;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.20) !important;
}

body.theme-dark .form-control::placeholder,
body.theme-dark textarea.form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

body.theme-dark .form-control:disabled,
body.theme-dark .form-select:disabled {
  background-color: #15202b !important;
  color: #94a3b8 !important;
}

/* ===== Select2 dark mode ===== */
body.theme-dark .select2-container--default .select2-selection--single {
  background-color: #1b2734 !important;
  border-color: #44576a !important;
  color: #e4e6eb !important;
}

body.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e4e6eb !important;
}

body.theme-dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94a3b8 !important;
}

body.theme-dark .select2-dropdown {
  background-color: #1b2734 !important;
  border-color: #44576a !important;
}

body.theme-dark .select2-results__option {
  color: #e4e6eb !important;
}

body.theme-dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #1b2734 !important;
  color: #e4e6eb !important;
  border-color: #44576a !important;
}