/*
 * Dark Theme — overrides Materio (Bootstrap 5) light theme variables
 * Base palette: gradient black → very dark blue (#020617)
 * Landed page colors: --bg: #080a0f, --primary: #6366f1
 */

:root {
  /* ── Core backgrounds ── */
  --bs-body-bg:       #06090f;
  --bs-body-bg-rgb:   6, 9, 15;
  --bs-base-color:    #e2e8f0;
  --bs-base-color-rgb: 226, 232, 240;
  --bs-paper-bg:      #0c101a;          /* card / panel bg            */
  --bs-secondary-bg:  #11151f;          /* subtle surface bg          */
  --bs-secondary-bg-rgb: 17, 21, 31;
  --bs-tertiary-bg:   #0e1118;          /* tertiary surface           */
  --bs-tertiary-bg-rgb: 14, 17, 24;

  /* ── Text ── */
  --bs-body-color:          #c8cfd8;
  --bs-body-color-rgb:      200, 207, 216;
  --bs-emphasis-color:      #f1f5f9;
  --bs-emphasis-color-rgb:  241, 245, 249;
  --bs-secondary-color:     #8a91a0;
  --bs-secondary-color-rgb: 138, 145, 160;
  --bs-tertiary-color:      rgba(138, 145, 160, 0.55);
  --bs-link-color:          #818cf8;
  --bs-link-color-rgb:      129, 140, 248;
  --bs-link-hover-color:    #a5b4fc;

  /* ── Borders / Dividers ── */
  --bs-border-color:       rgba(255, 255, 255, 0.07);
  --bs-border-color-rgb:   rgba(255, 255, 255, 0.07);

  /* ── Heading ── */
  --bs-heading-color: #f1f5f9;

  /* ── Form inputs ── */
  --bs-input-bg:                    #0e1219;
  --bs-input-border-color:          rgba(255, 255, 255, 0.1);
  --bs-input-color:                  #c8cfd8;
  --bs-input-focus-bg:               #111620;
  --bs-input-focus-border-color:    rgba(99, 102, 241, 0.5);
  --bs-input-focus-color:             #e2e8f0;
  --bs-input-placeholder-color:     rgba(255, 255, 255, 0.22);
  --bs-input-disabled-bg:            #0a0d13;
  --bs-input-disabled-border-color:  rgba(255, 255, 255, 0.05);

  /* ── Tables ── */
  --bs-table-bg:          transparent;
  --bs-table-color:       #c8cfd8;
  --bs-table-border-color: rgba(255, 255, 255, 0.06);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-active-bg:  rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg:   rgba(255, 255, 255, 0.03);

  /* ── Cards ── */
  --bs-card-bg: var(--bs-paper-bg);
  --bs-card-border-color: rgba(255, 255, 255, 0.07);

  /* ── Dropdowns ── */
  --bs-dropdown-bg:        var(--bs-paper-bg);
  --bs-dropdown-color:     #c8cfd8;
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.07);
  --bs-dropdown-link-active-bg: color-mix(in sRGB, var(--bs-paper-bg) 85%, var(--bs-primary));

  /* ── Navs / Tabs ── */
  --bs-nav-link-color:            #c8cfd8;
  --bs-nav-pills-link-active-bg:  #6366f1;

  /* ── Accordion ── */
  --bs-accordion-bg:       var(--bs-paper-bg);
  --bs-accordion-border-color: rgba(255, 255, 255, 0.07);

  /* ── Toast ── */
  --bs-toast-bg: var(--bs-paper-bg);
  --bs-toast-border-color: rgba(255, 255, 255, 0.07);

  /* ── Modal ── */
  --bs-modal-bg:                  var(--bs-paper-bg);
  --bs-modal-border-color:        rgba(255, 255, 255, 0.07);
  --bs-modal-header-border-color: rgba(255, 255, 255, 0.07);
  --bs-modal-footer-border-color: rgba(255, 255, 255, 0.07);

  /* ── Alert defaults ── */
  --bs-alert-border-color: rgba(255, 255, 255, 0.06);

  /* ── Breadcrumb ── */
  --bs-breadcrumb-divider-color: #5a6174;

  /* ── List group ── */
  --bs-list-group-bg:                transparent;
  --bs-list-group-border-color:      rgba(255, 255, 255, 0.07);
  --bs-list-group-active-bg:         #6366f1;
  --bs-list-group-active-border-color: #6366f1;
  --bs-list-group-active-color:       #fff;

  /* ── Progress ── */
  --bs-progress-bg: #11151f;
  --bs-progress-border-color: transparent;

  /* ── Carousel ── */
  --bs-carousel-bg: var(--bs-paper-bg);

  /* ── Spinner ── */
  --bs-spinner-width:           1.5rem;
  --bs-spinner-height:          1.5rem;
  --bs-spinner-border-width:    0.2em;
  --bs-spinner-border-color:    #6366f1;

  /* ── Offcanvas ── */
  --bs-offcanvas-bg:       var(--bs-paper-bg);
  --bs-offcanvas-border-color: rgba(255, 255, 255, 0.07);

  /* ── Figures ── */
  --bs-figure-caption-color: #5a6174;
}

