/* ============================================================
   FRACTURA — THEME (LIGHT / DARK)
   Apply `html.dark` to enable dark mode.
   ============================================================ */

/* ---- CSS Variables ---------------------------------------- */
:root {
  --body-bg:              #ffffff;
  --body-color:           #212529;

  --sidebar-bg:           #f8f9fa;
  --sidebar-link:         #333333;
  --sidebar-link-hover-bg: rgba(0, 0, 0, .06);
  --sidebar-active-color: #0d6efd;
  --sidebar-submenu-bg:   rgba(0, 0, 0, .04);

  --border-color:         #dee2e6;
  --page-header-border:   #dee2e6;

  --card-bg:              #ffffff;
  --card-border:          rgba(0, 0, 0, .125);

  --table-color:          #212529;
  --table-border:         #dee2e6;
  --table-striped-bg:     rgba(0, 0, 0, .04);
  --table-hover-bg:       #cce5ff;
  --table-head-bg:        #343a40;
  --table-head-color:     #ffffff;

  --input-bg:             #ffffff;
  --input-color:          #495057;
  --input-border:         #ced4da;
  --input-focus-bg:       #ffffff;

  --dropdown-bg:          #ffffff;
  --dropdown-color:       #212529;
  --dropdown-border:      rgba(0, 0, 0, .15);
  --dropdown-hover-bg:    #f8f9fa;

  --breadcrumb-bg:        #e9ecef;
  --breadcrumb-color:     #6c757d;

  --caption-color:        #6c757d;

  --badge-secondary-bg:   #6c757d;
  --badge-secondary-color:#fff;

  --btn-outline-secondary-color:   #6c757d;
  --btn-outline-secondary-border:  #6c757d;
  --btn-outline-secondary-hover-bg:#6c757d;
  --btn-outline-secondary-hover-c: #fff;

  --alert-info-bg:        #d1ecf1;
  --alert-info-color:     #0c5460;
  --alert-info-border:    #bee5eb;
  --alert-warning-bg:     #fff3cd;
  --alert-warning-color:  #856404;
  --alert-warning-border: #ffeeba;

  --modal-bg:             #ffffff;
  --modal-header-bg:      #f8f9fa;
  --modal-color:          #212529;

  --code-bg:              #f8f9fa;
  --code-color:           #e83e8c;
}

html.dark {
  --body-bg:              #14151f;
  --body-color:           #cdd0e0;

  --sidebar-bg:           #1a1b2a;
  --sidebar-link:         #a8aac0;
  --sidebar-link-hover-bg: rgba(255, 255, 255, .06);
  --sidebar-active-color: #5aacf7;
  --sidebar-submenu-bg:   rgba(255, 255, 255, .03);

  --border-color:         #2e3048;
  --page-header-border:   #2e3048;

  --card-bg:              #1e2033;
  --card-border:          rgba(255, 255, 255, .07);

  --table-color:          #cdd0e0;
  --table-border:         #2e3048;
  --table-striped-bg:     rgba(255, 255, 255, .03);
  --table-hover-bg:       rgba(90, 172, 247, .12);
  --table-head-bg:        #0e0f1c;
  --table-head-color:     #b0b3c8;

  --input-bg:             #252638;
  --input-color:          #c8cad8;
  --input-border:         #3a3c54;
  --input-focus-bg:       #2c2e42;

  --dropdown-bg:          #1e2033;
  --dropdown-color:       #cdd0e0;
  --dropdown-border:      #2e3048;
  --dropdown-hover-bg:    #252638;

  --breadcrumb-bg:        #1a1b2a;
  --breadcrumb-color:     #8890a8;

  --caption-color:        #8890a8;

  --badge-secondary-bg:   #484a60;
  --badge-secondary-color:#c8cad8;

  --btn-outline-secondary-color:   #8890a8;
  --btn-outline-secondary-border:  #3a3c54;
  --btn-outline-secondary-hover-bg:#3a3c54;
  --btn-outline-secondary-hover-c: #cdd0e0;

  --alert-info-bg:        #142535;
  --alert-info-color:     #7ecff5;
  --alert-info-border:    #1e3a50;
  --alert-warning-bg:     #2a2015;
  --alert-warning-color:  #f5c842;
  --alert-warning-border: #3d3020;

  --modal-bg:             #1e2033;
  --modal-header-bg:      #1a1b2a;
  --modal-color:          #cdd0e0;

  --code-bg:              #1a1b2a;
  --code-color:           #f08080;
}

