/* ====================================
   HORADRIC AI - ENHANCED STYLES v3.0
   Modern CSS with Logical Properties, Layers, and Performance
   ==================================== */

/* ====================================
   CSS LAYERS for Better Cascade Control
   ==================================== */
@layer reset, base, components, utilities, overrides;

@layer reset {
    /* Modern CSS Reset */
    *, *::before, *::after { 
        box-sizing: border-box; 
        margin: 0; 
        padding: 0; 
    }
    
    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Respect user's motion preferences */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer base {
    :root {
        /* Color Tokens */
        --bg-color: #121212;
        --card-bg: #1e1e1e;
        --text-color: #e0e0e0;
        --accent-color: #d32f2f;
        --button-hover: #b71c1c;
        --disabled-color: #555;
        --modal-overlay: rgba(0, 0, 0, 0.85);
        
        /* Diablo Rarity Colors */
        --color-common: #adadad;
        --color-magic: #6969ff;
        --color-rare: #ffff00;
        --color-legendary: #ff8000;
        --color-unique: #c7b377;
        --color-mythic: #e770ff;
        --color-error: #ff3333;
        --color-success: #4caf50;
        --color-info: #2196f3;
        --color-warning: #ff9800;
        --color-compare: #9c27b0;
        
        /* Spacing Scale */
        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;
        
        /* Typography */
        --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-display: Georgia, serif;
        --font-size-base: 16px;
        --line-height-base: 1.5;
        
        /* Borders & Radius */
        --border-radius-sm: 4px;
        --border-radius-md: 8px;
        --border-radius-lg: 12px;
        --border-width: 2px;
        
        /* Transitions */
        --transition-fast: 0.15s ease;
        --transition-base: 0.3s ease;
        --transition-slow: 0.5s ease;
        
        /* Z-Index Scale */
        --z-dropdown: 1000;
        --z-sticky: 1020;
        --z-fixed: 1030;
        --z-modal-backdrop: 1040;
        --z-modal: 1050;
        --z-popover: 1060;
        --z-tooltip: 1070;
    }

    body { 
        font-family: var(--font-body);
        background: var(--bg-color);
        color: var(--text-color);
        padding-block: var(--space-md);
        padding-inline: var(--space-md);
        display: flex;
        flex-direction: column;
        align-items: center;
        min-block-size: 100vh;
        line-height: var(--line-height-base);
        font-size: var(--font-size-base);
    }
    
    /* Screen Reader Only */
    .sr-only {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    
    /* Skip Link */
    .skip-link { 
        position: absolute; 
        inset-block-start: -40px; 
        inset-inline-start: 0; 
        background: var(--accent-color); 
        color: white; 
        padding: var(--space-sm); 
        z-index: var(--z-tooltip);
        border-start-end-radius: var(--border-radius-sm);
        border-end-end-radius: var(--border-radius-sm);
    }
    .skip-link:focus { 
        inset-block-start: 0; 
        outline: 2px solid white;
        outline-offset: 2px;
    }
}

@layer components {
    /* Offline Banner */
    .offline-banner { 
        display: none; 
        position: fixed; 
        inset-block-start: 0; 
        inset-inline-start: 0; 
        inset-inline-end: 0;
        background: var(--color-warning); 
        color: #000; 
        padding-block: var(--space-md);
        padding-inline: var(--space-md);
        text-align: center; 
        font-weight: bold; 
        z-index: var(--z-fixed);
    }
    .offline-banner.show { display: block; }

    /* Header */
    header { 
        text-align: center; 
        margin-block-end: var(--space-xl);
    }
    
    h1 { 
        color: var(--accent-color); 
        font-family: var(--font-display);
        letter-spacing: 2px; 
        text-transform: uppercase; 
        margin-block: 0 var(--space-sm);
        font-size: clamp(1.5rem, 5vw, 2.5rem); 
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    
    .subtitle { 
        color: #999; 
        font-size: 0.9rem; 
        font-weight: 500; 
        letter-spacing: 1px; 
    }

    /* Container */
    .container { 
        inline-size: 100%; 
        max-inline-size: 600px;
        background: var(--card-bg); 
        padding: var(--space-xl);
        border-radius: var(--border-radius-md);
        box-shadow: 0 4px 20px rgba(0,0,0,0.7); 
        border: 1px solid #333; 
        margin-block-end: var(--space-xl);
    }
    
    /* Container Query Support */
    @supports (container-type: inline-size) {
        .container {
            container-type: inline-size;
            container-name: main-container;
        }
        
        @container main-container (inline-size > 500px) {
            .action-buttons {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: var(--space-sm);
            }
        }
        
        @container main-container (inline-size <= 500px) {
            .action-buttons {
                display: grid;
                grid-template-columns: 1fr;
                gap: var(--space-sm);
            }
        }
    }

    /* Form Elements */
    .input-group { 
        margin-block-end: var(--space-lg);
    }
    
    label { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        margin-block-end: var(--space-xs);
        font-weight: bold; 
        color: #ccc; 
        font-size: 0.9rem; 
        text-transform: uppercase; 
        letter-spacing: 0.5px; 
    }
    
    input, select, textarea { 
        padding-block: var(--space-sm);
        padding-inline: var(--space-sm);
        border-radius: var(--border-radius-sm);
        border: var(--border-width) solid #444; 
        background: #2c2c2c; 
        color: white; 
        font-size: 16px; /* Prevent iOS zoom */
        inline-size: 100%;
        transition: all var(--transition-fast);
        font-family: inherit; 
    }
    
    input:focus, select:focus { 
        outline: none; 
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
    }
    
    /* Improve focus visibility for keyboard navigation */
    input:focus-visible, 
    select:focus-visible,
    button:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
    
    input[type="file"] { 
        margin-block-start: var(--space-sm);
        padding-block: var(--space-md);
        padding-inline: var(--space-md);
        border: var(--border-width) dashed #444; 
        cursor: pointer; 
    }
    
    .input-hint { 
        font-size: 0.8rem; 
        color: #999; 
        margin-block-start: var(--space-xs);
        display: block; 
    }

    /* Buttons */
    button { 
        background: var(--accent-color); 
        color: white; 
        border: none; 
        padding-block: var(--space-md);
        padding-inline: var(--space-lg);
        border-radius: var(--border-radius-sm);
        font-size: 16px; 
        cursor: pointer; 
        inline-size: 100%;
        font-weight: bold; 
        text-transform: uppercase; 
        transition: all var(--transition-base);
        
        /* Ensure minimum touch target size (44x44px) */
        min-block-size: 44px;
    }
    
    button:hover:not(:disabled) { 
        background: var(--button-hover); 
        transform: translateY(-2px); 
    }
    
    button:disabled { 
        background: var(--disabled-color); 
        cursor: not-allowed; 
        opacity: 0.6; 
        transform: none; 
    }
    
    button.secondary { 
        background: #333; 
        border: var(--border-width) solid #555; 
        color: #ccc; 
        text-transform: none; 
    }
    
    button.secondary:hover { 
        background: #444; 
        color: white; 
    }
    
    button.small { 
        padding-block: var(--space-sm);
        padding-inline: 0.875rem;
        font-size: 0.85rem; 
        inline-size: auto; 
    }
    
    button.icon-btn { 
        inline-size: auto;
        padding-block: var(--space-sm);
        padding-inline: 0.75rem;
        background: transparent; 
        border: 1px solid #555; 
    }
    
    .link-btn { 
        background: none; 
        color: var(--accent-color); 
        padding: 0; 
        text-decoration: underline; 
        text-transform: none; 
        font-weight: normal; 
        inline-size: auto;
        display: inline; 
        min-block-size: auto;
    }
    
    .help-icon { 
        background: #333; 
        color: #ccc; 
        border-radius: 50%; 
        inline-size: 22px;
        block-size: 22px;
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        font-size: 14px; 
        border: 1px solid #555;
        min-block-size: auto;
    }

    /* Mode Toggles */
    .mode-toggles button.active { 
        background-color: var(--accent-color); 
        color: white; 
        border-color: var(--accent-color); 
    }
    
    .mode-toggles button.secondary { 
        background-color: #333; 
        color: #aaa; 
    }

    /* Messages & Loading */
    .error-message, .success-message { 
        font-size: 0.85rem; 
        margin-block-start: var(--space-sm);
        padding-block: var(--space-md);
        padding-inline: var(--space-md);
        border-radius: var(--border-radius-sm);
        display: none; 
    }
    
    .error-message { 
        color: var(--color-error); 
        background: rgba(255, 51, 51, 0.15); 
        border-inline-start: 4px solid var(--color-error);
    }
    
    .success-message { 
        color: var(--color-success); 
        background: rgba(76, 175, 80, 0.15); 
        border-inline-start: 4px solid var(--color-success);
    }
    
    .show { display: block; }

    /* Progress Bar */
    .progress-container { 
        display: none; 
        margin-block-start: var(--space-md);
        background: #2c2c2c; 
        block-size: 6px;
        border-radius: var(--border-radius-sm);
        overflow: hidden; 
    }
    
    .progress-bar { 
        block-size: 100%;
        background: var(--accent-color); 
        inline-size: 0%;
        transition: inline-size var(--transition-base);
    }

    /* Loading Spinner */
    #loading { 
        display: none; 
        text-align: center; 
        margin-block-start: var(--space-xl);
    }
    
    .loading-spinner { 
        inline-size: 40px;
        block-size: 40px;
        border: 4px solid #444; 
        border-block-start-color: var(--accent-color);
        border-radius: 50%; 
        animation: spin 1s linear infinite; 
        margin-inline: auto;
        margin-block-end: var(--space-md);
    }
    
    @keyframes spin { 
        to { transform: rotate(360deg); } 
    }
    
    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .loading-spinner {
            animation: none;
            border-block-start-color: #444;
            border-inline-end-color: var(--accent-color);
        }
    }

    /* Results Area */
    #result-area { 
        margin-block-start: var(--space-md);
        background: #181818; 
        padding-block: var(--space-md);
        padding-inline: var(--space-md);
        border-radius: var(--border-radius-sm);
        border-inline-start: 6px solid #444;
        display: none; 
        word-wrap: break-word; 
    }
    
    #result-area strong { 
        color: #fff; 
        font-size: 1.2rem; 
        display: block; 
        margin-block-end: var(--space-sm);
    }
    
    /* Rarity-specific border colors */
    #result-area.rarity-common { border-inline-start-color: var(--color-common); }
    #result-area.rarity-magic { border-inline-start-color: var(--color-magic); }
    #result-area.rarity-rare { border-inline-start-color: var(--color-rare); }
    #result-area.rarity-legendary { border-inline-start-color: var(--color-legendary); }
    #result-area.rarity-unique { border-inline-start-color: var(--color-unique); }
    #result-area.rarity-mythic { border-inline-start-color: var(--color-mythic); }
    #result-area.rarity-compare { border-inline-start-color: var(--color-compare); }

    /* Price Checker */
    .price-section { 
        margin-block-start: var(--space-md);
        background: #1a1a1a; 
        padding-block: var(--space-md);
        padding-inline: var(--space-md);
        border: var(--border-width) solid #333; 
    }
    
    .price-header { 
        display: flex; 
        justify-content: space-between; 
        margin-block-end: var(--space-md);
    }
    
    .price-row { 
        display: flex; 
        justify-content: space-between; 
        padding-block: var(--space-sm);
        padding-inline: var(--space-sm);
        background: #252525; 
        margin-block-end: var(--space-xs);
        border-radius: var(--border-radius-sm);
    }
    
    .price-value-high { color: var(--color-mythic); }
    .price-value-medium { color: var(--color-legendary); }

    /* Advanced Drawer */
    .advanced-drawer {
        background: #15151a;
        border: 1px solid #333;
        border-radius: var(--border-radius-sm);
        padding-block: var(--space-lg);
        padding-inline: var(--space-lg);
        margin-block-start: var(--space-sm);
        box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
        animation: slideDown var(--transition-base);
    }
    
    @keyframes slideDown { 
        from { opacity: 0; transform: translateY(-10px); } 
        to { opacity: 1; transform: translateY(0); } 
    }

    .drawer-section { 
        margin-block-end: var(--space-lg);
    }
    
    .drawer-section:last-child { 
        margin-block-end: 0; 
    }
    
    .drawer-title { 
        color: var(--accent-color); 
        font-size: 0.9rem; 
        margin-block-end: var(--space-xs);
        text-transform: uppercase; 
    }
    
    .drawer-subtitle { 
        color: #777; 
        font-size: 0.8rem; 
        margin-block-end: var(--space-md);
        font-style: italic; 
    }

    .stat-checkboxes { 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); 
        gap: var(--space-sm);
    }
    
    .checkbox-label { 
        display: flex; 
        align-items: center; 
        justify-content: flex-start; 
        gap: var(--space-sm);
        font-size: 0.85rem; 
        color: #ccc; 
        cursor: pointer; 
        text-transform: none; 
        font-weight: normal; 
    }
    
    .checkbox-label input { 
        inline-size: auto;
        margin: 0; 
    }
    
    .mechanic-select { 
        font-size: 0.85rem; 
        padding-block: var(--space-sm);
        padding-inline: var(--space-sm);
    }

    /* Preview Image */
    .preview-img { 
        max-inline-size: 100%;
        margin-block-start: var(--space-lg);
        border-radius: var(--border-radius-sm);
    }

    /* History Section - Recent Scans Style */
    .history-section { 
        inline-size: 100%;
        max-inline-size: 600px;
        margin-block-start: 30px;
        background-color: var(--card-bg);
        padding: 20px;
        border-radius: 8px;
        border: 1px solid #333;
    }
    
    .history-title { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        margin-block-end: 15px;
        padding-block-end: 10px;
        border-block-end: 1px solid #444;
    }
    
    .history-title h2 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-color);
    }
    
    .clear-history { 
        background-color: transparent;
        color: var(--accent-color);
        border: 1px solid var(--accent-color);
        padding: 6px 12px;
        font-size: 0.85rem;
        inline-size: auto;
    }
    
    .clear-history:hover {
        background-color: var(--accent-color);
        color: white;
    }
    
    .history-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .history-item { 
        background-color: #2c2c2c;
        padding: 12px;
        border-radius: 4px;
        border: 1px solid #444;
        cursor: pointer; 
        transition: all 0.2s;
        position: relative;
    }
    
    .history-item:hover,
    .history-item:focus { 
        border-color: var(--accent-color);
        transform: translateX(5px);
        outline: none;
    }
    
    /* Rarity-specific border colors */
    .history-item.rarity-common { border-inline-start: 4px solid var(--color-common); }
    .history-item.rarity-magic { border-inline-start: 4px solid var(--color-magic); }
    .history-item.rarity-rare { border-inline-start: 4px solid var(--color-rare); }
    .history-item.rarity-legendary { border-inline-start: 4px solid var(--color-legendary); }
    .history-item.rarity-unique { border-inline-start: 4px solid var(--color-unique); }
    .history-item.rarity-mythic { border-inline-start: 4px solid var(--color-mythic); }

    /* Item Header */
    .history-header { 
        display: flex; 
        justify-content: space-between;
        font-size: 0.75rem; 
        color: #888; 
        margin-block-end: 5px;
    }
    
    .history-name { 
        font-size: 0.9rem;
        color: var(--text-color);
        font-weight: bold;
        margin-block-end: 4px;
        padding-inline-end: 30px;
    }
    
    /* Verdict badge - compact inline style */
    .history-verdict {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-inline-start: 6px;
    }
    
    .history-verdict.keep {
        background-color: rgba(76, 175, 80, 0.2);
        color: var(--color-success);
        border: 1px solid var(--color-success);
    }
    
    .history-verdict.salvage {
        background-color: rgba(255, 152, 0, 0.2);
        color: #ff9800;
        border: 1px solid #ff9800;
    }
    
    /* Insight text - compact, subtle */
    .history-insight { 
        font-size: 0.8rem;
        color: #999;
        margin-block-start: 4px;
        line-height: 1.3;
        font-style: italic;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-inline-end: 30px;
    }

    /* Delete Button - Exact Reference Style */
    .history-delete { 
        position: absolute; 
        inset-block-start: 8px;
        inset-inline-end: 8px;
        background-color: transparent;
        color: #888;
        border: none;
        font-size: 20px;
        inline-size: 24px;
        block-size: 24px;
        padding: 0;
        cursor: pointer;
        border-radius: 50%;
        transition: all 0.2s;
    }
    
    .history-delete:hover, 
    .history-delete:focus { 
        background-color: var(--color-error); 
        color: white;
        transform: none;
    }

    /* Modals */
    .modal-overlay { 
        display: none; 
        position: fixed; 
        inset: 0;
        background: var(--modal-overlay); 
        z-index: var(--z-modal-backdrop);
        justify-content: center; 
        align-items: center; 
    }
    
    .modal-content { 
        background: var(--card-bg); 
        padding-block: var(--space-xl);
        padding-inline: var(--space-xl);
        border-radius: var(--border-radius-md);
        max-inline-size: 500px;
        inline-size: 90%;
        max-block-size: 85vh;
        overflow-y: auto; 
        border: var(--border-width) solid #555; 
        position: relative; 
    }
    
    .modal-close { 
        position: absolute; 
        inset-block-start: var(--space-md);
        inset-inline-end: var(--space-lg);
        background: none; 
        color: #888; 
        font-size: 32px; 
        inline-size: auto;
        padding: 0; 
        line-height: 1;
        min-block-size: auto;
    }

    /* Action Buttons */
    .action-buttons { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        gap: var(--space-sm);
        margin-block-start: var(--space-md);
    }
    
    .privacy-content { 
        max-block-size: 60vh;
        overflow-y: auto; 
        padding-inline-end: var(--space-md);
    }
    
    .privacy-content li { 
        margin-block-end: var(--space-sm);
        color: #ccc; 
    }
}

