/* ==========================================
   VISUAL POLISH v3 - Blue-Only Theme
   CompTIA Security+ Study Platform
   ========================================== */

/* ==========================================
   1. RICHER BACKGROUND
   ========================================== */
body {
    background:
        radial-gradient(ellipse 80% 60% at 10% 0%, rgba(56, 189, 248, 0.16) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 90% 5%, rgba(6, 182, 212, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse 70% 60% at 50% 100%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #050d1a 0%, #0a1628 35%, #071020 100%) !important;
}

/* ==========================================
   2. NAVBAR - GLASS + GLOW STRIP
   ========================================== */
.top-navbar {
    background: rgba(6, 14, 28, 0.92) !important;
    border-bottom: none !important;
    box-shadow:
        0 1px 0 rgba(56, 189, 248, 0.25),
        0 4px 30px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

.top-navbar::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 5% !important;
    right: 5% !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(56, 189, 248, 0.6),
        rgba(6, 182, 212, 0.5),
        rgba(56, 189, 248, 0.4),
        transparent) !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

.navbar-brand .version-badge {
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.35) !important;
}

.navbar-nav .nav-btn.active {
    box-shadow:
        0 4px 20px rgba(14, 165, 233, 0.4),
        0 0 12px rgba(6, 182, 212, 0.15) !important;
}

.navbar-nav .nav-btn:hover:not(.active) {
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

/* ==========================================
   3. SIDEBAR - ACCENT HOVER
   ========================================== */
.lesson-item {
    background: transparent;
    color: var(--text-primary, #f8fafc);
    border: 1px solid transparent;
    transition: all 0.25s ease;
}

body:not(.theme-light) .lesson-item .lesson-status.todo {
    background: rgba(100, 116, 139, 0.35);
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.55);
}

/* Death Arena — solid dark surfaces so text meets AA contrast */
body:not(.theme-light) .arena-card,
body:not(.theme-light) .arena-stats,
body:not(.theme-light) .arena-rules,
body:not(.theme-light) .arena-rule {
    background: rgba(15, 23, 42, 0.85);
    color: var(--text-primary, #f8fafc);
    border: 1px solid rgba(56, 189, 248, 0.25);
}
body:not(.theme-light) .arena-start-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35);
}

/* Hide floating action buttons when chat view is active */
body:has(#chat-view.active) .fab-container,
body:has(#chat-view.active) .notes-fab,
body:has(#chat-view.active) .chat-fab {
    display: none !important;
}

/* Unified difficulty badge — one style across Casos, PBQ, CLI Labs, Labs */
.difficulty-badge,
.difficulty-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
    line-height: 1.4;
}
.difficulty-badge.difficulty-easy,
.difficulty-badge.easy,
.difficulty-pill.easy {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
}
.difficulty-badge.difficulty-medium,
.difficulty-badge.difficulty-medio,
.difficulty-badge.medium,
.difficulty-pill.medium {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border-color: rgba(234, 179, 8, 0.4);
}
.difficulty-badge.difficulty-hard,
.difficulty-badge.difficulty-dificil,
.difficulty-badge.difficulty-difícil,
.difficulty-badge.hard,
.difficulty-pill.hard {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

/* Consistent H1 color across all top-level view headers in dark mode */
body:not(.theme-light) .view-header h1,
body:not(.theme-light) .guides-header h1,
body:not(.theme-light) .notes-header h1,
body:not(.theme-light) .arena-header h1 {
    color: #f8fafc;
    font-weight: 800;
}

.lesson-item:hover {
    background: rgba(56, 189, 248, 0.08) !important;
    border-color: rgba(56, 189, 248, 0.15);
    transform: translateX(4px);
}

.lesson-item.active {
    background: rgba(14, 165, 233, 0.15) !important;
    border-color: rgba(14, 165, 233, 0.25);
    box-shadow: 0 0 16px rgba(14, 165, 233, 0.1);
}

.mini-progress-bar {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.15);
    min-height: 6px;
}
.mini-progress-fill {
    background: linear-gradient(90deg, #0ea5e9, #06b6d4, #22d3ee) !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
    min-width: 2px;
}

/* ==========================================
   4. DASHBOARD HERO - GRADIENT BORDER
   ========================================== */
.dashboard-hero-compact {
    border-radius: 20px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
}

.dashboard-hero-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4, #22d3ee, #0ea5e9);
    background-size: 200% 100%;
    animation: shineSlide 4s linear infinite;
    z-index: 1;
}

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

.stat-pill {
    transition: all 0.25s ease !important;
}

.stat-pill:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.2) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

/* ==========================================
   5. NEXT STEP CARD
   ========================================== */
.next-step-card {
    border-radius: 20px !important;
    position: relative;
    overflow: hidden;
}

.next-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e, #06b6d4, #0ea5e9);
    z-index: 1;
}

