/* 20260507 CL - legacy "matrix terminal" theme overlay, softened palette.
   Keeps the legacy black/green/yellow spirit but dials back the saturation:
     - body text: muted mint #b5e8b5 instead of #cdcdcd
     - accent green: #4ad05c (clear but not neon) instead of #00CC00
     - accent amber: #f5a623 (warm amber) instead of pure #FFFF00
     - background: #0e1410 (near-black with green tint) instead of pure #000000
     - surfaces: #1c241e instead of #212020
     - borders: #1f5a2f instead of #063B19 (better visibility) */

:root {
    --wc-bg: #0e1410;
    --wc-surface: #1c241e;
    --wc-surface-alt: #141a16;
    --wc-text: #d6f5d6;       /* 20260614 CL - brightened from #b5e8b5: muted mint read fuzzy/hard across the site (bold values bloomed, prose was low-chroma) */
    --wc-text-dim: #a8c8ae;   /* 20260614 CL - brightened from #8aa890 so secondary text is legible too */
    --wc-green: #35cc5a;
    --wc-green-bright: #55e07a;
    --wc-amber: #f5a623;
    --wc-amber-soft: #ffdf66;   /* 20260614 CL - brightened from #f9d976: headings/labels read as a dull yellow; cleaner brighter gold */
    --wc-border: #1f5a2f;
    --wc-border-strong: #2e8047;
    --wc-error: #ff7b7b;
}

html, body {
    background-color: var(--wc-bg);
    color: var(--wc-text);
    font-family: Arial, Helvetica, sans-serif;
}

/* Layout zone colours (positioning is in app.css) */
.wc-top {
    background: linear-gradient(180deg, #0d3d1e 0%, #082812 100%);
    border-bottom: 1px solid var(--wc-border);
}
.wc-left, .wc-right {
    background: var(--wc-surface);
    border-color: var(--wc-border);
    color: var(--wc-text);
}
.wc-content {
    background: var(--wc-bg);
    color: var(--wc-text);
}
.wc-bottom {
    background: #071f0f;
    border-top: 1px solid var(--wc-border);
    color: var(--wc-text-dim);
}

/* Nav toggle */
.wc-nav-toggle { border-bottom-color: var(--wc-border); color: var(--wc-text-dim); }
.wc-nav-toggle:hover { color: var(--wc-green); }

/* Year badges */
.wc-year-badge { color: var(--wc-text-dim); background: rgba(255,255,255,0.07); }
.wc-year-badge:hover { background: rgba(255,255,255,0.14); color: var(--wc-text); }
.wc-year-badge.wc-year-badge-active { background: var(--wc-green); color: #071f0f; }

.wc-greeting { color: var(--wc-text-dim); }

/* Headings - amber for big titles, soft green for sub-headings. */
h1, h2, h3, h4, h5, h6 { color: var(--wc-amber); }
.wc-content h1 { color: var(--wc-amber); font-weight: 600; }
.wc-content h2 { color: var(--wc-amber-soft); font-weight: 500; }
.wc-content h3 { color: var(--wc-amber); }

/* Cards become dark panels with a soft green border. */
.wc-card {
    background-color: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: 4px;
    color: var(--wc-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.wc-card h3 { color: var(--wc-green); }
.wc-card h4 { color: var(--wc-amber-soft); }

/* Summary tables. */
.wc-summary th { color: var(--wc-amber-soft); font-weight: 500; }
.wc-summary td { color: var(--wc-text); font-variant-numeric: tabular-nums; }
.wc-summary tr:hover td, .wc-summary tr:hover th { background-color: rgba(74,208,92,0.05); }

/* Data tables. */
.wc-table {
    background-color: var(--wc-surface);
    border: 1px solid var(--wc-border);
    color: var(--wc-text);
}
.wc-table thead th {
    background-color: var(--wc-surface-alt);
    color: var(--wc-amber);
    border-bottom: 1px solid var(--wc-border-strong);
    letter-spacing: 0.5px;
    font-weight: 500;
}
.wc-table tbody tr:nth-child(even) { background-color: rgba(0,0,0,0.15); }
.wc-table th, .wc-table td { border-bottom: 1px solid rgba(31,90,47,0.4); }
.wc-table tbody tr:hover { background-color: rgba(74,208,92,0.07); }

/* Inputs - dark with soft green text. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
textarea, select {
    background-color: var(--wc-surface-alt);
    color: var(--wc-text);                  /* 20260614 CL - was --wc-green-bright; input amounts (FD/UT/Shares) should be mint like the rest of the values */
    border: 1px solid var(--wc-border);
    padding: 0.4rem 0.6rem;
    border-radius: 3px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--wc-green);
    box-shadow: 0 0 0 2px rgba(74,208,92,0.25);
}

/* .wc-primary defined in app.css — uses var(--wc-green) with hex fallbacks */

/* Warning / tip messages. */
.wc-warning {
    color: var(--wc-error);
    background: rgba(255,123,123,0.08);
    border-left: 3px solid var(--wc-error);
    padding: 0.6rem 0.8rem;
    border-radius: 3px;
}
.wc-tip {
    background-color: rgba(245,166,35,0.08);
    color: var(--wc-amber-soft);
    border-left: 3px solid var(--wc-amber);
    padding: 0.6rem 0.8rem;
    border-radius: 3px;
    font-size: 0.85rem;
}

/* Rotating financial-tip card in the right-hand panel. */
.wc-tip-card {
    margin-top: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(180deg, rgba(245,166,35,0.10) 0%, rgba(245,166,35,0.04) 100%);
    border-left: 3px solid var(--wc-amber);
    border-radius: 3px;
    font-size: 0.85rem;
}
.wc-tip-header {
    color: var(--wc-amber);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem;
    margin-bottom: 0.3rem;
}
.wc-tip-body { color: var(--wc-amber-soft); margin: 0; line-height: 1.4; }
.wc-tip-source { color: var(--wc-text-dim); margin-top: 0.4rem; font-size: 0.75rem; font-style: italic; }
.wc-tip-source a { color: var(--wc-text-dim); }
.wc-tip-source a:hover { color: var(--wc-amber); }

/* Links inside content area. */
.wc-content a, .wc-content a:visited { color: var(--wc-amber-soft); }
.wc-content a:hover { color: var(--wc-amber); }

/* Page banner gets a soft green glow. */
.wc-page-banner img {
    box-shadow: 0 0 14px rgba(74,208,92,0.25);
    border-radius: 2px;
}

/* Game-specific: consistent green accent stripe across all game panels. */
.wc-card.wc-rentbuy,
.wc-card.wc-investprop { border-top: 3px solid var(--wc-green, #4ad05c); }

/* Form labels. */
label { color: var(--wc-text-dim); }
.form-floating > label { color: var(--wc-text-dim); }

/* Bootstrap-derived overrides so Identity scaffolded pages don't look broken. */
.btn, .btn-primary {
    background-color: var(--wc-green);
    color: #0a1a0d;
    border: 1px solid var(--wc-green-bright);
    border-radius: 3px;
}
.btn:hover, .btn-primary:hover { background-color: var(--wc-green-bright); color: #0a1a0d; }
.form-control {
    background-color: var(--wc-surface-alt);
    color: var(--wc-green-bright);
    border-color: var(--wc-border);
}
.form-control:focus {
    background-color: var(--wc-surface-alt);
    color: var(--wc-green-bright);
    border-color: var(--wc-green);
    box-shadow: 0 0 0 2px rgba(74,208,92,0.25);
}