/* ---- Base ------------------------------------------------- */
body {
  background-color: var(--body-bg) !important;
  color: var(--body-color) !important;
  transition: background-color .2s, color .2s;
}

/* ---- Sidebar ---------------------------------------------- */
.sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border-color);
  transition: background-color .2s;
}

.sidebar .nav-link {
  color: var(--sidebar-link) !important;
}

.sidebar .nav-link.active {
  color: var(--sidebar-active-color) !important;
}

.sidebar ul ul a,
.sidebar [aria-expanded="true"] {
  background: var(--sidebar-submenu-bg) !important;
}

.sidebar ul li a:hover,
.sidebar ul .active a {
  background: var(--sidebar-link-hover-bg) !important;
  color: var(--sidebar-link) !important;
}

.sidebar .text-muted {
  color: var(--breadcrumb-color) !important;
}

.sidebar-heading {
  color: var(--breadcrumb-color) !important;
}

/* ---- Page header ------------------------------------------ */
.border-bottom {
  border-bottom-color: var(--page-header-border) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--body-color);
}

a { color: var(--sidebar-active-color); }
html.dark a { color: #5aacf7; }
html.dark a:hover { color: #82c6ff; }

/* ---- Breadcrumb ------------------------------------------- */
.breadcrumb {
  background-color: var(--breadcrumb-bg) !important;
  color: var(--breadcrumb-color) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--breadcrumb-color);
}

/* ---- Tables ----------------------------------------------- */
.table {
  color: var(--table-color) !important;
  border-color: var(--table-border) !important;
}

.table td,
.table th {
  border-color: var(--table-border) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--table-striped-bg) !important;
}

/* All table headers get themed background */
.table thead th,
.table th {
  background-color: var(--table-head-bg) !important;
  color: var(--table-head-color) !important;
  border-color: var(--table-border) !important;
}

caption {
  color: var(--caption-color) !important;
}

tr.clickable-row:hover,
tr.clickable-row.over {
  background-color: var(--table-hover-bg) !important;
}

/* ---- Cards ------------------------------------------------- */
.card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--body-color) !important;
}

.card-body, .card-header, .card-footer {
  background-color: var(--card-bg) !important;
  color: var(--body-color) !important;
}

/* ---- Form controls ---------------------------------------- */
.form-control {
  background-color: var(--input-bg) !important;
  color: var(--input-color) !important;
  border-color: var(--input-border) !important;
}

.form-control:focus {
  background-color: var(--input-focus-bg) !important;
  color: var(--input-color) !important;
  border-color: var(--sidebar-active-color) !important;
}

html.dark .form-control::placeholder {
  color: #6870a0;
}

select.form-control option {
  background-color: var(--input-bg);
  color: var(--input-color);
}

.input-group-text {
  background-color: var(--input-bg) !important;
  color: var(--input-color) !important;
  border-color: var(--input-border) !important;
}

/* ---- Dropdowns -------------------------------------------- */
.dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
  color: var(--dropdown-color) !important;
}

.dropdown-item {
  color: var(--dropdown-color) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--dropdown-color) !important;
}

.dropdown-divider {
  border-color: var(--border-color) !important;
}

/* ---- Alerts ----------------------------------------------- */
.alert-info {
  background-color: var(--alert-info-bg) !important;
  color: var(--alert-info-color) !important;
  border-color: var(--alert-info-border) !important;
}

.alert-warning {
  background-color: var(--alert-warning-bg) !important;
  color: var(--alert-warning-color) !important;
  border-color: var(--alert-warning-border) !important;
}

html.dark .alert-success {
  background-color: #0e2a1a !important;
  color: #5fc878 !important;
  border-color: #1a3d28 !important;
}

html.dark .alert-danger {
  background-color: #2a0e0e !important;
  color: #f07878 !important;
  border-color: #3d1a1a !important;
}

