/* ============================================================
   TACTICAL THEME — Rainbow Six Siege x Cyberpunk 2077
   Global override for Sneat Framework
   File: wwwroot/css/tactical-theme.css
   Load AFTER all vendor CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
══════════════════════════════════════════════════════════ */
:root {
  /* — Core Palette — */
  --cy-primary: #00e5ff;
  --cy-primary-dark: #00b8cc;
  --cy-primary-dim: #007a8c;
  --cy-amber: #ffab00;
  --cy-amber-dim: rgba(255,171,0,0.7);
  --cy-red: #ff1744;
  --cy-green: #00e676;
  --cy-purple: #d500f9;
  /* — Glow — */
  --cy-glow: rgba(0,229,255,0.55);
  --cy-glow-soft: rgba(0,229,255,0.18);
  --cy-glow-amber: rgba(255,171,0,0.45);
  --cy-glow-red: rgba(255,23,68,0.45);
  /* — Surfaces — */
  --cy-bg: #04060d;
  --cy-surface-1: #070a12;
  --cy-surface-2: #0a0e1a;
  --cy-surface-3: #0f1420;
  --cy-surface-4: #141926;
  --cy-surface-5: #1a2030;
  /* — Borders — */
  --cy-border: rgba(0,229,255,0.14);
  --cy-border-bright: rgba(0,229,255,0.35);
  --cy-border-amber: rgba(255,171,0,0.25);
  /* — Text — */
  --cy-text-muted: #4a6070;
  --cy-text: #7a9aaa;
  --cy-text-bright: #adc8d8;
  --cy-text-white: #d8eaf0;
  --cy-text-active: #00e5ff;
  /* — Typography — */
  --cy-font-hud: 'Orbitron', 'Segoe UI', sans-serif;
  --cy-font-mono: 'Share Tech Mono', 'Courier New', monospace;
  --cy-font-body: 'Rajdhani', 'Segoe UI', sans-serif;
  /* — Timing — */
  --cy-transition: 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════════════════════
   2. BASE RESET — GLOBAL DARK SURFACE
══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background-color: var(--cy-bg) !important;
  color: var(--cy-text-bright) !important;
  font-family: var(--cy-font-body) !important;
  font-size: 14px;
  letter-spacing: 0.01em;
}

  /* ── FIX 1: Scanline layer phải nhường modal ── */
  body::before,
  body::after {
    z-index: 10 !important; /* Thấp hơn modal backdrop (1055) */
    pointer-events: none !important;
  }

/* ── FIX 2: Bỏ clip-path trên modal — gây lỗi hit-test ── */
.modal-content {
  clip-path: none !important;
  border-radius: 0 !important;
  /* Thay bằng corner giả dùng pseudo-element an toàn */
  position: relative !important;
}

  /* Corner decoration thay thế clip-path */
  .modal-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--cy-primary), rgba(0,229,255,0.3), transparent) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

/* ── FIX 3: Đảm bảo modal và backdrop đúng z-index ── */
.modal {
  z-index: 1055 !important;
}

.modal-backdrop {
  z-index: 1050 !important;
}

.modal-dialog {
  z-index: 1056 !important;
}

/* ── FIX 4: Card clip-path cũng cần bỏ để tránh lỗi tương tự ── */
.card {
  clip-path: none !important;
}


