:root {
  --vs-border-color: #e2e5ec !important;
  --color-app-background: #f8f8f8;
  --color-app-background-secondary: white;
  --color-background-primary: white;
  --color-background-secondary: #eef1f1;
  --color-background-faded: #f1f0f5;
  --color-border-primary: #dfdde6;
  --color-border-secondary: #a6b0bb;
  --color-border-faded: #c5cbd7;
  --color-text-primary: #2c3e50;
  --color-text-secondary: rgba(44, 62, 80, 0.65);
  --color-text-faded: rgba(44, 62, 80, 0.4);

  --color-brand-border: rgb(236 0 140);
  --color-brand-light: #ff2aa8;
  --color-brand-dark: #c80077;
  --color-brand-rgb: 236, 0, 140;
  --color-primary: #00a8c4;
  --color-primary-border: #00a8c4;
  --color-primary-light: #00c8e0;
  --color-primary-dark: #007a8c;
  --color-primary-rgb: 0, 168, 196;
  --color-success: rgb(40 175 96);
  --color-success-border: rgb(40 175 96);
  --color-success-light: #2fcc70;
  --color-success-dark: #219250;
  --color-success-rgb: 40, 175, 96;
  --color-warning: rgb(242 152 74);
  --color-warning-border: rgb(242 152 74);
  --color-warning-light: #f4ab6b;
  --color-warning-dark: #f08529;
  --color-warning-rgb: 242, 152, 74;
  --color-danger: rgb(236 95 95);
  --color-danger-border: rgb(236 95 95);
  --color-danger-light: #f07f7f;
  --color-danger-dark: #e83f3f;
  --color-danger-rgb: 236, 95, 95;
  --color-black: rgb(19 19 19);
  --color-black-border: rgb(19 19 19);
  --color-black-light: #252525;
  --color-black-dark: #010101;
  --color-black-rgb: 19, 19, 19;
  --color-white: rgb(255 255 255);
  --color-white-border: rgb(255 255 255);
  --color-white-light: white;
  --color-white-dark: #ededed;
  --color-white-rgb: 255, 255, 255;
}

#app .app-preloader {
  width: 100vw;
  height: 100vh;
  background: #0b1018;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#app .app-preloader img.q-logo {
  width: 200px;
  height: auto;
  margin-bottom: 2.5rem;
}

/* fa override */
.fal,
.far {
  font-family: 'Font Awesome 5 Pro' !important;
}

