/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ──────────────────────────────────────────────────────────────────────────
   Table background fix (light + dark).
   This Bootstrap 5.3 build sets `.table { --bs-table-bg: var(--bs-body-bg) }`,
   and the Vuexy light skin makes --bs-body-bg the gray page colour (#f8f8f8).
   That paints a gray tint over the white card on every .table (incl. DataTables).
   Make the base cell background transparent so cells inherit the card colour
   (white in light, dark in dark). Coloured variants (.table-primary, etc.) set
   their own --bs-table-bg and are unaffected.
   ────────────────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   Dark-mode table fix.
   This Bootstrap build is 5.3 (variable-driven): table cells resolve their
   background from `--bs-table-bg: var(--bs-body-bg)`. The bundled Vuexy dark
   skin (dark-layout.css) is older and only overrides cell color/border — it
   never redefines these variables, so every .table renders with a light cell
   background over the dark card. Re-point the variables so all tables (incl.
   DataTables) follow the dark theme.
   ────────────────────────────────────────────────────────────────────────── */
.dark-layout .table {
  --bs-table-color: #b4b7bd;
  --bs-table-bg: transparent;
  --bs-table-border-color: #3b4253;
  --bs-table-striped-color: #b4b7bd;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-color: #d0d2d6;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-table-active-color: #d0d2d6;
  --bs-table-active-bg: rgba(255, 255, 255, 0.06);
}

/* SweetAlert2 confirm popup — follow the dark skin (buttons keep .btn styling) */
.dark-layout .swal2-popup {
  background: #283046;
  color: #b4b7bd;
}
.dark-layout .swal2-title,
.dark-layout .swal2-html-container {
  color: #d0d2d6;
}

/* Sidebar — follow Vuexy vertical-menu spacing (navigation-header between groups). */
.main-menu.menu-light .navigation.navigation-main > li.navigation-header:first-child {
  margin-top: 1.25rem;
}

.main-menu.menu-light .navigation.navigation-main > li.nav-item + li.navigation-header {
  margin-top: calc(1.5rem + 0.286rem);
}

.main-menu.menu-light .navigation.navigation-main > li.navigation-header + li.nav-item.has-sub,
.main-menu.menu-light .navigation.navigation-main > li.navigation-header + li.nav-item:not(.has-sub) {
  margin-top: 0;
}

/* jQuery Validate: mark invalid Select2 widgets (core-validate.js toggles
   .is-invalid on the rendered .select2-selection — give it the error border). */
.select2-container--default .select2-selection.is-invalid,
.select2-container--classic .select2-selection.is-invalid {
  border-color: #ea5455 !important;
}