@keyframes crt-flicker {
  0%, 100% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  93% {
    opacity: 0.97;
  }

  94% {
    opacity: 1;
  }

  96% {
    opacity: 0.98;
  }

  97% {
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════════
   3. TYPOGRAPHY
══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cy-font-hud) !important;
  color: var(--cy-text-white) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p, span, label, td, th, li, small, div {
  font-family: var(--cy-font-body) !important;
}

code, pre, kbd, samp,
.font-monospace {
  font-family: var(--cy-font-mono) !important;
  color: var(--cy-primary);
}

a {
  color: var(--cy-primary);
  transition: color var(--cy-transition), text-shadow var(--cy-transition);
}

  a:hover {
    color: var(--cy-primary-dark);
    text-shadow: 0 0 8px var(--cy-glow);
  }

/* ══════════════════════════════════════════════════════════
   4. LAYOUT WRAPPER & PAGE
══════════════════════════════════════════════════════════ */
.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper {
  background-color: var(--cy-bg) !important;
}

.container-xxl,
.container-fluid,
.container {
  background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════
   5. NAVBAR — TOP BAR
══════════════════════════════════════════════════════════ */
.layout-navbar,
.bg-navbar-theme {
  background-color: rgba(7,10,18,0.97) !important;
  border-bottom: 1px solid var(--cy-border-bright) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  box-shadow: 0 1px 0 var(--cy-border), 0 4px 24px rgba(0,229,255,0.07), inset 0 -1px 0 rgba(0,229,255,0.08) !important;
}

  /* Navbar brand */
  .bg-navbar-theme .app-brand-text,
  .bg-navbar-theme .navbar-brand,
  .navbar-brand-text {
    font-family: var(--cy-font-hud) !important;
    color: var(--cy-primary) !important;
    text-shadow: 0 0 12px var(--cy-glow), 0 0 24px rgba(0,229,255,0.3) !important;
    letter-spacing: 0.15em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }

  /* Nav icons */
  .bg-navbar-theme .navbar-nav .nav-link,
  .bg-navbar-theme .nav-link {
    color: var(--cy-text) !important;
    transition: color var(--cy-transition), text-shadow var(--cy-transition) !important;
  }

    .bg-navbar-theme .navbar-nav .nav-link:hover,
    .bg-navbar-theme .nav-link:hover {
      color: var(--cy-primary) !important;
      text-shadow: 0 0 6px var(--cy-glow) !important;
    }

    .bg-navbar-theme .navbar-nav .nav-link.active,
    .bg-navbar-theme .nav-link.active {
      color: var(--cy-primary) !important;
      text-shadow: 0 0 8px var(--cy-glow) !important;
    }

  /* Search input */
  .bg-navbar-theme .navbar-search-wrapper .form-control,
  .bg-navbar-theme .search-input-wrapper .search-input {
    background-color: var(--cy-surface-3) !important;
    border: 1px solid var(--cy-border) !important;
    color: var(--cy-text-bright) !important;
    font-family: var(--cy-font-mono) !important;
    border-radius: 0 !important;
  }

    .bg-navbar-theme .navbar-search-wrapper .form-control:focus {
      border-color: var(--cy-primary) !important;
      box-shadow: 0 0 0 3px rgba(0,229,255,0.12), 0 0 12px rgba(0,229,255,0.08) !important;
    }

/* Notification badge */
.navbar-nav .badge {
  background-color: var(--cy-red) !important;
  box-shadow: 0 0 8px var(--cy-glow-red) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: 9px !important;
  border-radius: 2px !important;
}

/* ══════════════════════════════════════════════════════════
   6. SIDEBAR MENU
══════════════════════════════════════════════════════════ */
.bg-menu-theme,
.layout-menu {
  background-color: var(--cy-surface-1) !important;
  border-right: 1px solid var(--cy-border) !important;
}

/* Menu brand */
.app-brand {
  background-color: var(--cy-surface-1) !important;
  border-bottom: 1px solid var(--cy-border-bright) !important;
  padding: 1.2rem 1rem !important;
}

.app-brand-text {
  font-family: var(--cy-font-hud) !important;
  color: var(--cy-primary) !important;
  text-shadow: 0 0 14px var(--cy-glow) !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* Menu toggle button */
.app-brand .layout-menu-toggle {
  background-color: var(--cy-primary) !important;
  border: 4px solid var(--cy-surface-1) !important;
  box-shadow: 0 0 16px var(--cy-glow) !important;
}

  .app-brand .layout-menu-toggle i {
    color: #000 !important;
  }

/* Section headers */
.bg-menu-theme .menu-header {
  font-family: var(--cy-font-mono) !important;
  color: rgba(0,229,255,0.35) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding-top: 1.2rem !important;
}

  .bg-menu-theme .menu-header::before {
    background-color: var(--cy-border) !important;
  }

/* Menu items */
.bg-menu-theme .menu-link {
  color: var(--cy-text) !important;
  font-family: var(--cy-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  border-radius: 0 !important;
  transition: all var(--cy-transition) !important;
  position: relative !important;
}

  .bg-menu-theme .menu-link:hover {
    color: var(--cy-primary) !important;
    background-color: rgba(0,229,255,0.05) !important;
    text-shadow: 0 0 6px var(--cy-glow-soft) !important;
    padding-left: calc(var(--bs-offcanvas-padding-x, 1rem) + 4px) !important;
  }

  /* Menu icons */
  .bg-menu-theme .menu-link .menu-icon {
    color: var(--cy-text-muted) !important;
    transition: color var(--cy-transition), text-shadow var(--cy-transition) !important;
  }

  .bg-menu-theme .menu-link:hover .menu-icon,
  .bg-menu-theme .menu-item.active .menu-link .menu-icon {
    color: var(--cy-primary) !important;
    text-shadow: 0 0 8px var(--cy-glow) !important;
  }

/* Active item */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: rgba(0,229,255,0.07) !important;
  color: var(--cy-primary) !important;
  text-shadow: 0 0 6px var(--cy-glow-soft) !important;
  box-shadow: inset 3px 0 0 var(--cy-primary), inset 0 0 20px rgba(0,229,255,0.03) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active::before {
  background: var(--cy-primary) !important;
  box-shadow: 0 0 8px var(--cy-glow) !important;
  border-radius: 4px 0 0 4px !important;
}

/* Sub-menu */
.bg-menu-theme .menu-sub {
  background-color: rgba(0,229,255,0.02) !important;
  border-left: 1px solid var(--cy-border) !important;
  margin-left: 1.2rem !important;
}

  .bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
    background-color: var(--cy-border-bright) !important;
    border-radius: 0 !important;
  }

  .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
    background-color: var(--cy-primary) !important;
    border: 3px solid rgba(0,229,255,0.15) !important;
    box-shadow: 0 0 6px var(--cy-glow) !important;
  }

/* Open item highlight */
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open > .menu-link,
.bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover {
  background-color: rgba(0,229,255,0.04) !important;
}

/* Scrollbar */
.bg-menu-theme .ps__thumb-y,
.bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y {
  background: rgba(0,229,255,0.3) !important;
  width: 2px !important;
}

/* Dividers */
.bg-menu-theme hr,
.bg-menu-theme .menu-divider {
  border-color: var(--cy-border) !important;
}

/* ══════════════════════════════════════════════════════════
   7. FOOTER
══════════════════════════════════════════════════════════ */
.bg-footer-theme,
.layout-footer .footer {
  background-color: var(--cy-surface-2) !important;
  border-top: 1px solid var(--cy-border) !important;
  color: var(--cy-text-muted) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

  .bg-footer-theme .footer-link {
    color: var(--cy-primary) !important;
  }

    .bg-footer-theme .footer-link:hover {
      text-shadow: 0 0 6px var(--cy-glow) !important;
    }

/* ══════════════════════════════════════════════════════════
   8. CARDS
══════════════════════════════════════════════════════════ */
.card {
  background-color: var(--cy-surface-2) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,229,255,0.05) !important;
  position: relative;
  transition: border-color var(--cy-transition), box-shadow var(--cy-transition) !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

  .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cy-primary), transparent);
    opacity: 0.4;
  }

  .card:hover {
    border-color: var(--cy-border-bright) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 20px rgba(0,229,255,0.06), inset 0 1px 0 rgba(0,229,255,0.1) !important;
  }

