/* Gridbot Backtest layout.
 *
 * A reduction of the Trading dashboard's stylesheet down to what four pages
 * need: a login card, a header, a form, two tables and two definition
 * lists. The colour system is the Trading one's contract — `data-theme` set
 * by theme.js wins, and its absence follows the device — because the same
 * bootstrap script drives it and a second contract would leave the head-
 * loaded script setting an attribute nothing reads.
 */

:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --border: #d8dce3;
    --text: #1b1f24;
    --muted: #5b6570;
    --accent: #1f6feb;
    --danger: #b3261e;
    --radius: 6px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14171c;
        --surface: #1b1f26;
        --border: #2c323c;
        --text: #e7eaee;
        --muted: #9aa4b1;
        --accent: #6ea8fe;
        --danger: #f2807a;
    }
}

:root[data-theme="dark"] {
    --bg: #14171c;
    --surface: #1b1f26;
    --border: #2c323c;
    --text: #e7eaee;
    --muted: #9aa4b1;
    --accent: #6ea8fe;
    --danger: #f2807a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

h1, h2, h3 { font-weight: 600; line-height: 1.25; }

/* ── header ─────────────────────────────────────────────────────────── */

.app-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.app-title { font-size: 18px; margin: 0; }

.app-nav { display: flex; gap: 10px; align-items: center; }

.app-nav form { margin: 0; }

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    padding: 6px 8px;
    text-decoration: none;
}

.btn-primary,
.btn-secondary {
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
    padding: 8px 14px;
}

.btn-primary {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
}

.btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

/* ── main ───────────────────────────────────────────────────────────── */

.app-main {
    margin: 0 auto;
    max-width: 960px;
    padding: 20px;
}

.drift-notice {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    color: var(--muted);
    padding: 10px 14px;
}

.page-error,
.run-error,
.field-error,
.login-error {
    color: var(--danger);
    margin: 6px 0;
    min-height: 1em;
}

.field-error { font-size: 13px; }

/* ── forms ──────────────────────────────────────────────────────────── */

.form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    padding: 12px 16px;
}

.form-group { margin-bottom: 12px; }

.form-group label { display: block; font-size: 13px; color: var(--muted); }

.form-check { display: flex; gap: 8px; align-items: center; margin: 12px 0; }

input[type="text"],
input[type="password"],
select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    padding: 7px 9px;
    width: 100%;
}

input[type="checkbox"] { width: auto; }

/* ── tables and lists ───────────────────────────────────────────────── */

.runs-table,
.sources-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-collapse: collapse;
    border-radius: var(--radius);
    width: 100%;
}

.runs-table th,
.runs-table td,
.sources-table th,
.sources-table td {
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    text-align: left;
}

.sources-table td { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; word-break: break-all; }

dl {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    gap: 4px 16px;
}

dt { color: var(--muted); }

dd { margin: 0; word-break: break-all; }

.run-state { font-size: 20px; font-weight: 600; }

/* ── login ──────────────────────────────────────────────────────────── */

.login-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 8vh auto;
    max-width: 380px;
    padding: 28px;
}

.login-title { font-size: 22px; margin: 0 0 4px; }

.login-subtitle { color: var(--muted); margin: 0 0 18px; }

.login-submit { width: 100%; }