:root {
    --bg: #0d1117;
    --bg-soft: #121822;
    --card: #151d29;
    --card-2: #1a2432;
    --line: #263243;
    --text: #d8e1ee;
    --muted: #8b9aae;
    --accent: #4f9dff;
    --buy: #2fbf71;
    --sell: #e5484d;
    --warn: #d99a2b;
    --mono: ui-monospace, "Cascadia Mono", "Consolas", "Menlo", monospace;
    --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
}

a {
    color: var(--accent);
    text-decoration: none;
}

/* Scrollbars: thin, dark, arrow-less, so they sit inside the theme instead of
   next to it. Applies to every scrollable container (tables, chart strip). */
* {
    scrollbar-width: thin;
    scrollbar-color: #3a4d66 transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-button {
    display: none;
}

/* The transparent border insets the thumb to 6px and keeps it off the edge. */
*::-webkit-scrollbar-thumb {
    background-color: #3a4d66;
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
    min-height: 34px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #4d6480;
}

*::-webkit-scrollbar-thumb:active {
    background-color: #5c7797;
}

h1 {
    font-size: 22px;
    margin: 0;
    letter-spacing: 0.2px;
}

h2 {
    font-size: 15px;
    margin: 0;
    font-weight: 600;
}

h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 14px 0 6px;
    font-weight: 600;
}

.shell {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px 22px 40px;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer {
    margin-top: 24px;
    font-size: 12px;
}

.page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

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

.small {
    font-size: 12px;
}

.dim {
    color: var(--muted);
    font-size: 12px;
}

.mono {
    font-family: var(--mono);
    font-size: 12.5px;
}

.break {
    word-break: break-all;
}

.warn {
    color: var(--warn);
}

.buy {
    color: var(--buy);
}

.sell {
    color: var(--sell);
}

.btn {
    font: inherit;
    font-size: 13px;
    color: #eaf3ff;
    background: #23609f;
    border: 1px solid #2f74b8;
    border-radius: 7px;
    padding: 6px 12px;
    cursor: pointer;
}

.btn:hover:not(:disabled) {
    background: #2b74bd;
}

.btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.btn.ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}

.btn.ghost:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--card-2);
}

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

.alert.error {
    border-color: #6b2a2c;
    background: #2a1618;
}

/* KPI cards */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.kpi {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    border-left: 3px solid var(--line);
    min-width: 0;
    overflow-wrap: anywhere;
    /* The headline scales with the tile instead of overflowing it on a narrow row. */
    container-type: inline-size;
}

.kpi.accent {
    border-left-color: var(--accent);
}

.kpi.buy {
    border-left-color: var(--buy);
}

.kpi.sell {
    border-left-color: var(--sell);
}