.card-header {
  background-color: var(--cy-surface-3) !important;
  border-bottom: 1px solid var(--cy-border) !important;
  font-family: var(--cy-font-hud) !important;
  color: var(--cy-text-white) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 1rem 1.25rem !important;
}

  .card-header::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: var(--cy-primary);
    margin-top: 6px;
    box-shadow: 0 0 8px var(--cy-glow);
  }

.card-body {
  background-color: transparent !important;
  color: var(--cy-text-bright) !important;
}

.card-footer {
  background-color: var(--cy-surface-3) !important;
  border-top: 1px solid var(--cy-border) !important;
}

.card-title {
  font-family: var(--cy-font-hud) !important;
  color: var(--cy-text-white) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Card border shadow variant */
.card.card-border-shadow-primary::after {
  border-bottom-color: var(--cy-border);
}

.card.card-border-shadow-primary:hover::after {
  border-bottom-color: var(--cy-primary);
  box-shadow: 0 4px 14px var(--cy-glow-soft);
}

/* ══════════════════════════════════════════════════════════
   9. TABLES
══════════════════════════════════════════════════════════ */
.table {
  color: var(--cy-text-bright) !important;
  border-color: var(--cy-border) !important;
  font-family: var(--cy-font-body) !important;
}

  .table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: var(--cy-border) !important;
    color: var(--cy-text-bright) !important;
  }

  .table thead tr {
    background-color: var(--cy-surface-3) !important;
    border-bottom: 1px solid var(--cy-border-bright) !important;
  }

  .table thead th {
    font-family: var(--cy-font-hud) !important;
    color: var(--cy-primary) !important;
    font-size: 9.5px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
  }

  .table tbody tr {
    border-bottom: 1px solid rgba(0,229,255,0.04) !important;
    transition: background var(--cy-transition) !important;
  }

    .table tbody tr:hover > * {
      background-color: rgba(0,229,255,0.04) !important;
      color: var(--cy-text-white) !important;
    }

  .table tbody td {
    border: none !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    color: var(--cy-text-bright) !important;
  }

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0,229,255,0.02) !important;
}

/* ══════════════════════════════════════════════════════════
   10. FORM CONTROLS
══════════════════════════════════════════════════════════ */
.form-control,
.form-select {
  background-color: var(--cy-surface-3) !important;
  border: 1px solid rgba(0,229,255,0.14) !important;
  border-radius: 0 !important;
  color: var(--cy-text-bright) !important;
  font-family: var(--cy-font-body) !important;
  font-size: 13px !important;
  transition: border-color var(--cy-transition), box-shadow var(--cy-transition) !important;
}

  .form-control::placeholder {
    color: rgba(122,154,170,0.4) !important;
  }

  .form-control:focus,
  .form-select:focus {
    background-color: var(--cy-surface-4) !important;
    border-color: var(--cy-primary) !important;
    color: var(--cy-text-white) !important;
    box-shadow: 0 0 0 3px rgba(0,229,255,0.12), 0 0 12px rgba(0,229,255,0.06) !important;
  }

.form-label {
  font-family: var(--cy-font-mono) !important;
  color: var(--cy-text) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.input-group-text {
  background-color: var(--cy-surface-3) !important;
  border: 1px solid rgba(0,229,255,0.14) !important;
  border-radius: 0 !important;
  color: var(--cy-text) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: 12px !important;
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
  border-color: var(--cy-primary) !important;
}

/* Checkbox & Radio */
.form-check-input {
  background-color: var(--cy-surface-3) !important;
  border-color: rgba(0,229,255,0.25) !important;
  border-radius: 0 !important;
  transition: all var(--cy-transition) !important;
}

  .form-check-input:checked {
    background-color: var(--cy-primary) !important;
    border-color: var(--cy-primary) !important;
    box-shadow: 0 0 8px var(--cy-glow) !important;
  }

.form-check-label {
  font-family: var(--cy-font-body) !important;
  color: var(--cy-text-bright) !important;
  font-size: 13px !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--cy-surface-3) !important;
  border: 1px solid rgba(0,229,255,0.14) !important;
  border-radius: 0 !important;
  color: var(--cy-text-bright) !important;
}

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--cy-text-bright) !important;
    font-family: var(--cy-font-body) !important;
    font-size: 13px !important;
    line-height: 36px !important;
  }

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--cy-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.12) !important;
}

.select2-dropdown {
  background-color: var(--cy-surface-3) !important;
  border: 1px solid var(--cy-border-bright) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(0,229,255,0.06) !important;
}

.select2-container--default .select2-results__option {
  color: var(--cy-text-bright) !important;
  font-family: var(--cy-font-body) !important;
}

  .select2-container--default .select2-results__option:hover,
  .select2-container--default .select2-results__option--highlighted {
    background-color: rgba(0,229,255,0.08) !important;
    color: var(--cy-primary) !important;
  }

  .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(0,229,255,0.1) !important;
    color: var(--cy-primary) !important;
  }

