/* Firetycoon — Dark Theme Styles */
:root {
    --bg: #1a1a2e;
    --bg-card: #16213e;
    --bg-hover: #0f3460;
    --accent: #e94560;
    --accent-glow: #ff6b6b;
    --text: #eaeaea;
    --text-dim: #8899aa;
    --gold: #ffd700;
    --success: #4caf50;
    --border: #2a2a4a;
    --radius: 8px;
    --debug-bg: #0d0d1a;
    --debug-border: #333355;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 2px solid var(--accent);
    flex-wrap: wrap;
    gap: 0.5rem;
}

header h1 {
    font-size: 1.5rem;
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-glow);
}

.stats-bar {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
}

.stats-bar span {
    background: var(--bg-card);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* Main */
main {
    flex: 1;
    padding: 2rem 0;
}

.placeholder {
    text-align: center;
    padding: 3rem;
    font-size: 1.2rem;
    color: var(--text-dim);
}

/* Footer */
footer {
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-dim);
}

footer .version {
    color: var(--accent);
    font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Debug Panel Styles
   ═══════════════════════════════════════════════════════════════════════════ */

#debug-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--debug-bg);
    border-top: 2px solid var(--debug-border);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.4;
    color: #ccc;
    display: flex;
    flex-direction: column;
    transition: height 0.15s ease;
}

/* Collapsed = nur Header */
#debug-panel.collapsed {
    height: auto !important;
}

#debug-panel.collapsed .debug-body {
    display: none;
}

/* Header (immer sichtbar) */
.debug-header {
    display: flex;
    align-items: center;
    padding: 2px 8px;
    background: #16162a;
    border-bottom: 1px solid var(--debug-border);
    cursor: pointer;
    user-select: none;
}

.debug-toggle {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 8px;
    font-weight: bold;
}

.debug-toggle:hover {
    color: #fff;
}

/* Body (nur sichtbar wenn nicht collapsed) */
.debug-body {
    display: flex;
    flex-direction: column;
    height: 300px;
    min-height: 100px;
    resize: vertical;
    overflow: hidden;
}

/* Toolbar */
.debug-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #12121e;
    border-bottom: 1px solid var(--debug-border);
    flex-shrink: 0;
}

.debug-toolbar select,
.debug-toolbar input {
    background: #1a1a2e;
    color: #ccc;
    border: 1px solid var(--debug-border);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
    font-family: inherit;
}

.debug-toolbar input::placeholder {
    color: #555;
}

.debug-toolbar button {
    background: #1a1a2e;
    border: 1px solid var(--debug-border);
    color: #aaa;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.debug-toolbar button:hover {
    background: #2a2a4a;
    color: #fff;
}

#debug-close-btn {
    color: var(--accent);
    font-weight: bold;
    margin-right: 4px;
}

#debug-level-filter {
    width: 80px;
}

#debug-module-filter {
    width: 150px;
}

#debug-search {
    width: 120px;
}

/* Log list */
.debug-loglist {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0;
}

.debug-entry {
    display: flex;
    flex-wrap: wrap;
    padding: 1px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 11px;
    gap: 4px;
}

.debug-entry:hover {
    background: rgba(255,255,255,0.05);
}

.debug-entry.level-3 {
    background: rgba(238, 68, 68, 0.08);
}

.debug-time {
    color: #555;
    min-width: 60px;
    flex-shrink: 0;
}

.debug-level {
    min-width: 36px;
    flex-shrink: 0;
}

.debug-module {
    min-width: 50px;
    flex-shrink: 0;
}

.debug-message {
    flex: 1;
    color: #ddd;
}

.debug-data {
    color: #666;
    flex-shrink: 0;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.debug-stack {
    width: 100%;
    color: #e44;
    font-size: 10px;
    padding: 2px 0 2px 60px;
    white-space: pre-wrap;
    opacity: 0.8;
}

/* Command area */
.debug-command-area {
    flex-shrink: 0;
    padding: 4px 8px;
    background: #12121e;
    border-top: 1px solid var(--debug-border);
}

#debug-command-input {
    width: 100%;
    background: #1a1a2e;
    color: #4cc;
    border: 1px solid var(--debug-border);
    border-radius: 3px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    outline: none;
}

#debug-command-input:focus {
    border-color: var(--accent);
}

/* Status bar */
.debug-statusbar {
    display: flex;
    justify-content: space-between;
    padding: 2px 8px;
    background: #0a0a14;
    border-top: 1px solid var(--debug-border);
    font-size: 10px;
    color: #666;
    flex-shrink: 0;
}

#debug-level-indicator {
    color: var(--accent);
}

#debug-mode-indicator {
    color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Theme: Modern (body.theme-modern — DEFAULT)
   No extra CSS needed — the :root variables and base styles are the modern
   theme. This body class exists so JavaScript can toggle between themes via
   classList.add/remove.
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-modern {
    /* Default theme — inherits everything from :root and base body */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Theme: Pixel (body.theme-pixel)
   Retro pixel-art aesthetic with sharp corners, monospace pixel font, and
   a CRT-grid background.
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-pixel {
    --bg: #0d0d0d;
    --bg-card: #1a1a1a;
    --bg-hover: #2a2a2a;
    --accent: #d42f3d;
    --accent-glow: #ff3333;
    --text: #e8e8e8;
    --text-dim: #989898;
    --text-inverse: #ffffff;
    --border: #3a3a3a;
    --radius: 0px;

    font-family: 'Press Start 2P', 'Courier New', monospace !important;

    /* CRT/grid background pattern — 16px raster */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 16px 16px;
}

/* Pixel theme — force all border-radius to 0 */
body.theme-pixel * {
    border-radius: 0 !important;
}

/* Pixel theme — form elements get a thick border */
body.theme-pixel button,
body.theme-pixel select,
body.theme-pixel input {
    border: 2px solid var(--border);
}

body.theme-pixel button:hover,
body.theme-pixel select:hover,
body.theme-pixel input:hover {
    border-color: var(--accent);
}

/* Pixel theme — stats bar spans */
body.theme-pixel .stats-bar span {
    border: 2px solid var(--border);
}

/* Pixel theme — header gets a thicker bottom border */
body.theme-pixel header {
    border-bottom: 3px solid var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Shop + Inventory Views
   ═══════════════════════════════════════════════════════════════════════════ */

/* Game View Container */
.game-view {
    display: block;
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* View Header */
.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.view-header h2 {
    font-size: 1.3rem;
    color: var(--text);
    margin: 0;
}

/* View Controls (filters, search, sort) */
.view-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.view-controls select,
.view-controls input {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}

.view-controls select:hover,
.view-controls input:hover {
    border-color: var(--accent);
}

.view-controls select:focus,
.view-controls input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}

#shop-search {
    min-width: 140px;
}

/* Inventory Stats */
#inventory-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
}

#inventory-stats span {
    background: var(--bg-card);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* Product Grid — CSS Grid, responsiv */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
}

@media (min-width: 1000px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
    }
}

/* Product Card */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    cursor: default;
    position: relative;
}

.product-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.15);
    transform: translateY(-2px);
}

