/* ===== ThreatBox Custom Styles ===== */

/* --- Text logo --- */
.threatbox-logo {
  font-size: 28px;
  font-weight: 700;
  color: #7366FF;
  line-height: 1;
  font-family: Rubik, sans-serif;
  letter-spacing: -0.5px;
}
.threatbox-logo-sm {
  font-size: 22px;
  font-weight: 700;
  color: #7366FF;
  line-height: 1;
  font-family: Rubik, sans-serif;
  letter-spacing: -0.5px;
}
.threatbox-logo-box {
  color: #2c323f;
}
.dark-only .threatbox-logo-box {
  color: #fff;
}
.threatbox-logo-icon {
  font-size: 18px;
  font-weight: 700;
  color: #7366FF;
  text-decoration: none;
}

/* Card hover effect */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(115, 102, 255, 0.15);
}

/* Stat card icon backgrounds */
.bg-light-primary { background-color: rgba(115, 102, 255, 0.1) !important; }
.bg-light-success { background-color: rgba(84, 186, 74, 0.1) !important; }
.bg-light-warning { background-color: rgba(255, 171, 0, 0.1) !important; }
.bg-light-danger  { background-color: rgba(252, 68, 56, 0.1) !important; }
.bg-light-info    { background-color: rgba(0, 157, 255, 0.1) !important; }
.bg-light-secondary { background-color: rgba(134, 142, 150, 0.1) !important; }

/* Counter-up animation */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.counter-up {
  animation: countUp 0.6s ease-out;
}

/* Empty state styling */
.empty-state svg {
  opacity: 0.4;
}
.empty-state h5 {
  margin-top: 0.5rem;
}
.empty-state .feather {
  opacity: 0.4;
}

/* Sidebar active state */
.sidebar-list.active > .sidebar-link {
  background-color: rgba(115, 102, 255, 0.1);
  color: #7366FF !important;
  border-radius: 5px;
}
.sidebar-list.active > .sidebar-link span {
  color: #7366FF !important;
}
.sidebar-list.active > .sidebar-link svg {
  stroke: #7366FF !important;
}

/* Animated progress bars */
.progress-bar-animated {
  transition: width 1s ease-in-out;
}

/* Button hover smooth */
.btn {
  transition: all 0.2s ease;
}

/* Ribbon overrides for lab cards */
.card-hover .ribbon-wrapper {
  pointer-events: none;
}

/* Toast custom animation */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.toast.showing-custom {
  animation: slideInRight 0.3s ease-out;
}

/* Search dropdown */
#search-results .search-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s;
}
#search-results .search-item:hover {
  background-color: rgba(115, 102, 255, 0.08);
}
#search-results .search-item .badge {
  font-size: 10px;
}

/* Modal animation enhancement */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
}

/* ===== Dark mode compatibility ===== */
.dark-only .card-hover:hover {
  box-shadow: 0 8px 25px rgba(115, 102, 255, 0.25);
}
.dark-only #search-results {
  background-color: #1d1e26 !important;
  border: 1px solid #374558;
}
.dark-only #search-results .search-item:hover {
  background-color: rgba(115, 102, 255, 0.15);
}