.select2-search--dropdown .select2-search__field {
  background-color: var(--cy-surface-4) !important;
  border: 1px solid var(--cy-border) !important;
  color: var(--cy-text-bright) !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   11. BUTTONS
══════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--cy-font-hud) !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: all var(--cy-transition) !important;
  position: relative;
  overflow: hidden;
}

  /* Scan sweep on hover */
  .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transition: left 0.4s ease;
    pointer-events: none;
  }

  .btn:hover::after {
    left: 200%;
  }

/* Primary */
.btn-primary {
  background-color: var(--cy-primary) !important;
  border-color: var(--cy-primary) !important;
  color: #000 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px var(--cy-glow), 0 2px 8px rgba(0,229,255,0.25) !important;
}

  .btn-primary:hover {
    background-color: var(--cy-primary-dark) !important;
    border-color: var(--cy-primary-dark) !important;
    box-shadow: 0 0 24px var(--cy-glow), 0 4px 16px rgba(0,229,255,0.4) !important;
    transform: translateY(-1px) !important;
  }

  .btn-primary:active {
    transform: translateY(0) !important;
  }

/* Secondary */
.btn-secondary {
  background-color: var(--cy-surface-4) !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text-bright) !important;
  box-shadow: inset 0 0 0 1px var(--cy-border) !important;
}

  .btn-secondary:hover {
    background-color: var(--cy-surface-5) !important;
    border-color: var(--cy-border-bright) !important;
    color: var(--cy-primary) !important;
  }

/* Outline primary */
.btn-outline-primary {
  border: 1px solid var(--cy-primary) !important;
  color: var(--cy-primary) !important;
  background: transparent !important;
  box-shadow: inset 0 0 10px rgba(0,229,255,0.04) !important;
}

  .btn-outline-primary:hover {
    background-color: var(--cy-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--cy-glow) !important;
    transform: translateY(-1px) !important;
  }

/* Label */
.btn-label-primary {
  background: rgba(0,229,255,0.07) !important;
  color: var(--cy-primary) !important;
  border: 1px solid var(--cy-border) !important;
}

  .btn-label-primary:hover {
    background: var(--cy-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 16px var(--cy-glow) !important;
  }

/* Danger */
.btn-danger {
  background-color: var(--cy-red) !important;
  border-color: var(--cy-red) !important;
  color: #fff !important;
  box-shadow: 0 0 12px var(--cy-glow-red) !important;
}

  .btn-danger:hover {
    box-shadow: 0 0 20px var(--cy-glow-red) !important;
    transform: translateY(-1px) !important;
  }

/* Success */
.btn-success {
  background-color: var(--cy-green) !important;
  border-color: var(--cy-green) !important;
  color: #000 !important;
  box-shadow: 0 0 12px rgba(0,230,118,0.4) !important;
}

/* Warning */
.btn-warning {
  background-color: var(--cy-amber) !important;
  border-color: var(--cy-amber) !important;
  color: #000 !important;
  box-shadow: 0 0 12px var(--cy-glow-amber) !important;
}

/* Close btn */
.btn-close {
  filter: invert(1) opacity(0.4) !important;
}

  .btn-close:hover {
    filter: invert(1) opacity(0.8) !important;
  }

/* ══════════════════════════════════════════════════════════
   12. BADGES
══════════════════════════════════════════════════════════ */
.badge {
  font-family: var(--cy-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  border-radius: 2px !important;
  padding: 3px 7px !important;
}

  .badge.bg-primary,
  .bg-label-primary {
    background-color: rgba(0,229,255,0.12) !important;
    color: var(--cy-primary) !important;
    border: 1px solid rgba(0,229,255,0.25) !important;
  }

  .badge.bg-success,
  .bg-label-success {
    background-color: rgba(0,230,118,0.1) !important;
    color: var(--cy-green) !important;
    border: 1px solid rgba(0,230,118,0.2) !important;
  }

  .badge.bg-danger,
  .bg-label-danger {
    background-color: rgba(255,23,68,0.1) !important;
    color: var(--cy-red) !important;
    border: 1px solid rgba(255,23,68,0.2) !important;
  }

  .badge.bg-warning,
  .bg-label-warning {
    background-color: rgba(255,171,0,0.1) !important;
    color: var(--cy-amber) !important;
    border: 1px solid rgba(255,171,0,0.2) !important;
  }

  .badge.bg-secondary {
    background-color: var(--cy-surface-4) !important;
    color: var(--cy-text) !important;
    border: 1px solid var(--cy-border) !important;
  }

/* ══════════════════════════════════════════════════════════
   13. MODALS
══════════════════════════════════════════════════════════ */
.modal-content {
  background-color: var(--cy-surface-2) !important;
  border: 1px solid var(--cy-border-bright) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px rgba(0,229,255,0.06), 0 20px 60px rgba(0,0,0,0.85), 0 0 40px rgba(0,229,255,0.08) !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.modal-header {
  background-color: var(--cy-surface-3) !important;
  border-bottom: 1px solid var(--cy-border) !important;
  padding: 1rem 1.25rem !important;
  position: relative;
}

  .modal-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--cy-primary), transparent 60%);
    opacity: 0.5;
  }

.modal-title {
  font-family: var(--cy-font-hud) !important;
  color: var(--cy-primary) !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 8px var(--cy-glow-soft) !important;
}

