/*
 * Era Theme System — Three-Layer Model
 * Per UNIFIED-PLATFORM-DESIGN.md Section 15
 *
 * Layer 1: ERA (Functional) — controls which tools are available (not CSS)
 * Layer 2: THEME (Cosmetic) — this file, applied via .theme-{name} on root element
 * Layer 3: OPERATOR PREFERENCE — resolved by ThemePicker component
 *
 * Usage: <div class="position-screen era-steam theme-victorian"> ... </div>
 *
 * Themes:
 *   .theme-victorian  — Aged parchment, Playfair Display serif, amber/sepia tones
 *   .theme-terminal   — IBM 3270 phosphor, monospace, green/amber on black
 *   .theme-clean      — Standard Tailwind-style, Inter/system font, card-based
 */

/* ============================================================
   CSS Custom Properties per Theme
   ============================================================ */

/* Victorian Theme — Steam-era parchment & brass */
.theme-victorian {
    --theme-font-primary: 'Playfair Display', 'Georgia', serif;
    --theme-font-mono: 'Courier New', 'Courier', monospace;
    --theme-font-size-base: 0.9375rem;

    --theme-bg-page: linear-gradient(135deg, #2a2015 0%, #1a1510 100%);
    --theme-bg-surface: #3d3020;
    --theme-bg-surface-alt: #4a3f2f;
    --theme-bg-input: #f5f0dc;
    --theme-bg-input-dark: rgba(0, 0, 0, 0.3);
    --theme-bg-highlight: #ffe4b5;
    --theme-bg-header: linear-gradient(180deg, #654321 0%, #4a3012 100%);

    --theme-text-primary: #d4c4a8;
    --theme-text-emphasis: #ffd700;
    --theme-text-secondary: #b8a88c;
    --theme-text-muted: #8b7355;
    --theme-text-on-input: #1a1510;
    --theme-text-accent: #ffd700;

    --theme-border-primary: #8b7355;
    --theme-border-secondary: #5a4a3a;
    --theme-border-accent: #a0522d;

    --theme-color-success: #228b22;
    --theme-color-danger: #c00;
    --theme-color-warning: #b8860b;
    --theme-color-info: #4a90a4;

    --theme-btn-primary-bg: #8b4513;
    --theme-btn-primary-text: #ffd700;
    --theme-btn-primary-border: #a0522d;
    --theme-btn-secondary-bg: #654321;
    --theme-btn-secondary-text: #d4c4a8;

    --theme-card-bg: linear-gradient(180deg, #4a3f2f 0%, #3d3020 100%);
    --theme-card-border: 3px solid #8b7355;
    --theme-card-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);

    --theme-table-header-bg: #d4c4a8;
    --theme-table-row-border: #ccc;
    --theme-table-highlight-bg: #ffe4b5;

    --theme-badge-bg: linear-gradient(180deg, #8b4513 0%, #654321 100%);
    --theme-badge-border: 1px solid #a0522d;
    --theme-badge-text: #ffd700;
}

/* Terminal Theme — Transition-era CRT / IBM 3270 phosphor */
.theme-terminal {
    --theme-font-primary: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    --theme-font-mono: 'IBM Plex Mono', 'Consolas', monospace;
    --theme-font-size-base: 0.875rem;

    --theme-bg-page: linear-gradient(135deg, #0a0a0a 0%, #0d1a0d 100%);
    --theme-bg-surface: #0a120a;
    --theme-bg-surface-alt: #0d1a0d;
    --theme-bg-input: rgba(0, 0, 0, 0.6);
    --theme-bg-input-dark: rgba(0, 0, 0, 0.5);
    --theme-bg-highlight: rgba(0, 255, 0, 0.15);
    --theme-bg-header: #0d1a0d;

    --theme-text-primary: #33ff33;
    --theme-text-emphasis: #66ff66;
    --theme-text-secondary: #22aa22;
    --theme-text-muted: #116611;
    --theme-text-on-input: #33ff33;
    --theme-text-accent: #00ff88;

    --theme-border-primary: #1a3a1a;
    --theme-border-secondary: #0d260d;
    --theme-border-accent: #33ff33;

    --theme-color-success: #00ff00;
    --theme-color-danger: #ff3333;
    --theme-color-warning: #ffaa00;
    --theme-color-info: #00ccff;

    --theme-btn-primary-bg: #1a3a1a;
    --theme-btn-primary-text: #33ff33;
    --theme-btn-primary-border: #33ff33;
    --theme-btn-secondary-bg: #0d260d;
    --theme-btn-secondary-text: #22aa22;

    --theme-card-bg: #0a120a;
    --theme-card-border: 1px solid #1a3a1a;
    --theme-card-shadow: 0 0 8px rgba(0, 255, 0, 0.05);

    --theme-table-header-bg: rgba(0, 255, 0, 0.1);
    --theme-table-row-border: #1a3a1a;
    --theme-table-highlight-bg: rgba(0, 255, 0, 0.15);

    --theme-badge-bg: #1a3a1a;
    --theme-badge-border: 1px solid #33ff33;
    --theme-badge-text: #33ff33;
}

/* Terminal Amber variant (for operators who prefer amber phosphor) */
.theme-terminal.amber {
    --theme-text-primary: #ffaa33;
    --theme-text-emphasis: #ffcc66;
    --theme-text-secondary: #cc8822;
    --theme-text-muted: #885511;
    --theme-text-on-input: #ffaa33;
    --theme-text-accent: #ffcc00;
    --theme-border-accent: #ffaa33;
    --theme-color-success: #ffaa33;
    --theme-btn-primary-text: #ffaa33;
    --theme-btn-primary-border: #ffaa33;
    --theme-badge-border: 1px solid #ffaa33;
    --theme-badge-text: #ffaa33;
}

/* Clean Theme — Modern UI, standard Tailwind-style */
.theme-clean {
    --theme-font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --theme-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --theme-font-size-base: 0.875rem;

    --theme-bg-page: #0f172a;
    --theme-bg-surface: #1e293b;
    --theme-bg-surface-alt: #334155;
    --theme-bg-input: #1e293b;
    --theme-bg-input-dark: rgba(0, 0, 0, 0.3);
    --theme-bg-highlight: rgba(99, 102, 241, 0.15);
    --theme-bg-header: #1e293b;

    --theme-text-primary: #e2e8f0;
    --theme-text-emphasis: #f8fafc;
    --theme-text-secondary: #94a3b8;
    --theme-text-muted: #64748b;
    --theme-text-on-input: #e2e8f0;
    --theme-text-accent: #818cf8;

    --theme-border-primary: #334155;
    --theme-border-secondary: #1e293b;
    --theme-border-accent: #6366f1;

    --theme-color-success: #22c55e;
    --theme-color-danger: #ef4444;
    --theme-color-warning: #f59e0b;
    --theme-color-info: #3b82f6;

    --theme-btn-primary-bg: #6366f1;
    --theme-btn-primary-text: #ffffff;
    --theme-btn-primary-border: #6366f1;
    --theme-btn-secondary-bg: #334155;
    --theme-btn-secondary-text: #e2e8f0;

    --theme-card-bg: #1e293b;
    --theme-card-border: 1px solid #334155;
    --theme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    --theme-table-header-bg: rgba(99, 102, 241, 0.1);
    --theme-table-row-border: #334155;
    --theme-table-highlight-bg: rgba(99, 102, 241, 0.1);

    --theme-badge-bg: #6366f1;
    --theme-badge-border: none;
    --theme-badge-text: #ffffff;
}

/* ============================================================
   Shared Position Screen Base Styles
   Applied when any theme class is present on .position-screen
   ============================================================ */

.position-screen {
    font-family: var(--theme-font-primary);
    font-size: var(--theme-font-size-base);
    background: var(--theme-bg-page);
    color: var(--theme-text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.position-screen .pos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--theme-bg-header);
    border-bottom: 2px solid var(--theme-border-primary);
}

.position-screen .pos-header-title {
    font-weight: bold;
    color: var(--theme-text-emphasis);
    letter-spacing: 0.05em;
}

.position-screen .pos-header-time {
    font-family: var(--theme-font-mono);
    color: var(--theme-text-accent);
    font-weight: bold;
}

.position-screen .pos-era-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--theme-badge-bg);
    border: var(--theme-badge-border);
    border-radius: 4px;
    color: var(--theme-badge-text);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.position-screen .pos-card {
    background: var(--theme-card-bg);
    border: var(--theme-card-border);
    box-shadow: var(--theme-card-shadow);
    border-radius: 8px;
    overflow: hidden;
}

.position-screen .pos-card-header {
    padding: 0.75rem 1rem;
    background: var(--theme-bg-surface-alt);
    border-bottom: 1px solid var(--theme-border-primary);
    font-weight: bold;
    color: var(--theme-text-emphasis);
    letter-spacing: 0.05em;
}

.position-screen .pos-card-body {
    padding: 1rem;
}

.position-screen .pos-input {
    padding: 0.5rem;
    background: var(--theme-bg-input);
    border: 1px solid var(--theme-border-primary);
    border-radius: 4px;
    color: var(--theme-text-on-input);
    font-family: var(--theme-font-mono);
    font-size: 0.875rem;
}

.position-screen .pos-input:focus {
    border-color: var(--theme-border-accent);
    outline: none;
}

.position-screen .pos-btn-primary {
    padding: 0.5rem 1rem;
    background: var(--theme-btn-primary-bg);
    color: var(--theme-btn-primary-text);
    border: 1px solid var(--theme-btn-primary-border);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.position-screen .pos-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.position-screen .pos-btn-secondary {
    padding: 0.5rem 1rem;
    background: var(--theme-btn-secondary-bg);
    color: var(--theme-btn-secondary-text);
    border: 1px solid var(--theme-border-primary);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.position-screen .pos-btn-secondary:hover {
    opacity: 0.9;
}

.position-screen .pos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.position-screen .pos-table th {
    padding: 0.5rem;
    background: var(--theme-table-header-bg);
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--theme-border-primary);
}

.position-screen .pos-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--theme-table-row-border);
}

.position-screen .pos-table tr.highlight td {
    background: var(--theme-table-highlight-bg);
}

.position-screen .pos-status-bar {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0.5rem 1.5rem;
    font-size: 0.75rem;
    background: var(--theme-bg-surface);
    border-top: 1px solid var(--theme-border-primary);
}

.position-screen .pos-status-connected { color: var(--theme-color-success); }
.position-screen .pos-status-disconnected { color: var(--theme-color-danger); }
.position-screen .pos-status-warning { color: var(--theme-color-warning); }

/* ============================================================
   Victorian-Specific Decorative Styles
   ============================================================ */

.theme-victorian .pos-card {
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.theme-victorian .pos-card-header {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #654321 0%, #4a3012 100%);
}

/* ============================================================
   Terminal-Specific Decorative Styles (CRT Effects)
   ============================================================ */

.theme-terminal .pos-card {
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.05);
}

.theme-terminal .pos-card-header {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8125rem;
}

.theme-terminal .pos-input {
    text-transform: uppercase;
}

/* Subtle scanline overlay for full immersion (opt-in via .crt-effect) */
.theme-terminal.crt-effect::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
}

/* ============================================================
   Clean-Specific Decorative Styles
   ============================================================ */

.theme-clean .pos-card {
    border-radius: 12px;
}

.theme-clean .pos-btn-primary {
    border-radius: 8px;
}

.theme-clean .pos-input {
    border-radius: 8px;
}

/* ============================================================
   Theme Picker Dropdown Styles
   ============================================================ */

.theme-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.theme-picker-select {
    appearance: none;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%2394a3b8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.theme-victorian .theme-picker-select {
    background-color: #3d3020;
    border: 1px solid #8b7355;
    color: #d4c4a8;
}

.theme-terminal .theme-picker-select {
    background-color: #0a120a;
    border: 1px solid #1a3a1a;
    color: #33ff33;
}

.theme-clean .theme-picker-select {
    background-color: #334155;
    border: 1px solid #475569;
    color: #e2e8f0;
}

.theme-picker-label {
    font-size: 0.6875rem;
    opacity: 0.7;
    margin-right: 0.5rem;
}