/*
    -------------------------------------------------------------------------
    GRADEUP PRO - COMPREHENSIVE UI POLISH & ACCESSIBILITY PASS
    Notion, Linear, and Stripe-Inspired Visual Refinements
    -------------------------------------------------------------------------
*/

/* 1. Global Variables & Color Theme Standardizations (Indie Theme) */
:root {
    --zi-primary-900: #1e1b4b !important;
    --zi-primary-800: #312e81 !important;
    --zi-primary-700: #4338ca !important;
    --zi-primary-600: #4f46e5 !important;
    --zi-primary-50: rgba(79, 70, 229, 0.05) !important;

    /* Frontend Layout Color Standardizations */
    --primary: #4F46E5 !important;
    --primary-dark: #4338CA !important;
    --secondary: #6366F1 !important;
    --cta-bg: rgba(79, 70, 229, 0.1) !important;
    --cta-bg-gradient: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
    --cta-text: #ffffff !important;
}

[data-theme="dark"], [data-bs-theme="dark"] {
    --zi-primary-900: #312e81 !important;
    --zi-primary-800: #4338ca !important;
    --zi-primary-700: #4f46e5 !important;
    --zi-primary-600: #6366f1 !important;
    --zi-primary-50: rgba(99, 102, 241, 0.15) !important;

    /* Dark mode frontend overrides */
    --primary: #6366f1 !important;
    --primary-dark: #4f46e5 !important;
    --secondary: #818cf8 !important;
}

/* 2. Premium Typography & Sub-pixel Smoothing */
body, button, input, select, textarea {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .page-title, .hero-title {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
body, 
.page-title,
.hero-title,
.ca-term-header,
.tab-btn {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Subtle letter-spacing for premium headings */
h1, h2, h3, .page-title, .hero-title {
    letter-spacing: -0.025em !important;
}

/* 3. Focus Rings, Forms Validation, and Interactive Accents */
input:focus, 
select:focus, 
textarea:focus, 
.form-control:focus,
.ca-editor-nav select:focus {
    outline: none !important;
    border-color: var(--zi-primary-600) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25) !important;
}

/* Clear focus styles for buttons and links */
.btn:focus,
.btn-premium:focus,
.tab-btn:focus-visible {
    outline: 2px solid var(--zi-primary-600) !important;
    outline-offset: 2px;
}

/* Form Invalid State Polish */
.is-invalid, .has-error input, .has-error select, .has-error textarea {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}
.invalid-feedback, .error-message {
    color: #EF4444;
    font-size: 0.825rem;
    font-weight: 500;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 4. Force override of old green button colors and legacy selectors */
.btn-green, .btn-primary-action, .swal2-confirm {
    background-color: var(--zi-primary-600) !important;
    border-color: var(--zi-primary-600) !important;
    color: #ffffff !important;
}

.btn-green:hover:not(:disabled), .btn-primary-action:hover:not(:disabled), .swal2-confirm:hover {
    background-color: var(--zi-primary-700) !important;
    border-color: var(--zi-primary-700) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

/* Fix proctoring video card theme mapping */
#proctoring-fixed-layer {
    border-color: var(--zi-primary-600) !important;
}
#proctoring-drag-handle {
    background: var(--zi-primary-600) !important;
}

/* Correct status badges to prevent old green backgrounds */
.tag-available, .badge-passed, .status-pill.active {
    background-color: var(--zi-primary-50) !important;
    color: var(--zi-primary-600) !important;
    border: 1px solid rgba(79, 70, 229, 0.15) !important;
}

[data-theme="dark"] .tag-available, 
[data-theme="dark"] .badge-passed, 
[data-theme="dark"] .status-pill.active {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* 5. Micro-Animations & Hover States */
.kpi-card-premium, 
.kpi-card, 
.feature-card,
.pricing-card {
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.22s ease, 
                box-shadow 0.22s ease !important;
}

.kpi-card-premium:hover, 
.kpi-card:hover, 
.feature-card:hover, 
.pricing-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .kpi-card-premium:hover, 
[data-theme="dark"] .kpi-card:hover, 
[data-theme="dark"] .feature-card:hover, 
[data-theme="dark"] .pricing-card:hover {
    box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

/* Tab indicator slide line effect */
.tab-btn {
    position: relative;
}
.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--zi-primary-600);
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), left 0.2s ease;
}
.tab-btn.active::after {
    width: 100%;
    left: 0;
}

/* Option Cards Hover Micro-Zoom */
.option-card {
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.option-card:hover {
    transform: scale(1.01);
}

/* Pulsing red glow for timer under 5 mins */
.exam-timer.danger {
    animation: dangerTimerPulse 1.2s infinite ease-in-out;
}
@keyframes dangerTimerPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; text-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
    100% { transform: scale(1); opacity: 1; }
}

/* 6. Empty State Components */
.empty-state-wrapper, .empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    background: var(--zi-bg-card, #FFFFFF);
    border: 1px dashed var(--zi-border, #E5E7EB) !important;
    border-radius: 16px;
    text-align: center;
}
.empty-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--zi-primary-50, rgba(79, 70, 229, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    color: var(--zi-primary-600) !important;
    font-size: 1.75rem;
}

/* 7. Loading States & Skeleton Shimmers (Linear-style) */
@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-text, .skeleton-card {
    background: linear-gradient(90deg, 
        var(--zi-bg-hover, #F3F4F6) 25%, 
        var(--zi-border, #E5E7EB) 37%, 
        var(--zi-bg-hover, #F3F4F6) 63%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite linear !important;
}

/* 8. Dark Mode Transition & Scrollbar Polishing */
body, .app-sidebar, .app-topbar, .app-content, .card {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Thin premium scrollbars in dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0B0F19;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #1F293D;
    border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #2D3A54;
}