.modal-body {
  background-color: transparent !important;
  color: var(--cy-text-bright) !important;
  padding: 1.5rem !important;
}

.modal-footer {
  background-color: var(--cy-surface-3) !important;
  border-top: 1px solid var(--cy-border) !important;
}

.modal-backdrop.show {
  background-color: rgba(4,6,13,0.85) !important;
  backdrop-filter: blur(4px) !important;
}

/* ══════════════════════════════════════════════════════════
   14. DROPDOWNS
══════════════════════════════════════════════════════════ */
.dropdown-menu {
  background-color: var(--cy-surface-3) !important;
  border: 1px solid var(--cy-border-bright) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.75), 0 0 20px rgba(0,229,255,0.05) !important;
  padding: 4px !important;
}

.dropdown-item {
  color: var(--cy-text) !important;
  font-family: var(--cy-font-body) !important;
  font-size: 13px !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  transition: all var(--cy-transition) !important;
}

  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: rgba(0,229,255,0.07) !important;
    color: var(--cy-primary) !important;
    text-shadow: 0 0 4px var(--cy-glow-soft) !important;
  }

  .dropdown-item.active,
  .dropdown-item:not(.disabled):active {
    background-color: rgba(0,229,255,0.1) !important;
    color: var(--cy-primary) !important;
  }

.dropdown-divider {
  border-color: var(--cy-border) !important;
  margin: 3px 0 !important;
}

.dropdown-header {
  font-family: var(--cy-font-mono) !important;
  color: rgba(0,229,255,0.35) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 8px 14px 4px !important;
}

/* ══════════════════════════════════════════════════════════
   15. PAGINATION
══════════════════════════════════════════════════════════ */
.page-link {
  background-color: var(--cy-surface-3) !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: 12px !important;
  border-radius: 0 !important;
  transition: all var(--cy-transition) !important;
}

  .page-link:hover {
    background-color: rgba(0,229,255,0.08) !important;
    color: var(--cy-primary) !important;
    border-color: var(--cy-border-bright) !important;
  }

.page-item.active .page-link {
  background-color: var(--cy-primary) !important;
  border-color: var(--cy-primary) !important;
  color: #000 !important;
  box-shadow: 0 0 12px var(--cy-glow) !important;
}

.page-item.disabled .page-link {
  background-color: var(--cy-surface-2) !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════
   16. NAV TABS & PILLS
══════════════════════════════════════════════════════════ */
.nav-tabs {
  border-bottom-color: var(--cy-border) !important;
}

  .nav-tabs .nav-link {
    font-family: var(--cy-font-hud) !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--cy-text) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    transition: all var(--cy-transition) !important;
    position: relative;
  }

    .nav-tabs .nav-link:hover {
      color: var(--cy-primary) !important;
      text-shadow: 0 0 6px var(--cy-glow-soft) !important;
    }

    .nav-tabs .nav-link.active {
      color: var(--cy-primary) !important;
      background-color: transparent !important;
      box-shadow: 0 -2px 0 var(--cy-primary) inset !important;
      text-shadow: 0 0 8px var(--cy-glow-soft) !important;
    }

.nav-pills .nav-link {
  font-family: var(--cy-font-hud) !important;
  font-size: 10px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--cy-text) !important;
  border-radius: 0 !important;
  transition: all var(--cy-transition) !important;
}

  .nav-pills .nav-link:hover {
    color: var(--cy-primary) !important;
    background-color: rgba(0,229,255,0.05) !important;
  }

  .nav-pills .nav-link.active {
    background-color: var(--cy-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 12px var(--cy-glow) !important;
  }

/* ══════════════════════════════════════════════════════════
   17. ALERTS
══════════════════════════════════════════════════════════ */
.alert {
  border-radius: 0 !important;
  font-family: var(--cy-font-body) !important;
  border-left-width: 3px !important;
  border-top-width: 1px !important;
  border-right-width: 1px !important;
  border-bottom-width: 1px !important;
}

.alert-primary {
  background-color: rgba(0,229,255,0.06) !important;
  border-color: var(--cy-primary) !important;
  color: var(--cy-primary) !important;
}

.alert-success {
  background-color: rgba(0,230,118,0.06) !important;
  border-color: var(--cy-green) !important;
  color: var(--cy-green) !important;
}

.alert-danger {
  background-color: rgba(255,23,68,0.06) !important;
  border-color: var(--cy-red) !important;
  color: var(--cy-red) !important;
}

.alert-warning {
  background-color: rgba(255,171,0,0.06) !important;
  border-color: var(--cy-amber) !important;
  color: var(--cy-amber) !important;
}

.alert-info {
  background-color: rgba(0,229,255,0.04) !important;
  border-color: var(--cy-border-bright) !important;
  color: var(--cy-text-bright) !important;
}

/* ══════════════════════════════════════════════════════════
   18. LIST GROUPS
══════════════════════════════════════════════════════════ */
.list-group-item {
  background-color: var(--cy-surface-3) !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text-bright) !important;
  border-radius: 0 !important;
  font-family: var(--cy-font-body) !important;
  transition: background var(--cy-transition) !important;
}

  .list-group-item:hover {
    background-color: rgba(0,229,255,0.05) !important;
    color: var(--cy-text-white) !important;
  }

  .list-group-item.active {
    background-color: rgba(0,229,255,0.08) !important;
    border-color: var(--cy-primary) !important;
    color: var(--cy-primary) !important;
    box-shadow: inset 3px 0 0 var(--cy-primary) !important;
  }

