/* ──────────────────────────────────────────────────────────────── */
/* ⵌ core changes */
/* ──────────────────────────────────────────────────────────────── */

body[data-bs-theme="dark"] {
  background-image:
    radial-gradient(820px 520px at 50% 42%, color-mix(in srgb, var(--tblr-gray-900) 5%, transparent), transparent 70%),
    repeating-radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tblr-gray-500) 3%, transparent) 0 1px, transparent 1px 84px),
    linear-gradient(90deg, transparent 49.96%, color-mix(in srgb, var(--tblr-gray-600) 4%, transparent) 50%, transparent 50.04%),
    linear-gradient(0deg, transparent 49.96%, color-mix(in srgb, var(--tblr-gray-700) 3%, transparent) 50%, transparent 50.04%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--tblr-gray-800) 3%, transparent) 0 1px, transparent 1px 52px),
    linear-gradient(180deg, var(--tblr-gray-800) 0%, var(--tblr-gray-900) 58%, var(--tblr-gray-900) 100%);
  background-attachment: fixed;
}

/* top nav */
[data-bs-theme="dark"] .navbar.navbar-expand-sm.navbar-light.d-print-none {
  background: linear-gradient(180deg, var(--tblr-gray-800), var(--tblr-gray-900));
}

/* side nav */
[data-bs-theme="dark"] .navbar-brand.navbar-brand-autodark {
  text-transform: uppercase;
  font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
  font-size: 0.96rem;
  letter-spacing: 0.12em;
  font-weight: 300;
}

[data-bs-theme="dark"] .fu-sidenav-brand-text {
  text-transform: uppercase;
  font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
  font-size: 0.96rem;
  letter-spacing: 0.12em;
  font-weight: 300;
}

.navbar.navbar-expand-sm.navbar-light.d-print-none .btn-list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}


.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 0.5rem;
  padding-right: 0.75rem;
  border-right: 1px solid color-mix(in srgb, var(--tblr-success) 20%, transparent);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--tblr-success);
  white-space: nowrap;
}

.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-status .status-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--tblr-success);
  box-shadow: 0 0 12px var(--tblr-success);
}