/* ── Body background gradient ── */
body,
.layout-wrapper,
.layout-page,
.content-wrapper {
  background: linear-gradient(170deg, #000000 0%, #030712 40%, #060b14 100%) !important;
  color: var(--bs-body-color) !important;
}

/* ── Navbar overrides ── */
.navbar {
  background: rgba(8, 10, 15, 0.85) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Sidebar / Menu ── */
.menu-inner,
.menu-inner > .menu-item {
  background: transparent !important;
}

.menu {
  background: var(--bs-body-bg) !important;
}

.menu-inner > .menu-item > .menu-link {
  color: var(--bs-secondary-color) !important;
}

.menu-inner > .menu-item.active > .menu-link,
.menu-inner > .menu-item .menu-link.active {
  background: linear-gradient(90deg, #6366f1 0%, rgba(99,102,241,0.15) 100%) !important;
  color: #fff !important;
}

.menu-inner > .menu-item > .menu-link:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ── Text helpers ── */
.text-body {
  color: var(--bs-body-color) !important;
}

.text-muted {
  color: #5a6174 !important;
}

/* ── Table header light text ── */
table thead.table-light th {
  background: linear-gradient(to bottom, #5a2fc2 0%, #7c4ddb 55%, #8c57ff 100%) !important;
  color: #fff !important;
}

/* ── Content-backdrop (fade overlay) ── */
.content-backdrop {
  background: #000 !important;
}

/* ── Footer ── */
.footer {
  background: var(--bs-body-bg) !important;
  border-top: 1px solid var(--bs-border-color) !important;
  color: var(--bs-secondary-color) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bs-body-bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Form control focus glow ── */
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* ── Input / textarea outlines ── */
.form-control,
.form-control:focus,
textarea.form-control,
textarea.form-control:focus {
  background-color: var(--bs-input-bg) !important;
  color: var(--bs-input-color) !important;
  border-color: var(--bs-input-border-color) !important;
}

/* ── Select dropdown ── */
.form-select {
  background-color: var(--bs-input-bg) !important;
  color: var(--bs-input-color) !important;
  border-color: var(--bs-input-border-color) !important;
}

/* ── Placeholder text — must look like placeholder, not real content ── */
.form-control::placeholder,
textarea.form-control::placeholder {
  color: rgba(255, 255, 255, 0.22) !important;
  opacity: 1 !important;
}

/* Firefox */
.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder {
  color: rgba(255, 255, 255, 0.22) !important;
  opacity: 1 !important;
}

/* Any other input/textarea/select */
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.22) !important;
  opacity: 1 !important;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.22) !important;
  opacity: 1 !important;
}

/* ── Range slider ── */
.form-range::-webkit-slider-thumb {
  background: #6366f1;
}
.form-range::-webkit-slider-runnable-track {
  background: #1a1f2e;
}

/* ── Badge ── */
.badge {
  color: #fff;
}

/* ── Divider ── */
.divider {
  color: var(--bs-border-color);
}

/* ── Search icon in input groups ── */
.input-group-text {
  background: var(--bs-input-bg) !important;
  color: var(--bs-secondary-color) !important;
  border-color: var(--bs-input-border-color) !important;
}

/* ── Collapse border fix ── */
.collapse,
.collapsing {
  background: transparent;
}

/* ── Popover / Tooltip ── */
.popover {
  background: var(--bs-paper-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
}
.popover .popover-header {
  background: transparent;
  border-bottom: 1px solid var(--bs-border-color);
}
.tooltip-inner {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

/* ── Pagination ── */
.page-link {
  background-color: var(--bs-paper-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.page-item.active .page-link {
  background-color: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}

/* ── Modal backdrop ── */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ── Tab content background ── */
.nav-tabs .nav-link {
  color: var(--bs-secondary-color) !important;
  border-color: transparent !important;
}
.nav-tabs .nav-link.active {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-paper-bg) !important;
  border-color: var(--bs-border-color) var(--bs-border-color) transparent !important;
}

/* ── Navbar fixed overlay gradient ── */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page::before {
  background: linear-gradient(180deg, rgba(6, 9, 15, 0.85) 44%, rgba(6, 9, 15, 0.43) 73%, rgba(6, 9, 15, 0)) !important;
}

/* ── App branding / logo area ── */
.app-brand .app-brand-text {
  color: #f1f5f9 !important;
}

/* ── Menu badge ── */
.menu-inner .menu-badge,
.app-brand-logo.demo svg {
  fill: var(--bs-body-color);
}