/* ══════════════════════════════════════════════════════════
   19. PROGRESS BARS
══════════════════════════════════════════════════════════ */
.progress {
  background-color: var(--cy-surface-4) !important;
  border-radius: 0 !important;
  height: 4px !important;
  overflow: visible !important;
}

.progress-bar {
  background-color: var(--cy-primary) !important;
  box-shadow: 0 0 8px var(--cy-glow) !important;
  border-radius: 0 !important;
  position: relative;
}

  .progress-bar::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -2px;
    width: 3px;
    height: 8px;
    background: var(--cy-primary);
    box-shadow: 0 0 6px var(--cy-glow);
  }

  .progress-bar.bg-success {
    background-color: var(--cy-green) !important;
    box-shadow: 0 0 8px rgba(0,230,118,0.4) !important;
  }

  .progress-bar.bg-danger {
    background-color: var(--cy-red) !important;
    box-shadow: 0 0 8px var(--cy-glow-red) !important;
  }

  .progress-bar.bg-warning {
    background-color: var(--cy-amber) !important;
    box-shadow: 0 0 8px var(--cy-glow-amber) !important;
  }

/* ══════════════════════════════════════════════════════════
   20. SWEETALERT2
══════════════════════════════════════════════════════════ */
.swal2-popup {
  background: var(--cy-surface-2) !important;
  border: 1px solid var(--cy-border-bright) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 40px rgba(0,229,255,0.1), 0 20px 60px rgba(0,0,0,0.8) !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
  font-family: var(--cy-font-body) !important;
  color: var(--cy-text-bright) !important;
}

.swal2-title {
  font-family: var(--cy-font-hud) !important;
  color: var(--cy-text-white) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-size: 16px !important;
}

.swal2-html-container {
  color: var(--cy-text) !important;
  font-family: var(--cy-font-body) !important;
}

.swal2-confirm.swal2-styled {
  background-color: var(--cy-primary) !important;
  color: #000 !important;
  border-radius: 0 !important;
  font-family: var(--cy-font-hud) !important;
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 14px var(--cy-glow) !important;
}

.swal2-cancel.swal2-styled {
  background-color: var(--cy-surface-4) !important;
  color: var(--cy-text-bright) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: 0 !important;
  font-family: var(--cy-font-hud) !important;
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

.swal2-icon.swal2-success {
  border-color: var(--cy-green) !important;
  color: var(--cy-green) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--cy-red) !important;
  color: var(--cy-red) !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--cy-amber) !important;
  color: var(--cy-amber) !important;
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
  border-color: var(--cy-primary) !important;
  color: var(--cy-primary) !important;
}
/* Toast colored variant */
.colored-toast.swal2-icon-success {
  background: rgba(0,230,118,0.12) !important;
  border-left: 3px solid var(--cy-green) !important;
}

.colored-toast.swal2-icon-error {
  background: rgba(255,23,68,0.12) !important;
  border-left: 3px solid var(--cy-red) !important;
}

.colored-toast.swal2-icon-warning {
  background: rgba(255,171,0,0.12) !important;
  border-left: 3px solid var(--cy-amber) !important;
}

.colored-toast.swal2-icon-info {
  background: rgba(0,229,255,0.10) !important;
  border-left: 3px solid var(--cy-primary) !important;
}

.colored-toast {
  border-radius: 0 !important;
  font-family: var(--cy-font-body) !important;
}

.swal2-backdrop-show {
  background: rgba(4,6,13,0.85) !important;
  backdrop-filter: blur(4px) !important;
}

/* ══════════════════════════════════════════════════════════
   21. SCROLLBARS (Webkit)
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: var(--cy-surface-1);
}

::-webkit-scrollbar-thumb {
  background: rgba(0,229,255,0.25);
  border-radius: 0;
}

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,229,255,0.45);
  }

/* ══════════════════════════════════════════════════════════
   22. HUD UTILITY CLASSES
══════════════════════════════════════════════════════════ */

/* Neon text */
.text-neon-cyan {
  color: var(--cy-primary) !important;
  text-shadow: 0 0 10px var(--cy-glow), 0 0 20px rgba(0,229,255,0.3) !important;
}

.text-neon-amber {
  color: var(--cy-amber) !important;
  text-shadow: 0 0 10px var(--cy-glow-amber) !important;
}

.text-neon-red {
  color: var(--cy-red) !important;
  text-shadow: 0 0 10px var(--cy-glow-red) !important;
}

/* Glowing border */
.border-neon {
  border: 1px solid var(--cy-primary) !important;
  box-shadow: 0 0 10px rgba(0,229,255,0.2), inset 0 0 10px rgba(0,229,255,0.04) !important;
}

/* HUD label */
.hud-label {
  font-family: var(--cy-font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(0,229,255,0.45) !important;
}

/* Scan line divider */
.hud-divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--cy-primary), transparent) !important;
  opacity: 0.4 !important;
  margin: 1rem 0 !important;
}

/* Status dot */
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}

  .status-dot.active {
    background: var(--cy-green);
    box-shadow: 0 0 6px rgba(0,230,118,0.7);
    animation: pulse-green 2s infinite;
  }

  .status-dot.inactive {
    background: var(--cy-red);
    box-shadow: 0 0 6px rgba(255,23,68,0.5);
  }

  .status-dot.warning {
    background: var(--cy-amber);
    box-shadow: 0 0 6px var(--cy-glow-amber);
    animation: pulse-amber 2s infinite;
  }

