/**
 * YogiChain Premium Black & Gold Theme
 * User-End Complete Updated Styling
 * Fixes responsive edges and enhances premium look
 */

/* ===== Premium Black & Gold Variables ===== */
:root {
    /* Pure Premium Black */
    --premium-black: #000000;
    --premium-black-soft: #050505;
    --premium-black-card: #0A0A0A;
    --premium-black-elevated: #111111;
    --premium-black-border: #1A1A1A;

    /* Royal Gold Palette */
    --premium-gold: #D4AF37;
    --premium-gold-light: #F4D56B;
    --premium-gold-dark: #A68B2C;
    --premium-gold-glow: rgba(212, 175, 55, 0.3);
    --premium-gold-subtle: rgba(212, 175, 55, 0.08);

    /* Text on Black */
    --premium-text: #FFFFFF;
    --premium-text-secondary: #B0B0B0;
    --premium-text-muted: #666666;

    /* Premium Gradients */
    --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #A68B2C 100%);
    --gradient-gold-shimmer: linear-gradient(135deg, #F4D56B 0%, #D4AF37 50%, #A68B2C 100%);
    --gradient-black: linear-gradient(180deg, #000000 0%, #0A0A0A 100%);

    /* Premium Shadows */
    --shadow-gold-sm: 0 2px 12px rgba(212, 175, 55, 0.15);
    --shadow-gold-md: 0 4px 24px rgba(212, 175, 55, 0.2);
    --shadow-gold-lg: 0 8px 40px rgba(212, 175, 55, 0.25);
    --shadow-gold-glow: 0 0 40px rgba(212, 175, 55, 0.2);

    /* Premium Borders */
    --border-gold: 1px solid rgba(212, 175, 55, 0.2);
    --border-gold-strong: 1px solid rgba(212, 175, 55, 0.4);
    --border-subtle: 1px solid rgba(255, 255, 255, 0.06);

    /* Safe Responsive Spacing */
    --safe-edge: max(16px, env(safe-area-inset-left, 16px));
    --content-padding: clamp(12px, 4vw, 24px);
}

/* ===== Base Premium Black Background ===== */
html,
body {
    background: var(--premium-black) !important;
    color: var(--premium-text);
}

body.app-body,
.app-layout {
    background: var(--premium-black) !important;
    background-attachment: fixed;
}

/* ===== Responsive Edge Fixes ===== */
/* Container with proper edge spacing */
.container,
.app-content {
    padding-left: var(--content-padding) !important;
    padding-right: var(--content-padding) !important;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix grid edges */
.exam-grid-2025,
.stats-grid-2025,
.exam-grid {
    padding-left: var(--content-padding) !important;
    padding-right: var(--content-padding) !important;
    margin-left: 0;
    margin-right: 0;
}

/* Fix list edges */
.list-2025,
.app-list {
    margin-left: var(--content-padding) !important;
    margin-right: var(--content-padding) !important;
    border-radius: 16px;
}

/* Fix hero edges */
.hero-2025,
.app-hero {
    margin-left: var(--content-padding) !important;
    margin-right: var(--content-padding) !important;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    border-radius: 20px;
}

/* Fix section header edges */
.section-header-2025,
.app-section-header {
    padding-left: var(--content-padding) !important;
    padding-right: var(--content-padding) !important;
}

/* Fix quick actions edges */
.quick-actions-2025,
.quick-actions {
    padding-left: var(--content-padding) !important;
    padding-right: var(--content-padding) !important;
}

/* ===== Premium Black Cards ===== */
.card-2025,
.exam-card-2025,
.stat-card-2025,
.list-2025,
.card-gradient {
    background: var(--premium-black-card) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
    transition: all 0.3s ease;
}

.card-2025:hover,
.exam-card-2025:hover {
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: var(--shadow-gold-md);
}

/* ===== Premium Gold Accents ===== */
/* Buttons */
.btn-2025-gold,
.btn-premium,
.app-hero-btn {
    background: var(--gradient-gold) !important;
    color: #000000 !important;
    font-weight: 700;
    box-shadow: var(--shadow-gold-md);
    border: none;
}

.btn-2025-gold:hover,
.btn-premium:hover,
.app-hero-btn:hover {
    background: var(--gradient-gold-shimmer) !important;
    box-shadow: var(--shadow-gold-lg);
    transform: translateY(-2px);
}

/* Active chips */
.chip-2025.active,
.quick-action-chip.active {
    background: var(--gradient-gold) !important;
    color: #000000 !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-gold-sm);
    font-weight: 700;
}

/* Navigation active states */
.nav-item-2025.active,
.bottom-nav-item.active {
    color: var(--premium-gold) !important;
}

.nav-item-2025.active::before,
.bottom-nav-item.active::before {
    background: var(--gradient-gold) !important;
}

.mobile-menu-link.active {
    background: var(--premium-gold-subtle) !important;
    color: var(--premium-gold) !important;
    border-left-color: var(--premium-gold) !important;
}

/* ===== Premium Section Headers ===== */
.section-header-2025 h2::before,
.app-section-header h2::before {
    background: var(--gradient-gold) !important;
    width: 4px;
    border-radius: 2px;
}

.section-header-2025 a,
.app-section-header a {
    color: var(--premium-gold) !important;
}

/* ===== Premium Hero Styling ===== */
.hero-2025 {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(0, 0, 0, 0.95) 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    position: relative;
    overflow: hidden;
}

.hero-2025::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.hero-2025 h1 span {
    background: var(--gradient-gold-shimmer) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
}

/* ===== Premium Stats Cards ===== */
.stat-card-2025,
.app-stat-card {
    background: var(--premium-black-card) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
    position: relative;
}

.stat-card-2025::before,
.app-stat-card::before {
    background: var(--gradient-gold) !important;
    height: 3px;
}

/* ===== Premium Exam Cards ===== */
.exam-card-2025,
.exam-card {
    background: var(--premium-black-card) !important;
    border: 1px solid rgba(212, 175, 55, 0.08) !important;
}

.exam-card-2025:hover,
.exam-card:hover {
    border-color: rgba(212, 175, 55, 0.25) !important;
    box-shadow: var(--shadow-gold-md), 0 8px 32px rgba(0, 0, 0, 0.5);
    transform: translateY(-6px);
}

/* Keep exam card text white - prevent any color change on hover/active/selected */
.exam-card-2025 h3,
.exam-card h3,
.exam-card-2025:hover h3,
.exam-card:hover h3,
.exam-card-2025:active h3,
.exam-card:active h3,
.exam-card-2025:focus h3,
.exam-card:focus h3,
.exam-card-2025:visited h3,
.exam-card:visited h3 {
    color: #FFFFFF !important;
}

.exam-card-2025 p,
.exam-card p,
.exam-card-2025:hover p,
.exam-card:hover p,
.exam-card-2025:active p,
.exam-card:active p,
.exam-card-2025:focus p,
.exam-card:focus p,
.exam-card-2025:visited p,
.exam-card:visited p {
    color: #B0B0B0 !important;
}

/* Prevent link color inheritance in exam cards */
a.exam-card-2025,
a.exam-card,
a.exam-card-2025:hover,
a.exam-card:hover,
a.exam-card-2025:active,
a.exam-card:active,
a.exam-card-2025:focus,
a.exam-card:focus,
a.exam-card-2025:visited,
a.exam-card:visited {
    color: inherit !important;
    text-decoration: none !important;
}

.exam-card-2025::before,
.exam-card::before {
    background: var(--gradient-gold) !important;
    opacity: 0;
    transition: opacity 0.3s;
}

.exam-card-2025:hover::before,
.exam-card:hover::before {
    opacity: 1;
}

/* ===== Premium List Items ===== */
.list-item-2025,
.app-list-item {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

.list-item-2025:hover,
.app-list-item:hover {
    background: rgba(212, 175, 55, 0.05) !important;
}

/* ===== Premium App Header ===== */
.app-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.9) 100%) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.app-header-btn {
    background: rgba(212, 175, 55, 0.1) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: var(--premium-gold) !important;
}

.app-header-btn:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    box-shadow: var(--shadow-gold-sm);
}

/* ===== Premium Mobile Menu ===== */
.mobile-menu {
    background: linear-gradient(180deg, #0A0A0A 0%, #000000 100%) !important;
    border-right: 1px solid rgba(212, 175, 55, 0.15);
}

.mobile-menu-header {
    background: linear-gradient(135deg, #111111 0%, #0A0A0A 100%) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.mobile-menu-avatar {
    background: var(--gradient-gold) !important;
    box-shadow: var(--shadow-gold-md);
}

.mobile-menu-premium {
    background: var(--gradient-gold) !important;
    color: #000000 !important;
    box-shadow: var(--shadow-gold-sm);
}

.mobile-menu-section {
    color: var(--premium-gold) !important;
}

/* ===== Premium Bottom Navigation ===== */
.bottom-nav {
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.98) 0%, rgba(0, 0, 0, 0.99) 100%) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.12) !important;
}

