/* Shared styling for the Autotrader pages. */
:root {
    --accent: #3498db;
    --accent-dark: #2980b9;
    --nav: #2c3e50;
    --bg: #f5f5f5;
    --card: #ffffff;
    --text: #333333;
    --muted: #7f8c8d;
    --border: #e3e7ea;
    --train: #eaf4fb;
    --train-text: #21618c;
    --validate: #eafaf1;
    --validate-text: #1e8449;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--bg);
    margin: 0;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    padding: 12px 22px;
    background: var(--nav);
}

.nav-account {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.nav-account .who {
    color: #d5dbdb;
}

.nav-account form {
    margin: 0;
}

.nav a {
    color: #ecf0f1;
    text-decoration: none;
}

.nav a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.nav .brand {
    font-weight: 600;
    margin-right: auto;
}

.container {
    max-width: 1400px;
    margin: 22px auto;
    padding: 0 20px;
}

h1 {
    color: var(--nav);
    margin: 6px 0 4px;
}

h2 {
    color: var(--nav);
    margin: 26px 0 6px;
}

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

.card {
    background: var(--card);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 22px 24px;
    margin: 16px 0 22px;
}

fieldset {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 0 0 18px;
    padding: 12px 16px 16px;
}

legend {
    font-weight: 600;
    color: var(--nav);
    padding: 0 6px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px 18px;
}

label {
    display: block;
    font-size: 0.9rem;
    color: #34495e;
}

input[type=text], input[type=date], select {
    width: 100%;
    padding: 7px 9px;
    margin-top: 3px;
    border: 1px solid #cfd6dc;
    border-radius: 4px;
    font-size: 0.95rem;
    background: #ffffff;
}

.checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 16px;
    margin-top: 8px;
}

.checks label {
    display: flex;
    gap: 8px;
    align-items: center;
}

.checks input {
    width: auto;
    margin: 0;
}

.actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

button.primary {
    background: var(--accent);
    color: #ffffff;
    border: 0;
    border-radius: 4px;
    padding: 11px 22px;
    font-size: 1rem;
    cursor: pointer;
}

button.primary:hover {
    background: var(--accent-dark);
}

.muted {
    color: var(--muted);
    font-size: 0.9rem;
}

.banner {
    border-radius: 6px;
    padding: 12px 16px;
    margin: 14px 0;
    font-size: 0.95rem;
}

.banner.error {
    background: #fdecea;
    color: #b03a2e;
    border: 1px solid #f5c6c0;
}

.banner.warn {
    background: #fef9e7;
    color: #9a7d0a;
    border: 1px solid #f7dc6f;
}