/* ==========================================
   6. STUDY PATH
   ========================================== */
.study-path-hero {
    border-radius: 22px !important;
    position: relative;
    overflow: hidden;
}

.study-path-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4, #22d3ee, #06b6d4, #0ea5e9);
    background-size: 200% 100%;
    animation: shineSlide 6s linear infinite;
    z-index: 2;
}

.global-progress-circle {
    filter: drop-shadow(0 0 16px rgba(34, 197, 94, 0.3));
}

.phase {
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(56, 189, 248, 0.08);
}

.phase.active-phase {
    border-color: rgba(14, 165, 233, 0.3) !important;
    box-shadow: 0 0 28px rgba(14, 165, 233, 0.12), 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.step {
    border: 1px solid rgba(56, 189, 248, 0.06) !important;
    border-radius: 14px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.step:hover:not(.locked) {
    border-color: rgba(14, 165, 233, 0.35) !important;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.12) !important;
    background: rgba(14, 165, 233, 0.06) !important;
}

.step.active {
    border-color: rgba(14, 165, 233, 0.4) !important;
    box-shadow: 0 0 24px rgba(14, 165, 233, 0.15), inset 0 0 30px rgba(14, 165, 233, 0.03) !important;
}

.step.active .step-icon {
    box-shadow: 0 0 16px rgba(14, 165, 233, 0.25) !important;
}

.phase-progress-bar .fill {
    box-shadow: 0 0 12px currentColor !important;
}

/* ==========================================
   7. BUTTONS
   ========================================== */
.btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: 1px solid rgba(186, 230, 253, 0.2) !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3) !important;
    color: white !important;
    font-weight: 700 !important;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    box-shadow: 0 6px 24px rgba(14, 165, 233, 0.45) !important;
    transform: translateY(-2px) !important;
}

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

.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #059669 100%) !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
    color: white !important;
}

.btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important;
    box-shadow: 0 6px 24px rgba(34, 197, 94, 0.4) !important;
    transform: translateY(-2px) !important;
}

.action-btn-compact {
    transition: all 0.25s ease !important;
    border: 1px solid rgba(56, 189, 248, 0.12) !important;
    border-radius: 14px !important;
}

.action-btn-compact:hover {
    border-color: rgba(14, 165, 233, 0.35) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.15) !important;
}

.action-btn-compact:hover .action-icon {
    transform: scale(1.2) !important;
    transition: transform 0.25s ease;
}

/* ==========================================
   8. DASHBOARD CARDS - TOP ACCENT LINES
   ========================================== */
.quick-actions.compact,
.exam-readiness-compact,
.badges-section-compact,
.activity-compact {
    border-radius: 20px !important;
    position: relative;
    overflow: hidden;
}

.quick-actions.compact::before,
.exam-readiness-compact::before,
.badges-section-compact::before,
.activity-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.5), rgba(6, 182, 212, 0.4), transparent);
    z-index: 1;
}

.quick-actions.compact h3,
.exam-readiness-compact h3,
.badges-section-compact h3,
.activity-compact h3 {
    background: linear-gradient(135deg, #f1f5f9 0%, #7dd3fc 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 700 !important;
}

/* Undo gradient text on light card backgrounds */
body.theme-light .quick-actions.compact h3,
body.theme-light .exam-readiness-compact h3,
body.theme-light .badges-section-compact h3,
body.theme-light .activity-compact h3 {
    background: none !important;
    -webkit-text-fill-color: #0f172a !important;
}

.badge-item.unlocked {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.badge-item.unlocked:hover {
    transform: translateY(-5px) scale(1.1) !important;
    box-shadow: 0 0 28px rgba(14, 165, 233, 0.35), 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================
   9. EXAM VIEW
   ========================================== */
.exam-setup {
    border-radius: 22px !important;
    overflow: hidden;
    position: relative;
}

.exam-setup::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4, #22d3ee);
    z-index: 2;
}

.option {
    border-radius: 14px !important;
}

.option:hover:not(.disabled) {
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.1) !important;
}

.option.selected {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.12) !important;
}

.option.correct {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2) !important;
}

.option-letter {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.results-card {
    border-radius: 22px !important;
    overflow: hidden;
    position: relative;
}

.results-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4, #22d3ee);
}

.results-score {
    filter: drop-shadow(0 4px 16px rgba(14, 165, 233, 0.35)) !important;
}

/* ==========================================
   10. FLASHCARDS
   ========================================== */
.flashcard,
.flashcard-inner {
    border-radius: 22px !important;
}

.flashcard-front,
.flashcard-back {
    border-radius: 22px !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
}

.flashcard:hover {
    box-shadow: 0 16px 48px rgba(14, 165, 233, 0.1) !important;
}

.deck-card {
    border-radius: 18px !important;
    transition: all 0.3s ease !important;
}