@layer utilities {
    .hidden { display: none !important; }
}

/* ====================================
   RESPONSIVE DESIGN - Mobile First
   ==================================== */

@media (max-width: 600px) {
    :root {
        --font-size-base: 14px;
    }
    
    .container {
        padding: var(--space-lg);
    }
    
    .action-buttons { 
        grid-template-columns: 1fr; 
    }
    
    .stat-checkboxes { 
        grid-template-columns: 1fr 1fr; 
    }
    
    /* History section - compact on mobile */
    .history-section {
        padding-block: var(--space-lg);
        padding-inline: var(--space-lg);
    }
    
    .history-item {
        padding-block: 10px;
        padding-inline: 10px;
    }
    
    .history-name {
        font-size: 0.875rem;
        padding-inline-end: 30px;
    }
    
    /* Slightly larger touch target on mobile */
    .history-delete { 
        inline-size: 28px;
        block-size: 28px;
    }
    
    button {
        /* Ensure minimum 44px touch targets on mobile */
        min-block-size: 44px;
    }
    
    /* Improve modal usability on mobile */
    .modal-content {
        inline-size: 95%;
        padding-block: var(--space-lg);
        padding-inline: var(--space-lg);
    }
}

/* ====================================
   TOUR GUIDE STYLES
   ==================================== */

