:root {
  --tech-bg: #060b1f;
  --tech-bg-soft: #0b1430;
  --tech-panel: rgba(11, 20, 48, 0.78);
  --tech-line: rgba(73, 126, 255, 0.35);
  --tech-primary: #2dd4ff;
  --tech-primary-2: #4f7dff;
  --tech-text: #e6eeff;
  --tech-muted: #8fa7d8;
  --tech-placeholder: #c2d4ff;
  --tech-muted-2: #a9c0ef;
  --tech-card: rgba(10, 24, 63, 0.52);
}

body {
  color: var(--tech-text);
  background: radial-gradient(1200px 700px at 80% -10%, #14357a 0%, var(--tech-bg) 50%) fixed !important;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(114, 156, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 156, 255, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(420px 420px at 8% 6%, rgba(0, 198, 255, 0.23), transparent 60%),
    radial-gradient(460px 460px at 92% 95%, rgba(79, 125, 255, 0.21), transparent 60%);
}

.bg-body-secondary,
.bg-body {
  background-color: transparent !important;
}

.sidebar {
  background: var(--tech-panel) !important;
  border-right: 1px solid var(--tech-line) !important;
  backdrop-filter: blur(8px);
}

.sidebar .sidebar-brand {
  border-color: rgba(101, 132, 205, 0.35) !important;
}

.sidebar .nav-title {
  color: var(--tech-muted) !important;
  letter-spacing: 0.04em;
}

.sidebar .nav-link {
  color: #c7d8ff !important;
  border: 1px solid transparent;
  border-radius: 10px;
  margin: 2px 6px;
}

.sidebar .nav-link .nav-icon,
.sidebar .nav-link .nav-icon i,
.sidebar .nav-link .nav-icon .icon {
  color: #8fb6ff !important;
  transition: color 0.2s ease, filter 0.2s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #ffffff !important;
  background: rgba(45, 212, 255, 0.08) !important;
  border-color: rgba(45, 212, 255, 0.35) !important;
}

.sidebar .nav-link:hover .nav-icon,
.sidebar .nav-link:hover .nav-icon i,
.sidebar .nav-link:hover .nav-icon .icon,
.sidebar .nav-link.active .nav-icon,
.sidebar .nav-link.active .nav-icon i,
.sidebar .nav-link.active .nav-icon .icon {
  color: #2dd4ff !important;
  filter: drop-shadow(0 0 6px rgba(45, 212, 255, 0.45));
}

.header {
  background: linear-gradient(120deg, rgba(9, 20, 50, 0.82), rgba(8, 18, 44, 0.62)) !important;
  backdrop-filter: blur(11px);
  border-bottom: 1px solid rgba(85, 138, 255, 0.4);
  box-shadow:
    inset 0 -1px 0 rgba(101, 162, 255, 0.25),
    0 8px 22px rgba(6, 12, 34, 0.38);
  position: relative;
  overflow: hidden;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(45, 212, 255, 0.18) 45%, transparent 80%);
  transform: translateX(-100%);
  animation: techHeaderSweep 8s linear infinite;
  pointer-events: none;
}

.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 255, 0.75), transparent);
  box-shadow: 0 0 14px rgba(45, 212, 255, 0.5);
  pointer-events: none;
}

.header .container-fluid {
  position: relative;
}

.header .container-fluid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(131, 172, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131, 172, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
}

.header h1,
.header .text-body,
.header .text-body.fw-medium {
  color: var(--tech-text) !important;
}

.card {
  background: var(--tech-card) !important;
  border: 1px solid var(--tech-line) !important;
  border-radius: 14px !important;
  color: var(--tech-text);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    inset 0 0 24px rgba(45, 212, 255, 0.07),
    0 6px 20px rgba(5, 12, 33, 0.24);
}

.card .text-body-secondary,
.form-text,
.text-body-secondary {
  color: var(--tech-muted) !important;
}

.form-label,
small,
.small {
  color: var(--tech-muted-2) !important;
}

.table {
  --cui-table-bg: transparent !important;
  --cui-table-color: var(--tech-text) !important;
  --cui-table-border-color: rgba(105, 130, 198, 0.25) !important;
  --cui-table-striped-color: var(--tech-text) !important;
  --cui-table-striped-bg: rgba(42, 72, 148, 0.16) !important;
  --cui-table-hover-color: #f0f6ff !important;
  --cui-table-hover-bg: rgba(58, 96, 188, 0.22) !important;
}

.table-light,
.table-light th {
  background: rgba(56, 90, 170, 0.2) !important;
  color: #dce9ff !important;
}

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

.table > :not(caption) > * > * {
  background-color: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(44, 76, 156, 0.15) !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(64, 108, 208, 0.22) !important;
}

.table thead th,
.table thead td,
.table-light.sticky-top,
thead.table-light.sticky-top th {
  background: rgba(56, 90, 170, 0.32) !important;
  color: #e8f1ff !important;
  border-bottom-color: rgba(102, 138, 215, 0.38) !important;
}