/* ---- Buttons ---------------------------------------------- */
.btn-outline-secondary {
  color: var(--btn-outline-secondary-color) !important;
  border-color: var(--btn-outline-secondary-border) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary.active,
.btn-outline-secondary:active {
  background-color: var(--btn-outline-secondary-hover-bg) !important;
  color: var(--btn-outline-secondary-hover-c) !important;
  border-color: var(--btn-outline-secondary-hover-bg) !important;
}

html.dark .btn-outline-primary {
  color: #5aacf7 !important;
  border-color: #5aacf7 !important;
}
html.dark .btn-outline-primary:hover {
  background-color: #1c4a80 !important;
  color: #cee8ff !important;
}

html.dark .btn-outline-warning {
  color: #f5c842 !important;
  border-color: #f5c842 !important;
}
html.dark .btn-outline-warning:hover {
  background-color: #4a3800 !important;
  color: #fff !important;
}

html.dark .btn-outline-success {
  color: #5fc878 !important;
  border-color: #5fc878 !important;
}
html.dark .btn-outline-success:hover {
  background-color: #0e2a1a !important;
  color: #fff !important;
}

html.dark .btn-outline-danger {
  color: #f07878 !important;
  border-color: #f07878 !important;
}

html.dark .btn-secondary {
  background-color: #3a3c54 !important;
  border-color: #4a4c68 !important;
  color: #c8cad8 !important;
}

/* ---- Modals ----------------------------------------------- */
.modal-content {
  background-color: var(--modal-bg) !important;
  color: var(--modal-color) !important;
  border-color: var(--border-color) !important;
}

.modal-header,
.modal-footer {
  background-color: var(--modal-header-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--modal-color) !important;
}

html.dark .close {
  color: var(--modal-color) !important;
}

/* ---- List groups ------------------------------------------ */
html.dark .list-group-item {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--body-color) !important;
}

html.dark .list-group-item-action:hover {
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--body-color) !important;
}

/* ---- selectpicker ----------------------------------------- */
html.dark .bootstrap-select .dropdown-toggle {
  background-color: var(--input-bg) !important;
  color: var(--input-color) !important;
  border-color: var(--input-border) !important;
}

html.dark .bootstrap-select .dropdown-menu {
  background-color: var(--dropdown-bg) !important;
}

html.dark .bootstrap-select .dropdown-menu li a {
  color: var(--dropdown-color) !important;
}

html.dark .bootstrap-select .dropdown-menu li a:hover {
  background-color: var(--dropdown-hover-bg) !important;
}

/* ---- Badges (secondary) ----------------------------------- */
.badge-secondary {
  background-color: var(--badge-secondary-bg) !important;
  color: var(--badge-secondary-color) !important;
}

/* ---- hr / dividers ---------------------------------------- */
hr {
  border-color: var(--border-color) !important;
}

/* ---- Text utilities --------------------------------------- */
html.dark .text-muted {
  color: var(--breadcrumb-color) !important;
}

html.dark .text-dark {
  color: var(--body-color) !important;
}

html.dark small {
  color: var(--breadcrumb-color);
}

/* ---- Theme toggle button ---------------------------------- */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 .75rem;
  color: rgba(255,255,255,.75);
  transition: color .15s;
}

#theme-toggle:hover {
  color: #fff;
}

/* ---- uPlot charts ----------------------------------------- */
html.dark .u-legend {
  color: var(--body-color);
}

/* ---- Misc Bootstrap overrides ----------------------------- */
html.dark .bg-light {
  background-color: var(--sidebar-bg) !important;
}

html.dark .bg-white {
  background-color: var(--card-bg) !important;
}

html.dark .whitebox {
  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
}

html.dark .border,
html.dark .border-top,
html.dark .border-right,
html.dark .border-left {
  border-color: var(--border-color) !important;
}

html.dark pre,
html.dark code {
  background-color: var(--code-bg) !important;
  color: var(--code-color) !important;
}

/* ---- Chart cards (uPlot + vector plot) stay light in dark mode --- */
html.dark .chart-card {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}
html.dark .chart-card .card-body {
  background-color: #ffffff !important;
  color: #212529 !important;
}
html.dark .chart-card h1, html.dark .chart-card h2,
html.dark .chart-card h3, html.dark .chart-card h4,
html.dark .chart-card h5, html.dark .chart-card h6 {
  color: #212529 !important;
}
html.dark .chart-card .text-muted {
  color: #6c757d !important;
}
html.dark .chart-card small {
  color: #6c757d !important;
}

/* ---- Topbar Sites link ------------------------------------ */
#topbar .topbar-sites {
  opacity: .75;
  transition: opacity .15s;
  white-space: nowrap;
}
#topbar .topbar-sites:hover {
  opacity: 1;
  text-decoration: none;
}
#topbar .topbar-sites.font-weight-bold {
  opacity: 1;
  border-bottom: 2px solid rgba(255,255,255,.6);
}