/* ==========================================================================
   Pandora Breach Intelligence Platform
   HUD Admin v3.0 Design System
   Base: Bootstrap 5.3.3 (CDN)
   ========================================================================== */

/* ─── Google Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&display=swap');

/* ─── CSS Custom Properties ─────────────────────────────────────────────── */
:root {
  --bs-theme:                #3cd2a5;
  --bs-theme-rgb:            60, 210, 165;
  --bs-body-bg:              #1d2835;
  --bs-body-color:           #c5d0de;
  --bs-border-color:         rgba(255,255,255,0.12);
  --bs-component-bg:         rgba(255,255,255,0.05);
  --bs-heading-color:        #e8edf2;
  --bs-inverse:              #ffffff;
  --bs-inverse-rgb:          255,255,255;
  --bs-card-bg:              transparent;
  --bs-app-header-bg:        rgba(29,40,53,0.97);
  --bs-app-sidebar-bg:       #16202d;
  --bs-font-chakra:          'Chakra Petch', sans-serif;
  --bs-link-color:           var(--bs-theme);
  --bs-link-hover-color:     #4de8b8;
}

/* ─── Base / Reset ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--bs-font-chakra), sans-serif;
  background:  var(--bs-body-bg);
  color:       var(--bs-body-color);
  font-size:   14px;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color:           var(--bs-theme);
  text-decoration: none;
  transition:      color 0.15s;
}

a:hover {
  color: #4de8b8;
}

h1, h2, h3, h4, h5, h6 {
  color:       var(--bs-heading-color);
  font-weight: 600;
  font-family: var(--bs-font-chakra), sans-serif;
}

p {
  margin-bottom: 0.75rem;
}

hr {
  border-color: var(--bs-border-color);
  opacity: 1;
}

code {
  color:        var(--bs-theme);
  background:   rgba(60,210,165,0.1);
  padding:      2px 6px;
  border-radius: 4px;
  font-size:    12px;
}

pre {
  background:   rgba(255,255,255,0.04);
  border:       1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding:      16px;
  font-size:    13px;
  color:        var(--bs-body-color);
  overflow-x:   auto;
}

pre code {
  background: transparent;
  padding:    0;
  font-size:  inherit;
}

small, .small {
  font-size: 12px;
}

/* ─── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width:  6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background:    rgba(255,255,255,0.15);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(60,210,165,0.4);
}

/* ─── App Shell ─────────────────────────────────────────────────────────── */
.app {
  display:    flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── Header ────────────────────────────────────────────────────────────── */
#header,
.app-header {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  height:          52px;
  z-index:         1020;
  background:      var(--bs-app-header-bg);
  display:         flex;
  align-items:     center;
  padding:         0 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:   1px solid var(--bs-border-color);
}

/* ─── Brand ─────────────────────────────────────────────────────────────── */
.brand {
  display:     flex;
  align-items: center;
  width:        270px;
  gap:          10px;
  flex-shrink:  0;
}

.brand-logo {
  display:         flex;
  align-items:     center;
  text-decoration: none;
  gap:             10px;
}

.brand-img {
  width:         32px;
  height:        32px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    var(--bs-theme);
  border-radius: 6px;
  flex-shrink:   0;
}

.brand-img-text {
  font-size:   18px;
  font-weight: 700;
  color:       #ffffff;
  line-height: 1;
}

.brand-text {
  font-size:      14px;
  font-weight:    600;
  font-family:    var(--bs-font-chakra), sans-serif;
  letter-spacing: 2px;
  color:          var(--bs-heading-color);
  text-transform: uppercase;
}

/* ─── Menu Toggler ──────────────────────────────────────────────────────── */
.menu-toggler,
.desktop-toggler,
.mobile-toggler {
  width:          40px;
  height:         40px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            5px;
  cursor:         pointer;
  background:     transparent;
  border:         none;
  border-radius:  8px;
  padding:        0;
  flex-shrink:    0;
  transition:     background 0.15s;
}

.menu-toggler:hover,
.desktop-toggler:hover,
.mobile-toggler:hover {
  background: rgba(255,255,255,0.08);
}

.menu-toggler .bar,
.desktop-toggler .bar,
.mobile-toggler .bar {
  width:         22px;
  height:        2px;
  background:    var(--bs-body-color);
  border-radius: 2px;
  transition:    all 0.2s;
  display:       block;
}

/* ─── Header Nav Menu (right side) ─────────────────────────────────────── */
.app-header .menu,
#header .menu {
  display:     flex;
  align-items: center;
  margin-left: auto;
  gap:         4px;
  list-style:  none;
  margin-bottom: 0;
  padding-left: 0;
}

.app-header .menu-item,
#header .menu-item {
  position: relative;
}

.app-header .menu-link,
#header .menu-link {
  width:          40px;
  height:         40px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  border-radius:  8px;
  color:          var(--bs-body-color);
  text-decoration: none;
  transition:     background 0.15s, color 0.15s;
  position:       relative;
}

.app-header .menu-link:hover,
#header .menu-link:hover {
  background: rgba(255,255,255,0.08);
  color:      var(--bs-heading-color);
}

.app-header .menu-icon,
#header .menu-icon {
  font-size: 18px;
}

.menu-badge {
  width:         8px;
  height:        8px;
  position:      absolute;
  top:           8px;
  right:         8px;
  background:    var(--bs-theme);
  border-radius: 50%;
  display:       block;
}

/* ─── Sidebar ───────────────────────────────────────────────────────────── */
#sidebar,
.app-sidebar {
  position:   fixed;
  left:       0;
  top:        52px;
  bottom:     0;
  width:      270px;
  background: var(--bs-app-sidebar-bg);
  z-index:    1010;
  overflow:   hidden;
  border-right: 1px solid var(--bs-border-color);
  transition: width 0.25s ease, transform 0.3s ease;
}

.app-sidebar-content {
  height:        100%;
  overflow-y:    auto;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.app-sidebar-content::-webkit-scrollbar {
  width: 4px;
}

.app-sidebar-content::-webkit-scrollbar-thumb {
  background:    rgba(60,210,165,0.3);
  border-radius: 99px;
}

/* Sidebar Menu */
.app-sidebar .menu,
#sidebar .menu {
  padding:     10px 0;
  list-style:  none;
  margin:      0;
  padding-left: 0;
}

.app-sidebar .menu-header,
#sidebar .menu-header {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 1.5px;
  color:          rgba(255,255,255,0.3);
  padding:        16px 20px 6px;
  text-transform: uppercase;
  display:        block;
  transition:     opacity 0.2s;
}

