/* Basic reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ===== COMPREHENSIVE TEXT COLOR FIXES ===== */
/* Ensure all text elements have proper contrast */
body, body.app-body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #0f172a 0%, #1a1a2e 50%, #0f172a 100%);
    color: #e5e7eb;
}

/* Global text color fixes */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}

/*p, span, li, label, a, button {
    color: #e5e7eb !important;
}*/

/* Override Bootstrap text utilities for dark background */
.text-dark {
    color: #e5e7eb !important;
}

.text-muted {
    color: #a0a0a0 !important;
}

.text-secondary {
    color: #9ca3af !important;
}

.text-primary {
    color: #60a5fa !important;
}

.text-success {
    color: #10b981 !important;
}

.text-danger {
    color: #ef4444 !important;
}

.text-warning {
    color: #fbbf24 !important;
}

.text-info {
    color: #06b6d4 !important;
}

.text-light {
    color: #f3f4f6 !important;
}

/* Form elements - ensure visibility */
input, textarea, select {
    color: #e5e7eb !important;
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
}

input::placeholder, textarea::placeholder {
    color: #888888 !important;
    opacity: 0.7;
}

/* Card styling */

/* Navbar */

.app-navbar {
    background: linear-gradient(90deg, #0f172a, #1d4ed8);
}

.app-navbar .navbar-brand {
    letter-spacing: 0.03em;
}

.app-main {
    flex: 1 0 auto;
}

/* Card styling */

.app-card {
    background: #0b1120;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    padding: 1.75rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.75);
    color: #e5e7eb;
}

.app-card-light {
    background: linear-gradient(135deg, #1a1a2e 0%, #0b1120 100%);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    padding: 1.75rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.5);
    color: #e5e7eb;
}

.app-card-light h1,
.app-card-light h2,
.app-card-light h3,
.app-card-light h4,
.app-card-light h5,
.app-card-light h6 {
    color: #ffffff !important;
}

.app-card-light p,
.app-card-light span,
.app-card-light li {
    color: #e5e7eb !important;
}

/* Page titles */

.app-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f9fafb;
    margin-bottom: 0.25rem;
}

.app-page-subtitle {
    font-size: 0.9rem;
    color: #9ca3af;
}

/* Buttons */

.btn-app-primary {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    border: none;
    color: #f9fafb;
    font-weight: 500;
    border-radius: 999px;
    padding-inline: 1.25rem;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
}

.btn-app-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
    color: #ffffff;
}

.btn-app-ghost {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #e5e7eb;
    background: transparent;
}

.btn-app-ghost:hover {
    background: rgba(15, 23, 42, 0.85);
}

/* Forms */

.app-form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #e5e7eb;
    margin-bottom: 0.25rem;
}

.app-form-label-light {
    font-size: 0.85rem;
    font-weight: 500;
    color: #e5e7eb;
    margin-bottom: 0.25rem;
}

.app-input-dark {
    background-color: #020617;
    border-color: #1e293b;
    color: #e5e7eb;
}

.app-input-dark:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.45);
}

.app-input-light:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}

/* Links */

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Footer */

.app-footer {
    background: #020617;
    color: #6b7280;
    border-top: 1px solid #111827;
}

/* Dashboard grid */

.app-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .app-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tag / pill */

.app-pill {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
    color: #495a76;
}

/* Table */

.table-app {
    border-radius: 14px;
    overflow: hidden;
    background: #020617;
    color: #e5e7eb;
}

.table-app thead {
    background: #020617;
}