.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-theme-palette {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0.35rem;
  padding: 0 0.75rem;
  border-left: 1px solid color-mix(in srgb, #7cb3ff 18%, transparent);
  border-right: 1px solid color-mix(in srgb, #7cb3ff 18%, transparent);
}

.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-theme-palette .palette-dot {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #c0daff 30%, transparent);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-theme-palette .palette-dot > input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-theme-palette .palette-dot > span {
  position: relative;
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 999px;
  display: block;
}

.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-theme-palette .palette-dot.theme-azure > span { background: #2499ff; }
.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-theme-palette .palette-dot.theme-green > span { background: #2fb344; }
.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-theme-palette .palette-dot.theme-yellow > span { background: #f59f00; }
.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-theme-palette .palette-dot.theme-red > span { background: #d63939; }

.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-theme-palette .palette-dot > input:checked + span::after {
  content: "";
  position: absolute;
  inset: -0.32rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tblr-primary) 78%, #90c3ff);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tblr-primary) 45%, transparent);
}

.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-settings-dropdown .dropdown-menu .dropdown-item {
  cursor: pointer;
}

.navbar.navbar-expand-sm.navbar-light.d-print-none .nav-settings-dropdown .dropdown-item .form-check-input {
  margin-top: 0.2rem;
}

[data-bs-theme="dark"] .navbar.navbar-vertical.navbar-expand-lg.fu-sidenav-mini {
  /* background: linear-gradient(rgb(15, 23, 42) 0%, rgb(11, 15, 25) 30%, rgb(11, 15, 25) 60%, rgb(15, 23, 42) 100%); */
  background: linear-gradient(var(--tblr-gray-800) 0%, var(--tblr-gray900) 30%, var(--tblr-gray-800) 60%, var(--tblr-gray-900) 100%);
  box-shadow: 0 4px 24px #4399e100, 0 1px 2px var(--tblr-primary);
}


/* ──────────────────────────────────────────────────────────────── */
/* ⵌ small changes */
/* ──────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .page-pretitle {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

[data-bs-theme="dark"] .accordion-button.offcanvas-title {
  font-size: 0.7em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-bs-theme="dark"] .aurelia-font {
  font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

[data-bs-theme="dark"] .dropdown-divider { background-color: var(--tblr-gray-500); }
[data-bs-theme="dark"] .modal-header { background-color: var(--tblr-gray-500); }

/* ⵌ app icon anim */ 
[data-bs-theme="dark"] svg.app-icon-anim { width: 32px; height: 32px; filter: drop-shadow(0 0 8px rgba(232,115,74,0.3)); }
[data-bs-theme="dark"] .app-icon-anim .hex-rotate { transform-origin: 32px 32px; animation: rotateHex 12s linear infinite; }
[data-bs-theme="dark"] .app-icon-anim .dash-spin { transform-origin: 32px 32px; animation: dashRotate 6s linear infinite; }
[data-bs-theme="dark"] .app-icon-anim .pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes rotateHex { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dashRotate { from { transform: rotate(0deg); stroke-dashoffset: 0; } to { transform: rotate(-360deg); stroke-dashoffset: 20; } }
@keyframes pulse { 0%,100% { r: 4; opacity: .6; } 50% { r: 6; opacity: 1; } }


/* ──────────────────────────────────────────────────────────────── */
/* ⵌ CARD  */
/* ──────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .card {
  --card-primary-alpha: color-mix(in srgb, var(--tblr-primary) 32%, transparent);
  --grid-color: color-mix(in srgb, var(--tblr-primary) 10%, transparent);
  --glow-line: color-mix(in srgb, var(--tblr-primary) 15%, transparent);
  
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-primary-alpha);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tblr-primary) 5%, transparent);
  background: transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-bs-theme="dark"] .card-title {
  /* font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif; */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
}


/* Hover Effect */
[data-bs-theme="dark"] .card:hover {
  border-color: color-mix(in srgb, var(--tblr-primary) 50%, transparent);
  box-shadow: 
    inset 0 0 0 1px color-mix(in srgb, var(--tblr-primary) 15%, transparent),
    0 4px 12px color-mix(in srgb, var(--tblr-primary) 4%, transparent);
}


[data-bs-theme="dark"] .card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, 
      var(--glow-line) 0%, 
      color-mix(in srgb, var(--glow-line) 10%, transparent) 60px, 
      transparent 120px
    ) top / 100% 120px no-repeat,
    repeating-linear-gradient(180deg, 
      var(--grid-color) 0 1px, 
      transparent 1px 24px
    );
  opacity: 0.15;
  z-index: 0;
  transition: opacity 0.3s ease;
}

[data-bs-theme="dark"] .card:hover::before { opacity: 0.25; }

[data-bs-theme="dark"] .card .card-header {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid color-mix(in srgb, var(--tblr-primary) 15%, transparent);
  background: transparent;
  min-height: 42px;
  padding: 0.72rem 1rem 0.62rem;
}

[data-bs-theme="dark"] .card .card-title {
  --dot-color: var(--tblr-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: transform 0.3s ease;
}

[data-bs-theme="dark"] .card:hover .card-title { transform: translateX(2px); }

/* Status Colors */
[data-bs-theme="dark"] .card-title.none    { gap: 0; --dot-color: #ffffff00; display: inline-table; }
[data-bs-theme="dark"] .card-title.info    { --dot-color: var(--tblr-info); }
[data-bs-theme="dark"] .card-title.warning { --dot-color: var(--tblr-warning); }
[data-bs-theme="dark"] .card-title.danger  { --dot-color: var(--tblr-danger); }
[data-bs-theme="dark"] .card-title.success { --dot-color: var(--tblr-success); }

[data-bs-theme="dark"] .card .card-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot-color);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 var(--dot-color);
  transition: box-shadow 0.3s ease;
}

[data-bs-theme="dark"] .card:hover .card-title::before { box-shadow: 0 0 6px 1px var(--dot-color); }

[data-bs-theme="dark"] .card .card-title.primary::before { background: var(--tblr-primary); }
[data-bs-theme="dark"] .card .card-title.info::before { background: var(--tblr-info); }
[data-bs-theme="dark"] .card .card-title.warning::before { background: var(--tblr-warning); }
[data-bs-theme="dark"] .card .card-title.danger::before { background: var(--tblr-danger); }
[data-bs-theme="dark"] .card .card-title.success::before { background: var(--tblr-success); }


/* ──────────────────────────────────────────────────────────────── */
/* ⵌ CORNER */
/* ──────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .aurelia-top-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tblr-primary) 95%, transparent), transparent);
  opacity: 0.75;
}

[data-bs-theme="dark"] .aurelia-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 1;
  border-color: var(--tblr-primary);
}

[data-bs-theme="dark"] .aurelia-corner.white { border-color: #fff; }
[data-bs-theme="dark"] .aurelia-corner.primary { border-color: var(--tblr-primary); }
[data-bs-theme="dark"] .aurelia-corner.info { border-color: var(--tblr-info); }
[data-bs-theme="dark"] .aurelia-corner.warning { border-color: var(--tblr-warning); }
[data-bs-theme="dark"] .aurelia-corner.danger { border-color: var(--tblr-danger); }
[data-bs-theme="dark"] .aurelia-corner.success { border-color: var(--tblr-success); }

[data-bs-theme="dark"] .aurelia-corner-tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: 10px; border-color: var(--tblr-primary); }
[data-bs-theme="dark"] .aurelia-corner-tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; border-top-right-radius: 10px; border-color: var(--tblr-primary); }
[data-bs-theme="dark"] .aurelia-corner-bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; border-bottom-left-radius: 10px; border-color: var(--tblr-primary); }
[data-bs-theme="dark"] .aurelia-corner-br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: 10px; border-color: var(--tblr-primary); }

[data-bs-theme="light"] .aurelia-corner {
  opacity: 0;
}



/* ──────────────────────────────────────────────────────────────── */
/* ⵌ ACCORDION  */
/* ──────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .accordion .accordion-item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tblr-primary) 22%, transparent);
}

[data-bs-theme="dark"] .accordion .accordion-button {
  background: transparent;
  color: var(--tblr-body-color);
  box-shadow: none;
  border: 0;
}

[data-bs-theme="dark"] .accordion .accordion-button::after {
  background-image: none !important;
  box-shadow: none !important;
}


[data-bs-theme="dark"] .accordion .accordion-button {
  position: relative;
  padding-right: 2.8rem;
}

[data-bs-theme="dark"] .accordion .accordion-button::before,
[data-bs-theme="dark"] .accordion .accordion-button::after {
  content: "" !important;
  display: block !important;
  right: 1.05rem;
  top: 50%;
  width: 8px !important;
  height: 2px !important;
  border-radius: 2px;
  background: var(--tblr-primary) !important;
  transform-origin: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 2;
  pointer-events: none;
}



/* ──────────────────────────────────────────────────────────────── */
/* ⵌ BUTTON */
/* ──────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .btn[class*="btn-outline"] {
  border: 1px solid color-mix(in srgb, var(--tblr-primary) 65%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--tblr-primary) 10%, transparent);
  color: var(--tblr-primary);
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Light Mode: Only */
[data-bs-theme="light"] .btn[class*="btn-outline"] {
  background: color-mix(in srgb, var(--tblr-primary) 10%, white);
  border-color: color-mix(in srgb, var(--tblr-primary) 30%, white);
  border: 2px solid color-mix(in srgb, var(--tblr-primary) 65%, transparent);
}

[data-bs-theme="dark"] [class*="btn-outline"]:hover { transform: scale(1.02) !important; background-color: transparent !important; color: var(--tblr-btn-color) !important; border-color: var(--tblr-btn-color) !important; box-shadow: 0 3px 5px -3px currentColor !important; }
[data-bs-theme="dark"] [class*="btn-outline"]:active { transform: scale(0.99) !important; }


/* ──────────────────────────────────────────────────────────────── */
/* ⵌ FORM ELEMENTS / TEXT INPUT */
/* ──────────────────────────────────────────────────────────────── */
/* .form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: color-mix(in srgb, var(--tblr-primary) 75%, currentColor);
  opacity: 0.85;
} */

[data-bs-theme="dark"] .form-control {
  /* background: transparent; */
  background: color-mix(in srgb, var(--tblr-primary), transparent 93%);
  border: 1px solid color-mix(in srgb, var(--tblr-primary) 20%, var(--tblr-border-color));
  border-radius: 6px;
  color: inherit;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease-in-out;
}

/* Light Mode: Only */
[data-bs-theme="light"] .form-control { background: color-mix(in srgb, var(--tblr-primary) 2%, white); }
[data-bs-theme="light"] .form-control:disabled { background: #f8f9fa !important; border-color: #e9ecef; }
[data-bs-theme="light"] .form-control[readonly] { background: color-mix(in srgb, var(--tblr-primary) 2%, white); border-color: color-mix(in srgb, var(--tblr-primary) 10%, #e9ecef); }

[data-bs-theme="dark"] .form-control:focus {
  outline: 0;
  background: color-mix(in srgb, var(--tblr-primary) 4%, transparent);
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--tblr-primary) 10%, transparent);
}

[data-bs-theme="dark"] .form-control::placeholder { font-size: 0.85rem; color: color-mix(in srgb, var(--tblr-secondary) 55%, transparent); }
[data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[disabled] { background: color-mix(in srgb, var(--tblr-primary) 5%, transparent) !important; opacity: 0.5; cursor: not-allowed; border-color: color-mix(in srgb, var(--tblr-border-color) 30%, transparent); }
/* .form-control[readonly] { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-border-color)); cursor: default; } */
[data-bs-theme="dark"] .form-control:disabled::placeholder { opacity: 0.2; }

/* ──────────────────────────────────────────────────────────────── */
/* ⵌ FORM SELECT / DROPDOWN */
/* ──────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .form-select {
  display: block;
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
  background-color: color-mix(in srgb, var(--tblr-primary), transparent 93%);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23626976' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid color-mix(in srgb, var(--tblr-primary) 20%, var(--tblr-border-color));
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  appearance: none;
}
[data-bs-theme="light"] .form-select { background-color: color-mix(in srgb, var(--tblr-primary) 2%, white); border-color: color-mix(in srgb, var(--tblr-primary) 10%, var(--tblr-border-color)); }
[data-bs-theme="dark"] .form-select:focus { border-color: var(--tblr-primary); outline: 0; box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--tblr-primary) 10%, transparent); }
[data-bs-theme="dark"] .form-select:disabled { background-color: color-mix(in srgb, var(--tblr-primary) 5%, transparent); opacity: 0.5; cursor: not-allowed; }
[data-bs-theme="dark"] .form-select[readonly] { background-color: transparent; border-style: dashed; pointer-events: none; }
[data-bs-theme="dark"] .form-select option { background-color: var(--tblr-bg-surface); color: var(--tblr-body-color); }


/* ──────────────────────────────────────────────────────────────── */
/* ⵌ HR */
/* ──────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tblr-border-color-translucent) 15%, var(--tblr-border-color-translucent) 85%, transparent);
  opacity: 0.6;
  margin: 2rem 0;
  position: relative;
}

/* Light Mode: Only */
[data-bs-theme="light"] hr {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-border-color)) 20%, color-mix(in srgb, var(--tblr-primary) 15%, var(--tblr-border-color)) 80%, transparent);
  opacity: 0.8;
}


/* ──────────────────────────────────────────────────────────────── */
/* ⵌ Slim Select */
/* ──────────────────────────────────────────────────────────────── */
body[data-bs-theme=dark] {
  --ss-bg-color: var(--tblr-bg-forms);
  --ss-font-color: var(--tblr-body-color);
  --ss-placeholder-color: var(--tblr-secondary);
  --ss-border-color: color-mix(in srgb, var(--tblr-primary) 20%, var(--tblr-border-color));
}

[data-bs-theme="dark"] .ss-main {
  color: var(--ss-font-color);
  border: 1px solid var(--ss-border-color);
  border-radius: var(--ss-border-radius);
  background-color: color-mix(in srgb, var(--tblr-primary), transparent 93%);;
  overflow: hidden;
}