.deck-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.35) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.anki-btn {
    border-radius: 14px !important;
}

.anki-btn:hover {
    transform: translateY(-3px) !important;
}

/* ==========================================
   11. CASES & PBQ
   ========================================== */
.case-card,
.pbq-card {
    border-radius: 18px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.case-card::before,
.pbq-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.case-card:hover::before,
.pbq-card:hover::before {
    opacity: 1;
}

.case-card:hover,
.pbq-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.4) !important;
}

/* ==========================================
   12. NOTES
   ========================================== */
.note-card {
    border-radius: 16px !important;
    transition: all 0.25s ease !important;
}

.note-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.3) !important;
}

.notes-header-bar {
    border-radius: 18px !important;
}

/* ==========================================
   13. CHAT
   ========================================== */
.suggestion-chip {
    border-radius: 14px !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
}

.suggestion-chip:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15) !important;
}

.message-bubble-lg {
    border-radius: 20px !important;
}

.chat-message-lg.user .message-bubble-lg {
    border-radius: 20px 20px 6px 20px !important;
}

.chat-message-lg:not(.user) .message-bubble-lg {
    border-radius: 20px 20px 20px 6px !important;
}

.send-btn-lg:hover {
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3) !important;
}

.chat-panel {
    border-radius: 24px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 40px rgba(14, 165, 233, 0.06) !important;
}

/* ==========================================
   14. MODALS
   ========================================== */
.modal-content {
    border-radius: 24px !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* ==========================================
   15. FABs
   ========================================== */
.fab {
    border-radius: 18px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}

.fab:hover {
    transform: scale(1.1) !important;
}

.fab-chat:hover {
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.4) !important;
}

.fab-notes:hover {
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.4) !important;
}

/* ==========================================
   16. SCROLLBARS
   ========================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.3) rgba(8, 20, 38, 0.2);
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

*::-webkit-scrollbar-track {
    background: rgba(8, 20, 38, 0.3);
}

*::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.5);
}

/* ==========================================
   17. STUDY VIEW
   ========================================== */
.section-header {
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0369a1 100%) !important;
}

.lesson-tabs {
    border-radius: 18px !important;
}

.lesson-tab.active {
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.35) !important;
}

.concept-card {
    border-radius: 14px !important;
}

.definition-item {
    border-radius: 14px !important;
}

.definition-item:hover {
    border-color: rgba(14, 165, 233, 0.35) !important;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.08) !important;
}

/* ==========================================
   18. ENTRANCE ANIMATIONS
   ========================================== */
@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view.active .dashboard-hero-compact { animation: cardSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0s; }
.view.active .next-step-card { animation: cardSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.06s; }
.view.active .study-path-hero { animation: cardSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.12s; }
.view.active .dashboard-compact-grid { animation: cardSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.18s; }
.view.active .badges-section-compact { animation: cardSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.24s; }
.view.active .activity-compact { animation: cardSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.3s; }

/* ==========================================
   19. TEXT SELECTION
   ========================================== */
::selection {
    background: rgba(14, 165, 233, 0.35);
    color: #fff;
}

::-moz-selection {
    background: rgba(14, 165, 233, 0.35);
    color: #fff;
}

/* ==========================================
   20. MOBILE
   ========================================== */
.mobile-bottom-bar {
    background: rgba(6, 12, 24, 0.96) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.12) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

.mobile-tab.active .tab-icon {
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.5));
}

.mobile-tab.active::after {
    background: linear-gradient(90deg, #0ea5e9, #06b6d4) !important;
}

.mobile-more-menu {
    border-radius: 22px !important;
    border: 1px solid rgba(56, 189, 248, 0.12) !important;
    background: rgba(8, 16, 30, 0.97) !important;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.more-menu-item {
    border-radius: 14px !important;
}

/* ==========================================
   21. DASHBOARD CARDS
   ========================================== */
.dashboard-card {
    border-radius: 20px !important;
    border: 1px solid rgba(56, 189, 248, 0.1) !important;
    position: relative;
    overflow: hidden;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.4), transparent);
}

/* ==========================================
   22. FORMS
   ========================================== */
select {
    border-radius: 12px !important;
}

.radio-option,
.checkbox-option {
    border-radius: 14px !important;
}

/* ==========================================
   23. MISC
   ========================================== */
.back-to-top {
    border-radius: 14px !important;
}

.pbq-workspace {
    border-radius: 20px !important;
}

#toast-container .toast {
    border-radius: 16px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* ==========================================
   24. REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .dashboard-hero-compact::before,
    .study-path-hero::after {
        animation: none;
    }
    .view.active .dashboard-hero-compact,
    .view.active .next-step-card,
    .view.active .study-path-hero,
    .view.active .dashboard-compact-grid,
    .view.active .badges-section-compact,
    .view.active .activity-compact {
        animation: none;
    }
}