.table-app th {
    border-bottom: 1px solid #1f2937;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}

.table-app td {
    border-bottom: 1px solid #0f172a;
    font-size: 0.85rem;
}

/* Charts container */

.app-chart-card {
    background: #020617;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    padding: 1rem 1.25rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.75);
}

/* Auth pages center */
.app-auth-wrapper {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-auth-card {
    max-width: 430px;
    width: 100%;
}

/* === Quiz question navigation === */

.question-panel {
    display: none;
}

.question-panel.active {
    display: block;
}

.question-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.question-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.question-palette-btn {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.6);
    background: #020617;
    color: #e5e7eb;
    font-size: 0.8rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.question-palette-btn:hover {
    border-color: #3b82f6;
}

.question-palette-btn-active {
    box-shadow: 0 0 0 1px rgba(59,130,246,0.8);
}

.question-palette-answered {
    background: #16a34a;
    border-color: #16a34a;
    color: #f9fafb;
}

.question-palette-unanswered {
    background: #111827;
    color: #f9fafb;
}

.question-palette-review {
    background: #a855f7;
    border-color: #a855f7;
    color: #f9fafb;
}

.question-palette-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.75rem;
    font-size: 0.75rem;
}
.question-palette-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    display: inline-block;
}
.dot-answered {
    background: #16a34a;
}
.dot-unanswered {
    background: #111827;
    border: 1px solid rgba(148,163,184,0.8);
}
.dot-review {
    background: #a855f7;
}
.mark-review-label {
    font-size: 0.8rem;
    color: #9ca3af;
}
.btn-outline-warning {
    border: 1px solid #ffc107 !important;
    color: #ffc107 !important;
    background: rgba(255, 193, 7, 0.1) !important;
}

.btn-outline-warning:hover {
    border: 1px solid #ffc107 !important;
    color: #ffffff !important;
    background: rgba(255, 193, 7, 0.2) !important;
}