.tour-overlay { 
    position: fixed; 
    inset: 0;
    z-index: var(--z-modal);
    pointer-events: none; 
}

.tour-backdrop { 
    position: absolute; 
    inset: 0;
    background: rgba(0, 0, 0, 0.7); 
    pointer-events: auto; 
}

.tour-spotlight { 
    position: absolute; 
    border: var(--border-width) solid var(--accent-color); 
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7); 
    border-radius: var(--border-radius-sm);
    pointer-events: none; 
    transition: all var(--transition-base);
    z-index: calc(var(--z-modal) + 10);
}

.tour-tooltip { 
    position: absolute; 
    background: var(--card-bg); 
    border: var(--border-width) solid var(--accent-color); 
    border-radius: var(--border-radius-md);
    padding-block: var(--space-xl);
    padding-inline: var(--space-xl);
    inline-size: 300px;
    max-inline-size: 90vw;
    color: #fff; 
    z-index: calc(var(--z-modal) + 20);
    pointer-events: auto; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
    opacity: 0; 
    animation: fadeIn var(--transition-base) forwards; 
}

@keyframes fadeIn { 
    to { opacity: 1; } 
}

.tour-content h3 { 
    color: var(--accent-color); 
    margin-block-start: 0;
    margin-block-end: var(--space-md);
    font-size: 1.1rem; 
}