.app-sidebar .menu-item,
#sidebar .menu-item {
  margin: 1px 10px;
}

.app-sidebar .menu-link,
#sidebar .menu-link {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        8px 14px;
  border-radius:  8px;
  color:          rgba(255,255,255,0.65);
  font-size:      13.5px;
  font-weight:    400;
  text-decoration: none;
  transition:     all 0.15s;
  cursor:         pointer;
  white-space:    nowrap;
  overflow:       hidden;
}

.app-sidebar .menu-icon,
#sidebar .menu-icon {
  width:       24px;
  height:      24px;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   16px;
  color:       rgba(255,255,255,0.45);
  flex-shrink: 0;
  transition:  color 0.15s;
}

.menu-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.2s;
}

/* Sidebar hover states */
.app-sidebar .menu-item:hover > .menu-link,
#sidebar .menu-item:hover > .menu-link {
  background: rgba(255,255,255,0.06);
  color:      rgba(255,255,255,0.9);
}

.app-sidebar .menu-item:hover > .menu-link .menu-icon,
#sidebar .menu-item:hover > .menu-link .menu-icon {
  color: var(--bs-theme);
}

/* Sidebar active states */
.app-sidebar .menu-item.active > .menu-link,
#sidebar .menu-item.active > .menu-link {
  background:  rgba(60,210,165,0.12);
  color:       var(--bs-theme);
  font-weight: 500;
}

.app-sidebar .menu-item.active > .menu-link .menu-icon,
#sidebar .menu-item.active > .menu-link .menu-icon {
  color: var(--bs-theme);
}

/* Caret for submenus */
.menu-caret {
  margin-left: auto;
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  transition:  opacity 0.2s;
}

.menu-caret .caret {
  display:         inline-block;
  width:           0;
  height:          0;
  border-width:    0 0 5px 5px;
  border-style:    solid;
  border-color:    transparent transparent rgba(255,255,255,0.4) transparent;
  transform:       rotate(0deg);
  transition:      transform 0.2s;
}

.menu-item.active > .menu-link .caret,
.menu-item.show > .menu-link .caret {
  transform: rotate(90deg);
}

/* Submenu */
.menu-submenu {
  display:     none;
  padding-left: 34px;
  list-style:  none;
  margin:      0;
  padding-bottom: 4px;
}

.menu-item.active > .menu-submenu,
.menu-item.show > .menu-submenu {
  display: block;
}

.menu-submenu .menu-item {
  margin: 1px 0;
}

.menu-submenu .menu-link {
  font-size:  13px;
  padding:    7px 12px;
  color:      rgba(255,255,255,0.5);
}

.menu-submenu .menu-item:hover > .menu-link,
.menu-submenu .menu-item.active > .menu-link {
  color: var(--bs-theme);
  background: transparent;
}

/* Mobile overlay */
.app-sidebar-mobile-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.6);
  z-index:    1029;
  display:    none;
  backdrop-filter: blur(2px);
}

.app-sidebar-mobile-overlay.mobile-open,
.app-sidebar-mobile-overlay.d-block {
  display: block;
}

/* ─── Content Area ──────────────────────────────────────────────────────── */
#content,
.app-content {
  margin-left:  270px;
  padding:      32px;
  min-height:   calc(100vh - 52px);
  padding-top:  calc(52px + 32px);
  transition:   margin-left 0.25s ease;
  flex:         1;
}

/* ─── Page Header ───────────────────────────────────────────────────────── */
.page-header {
  font-size:      22px;
  font-weight:    600;
  color:          var(--bs-heading-color);
  margin-bottom:  20px;
  letter-spacing: 0.5px;
  font-family:    var(--bs-font-chakra), sans-serif;
  display:        flex;
  align-items:    baseline;
  gap:            8px;
  flex-wrap:      wrap;
}

.page-header small {
  font-size:   14px;
  font-weight: 300;
  opacity:     0.5;
  margin-left: 8px;
}

/* ─── Card (HUD Arrow Corners) ──────────────────────────────────────────── */
.card {
  background:    rgba(255,255,255,0.03);
  border:        none;
  border-radius: 4px;
  position:      relative;
  color:         var(--bs-body-color);
}

.card::before {
  content:        '';
  position:       absolute;
  inset:          -1px;
  border-radius:  4px;
  pointer-events: none;
  border:         1px solid rgba(255,255,255,0.1);
  z-index:        0;
}

.card.border-theme::before {
  border-color: var(--bs-theme);
}

.card.border-danger::before {
  border-color: rgba(255,80,80,0.4);
}

.card.border-warning::before {
  border-color: rgba(255,159,12,0.4);
}

/* Arrow corner decoration */
.card-arrow {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        1;
}

.card-arrow-top-left,
.card-arrow-top-right,
.card-arrow-bottom-left,
.card-arrow-bottom-right {
  position: absolute;
  width:    12px;
  height:   12px;
}

.card-arrow-top-left {
  top:         -1px;
  left:        -1px;
  border-top:  2px solid var(--bs-theme);
  border-left: 2px solid var(--bs-theme);
}

.card-arrow-top-right {
  top:          -1px;
  right:        -1px;
  border-top:   2px solid var(--bs-theme);
  border-right: 2px solid var(--bs-theme);
}

.card-arrow-bottom-left {
  bottom:       -1px;
  left:         -1px;
  border-bottom: 2px solid var(--bs-theme);
  border-left:  2px solid var(--bs-theme);
}

.card-arrow-bottom-right {
  bottom:        -1px;
  right:         -1px;
  border-bottom: 2px solid var(--bs-theme);
  border-right:  2px solid var(--bs-theme);
}

/* Card sections */
.card-header {
  background:     rgba(255,255,255,0.04);
  border-bottom:  1px solid rgba(255,255,255,0.08);
  padding:        14px 20px;
  font-size:      13px;
  font-weight:    600;
  color:          var(--bs-heading-color);
  letter-spacing: 0.5px;
  display:        flex;
  align-items:    center;
  border-radius:  0;
  position:       relative;
  z-index:        2;
}

.card-header .card-title {
  margin-bottom: 0;
  font-size:     13px;
  font-weight:   600;
  color:         var(--bs-heading-color);
}

.card-header .card-header-actions {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         6px;
}

.card-body {
  padding:  20px;
  position: relative;
  z-index:  2;
}