@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 6px rgba(0,230,118,0.7);
  }

  50% {
    box-shadow: 0 0 14px rgba(0,230,118,1);
  }
}

@keyframes pulse-amber {
  0%, 100% {
    box-shadow: 0 0 6px var(--cy-glow-amber);
  }

  50% {
    box-shadow: 0 0 14px rgba(255,171,0,0.9);
  }
}

/* ══════════════════════════════════════════════════════════
   23. PAGE TITLE / BREADCRUMB
══════════════════════════════════════════════════════════ */
.content-header {
  padding: 1.5rem 1.5rem 0 !important;
}

  .content-header h4,
  .content-header .page-title {
    font-family: var(--cy-font-hud) !important;
    color: var(--cy-text-white) !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 10px rgba(0,229,255,0.2) !important;
  }

.breadcrumb {
  background-color: transparent !important;
  font-family: var(--cy-font-mono) !important;
  font-size: 11px !important;
}

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

  .breadcrumb-item.active {
    color: var(--cy-primary) !important;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    color: var(--cy-border-bright) !important;
    content: "›" !important;
  }

  .breadcrumb-item a {
    color: var(--cy-text) !important;
    text-decoration: none !important;
  }

    .breadcrumb-item a:hover {
      color: var(--cy-primary) !important;
    }

/* ══════════════════════════════════════════════════════════
   24. TOOLTIPS
══════════════════════════════════════════════════════════ */
.tooltip-inner {
  background-color: var(--cy-surface-3) !important;
  border: 1px solid var(--cy-border-bright) !important;
  color: var(--cy-text-white) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  border-radius: 0 !important;
  box-shadow: 0 0 14px rgba(0,229,255,0.15) !important;
}

.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--cy-border-bright) !important;
}

.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--cy-border-bright) !important;
}

.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--cy-border-bright) !important;
}

.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--cy-border-bright) !important;
}

/* ══════════════════════════════════════════════════════════
   25. POPOVERS
══════════════════════════════════════════════════════════ */
.popover {
  background-color: var(--cy-surface-3) !important;
  border: 1px solid var(--cy-border-bright) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 20px rgba(0,229,255,0.1), 0 8px 32px rgba(0,0,0,0.6) !important;
}

.popover-header {
  background-color: var(--cy-surface-4) !important;
  border-bottom: 1px solid var(--cy-border) !important;
  color: var(--cy-primary) !important;
  font-family: var(--cy-font-hud) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

.popover-body {
  color: var(--cy-text-bright) !important;
  font-family: var(--cy-font-body) !important;
}

/* ══════════════════════════════════════════════════════════
   26. ACCORDION
══════════════════════════════════════════════════════════ */
.accordion-item {
  background-color: var(--cy-surface-2) !important;
  border-color: var(--cy-border) !important;
  border-radius: 0 !important;
}

.accordion-button {
  background-color: var(--cy-surface-3) !important;
  color: var(--cy-text-bright) !important;
  font-family: var(--cy-font-hud) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: all var(--cy-transition) !important;
}

  .accordion-button:not(.collapsed) {
    color: var(--cy-primary) !important;
    background-color: var(--cy-surface-4) !important;
    box-shadow: inset 0 -1px 0 var(--cy-border), 0 0 10px rgba(0,229,255,0.04) !important;
    text-shadow: 0 0 6px var(--cy-glow-soft) !important;
  }

  .accordion-button::after {
    filter: invert(1) opacity(0.4) !important;
  }

  .accordion-button:not(.collapsed)::after {
    filter: invert(0.7) sepia(1) saturate(5) hue-rotate(160deg) !important;
  }

.accordion-body {
  background-color: var(--cy-surface-2) !important;
  color: var(--cy-text-bright) !important;
  font-family: var(--cy-font-body) !important;
}

/* ══════════════════════════════════════════════════════════
   27. TIMELINE
══════════════════════════════════════════════════════════ */
.timeline .timeline-point-primary {
  background-color: var(--cy-primary) !important;
  outline: 3px solid rgba(0,229,255,0.15) !important;
  box-shadow: 0 0 10px var(--cy-glow) !important;
}

.timeline .timeline-indicator-primary i {
  color: var(--cy-primary) !important;
}

/* ══════════════════════════════════════════════════════════
   28. AVATAR
══════════════════════════════════════════════════════════ */
.avatar img {
  border: 1px solid var(--cy-border) !important;
  filter: saturate(0.8) brightness(0.95) !important;
  transition: filter var(--cy-transition), border-color var(--cy-transition) !important;
}

  .avatar img:hover {
    filter: saturate(1) brightness(1) !important;
    border-color: var(--cy-primary) !important;
  }

.avatar .avatar-initial {
  font-family: var(--cy-font-hud) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* ══════════════════════════════════════════════════════════
   29. MISCELLANEOUS
══════════════════════════════════════════════════════════ */

/* HR */
hr {
  border-color: var(--cy-border) !important;
  opacity: 0.6 !important;
}

/* Divider component */
.divider.divider-primary .divider-text:before,
.divider.divider-primary .divider-text:after {
  border-color: var(--cy-primary) !important;
}

.divider-text {
  color: var(--cy-text-muted) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}

/* Spinner */
.spinner-border,
.spinner-grow {
  color: var(--cy-primary) !important;
  filter: drop-shadow(0 0 4px var(--cy-glow)) !important;
}

/* Placeholder (skeleton) */
.placeholder {
  background-color: var(--cy-surface-4) !important;
  opacity: 0.5 !important;
}

/* Offset navbar */
.layout-navbar-fixed .layout-page:before {
  backdrop-filter: saturate(180%) blur(14px) !important;
  background: linear-gradient(180deg, rgba(4,6,13,0.92) 44%, rgba(4,6,13,0.6) 73%, transparent) !important;
  -webkit-mask: linear-gradient(#04060d, #04060d 18%, transparent 100%) !important;
  mask: linear-gradient(#04060d, #04060d 18%, transparent 100%) !important;
}

/* ══════════════════════════════════════════════════════════
   30. HUD CORNER DECORATION (on key containers)
══════════════════════════════════════════════════════════ */
.card,
.modal-content,
.swal2-popup {
  --corner-size: 10px;
}

  /* Top-left corner tick */
  .card::after {
    content: none !important; /* override default, use individual per card */
  }

  /* Glowing top line on cards */
  .card > .card-header {
    position: relative !important;
  }

    .card > .card-header::before {
      content: '' !important;
      position: absolute !important;
      top: 0;
      left: 0;
      right: 0 !important;
      height: 1px !important;
      background: linear-gradient(90deg, var(--cy-primary), rgba(0,229,255,0.3), transparent) !important;
      opacity: 0.6 !important;
    }

/* ══════════════════════════════════════════════════════════
   31. PRIMARY COLOR SYSTEM (full override)
══════════════════════════════════════════════════════════ */
.text-primary {
  color: var(--cy-primary) !important;
}

.bg-primary {
  background-color: var(--cy-primary) !important;
}

.btn-outline-secondary {
  color: var(--cy-text) !important;
  border-color: var(--cy-border) !important;
  background: transparent !important;
}

  .btn-outline-secondary:hover {
    background: var(--cy-surface-4) !important;
    border-color: var(--cy-border-bright) !important;
    color: var(--cy-text-white) !important;
  }

/* ══════════════════════════════════════════════════════════
   32. DATATABLE (if used)
══════════════════════════════════════════════════════════ */
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--cy-surface-3) !important;
  color: var(--cy-primary) !important;
  border-bottom: 1px solid var(--cy-border-bright) !important;
  font-family: var(--cy-font-hud) !important;
  font-size: 9.5px !important;
  letter-spacing: 1.5px !important;
}

table.dataTable tbody td {
  color: var(--cy-text-bright) !important;
  border-color: var(--cy-border) !important;
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: rgba(0,229,255,0.015) !important;
}

table.dataTable tbody tr:hover {
  background-color: rgba(0,229,255,0.04) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--cy-surface-3) !important;
  border: 1px solid var(--cy-border) !important;
  color: var(--cy-text-bright) !important;
  border-radius: 0 !important;
  font-family: var(--cy-font-mono) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--cy-text-muted) !important;
  font-family: var(--cy-font-mono) !important;
  font-size: 11px !important;
}

