/* Retro Collections - Light Theme (Windows 2.0 / 286 Style) */
/* Authentic Windows 2.0 color palette and aesthetic */

:root[data-theme="light"] {
    /* Windows 2.0 Primary Colors */
    --color-primary: #000080;          /* Windows Navy Blue */
    --color-primary-hover: #0000a0;
    --color-primary-dim: #000040;
    
    /* Windows 2.0 Background - Classic gray */
    --color-bg: #c0c0c0;               /* Windows Gray */
    --color-bg-secondary: #a0a0a0;     /* Darker gray */
    --color-bg-tertiary: #808080;
    --color-bg-card: #ffffff;          /* Window background */
    --color-bg-input: #ffffff;
    
    /* Text Colors */
    --color-text: #000000;
    --color-text-secondary: #404040;
    --color-text-muted: #808080;
    --color-text-accent: #000080;      /* Navy */
    
    /* Border Colors - Windows 3D effect */
    --color-border: #808080;
    --color-border-light: #ffffff;
    --color-border-dark: #404040;
    --color-border-focus: #000080;
    
    /* Status Colors */
    --color-success: #008000;          /* Windows Green */
    --color-warning: #808000;          /* Windows Olive */
    --color-error: #800000;            /* Windows Maroon */
    --color-info: #000080;             /* Windows Navy */
    
    /* Category Colors */
    --color-software: #800080;         /* Windows Purple */
    --color-hardware: #008080;         /* Windows Teal */
    --color-books: #808000;            /* Windows Olive */
    
    /* Shadows - Windows 3D beveled effect */
    --shadow-inset: inset 1px 1px 0 var(--color-border-dark), inset -1px -1px 0 var(--color-border-light);
    --shadow-outset: inset -1px -1px 0 var(--color-border-dark), inset 1px 1px 0 var(--color-border-light);
    --shadow-card: none;
    
    /* Border style */
    --border-pixel: 2px solid;
}

/* Light theme base */
[data-theme="light"] body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Remove scanlines in light mode */
[data-theme="light"] body::before,
[data-theme="light"] body::after {
    display: none;
}

/* Links - Windows style */
[data-theme="light"] a {
    color: var(--color-primary);
    text-decoration: underline;
}

[data-theme="light"] a:hover {
    color: var(--color-primary-hover);
}

/* Buttons - Windows 2.0 3D style */
[data-theme="light"] .btn {
    background-color: var(--color-bg);
    color: var(--color-text);
    border: none;
    box-shadow: 
        inset -2px -2px 0 var(--color-border-dark),
        inset 2px 2px 0 var(--color-border-light),
        inset -3px -3px 0 var(--color-border),
        inset 3px 3px 0 #e0e0e0;
    padding: 8px 16px;
}

[data-theme="light"] .btn:hover {
    background-color: #d0d0d0;
}

[data-theme="light"] .btn:active {
    box-shadow: 
        inset 2px 2px 0 var(--color-border-dark),
        inset -2px -2px 0 var(--color-border-light);
    padding: 9px 15px 7px 17px;
}

[data-theme="light"] .btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
}

[data-theme="light"] .btn-danger {
    background-color: var(--color-bg);
    color: var(--color-error);
}

[data-theme="light"] .btn-danger:hover {
    background-color: var(--color-error);
    color: #ffffff;
}

/* Cards - Windows 2.0 window style */
[data-theme="light"] .card {
    background-color: var(--color-bg-card);
    border: none;
    box-shadow: 
        inset -2px -2px 0 var(--color-border-dark),
        inset 2px 2px 0 var(--color-border-light),
        inset -3px -3px 0 var(--color-border),
        inset 3px 3px 0 #e0e0e0;
    padding: 0;
    margin-bottom: 20px;
}

[data-theme="light"] .card::before {
    display: none;
}

[data-theme="light"] .card-header {
    background: linear-gradient(90deg, var(--color-primary) 0%, #4040a0 100%);
    color: #ffffff;
    padding: 4px 8px;
    margin: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
}

[data-theme="light"] .card-header h1,
[data-theme="light"] .card-header h2,
[data-theme="light"] .card-header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 0.75rem;
}

/* Card body padding */
[data-theme="light"] .card > *:not(.card-header) {
    padding: 12px;
}

/* Forms - Windows style */
[data-theme="light"] .form-group {
    margin-bottom: 16px;
}

[data-theme="light"] .form-label {
    color: var(--color-text);
    margin-bottom: 4px;
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background-color: var(--color-bg-input);
    color: var(--color-text);
    border: none;
    box-shadow: 
        inset 2px 2px 0 var(--color-border-dark),
        inset -2px -2px 0 var(--color-border-light);
    padding: 6px 8px;
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
    outline: 2px dotted var(--color-primary);
    outline-offset: 2px;
    box-shadow: 
        inset 2px 2px 0 var(--color-border-dark),
        inset -2px -2px 0 var(--color-border-light);
}

/* Tables - Windows style */
[data-theme="light"] .table {
    background-color: var(--color-bg-card);
    border: none;
    box-shadow: 
        inset 2px 2px 0 var(--color-border-dark),
        inset -2px -2px 0 var(--color-border-light);
}

[data-theme="light"] .table th,
[data-theme="light"] .table td {
    border: 1px solid var(--color-border);
    padding: 6px 8px;
}