.tour-content p { 
    font-size: 0.9rem; 
    line-height: 1.5; 
    color: #ddd; 
    margin-block-end: var(--space-xl);
}

.tour-controls { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.tour-btn { 
    padding-block: var(--space-sm);
    padding-inline: var(--space-lg);
    border: none; 
    border-radius: var(--border-radius-sm);
    cursor: pointer; 
    font-weight: bold; 
    font-size: 0.9rem; 
    inline-size: auto;
}

.tour-next { 
    background: var(--accent-color); 
    color: white; 
}

.tour-skip { 
    background: transparent; 
    color: #888; 
    border: 1px solid #444; 
}

.tour-skip:hover { 
    color: #fff; 
    border-color: #666; 
}

.tour-step-counter { 
    color: #666; 
    font-size: 0.8rem; 
}

/* ====================================
   PRINT STYLES
   ==================================== */

@media print {
    body {
        background: white;
        color: black;
    }
    
    .sv-back-nav,
    .skip-link,
    .offline-banner,
    .demo-section,
    button,
    .footer {
        display: none !important;
    }
    
    .container {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    #result-area {
        page-break-inside: avoid;
    }
}

/* ====================================
   HIGH CONTRAST MODE
   ==================================== */

@media (prefers-contrast: high) {
    :root {
        --border-width: 3px;
    }
    
    button, input, select {
        border-width: 2px;
    }
    
    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
        outline-width: 3px;
    }
}