/* 
   The Candy Factory - Quantitative Trading UI Stylesheet
   Architecture: Pure CSS for Jinja Server-Side Rendering
*/

:root {
    /* Color Palette */
    --ink: #e0e0e0;         /* Primary text */
    --panel: #121212;       /* Main background */
    --surface: #1e1e1e;     /* Component background */
    --line: #333333;        /* Borders and dividers */
    
    /* Semantic Colors */
    --ok: #00c853;          /* Success / Active / Profitable */
    --warn: #ffd600;        /* Warning / Sub-optimal */
    --bad: #d50000;         /* Error / Drawdown / Stop-loss */
    --absent: #424242;      /* Missing data */
    --muted: #757575;       /* Secondary text */
    --unknown: #ff3d00;     /* Critical unknown state - highly alarming */
}

* { box-sizing: border-box; }

body {
    background-color: var(--panel);
    color: var(--ink);
    font-family: 'JetBrains Mono', 'Courier New', monospace; /* Monospace for quant data */
    margin: 0;
    padding: 0;
    font-size: 14px;
}

/* Layout */
.shell-container {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    width: 250px;
    border-right: 1px solid var(--line);
    padding: 1rem;
    background-color: var(--surface);
}
.main-content {
    flex-grow: 1;
    padding: 2rem;
}

/* Typography & Tables */
h1, h2, h3 { color: var(--ink); font-weight: 600; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; }

/* 
   Critical States (Required by Backend Tests) 
*/
.state-stale {
    opacity: 0.6;
    border: 1px dashed var(--muted) !important;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 20px);
}

.s-unknown {
    /* Unknown is explicitly requested to be more alarming than amber/warning */
    border-left: 4px solid var(--unknown) !important;
    background-color: rgba(255, 61, 0, 0.1);
    animation: blink-critical 2s infinite;
}

.lvl-warning { color: var(--warn); }
.w-not_better { color: var(--bad); text-decoration: line-through; }
.d-collapsed { display: none !important; }
.card-empty { 
    border: 1px dashed var(--absent); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--muted);
    min-height: 100px;
}

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

.frej { color: var(--bad); } /* Rejected/Failed */
.fkept { color: var(--ok); font-weight: bold; } /* Kept/Passed */

/* Dashboard Specifics */
.dashboard-panel {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.status-tile {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}
.status-tile.ok { background-color: rgba(0, 200, 83, 0.15); color: var(--ok); }
.status-tile.broken { background-color: rgba(213, 0, 0, 0.15); color: var(--bad); }

.hash-chip {
    background-color: #2c2c2c;
    color: var(--muted);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

@keyframes blink-critical {
    0% { border-color: var(--unknown); }
    50% { border-color: transparent; }
    100% { border-color: var(--unknown); }
}