/*
 * LCN Black Market Theme
 * CSS Variables, Colors, Light/Dark Theme Logic
 * Extracted from template-blackmarket.html
 */

/* ========================================
   CSS Variables - Dark Theme (Default)
   ======================================== */
:root {
    --bg: #0a0a0a;
    --bg-1: #0f0f0f;
    --bg-2: #151515;
    --bg-3: #1c1c1c;
    --border: #2a2a2a;
    --gold: #d4a017;
    --gold-dim: #a68012;
    --text: #c8c8c8;
    --text-2: #707070;
    --text-3: #a7a7a7;
    --green: #2ecc40;
    --red: #ff4136;
    --blue: #0074d9;
}

/* ========================================
   Light Theme Variables
   ======================================== */
body.light-theme {
    --bg: #f5f5f0;
    --bg-1: #fff;
    --bg-2: #eaeae5;
    --bg-3: #d5d5d0;
    --border: #c0c0b8;
    --text: #1a1a1a;
    --text-2: #606060;
    --text-3: #909090;
}

/* ========================================
   Base Reset & Typography
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Anonymous Pro', monospace;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    min-height: 100vh;
}

/* ========================================
   Theme Transition Animation
   ======================================== */
body,
body *,
body *::before,
body *::after {
    transition: 
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        fill 0.3s ease,
        stroke 0.3s ease;
}

/* Exclude elements that should not animate */
body .no-theme-transition,
body .no-theme-transition *,
body input,
body textarea,
body select,
body button,
body a:hover,
body .btn:hover,
body [class*="anim"],
body [class*="pulse"],
body [class*="spin"],
body .live-dot,
body .chat-online-dot {
    transition: none;
}

/* Re-enable specific transitions for interactive elements */
body input,
body textarea,
body select {
    transition: 
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

body button,
body .btn,
body a {
    transition: 
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


a {
    color: inherit;
    text-decoration: none;
}

/* ========================================
   Color Utility Classes
   ======================================== */
.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-blue { color: var(--blue); }
.text-muted { color: var(--text-2); }
.text-dim { color: var(--text-3); }

.bg-gold { background: var(--gold); }
.bg-green { background: var(--green); }
.bg-red { background: var(--red); }

.border-gold { border-color: var(--gold); }
.border-green { border-color: var(--green); }
.border-red { border-color: var(--red); }

/* ========================================
   Filter Form Styles
   ======================================== */
.filter-form {
    padding: 12px 16px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.filter-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.filter-input {
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    border-radius: 4px;
    min-width: 150px;
}

.filter-input:focus {
    outline: none;
    border-color: var(--gold);
}

.filter-select {
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    min-width: 100px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--gold);
}

.filter-btn {
    background: var(--gold);
    color: #000;
    border: none;
    padding: 8px 16px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
}

.filter-btn:hover {
    background: var(--gold-dim);
}

.filter-btn-reset {
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

.filter-btn-reset:hover {
    background: var(--border);
}

/* Filter Form Responsive */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .filter-input,
    .filter-select {
        flex: 1;
        min-width: auto;
    }
    
    .filter-group:last-child {
        justify-content: flex-end;
    }
}