/* ===== Premium Form Elements ===== */
.input-2025,
.form-input,
.form-select,
.form-textarea,
.app-search-input {
    background: var(--premium-black-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--premium-text) !important;
}

.input-2025:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.app-search-input:focus-within {
    border-color: var(--premium-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}

/* ===== Premium Tabs ===== */
.tabs-2025,
.app-tabs {
    background: var(--premium-black-card) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.tab-2025.active,
.app-tab.active {
    color: var(--premium-gold) !important;
}

.tab-indicator-2025,
.app-tab.active::after {
    background: var(--gradient-gold) !important;
}

/* ===== Premium Progress ===== */
.progress-bar-2025,
.progress-bar {
    background: var(--gradient-gold) !important;
}

.progress-circle-fill {
    stroke: var(--premium-gold) !important;
}

/* ===== Premium Badges ===== */
.badge-2025,
.badge-premium {
    background: var(--gradient-gold) !important;
    color: #000000 !important;
    font-weight: 700;
    box-shadow: var(--shadow-gold-sm);
}

/* ===== Premium Empty States ===== */
.app-empty-state svg {
    color: var(--premium-gold);
    opacity: 0.3;
}

/* ===== Premium Toast ===== */
.toast-2025,
.app-toast {
    background: var(--premium-black-elevated) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

/* ===== Premium Loading Bar ===== */
.instant-loading-bar {
    background: var(--gradient-gold) !important;
}

/* ===== Premium FAB ===== */
.fab {
    background: var(--gradient-gold) !important;
    box-shadow: var(--shadow-gold-lg);
}

.fab:hover {
    box-shadow: 0 12px 48px rgba(212, 175, 55, 0.4);
}

/* ===== Premium CTA Cards ===== */
.card-gradient {
    background: var(--premium-black-elevated) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.card-gradient::before {
    background: linear-gradient(135deg,
            rgba(212, 175, 55, 0.3),
            rgba(166, 139, 44, 0.2),
            rgba(212, 175, 55, 0.3)) !important;
}

/* ===== Premium Scrollbar ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--premium-black);
}

::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.5);
}

/* ===== Responsive Edge Fixes - Mobile ===== */
@media (max-width: 480px) {
    :root {
        --content-padding: 12px;
    }

    .hero-2025,
    .app-hero {
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding: 24px 16px;
        border-radius: 16px;
    }

    .exam-grid-2025,
    .exam-grid {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid-2025 {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .list-2025,
    .app-list {
        margin-left: 8px !important;
        margin-right: 8px !important;
        border-radius: 12px;
    }
}

@media (max-width: 380px) {
    .stats-grid-2025 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .stat-card-2025 {
        padding: 12px 8px;
    }

    .stat-value-2025 {
        font-size: 22px;
    }

    .stat-label-2025 {
        font-size: 10px;
    }
}

/* ===== Responsive Edge Fixes - Tablet ===== */
@media (min-width: 768px) {
    :root {
        --content-padding: 24px;
    }

    .exam-grid-2025,
    .exam-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-2025,
    .app-hero {
        max-width: 900px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .list-2025,
    .app-list {
        max-width: 900px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===== Responsive Edge Fixes - Desktop ===== */
@media (min-width: 1024px) {
    :root {
        --content-padding: 32px;
    }

    .exam-grid-2025,
    .exam-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1100px;
    }

    .hero-2025,
    .app-hero,
    .list-2025,
    .app-list {
        max-width: 1100px;
    }
}

/* ===== Fix Content Overflow ===== */
.app-content {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* ===== Premium Link Colors ===== */
a {
    color: var(--premium-gold);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--premium-gold-light);
}

/* ===== Premium Text Highlights ===== */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: var(--premium-text);
}

::-moz-selection {
    background: rgba(212, 175, 55, 0.3);
    color: var(--premium-text);
}