/* Typ-Farbcodes */
.product-card.type-wasser  { border-left: 4px solid #3498db; }
.product-card.type-schaum  { border-left: 4px solid #2ecc71; }
.product-card.type-pulver  { border-left: 4px solid #e74c3c; }
.product-card.type-co2     { border-left: 4px solid #95a5a6; }
.product-card.type-fett    { border-left: 4px solid #f39c12; }
.product-card.type-spezial { border-left: 4px solid #9b59b6; }

/* Product Icon — 24px Farbkreis pro Typ */
.product-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.type-wasser  .product-icon  { background: #3498db; box-shadow: 0 0 6px #3498db; }
.type-schaum  .product-icon  { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.type-pulver  .product-icon  { background: #e74c3c; box-shadow: 0 0 6px #e74c3c; }
.type-co2     .product-icon  { background: #95a5a6; box-shadow: 0 0 6px #95a5a6; }
.type-fett    .product-icon  { background: #f39c12; box-shadow: 0 0 6px #f39c12; }
.type-spezial .product-icon  { background: #9b59b6; box-shadow: 0 0 6px #9b59b6; }

/* Product Card Top Row (Icon + Badge) */
.product-card .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Product Name */
.product-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin: 0.2rem 0;
}

/* Product Price */
.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
}

/* Product Badge (Freischaltung, Bestseller) */
.product-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-badge.badge-locked {
    background: rgba(233, 69, 96, 0.2);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.product-badge.badge-bestseller {
    background: rgba(255, 215, 0, 0.2);
    color: var(--gold);
    border: 1px solid var(--gold);
}

/* Locked Card — ausgegraut, gesperrt */
.product-card.locked {
    opacity: 0.5;
    filter: grayscale(0.6);
    pointer-events: none;
}

.product-card.locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

/* Best-Margin-Indikator */
.product-margin {
    font-size: 0.75rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.product-margin .margin-bar {
    flex: 1;
    height: 4px;
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
}

.product-margin .margin-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--success);
    transition: width 0.3s ease;
}

.product-margin .margin-label {
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Buy / Sell Buttons */
.buy-btn,
.sell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    margin-top: auto;
}

.buy-btn {
    background: var(--success);
    color: #fff;
}

.buy-btn:hover {
    background: #43a047;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
    transform: scale(1.02);
}

.buy-btn:active {
    transform: scale(0.97);
}

.sell-btn {
    background: var(--accent);
    color: #fff;
}

.sell-btn:hover {
    background: #d63850;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
    transform: scale(1.02);
}

.sell-btn:active {
    transform: scale(0.97);
}

.buy-btn:disabled,
.sell-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Customer View / Türvertretung (v0.3.x)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── View Header ────────────────────────────────────────────────────────── */

.customer-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.customer-view-header h2 {
    font-size: 1.3rem;
    color: var(--text);
    margin: 0;
}

.customer-view-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Türvertretungs-Button (groß, auffällig, rot) ──────────────────────── */

.btn-klinken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.8rem;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, #e53935, #c62828);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
}

.btn-klinken:hover {
    background: linear-gradient(135deg, #ef5350, #d32f2f);
    box-shadow: 0 6px 20px rgba(229, 57, 53, 0.6);
    transform: translateY(-2px);
}

.btn-klinken:active {
    transform: translateY(0);
}

.btn-klinken:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.2);
    background: linear-gradient(135deg, #78909c, #546e7a);
}

/* ── Visit Counter ──────────────────────────────────────────────────────── */

.visit-counter {
    font-size: 0.9rem;
    color: var(--text-dim);
    background: var(--bg-card);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* ── Weather Card (Stats-Bar & View) ────────────────────────────────────── */

.stat-weather {
    background: var(--bg-card);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    cursor: default;
}

.weather-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.weather-icon {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.weather-factor {
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* ─── Visit Stats ────────────────────────────────────────────────────────── */

.visit-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-item {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.stat-value--success {
    color: var(--success);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Letzte Begegnung ───────────────────────────────────────────────────── */

.last-encounter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
}

.last-encounter--empty {
    opacity: 0.5;
    font-style: italic;
    color: var(--text-dim);
    justify-content: center;
}

.encounter-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.encounter-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.encounter-title {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.encounter-desc {
    font-weight: 600;
}

.encounter-time {
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* ── Customer Section ────────────────────────────────────────────────────── */

.customer-section {
    margin-top: 0.5rem;
}

.customer-section h3 {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.customer-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px dashed var(--border);
}

.text-dim {
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* ── Customer Grid ───────────────────────────────────────────────────────── */

.customer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

@media (max-width: 600px) {
    .customer-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Customer Card ───────────────────────────────────────────────────────── */

.customer-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.customer-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.12);
    transform: translateY(-2px);
}

/* Typ-Linksbalken */
.customer-card.type-privat    { border-left: 4px solid #42a5f5; }
.customer-card.type-firma     { border-left: 4px solid #66bb6a; }
.customer-card.type-industrie { border-left: 4px solid #ffa726; }
.customer-card.type-behoerde  { border-left: 4px solid #ab47bc; }

.customer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.customer-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

.customer-type-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.customer-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.customer-satisfaction {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.customer-need {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

/* Dringlichkeits-Farben */
.urgency-hoch {
    color: #ef5350;
    font-weight: 600;
}

.urgency-mittel {
    color: #ffd54f;
}

.urgency-niedrig {
    color: var(--success);
}

.customer-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.deal-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.8rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.deal-btn:hover {
    background: #d63850;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
    transform: scale(1.02);
}

.deal-btn:active {
    transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modal Overlay / Ergebnis-Dialog / Verkaufs-Modal
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.2s ease;
}

.modal-overlay.hidden {
    display: none;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    padding: 1.5rem;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.2s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.modal-close-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text);
}

/* ── Ergebnis-Dialog ─────────────────────────────────────────────────────── */

.result-dialog {
    text-align: center;
    padding: 1rem 0;
}

.result-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.result-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.result-desc {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.result-details {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.result-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.result-label {
    color: var(--text-dim);
}

.result-customer-preview {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.25);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.result-customer-preview p {
    margin: 0.2rem 0;
}

.result-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 2rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.result-close-btn:hover {
    background: #d63850;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.4);
}

/* ── Verkaufs-Modal ──────────────────────────────────────────────────────── */

.deal-modal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Kunden-Info */
.deal-customer-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.deal-customer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.deal-customer-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.deal-customer-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.deal-customer-type {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.deal-customer-satisfaction {
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* Bedarf */
.deal-need {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.deal-need-header {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deal-need-product {
    font-size: 1rem;
    font-weight: 600;
}

.deal-need-qty {
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Preis */
.deal-price-section {
    text-align: center;
    padding: 0.5rem 0;
}

.deal-price-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 0.25rem;
}

.deal-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    transition: color 0.3s, transform 0.2s;
}

.deal-price-amount.price-updated {
    color: var(--success);
    transform: scale(1.1);
}

.deal-price-basis {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 0.25rem;
}

/* Deal-Aktionen */
.deal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.btn-deal-accept {
    padding: 0.7rem 1rem;
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.btn-deal-accept:hover {
    background: #43a047;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
    transform: scale(1.02);
}

.btn-deal-counter {
    padding: 0.6rem 1rem;
    background: var(--bg-hover);
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.btn-deal-counter:hover {
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
    transform: scale(1.02);
}

.btn-deal-reject {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-deal-reject:hover {
    background: rgba(233, 69, 96, 0.1);
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Contract List / Verträge (v0.3.x)
   ═══════════════════════════════════════════════════════════════════════════ */

.contract-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px dashed var(--border);
}

.contract-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

@media (max-width: 600px) {
    .contract-list {
        grid-template-columns: 1fr;
    }
}

/* Contract Card */
.contract-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.contract-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.1);
}

/* Status-Linksbalken */
.contract-card.status-aktiv       { border-left: 4px solid var(--success); }
.contract-card.status-gekuendigt  { border-left: 4px solid #ff9800; }
.contract-card.status-abgelaufen  { border-left: 4px solid var(--accent); }
.contract-card.status-verlaengert { border-left: 4px solid #42a5f5; }

.contract-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.contract-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

.contract-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contract-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.83rem;
}

.contract-detail-label {
    color: var(--text-dim);
}

.contract-detail-value {
    color: var(--text);
    font-weight: 500;
}

.contract-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.contract-cancel-btn {
    flex: 1;
    padding: 0.4rem 0.6rem;
    background: rgba(233, 69, 96, 0.1);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.contract-cancel-btn:hover {
    background: rgba(233, 69, 96, 0.25);
}

.contract-renew-btn {
    flex: 1;
    padding: 0.4rem 0.6rem;
    background: rgba(76, 175, 80, 0.1);
    color: var(--success);
    border: 1px solid var(--success);
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.contract-renew-btn:hover {
    background: rgba(76, 175, 80, 0.25);
}

/* ── Status Badges ───────────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.badge--active {
    background: rgba(76, 175, 80, 0.18);
    color: var(--success);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.badge--cancelled {
    background: rgba(255, 152, 0, 0.18);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.badge--expired {
    background: rgba(233, 69, 96, 0.18);
    color: var(--accent);
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.badge--renewed {
    background: rgba(66, 165, 245, 0.18);
    color: #42a5f5;
    border: 1px solid rgba(66, 165, 245, 0.3);
}

.badge--unknown {
    background: rgba(255,255,255,0.05);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

/* ── Pixel-Theme Overrides ───────────────────────────────────────────────── */

body.theme-pixel .btn-klinken {
    border-radius: 0 !important;
    border: 3px solid #c62828;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    font-size: 0.8rem;
    padding: 0.6rem 1.2rem;
}

body.theme-pixel .btn-klinken:hover {
    box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    transform: translate(2px, 2px);
}

body.theme-pixel .modal-container {
    border-radius: 0 !important;
    border-width: 3px;
}

body.theme-pixel .customer-card,
body.theme-pixel .contract-card {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .badge {
    border-radius: 0 !important;
}

body.theme-pixel .deal-price-amount {
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    font-size: 1.2rem;
}

body.theme-pixel .stat-value {
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    font-size: 1rem;
}

body.theme-pixel .deal-btn,
body.theme-pixel .btn-deal-accept,
body.theme-pixel .btn-deal-counter,
body.theme-pixel .btn-deal-reject {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .contract-cancel-btn,
body.theme-pixel .contract-renew-btn {
    border-radius: 0 !important;
}

body.theme-pixel .result-close-btn {
    border-radius: 0 !important;
}

body.theme-pixel .modal-close-btn {
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Expansion / Regions View (v0.4.x)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stats Row ──────────────────────────────────────────────────────────── */
.stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.stats-row .stat-item {
    flex: 1;
    min-width: 120px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stats-row .stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}

.stats-row .stat-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Region Grid ────────────────────────────────────────────────────────── */
.region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
}

@media (min-width: 1000px) {
    .region-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .region-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Region Card ─────────────────────────────────────────────────────────── */
.region-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.region-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.12);
}

.region-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.region-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.region-status-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Farbcodierung nach Status */
.region-card.status-unlocked {
    border-left: 4px solid var(--success);
}

.region-card.status-unlocked .region-status-badge {
    background: rgba(76, 175, 80, 0.18);
    color: var(--success);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.region-card.status-available {
    border-left: 4px solid #42a5f5;
    cursor: pointer;
}

.region-card.status-available .region-status-badge {
    background: rgba(66, 165, 245, 0.18);
    color: #42a5f5;
    border: 1px solid rgba(66, 165, 245, 0.3);
}

.region-card.status-available:hover {
    border-color: #42a5f5;
    box-shadow: 0 0 14px rgba(66, 165, 245, 0.25);
}

.region-card.status-locked {
    border-left: 4px solid var(--border);
    opacity: 0.55;
    filter: grayscale(0.5);
}

.region-card.status-locked .region-status-badge {
    background: rgba(255,255,255,0.05);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.region-card.status-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.region-cost {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold);
}

.region-population {
    font-size: 0.85rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.region-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.region-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* ── Region Buy Button ──────────────────────────────────────────────────── */
.btn-region-buy {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.8rem;
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.btn-region-buy:hover {
    background: #43a047;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
    transform: scale(1.02);
}

.btn-region-buy:active {
    transform: scale(0.97);
}

.btn-region-buy:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Advertising View (v0.4.x)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ad Grid ────────────────────────────────────────────────────────────── */
.ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
}

@media (min-width: 1000px) {
    .ad-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .ad-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Campaign Card ───────────────────────────────────────────────────────── */
.campaign-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.campaign-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.1);
    transform: translateY(-2px);
}

/* Kanal-Linksbalken */
.campaign-card.channel-radio    { border-left: 4px solid #42a5f5; }
.campaign-card.channel-tv       { border-left: 4px solid #ab47bc; }
.campaign-card.channel-online   { border-left: 4px solid #66bb6a; }
.campaign-card.channel-print    { border-left: 4px solid #ffa726; }
.campaign-card.channel-social   { border-left: 4px solid #ef5350; }
.campaign-card.channel-plakat   { border-left: 4px solid #26c6da; }

.campaign-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.campaign-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.campaign-channel-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.campaign-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.campaign-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.83rem;
}

.campaign-detail-label {
    color: var(--text-dim);
}

.campaign-detail-value {
    color: var(--text);
    font-weight: 500;
}

/* ── Budget Slider ───────────────────────────────────────────────────────── */
.budget-slider {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.budget-slider label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.budget-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    outline: none;
    border: none;
    cursor: pointer;
}

.budget-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--accent-glow);
    box-shadow: 0 0 6px rgba(233, 69, 96, 0.4);
}

.budget-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--accent-glow);
}

.budget-amount {
    text-align: right;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold);
}

/* ── ROI Display ─────────────────────────────────────────────────────────── */
.roi-display {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.roi-value {
    font-weight: 700;
}

.roi-value.roi-positive {
    color: var(--success);
}

.roi-value.roi-negative {
    color: var(--accent);
}

.roi-value.roi-neutral {
    color: var(--text-dim);
}

.roi-bar {
    flex: 1;
    height: 4px;
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
}

.roi-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.roi-fill.roi-fill-positive {
    background: var(--success);
}

.roi-fill.roi-fill-negative {
    background: var(--accent);
}

/* ── Campaign Actions ────────────────────────────────────────────────────── */
.campaign-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.btn-campaign-start {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.8rem;
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.btn-campaign-start:hover {
    background: #43a047;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
    transform: scale(1.02);
}

.btn-campaign-start:active {
    transform: scale(0.97);
}

.btn-campaign-start:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-campaign-stop {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.8rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.btn-campaign-stop:hover {
    background: #d63850;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
    transform: scale(1.02);
}

.btn-campaign-stop:active {
    transform: scale(0.97);
}

/* ── Campaign Status Badge ───────────────────────────────────────────────── */
.campaign-status {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.campaign-status.status-active {
    background: rgba(76, 175, 80, 0.18);
    color: var(--success);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.campaign-status.status-paused {
    background: rgba(255, 152, 0, 0.18);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.campaign-status.status-ended {
    background: rgba(233, 69, 96, 0.18);
    color: var(--accent);
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.campaign-status.status-draft {
    background: rgba(255,255,255,0.05);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

/* ── Pixel-Theme Overrides for Expansion UI ──────────────────────────────── */
body.theme-pixel .region-card,
body.theme-pixel .campaign-card {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .btn-region-buy,
body.theme-pixel .btn-campaign-start,
body.theme-pixel .btn-campaign-stop {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .region-status-badge,
body.theme-pixel .campaign-status {
    border-radius: 0 !important;
}

body.theme-pixel .budget-slider input[type="range"] {
    border-radius: 0 !important;
}

body.theme-pixel .budget-slider input[type="range"]::-webkit-slider-thumb {
    border-radius: 0 !important;
}

body.theme-pixel .roi-bar {
    border-radius: 0 !important;
}

body.theme-pixel .roi-fill {
    border-radius: 0 !important;
}

body.theme-pixel .stats-row .stat-item {
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 4 — Personnel, Vehicles, Locations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stats Row ──────────────────────────────────────────────────────────── */

.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.stat-item .stat-label {
    color: var(--text-dim);
}

.stat-item .stat-value {
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.stat-item .stat-value.stat-value--gold {
    color: var(--gold);
}

.stat-item .stat-value.stat-value--accent {
    color: var(--accent);
}

.stat-item .stat-value.stat-value--success {
    color: var(--success);
}

/* ── Grids (3 Spalten) ──────────────────────────────────────────────────── */

.personnel-grid,
.vehicle-grid,
.location-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.5rem 0;
}

@media (max-width: 900px) {
    .personnel-grid,
    .vehicle-grid,
    .location-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .personnel-grid,
    .vehicle-grid,
    .location-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Karten-Basis ───────────────────────────────────────────────────────── */

.employee-card,
.vehicle-card,
.location-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.employee-card:hover,
.vehicle-card:hover,
.location-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.15);
}

.employee-card .card-title,
.vehicle-card .card-title,
.location-card .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.employee-card .card-subtitle,
.vehicle-card .card-subtitle,
.location-card .card-subtitle {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.employee-card .card-body,
.vehicle-card .card-body,
.location-card .card-body {
    font-size: 0.85rem;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.employee-card .card-footer,
.vehicle-card .card-footer,
.location-card .card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* ── Skill-Balken ───────────────────────────────────────────────────────── */

.skill-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.skill-bar .skill-label {
    min-width: 80px;
    color: var(--text-dim);
    flex-shrink: 0;
}

.skill-bar .skill-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.skill-bar .skill-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Skill-Farben nach Wert */
.skill-fill.skill-fill--low {
    background: var(--accent);
    width: 25%;
}

.skill-fill.skill-fill--medium {
    background: #ff9800;
    width: 50%;
}

.skill-fill.skill-fill--good {
    background: var(--gold);
    width: 75%;
}

.skill-fill.skill-fill--high {
    background: var(--success);
    width: 100%;
}

/* Alternative: dynamisch via Inline-Style + Klasse */

.skill-fill--red {
    background: var(--accent);
}

.skill-fill--orange {
    background: #ff9800;
}

.skill-fill--yellow {
    background: var(--gold);
}

.skill-fill--green {
    background: var(--success);
}

.skill-bar .skill-value {
    min-width: 32px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

/* ── Zustandsbalken (Condition) ─────────────────────────────────────────── */

.condition-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.condition-bar .condition-label {
    min-width: 80px;
    color: var(--text-dim);
    flex-shrink: 0;
}

.condition-bar .condition-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.condition-bar .condition-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.condition-fill--green {
    background: var(--success);
}

.condition-fill--yellow {
    background: var(--gold);
}

.condition-fill--red {
    background: var(--accent);
}

.condition-bar .condition-value {
    min-width: 32px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
    line-height: 1.4;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-glow);
    border-color: var(--accent-glow);
}

.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.btn-success:hover:not(:disabled) {
    background: #66bb6a;
    border-color: #66bb6a;
}

.btn-danger {
    background: #c62828;
    color: #fff;
    border-color: #c62828;
}

.btn-danger:hover:not(:disabled) {
    background: #e53935;
    border-color: #e53935;
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
}

/* ── Badges (Status) ────────────────────────────────────────────────────── */

.badge-aktiv,
.badge-frei,
.badge-unterwegs,
.badge-wartung,
.badge-besetzt,
.badge-pending,
.badge-voll {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.badge-aktiv {
    background: rgba(76, 175, 80, 0.18);
    color: var(--success);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.badge-frei {
    background: rgba(66, 165, 245, 0.18);
    color: #42a5f5;
    border: 1px solid rgba(66, 165, 245, 0.3);
}

.badge-unterwegs {
    background: rgba(255, 152, 0, 0.18);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.badge-wartung {
    background: rgba(233, 69, 96, 0.18);
    color: var(--accent);
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.badge-besetzt {
    background: rgba(156, 39, 176, 0.18);
    color: #ce93d8;
    border: 1px solid rgba(156, 39, 176, 0.3);
}

.badge-pending {
    background: rgba(255, 193, 7, 0.18);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.badge-voll {
    background: rgba(244, 67, 54, 0.18);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

/* ── Spezifische Kartendetails ──────────────────────────────────────────── */

/* Employee: Position & Gehalt */
.employee-position {
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
}

.employee-salary {
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: 600;
}

/* Vehicle: Typ, Kennzeichen */
.vehicle-type {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.vehicle-license {
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.vehicle-mileage {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.vehicle-mileage strong {
    color: var(--text);
}

/* Location: Adresse, Größe */
.location-address {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.location-size {
    font-size: 0.8rem;
}

.location-rent {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
}

/* ── Modal-Dialog ───────────────────────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 380px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.25s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-dialog .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.modal-dialog .modal-header h3 {
    font-size: 1.1rem;
    margin: 0;
}

.modal-dialog .modal-close-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius);
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}

.modal-dialog .modal-close-btn:hover {
    color: var(--accent);
    background: rgba(233, 69, 96, 0.1);
}

.modal-dialog .modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-dialog .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
}

/* Modal-Form-Elemente */
.modal-dialog .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.modal-dialog .form-group label {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 600;
}

.modal-dialog .form-group select,
.modal-dialog .form-group input {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    font-family: inherit;
}

.modal-dialog .form-group select:focus,
.modal-dialog .form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* ── Phase 4 Pixel-Theme Overrides ──────────────────────────────────────── */

body.theme-pixel .employee-card,
body.theme-pixel .vehicle-card,
body.theme-pixel .location-card {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .btn {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .skill-bar .skill-track,
body.theme-pixel .condition-bar .condition-track {
    border-radius: 0 !important;
}

body.theme-pixel .skill-bar .skill-fill,
body.theme-pixel .condition-bar .condition-fill {
    border-radius: 0 !important;
}

body.theme-pixel .badge-aktiv,
body.theme-pixel .badge-frei,
body.theme-pixel .badge-unterwegs,
body.theme-pixel .badge-wartung,
body.theme-pixel .badge-besetzt,
body.theme-pixel .badge-pending,
body.theme-pixel .badge-voll {
    border-radius: 0 !important;
}

body.theme-pixel .modal-dialog {
    border-radius: 0 !important;
    border-width: 3px;
}

body.theme-pixel .modal-dialog .modal-close-btn {
    border-radius: 0 !important;
}

body.theme-pixel .stat-item {
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 5 — Manufacturing, Research, Export (v0.5.0)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Manufacturing Sections ──────────────────────────────────────────────── */

.mf-section {
    margin-bottom: 1.5rem;
}

.mf-section h3 {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.mf-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 800px) {
    .mf-two-col {
        grid-template-columns: 1fr;
    }
}

/* ── Production Line ─────────────────────────────────────────────────────── */

.mf-production-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}

.mf-station {
    flex: 1;
    min-width: 120px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.mf-station:hover {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.1);
}

.mf-station-icon {
    font-size: 1.6rem;
}

.mf-station-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.mf-station-status {
    font-size: 0.7rem;
}

.mf-station-progress {
    width: 100%;
}

/* Station status colors */
.mf-station--running {
    border-left: 3px solid var(--success);
}
.mf-station--ready {
    border-left: 3px solid #42a5f5;
}
.mf-station--idle {
    border-left: 3px solid var(--border);
    opacity: 0.7;
}
.mf-station--error {
    border-left: 3px solid var(--accent);
}
.mf-station--paused {
    border-left: 3px solid #ff9800;
}
.mf-station--maintenance {
    border-left: 3px solid #ab47bc;
    opacity: 0.6;
}

.mf-station-arrow {
    font-size: 1.2rem;
    color: var(--text-dim);
    flex-shrink: 0;
}

/* ── Machine Grid ────────────────────────────────────────────────────────── */

.mf-machine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}

.mf-machine-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mf-machine-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.08);
}

.mf-machine-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mf-machine-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mf-machine-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mf-machine-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mf-machine-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    gap: 0.5rem;
}

.mf-detail-label {
    color: var(--text-dim);
    flex-shrink: 0;
}

.mf-detail-value {
    color: var(--text);
    font-weight: 500;
}

.mf-machine-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
}

/* Efficiency bar */
.mf-efficiency-bar {
    flex: 1;
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
}

.mf-efficiency-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.eff--good { background: var(--success); }
.eff--ok   { background: #ff9800; }
.eff--bad  { background: var(--accent); }

/* ── Raw Material Stock ──────────────────────────────────────────────────── */

.mf-material-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mf-material-row {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: border-color 0.2s;
}

.mf-material-row:hover {
    border-color: var(--accent);
}

.mf-mat-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.mf-mat-name {
    font-weight: 600;
    color: var(--text);
}

.mf-mat-qty {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.mf-mat-bar {
    height: 6px;
    background: var(--bg-card);
    border-radius: 3px;
    overflow: hidden;
}

.mf-mat-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    background: var(--success);
}

.mat-bar--medium .mf-mat-fill {
    background: #ff9800;
}

.mat-bar--low .mf-mat-fill {
    background: var(--accent);
}

.mf-mat-warning {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
}

/* ── Progress Bars ────────────────────────────────────────────────────────── */

.mf-progress {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 16px;
    background: var(--bg);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.mf-progress-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
    background: var(--accent);
}

.mf-progress.progress--done .mf-progress-fill {
    background: var(--success);
}

.mf-progress.progress--active .mf-progress-fill {
    background: linear-gradient(90deg, var(--accent), var(--accent-glow));
}

.mf-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ── Production Queue ─────────────────────────────────────────────────────── */

.mf-queue-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mf-queue-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px dashed var(--border);
    font-size: 0.9rem;
}

.mf-order-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.2s;
}

.mf-order-card:hover {
    border-color: var(--accent);
}

.mf-order-card.priority-high {
    border-left: 3px solid var(--accent);
}

.mf-order-card.priority-normal {
    border-left: 3px solid #ff9800;
}

.mf-order-card.priority-low {
    border-left: 3px solid var(--text-dim);
}

.mf-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mf-order-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.mf-order-qty {
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: 700;
}

.mf-order-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mf-order-detail {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.mf-order-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    padding-top: 0.3rem;
    border-top: 1px solid var(--border);
}

/* ── Manufacturing Badges ─────────────────────────────────────────────────── */

.mf-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.mf-badge--running     { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.mf-badge--ready       { background: rgba(66, 165, 245, 0.18); color: #42a5f5; border: 1px solid rgba(66, 165, 245, 0.3); }
.mf-badge--idle        { background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid var(--border); }
.mf-badge--error       { background: rgba(233, 69, 96, 0.18); color: var(--accent); border: 1px solid rgba(233, 69, 96, 0.3); }
.mf-badge--maintenance { background: rgba(171, 71, 188, 0.18); color: #ce93d8; border: 1px solid rgba(171, 71, 188, 0.3); }
.mf-badge--paused      { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.mf-badge--waiting     { background: rgba(255, 193, 7, 0.18); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.3); }
.mf-badge--done        { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }

/* ── MF Dialog ───────────────────────────────────────────────────────────── */

.mf-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mf-dialog-costs {
    background: var(--bg);
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--text-dim);
    border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Research UI (Phase 5)
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-section {
    margin-bottom: 1.5rem;
}

.rs-section h3 {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

/* ── Filter Bar ──────────────────────────────────────────────────────────── */

.rs-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.rs-filter-btn {
    background: var(--bg-card);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.rs-filter-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.rs-filter-btn.rs-filter--active {
    background: rgba(233, 69, 96, 0.15);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* ── Research Tree ───────────────────────────────────────────────────────── */

.rs-tree {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rs-category {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    overflow: hidden;
}

.rs-category-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid var(--border);
}

.rs-category-icon {
    font-size: 1.2rem;
}

.rs-category-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    flex: 1;
}

.rs-category-count {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.rs-category-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Research Card ───────────────────────────────────────────────────────── */

.rs-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.rs-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.06);
}

.rs-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.rs-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.rs-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.rs-card-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.4;
}

.rs-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
}

.rs-meta-item {
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.rs-card-bonus {
    font-size: 0.8rem;
    color: var(--success);
    font-weight: 600;
    background: rgba(76, 175, 80, 0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    align-self: flex-start;
}

.rs-card-prereq {
    font-size: 0.75rem;
    color: #ff9800;
    background: rgba(255, 152, 0, 0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    align-self: flex-start;
}

.rs-card-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

.rs-locked-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-style: italic;
}

.rs-in-progress {
    font-size: 0.8rem;
    color: #ff9800;
    font-weight: 600;
}

/* RS Card status variants */
.rs-card--unlocked {
    border-left: 3px solid var(--success);
}

.rs-card--available {
    border-left: 3px solid #42a5f5;
}

.rs-card--in_progress {
    border-left: 3px solid #ff9800;
}

.rs-card--locked {
    border-left: 3px solid var(--border);
    opacity: 0.6;
}

.rs-card--locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.rs-card--patent {
    border-left: 3px solid #ab47bc;
}

/* ── Research Badges ──────────────────────────────────────────────────────── */

.rs-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.rs-badge--unlocked    { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.rs-badge--in_progress { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.rs-badge--locked      { background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid var(--border); }
.rs-badge--available   { background: rgba(66, 165, 245, 0.18); color: #42a5f5; border: 1px solid rgba(66, 165, 245, 0.3); }
.rs-badge--patent      { background: rgba(171, 71, 188, 0.18); color: #ce93d8; border: 1px solid rgba(171, 71, 188, 0.3); }

.rs-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* ── Patent View ──────────────────────────────────────────────────────────── */

.rs-patent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.rs-patent-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-dim);
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px dashed var(--border);
    font-size: 0.9rem;
}

.rs-patent-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid #ab47bc;
    border-radius: var(--radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.2s;
}

.rs-patent-card:hover {
    border-color: #ce93d8;
    box-shadow: 0 0 10px rgba(171, 71, 188, 0.1);
}

.rs-patent-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rs-patent-icon {
    font-size: 1.1rem;
}

.rs-patent-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.rs-patent-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.rs-patent-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.rs-patent-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Export UI (Phase 5)
   ═══════════════════════════════════════════════════════════════════════════ */

.ex-section {
    margin-bottom: 1.5rem;
}

.ex-section h3 {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

/* ── Stats Row ────────────────────────────────────────────────────────────── */

.ex-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ex-stats-row .stat-item {
    flex: 1;
    min-width: 120px;
}

/* ── Country Grid ─────────────────────────────────────────────────────────── */

.ex-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}

.ex-country-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.ex-country-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.08);
    transform: translateY(-2px);
}

.ex-country-card.status-available {
    border-left: 4px solid #42a5f5;
}

.ex-country-card.status-active {
    border-left: 4px solid var(--success);
}

.ex-country-card.status-locked {
    border-left: 4px solid var(--border);
    opacity: 0.55;
    filter: grayscale(0.4);
}

.ex-country-card.status-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.ex-country-card.status-negotiating {
    border-left: 4px solid #ff9800;
}

.ex-country-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ex-country-flag {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.ex-country-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    flex: 1;
}

.ex-country-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ex-country-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
}

.ex-detail-label {
    color: var(--text-dim);
}

.ex-detail-value {
    color: var(--text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ex-country-info {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-style: italic;
    margin-top: 0.15rem;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--border);
}

.ex-country-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
}

.ex-export-btn {
    flex: 1;
}

.ex-active-label {
    font-size: 0.8rem;
    color: var(--success);
    font-weight: 600;
}

.ex-locked-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-style: italic;
}

.ex-negotiating-label {
    font-size: 0.8rem;
    color: #ff9800;
    font-weight: 600;
}

/* ── Active Export Grid ───────────────────────────────────────────────────── */

.ex-active-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}

.ex-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px dashed var(--border);
    font-size: 0.9rem;
}

.ex-active-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--success);
    border-radius: var(--radius);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: border-color 0.2s;
}

.ex-active-card:hover {
    border-color: var(--accent);
}

.ex-active-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ex-active-flag {
    font-size: 1.2rem;
}

.ex-active-country {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
    color: var(--text);
}

.ex-active-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ex-active-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.ex-active-progress {
    margin: 0.2rem 0;
}

.ex-active-actions {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

/* ── Export Progress ──────────────────────────────────────────────────────── */

.ex-progress {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 18px;
    background: var(--bg);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
}

.ex-progress-fill {
    height: 100%;
    border-radius: 9px;
    background: linear-gradient(90deg, var(--success), #66bb6a);
    transition: width 0.5s ease;
}

.ex-progress span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ── Export Badges ────────────────────────────────────────────────────────── */

.ex-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.ex-badge--active      { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.ex-badge--paused      { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.ex-badge--completed   { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.ex-badge--cancelled   { background: rgba(233, 69, 96, 0.18); color: var(--accent); border: 1px solid rgba(233, 69, 96, 0.3); }
.ex-badge--negotiating { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.ex-badge--available   { background: rgba(66, 165, 245, 0.18); color: #42a5f5; border: 1px solid rgba(66, 165, 245, 0.3); }
.ex-badge--locked      { background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid var(--border); }

/* ── Export Dialog ────────────────────────────────────────────────────────── */

.ex-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ex-dialog-info {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ex-dialog-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-dim);
}

.ex-dialog-info-row span:last-child {
    color: var(--text);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 5 — Pixel-Theme Overrides
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-pixel .mf-station,
body.theme-pixel .mf-machine-card,
body.theme-pixel .mf-order-card,
body.theme-pixel .mf-material-row {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .rs-category,
body.theme-pixel .rs-card,
body.theme-pixel .rs-patent-card {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .ex-country-card,
body.theme-pixel .ex-active-card {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .mf-progress,
body.theme-pixel .mf-efficiency-bar,
body.theme-pixel .ex-progress,
body.theme-pixel .mf-mat-bar {
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 6 — Automation CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stats Row ────────────────────────────────────────────────────────────── */

.au-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* ── Section ──────────────────────────────────────────────────────────────── */

.au-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.au-section h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Assembly Line ────────────────────────────────────────────────────────── */

.au-assembly-line {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 1.5rem 1rem;
    background: linear-gradient(180deg, rgba(233,69,96,0.05) 0%, transparent 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
}

.au-station {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 120px;
    padding: 0.8rem;
    border-radius: var(--radius);
    background: var(--bg);
    border: 2px solid var(--border);
    transition: all 0.3s ease;
}
.au-station--active { border-color: var(--success); }
.au-station--idle   { border-color: var(--text-dim); opacity: 0.6; }
.au-station--error  { border-color: var(--accent); background: rgba(233,69,96,0.1); }

.au-station-icon {
    font-size: 1.8rem;
}

.au-station-name {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--text);
}

.au-station-connector {
    display: flex;
    align-items: center;
    min-width: 60px;
    position: relative;
}

.au-conveyor {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.au-conveyor-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    top: -1px;
    animation: au-convey 1.2s linear infinite;
}
.au-conveyor-dot:nth-child(1) { left: 15%; animation-delay: 0s; }
.au-conveyor-dot:nth-child(2) { left: 45%; animation-delay: 0.4s; }
.au-conveyor-dot:nth-child(3) { left: 75%; animation-delay: 0.8s; }

@keyframes au-convey {
    0%   { transform: translateX(-10px); opacity: 1; }
    100% { transform: translateX(calc(100% + 10px)); opacity: 0; }
}

.au-speed--x2 .au-conveyor-dot { animation-duration: 0.6s; }
.au-speed--x3 .au-conveyor-dot { animation-duration: 0.4s; }

/* ── Speed Controls ───────────────────────────────────────────────────────── */

.au-speed-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}

.au-speed-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-right: 0.5rem;
}

/* ── Robot Grid ───────────────────────────────────────────────────────────── */

.au-robot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.au-robot-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.au-robot-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.au-robot-card.au-robot--transport { border-left: 3px solid #42a5f5; }
.au-robot-card.au-robot--assembly  { border-left: 3px solid #66bb6a; }
.au-robot-card.au-robot--quality   { border-left: 3px solid #ab47bc; }
.au-robot-card.au-robot--packing   { border-left: 3px solid #ffa726; }
.au-robot-card.au-robot--welding   { border-left: 3px solid #ef5350; }
.au-robot-card.au-robot--painting  { border-left: 3px solid #ec407a; }
.au-robot-card.au-robot--forklift  { border-left: 3px solid #8d6e63; }
.au-robot-card.au-robot--drone     { border-left: 3px solid #26c6da; }

.au-robot-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.au-robot-icon {
    font-size: 1.3rem;
}

.au-robot-name {
    font-weight: 600;
    font-size: 0.85rem;
    flex: 1;
    color: var(--text);
}

.au-robot-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.au-robot-detail {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
}

.au-detail-label {
    color: var(--text-dim);
    min-width: 60px;
}

.au-detail-value {
    font-weight: 600;
    margin-left: auto;
}

.au-robot-actions {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

/* ── Robot Efficiency Bar ─────────────────────────────────────────────────── */

.au-eff-bar,
.au-batt-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
    max-width: 100px;
}

.au-eff-fill,
.au-batt-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.au-eff--good { background: var(--success); }
.au-eff--ok   { background: #ff9800; }
.au-eff--bad  { background: var(--accent); }

.au-batt--good   { background: var(--success); }
.au-batt--medium { background: #ff9800; }
.au-batt--low    { background: var(--accent); }

/* ── Robot Buy Section ────────────────────────────────────────────────────── */

.au-robot-buy-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

.au-robot-buy-section h4 {
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
    color: var(--text-dim);
}

.au-buy-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Software Upgrades ─────────────────────────────────────────────────────── */

.au-upgrade-tree {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.au-upgrade-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.au-upgrade-card:hover { border-color: var(--accent); }

.au-upgrade--owned     { border-left: 3px solid var(--success); opacity: 0.8; }
.au-upgrade--available { border-left: 3px solid #ff9800; }
.au-upgrade--locked    { border-left: 3px solid var(--text-dim); opacity: 0.6; }

.au-upgrade-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.au-upgrade-icon {
    font-size: 1.2rem;
}

.au-upgrade-name {
    font-weight: 600;
    font-size: 0.85rem;
    flex: 1;
}

.au-upgrade-level {
    font-size: 0.7rem;
    color: var(--text-dim);
    background: var(--bg-card);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.au-upgrade-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.au-upgrade-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.au-upgrade-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
}

.au-upgrade-bonus {
    color: var(--success);
}

.au-upgrade-actions {
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

.au-upgrade-owned {
    color: var(--success);
    font-size: 0.8rem;
    font-weight: 600;
}

.au-upgrade-locked {
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* ── Automation Badges ─────────────────────────────────────────────────────── */

.au-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.au-badge--active      { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.au-badge--idle        { background: rgba(255,255,255,0.08); color: var(--text-dim); border: 1px solid var(--border); }
.au-badge--charging    { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.au-badge--maintenance { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.au-badge--error       { background: rgba(233, 69, 96, 0.18); color: var(--accent); border: 1px solid rgba(233, 69, 96, 0.3); }
.au-badge--upgrading   { background: rgba(66, 165, 245, 0.18); color: #42a5f5; border: 1px solid rgba(66, 165, 245, 0.3); }
.au-badge--offline     { background: rgba(136, 153, 170, 0.12); color: var(--text-dim); border: 1px solid var(--border); }
.au-badge--paused      { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }

/* ── Automation Progress ───────────────────────────────────────────────────── */

.au-progress {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    height: 16px;
    width: 100%;
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.au-progress-fill {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--success), #66bb6a);
    transition: width 0.5s ease;
}
.au-progress--done .au-progress-fill { background: linear-gradient(90deg, #42a5f5, #66bb6a); }
.au-progress span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 6 — AI Sales CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stats Row ────────────────────────────────────────────────────────────── */

.sl-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-item--danger .stat-value {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(233,69,96,0.5);
}

/* ── Section ──────────────────────────────────────────────────────────────── */

.sl-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.sl-section h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Pipeline 4 Columns ───────────────────────────────────────────────────── */

.sl-pipeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .sl-pipeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sl-pipeline { grid-template-columns: 1fr; }
}

.sl-pipe-col {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 200px;
}

.sl-pipe-col--acquisition  { border-top: 3px solid #42a5f5; }
.sl-pipe-col--qualification { border-top: 3px solid #ff9800; }
.sl-pipe-col--proposal     { border-top: 3px solid #ab47bc; }
.sl-pipe-col--closing      { border-top: 3px solid var(--success); }

.sl-pipe-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sl-pipe-icon {
    font-size: 1rem;
}

.sl-pipe-label {
    font-size: 0.8rem;
    font-weight: 600;
    flex: 1;
}

.sl-pipe-count {
    font-size: 0.75rem;
    color: var(--text-dim);
    background: var(--bg-card);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
}

.sl-pipe-total {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.3rem;
}

.sl-pipe-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.sl-pipe-empty {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.75rem;
    padding: 1.5rem 0;
    font-style: italic;
}

/* ── Deal Card ────────────────────────────────────────────────────────────── */

.sl-deal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: all 0.2s ease;
    cursor: default;
}
.sl-deal-card:hover {
    border-color: var(--accent);
}

.sl-deal--hot  { border-left: 3px solid var(--accent); }
.sl-deal--warm { border-left: 3px solid #ff9800; }
.sl-deal--cold { border-left: 3px solid #42a5f5; }

.sl-deal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3rem;
}

.sl-deal-name {
    font-size: 0.75rem;
    font-weight: 600;
    flex: 1;
}

.sl-deal-wert {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}

.sl-deal-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sl-deal-detail {
    font-size: 0.7rem;
    color: var(--text-dim);
}

.sl-deal-company {
    font-style: italic;
}

.sl-deal-prob {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.sl-deal-pct {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dim);
    min-width: 30px;
    text-align: right;
}

.sl-deal-actions {
    display: flex;
    gap: 0.3rem;
    justify-content: flex-end;
    padding-top: 0.2rem;
}

/* ── Sl Progress ──────────────────────────────────────────────────────────── */

.sl-progress {
    flex: 1;
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.sl-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--success), #66bb6a);
    transition: width 0.3s ease;
}
.sl-progress span { display: none; }

/* ── Agent Grid ───────────────────────────────────────────────────────────── */

.sl-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.sl-agent-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.sl-agent-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.sl-agent--standard    { border-left: 3px solid #42a5f5; }
.sl-agent--negotiation { border-left: 3px solid #ff9800; }
.sl-agent--analytics   { border-left: 3px solid #ab47bc; }

.sl-agent-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sl-agent-icon {
    font-size: 1.3rem;
}

.sl-agent-name {
    font-weight: 600;
    font-size: 0.85rem;
    flex: 1;
}

.sl-agent-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sl-agent-detail {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
}

.sl-detail-label {
    color: var(--text-dim);
    min-width: 80px;
}

.sl-detail-value {
    font-weight: 600;
    margin-left: auto;
}

.sl-agent-actions {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

/* ── Agent Performance Bar ─────────────────────────────────────────────────── */

.sl-perf-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
    max-width: 100px;
}

.sl-perf-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.sl-perf--excellent { background: linear-gradient(90deg, #66bb6a, var(--success)); }
.sl-perf--good      { background: #ff9800; }
.sl-perf--poor      { background: var(--accent); }

/* ── Buy Agent Section ─────────────────────────────────────────────────────── */

.sl-buy-agent-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

.sl-buy-agent-section h4 {
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
    color: var(--text-dim);
}

.sl-buy-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Crisis List ───────────────────────────────────────────────────────────── */

.sl-crisis-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.sl-crisis-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.sl-crisis-card:hover { border-color: var(--accent); }

.sl-crisis--critical { border-left: 4px solid var(--accent); background: rgba(233,69,96,0.05); }
.sl-crisis--high     { border-left: 4px solid #ff9800; }
.sl-crisis--medium   { border-left: 4px solid #ffd700; }

.sl-crisis-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sl-crisis-icon {
    font-size: 1.2rem;
}

.sl-crisis-title {
    font-weight: 600;
    font-size: 0.85rem;
    flex: 1;
}

.sl-crisis-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sl-crisis-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.sl-crisis-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.sl-crisis-severity {
    font-weight: 600;
}

.sl-crisis-impact {
    color: var(--accent);
}

.sl-crisis-deadline {
    color: #ff9800;
}

.sl-crisis-actions {
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

.sl-crisis-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
}

/* ── Sales Badges ──────────────────────────────────────────────────────────── */

.sl-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.sl-badge--active      { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.sl-badge--idle        { background: rgba(255,255,255,0.08); color: var(--text-dim); border: 1px solid var(--border); }
.sl-badge--training    { background: rgba(66, 165, 245, 0.18); color: #42a5f5; border: 1px solid rgba(66, 165, 245, 0.3); }
.sl-badge--paused      { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.sl-badge--error       { background: rgba(233, 69, 96, 0.18); color: var(--accent); border: 1px solid rgba(233, 69, 96, 0.3); }
.sl-badge--offline     { background: rgba(136, 153, 170, 0.12); color: var(--text-dim); border: 1px solid var(--border); }
.sl-badge--negotiated  { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.sl-badge--hot         { background: rgba(233, 69, 96, 0.18); color: var(--accent); border: 1px solid rgba(233, 69, 96, 0.3); }
.sl-badge--warm        { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.sl-badge--cold        { background: rgba(66, 165, 245, 0.18); color: #42a5f5; border: 1px solid rgba(66, 165, 245, 0.3); }
.sl-badge--critical    { background: rgba(233, 69, 96, 0.25); color: var(--accent); border: 1px solid var(--accent); }
.sl-badge--warning     { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.sl-badge--resolved    { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 6 — Global Market CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stats Row ────────────────────────────────────────────────────────────── */

.gm-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-value--danger {
    color: var(--accent);
}

/* ── Section ──────────────────────────────────────────────────────────────── */

.gm-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.gm-section h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Continent Grid ───────────────────────────────────────────────────────── */

.gm-continent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.gm-continent-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.gm-continent-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.gm-continent-card.status-active   { border-color: var(--success); }
.gm-continent-card.status-available { border-color: #ff9800; }
.gm-continent-card.status-locked    { border-color: var(--border); opacity: 0.7; }
.gm-continent-card.status-growing   { border-color: #42a5f5; }
.gm-continent-card.status-declining { border-color: var(--accent); }

.gm-continent-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gm-continent-emoji {
    font-size: 1.5rem;
}

.gm-continent-name {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}

.gm-continent-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gm-continent-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
}

.gm-detail-label {
    color: var(--text-dim);
}

.gm-detail-value {
    font-weight: 600;
}

.gm-continent-info {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-style: italic;
    padding: 0.3rem 0;
    border-top: 1px solid var(--border);
    margin-top: 0.2rem;
}

.gm-continent-actions {
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

.gm-active-label,
.gm-growing-label,
.gm-declining-label,
.gm-locked-label {
    font-size: 0.8rem;
    font-weight: 600;
}

.gm-active-label   { color: var(--success); }
.gm-growing-label  { color: #42a5f5; }
.gm-declining-label { color: var(--accent); }
.gm-locked-label   { color: var(--text-dim); }

.gm-growth--high { color: var(--success); }
.gm-growth--pos  { color: #66bb6a; }
.gm-growth--neg  { color: var(--accent); }

/* ── Shipment Grid ────────────────────────────────────────────────────────── */

.gm-shipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.gm-shipment-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.gm-shipment-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.gm-shipment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gm-shipment-icon {
    font-size: 1.2rem;
}

.gm-shipment-target {
    font-weight: 600;
    font-size: 0.85rem;
    flex: 1;
}

.gm-shipment-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gm-shipment-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}

.gm-shipment-progress {
    margin-top: 0.3rem;
}

.gm-shipment-actions {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

.gm-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-dim);
}

/* ── Forecast ──────────────────────────────────────────────────────────────── */

.gm-forecast {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gm-forecast-row {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}
.gm-forecast-row:hover { border-color: var(--accent); }

.gm-trend--up   { border-left: 3px solid var(--success); }
.gm-trend--down { border-left: 3px solid var(--accent); }

.gm-forecast-market {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 140px;
}

.gm-forecast-icon {
    font-size: 1rem;
}

.gm-forecast-name {
    font-weight: 600;
    font-size: 0.8rem;
}

.gm-forecast-data {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.gm-forecast-bar-container {
    flex: 1;
    height: 10px;
    background: var(--bg-card);
    border-radius: 5px;
    overflow: hidden;
    max-width: 200px;
}

.gm-forecast-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}
.gm-forecast-bar.gm-trend--up   { background: linear-gradient(90deg, #66bb6a, var(--success)); }
.gm-forecast-bar.gm-trend--down { background: linear-gradient(90deg, #ef5350, var(--accent)); }

.gm-forecast-value {
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 50px;
    text-align: right;
}
.gm-forecast-value.gm-trend--up   { color: var(--success); }
.gm-forecast-value.gm-trend--down { color: var(--accent); }

.gm-forecast-info {
    font-size: 0.72rem;
    color: var(--text-dim);
    flex: 1;
    text-align: right;
}

.gm-forecast-summary {
    margin-top: 1rem;
    background: rgba(66, 165, 245, 0.08);
    border: 1px solid rgba(66, 165, 245, 0.2);
    border-radius: var(--radius);
    padding: 0.8rem;
    font-size: 0.82rem;
    color: var(--text-dim);
}

.gm-forecast-summary strong {
    color: var(--text);
}

/* ── Global Market Badges ──────────────────────────────────────────────────── */

.gm-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.gm-badge--active      { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.gm-badge--in_transit  { background: rgba(66, 165, 245, 0.18); color: #42a5f5; border: 1px solid rgba(66, 165, 245, 0.3); }
.gm-badge--delivered   { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.gm-badge--delayed     { background: rgba(255, 152, 0, 0.18); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); }
.gm-badge--cancelled   { background: rgba(233, 69, 96, 0.18); color: var(--accent); border: 1px solid rgba(233, 69, 96, 0.3); }
.gm-badge--processing  { background: rgba(255, 255, 255, 0.08); color: var(--text-dim); border: 1px solid var(--border); }
.gm-badge--growing     { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }
.gm-badge--stable      { background: rgba(66, 165, 245, 0.12); color: #42a5f5; border: 1px solid rgba(66, 165, 245, 0.3); }
.gm-badge--declining   { background: rgba(233, 69, 96, 0.18); color: var(--accent); border: 1px solid rgba(233, 69, 96, 0.3); }
.gm-badge--locked      { background: rgba(136, 153, 170, 0.12); color: var(--text-dim); border: 1px solid var(--border); }
.gm-badge--available   { background: rgba(76, 175, 80, 0.18); color: var(--success); border: 1px solid rgba(76, 175, 80, 0.3); }

/* ── GM Progress ───────────────────────────────────────────────────────────── */

.gm-progress {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    height: 18px;
    background: var(--bg-card);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
}
.gm-progress-fill {
    height: 100%;
    border-radius: 9px;
    background: linear-gradient(90deg, #42a5f5, #66bb6a);
    transition: width 0.5s ease;
}
.gm-progress span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 6 — Pixel-Theme Overrides
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-pixel .au-station,
body.theme-pixel .au-robot-card,
body.theme-pixel .au-upgrade-card,
body.theme-pixel .au-robot-buy-section {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .sl-pipe-col,
body.theme-pixel .sl-deal-card,
body.theme-pixel .sl-agent-card,
body.theme-pixel .sl-crisis-card,
body.theme-pixel .sl-buy-agent-section {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .gm-continent-card,
body.theme-pixel .gm-shipment-card,
body.theme-pixel .gm-forecast-row {
    border-radius: 0 !important;
    border-width: 2px;
}

body.theme-pixel .au-progress,
body.theme-pixel .au-eff-bar,
body.theme-pixel .au-batt-bar,
body.theme-pixel .sl-progress,
body.theme-pixel .sl-perf-bar,
body.theme-pixel .gm-progress,
body.theme-pixel .gm-forecast-bar-container {
    border-radius: 0 !important;
}

body.theme-pixel .au-badge,
body.theme-pixel .sl-badge,
body.theme-pixel .gm-badge {
    border-radius: 0 !important;
}

body.theme-pixel .au-assembly-line {
    border-radius: 0 !important;
}