/*
 * Academia Web App - Global Dark Mode Overrides
 * Covers all views that use hardcoded light-mode colors.
 * Selector: [data-bs-theme="dark"] — set on <html> by KTThemeMode.
 */

/* =============================================
   1. APP SHELL / LAYOUT
   ============================================= */
:root[data-bs-theme="dark"] .app-header {
  background: linear-gradient(180deg, #1a1b1d 0%, #242526 100%) !important;
  border-bottom-color: rgba(0, 196, 68, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

:root[data-bs-theme="dark"] .app-footer {
  background: #1a1b1d !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

:root[data-bs-theme="dark"] .app-footer .text-dark,
:root[data-bs-theme="dark"] .app-footer .text-gray-800,
:root[data-bs-theme="dark"] .app-footer .text-muted {
  color: #a1a5b7 !important;
}

:root[data-bs-theme="dark"] .app-footer a.text-gray-800 {
  color: #d1d5db !important;
}

:root[data-bs-theme="dark"] .app-footer a.text-gray-800:hover {
  color: #00c630 !important;
}

:root[data-bs-theme="dark"] .app-footer a.text-muted {
  color: #94a3b8 !important;
}

:root[data-bs-theme="dark"] .app-footer .menu-gray-600 .menu-link {
  color: #94a3b8 !important;
}

/* Telegram link box */
:root[data-bs-theme="dark"] .app-footer a[href*="t.me"] {
  background: rgba(96, 200, 255, 0.1) !important;
  color: #60c8ff !important;
  border: 1px solid rgba(96, 200, 255, 0.2) !important;
}

/* =============================================
   2. PAGE TOOLBAR / BREADCRUMB
   ============================================= */
:root[data-bs-theme="dark"] #kt_app_toolbar {
  background: linear-gradient(135deg, #1a1b1d 0%, #242526 100%) !important;
  border-bottom: 1px solid rgba(0, 196, 68, 0.1) !important;
}

:root[data-bs-theme="dark"] .page-heading,
:root[data-bs-theme="dark"] h1.text-dark {
  color: #e4e6eb !important;
}

:root[data-bs-theme="dark"] .breadcrumb-item.text-muted,
:root[data-bs-theme="dark"] .breadcrumb-item a.text-muted {
  color: #6b7280 !important;
}

/* =============================================
   3. GENERIC CARD / PANEL BACKGROUNDS
   ============================================= */
:root[data-bs-theme="dark"] .card,
:root[data-bs-theme="dark"] .card-body {
  background-color: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: #e4e6eb !important;
}

:root[data-bs-theme="dark"] .card-title {
  color: #f1f5f9 !important;
}

:root[data-bs-theme="dark"] .card-header {
  background-color: #243044 !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  color: #f1f5f9 !important;
}

/* =============================================
   4. PAGE / SECTION BACKGROUNDS
   ============================================= */
:root[data-bs-theme="dark"] .my-courses-page,
:root[data-bs-theme="dark"] .web-courses-page,
:root[data-bs-theme="dark"] .wallet-page,
:root[data-bs-theme="dark"] .home-page,
:root[data-bs-theme="dark"] #kt_app_content,
:root[data-bs-theme="dark"] #kt_app_content_container,
:root[data-bs-theme="dark"] .d-flex.flex-column.flex-column-fluid {
  background: transparent !important;
}

:root[data-bs-theme="dark"] .app-main {
  background: #15161a !important;
}

/* =============================================
   5. COMMON WHITE BOXES (login cards, empty states, stat items, etc.)
   ============================================= */
:root[data-bs-theme="dark"] .login-card,
:root[data-bs-theme="dark"] .stat-item,
:root[data-bs-theme="dark"] .empty-state,
:root[data-bs-theme="dark"] .course-card,
:root[data-bs-theme="dark"] .live-card,
:root[data-bs-theme="dark"] .qbank-redirect,
:root[data-bs-theme="dark"] .tabs-wrapper,
:root[data-bs-theme="dark"] .transactions-section,
:root[data-bs-theme="dark"] .wallet-tabs-section,
:root[data-bs-theme="dark"] .payment-card,
:root[data-bs-theme="dark"] .filter-tab {
  background: #1e293b !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
}

/* =============================================
   6. TEXT COLORS
   ============================================= */
:root[data-bs-theme="dark"] h1,
:root[data-bs-theme="dark"] h2,
:root[data-bs-theme="dark"] h3,
:root[data-bs-theme="dark"] h4,
:root[data-bs-theme="dark"] h5,
:root[data-bs-theme="dark"] h6 {
  color: #f1f5f9 !important;
}

:root[data-bs-theme="dark"] p,
:root[data-bs-theme="dark"] span.text-muted,
:root[data-bs-theme="dark"] .text-muted {
  color: #94a3b8 !important;
}

/* Keep colored/branded text untouched */
:root[data-bs-theme="dark"] .text-success,
:root[data-bs-theme="dark"] .text-danger,
:root[data-bs-theme="dark"] .text-warning,
:root[data-bs-theme="dark"] .text-info,
:root[data-bs-theme="dark"] .text-primary {
  color: inherit !important;
}

:root[data-bs-theme="dark"] .login-desc,
:root[data-bs-theme="dark"] .stat-label,
:root[data-bs-theme="dark"] .instructor-name,
:root[data-bs-theme="dark"] .meta-item,
:root[data-bs-theme="dark"] .update-label,
:root[data-bs-theme="dark"] .live-course,
:root[data-bs-theme="dark"] .tx-description,
:root[data-bs-theme="dark"] .tx-date,
:root[data-bs-theme="dark"] .loading-text {
  color: #94a3b8 !important;
}

:root[data-bs-theme="dark"] .card-title,
:root[data-bs-theme="dark"] .live-title,
:root[data-bs-theme="dark"] .update-date,
:root[data-bs-theme="dark"] .progress-title,
:root[data-bs-theme="dark"] .section-title,
:root[data-bs-theme="dark"] .tx-type,
:root[data-bs-theme="dark"] .req-bank,
:root[data-bs-theme="dark"] .payment-heading,
:root[data-bs-theme="dark"] .payment-name {
  color: #f1f5f9 !important;
}

/* =============================================
   7. DIVIDERS / BORDERS
   ============================================= */
:root[data-bs-theme="dark"] .separator,
:root[data-bs-theme="dark"] .card-meta,
:root[data-bs-theme="dark"] .section-title {
  border-color: #334155 !important;
}

:root[data-bs-theme="dark"] .meta-update,
:root[data-bs-theme="dark"] .progress-section {
  background: rgba(0, 199, 68, 0.05) !important;
  border-color: rgba(0, 199, 68, 0.15) !important;
}

/* =============================================
   8. BUTTONS
   ============================================= */
:root[data-bs-theme="dark"] .filter-tab {
  border-color: #374151 !important;
  color: #9ca3af !important;
}

:root[data-bs-theme="dark"] .filter-tab:hover {
  border-color: #00c444 !important;
  color: #00c444 !important;
}

:root[data-bs-theme="dark"] .filter-tab.active {
  background: #00c444 !important;
  border-color: #00c444 !important;
  color: white !important;
}

:root[data-bs-theme="dark"] .tab-btn {
  color: #94a3b8 !important;
}

:root[data-bs-theme="dark"] .tab-btn:hover {
  background: rgba(0, 199, 68, 0.08) !important;
  color: #4ade80 !important;
}

/* =============================================
   9. FORMS / INPUTS
   ============================================= */
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e4e6eb !important;
}

:root[data-bs-theme="dark"] .form-control::placeholder {
  color: #64748b !important;
}

:root[data-bs-theme="dark"] .form-label {
  color: #d1d5db !important;
}

:root[data-bs-theme="dark"] .input-group-text {
  background-color: #243044 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* =============================================
   10. MODALS
   ============================================= */
:root[data-bs-theme="dark"] .modal-content {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e4e6eb !important;
}

:root[data-bs-theme="dark"] .modal-header {
  background: #243044 !important;
  border-bottom-color: #334155 !important;
}

:root[data-bs-theme="dark"] .modal-header .modal-title {
  color: #f1f5f9 !important;
}

:root[data-bs-theme="dark"] .modal-footer {
  background: #1a2744 !important;
  border-top-color: #334155 !important;
}

:root[data-bs-theme="dark"] .modal-body {
  background: #1e293b !important;
  color: #e4e6eb !important;
}

/* =============================================
   11. TABLES
   ============================================= */
:root[data-bs-theme="dark"] .table {
  color: #e4e6eb !important;
}

:root[data-bs-theme="dark"] .table thead th {
  background: #243044 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

:root[data-bs-theme="dark"] .table tbody tr {
  border-color: #2d3748 !important;
}

:root[data-bs-theme="dark"] .table tbody tr:hover {
  background: rgba(0, 199, 68, 0.04) !important;
}

/* =============================================
   12. ICONS IN LIGHT-COLORED CONTAINERS
   ============================================= */
:root[data-bs-theme="dark"] .stat-icon,
:root[data-bs-theme="dark"] .empty-icon,
:root[data-bs-theme="dark"] .qbank-icon,
:root[data-bs-theme="dark"] .login-icon,
:root[data-bs-theme="dark"] .instructor-avatar {
  background: linear-gradient(135deg, #0f3d1c 0%, #1a5c2e 100%) !important;
}

/* =============================================
   13. PROGRESS BARS
   ============================================= */
:root[data-bs-theme="dark"] .progress-bar-wrapper,
:root[data-bs-theme="dark"] .progress-percentage,
:root[data-bs-theme="dark"] .progress-status {
  background: #0f172a !important;
  color: #4ade80 !important;
}

/* =============================================
   14. BADGES
   ============================================= */
:root[data-bs-theme="dark"] .badge.badge-light-success {
  background: rgba(0, 199, 68, 0.15) !important;
  color: #4ade80 !important;
}

:root[data-bs-theme="dark"] .badge.badge-light {
  background: #243044 !important;
  color: #d1d5db !important;
}

/* =============================================
   15. ALERTS / NOTICES
   ============================================= */
:root[data-bs-theme="dark"] .alert {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

:root[data-bs-theme="dark"] .alert-success {
  background: rgba(0, 199, 68, 0.12) !important;
  color: #4ade80 !important;
  border-color: rgba(0, 199, 68, 0.2) !important;
}

:root[data-bs-theme="dark"] .alert-danger {
  background: rgba(220, 53, 69, 0.12) !important;
  color: #f87171 !important;
  border-color: rgba(220, 53, 69, 0.2) !important;
}

:root[data-bs-theme="dark"] .alert-info {
  background: rgba(96, 165, 250, 0.12) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
}

/* =============================================
   16. LIST GROUPS
   ============================================= */
:root[data-bs-theme="dark"] .list-group-item {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e4e6eb !important;
}

:root[data-bs-theme="dark"] .list-group-item:hover {
  background-color: #243044 !important;
}

/* =============================================
   17. DROPDOWN / SUB-MENUS
   ============================================= */
:root[data-bs-theme="dark"] .dropdown-menu {
  background: #1e293b !important;
  border-color: rgba(0, 199, 68, 0.12) !important;
}

:root[data-bs-theme="dark"] .dropdown-item {
  color: #e4e6eb !important;
}

:root[data-bs-theme="dark"] .dropdown-item:hover,
:root[data-bs-theme="dark"] .dropdown-item:focus {
  background: rgba(0, 199, 68, 0.08) !important;
  color: #4ade80 !important;
}

:root[data-bs-theme="dark"] .dropdown-divider {
  border-color: #334155 !important;
}

/* =============================================
   18. SIDEBAR MENU ITEMS (text contrast)
   ============================================= */
:root[data-bs-theme="dark"] .menu-title {
  color: #e4e6eb !important;
}

:root[data-bs-theme="dark"] .menu-section .menu-content {
  color: #64748b !important;
}

/* =============================================
   19. SCROLLBARS
   ============================================= */
:root[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: #1e293b;
}

:root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

:root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4ade80;
}

/* =============================================
   20. HEADER BUTTON FIXES (override scoped !important)
   ============================================= */
:root[data-bs-theme="dark"] #kt_app_sidebar_mobile_toggle {
  background: linear-gradient(
    135deg,
    rgba(0, 196, 68, 0.12) 0%,
    rgba(0, 196, 68, 0.06) 100%
  ) !important;
}

:root[data-bs-theme="dark"] .btn-icon.btn-custom {
  background: linear-gradient(
    135deg,
    rgba(0, 196, 68, 0.12) 0%,
    rgba(0, 196, 68, 0.06) 100%
  ) !important;
  border-color: rgba(0, 196, 68, 0.15) !important;
}

:root[data-bs-theme="dark"] .symbol {
  background: linear-gradient(
    135deg,
    rgba(0, 196, 68, 0.15) 0%,
    rgba(0, 196, 68, 0.08) 100%
  ) !important;
  border-color: rgba(0, 196, 68, 0.25) !important;
}

:root[data-bs-theme="dark"] .menu-sub-dropdown {
  background: linear-gradient(145deg, #242526 0%, #1a1b1d 100%) !important;
  border-color: rgba(0, 196, 68, 0.15) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

/* =============================================
   21. COURSE / CONTENT CARDS (common across views)
   ============================================= */
:root[data-bs-theme="dark"] .course-item,
:root[data-bs-theme="dark"] .course-list-item,
:root[data-bs-theme="dark"] .content-card,
:root[data-bs-theme="dark"] .category-card,
:root[data-bs-theme="dark"] .scholarship-card,
:root[data-bs-theme="dark"] .instructor-card,
:root[data-bs-theme="dark"] .event-card,
:root[data-bs-theme="dark"] .mia-card,
:root[data-bs-theme="dark"] .qbank-card {
  background: #1e293b !important;
  color: #e4e6eb !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

:root[data-bs-theme="dark"] .course-item h3,
:root[data-bs-theme="dark"] .course-item h4,
:root[data-bs-theme="dark"] .course-item .title,
:root[data-bs-theme="dark"] .content-card h3,
:root[data-bs-theme="dark"] .content-card h4,
:root[data-bs-theme="dark"] .category-card h3,
:root[data-bs-theme="dark"] .category-card h4 {
  color: #f1f5f9 !important;
}

:root[data-bs-theme="dark"] .course-item .description,
:root[data-bs-theme="dark"] .course-item p,
:root[data-bs-theme="dark"] .content-card p {
  color: #94a3b8 !important;
}

/* =============================================
   22. TRANSACTION / WALLET ITEMS
   ============================================= */
:root[data-bs-theme="dark"] .transaction-item,
:root[data-bs-theme="dark"] .charge-request-item {
  background: #0f172a !important;
  border-color: #1e293b !important;
}

:root[data-bs-theme="dark"] .tx-index {
  background: #334155 !important;
  color: #94a3b8 !important;
}

:root[data-bs-theme="dark"] .pagination-wrapper {
  border-top-color: #334155 !important;
}

/* =============================================
   23. LIVE CLASS STATUSES
   ============================================= */
:root[data-bs-theme="dark"] .status-upcoming {
  background: rgba(0, 199, 68, 0.1) !important;
  color: #4ade80 !important;
}

:root[data-bs-theme="dark"] .status-live {
  background: rgba(220, 53, 69, 0.1) !important;
  color: #f87171 !important;
}

:root[data-bs-theme="dark"] .status-ended {
  background: rgba(100, 116, 139, 0.15) !important;
  color: #94a3b8 !important;
}

/* =============================================
   24. CHILDCATEGORY BOX (customv4.css override)
   ============================================= */
:root[data-bs-theme="dark"] .childcategory-box {
  background: #1a2744 !important;
  color: #e4e6eb !important;
}