/* ══════════════════════════════════════════════════════════
   33. FLATPICKR / DATERANGEPICKER
══════════════════════════════════════════════════════════ */
.flatpickr-calendar,
.daterangepicker {
  background-color: var(--cy-surface-3) !important;
  border: 1px solid var(--cy-border-bright) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7) !important;
  color: var(--cy-text-bright) !important;
  font-family: var(--cy-font-body) !important;
}

.flatpickr-day {
  color: var(--cy-text-bright) !important;
  border-radius: 0 !important;
}

  .flatpickr-day:hover {
    background-color: rgba(0,229,255,0.08) !important;
    border-color: var(--cy-border) !important;
  }

  .flatpickr-day.today {
    border-color: var(--cy-primary) !important;
    color: var(--cy-primary) !important;
    font-weight: 700 !important;
  }

  .flatpickr-day.selected {
    background-color: var(--cy-primary) !important;
    border-color: var(--cy-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 10px var(--cy-glow) !important;
  }

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays {
  background-color: var(--cy-surface-4) !important;
  color: var(--cy-text) !important;
  font-family: var(--cy-font-hud) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}

.flatpickr-weekday {
  color: var(--cy-primary) !important;
  font-family: var(--cy-font-mono) !important;
}

.numInput,
.flatpickr-current-month .cur-month {
  color: var(--cy-text-white) !important;
  font-family: var(--cy-font-hud) !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--cy-text) !important;
  transition: fill var(--cy-transition) !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--cy-primary) !important;
  filter: drop-shadow(0 0 4px var(--cy-glow)) !important;
}

/* ══════════════════════════════════════════════════════════
   34. LOADING STATE ANIMATION
══════════════════════════════════════════════════════════ */
@keyframes hud-scan {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 0% 100%;
  }
}

/* Boot-up scan effect on page load */
@keyframes boot-fade {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.layout-wrapper {
  animation: boot-fade 0.4s ease forwards !important;
}

/* ══════════════════════════════════════════════════════════
   35. RESPONSIVE ADJUSTMENTS
══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .layout-menu {
    background-color: var(--cy-surface-1) !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.8), 2px 0 0 var(--cy-border) !important;
  }

  .app-brand .layout-menu-toggle {
    border: 4px solid var(--cy-surface-1) !important;
  }

  body::before {
    display: none;
  }
  /* Ẩn scanlines trên mobile */
}

@media (max-width: 575.98px) {
  .card {
    clip-path: none !important;
  }

  .modal-content {
    clip-path: none !important;
  }
}