.card-footer {
  background:    rgba(255,255,255,0.03);
  border-top:    1px solid rgba(255,255,255,0.08);
  padding:       14px 20px;
  position:      relative;
  z-index:       2;
}

/* Card size variants */
.card-sm .card-body { padding: 14px; }
.card-sm .card-header { padding: 10px 14px; }

/* ─── Forms ─────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  background-color: rgba(255,255,255,0.05);
  border:           1px solid rgba(255,255,255,0.15);
  color:            var(--bs-heading-color) !important;
  border-radius:    6px;
  font-size:        14px;
  font-family:      var(--bs-font-chakra), sans-serif;
  transition:       border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.form-control::placeholder {
  color:   rgba(255,255,255,0.25);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  background-color: rgba(255,255,255,0.08);
  border-color:     var(--bs-theme);
  box-shadow:       0 0 0 0.2rem rgba(var(--bs-theme-rgb), 0.15);
  color:            var(--bs-heading-color);
  outline:          none;
}

.form-control:disabled,
.form-select:disabled {
  background-color: rgba(255,255,255,0.03);
  color:            rgba(255,255,255,0.3);
  cursor:           not-allowed;
}

.form-control.form-control-lg {
  padding:       12px 16px;
  font-size:     15px;
  border-radius: 8px;
}

.form-control.form-control-sm,
.form-select.form-select-sm {
  padding:    6px 10px;
  font-size:  12px;
}

.form-label {
  font-size:     13px;
  font-weight:   500;
  color:         rgba(255,255,255,0.8);
  margin-bottom: 6px;
}

.form-text {
  font-size: 12px;
  color:     rgba(255,255,255,0.4);
}

.form-check-input {
  background-color: rgba(255,255,255,0.1);
  border-color:     rgba(255,255,255,0.2);
  cursor:           pointer;
}

.form-check-input:checked {
  background-color: var(--bs-theme);
  border-color:     var(--bs-theme);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-theme-rgb), 0.2);
  border-color: var(--bs-theme);
}

.form-check-label {
  font-size: 13px;
  color:     rgba(255,255,255,0.75);
  cursor:    pointer;
}

.form-select option {
  background: #1a2535;
  color:      var(--bs-body-color);
}

.input-group-text {
  background:    rgba(255,255,255,0.06);
  border-color:  rgba(255,255,255,0.15);
  color:         rgba(255,255,255,0.6);
  font-size:     14px;
  font-family:   var(--bs-font-chakra), sans-serif;
}

/* Validation states */
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color:     #ff5050;
  background-image: none;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(255,80,80,0.2);
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color:     var(--bs-theme);
  background-image: none;
}

.invalid-feedback {
  font-size: 12px;
  color:     #ff8080;
}

.valid-feedback {
  font-size: 12px;
  color:     var(--bs-theme);
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  border-radius:  6px;
  font-size:      13px;
  font-family:    var(--bs-font-chakra), sans-serif;
  letter-spacing: 0.3px;
  transition:     all 0.15s;
  font-weight:    500;
  cursor:         pointer;
}

.btn:focus {
  box-shadow: none;
  outline:    none;
}

.btn-theme {
  background: var(--bs-theme);
  color:      #0a1a14;
  border:     none;
  font-weight: 600;
}

.btn-theme:hover,
.btn-theme:active {
  background: #4de8b8;
  color:      #0a1a14;
}

.btn-theme:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-theme-rgb), 0.3);
}

.btn-outline-theme {
  border:     1px solid var(--bs-theme);
  color:      var(--bs-theme);
  background: transparent;
  font-weight: 500;
}

.btn-outline-theme:hover,
.btn-outline-theme:active {
  background: var(--bs-theme);
  color:      #0a1a14;
}

.btn-light {
  background: rgba(255,255,255,0.1);
  border:     1px solid rgba(255,255,255,0.15);
  color:      rgba(255,255,255,0.8);
}

.btn-light:hover {
  background: rgba(255,255,255,0.15);
  color:      white;
  border-color: rgba(255,255,255,0.25);
}

.btn-danger {
  background: rgba(255,80,80,0.8);
  border:     1px solid rgba(255,80,80,0.5);
  color:      #fff;
}

.btn-danger:hover {
  background: #ff5050;
  border-color: #ff5050;
  color:      #fff;
}

.btn-outline-danger {
  border:     1px solid rgba(255,80,80,0.5);
  color:      #ff8080;
  background: transparent;
}

.btn-outline-danger:hover {
  background: rgba(255,80,80,0.15);
  color:      #ff8080;
  border-color: rgba(255,80,80,0.7);
}

.btn-secondary {
  background: rgba(255,255,255,0.08);
  border:     1px solid rgba(255,255,255,0.12);
  color:      rgba(255,255,255,0.7);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  color:      white;
}

.btn-sm {
  font-size:  12px;
  padding:    5px 10px;
}

.btn-lg {
  font-size:  15px;
  padding:    12px 24px;
  border-radius: 8px;
}

/* ─── Table ─────────────────────────────────────────────────────────────── */
.table {
  color:         var(--bs-body-color);
  font-size:     13px;
  margin-bottom: 0;
}

.table thead th {
  color:          rgba(255,255,255,0.5);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom:  1px solid rgba(255,255,255,0.1);
  padding:        10px 12px;
  background:     transparent;
  white-space:    nowrap;
}