.the-loader {
  display: inline-block;
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top-color: #00e5ff;
  animation: spin 0.85s ease-in-out infinite;
  -webkit-animation: spin 0.85s ease-in-out infinite;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

/* color overrides */

body {
  background-color: var(--color-app-background);
  color: var(--color-text-primary);
}
small {
  color: var(--color-text-secondary);
  font-style: italic;
}

.pre-wrap {
  white-space: pre-wrap;
}

.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title {
  color: var(--color-text-primary);
}

/* slide-fade */
.slide-fade-enter-active {
  transition: all 0.15s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

/* fade */

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* list transition */
.list-enter-active,
.list-leave-active,
.list-move {
  transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
  transition-property: opacity, transform;
}

.list-enter {
  opacity: 0 !important;
  transform: translateX(50px) scaleY(0.5);
}

.list-enter-to {
  opacity: 1 !important;
  transform: translateX(0) scaleY(1);
}

.list-leave-active {
  position: absolute;
}

.list-leave-to {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
}

/* btn */
.btn:disabled,
button.btn.btn-label-primary:disabled,
button.btn.btn-label-warning:disabled,
button.btn.btn-label-danger:disabled,
button.btn.btn-label-success:disabled,
button.btn.btn-label-info:disabled {
  cursor: not-allowed !important;
}
.btn {
  min-width: fit-content;
}

.btn-text {
  padding-top: 0;
  padding-bottom: 0;
}

.btn-reload {
  color: var(--color-text-secondary);
}

.header-sides .btn-reload {
  color: #999;
}

.btn.btn-xs [class^='fa-'],
.btn.btn-xs [class*=' fa-'] {
  font-size: inherit;
}

/* form inputs */
/* input.form-control {
  height: 2.5rem !important;
} */

/* v-select */
.vs__dropdown-toggle {
  /* the same as inputs */
  height: calc(1.5em + 1.3rem + 2px);
}
.vs__search::placeholder,
.vs__search:focus::placeholder {
  color: var(--color-text-secondary) !important;
}

/* checkbox */
.kt-checkbox.kt-checkbox--solid > span:after {
  border-color: var(--color-primary);
}

/* Pills: switch filled custom-color pills to outlined in dark mode */
[data-theme="dark"] .custom-color:not(.kt-badge--outline) {
  background-color: transparent !important;
  border: 1px solid var(--color-pill) !important;
  color: var(--color-pill) !important;
}

/* swal */
.swal-button {
  min-width: 100px;
  border-radius: 6px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1.25rem !important;
  border: 1.5px solid transparent !important;
}
.btn-brand.swal-button {
  background-color: var(--btn-primary) !important;
  border-color: var(--btn-primary) !important;
  color: var(--btn-primary-text) !important;
}
.btn-brand.swal-button:hover {
  background-color: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
}
.btn-default.swal-button {
  background-color: var(--btn-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--btn-secondary-text) !important;
}
.btn-default.swal-button:hover {
  background-color: var(--btn-secondary-hover) !important;
}

/* ============================================================
   DARK MODE
   Applied when <html data-theme="dark">
   ============================================================ */

[data-theme="dark"] {
  /* Background scale — cool slate blue */
  --color-app-background:           #0b1018;
  --color-app-background-secondary: #131b28;
  --color-background-primary:       #131b28;
  --color-background-secondary:     #1d2638;
  --color-background-faded:         #17202e;

  /* Borders */
  --color-border-primary:   #253040;
  --color-border-secondary: #344258;
  --color-border-faded:     #2d3a50;

  /* Text — cool blue-white */
  --color-text-primary:   #dce8f5;
  --color-text-secondary: rgba(220, 232, 245, 0.75);
  --color-text-faded:     rgba(220, 232, 245, 0.45);

  /* v-select */
  --vs-border-color: #253040 !important;

  /* Button secondary */
  --btn-secondary:      #1d2638;
  --btn-secondary-text: #a0b4cc;
  --btn-secondary-hover:#253040;

  /* Alert semantic vars */
  --warning-bg:     #2a1f00;
  --warning-border: #5c3d00;
  --warning-text:   #fbbf24;
  --success-bg:     #002a26;
  --success-border: #005744;
  --success-text:   #34d399;
  --danger-bg:      #2a0014;
  --danger-border:  #5c0026;
  --danger-text:    #f87171;
  --info-bg:        #001a3d;
  --info-border:    #003380;
  --info-text:      #60a5fa;
}

/* Body */
[data-theme="dark"] body {
  background-color: var(--color-app-background);
  color: var(--color-text-primary);
}

/* ---- Metronic portlets / cards ---- */
[data-theme="dark"] .kt-portlet {
  background-color: var(--color-background-primary) !important;
  border-color: var(--color-border-primary) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .kt-portlet .kt-portlet__head {
  background-color: var(--color-background-primary) !important;
  border-bottom-color: var(--color-border-primary) !important;
}
[data-theme="dark"] .kt-portlet .kt-portlet__head-title,
[data-theme="dark"] .kt-portlet .kt-portlet__body {
  color: var(--color-text-primary);
}
[data-theme="dark"] .kt-portlet .kt-portlet__foot {
  border-top-color: var(--color-border-primary) !important;
}

/* ---- Form controls ---- */
[data-theme="dark"] .form-control {
  background-color: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .form-control:focus {
  background-color: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(45, 49, 72, 0.5) !important;
}
[data-theme="dark"] .form-control::placeholder {
  color: var(--color-text-faded) !important;
}
[data-theme="dark"] label {
  color: var(--color-text-secondary);
}

/* ---- Input groups ---- */
[data-theme="dark"] .input-group-text {
  background-color: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-secondary) !important;
}

/* ---- Dropdown menus ---- */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--color-background-primary) !important;
  border-color: var(--color-border-primary) !important;
}
[data-theme="dark"] .dropdown-item {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .dropdown-divider {
  border-color: var(--color-border-primary) !important;
}

/* ---- Metronic user profile dropdown ---- */
[data-theme="dark"] .kt-notification__item {
  border-bottom-color: var(--color-border-faded) !important;
}
[data-theme="dark"] .kt-notification__item:hover {
  background-color: var(--color-background-secondary) !important;
}
[data-theme="dark"] .kt-notification__item-title { color: var(--color-text-primary) !important; }
[data-theme="dark"] .kt-notification__item-time  { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .kt-user-card {
  background-color: var(--color-background-secondary) !important;
}
[data-theme="dark"] .kt-user-card__name { color: var(--color-text-primary) !important; }
[data-theme="dark"] .kt-notification__custom {
  border-top-color: var(--color-border-primary) !important;
}

/* ---- Metronic navigation ---- */
[data-theme="dark"] .kt-menu__link {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .kt-menu__link-text { color: var(--color-text-primary) !important; }

/* ---- Tables ---- */
[data-theme="dark"] .table { color: var(--color-text-primary) !important; }
[data-theme="dark"] .table thead th {
  border-bottom-color: var(--color-border-primary) !important;
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: var(--color-border-faded) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}

/* ---- Badges ---- */
[data-theme="dark"] .badge-secondary {
  background-color: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}

/* ---- v-select ---- */
[data-theme="dark"] .vs__dropdown-menu {
  background-color: var(--color-background-primary) !important;
  border-color: var(--color-border-primary) !important;
}
[data-theme="dark"] .vs__dropdown-option { color: var(--color-text-primary) !important; }
[data-theme="dark"] .vs__dropdown-option--highlight {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .vs__selected        { color: var(--color-text-primary) !important; }
[data-theme="dark"] .vs__search          { color: var(--color-text-primary) !important; }
[data-theme="dark"] .vs__dropdown-toggle {
  background-color: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
}
[data-theme="dark"] .vs__clear,
[data-theme="dark"] .vs__open-indicator { fill: var(--color-text-secondary) !important; }

/* ---- Modal ---- */
[data-theme="dark"] .modal-content {
  background-color: var(--color-background-primary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .modal-header {
  border-bottom-color: var(--color-border-primary) !important;
}
[data-theme="dark"] .modal-footer {
  border-top-color: var(--color-border-primary) !important;
}

/* ---- SweetAlert ---- */
[data-theme="dark"] .swal2-popup {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}

/* ---- Header nav menu hover ---- */
.kt-header-menu .kt-menu__nav > .kt-menu__item:hover:not(.kt-menu__item--here):not(.kt-menu__item--active) > .kt-menu__link,
.kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--hover:not(.kt-menu__item--here):not(.kt-menu__item--active) > .kt-menu__link {
  background-color: rgba(0, 0, 0, 0.07) !important;
}
[data-theme="dark"] .kt-header-menu .kt-menu__nav > .kt-menu__item:hover:not(.kt-menu__item--here):not(.kt-menu__item--active) > .kt-menu__link,
[data-theme="dark"] .kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--hover:not(.kt-menu__item--here):not(.kt-menu__item--active) > .kt-menu__link {
  background-color: var(--color-background-secondary) !important;
}
[data-theme="dark"] .kt-header-menu .kt-menu__nav > .kt-menu__item:hover:not(.kt-menu__item--here):not(.kt-menu__item--active) > .kt-menu__link .kt-menu__link-text,
[data-theme="dark"] .kt-header-menu .kt-menu__nav > .kt-menu__item:hover:not(.kt-menu__item--here):not(.kt-menu__item--active) > .kt-menu__link .kt-menu__link-icon,
[data-theme="dark"] .kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--hover:not(.kt-menu__item--here):not(.kt-menu__item--active) > .kt-menu__link .kt-menu__link-text,
[data-theme="dark"] .kt-header-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--hover:not(.kt-menu__item--here):not(.kt-menu__item--active) > .kt-menu__link .kt-menu__link-icon {
  color: var(--btn-primary) !important;
}

/* ---- Tabs ---- */
[data-theme="dark"] .nav-tabs {
  border-color: var(--color-border-primary) !important;
}
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  background-color: var(--color-background-primary) !important;
  border-color: var(--color-border-primary) var(--color-border-primary) var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}

/* ---- Alert components ---- */
[data-theme="dark"] .alert-secondary {
  background-color: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}
/* Metronic .alert.alert-secondary .alert-text has higher specificity — override explicitly */
[data-theme="dark"] .alert.alert-secondary .alert-text {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .alert.alert-secondary .alert-icon i {
  color: var(--color-text-secondary) !important;
}

/* ---- text-dark utility (Metronic: #343a40 — invisible on dark bg) ---- */
[data-theme="dark"] .text-dark {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] a.text-dark,
[data-theme="dark"] a.text-dark:hover,
[data-theme="dark"] a.text-dark:focus {
  color: var(--btn-primary) !important;
}

/* ---- Subheader / page title bar ---- */
[data-theme="dark"] .kt-subheader {
  background-color: var(--color-app-background) !important;
}
[data-theme="dark"] .kt-subheader__title {
  color: var(--color-text-primary) !important;
}

/* ---- General text color fallbacks ---- */
[data-theme="dark"] small { color: var(--color-text-secondary); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: var(--color-text-primary);
}
[data-theme="dark"] hr {
  border-color: var(--color-border-primary) !important;
}

/* ---- Striped tables ---- */
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-background-faded) !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
  background-color: var(--color-background-primary) !important;
}

/* ---- Metronic datatable ---- */
[data-theme="dark"] .kt-datatable,
[data-theme="dark"] .kt-datatable__row {
  background-color: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row,
[data-theme="dark"] .kt-datatable > .kt-datatable__table > .kt-datatable__body .kt-datatable__row,
[data-theme="dark"] .kt-datatable > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row {
  border-bottom-color: var(--color-border-primary) !important;
}
[data-theme="dark"] .kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span {
  color: var(--color-text-secondary) !important;
}