/*
 * CSS variables — every color in this file MUST go through a variable.
 * Light mode defaults below; dark mode overrides further down.
 * Brand colors (--color-primary, --color-secondary) are also injected per
 * request from platform_config in base.twig, which takes precedence over
 * the values here.
 */
:root {
    /* Brand */
    --color-primary: #1D9E75;
    --color-secondary: #378ADD;
    --color-on-primary: #ffffff;     /* text on primary-colored surfaces */

    /* Surfaces */
    --color-bg: #f7f8fa;
    --color-bg-secondary: #f0f2f5;   /* alias kept for compat: --color-surface-alt */
    --color-surface: #ffffff;
    --color-surface-alt: var(--color-bg-secondary);

    /* Text */
    --color-text: #15181d;
    --color-text-secondary: #5b6472;
    --color-text-muted: var(--color-text-secondary);

    /* Lines */
    --color-border: #e3e6eb;

    /* Status */
    --color-success: #1f8f4e;
    --color-warning: #b9770e;
    --color-error: #c0392b;
    --color-danger: var(--color-error);

    /* Surface tints used by flash banners — derived shades, no raw hex outside :root */
    --color-success-bg: rgba(31,143,78,.10);
    --color-warning-bg: rgba(185,119,14,.12);
    --color-error-bg: rgba(192,57,43,.10);

    /* Tints used by chat bubbles and row highlights */
    --color-bubble-self: rgba(55,138,221,.15);
    --color-bubble-other: rgba(0,0,0,.05);
    --color-row-highlight: rgba(0,0,0,.05);
    --color-system-msg: rgba(0,0,0,.06);

    /* Links */
    --color-link: var(--color-primary);

    /* Shadow tint */
    --shadow-color: 0,0,0;
    --shadow: 0 1px 3px rgba(var(--shadow-color),.06), 0 4px 12px rgba(var(--shadow-color),.04);

    /* Layout */
    --radius: 10px;
    --space: 1rem;
    --max-w: 1100px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0f1216;
        --color-bg-secondary: #1f242c;
        --color-surface: #171b21;
        --color-text: #e9ecf1;
        --color-text-secondary: #9aa3b2;
        --color-border: #262c35;
        --color-success: #2ecc71;
        --color-warning: #e0a64a;
        --color-error: #e57368;
        --color-success-bg: rgba(46,204,113,.14);
        --color-warning-bg: rgba(224,166,74,.14);
        --color-error-bg: rgba(229,115,104,.14);
        --color-bubble-self: rgba(55,138,221,.25);
        --color-bubble-other: rgba(255,255,255,.06);
        --color-row-highlight: rgba(255,255,255,.05);
        --color-system-msg: rgba(255,255,255,.06);
        --shadow: 0 1px 3px rgba(var(--shadow-color),.4), 0 6px 20px rgba(var(--shadow-color),.3);
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}
[x-cloak] { display: none !important; }

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.nav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    position: sticky; top: 0; z-index: 10;
}
.nav__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: .75rem var(--space);
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.nav__brand { display: flex; align-items: center; gap: .5rem; color: var(--color-text); font-weight: 700; }
.nav__brand img { height: 32px; }
.nav__brand-mark { color: var(--color-primary); font-size: 1.5rem; }
.nav__tagline { color: var(--color-text-muted); font-size: .9rem; display: none; }
@media (min-width: 640px) { .nav__tagline { display: inline; } }
.nav__menu { margin-left: auto; display: flex; align-items: center; gap: .75rem; position: relative; }
.nav__user {
    background: transparent; border: 1px solid var(--color-border); color: var(--color-text);
    padding: .4rem .75rem; border-radius: var(--radius); cursor: pointer;
}
.nav__dropdown {
    position: absolute; top: 110%; right: 0; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    box-shadow: var(--shadow); list-style: none; padding: .25rem 0; min-width: 160px; margin: 0;
}
.nav__dropdown a { display: block; padding: .5rem .85rem; color: var(--color-text); }
.nav__dropdown a:hover { background: var(--color-surface-alt); text-decoration: none; }

.main { max-width: var(--max-w); margin: 1.5rem auto; padding: 0 var(--space); }

.hero { text-align: center; padding: 3rem 1rem; }
.hero h1 { font-size: 2.4rem; margin: 0 0 .5rem; }
.hero__tagline { color: var(--color-text-muted); font-size: 1.1rem; }

.card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.card--narrow { max-width: 440px; margin-left: auto; margin-right: auto; }
.card h1, .card h2 { margin-top: 0; }

.grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.form { display: flex; flex-direction: column; gap: .85rem; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--color-text-muted); }
.form input {
    padding: .6rem .75rem; border-radius: var(--radius);
    border: 1px solid var(--color-border); background: var(--color-surface-alt);
    color: var(--color-text); font-size: 1rem;
}
.form input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.btn {
    display: inline-block; padding: .55rem 1rem; border-radius: var(--radius);
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text); cursor: pointer; font: inherit; text-decoration: none;
}
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { filter: brightness(1.05); text-decoration: none; }

.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.tab {
    background: transparent; border: none; padding: .6rem .9rem; cursor: pointer;
    color: var(--color-text-muted); border-bottom: 2px solid transparent; font: inherit;
}
.tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.flash-wrap { max-width: var(--max-w); margin: .75rem auto 0; padding: 0 var(--space); }
.flash { padding: .65rem .9rem; border-radius: var(--radius); margin-bottom: .5rem; border: 1px solid var(--color-border); }
.flash--error { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }
.flash--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.flash--warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .5rem .6rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.table th { color: var(--color-text-muted); font-weight: 600; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.kv dt { color: var(--color-text-muted); font-family: ui-monospace, monospace; font-size: .85rem; }
.kv dd { margin: 0; word-break: break-all; }

.muted { color: var(--color-text-muted); }

.wizard__progress { margin-bottom: 1rem; }
.wizard__bar { height: 6px; background: var(--color-surface-alt); border-radius: 999px; overflow: hidden; margin-top: .25rem; }
.wizard__bar span { display: block; height: 100%; background: var(--color-primary); transition: width .2s ease; }
.wizard__actions { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
.form select { padding: .55rem .7rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text); font: inherit; }

.draft-board { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .draft-board { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .draft-board { grid-template-columns: repeat(4, 1fr); } }
.division .team-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.team { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
        padding: .45rem .55rem; border-radius: var(--radius); border-left: 4px solid var(--team-color, var(--color-border));
        background: var(--color-surface-alt); margin-bottom: .35rem; font-size: .92rem; }
.team--taken { opacity: .6; }
.team--avail { background: var(--color-surface); }
.footer { text-align: center; padding: 2rem 1rem; color: var(--color-text-muted); }