.table tbody td {
  border-bottom:   1px solid rgba(255,255,255,0.05);
  padding:         12px 12px;
  vertical-align:  middle;
  background:      transparent;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover td {
  background: rgba(255,255,255,0.03);
}

.table-card thead th:first-child,
.table-card tbody td:first-child {
  padding-left: 20px;
}

.table-card thead th:last-child,
.table-card tbody td:last-child {
  padding-right: 20px;
}

.table-responsive {
  border-radius: 4px;
}

/* ─── Badges ────────────────────────────────────────────────────────────── */
.badge {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.3px;
  border-radius:  4px;
  padding:        4px 8px;
  font-family:    var(--bs-font-chakra), sans-serif;
}

.bg-theme {
  background-color: var(--bs-theme) !important;
  color:            #0a1a14 !important;
}

.badge.bg-danger {
  background:   rgba(255,80,80,0.2) !important;
  color:        #ff8080 !important;
  border:       1px solid rgba(255,80,80,0.3);
}

.badge.bg-success {
  background:   rgba(60,210,165,0.15) !important;
  color:        var(--bs-theme) !important;
  border:       1px solid rgba(60,210,165,0.3);
}

.badge.bg-warning {
  background:   rgba(255,159,12,0.15) !important;
  color:        #ff9f0c !important;
  border:       1px solid rgba(255,159,12,0.3);
}

.badge.bg-secondary {
  background:   rgba(255,255,255,0.1) !important;
  color:        rgba(255,255,255,0.6) !important;
  border:       1px solid rgba(255,255,255,0.15);
}

.badge.bg-info {
  background:   rgba(48,190,255,0.15) !important;
  color:        #30beff !important;
  border:       1px solid rgba(48,190,255,0.3);
}

.badge.bg-primary {
  background:   rgba(99,102,241,0.2) !important;
  color:        #a5b4fc !important;
  border:       1px solid rgba(99,102,241,0.3);
}

.badge.bg-theme {
  background:   var(--bs-theme) !important;
  color:        #0a1a14 !important;
  border:       none;
}

/* ─── Alerts ────────────────────────────────────────────────────────────── */
.alert {
  border-radius: 8px;
  border:        none;
  font-size:     13px;
  position:      relative;
}

.alert-success {
  background: rgba(60,210,165,0.12);
  color:      var(--bs-theme);
  border:     1px solid rgba(60,210,165,0.25);
}

.alert-danger {
  background: rgba(255,80,80,0.1);
  color:      #ff8080;
  border:     1px solid rgba(255,80,80,0.25);
}

.alert-warning {
  background: rgba(255,159,12,0.1);
  color:      #ff9f0c;
  border:     1px solid rgba(255,159,12,0.25);
}

.alert-info {
  background: rgba(48,190,255,0.1);
  color:      #30beff;
  border:     1px solid rgba(48,190,255,0.25);
}

.alert-dismissible .btn-close {
  filter:  invert(1) opacity(0.5);
  padding: 0.75rem;
}

.alert-dismissible .btn-close:hover {
  filter: invert(1) opacity(0.9);
}

/* ─── Login Page ────────────────────────────────────────────────────────── */
.login {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bs-body-bg);
  position:        relative;
  overflow:        hidden;
}