[data-theme="light"] .table th {
    background-color: var(--color-bg);
    color: var(--color-text);
    box-shadow: 
        inset -1px -1px 0 var(--color-border-dark),
        inset 1px 1px 0 var(--color-border-light);
}

[data-theme="light"] .table tr:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Navigation - Windows 2.0 menu bar */
[data-theme="light"] .navbar {
    background-color: var(--color-bg);
    border-bottom: none;
    box-shadow: 
        inset -1px -1px 0 var(--color-border-dark),
        inset 1px 1px 0 var(--color-border-light);
    padding: 2px 8px;
}

[data-theme="light"] .navbar::after {
    display: none;
}

[data-theme="light"] .navbar-brand {
    color: var(--color-text);
    text-shadow: none;
    padding: 4px 8px;
}

[data-theme="light"] .navbar-nav {
    gap: 0;
}

[data-theme="light"] .nav-link {
    color: var(--color-text);
    padding: 4px 12px;
    border: none;
}

[data-theme="light"] .nav-link:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    text-shadow: none;
}

[data-theme="light"] .nav-link.active {
    background-color: var(--color-primary);
    color: #ffffff;
    text-shadow: none;
    border: none;
}

/* Badges - Windows style */
[data-theme="light"] .badge {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: 
        inset -1px -1px 0 var(--color-border-dark),
        inset 1px 1px 0 var(--color-border-light);
}

[data-theme="light"] .badge-software {
    color: var(--color-software);
    border-color: var(--color-software);
}

[data-theme="light"] .badge-hardware {
    color: var(--color-hardware);
    border-color: var(--color-hardware);
}

[data-theme="light"] .badge-books {
    color: var(--color-books);
    border-color: var(--color-books);
}

/* Alerts - Windows message box style */
[data-theme="light"] .alert {
    background-color: var(--color-bg-card);
    border: none;
    box-shadow: 
        inset -2px -2px 0 var(--color-border-dark),
        inset 2px 2px 0 var(--color-border-light),
        inset -3px -3px 0 var(--color-border),
        inset 3px 3px 0 #e0e0e0;
    padding: 12px 16px;
}

[data-theme="light"] .alert::before {
    content: "⚠";
    margin-right: 8px;
}

[data-theme="light"] .alert-success {
    background-color: var(--color-bg-card);
    color: var(--color-success);
}

[data-theme="light"] .alert-success::before {
    content: "✓";
}

[data-theme="light"] .alert-error {
    background-color: var(--color-bg-card);
    color: var(--color-error);
}

[data-theme="light"] .alert-error::before {
    content: "✕";
}

[data-theme="light"] .alert-warning {
    background-color: var(--color-bg-card);
    color: var(--color-warning);
}

[data-theme="light"] .alert-info {
    background-color: var(--color-bg-card);
    color: var(--color-info);
}

[data-theme="light"] .alert-info::before {
    content: "ℹ";
}

/* Pagination - Windows style */
[data-theme="light"] .pagination-item {
    background-color: var(--color-bg);
    border: none;
    box-shadow: 
        inset -1px -1px 0 var(--color-border-dark),
        inset 1px 1px 0 var(--color-border-light);
    color: var(--color-text);
}

[data-theme="light"] .pagination-item:hover,
[data-theme="light"] .pagination-item.active {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Thumbnail */
[data-theme="light"] .thumbnail {
    border: none;
    box-shadow: 
        inset 2px 2px 0 var(--color-border-dark),
        inset -2px -2px 0 var(--color-border-light);
}

/* For sale indicator */
[data-theme="light"] .for-sale-badge {
    background-color: var(--color-warning);
    color: #ffffff;
    animation: none;
    box-shadow: 
        inset -1px -1px 0 #404000,
        inset 1px 1px 0 #c0c000;
}

/* Theme toggle */
[data-theme="light"] .theme-toggle {
    background-color: var(--color-bg);
    border: none;
    box-shadow: 
        inset -1px -1px 0 var(--color-border-dark),
        inset 1px 1px 0 var(--color-border-light);
    color: var(--color-text);
}

[data-theme="light"] .theme-toggle:hover {
    background-color: #d0d0d0;
}

/* Scrollbar - Windows style */
[data-theme="light"] ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--color-bg);
    box-shadow: 
        inset 2px 2px 0 var(--color-border-dark),
        inset -2px -2px 0 var(--color-border-light);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--color-bg);
    box-shadow: 
        inset -2px -2px 0 var(--color-border-dark),
        inset 2px 2px 0 var(--color-border-light);
}

[data-theme="light"] ::-webkit-scrollbar-button {
    background: var(--color-bg);
    box-shadow: 
        inset -1px -1px 0 var(--color-border-dark),
        inset 1px 1px 0 var(--color-border-light);
    height: 16px;
    width: 16px;
}

/* Selection */
[data-theme="light"] ::selection {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Desktop pattern background (optional) */
[data-theme="light"] body {
    background-image: none;
    /* Uncomment for classic Windows tiled pattern:
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23a0a0a0'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23a0a0a0'/%3E%3C/svg%3E");
    */
}

/* Window close/minimize buttons style for cards */
[data-theme="light"] .card-header::after {
    content: "▬ □";
    margin-left: auto;
    font-size: 0.6rem;
    opacity: 0.8;
}