.kpi-label {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.kpi-value {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(16px, 7.5cqw, 21px);
    font-weight: 600;
    margin-top: 4px;
    white-space: nowrap;
}

.kpi.buy .kpi-value {
    color: var(--buy);
}

.kpi.sell .kpi-value {
    color: var(--sell);
}

/* What the tile is about. An instrument name is as long as it wants to be, so the line is cut off rather
   than wrapped; the tooltip (and the tile's own table row) holds the whole name. */
.kpi-subject {
    font-size: 12px;
    color: var(--text);
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The figures under the headline. Short labels, shortened values, tooltips with the exact numbers. */
.kpi-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 12px;
    margin-top: 6px;
}

.kpi-stat {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

/* A label is a caption, so it reads as "Fills" and the colon is drawn with it rather than typed into the
   string — a label with no figure (the currency badge) then needs no separator at all. */
.kpi-stat-label::after {
    content: ":";
}

.kpi-stat-value {
    color: var(--text);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    margin-left: 4px;
}

.kpi-stat.buy .kpi-stat-value {
    color: var(--buy);
}

.kpi-stat.sell .kpi-stat-value {
    color: var(--sell);
}

.kpi-stat.accent .kpi-stat-value {
    color: var(--accent);
}

/* A currency is not a figure, so it reads as a badge on the same line. */
.kpi-stat.tag {
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 6px;
}

.kpi-stat.tag .kpi-stat-value {
    margin-left: 0;
}

.kpi-sub {
    color: var(--muted);
    font-size: 11.5px;
    margin-top: 4px;
}

/* Filters */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-group.grow {
    flex: 1 1 320px;
    flex-wrap: nowrap;
}

.filter-group.grow input[type="search"] {
    flex: 1 1 auto;
    min-width: 120px;
}

.filter-group.grow .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.filter-label {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.chip {
    font: inherit;
    font-size: 12.5px;
    color: var(--text);
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
}

.chip:hover {
    border-color: var(--accent);
}

.chip.active {
    background: #1e4f80;
    border-color: var(--accent);
    color: #eaf3ff;
}

select,
input[type="search"] {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 9px;
}

input[type="search"] {
    flex: 1 1 220px;
    min-width: 180px;
}

select:focus,
input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Tables */
.table-wrap {
    overflow-x: auto;
}

.table-wrap.scroll {
    max-height: 420px;
    overflow-y: auto;
}

table.trades,
table.mini {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.8px;
}

table.trades th,
table.mini th {
    position: sticky;
    top: 0;
    background: #182231;
    color: var(--muted);
    text-align: left;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

table.trades th.sorted {
    color: var(--text);
}

/* Numeric and index columns are right-aligned, so their headers have to follow the
   cells. Without these the label sits on the left edge and the digits look centred. */
table.trades th.num,
table.mini th.num,
table.trades th.idx {
    text-align: right;
}

/* On a right-aligned header the arrow goes before the label, otherwise it pushes the
   label away from the right edge the digits end at. */
table.trades th.num .sort-arrow {
    margin-left: 0;
    margin-right: 4px;
}

table.trades th.sortable:hover {
    cursor: pointer;
    color: var(--accent);
}

.sort-arrow {
    color: var(--accent);
    font-size: 10px;
    margin-left: 4px;
}

table.trades td,
table.mini td {
    padding: 7px 10px;
    border-bottom: 1px solid #1f2937;
    white-space: nowrap;
}

table.trades tbody tr:hover {
    background: #1b2635;
    cursor: pointer;
}

table.trades tbody tr.selected {
    background: #1e3a57;
}

.num {
    text-align: right;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

.idx {
    color: var(--muted);
    text-align: right;
    font-family: var(--mono);
    font-size: 11px;
    width: 42px;
}

td.side.buy,
td.status.filled {
    font-weight: 600;
}

td.side.buy {
    color: var(--buy);
}

td.side.sell {
    color: var(--sell);
}

td.status.filled {
    color: #56d1a0;
}

td.status.canceled {
    color: #9aa7b8;
}

td.status.rejected {
    color: #ef6b6b;
}

td.status.expired {
    color: var(--warn);
}

td.status.other {
    color: #c3ccd9;
}

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

/* Details */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.kv {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.kv dt {
    color: var(--muted);
    font-size: 11.5px;
}

.kv dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 12.5px;
    text-align: right;
}

table.mini td,
table.mini th {
    font-size: 12.3px;
}

table.mini td.mono {
    font-family: var(--mono);
}

@media (max-width: 720px) {
    .shell {
        padding: 14px;
    }

    .kv {
        grid-template-columns: 1fr;
    }

    .kv dd {
        text-align: left;
    }
}

/* P&L page */
/* Chart and the per-instrument table share the first row; the tape spans the row below them. */
.pnl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.tape-card {
    min-width: 0;
    grid-column: 1 / -1;
}

/* Both cards on the first row end at the same line: the table body takes exactly the
   chart's drawing height (viewBox 780x300 → aspect 2.6) plus the chart legend line. */
.inst-card {
    container-type: inline-size;
}

.inst-card .table-wrap {
    /* 100cqw is the card's content box, i.e. exactly the width the chart SVG gets. */
    height: calc(100cqw / 2.6 + 26px);
    max-height: none;
    min-height: 220px;
}

.chart-svg {
    display: block;
    width: 100%;
    height: auto;
}

.grid-line {
    stroke: var(--line);
    stroke-width: 1;
}

.zero-line {
    stroke: #3c4b60;
    stroke-width: 1.4;
}

.axis-line {
    stroke: var(--line);
    stroke-width: 1;
}

.axis-label {
    fill: #a6b6cb;
    font-size: 12px;
    font-family: var(--mono);
}

/* A traded period: the cumulative P&L it ended at, drawn from the zero line out to that value. */
.chart-bar.up {
    fill: var(--buy);
}

.chart-bar.down {
    fill: var(--sell);
}

/* Full-height column over one bar, so hovering a thin bar still works. */
.chart-hover {
    fill: transparent;
}

.chart-hover:hover {
    fill: rgba(255, 255, 255, 0.18);
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.legend-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
}

.legend-swatch.buy {
    background: var(--buy);
}

.legend-swatch.sell {
    background: var(--sell);
}

.legend-value {
    margin-left: 6px;
    color: var(--text);
}

table.mini tbody tr {
    cursor: pointer;
}

table.mini tbody tr.focused {
    background: #1e3a57;
}

.strong {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 1180px) {
    .pnl-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}