.login::before {
  content: '';
  position:         absolute;
  inset:            0;
  background-image: linear-gradient(rgba(60,210,165,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(60,210,165,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation:       grid-scroll 20s linear infinite;
  pointer-events:  none;
}

@keyframes grid-scroll {
  from { background-position: 0 0; }
  to   { background-position: 40px 40px; }
}

.login-content {
  position:      relative;
  z-index:       1;
  width:         100%;
  max-width:     400px;
  padding:       48px 40px;
  background:    rgba(255,255,255,0.03);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow:    0 20px 60px rgba(0,0,0,0.5);
  margin:        20px;
}

.login-logo {
  text-align:    center;
  margin-bottom: 32px;
}

.login-logo .brand-icon {
  width:          56px;
  height:         56px;
  background:     rgba(60,210,165,0.15);
  border:         1px solid rgba(60,210,165,0.3);
  border-radius:  12px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  margin:         0 auto 12px;
  font-size:      24px;
  color:          var(--bs-theme);
}

.login-logo h4 {
  font-size:      20px;
  font-weight:    700;
  color:          var(--bs-heading-color);
  margin:         0 0 4px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.login-logo small {
  font-size: 12px;
  color:     rgba(255,255,255,0.4);
}

.login-divider {
  text-align:   center;
  margin:       24px 0;
  position:     relative;
  font-size:    11px;
  color:        rgba(255,255,255,0.3);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
  content:  '';
  position: absolute;
  top:      50%;
  width:    calc(50% - 30px);
  height:   1px;
  background: rgba(255,255,255,0.1);
}

.login-divider::before { left: 0; }
.login-divider::after  { right: 0; }

/* ─── Anti-Phishing Box ─────────────────────────────────────────────────── */
.anti-phishing-box {
  background:    rgba(60,210,165,0.08);
  border:        1px solid rgba(60,210,165,0.2);
  border-radius: 8px;
  padding:       12px 16px;
  font-size:     13px;
}

.anti-phishing-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          rgba(60,210,165,0.7);
  margin-bottom:  4px;
}

.anti-phishing-phrase {
  font-family:    monospace;
  font-size:      15px;
  font-weight:    600;
  color:          var(--bs-theme);
  letter-spacing: 1px;
}

/* ─── Status Indicators ─────────────────────────────────────────────────── */
.status-dot {
  width:       8px;
  height:      8px;
  border-radius: 50%;
  display:     inline-block;
  flex-shrink: 0;
}

.status-dot.verified {
  background: var(--bs-theme);
  box-shadow: 0 0 6px rgba(60,210,165,0.5);
}

.status-dot.unverified {
  background: rgba(255,159,12,0.6);
}

.status-dot.pending {
  background: rgba(255,255,255,0.3);
  animation:  pulse 1.5s ease-in-out infinite;
}

.status-dot.offline,
.status-dot.error {
  background: rgba(255,80,80,0.6);
}

@keyframes pulse {
  0%,  100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ─── Breach Result Cards ───────────────────────────────────────────────── */
.breach-card {
  background:    rgba(255,255,255,0.02);
  border:        1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding:       16px;
  margin-bottom: 8px;
  transition:    border-color 0.15s;
}

.breach-card:hover {
  border-color: rgba(60,210,165,0.3);
}

.breach-card:last-child {
  margin-bottom: 0;
}

.breach-card .tool-badge {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1px;
  padding:        3px 8px;
  border-radius:  3px;
  text-transform: uppercase;
  font-family:    var(--bs-font-chakra), sans-serif;
}

/* Tool source badges */
.tool-lc { background: rgba(60,210,165,0.15); color: var(--bs-theme); }
.tool-sb { background: rgba(48,190,255,0.15);  color: #30beff; }
.tool-dh { background: rgba(147,112,219,0.15); color: #9370db; }
.tool-ol { background: rgba(255,159,12,0.15);  color: #ff9f0c; }
.tool-wi { background: rgba(255,80,80,0.15);   color: #ff8080; }
.tool-hb { background: rgba(255,100,130,0.15); color: #ff6482; }
.tool-de { background: rgba(100,180,255,0.15); color: #64b4ff; }

.breach-field {
  font-size: 12px;
  color:     rgba(255,255,255,0.5);
  margin-bottom: 2px;
}

.breach-value {
  font-size:    13px;
  color:        rgba(255,255,255,0.85);
  font-family:  monospace;
  word-break:   break-all;
}

.breach-meta {
  font-size: 12px;
  color:     rgba(255,255,255,0.35);
}

.breach-source-name {
  font-size:   13px;
  font-weight: 600;
  color:       var(--bs-heading-color);
}

.breach-source-date {
  font-size: 11px;
  color:     rgba(255,255,255,0.35);
}

.breach-password {
  font-family:  monospace;
  font-size:    13px;
  color:        #ff9f0c;
  word-break:   break-all;
}

.breach-password-hashed {
  font-family: monospace;
  font-size:   12px;
  color:       rgba(255,255,255,0.4);
  word-break:  break-all;
}

/* ─── Stat Cards ────────────────────────────────────────────────────────── */
.stat-card .stat-icon {
  width:          40px;
  height:         40px;
  border-radius:  8px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      18px;
  flex-shrink:    0;
}

.stat-card .stat-value {
  font-size:   28px;
  font-weight: 700;
  color:       var(--bs-heading-color);
  line-height: 1;
  font-family: var(--bs-font-chakra), sans-serif;
}

.stat-card .stat-label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.4);
  margin-top:     4px;
}

.stat-card .stat-change {
  font-size:  12px;
  color:      rgba(255,255,255,0.4);
  margin-top: 4px;
}

.stat-card .stat-change.up   { color: var(--bs-theme); }
.stat-card .stat-change.down { color: #ff8080; }

/* ─── Progress Bar ──────────────────────────────────────────────────────── */
.progress {
  background:    rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow:      hidden;
}

.progress-bar.bg-theme {
  background:    var(--bs-theme) !important;
  border-radius: 99px;
}

.progress-bar.bg-danger {
  background: #ff5050 !important;
}

.progress-bar.bg-warning {
  background: #ff9f0c !important;
}

.h-5px  { height: 5px  !important; }
.h-8px  { height: 8px  !important; }
.h-3px  { height: 3px  !important; }

/* ─── Pagination ────────────────────────────────────────────────────────── */
.pagination {
  gap: 4px;
}

.page-link {
  background:    rgba(255,255,255,0.05);
  border-color:  rgba(255,255,255,0.1);
  color:         rgba(255,255,255,0.6);
  font-size:     13px;
  border-radius: 6px !important;
  transition:    all 0.15s;
  font-family:   var(--bs-font-chakra), sans-serif;
}

.page-link:hover {
  background:   rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color:        white;
}

.page-item.active .page-link {
  background:   var(--bs-theme);
  border-color: var(--bs-theme);
  color:        #0a1a14;
  font-weight:  600;
}

.page-item.disabled .page-link {
  opacity:          0.3;
  pointer-events:   none;
}

/* ─── Dropdown ──────────────────────────────────────────────────────────── */
.dropdown-menu {
  background:    #1a2535;
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow:    0 8px 32px rgba(0,0,0,0.4);
  padding:       6px;
  min-width:     160px;
}

.dropdown-item {
  color:         rgba(255,255,255,0.75);
  font-size:     13px;
  border-radius: 6px;
  padding:       8px 12px;
  transition:    all 0.1s;
  font-family:   var(--bs-font-chakra), sans-serif;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(255,255,255,0.08);
  color:      white;
}

.dropdown-item.active,
.dropdown-item:active {
  background: rgba(60,210,165,0.15);
  color:      var(--bs-theme);
}

.dropdown-item.text-danger {
  color: #ff8080 !important;
}

.dropdown-item.text-danger:hover {
  background: rgba(255,80,80,0.1);
  color:      #ff8080 !important;
}

.dropdown-divider {
  border-color: rgba(255,255,255,0.08);
  margin:       4px 0;
}

.dropdown-header {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.3);
  padding:        6px 12px;
  font-family:    var(--bs-font-chakra), sans-serif;
}

/* ─── Tab Nav ───────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  gap:           4px;
}

.nav-tabs .nav-link {
  color:              rgba(255,255,255,0.5);
  border:             none;
  border-bottom:      2px solid transparent;
  border-radius:      0;
  padding:            10px 16px;
  font-size:          13px;
  font-weight:        500;
  transition:         all 0.15s;
  font-family:        var(--bs-font-chakra), sans-serif;
  background:         transparent;
}

.nav-tabs .nav-link:hover {
  color:              rgba(255,255,255,0.8);
  border-bottom-color: rgba(255,255,255,0.2);
  background:         transparent;
}

.nav-tabs .nav-link.active {
  color:              var(--bs-theme);
  border-bottom-color: var(--bs-theme);
  background:         transparent;
}

/* Nav pills */
.nav-pills .nav-link {
  color:         rgba(255,255,255,0.6);
  font-size:     13px;
  border-radius: 6px;
  transition:    all 0.15s;
  font-family:   var(--bs-font-chakra), sans-serif;
}

.nav-pills .nav-link:hover {
  background: rgba(255,255,255,0.06);
  color:      white;
}

.nav-pills .nav-link.active {
  background: rgba(60,210,165,0.15);
  color:      var(--bs-theme);
}

/* ─── Modal ─────────────────────────────────────────────────────────────── */
.modal-content {
  background:    #192232;
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
}

.modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding:       20px 24px;
}

.modal-title {
  font-size:   15px;
  font-weight: 600;
  color:       var(--bs-heading-color);
  font-family: var(--bs-font-chakra), sans-serif;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding:    16px 24px;
}

.btn-close {
  filter: invert(1) opacity(0.5);
}

.btn-close:hover {
  filter: invert(1) opacity(0.9);
}

.modal-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-backdrop.show {
  opacity: 0.6;
}

/* ─── OTP Input ─────────────────────────────────────────────────────────── */
.otp-input {
  text-align:      center;
  font-size:       20px;
  font-weight:     600;
  letter-spacing:  8px;
  font-family:     monospace;
  text-transform:  uppercase;
}

/* ─── Tooltips ──────────────────────────────────────────────────────────── */
.tooltip-inner {
  background:    #1a2535;
  border:        1px solid rgba(255,255,255,0.15);
  color:         var(--bs-body-color);
  font-size:     12px;
  border-radius: 6px;
  padding:       6px 10px;
  font-family:   var(--bs-font-chakra), sans-serif;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before   { border-top-color: rgba(255,255,255,0.15); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: rgba(255,255,255,0.15); }
.tooltip.bs-tooltip-start .tooltip-arrow::before  { border-left-color: rgba(255,255,255,0.15); }
.tooltip.bs-tooltip-end .tooltip-arrow::before    { border-right-color: rgba(255,255,255,0.15); }

/* ─── Popovers ──────────────────────────────────────────────────────────── */
.popover {
  background:    #1a2535;
  border:        1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
}

.popover-header {
  background:    rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color:         var(--bs-heading-color);
  font-size:     13px;
  font-weight:   600;
}

.popover-body {
  color:     var(--bs-body-color);
  font-size: 13px;
}

/* ─── Pricing Cards ─────────────────────────────────────────────────────── */
.pricing-card {
  text-align: center;
}

.pricing-card .price {
  font-size:   42px;
  font-weight: 700;
  color:       var(--bs-heading-color);
  font-family: var(--bs-font-chakra), sans-serif;
  line-height: 1;
}

.pricing-card .price sup {
  font-size:      20px;
  vertical-align: super;
}

.pricing-card .price-period {
  font-size: 13px;
  color:     rgba(255,255,255,0.4);
}

.pricing-card.featured {
  border-color: var(--bs-theme) !important;
}

.pricing-card.featured::before {
  border-color: var(--bs-theme);
}

.pricing-feature {
  font-size:     13px;
  padding:       8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display:       flex;
  align-items:   center;
  gap:           8px;
  text-align:    left;
}

.pricing-feature:last-child {
  border-bottom: none;
}

.pricing-feature .bi-check-circle-fill {
  color:       var(--bs-theme);
  flex-shrink: 0;
}

.pricing-feature .bi-x-circle-fill {
  color:       rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ─── Spinner / Loading ─────────────────────────────────────────────────── */
.spinner-border {
  border-color:       rgba(255,255,255,0.2);
  border-right-color: var(--bs-theme);
}

.spinner-border.text-theme {
  border-color:       rgba(60,210,165,0.2);
  border-right-color: var(--bs-theme);
}

/* ─── Toast ─────────────────────────────────────────────────────────────── */
.toast {
  background:    rgba(22,32,45,0.97) !important;
  border:        1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color:         var(--bs-body-color);
  font-size:     13px;
  font-family:   var(--bs-font-chakra), sans-serif;
}

.toast-header {
  background:   rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color:        var(--bs-heading-color);
  font-size:    13px;
}

.toast-body {
  font-size: 13px;
  color:     var(--bs-body-color);
}

/* ─── Breadcrumb ────────────────────────────────────────────────────────── */
.breadcrumb {
  margin-bottom: 0;
  font-size:     12px;
}

.breadcrumb-item {
  color: rgba(255,255,255,0.4);
}

.breadcrumb-item.active {
  color: rgba(255,255,255,0.7);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,0.25);
}

.breadcrumb-item a {
  color: rgba(255,255,255,0.5);
}

.breadcrumb-item a:hover {
  color: var(--bs-theme);
}

/* ─── List Group ────────────────────────────────────────────────────────── */
.list-group-item {
  background:   transparent;
  border-color: rgba(255,255,255,0.08);
  color:        var(--bs-body-color);
  font-size:    13px;
  transition:   background 0.1s;
}

.list-group-item:hover {
  background: rgba(255,255,255,0.03);
}

.list-group-item.active {
  background:   rgba(60,210,165,0.1);
  border-color: rgba(60,210,165,0.2);
  color:        var(--bs-theme);
}

/* ─── Accordion ─────────────────────────────────────────────────────────── */
.accordion-item {
  background:    transparent;
  border:        1px solid rgba(255,255,255,0.08);
  border-radius: 6px !important;
  margin-bottom: 6px;
  overflow:      hidden;
}

.accordion-button {
  background:  rgba(255,255,255,0.03);
  color:       var(--bs-body-color);
  font-size:   13px;
  font-weight: 500;
  font-family: var(--bs-font-chakra), sans-serif;
}

.accordion-button:not(.collapsed) {
  background:  rgba(60,210,165,0.08);
  color:       var(--bs-theme);
  box-shadow:  none;
}

.accordion-button::after {
  filter: invert(1) opacity(0.5);
}

.accordion-button:not(.collapsed)::after {
  filter: invert(0.8) sepia(1) saturate(3) hue-rotate(120deg);
}

.accordion-body {
  background: rgba(255,255,255,0.02);
  font-size:  13px;
  padding:    16px 20px;
}

/* ─── Offcanvas ─────────────────────────────────────────────────────────── */
.offcanvas {
  background: #192232;
  border:     1px solid rgba(255,255,255,0.1);
}

.offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.offcanvas-title {
  font-size:   15px;
  font-weight: 600;
  color:       var(--bs-heading-color);
  font-family: var(--bs-font-chakra), sans-serif;
}

/* ─── Domain / Monitor Items ────────────────────────────────────────────── */
.monitor-item {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.monitor-item:last-child {
  border-bottom: none;
}

.monitor-item-icon {
  width:         36px;
  height:        36px;
  border-radius: 8px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     16px;
  flex-shrink:   0;
}

.monitor-item-label {
  font-size:   13px;
  font-weight: 500;
  color:       var(--bs-heading-color);
}

.monitor-item-meta {
  font-size: 12px;
  color:     rgba(255,255,255,0.4);
}

/* ─── Scan / Query Results ──────────────────────────────────────────────── */
.results-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
  margin-bottom: 16px;
}

.results-count {
  font-size:      22px;
  font-weight:    700;
  color:          var(--bs-heading-color);
  font-family:    var(--bs-font-chakra), sans-serif;
}

.results-count small {
  font-size:   13px;
  font-weight: 300;
  color:       rgba(255,255,255,0.4);
  margin-left: 4px;
}

.results-filter {
  margin-left:    auto;
}

/* ─── Empty State ───────────────────────────────────────────────────────── */
.empty-state {
  text-align:    center;
  padding:       48px 24px;
  color:         rgba(255,255,255,0.3);
}

.empty-state-icon {
  font-size:     48px;
  margin-bottom: 16px;
  display:       block;
  opacity:       0.4;
}

.empty-state h6 {
  font-size:     15px;
  color:         rgba(255,255,255,0.5);
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 13px;
  color:     rgba(255,255,255,0.3);
}

/* ─── Notification / Activity Feed ──────────────────────────────────────── */
.activity-item {
  display:       flex;
  gap:           12px;
  padding:       12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     14px;
  flex-shrink:   0;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size:   13px;
  color:       var(--bs-body-color);
  line-height: 1.4;
}

.activity-time {
  font-size:  11px;
  color:      rgba(255,255,255,0.3);
  margin-top: 2px;
}

/* ─── Flash Message Container ───────────────────────────────────────────── */
.flash-container {
  position:       fixed;
  top:            calc(52px + 16px);
  right:          16px;
  z-index:        1050;
  max-width:      380px;
  width:          100%;
}

.flash-container .alert {
  box-shadow:    0 4px 20px rgba(0,0,0,0.3);
  margin-bottom: 8px;
}

/* ─── Scroll To Top Button ──────────────────────────────────────────────── */
[data-toggle="scroll-to-top"] {
  position:       fixed;
  bottom:         24px;
  right:          24px;
  width:          40px;
  height:         40px;
  background:     rgba(60,210,165,0.15);
  border:         1px solid rgba(60,210,165,0.3);
  border-radius:  50%;
  display:        flex;
  align-items:    center;
  justify-content: center;
  color:          var(--bs-theme);
  font-size:      16px;
  cursor:         pointer;
  transition:     all 0.2s;
  opacity:        0;
  pointer-events: none;
  z-index:        999;
  text-decoration: none;
}

[data-toggle="scroll-to-top"].show {
  opacity:        1;
  pointer-events: auto;
}

[data-toggle="scroll-to-top"]:hover {
  background: rgba(60,210,165,0.25);
  color:      var(--bs-theme);
}

/* ─── Misc Utility Classes ──────────────────────────────────────────────── */
.text-theme    { color: var(--bs-theme) !important; }
.text-inverse  { color: var(--bs-inverse) !important; }
.text-muted    { color: rgba(255,255,255,0.4) !important; }
.text-danger   { color: #ff8080 !important; }
.text-warning  { color: #ff9f0c !important; }
.text-success  { color: var(--bs-theme) !important; }
.text-info     { color: #30beff !important; }

.text-opacity-25 { opacity: 0.25; }
.text-opacity-50 { opacity: 0.5; }
.text-opacity-75 { opacity: 0.75; }

.flex-1 { flex: 1 !important; }

.w-100px  { width: 100px; }
.w-150px  { width: 150px; }
.w-200px  { width: 200px; }
.min-w-0  { min-width: 0; }

.bg-theme   { background-color: var(--bs-theme) !important; }
/* Use RGB + opacity variable so bg-opacity-* utilities work correctly */
.bg-inverse {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-inverse-rgb), var(--bs-bg-opacity)) !important;
}

.bg-opacity-5  { --bs-bg-opacity: 0.05; }
.bg-opacity-10 { --bs-bg-opacity: 0.1;  }
.bg-opacity-15 { --bs-bg-opacity: 0.15; }

.fs-6px  { font-size: 6px  !important; }
.fs-10px { font-size: 10px !important; }
.fs-11px { font-size: 11px !important; }
.fs-12px { font-size: 12px !important; }
.fs-13px { font-size: 13px !important; }
.fs-16px { font-size: 16px !important; }
.fs-20px { font-size: 20px !important; }
.fs-24px { font-size: 24px !important; }
.fs-28px { font-size: 28px !important; }

.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }

.mono { font-family: monospace; }

.border-theme  { border-color: var(--bs-theme) !important; }
.border-danger { border-color: rgba(255,80,80,0.4) !important; }

.rounded-8 { border-radius: 8px !important; }
.rounded-6 { border-radius: 6px !important; }
.rounded-4 { border-radius: 4px !important; }

.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }

.cursor-pointer { cursor: pointer; }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

.word-break { word-break: break-all; }

/* ─── Sidebar Collapsed State ───────────────────────────────────────────── */
.app-sidebar-collapsed #sidebar.app-sidebar {
  width: 60px;
}

.app-sidebar-collapsed #content.app-content {
  margin-left: 60px;
}

.app-sidebar-collapsed .brand-text,
.app-sidebar-collapsed .menu-text,
.app-sidebar-collapsed .menu-caret {
  display: none;
}

/* Replace menu-header text labels with a thin divider line when collapsed */
.app-sidebar-collapsed .menu-header {
  font-size: 0;
  letter-spacing: 0;
  padding: 0;
  margin: 6px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  height: 1px;
}

.app-sidebar-collapsed .app-sidebar .menu-link,
.app-sidebar-collapsed #sidebar .menu-link {
  justify-content: center;
  padding:         10px;
}

.app-sidebar-collapsed .app-sidebar .menu-icon,
.app-sidebar-collapsed #sidebar .menu-icon {
  width: auto;
}

.app-sidebar-collapsed .menu-submenu {
  display: none !important;
}

.app-sidebar-collapsed .brand {
  width:   60px;
  overflow: hidden;
  justify-content: center;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  #sidebar.app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  #sidebar.app-sidebar.mobile-open {
    transform: translateX(0);
  }

  #content.app-content {
    margin-left: 0 !important;
    padding:     72px 16px 16px;
  }

  .brand {
    display: none;
  }

  .mobile-toggler {
    display: flex !important;
  }

  .desktop-toggler {
    display: none !important;
  }

  .flash-container {
    left:      16px;
    right:     16px;
    max-width: none;
  }

  .page-header {
    font-size: 18px;
  }

  .login-content {
    padding: 32px 24px;
  }

  .stat-card .stat-value {
    font-size: 22px;
  }
}

@media (min-width: 768px) {
  .mobile-toggler {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .btn-group-mobile > .btn {
    font-size: 12px;
    padding:   6px 10px;
  }

  .breach-card {
    padding: 12px;
  }

  .results-filter {
    margin-left: 0;
    width:       100%;
  }
}

/* ─── Print styles ──────────────────────────────────────────────────────── */
@media print {
  #header, #sidebar { display: none !important; }
  #content.app-content { margin-left: 0 !important; padding: 0 !important; }
  .card::before, .card-arrow { display: none !important; }
  body { background: white !important; color: black !important; }
}

/* ─── Animations ────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.fade-in       { animation: fadeIn 0.3s ease both; }
.slide-in-right { animation: slideInRight 0.3s ease both; }

.skeleton {
  background:           linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
  background-size:      200% 100%;
  animation:            shimmer 1.5s infinite;
  border-radius:        4px;
}

/* ─── Copy button inline ────────────────────────────────────────────────── */
.copy-btn {
  background:    transparent;
  border:        1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color:         rgba(255,255,255,0.5);
  cursor:        pointer;
  font-size:     11px;
  padding:       2px 8px;
  transition:    all 0.15s;
  white-space:   nowrap;
}

.copy-btn:hover {
  border-color: var(--bs-theme);
  color:        var(--bs-theme);
}

/* ─── TLD / IP pill ──────────────────────────────────────────────────────── */
.ip-pill, .tld-pill {
  display:        inline-block;
  font-size:      11px;
  font-family:    monospace;
  padding:        2px 8px;
  border-radius:  99px;
  background:     rgba(255,255,255,0.06);
  border:         1px solid rgba(255,255,255,0.1);
  color:          rgba(255,255,255,0.7);
}

/* ─── Highlight match ────────────────────────────────────────────────────── */
mark, .highlight {
  background:    rgba(60,210,165,0.2);
  color:         var(--bs-theme);
  border-radius: 2px;
  padding:       0 2px;
}

/* ─── Chart wrappers ─────────────────────────────────────────────────────── */
.chart-container {
  position: relative;
  width:    100%;
}

/* ─── Divider with label ─────────────────────────────────────────────────── */
.divider-text {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   11px;
  color:       rgba(255,255,255,0.3);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin:      16px 0;
}

.divider-text::before,
.divider-text::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: rgba(255,255,255,0.08);
}

/* ─── Danger zone ────────────────────────────────────────────────────────── */
.danger-zone {
  background:    rgba(255,80,80,0.05);
  border:        1px solid rgba(255,80,80,0.2);
  border-radius: 8px;
  padding:       16px 20px;
}

.danger-zone .danger-zone-title {
  font-size:   13px;
  font-weight: 600;
  color:       #ff8080;
  margin-bottom: 4px;
}

.danger-zone .danger-zone-desc {
  font-size: 12px;
  color:     rgba(255,255,255,0.4);
}


/* ─── Auth Page Background Variants ─────────────────────────────────────── */
/* Applied to body on standalone auth pages (login / setup / register / otp) */

.auth-bg-0 {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(60,210,165,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(99,102,241,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 85%, rgba(59,130,246,0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0d1520 0%, #1d2835 50%, #0f1e2d 100%) !important;
}

.auth-bg-1 {
  background:
    radial-gradient(ellipse at 75% 30%, rgba(60,210,165,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 70%, rgba(234,179,8,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 10%, rgba(16,185,129,0.09) 0%, transparent 45%),
    linear-gradient(160deg, #0a1628 0%, #1a2c40 55%, #0e1c2b 100%) !important;
}

.auth-bg-2 {
  background:
    radial-gradient(ellipse at 10% 30%, rgba(99,102,241,0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 70%, rgba(60,210,165,0.11) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(59,130,246,0.07) 0%, transparent 50%),
    linear-gradient(115deg, #0c1825 0%, #1b2c3e 50%, #0d1f30 100%) !important;
}

.auth-bg-3 {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(60,210,165,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 85%, rgba(239,68,68,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 40%, rgba(99,102,241,0.08) 0%, transparent 55%),
    linear-gradient(150deg, #0b1720 0%, #1c2a38 55%, #101e2c 100%) !important;
}

.auth-bg-4 {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(59,130,246,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(60,210,165,0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(16,185,129,0.07) 0%, transparent 45%),
    linear-gradient(120deg, #0d1a28 0%, #1e2f42 55%, #0e1d2d 100%) !important;
}

.auth-bg-5 {
  background:
    radial-gradient(ellipse at 60% 10%, rgba(60,210,165,0.15) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 60%, rgba(99,102,241,0.09) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(234,179,8,0.06) 0%, transparent 50%),
    linear-gradient(140deg, #0c1a27 0%, #1d2e40 55%, #0f1e2e 100%) !important;
}


/* ─── Glitch Text Effect ─────────────────────────────────────────────────── */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glitch-text::before {
  color: #3cd2a5;
  animation: glitch-before 3s infinite linear;
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
}

.glitch-text::after {
  color: #818cf8;
  animation: glitch-after 3s infinite linear;
  clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%);
}

@keyframes glitch-before {
  0%,80%,100% { transform: translate(0); opacity: 0; }
  81%          { transform: translate(-2px, 1px); opacity: 0.7; }
  83%          { transform: translate(2px, -1px); opacity: 0.6; }
  85%          { transform: translate(-1px, 2px); opacity: 0.8; }
  87%          { transform: translate(0); opacity: 0; }
}

@keyframes glitch-after {
  0%,82%,100% { transform: translate(0); opacity: 0; }
  83%          { transform: translate(2px, -1px); opacity: 0.7; }
  85%          { transform: translate(-2px, 1px); opacity: 0.6; }
  87%          { transform: translate(1px, -2px); opacity: 0.8; }
  89%          { transform: translate(0); opacity: 0; }
}

/* ─── DataTables — HUD Admin v3.0 overrides ─────────────────────────────── */
/* Remove default DataTables borders / backgrounds that clash with HUD dark   */
table.dataTable thead th,
table.dataTable thead td {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
}

table.dataTable tbody tr {
  background: transparent !important;
}

table.dataTable tbody tr:hover > * {
  background: rgba(255,255,255,0.03) !important;
  box-shadow: none !important;
}

table.dataTable tbody td {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  color: var(--bs-body-color);
  font-size: 13px;
  padding: 10px 12px;
  vertical-align: middle;
}

/* Sort icons */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
  opacity: 0.35;
}

table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  color: var(--bs-theme);
  opacity: 0.9;
}

/* Controls wrapper */
.dt-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Length select */
.dt-length select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--bs-body-color);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  font-family: var(--bs-font-chakra), sans-serif;
}

.dt-length label,
.dt-info {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}

/* Search input */
.dt-search input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--bs-body-color) !important;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--bs-font-chakra), sans-serif;
  outline: none;
}

.dt-search input:focus {
  border-color: var(--bs-theme) !important;
  box-shadow: 0 0 0 2px rgba(60,210,165,0.15) !important;
}

.dt-search label {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}

/* Pagination */
.dt-paging .pagination {
  margin: 0;
}

.dt-paging .page-link {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--bs-body-color);
  font-size: 12px;
  padding: 4px 10px;
}

.dt-paging .page-link:hover {
  background: rgba(60,210,165,0.15);
  border-color: var(--bs-theme);
  color: var(--bs-theme);
}

.dt-paging .page-item.active .page-link {
  background: var(--bs-theme);
  border-color: var(--bs-theme);
  color: #0d1a14;
}

.dt-paging .page-item.disabled .page-link {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.2);
}

/* Processing overlay */
div.dt-processing {
  background: rgba(29,40,53,0.92);
  color: var(--bs-theme);
  border: 1px solid rgba(60,210,165,0.2);
  border-radius: 6px;
  font-size: 13px;
  padding: 8px 20px;
}