/* =========================================================
   VETSYNC OVERRIDES
   Hotfix de contraste y compatibilidad de vistas legacy
   (IMPORTANTE: ahora se basa en data-bs-theme, tema resuelto real)
   ========================================================= */

/* Layout top tools */
.vs-top-tools{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* =========================================================
   1) NO recolorear botones, tabs ni dropdowns como links
   ========================================================= */

/* Solo links "normales" del contenido */
.main-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):not(.list-group-item):not(.vs-pill):not(.vs-event) {
  color: var(--vs-primary) !important;
}

.main-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):not(.list-group-item):not(.vs-pill):not(.vs-event):hover {
  filter: brightness(1.05);
}

.main-content a.vs-kpi-cta {
  text-decoration: none !important;
}

html[data-bs-theme="light"] .main-content a.vs-kpi-cta {
  color: #1d4ed8 !important;
}

html[data-bs-theme="dark"] .main-content a.vs-kpi-cta {
  color: #e2e8f0 !important;
}

/* Botones anchor deben conservar su color real */
.main-content a.btn,
.main-content a.nav-link,
.main-content a.dropdown-item,
.main-content a.page-link,
.main-content a.badge,
.main-content a.list-group-item {
  color: inherit !important;
  text-decoration: none !important;
}

.main-content a.vs-pill,
.main-content a.vs-event {
  text-decoration: none !important;
}

/* Texto correcto por tipo de botón */
.btn-primary,
.btn-success,
.btn-danger,
.btn-dark {
  color: #fff !important;
}

.btn-warning,
.btn-info,
.btn-light {
  color: #111 !important;
}

.btn-secondary {
  color: var(--vs-muted-btn-text) !important;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-dark,
.btn-outline-secondary {
  color: var(--vs-text) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-dark:hover,
.btn-outline-secondary:hover {
  color: var(--vs-text) !important;
}

/* =========================================================
   2) Hotfix: legacy claros dentro de modo oscuro
   ========================================================= */

html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .card.bg-white,
html[data-bs-theme="dark"] .card.bg-light {
  background: var(--vs-surface) !important;
  color: var(--vs-text) !important;
  border-color: var(--vs-border) !important;
}

html[data-bs-theme="dark"] .text-dark {
  color: var(--vs-text) !important;
}

html[data-bs-theme="dark"] .border-light,
html[data-bs-theme="dark"] .border-white {
  border-color: var(--vs-border) !important;
}

/* Inline styles típicos heredados */
html[data-bs-theme="dark"] [style*="background:#fff"],
html[data-bs-theme="dark"] [style*="background: #fff"],
html[data-bs-theme="dark"] [style*="background-color:#fff"],
html[data-bs-theme="dark"] [style*="background-color: #fff"],
html[data-bs-theme="dark"] [style*="background:#ffffff"],
html[data-bs-theme="dark"] [style*="background: #ffffff"],
html[data-bs-theme="dark"] [style*="background-color:#ffffff"],
html[data-bs-theme="dark"] [style*="background-color: #ffffff"],
html[data-bs-theme="dark"] [style*="background:#f8f9fa"],
html[data-bs-theme="dark"] [style*="background: #f8f9fa"],
html[data-bs-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-bs-theme="dark"] [style*="background-color: #f8f9fa"] {
  background: var(--vs-surface) !important;
  color: var(--vs-text) !important;
}

/* =========================================================
   3) Hotfix: legacy oscuros dentro de modo claro
   ========================================================= */

html[data-bs-theme="light"] .bg-dark,
html[data-bs-theme="light"] .table-dark,
html[data-bs-theme="light"] .table-dark-theme,
html[data-bs-theme="light"] .dropdown-menu-dark {
  background: var(--vs-surface) !important;
  color: var(--vs-text) !important;
  border-color: var(--vs-border) !important;
}

html[data-bs-theme="light"] .text-light,
html[data-bs-theme="light"] .text-white {
  color: var(--vs-text) !important;
}

html[data-bs-theme="light"] [style*="background:#0b1220"],
html[data-bs-theme="light"] [style*="background: #0b1220"],
html[data-bs-theme="light"] [style*="background-color:#0b1220"],
html[data-bs-theme="light"] [style*="background-color: #0b1220"],
html[data-bs-theme="light"] [style*="background:#111827"],
html[data-bs-theme="light"] [style*="background: #111827"],
html[data-bs-theme="light"] [style*="background-color:#111827"],
html[data-bs-theme="light"] [style*="background-color: #111827"] {
  background: var(--vs-surface) !important;
  color: var(--vs-text) !important;
}

/* =========================================================
   4) Tablas legacy
   ========================================================= */

html[data-bs-theme="light"] .table-dark-theme td,
html[data-bs-theme="light"] .table-dark-theme th,
html[data-bs-theme="light"] .table-dark td,
html[data-bs-theme="light"] .table-dark th {
  background: var(--vs-table-row-bg) !important;
  color: var(--vs-text) !important;
  border-color: var(--vs-border) !important;
}

html[data-bs-theme="dark"] .table-light td,
html[data-bs-theme="dark"] .table-light th {
  background: var(--vs-table-row-bg) !important;
  color: var(--vs-text) !important;
  border-color: var(--vs-border) !important;
}

/* =========================================================
   5) Cabeceras/cards con contraste correcto
   ========================================================= */

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

.card-title,
.card-body,
.card-text {
  color: inherit;
}

/* Close button contraste en dark */
html[data-bs-theme="dark"] .btn-close{
  filter: invert(1) grayscale(100%);
}

/* ===========================
   Sidebar menu: look & UX
=========================== */
.sidebar .vs-menu-link{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}

.sidebar .vs-label{
  display:flex;
  align-items:center;
  gap:.25rem;
  min-width:0;
}

.sidebar .vs-plus{
  transition: transform .15s ease;
  opacity:.85;
}

.sidebar .vs-menu-toggle[aria-expanded="true"] .vs-plus{
  transform: rotate(45deg);
}

.sidebar a.active{
  background: rgba(255,255,255,.08) !important;
  border-left: 3px solid var(--vs-primary);
  padding-left: 17px !important;
}

/* =========================================================
   Sidebar menu "app" (PC + móvil)
   ========================================================= */
.sidebar { z-index: 1025 !important; } /* asegura arriba del backdrop */

.sidebar .vs-menu-link{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px !important;
  margin: 6px 10px !important;
  border-radius: 12px !important;
  line-height: 1.1;
  border: 1px solid transparent !important;
}

.sidebar .vs-menu-link .vs-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

.sidebar .vs-menu-link i.bi{
  font-size: 1.05rem;
}

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

.sidebar .vs-menu-link.active{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.10) !important;
}

.sidebar .vs-toggle{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  flex: 0 0 auto;
}

.sidebar .vs-menu-toggle[aria-expanded="true"] .vs-toggle i{
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.sidebar .submenu a{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding-left: 34px !important;
  margin: 4px 10px !important;
  border-radius: 12px !important;
}