.form-control,
.form-select {
  background: rgba(14, 27, 62, 0.75) !important;
  border-color: rgba(99, 143, 255, 0.4) !important;
  color: var(--tech-text) !important;
}

.form-select {
  background-image:
    linear-gradient(45deg, transparent 50%, #b9d1ff 50%),
    linear-gradient(135deg, #b9d1ff 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) calc(1em + 1px),
    calc(100% - 12px) calc(1em + 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--tech-placeholder) !important;
  opacity: 1 !important;
}

select.form-select,
.form-select option {
  color: var(--tech-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--tech-placeholder) !important;
  opacity: 1 !important;
}

.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown {
  background: rgba(14, 27, 62, 0.95) !important;
  border-color: rgba(99, 143, 255, 0.4) !important;
  color: var(--tech-text) !important;
}

.select2-container--bootstrap-5 .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-results__option {
  color: var(--tech-text) !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
  background: rgba(45, 212, 255, 0.24) !important;
  color: #eff6ff !important;
}

.select2-container--bootstrap-5 .select2-selection__arrow b {
  border-color: #b9d1ff transparent transparent transparent !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tech-primary) !important;
  box-shadow: 0 0 0 0.18rem rgba(45, 212, 255, 0.2) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(88%) sepia(12%) saturate(685%) hue-rotate(185deg) brightness(103%) contrast(101%);
  opacity: 0.95;
  cursor: pointer;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-clear-button,
input[type="date"]::-webkit-clear-button {
  filter: invert(88%) sepia(12%) saturate(685%) hue-rotate(185deg) brightness(103%) contrast(101%);
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-primary {
  border-radius: 10px !important;
}

.btn-primary {
  border-color: rgba(45, 212, 255, 0.6) !important;
  background: linear-gradient(135deg, rgba(45, 212, 255, 0.3), rgba(79, 125, 255, 0.35)) !important;
  box-shadow: inset 0 0 20px rgba(45, 212, 255, 0.12), 0 0 18px rgba(45, 212, 255, 0.2);
}

.btn-outline-primary,
.btn-outline-secondary {
  border-color: rgba(99, 143, 255, 0.45) !important;
  color: var(--tech-text) !important;
}

.btn-close {
  filter: invert(88%) sepia(11%) saturate(680%) hue-rotate(184deg) brightness(104%) contrast(103%);
  opacity: 0.95 !important;
}

.btn-close:hover {
  opacity: 1 !important;
}

.pagination {
  --cui-pagination-color: #bfd4ff;
  --cui-pagination-bg: rgba(18, 34, 80, 0.62);
  --cui-pagination-border-color: rgba(93, 136, 234, 0.42);
  --cui-pagination-hover-color: #eff6ff;
  --cui-pagination-hover-bg: rgba(45, 212, 255, 0.2);
  --cui-pagination-hover-border-color: rgba(45, 212, 255, 0.5);
  --cui-pagination-focus-color: #eff6ff;
  --cui-pagination-focus-bg: rgba(45, 212, 255, 0.24);
  --cui-pagination-focus-box-shadow: 0 0 0 0.16rem rgba(45, 212, 255, 0.22);
  --cui-pagination-active-color: #f5f9ff;
  --cui-pagination-active-bg: rgba(45, 212, 255, 0.3);
  --cui-pagination-active-border-color: rgba(45, 212, 255, 0.62);
  --cui-pagination-disabled-color: #8da7db;
  --cui-pagination-disabled-bg: rgba(14, 27, 62, 0.5);
  --cui-pagination-disabled-border-color: rgba(84, 112, 184, 0.36);
}

.page-link {
  backdrop-filter: blur(4px);
}

.alert-success,
.alert-danger {
  border: 1px solid var(--tech-line) !important;
  backdrop-filter: blur(8px);
}

.list-group {
  --cui-list-group-bg: transparent;
  --cui-list-group-color: var(--tech-text);
  --cui-list-group-border-color: rgba(94, 133, 223, 0.28);
}

.list-group-item {
  background: rgba(18, 34, 80, 0.35) !important;
  color: var(--tech-text) !important;
  border-color: rgba(94, 133, 223, 0.28) !important;
}

.list-group-item + .list-group-item {
  margin-top: 0.15rem;
}

/* Dashboard page secondary texts were too dark on deep-blue background. */
.dashboard-summary-card .ratio-sub,
#dashboard-summary-status,
#dashboard-detail-empty,
.dashboard-detail-panel .card-header,
.dashboard-detail-panel .table td.text-body-secondary {
  color: var(--tech-muted-2) !important;
}

@keyframes techHeaderSweep {
  0% { transform: translateX(-110%); opacity: 0; }
  12% { opacity: 1; }
  55% { opacity: 0.75; }
  100% { transform: translateX(115%); opacity: 0; }
}