.palette.p-not { background: #adb5bd; }
.palette.p-ans { background: #198754; }
.palette.p-rev { background: #ffc107; color:#000; }
.palette.current { outline: 3px solid #ddd; }
/*.mb-3 {
    color: #fff;
}*/
.app-card .col-md-6 .mb-1 {
    color: #e5e7eb !important;
}
.text-underline { text-decoration: underline; }

.career-progress{
  height:10px;
  background:#e9ecef;
  border-radius:20px;
  overflow:hidden;
}

.career-progress-bar{
  height:100%;
  font-size:10px;
  line-height:10px;
  color:#fff;
  text-align:right;
  padding-right:6px;
  font-weight:600;

  background:linear-gradient(
    90deg,
    #4facfe,
    #00f2fe
  );

  transition: width 1.2s ease-in-out;
}

/* Login button styling */
.btn-outline-light[href*="login"] {
  margin-bottom: 5px !important;
}

/* ===== GLOBAL CONTRAST & VISIBILITY FIX ===== */
/* Ensure Bootstrap utilities don't override dark theme */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    color: #e5e7eb;
}

/* Form utilities */
.form-text {
    color: #a0a0a0 !important;
}

.form-check-label {
    color: #e5e7eb !important;
}

.form-select option {
    background: #2a2a2a !important;
    color: #e5e7eb !important;
}

/* Table fix */
table {
    color: #e5e7eb !important;
}

table thead th {
    color: #ffffff !important;
    background-color: #0b1120 !important;
}

table tbody td {
    color: #e5e7eb !important;
}

/* Badge fix */
.badge {
    color: #ffffff !important;
}

/* Alert fix */
.alert-info {
    background-color: rgba(6, 182, 212, 0.1) !important;
    border-color: #06b6d4 !important;
    color: #06b6d4 !important;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

.alert-warning {
    background-color: rgba(251, 191, 36, 0.1) !important;
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
}

.alert-primary {
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}

.alert-secondary {
    background-color: rgba(107, 114, 128, 0.1) !important;
    border-color: #6b7280 !important;
    color: #d1d5db !important;
}

/* Dropdown fix */
.dropdown-menu {
    background-color: #1a1a2e !important;
    border-color: #404040 !important;
}

.dropdown-item {
    color: #e5e7eb !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

.dropdown-divider {
    border-color: #404040 !important;
}

/* Modal fix */
.modal-content {
    background-color: #0b1120 !important;
    border-color: #404040 !important;
    color: #e5e7eb !important;
}

.modal-header {
    border-color: #404040 !important;
}

.modal-title {
    color: #ffffff !important;
}

.close {
    color: #e5e7eb !important;
}

/* Tooltip and popover fix */
.tooltip-inner {
    background-color: #0b1120 !important;
    color: #e5e7eb !important;
    border: 1px solid #404040 !important;
}

.popover {
    background-color: #0b1120 !important;
    border: 1px solid #404040 !important;
}

.popover-header {
    background-color: #0b1120 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.popover-body {
    color: #e5e7eb !important;
}

/* List group fix */
.list-group-item {
    background-color: #0b1120 !important;
    border-color: #404040 !important;
    color: #e5e7eb !important;
}

.list-group-item:hover {
    background-color: #1a1a2e !important;
}

.list-group-item.active {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* Progress bar fix */
.progress {
    background-color: #2a2a2a !important;
    border: 1px solid #3a3a4a !important;
}

.progress-bar {
    background-color: #10b981 !important;
}

.progress-bar.bg-success {
    background-color: #10b981 !important;
}

.progress-bar.bg-primary {
    background-color: #2563eb !important;
}

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

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

/* ===== SELECT2 DARK THEME ===== */
/* Table TD Transparent Background */
  .table tbody td {
    background: transparent !important;
  }
  
  .table tbody tr {
    background: transparent !important;
  }

  .table tbody tr:hover {
    background: rgba(96, 165, 250, 0.08) !important;
  }

  /* Form Select Styling */
  .form-select, .select-search {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1.5px solid rgba(96, 165, 250, 0.15) !important;
    color: #d9eefc !important;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .form-select:focus, .select-search:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2), inset 0 0 12px rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    outline: none !important;
  }

  .form-select option {
    background: #0f1729;
    color: #d9eefc;
  }

  .form-select option:checked {
    background: linear-gradient(#2563eb, #2563eb);
    background-color: #2563eb !important;
  }

/* Select2 Container Single Select */

  /* Select2 Container Dark Theme */
  .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1.5px solid rgba(96, 165, 250, 0.15) !important;
    border-radius: 6px !important;
    min-height: 38px !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #d9eefc !important;
    line-height: 36px !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow {
    color: #9fb4d9 !important;
  }

  .select2-container--default.select2-container--focus .select2-selection--single {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2), inset 0 0 12px rgba(96, 165, 250, 0.1) !important;
  }

  /* Select2 Dropdown */
  .select2-container--default .select2-dropdown {
    background: rgba(20, 24, 35, 0.95) !important;
    border: 1.5px solid rgba(96, 165, 250, 0.2) !important;
    border-radius: 6px !important;
    margin-top: 4px !important;
  }

  .select2-container--default .select2-dropdown.select2-dropdown--below {
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.8) !important;
  }

  /* Select2 Search */
  .select2-container--default .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(96, 165, 250, 0.2) !important;
    color: #d9eefc !important;
    border-radius: 4px !important;
  }

  .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(217, 238, 252, 0.35) !important;
  }

  /* Select2 Options */
  .select2-container--default .select2-results__option {
    color: #d8e9ff !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
  }

  .select2-container--default .select2-results__option:hover,
  .select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.15), rgba(59, 130, 246, 0.1)) !important;
    color: #93c5fd !important;
  }

  .select2-container--default .select2-results__option[aria-selected=true] {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.25), rgba(96, 165, 250, 0.15)) !important;
    color: #60a5fa !important;
  }

  /* Select2 Multiple */
  .select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1.5px solid rgba(96, 165, 250, 0.15) !important;
    border-radius: 6px !important;
    min-height: 38px !important;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(59, 130, 246, 0.15)) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
    color: #93c5fd !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #93c5fd !important;
    margin-right: 4px !important;
  }

  .select2-container--default.select2-container--focus .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2), inset 0 0 12px rgba(96, 165, 250, 0.1) !important;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #d9eefc !important;
  }

/* ===== CARD BACKGROUND FIX ===== */
/* Make Bootstrap cards transparent/dark themed */
.card {
    background: rgba(20, 24, 35, 0.6) !important;
    border: 1px solid rgba(96, 165, 250, 0.1) !important;
    box-shadow: 0 4px 16px rgba(2, 6, 23, 0.6) !important;
}

.card-header {
    background: rgba(96, 165, 250, 0.08) !important;
    border-bottom: 1px solid rgba(96, 165, 250, 0.15) !important;
    color: #93c5fd !important;
}

.card-body {
    background: transparent !important;
    color: #e6eef8 !important;
}

.card-footer {
    background: rgba(20, 24, 35, 0.4) !important;
    border-top: 1px solid rgba(96, 165, 250, 0.1) !important;
}