/* --- Form controls in dark mode --- */
.dark-only .form-control,
.dark-only .form-select {
  background-color: #1d1e26 !important;
  border-color: #374558 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.dark-only .form-control::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
.dark-only .form-control:focus,
.dark-only .form-select:focus {
  border-color: #7366FF !important;
  box-shadow: 0 0 0 0.15rem rgba(115, 102, 255, 0.25) !important;
}
.dark-only textarea.form-control {
  background-color: #1d1e26 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Tables in dark mode --- */
.dark-only .table {
  color: rgba(255, 255, 255, 0.85);
}
.dark-only .table th {
  color: rgba(255, 255, 255, 0.7);
  border-color: #374558 !important;
}
.dark-only .table td {
  border-color: #374558 !important;
}
.dark-only .table-primary {
  background-color: rgba(115, 102, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Theory page content in dark mode --- */
.dark-only .theory-content table th,
.dark-only .theory-content table td {
  border-color: #374558;
}
.dark-only .theory-content table thead th {
  background-color: #262932;
}
.dark-only .theory-content code:not([class*="language-"]) {
  background-color: #262932;
  color: #e8e8e8;
}
.dark-only .theory-content blockquote {
  background-color: #262932;
  border-left-color: #7366FF;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Ranking page in dark mode --- */
.dark-only .podium-stat {
  color: rgba(255, 255, 255, 0.55) !important;
}
.dark-only .podium-stat strong {
  color: rgba(255, 255, 255, 0.85) !important;
}
.dark-only .podium-card .card {
  border-top-color: inherit;
}

/* --- Learning map timeline in dark mode --- */
.dark-only .timeline-step:not(:last-child)::before {
  background: #374558;
}
.dark-only .timeline-step.completed:not(:last-child)::before {
  background: #54BA4A;
}
.dark-only .timeline-step.in_progress:not(:last-child)::before {
  background: #7366FF;
}
.dark-only .step-icon.not_started {
  background: #374558;
}

/* --- Notifications bg-light fix in dark mode --- */
.dark-only .list-group-item.bg-light {
  background-color: rgba(115, 102, 255, 0.08) !important;
}
.dark-only .list-group-item {
  background-color: #1d1e26;
  border-color: #374558;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Accordion in dark mode --- */
.dark-only .accordion-item {
  background-color: #1d1e26;
  border-color: #374558;
}
.dark-only .accordion-button {
  background-color: #1d1e26;
  color: rgba(255, 255, 255, 0.85);
}
.dark-only .accordion-button:not(.collapsed) {
  background-color: rgba(115, 102, 255, 0.1);
  color: #7366FF;
}
.dark-only .accordion-button::after {
  filter: invert(1);
}
.dark-only .accordion-body {
  background-color: #1d1e26;
  color: rgba(255, 255, 255, 0.75);
}

/* --- Modal in dark mode --- */
.dark-only .modal-content {
  background-color: #1d1e26;
  border-color: #374558;
  color: rgba(255, 255, 255, 0.85);
}
.dark-only .modal-header {
  border-color: #374558;
}
.dark-only .modal-footer {
  border-color: #374558;
}

/* --- Alerts in dark mode --- */
.dark-only .alert-light-primary {
  background-color: rgba(115, 102, 255, 0.12) !important;
  color: #a29bfe !important;
}
.dark-only .alert-light-secondary {
  background-color: rgba(134, 142, 150, 0.12) !important;
}
.dark-only .alert-warning {
  background-color: rgba(255, 171, 0, 0.15) !important;
  border-color: rgba(255, 171, 0, 0.3) !important;
  color: #ffc107 !important;
}

/* --- Tools page icon circle bg in dark mode --- */
.dark-only .bg-light {
  background-color: #262932 !important;
}

/* --- Card footer in dark mode --- */
.dark-only .card-footer.bg-transparent {
  border-color: #374558 !important;
}

/* --- Text colors in dark mode --- */
.dark-only .text-muted {
  color: rgba(255, 255, 255, 0.45) !important;
}
.dark-only .f-light {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* --- Login/Register page dark mode --- */
.dark-only .login-card {
  background-color: #1d1e26;
}
.dark-only .login-main {
  background-color: #262932;
  box-shadow: 0 0 37px rgba(0, 0, 0, 0.3);
}
.dark-only .login-main h4,
.dark-only .login-main p,
.dark-only .login-main label {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Writeup preview in dark mode --- */
.dark-only #writeup-preview {
  color: rgba(255, 255, 255, 0.85);
}
.dark-only #writeup-preview h1,
.dark-only #writeup-preview h2,
.dark-only #writeup-preview h3,
.dark-only #writeup-preview h4,
.dark-only #writeup-preview h5 {
  color: rgba(255, 255, 255, 0.9);
}
.dark-only #writeup-preview code {
  background-color: #262932;
  color: #e8e8e8;
}

/* --- Progress bar track in dark mode --- */
.dark-only .progress {
  background-color: #262932;
}

/* --- ApexCharts tooltip in dark mode --- */
.dark-only .apexcharts-tooltip {
  background: #262932 !important;
  border-color: #374558 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.dark-only .apexcharts-tooltip-title {
  background: #1d1e26 !important;
  border-color: #374558 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* --- SweetAlert2 dark mode --- */
.dark-only .swal2-popup {
  background-color: #262932 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.dark-only .swal2-title {
  color: rgba(255, 255, 255, 0.9) !important;
}
.dark-only .swal2-html-container {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Profile tabs */
.nav-tabs .nav-link.active {
  font-weight: 600;
}

/* --- Code tags in dark mode --- */
.dark-only code {
  background-color: #262932;
  color: #e8e8e8;
}

/* --- Pagination in dark mode --- */
.dark-only .page-link {
  background-color: #1d1e26;
  border-color: #374558;
  color: rgba(255, 255, 255, 0.75);
}
.dark-only .page-item.active .page-link {
  background-color: #7366FF;
  border-color: #7366FF;
  color: #fff;
}
.dark-only .page-link:hover {
  background-color: #262932;
  color: #7366FF;
}

/* --- Card footer in dark mode --- */
.dark-only .card-footer {
  background-color: transparent;
  border-color: #374558;
}

/* --- btn-light in dark mode --- */
.dark-only .btn-light {
  background-color: #262932;
  border-color: #374558;
  color: rgba(255, 255, 255, 0.75);
}
.dark-only .btn-light:hover {
  background-color: #374558;
  color: #fff;
}

/* --- Welcome card text in dark mode --- */
.dark-only .welcome-card h4,
.dark-only .welcome-card p {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Empty trophy icon dark mode --- */
.dark-only .empty-state .text-muted,
.dark-only .empty-state svg {
  opacity: 0.4;
}

/* --- Confirm delete page in dark mode --- */
.dark-only .alert {
  color: inherit;
}