.table-wrap {
    overflow-x: auto;
    background: var(--card);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 6px 10px 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

th, td {
    border-bottom: 1px solid var(--border);
    padding: 7px 9px;
    text-align: right;
    white-space: nowrap;
}

th.left, td.left {
    text-align: left;
}

thead th {
    background: #f0f4f7;
    color: var(--nav);
    font-weight: 600;
}

thead th.group-train {
    background: var(--train);
    color: var(--train-text);
    text-align: center;
}

thead th.group-validate {
    background: var(--validate);
    color: var(--validate-text);
    text-align: center;
}

.pill {
    display: inline-block;
    background: #eaf4fb;
    color: #21618c;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.78rem;
    margin-right: 5px;
}

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.stat {
    font-size: 0.85rem;
    color: var(--muted);
}

.stat b {
    display: block;
    font-size: 1.02rem;
    color: var(--nav);
}

/* Live engine page: the cards, badges and position block its in-place refresh swaps in. */
.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card-head .spacer {
    margin-left: auto;
}

.card-head h2 {
    margin: 0;
}

.card-meta {
    margin: 8px 0 0;
}

.card-meta.tight {
    margin-top: 2px;
}

.badge {
    display: inline-block;
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 0.78rem;
    margin-right: 5px;
    background: #eef1f4;
    color: #566573;
}

.badge.ok {
    background: #eafaf1;
    color: #1e8449;
}

.badge.warn {
    background: #fef9e7;
    color: #9a7d0a;
}

.badge.dry {
    background: #eaf4fb;
    color: #21618c;
}

.badge.real {
    background: #fdecea;
    color: #b03a2e;
}

button.secondary {
    background: #eef1f4;
    color: #566573;
    border: 0;
    border-radius: 4px;
    padding: 9px 18px;
    font-size: 0.95rem;
    cursor: pointer;
}

button.primary.small {
    padding: 9px 18px;
    font-size: 0.95rem;
}

.position {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 12px 0;
}

.pos-line {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.kv {
    font-size: 0.85rem;
    color: var(--muted);
}

.kv b {
    display: block;
    font-size: 1.0rem;
    color: var(--nav);
}

.pos {
    color: #1e8449;
}

.neg {
    color: #b03a2e;
}

table.orders {
    font-size: 0.85rem;
}

table.orders td, table.orders th {
    padding: 5px 9px;
}

/* A number that changed since the previous refresh flashes briefly. */
@keyframes flash {
    0% {
        background-color: #fff3bf;
    }
    100% {
        background-color: transparent;
    }
}

.flash {
    animation: flash 1s ease-out;
}

/* The account history page: tabs, filters, paging, strategy colours and expandable rows. */
.tabs {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
}

.tabs a {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: #eef1f4;
    color: #566573;
    text-decoration: none;
    font-size: 0.95rem;
}

.tabs a.active {
    background: #ffffff;
    color: var(--nav);
    font-weight: 600;
}

.filters {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: end;
}

.filters .f {
    min-width: 150px;
}

.filters label {
    font-size: 0.82rem;
}

.pager {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--muted);
}

.pager a {
    text-decoration: none;
}

.pager .disabled {
    color: #b6c2cb;
}

.table-scroll {
    max-height: 62vh;
    overflow-y: auto;
    /* A wide table scrolls inside its own box instead of pushing the page sideways on narrow
       viewports. */
    overflow-x: auto;
}

.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.totals {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 12px;
}

th a {
    color: inherit;
    text-decoration: none;
}

th a.sorted {
    text-decoration: underline;
}

th .arrow {
    color: var(--accent);
    font-size: 0.8rem;
}

.schip {
    display: inline-block;
    border-radius: 6px;
    padding: 1px 8px;
    font-weight: 600;
    font-size: 0.8rem;
}

.hue-0 { background: #eaf4fb; color: #21618c; }
.hue-1 { background: #f5eef8; color: #6c3483; }
.hue-2 { background: #eafaf1; color: #1e8449; }
.hue-3 { background: #fef5e7; color: #9c640c; }
.hue-4 { background: #e8f6f3; color: #117864; }
.hue-5 { background: #eef1f4; color: #566573; }

tr.hue-0 td:first-child { border-left: 8px solid #5dade2; }
tr.hue-1 td:first-child { border-left: 8px solid #bb8fce; }
tr.hue-2 td:first-child { border-left: 8px solid #58d68d; }
tr.hue-3 td:first-child { border-left: 8px solid #f0b27a; }
tr.hue-4 td:first-child { border-left: 8px solid #48c9b0; }
tr.hue-5 td:first-child { border-left: 8px solid #aab7c4; }

tr.detail td {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    padding: 4px 10px;
    text-align: left;
}

tr.detail summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.85rem;
}

tr.detail details[open] summary {
    color: var(--nav);
}

.detail-grid {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
    padding: 6px 0 10px;
}

/* The live page's refresh pulse is decorative; honour a request for less motion. */
@media (prefers-reduced-motion: reduce) {
    .flash {
        animation: none;
    }
}

/* ---- the ledger tab ---- */

/* Sides: a buy came in green, a sell went out red — the same reading as the live page. */
.schip.side-buy {
    background: #eafaf1;
    color: #1e8449;
}

.schip.side-sell {
    background: #fdecea;
    color: #b03a2e;
}

.badge.bad {
    background: #f2f3f5;
    color: #7f8c8d;
}

.price-now {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    align-items: baseline;
}

.pn-label {
    color: #566573;
}

.pn-value {
    font-weight: 600;
}

.pn-buy {
    color: #1e8449;
}

.pn-sell {
    color: #b03a2e;
}

/* The fills of an expanded order sit inside its row, one size down. */
.fills-table {
    table-layout: fixed;
    width: 760px;
    font-size: 0.85rem;
    border-collapse: collapse;
}

.fills-table th {
    text-align: right;
    padding: 5px 9px;
    background: #f0f4f7;
    color: #2c3e50;
    font-weight: 600;
    cursor: default;
}

.fills-table th.left,
.fills-table td.left {
    text-align: left;
}

.fills-table td {
    padding: 5px 9px;
    text-align: right;
    border-bottom: 1px solid #e3e7ea;
}

/* The rows-per-page select keeps its own width: it sits in a row of pager text and links, and the
   global select rule would stretch it across the line. */
.pager select {
    width: 80px;
    flex: 0 0 auto;
}

/* A multi-value filter group: compact chips that wrap inside the filter bar. The group may shrink
   below its preferred width on a narrow viewport; the chips wrap instead. */
.filters .f-checks {
    min-width: 0;
    flex: 1 1 320px;
}

.filters .checks-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
}

/* The chip labels set their own size: the filter bar's label rule is smaller. */
.filters .checks-inline label {
    font-size: 0.9rem;
}