/**
 * OpenMirror Classic Skin
 * Baseline dark-first design with soft shadows and subtle accents
 */

:root,
html,
html[data-theme="dark"] {
    --bg: #0d0d12;
    --card: #1a1a24;
    --muted: #252533;
    --text: #e8e8f0;
    --text-muted: #9595a8;
    --primary: #4a8fc7;
    --accent: #c9a961;
    --ring: #4a8fc7;
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
}

html[data-theme="light"] {
    --bg: #d8dae0;          /* Even darker background for better contrast */
    --card: #f5f5f7;        /* Slightly darker card background */
    --muted: #c8cad0;       /* Darker for better visibility */
    --text: #1a1a24;
    --text-muted: #4a4a5e;  /* Even darker text-muted for better readability */
    --primary: #2563eb;
    --accent: #d4a85e;
    --ring: #2563eb;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
}

/* Light mode: Enhanced shadows for better relief */
html[data-theme="light"] .item-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .item-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Light mode: Filters sidebar with subtle background - removed extra padding since it's already in template */

/* Light mode: Modal with enhanced shadow */
html[data-theme="light"] .modal-container > div > div {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Light mode: Darker card-body background for item icons */
html[data-theme="light"] .card-body {
    background-color: #c8cad0 !important;
}

/* Preview Mode: Hover vs Static - ONLY for cards in grid, NOT modal */
.cards-grid .card-preview {
    display: none !important;
}

/* Show static preview in "static" and "minimaliste" modes */
html[data-preview="static"] .cards-grid .card-preview,
html[data-preview="minimaliste"] .cards-grid .card-preview,
html[data-preview="minimaliste-extra"] .cards-grid .card-preview {
    display: block !important;
}

/* Adjust grid columns for compact modes - 3 columns instead of 4 */
html[data-preview="minimaliste"] .cards-grid,
html[data-preview="minimaliste-extra"] .cards-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 640px) {
    html[data-preview="minimaliste"] .cards-grid,
    html[data-preview="minimaliste-extra"] .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    html[data-preview="minimaliste"] .cards-grid,
    html[data-preview="minimaliste-extra"] .cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Modal preview is ALWAYS visible (not affected by preview mode) */
#modal-root .card-preview,
#modal-root [data-poe-item] {
    display: block !important;
}

/* Status dot with glow */
.status-dot[data-status="green"] {
    background-color: var(--success);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

.status-dot[data-status="yellow"] {
    background-color: var(--warning);
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.4);
}

.status-dot[data-status="red"] {
    background-color: var(--danger);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
}

/* Source badge (from bolt/1.html) */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.source-badge svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.9;
}

/* Fee badge gradient for paid items */
.fee-badge.fee-badge--paid {
    background: linear-gradient(135deg, var(--accent) 0%, #d4a85e 100%);
    color: var(--bg);
}

/* Modal rail variant specific styles */
.modal-container--rail .modal-rail {
    position: sticky;
    top: 0;
    max-height: 85vh;
}

/* Focus styles */
*:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Smooth transitions */
.item-card,
.modal-container button,
.modal-container a {
    transition: all 0.2s ease-in-out;
}