html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

:root { --page-gutter: 4rem; }

.content.container-fluid {
    padding-top: 2.2rem;
    padding-bottom: 2rem;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


.netsummary-table > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; }
.netsummary-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.net-long { color: #198754; font-weight: 600; }
.net-short { color: #dc3545; font-weight: 600; }

.login-body { background: #f1f3f5; min-height: 100vh; display: grid; place-items: center; }
.login-card { background: #fff; padding: 2rem; border-radius: .5rem; width: min(22rem, 92vw); box-shadow: 0 2px 12px rgba(0,0,0,.08); }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.panel { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: .9rem; }
.group-item { display: flex; justify-content: space-between; width: 100%; padding: .35rem .6rem; border: 0; border-bottom: 1px solid #f1f3f5; background: none; text-align: left; font-size: .9rem; }
.group-item:hover { background: #eef5ff; }
.group-item .add { color: #1b6ec2; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { background: #e7f1ff; color: #0b3d91; border-radius: 1rem; padding: .15rem .3rem .15rem .7rem; font-size: .85rem; }
.chip-x { border: 0; background: none; color: #0b3d91; font-size: 1.1rem; line-height: 1; padding: 0 .35rem; }

.quote { display: inline-block; padding: .05rem .4rem; border-radius: .3rem; }
.tick-up { background: #c9f0d5; color: #0a5c2b; }
.tick-down { background: #f9cdd1; color: #8a1c26; }

.stat-card { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: .7rem .85rem; height: 100%; }
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.stat-value { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: .78rem; color: #6c757d; font-variant-numeric: tabular-nums; }

.group-picker { position: relative; }
.group-dropdown { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid #ced4da; border-radius: .35rem; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 50vh; overflow-y: auto; margin-top: 2px; }
.group-add-all { background: #f4f8ff; font-weight: 600; }

.panel-cell { border: 1px solid #e9ecef; border-radius: .4rem; padding: .75rem; height: 100%; background: #fafbfc; }

.panel-plain { border: 0; background: transparent; padding: 0; }

.level { padding: .05rem .45rem; border-radius: .3rem; font-weight: 600; }
.level-critical { background: #f9cdd1; color: #8a1c26; }
.level-warning { background: #fff0c2; color: #7a5200; }
.level-ok { background: #e3f4e8; color: #0f5a2d; }
.drill { background: #f8fafc; border: 1px solid #e3e8ee; border-radius: .4rem; padding: .75rem; margin: .25rem 0 .5rem; }
.row-click { cursor: pointer; }
.row-click:hover td { background: #eef5ff !important; }
.row-chevron { display: inline-block; width: 1rem; color: #6c757d; }
.badge-fast { background: #fde2c8; color: #8a4300; border-radius: .3rem; padding: .05rem .4rem; font-size: .72rem; font-weight: 600; }
.pnl-chart { width: 100%; height: 12rem; display: block; background: #fbfcfd; border: 1px solid #eef0f2; border-radius: .35rem; }
.pnl-up { fill: #2f9e5c; }
.pnl-down { fill: #d6455a; }
.pnl-axis { stroke: #adb5bd; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pnl-labels { display: flex; justify-content: space-between; font-size: .72rem; color: #6c757d; margin-top: .2rem; }

.alert-settings { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: .5rem .85rem; }
.alert-settings summary { cursor: pointer; font-size: .9rem; color: #495057; }

/* ---- sticky status strip ---- */
.strip-item { display: inline-flex; flex-direction: column; line-height: 1.15; font-size: .72rem; color: #aab4c3; }
.strip-item strong { font-size: .95rem; color: #fff; font-variant-numeric: tabular-nums; }
.strip-item .net-long { color: #6fdc9a; }
.strip-item .net-short { color: #ff8b98; }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .15rem .65rem; border-radius: 1rem; background: rgba(255,255,255,.1); }
.status-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #adb5bd; }
.status-live .status-dot { background: #36d27b; }
.status-paused .status-dot { background: #f2b84b; }
.status-bad .status-dot { background: #ff5c70; }

.stale-banner { background: #fff3cd; border: 1px solid #ffe08a; color: #664d03; border-radius: .5rem; padding: .6rem .85rem; margin-bottom: 1rem; }
.stale { opacity: .55; filter: grayscale(.35); transition: opacity .2s; }

/* ---- cards, sorting, links ---- */
.card-toggle { cursor: pointer; user-select: none; }
.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable:hover { color: #1b6ec2; }
.sort-arrow { font-size: .65rem; color: #1b6ec2; }
.acct-link { color: inherit; text-decoration: none; border-bottom: 1px dashed #8aa; }
.acct-link:hover { color: #1b6ec2; border-bottom-color: #1b6ec2; }

/* ---- net lot bar ---- */
.lotbar { display: flex; height: 4px; width: 100%; min-width: 4.5rem; margin-top: 3px; border-radius: 2px; overflow: hidden; background: #e9ecef; }
.lb-buy { background: #2f9e5c; }
.lb-sell { background: #d6455a; }

/* ---- presets ---- */
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed #dee2e6; }
.preset { display: inline-flex; border: 1px solid #ced4da; border-radius: .35rem; overflow: hidden; background: #fff; font-size: .82rem; }
.preset-load, .preset-x { border: 0; background: none; padding: .15rem .55rem; }
.preset-load:hover { background: #eef5ff; }
.preset-x { border-left: 1px solid #e3e6ea; color: #8a1c26; }
.preset-x:hover { background: #fde8ea; }
.preset-save { display: inline-flex; gap: .35rem; margin-left: auto; }
.preset-save input { width: 9rem; }

/* ---- account drawer ---- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(46rem, 100vw); background: #fff; z-index: 100; overflow-y: auto; padding: 1.1rem 1.25rem 2rem; box-shadow: -8px 0 28px rgba(0,0,0,.2); }
.drawer-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.drawer-stats div { background: #f6f8fa; border: 1px solid #e9ecef; border-radius: .4rem; padding: .4rem .6rem; display: flex; flex-direction: column; }
.drawer-stats span { font-size: .7rem; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }
.drawer-stats strong { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .drawer-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- dark theme (Bootstrap 5.3 data-bs-theme switches its own components; this covers ours) ---- */
[data-bs-theme="dark"] body { background: #0f141a; color: #dee2e6; }
[data-bs-theme="dark"] .panel,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .alert-settings,
[data-bs-theme="dark"] .group-dropdown,
[data-bs-theme="dark"] .preset,
[data-bs-theme="dark"] .drawer { background: #171e27; border-color: #2a3441; color: #dee2e6; }
[data-bs-theme="dark"] .panel-plain { background: transparent; }
[data-bs-theme="dark"] .panel-cell,
[data-bs-theme="dark"] .drill,
[data-bs-theme="dark"] .drawer-stats div { background: #1c2430; border-color: #2a3441; }
[data-bs-theme="dark"] .group-add-all { background: #1f2b3a; }
[data-bs-theme="dark"] .group-item { color: #dee2e6; border-bottom-color: #232d3a; }
[data-bs-theme="dark"] .group-item:hover,
[data-bs-theme="dark"] .preset-load:hover,
[data-bs-theme="dark"] .row-click:hover td { background: #22304a !important; }
[data-bs-theme="dark"] .chip { background: #1f3350; color: #bcd4ff; }
[data-bs-theme="dark"] .chip-x { color: #bcd4ff; }
[data-bs-theme="dark"] .preset-load, [data-bs-theme="dark"] .preset-x { color: #dee2e6; }
[data-bs-theme="dark"] .stat-label, [data-bs-theme="dark"] .stat-sub, [data-bs-theme="dark"] .pnl-labels, [data-bs-theme="dark"] .drawer-stats span { color: #8f9bab; }
[data-bs-theme="dark"] .net-long { color: #4cd48a; }
[data-bs-theme="dark"] .net-short { color: #ff7d8b; }
[data-bs-theme="dark"] .level-critical { background: #5a1f27; color: #ffc2c9; }
[data-bs-theme="dark"] .level-warning { background: #5a4412; color: #ffe08a; }
[data-bs-theme="dark"] .level-ok { background: #17412a; color: #9be3b9; }
[data-bs-theme="dark"] .tick-up { background: #17412a; color: #9be3b9; }
[data-bs-theme="dark"] .tick-down { background: #5a1f27; color: #ffc2c9; }
[data-bs-theme="dark"] .stale-banner { background: #3d3414; border-color: #6b5a1c; color: #ffe08a; }
[data-bs-theme="dark"] .pnl-chart { background: #121921; border-color: #2a3441; }
[data-bs-theme="dark"] .lotbar { background: #2a3441; }
[data-bs-theme="dark"] .badge-fast { background: #5a3513; color: #ffd0a1; }
[data-bs-theme="dark"] .sortable:hover, [data-bs-theme="dark"] .sort-arrow, [data-bs-theme="dark"] .acct-link:hover { color: #6ea8ff; }
[data-bs-theme="dark"] .login-card { background: #171e27; }
[data-bs-theme="dark"] .login-body { background: #0f141a; }
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(255,255,255,.03); }

/* controls pinned to the right of the sticky strip */

/* top bar and status strip line up as one block: same inner edges */

/* alert thresholds live in a popover on the strip */
.alert-pop-wrap { position: relative; }
.alert-pop { position: absolute; right: 0; top: calc(100% + .5rem); width: 22rem; max-width: 92vw; z-index: 60; background: #fff; color: #212529; border: 1px solid #ced4da; border-radius: .5rem; box-shadow: 0 10px 28px rgba(0,0,0,.25); padding: .85rem; }
[data-bs-theme="dark"] .alert-pop { background: #171e27; color: #dee2e6; border-color: #2a3441; }

/* card titles: bold, dark navy (light text in dark theme), blue chevron */
.panel h2, .panel-cell h2 { font-weight: 700; color: #14213d; letter-spacing: .01em; }
.card-toggle { font-size: 1.05rem !important; }
.card-toggle .row-chevron { color: #1b6ec2; }
.panel h3 { font-weight: 600; }
[data-bs-theme="dark"] .panel h2, [data-bs-theme="dark"] .panel-cell h2 { color: #f1f5f9; }
[data-bs-theme="dark"] .card-toggle .row-chevron { color: #6ea8ff; }

/* =====================================================================
   Unified palette. One navy ink, one blue accent, one green/red pair, cool-grey surfaces.
   Everything below reads these variables, so the whole UI (and both themes) moves together.
   Selectors are prefixed with :root so they win over the earlier per-theme rules.
   ===================================================================== */
:root {
    --ink: #0f2b38;            /* sidebar, header: the design's dark green */
    --heading: #233943;        /* titles, key figures (design text colour) */
    --text: #233943;
    --muted: #6e7f88;
    --page: #f5f8fd;          /* page background */
    --card: #ffffff;
    --sunken: #f3f6fb;        /* inner cells, drill-down, stat tiles */
    --line: #e3e9f0;
    --line-strong: #c9d3de;
    --stripe: rgba(15, 43, 56, .035);

    --accent: #00cf99;         /* Pairmetric green */
    --accent-hover: #00b98a;
    --accent-soft: #e3f8f2;
    --accent-text: #0a6b52;
    --on-accent: #0f2b38;      /* text on a green surface */
    --link: #0146b0;

    --pos: #0a9a73;  --pos-soft: #ddf6ee;  --pos-text: #017759;  --pos-on-ink: #2fe0b0;
    --neg: #d63f42;  --neg-soft: #fde6e6;  --neg-text: #9b2326;  --neg-on-ink: #ff8f91;
    --warn-soft: #fbf1da; --warn-text: #7a5200; --warn-line: #ebd59a;
}

:root[data-bs-theme="dark"] {
    --ink: #071a22;
    --heading: #eaf3f6;
    --text: #d5e2e8;
    --muted: #8ca3ad;
    --page: #0a202a;
    --card: #0f2b38;
    --sunken: #0c2430;
    --line: #1c4152;
    --line-strong: #2a5568;
    --stripe: rgba(255, 255, 255, .03);

    --accent: #00cf99;
    --accent-hover: #2be0b1;
    --accent-soft: #0f3d40;
    --accent-text: #8ff0d6;
    --on-accent: #0f2b38;
    --link: #6fa3ff;

    --pos: #2bd3a0;  --pos-soft: #0d3f36;  --pos-text: #9bf0d8;
    --neg: #ff6b6e;  --neg-soft: #47212a;  --neg-text: #ffc4c6;
    --warn-soft: #3d3414; --warn-text: #ffe08a; --warn-line: #6b5a1c;
    --bs-body-bg: var(--page);
    --bs-body-color: var(--text);
}

:root body { background: var(--page); color: var(--text); }
:root a, :root .btn-link { color: var(--link); }
:root .text-muted { color: var(--muted) !important; }

/* top bar + status strip: one navy block */
:root .strip-item .net-long { color: var(--pos-on-ink); }
:root .strip-item .net-short { color: var(--neg-on-ink); }
:root .status-live .status-dot { background: var(--pos-on-ink); }
:root .status-bad .status-dot { background: var(--neg-on-ink); }

/* buttons and inputs */
:root .btn-primary {
    --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-hover-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
}
:root .btn-outline-secondary {
    --bs-btn-color: var(--heading); --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-color: var(--accent-text); --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-color: var(--accent-text); --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-border-color: var(--line);
}
:root .form-control:focus, :root .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 22%, transparent); }
:root .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
:root .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 22%, transparent); }

/* surfaces */
:root .panel, :root .stat-card, :root .alert-settings, :root .group-dropdown, :root .preset,
:root .drawer, :root .alert-pop, :root .login-card { background: var(--card); border-color: var(--line); color: var(--text); }
:root .panel-plain { background: transparent; border: 0; }
:root .panel-cell, :root .drill, :root .drawer-stats div { background: var(--sunken); border-color: var(--line); }
:root .login-body { background: var(--page); }
:root .presets { border-top-color: var(--line); }
:root .pnl-chart { background: var(--sunken); border-color: var(--line); }
:root .lotbar { background: var(--line); }

/* headings and figures */
:root .panel h2, :root .panel-cell h2, :root .stat-value, :root .netsummary-table tfoot th, :root .drawer .h5 { color: var(--heading); }
:root .stat-label, :root .stat-sub, :root .pnl-labels, :root .drawer-stats span { color: var(--muted); }

/* tables */
:root .netsummary-table thead th { color: var(--heading); font-weight: 600; border-bottom: 2px solid var(--line-strong); }
:root .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: var(--stripe); }
:root .row-click:hover td, :root .group-item:hover, :root .preset-load:hover { background: var(--accent-soft) !important; }
:root .sortable:hover, :root .sort-arrow, :root .acct-link:hover, :root .row-chevron, :root .group-item .add { color: var(--accent); }
:root .acct-link { border-bottom-color: var(--line-strong); }
:root .acct-link:hover { border-bottom-color: var(--accent); }

/* chips, presets, dropdown */
:root .chip { background: var(--accent-soft); color: var(--accent-text); }
:root .chip-x { color: var(--accent-text); }
:root .group-add-all { background: var(--accent-soft); }
:root .group-item { color: var(--text); border-bottom-color: var(--line); }
:root .group-dropdown { border-color: var(--line-strong); }
:root .preset-load, :root .preset-x { color: var(--text); }
:root .preset-x { color: var(--neg-text); border-left-color: var(--line); }
:root .preset-x:hover { background: var(--neg-soft); }

/* meaning colours: gain / loss everywhere the same pair */
:root .net-long { color: var(--pos); }
:root .net-short { color: var(--neg); }
:root .tick-up, :root .level-ok { background: var(--pos-soft); color: var(--pos-text); }
:root .tick-down, :root .level-critical { background: var(--neg-soft); color: var(--neg-text); }
:root .level-warning, :root .badge-fast { background: var(--warn-soft); color: var(--warn-text); }
:root .lb-buy, :root .pnl-up { background: var(--pos); fill: var(--pos); }
:root .lb-sell, :root .pnl-down { background: var(--neg); fill: var(--neg); }
:root .stale-banner { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
:root .sort-arrow { color: var(--accent); }

/* the original template rule set .btn-primary colours directly, bypassing Bootstrap's variables */
:root .btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root .btn-primary:hover, :root .btn-primary:active, :root .btn-primary:focus-visible { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
:root .btn-primary:disabled { background-color: var(--accent); border-color: var(--accent); opacity: .55; }
:root .btn:focus, :root .btn:active:focus, :root .form-control:focus, :root .form-check-input:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 28%, transparent); }

/* Bootstrap's own success/danger text follows the palette too */
:root .text-success { color: var(--pos-text) !important; }
:root .text-danger { color: var(--neg-text) !important; }
:root .alert-danger { --bs-alert-bg: var(--neg-soft); --bs-alert-color: var(--neg-text); --bs-alert-border-color: color-mix(in srgb, var(--neg) 40%, transparent); }
:root .alert-warning { --bs-alert-bg: var(--warn-soft); --bs-alert-color: var(--warn-text); --bs-alert-border-color: var(--warn-line); }
:root .alert-secondary { --bs-alert-bg: var(--sunken); --bs-alert-color: var(--muted); --bs-alert-border-color: var(--line); }

/* risk limits drawer + stress card */
.monitor-status { background: var(--sunken); border: 1px solid var(--line); border-radius: .4rem; padding: .5rem .7rem; }
.drawer pre { white-space: pre-wrap; word-break: break-all; font-size: .78rem; }
.sym-chip { border: 1px solid var(--line-strong); background: transparent; color: var(--muted); border-radius: 1rem; padding: .05rem .65rem; font-size: .8rem; margin: 0 .25rem .25rem 0; text-decoration: line-through; }
.sym-chip.on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); text-decoration: none; font-weight: 600; }

/* =====================================================================
   App shell: dark left menu (brand, pages, theme + logout) + page area
   ===================================================================== */
:root { --page-gutter: 1.75rem; --nav-width: 16.5rem; }

.shell { display: flex; align-items: flex-start; min-height: 100vh; }
.shell > .content { flex: 1 1 auto; min-width: 0; padding: 2.2rem var(--page-gutter) 2rem; }

.sidenav { position: sticky; top: 0; flex: 0 0 var(--nav-width); width: var(--nav-width); height: 100vh; padding: 1rem .75rem; background: var(--ink); color: #cfd8e6; display: flex; flex-direction: column; overflow-y: auto; }
.sidenav-brand { display: flex; align-items: center; gap: .65rem; padding: .35rem .6rem 1.1rem; color: #fff; }
.sidenav-items { display: flex; flex-direction: column; gap: .22rem; }
.sidenav-footer { margin-top: auto; padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: .15rem; }

.sidenav-link { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .72rem .7rem; border: 0; border-radius: .5rem; background: transparent; color: #cfd8e6 !important; text-decoration: none; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.sidenav-link:hover { background: rgba(255, 255, 255, .09); color: #fff !important; }
.sidenav-link.active { background: rgba(255, 255, 255, .16); color: #fff !important; font-weight: 700; }
.sidenav-icon { display: inline-grid; place-items: center; width: 1.3rem; opacity: .9; }
.sidenav-text { flex: 1 1 auto; }
.nav-badge { background: var(--neg); color: #fff; border-radius: 1rem; min-width: 1.35rem; padding: 0 .4rem; font-size: .72rem; font-weight: 700; line-height: 1.35rem; text-align: center; }
.sidenav-footer form { margin: 0; }

/* language switch (page header): a small pill with one segment per enabled language, the current one filled */
.lang-switch { display: inline-flex; margin: 0; height: var(--hdr-ctl, 2rem); box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .25); border-radius: 1rem; overflow: hidden; background: rgba(255, 255, 255, .08); }
.acct-search { display: inline-flex; align-items: center; gap: .4rem; margin: 0; height: var(--hdr-ctl, 2rem); box-sizing: border-box; padding: 0 .7rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 1rem; background: rgba(255, 255, 255, .08); color: #cfd8e6; }
.acct-search:focus-within { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .15); }
.acct-search input { width: 6.5rem; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: .8rem; }
.acct-search input::placeholder { color: #b6c2d4; }
.fa-magnifying-glass { --fa: "\f002"; }
.lang-btn { padding: 0 .7rem; border: 0; background: transparent; color: #cfd8e6; font: inherit; font-size: .78rem; font-weight: 700; line-height: 1; cursor: pointer; }
.lang-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.lang-btn.active { background: rgba(255, 255, 255, .22); color: #fff; cursor: default; }

/* theme button: moon + "Koyu tema" in light mode, sun + "Açık tema" in dark mode */
.theme-toggle .icon-sun, .theme-toggle .label-to-light { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-sun, [data-bs-theme="dark"] .theme-toggle .label-to-light { display: inline; }
[data-bs-theme="dark"] .theme-toggle .icon-moon, [data-bs-theme="dark"] .theme-toggle .label-to-dark { display: none; }



/* snooze control inside alert lines */
.snooze-btn { margin-left: .5rem; padding: 0 .5rem; font-size: .72rem; line-height: 1.3rem; border: 1px solid currentColor; border-radius: 1rem; background: transparent; color: inherit; opacity: .8; cursor: pointer; white-space: nowrap; }
.snooze-btn:hover { opacity: 1; }

/* =====================================================================
   Page header: title + live status + date/time on top, key figures + refresh controls below
   ===================================================================== */
.app-header { position: sticky; top: 0; z-index: 40; margin: -2.2rem 0 1rem; padding: .8rem 1.1rem .7rem; background: var(--ink); color: #fff; border-radius: 0 0 .75rem .75rem; box-shadow: 0 3px 12px rgba(0, 0, 0, .2); }
.app-header-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .4rem 1.5rem; }
.app-header-title { flex: 1 1 14rem; min-width: 0; }
.app-header-title h1 { margin: 0; font-size: 1.3rem; font-weight: 700; color: #fff; line-height: 1.2; }
.app-header-title p { margin: .1rem 0 0; font-size: .8rem; color: #aab4c3; max-width: 46rem; }
.app-header-status { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; align-self: center; --hdr-ctl: 2rem; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem .9rem; }
.hdr-meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: #cfd8e6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdr-time { font-weight: 600; color: #fff; }
.app-header-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .95rem; margin-top: .65rem; padding-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .12); }

.status-pill { background: rgba(255, 255, 255, .12); }
.status-idle .status-dot { background: #8c97a8; }
.status-closed .status-dot { background: #7fa6d6; }
.status-live .status-dot { background: var(--pos-on-ink, #5fe0a0); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(95, 224, 160, .55); } 70% { box-shadow: 0 0 0 .5rem rgba(95, 224, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 224, 160, 0); } }

.app-header .form-check-label { color: #e6ebf2; font-size: .85rem; }
.app-header .form-select { background-color: #263140; border-color: #3a475a; color: #e6ebf2; }
@keyframes spin-icon { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .app-header { margin-top: 0; border-radius: .75rem; position: static; }
    .app-header-title p { display: none; }
}

/* measured-markup note under the P/L tiles */
.markup-note { background: var(--sunken); border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .85rem; display: flex; flex-direction: column; gap: .15rem; }

/* group conditions page */
.scroll-box { max-height: 24rem; overflow: auto; border: 1px solid var(--line); border-radius: .4rem; }
.scroll-box thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.matrix-diff td { background: var(--accent-soft); }
.sym-path { white-space: nowrap; }

/* header: group drawer button */

.section-title { font-weight: 700; color: var(--heading); letter-spacing: .01em; }
.mt-n2 { margin-top: -.5rem; }

/* product icons (currency flags, metals, crypto) next to symbol names */
.sym-icon { display: inline-flex; align-items: center; vertical-align: middle; margin-right: .45rem; }
.sym-icon img { width: 1.15rem; height: 1.15rem; border-radius: 50%; object-fit: cover; background: var(--sunken); }
.sym-icon-pair img + img { margin-left: -.4rem; box-shadow: 0 0 0 1px var(--card); }

/* company logo */
.login-logo { display: block; height: 2.4rem; max-width: 100%; margin: 0 auto 1rem; }

/* =====================================================================
   Pairmetric design system (from the PairMetric-DIST site): DM Sans, Font Awesome,
   7px buttons with the green primary, 10px cards. Fonts and icons are served locally.
   ===================================================================== */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(fonts/dmsans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(fonts/dmsans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Font Awesome 7 Free'; font-style: normal; font-weight: 900; font-display: block; src: url(fonts/fa-solid-900.woff2) format('woff2'); }

:root { --bs-body-font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html, body { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { font-size: .95rem; }
.netsummary-table, .stat-value, .strip-item strong, .num { font-variant-numeric: tabular-nums; }

/* the glyphs this app uses (Font Awesome 7 Free, solid) */
.fa { font-family: 'Font Awesome 7 Free'; font-weight: 900; font-style: normal; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; }
.fa::before { content: var(--fa); }
.fa-gauge-high { --fa: "\f625"; }
.fa-scale-balanced { --fa: "\f24e"; }
.fa-money-bill-trend-up { --fa: "\e529"; }
.fa-users { --fa: "\f0c0"; }
.fa-ranking-star { --fa: "\e561"; }
.fa-layer-group { --fa: "\f5fd"; }
.fa-gear { --fa: "\f013"; }
.fa-moon { --fa: "\f186"; }
.fa-sun { --fa: "\f185"; }
.fa-right-from-bracket { --fa: "\f2f5"; }
.fa-arrows-rotate { --fa: "\f021"; }
.fa-calendar-days { --fa: "\f073"; }
.fa-clock { --fa: "\f017"; }
.fa-triangle-exclamation { --fa: "\f071"; }
.fa-chevron-right { --fa: "\f054"; }
.fa-chevron-down { --fa: "\f078"; }
.fa-file-arrow-down { --fa: "\f56d"; }
.fa-circle-info { --fa: "\f05a"; }
.fa-wallet { --fa: "\f555"; }
.fa-bolt { --fa: "\f0e7"; }
.fa-circle-check { --fa: "\f058"; }
.fa-bell { --fa: "\f0f3"; }
.fa-briefcase { --fa: "\f0b1"; }
.fa-building-columns { --fa: "\f19c"; }
.fa-file-lines { --fa: "\f15c"; }
.fa-user-gear { --fa: "\f4fe"; }
.fa-clipboard-list { --fa: "\f46d"; }
.fa-user { --fa: "\f007"; }
.fa-chevron-down { --fa: "\f078"; }
.fa-circle-question { --fa: "\f059"; }
.fa-volume-high { --fa: "\f028"; }
.fa-volume-xmark { --fa: "\f6a9"; }
.fa-list-check { --fa: "\f0ae"; }

/* cards and tiles: the design's 10px radius */
:root .panel, :root .stat-card, :root .drawer, :root .login-card, :root .group-dropdown { border-radius: 10px; }
:root .panel-cell, :root .drill, :root .markup-note { border-radius: 8px; }
:root .form-control, :root .form-select { border-radius: 7px; }

/* buttons: bold, 7px radius; primary = Pairmetric green with dark text; outline buttons turn green on hover */
:root .btn { font-weight: 700; border-radius: 7px; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
:root .btn-sm { font-size: .82rem; }
:root .btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root .btn-primary:hover, :root .btn-primary:active, :root .btn-primary:focus-visible { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
:root .btn-outline-secondary { --bs-btn-color: var(--heading); --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--accent); --bs-btn-hover-color: var(--on-accent); --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent); --bs-btn-active-color: var(--on-accent); --bs-btn-active-border-color: var(--accent); }
:root .btn-outline-primary { --bs-btn-color: var(--accent-text); --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent); --bs-btn-hover-color: var(--on-accent); --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: var(--accent); --bs-btn-active-color: var(--on-accent); --bs-btn-active-border-color: var(--accent); }
:root .btn-outline-danger { --bs-btn-color: var(--neg); --bs-btn-border-color: var(--neg);
    --bs-btn-hover-bg: var(--neg); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--neg);
    --bs-btn-active-bg: var(--neg); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--neg); }
:root .btn-link.text-danger { font-weight: 600; }
:root .badge.text-bg-primary { background-color: var(--accent) !important; color: var(--on-accent) !important; }

/* sidebar: icons, green active marker */
.sidenav-icon .fa { font-size: .95rem; }
.sidenav-link.active { box-shadow: inset 3px 0 0 var(--accent); }
.sidenav-brand { padding-bottom: 1.2rem; }
.brand-logo-full { display: block; width: 100%; max-width: 11rem; height: auto; margin: .25rem .4rem .2rem; }
.hdr-meta .fa { font-size: .8rem; opacity: .85; }
/* theme button toggles .fa icons the same way it did the old SVGs */
.theme-toggle .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* menu sections */

/* residual-risk history charts */
.rh-panel { margin-bottom: .9rem; }
.rh-title { font-size: .8rem; font-weight: 700; color: var(--heading); margin-bottom: .2rem; }
.rh-svg { width: 100%; display: block; background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; }
.rh-zero { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.rh-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rh-price { stroke: var(--heading); stroke-width: 1.5; }
.rh-long { fill: var(--accent); }
.rh-short { fill: #f59e0b; }
.rh-hit { fill: transparent; }
.rh-hit:hover { fill: rgba(127, 127, 127, .15); }
.rh-axis { font-size: 10px; fill: var(--muted); }

/* overview P/L cards: my result first, then who it came from */
.pnl-card { border-left: 4px solid var(--line-strong); }
.pnl-card-up { border-left-color: var(--pos); }
.pnl-card-down { border-left-color: var(--neg); }
.pnl-main { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.pnl-main .stat-value { font-size: 1.7rem; }
.pnl-verdict { font-size: .72rem; font-weight: 800; letter-spacing: .08em; padding: .1rem .55rem; border-radius: 1rem; background: var(--sunken); }
.pnl-verdict.net-long { background: var(--pos-soft); color: var(--pos-text); }
.pnl-verdict.net-short { background: var(--neg-soft); color: var(--neg-text); }
.pnl-split { margin-top: .55rem; padding-top: .45rem; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: .2rem; }
.pnl-row { display: flex; justify-content: space-between; font-size: .84rem; color: var(--muted); }
.pnl-row strong { font-variant-numeric: tabular-nums; }
/* what is already inside the net above (commission, swap): a second, quieter block */
.pnl-memo { margin-top: .35rem; padding-top: .35rem; }
.pnl-memo .pnl-row { font-size: .78rem; }

/* =====================================================================
   Whose numbers? Green/red is ALWAYS my own (the broker's) gain/loss.
   A client's own result is blue (the client gains - against me) / amber (the client loses - for me).
   Every card carries a BENİM / MÜŞTERİ / LP tag, explained by the legend in the header.
   ===================================================================== */
:root { --cl-up: #2563eb; --cl-down: #d97706; }
:root[data-bs-theme="dark"] { --cl-up: #7cadff; --cl-down: #fbbf24; }
.cl-up { color: var(--cl-up); font-weight: 600; }
.cl-down { color: var(--cl-down); font-weight: 600; }
.pnl-cup { fill: var(--cl-up); }
.pnl-cdown { fill: var(--cl-down); }

.persp { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .08em; padding: .08rem .55rem; border-radius: 1rem; margin-left: .55rem; vertical-align: middle; line-height: 1.5; }
.persp-me { background: var(--pos-soft); color: var(--pos-text); }
.persp-client { background: #dbeafe; color: #1d4ed8; }
.persp-lp { background: var(--accent-soft); color: var(--accent-text); }
:root[data-bs-theme="dark"] .persp-client { background: #1b3358; color: #9cc0ff; }

.persp-legend-bar .persp { margin-left: 0; margin-right: .35rem; }
.persp-legend-bar b { font-weight: 700; }
.persp-legend-bar .net-long { color: var(--pos-on-ink); }
.persp-legend-bar .net-short { color: var(--neg-on-ink); }
.persp-legend-bar .cl-up { color: #8fb8ff; }
.persp-legend-bar .cl-down { color: #ffc15a; }
.persp-legend-bar .persp-me { background: rgba(47, 224, 176, .18); color: #2fe0b0; }
.persp-legend-bar .persp-client { background: rgba(124, 173, 255, .2); color: #8fb8ff; }
.persp-legend-bar .persp-lp { background: rgba(255, 255, 255, .14); color: #cfd8e6; }
.strip-item .cl-up { color: #8fb8ff; }
.strip-item .cl-down { color: #ffc15a; }

/* residual (alış/satış) is a direction, not a gain or loss, so it uses neither green/red nor the client colours */
.rh-long { fill: #6366f1; }
.rh-short { fill: #0ea5e9; }

/* =====================================================================
   One card style everywhere: same radius, border, padding and a soft green-tinted shadow.
   Tiles that sit inside a card are flat "wells" so shadows never stack.
   ===================================================================== */
:root {
    --card-radius: 12px;
    --card-shadow: 0 1px 2px rgba(15, 43, 56, .05), 0 8px 20px -8px rgba(0, 207, 153, .28);
}
:root[data-bs-theme="dark"] {
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px -10px rgba(0, 207, 153, .28);
}

:root .panel, :root .stat-card, :root .login-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}
:root .panel { padding: 1rem 1.15rem; }
:root .stat-card { padding: .85rem 1rem; }

/* the profit/loss cards look like every other card: the KÂR / ZARAR pill and the colour of the number carry the meaning */
:root .pnl-card, :root .pnl-card-up, :root .pnl-card-down { border-left: 1px solid var(--line); }

/* anything nested inside a card is a flat well */
:root .panel .stat-card { background: var(--sunken); box-shadow: none; }
:root .panel-cell, :root .drill, :root .markup-note, :root .monitor-status { background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
:root .rh-svg, :root .scroll-box, :root .pnl-chart { border-radius: 10px; }

/* banners share the radius but keep their status colours */
:root .stale-banner, :root .alert { border-radius: var(--card-radius); }

/* shadow: wider and softer, and the same on every card - including tiles nested in a card */
:root { --card-shadow: 0 2px 4px rgba(15, 43, 56, .05), 0 16px 40px -8px rgba(0, 207, 153, .30); }
:root[data-bs-theme="dark"] { --card-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px -10px rgba(0, 207, 153, .30); }

:root .panel .stat-card,
:root .panel-cell,
:root .markup-note,
:root .monitor-status {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

/* shadow: even on all four sides (no offset, no negative spread) */
:root { --card-shadow: 0 0 22px 2px rgba(0, 207, 153, .20); }
:root[data-bs-theme="dark"] { --card-shadow: 0 0 22px 2px rgba(0, 207, 153, .22); }

/* the glow belongs to the small boxes (tiles, notes, picker cells); the big content cards keep just their border */
:root .panel { box-shadow: none; }

/* small boxes: no glow (it overlapped between neighbours). A thin green top line and a faint green tint carry the brand instead,
   and rows of tiles get twice the gap so each box stands on its own */
:root { --tile-tint: color-mix(in srgb, var(--accent) 5%, var(--card)); }
:root .stat-card, :root .panel .stat-card, :root .markup-note, :root .panel-cell, :root .monitor-status {
    background: linear-gradient(180deg, var(--tile-tint), var(--card) 70%);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 10px;
    box-shadow: none;
}
:root .row:has(> [class*="col"] > .stat-card) { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
:root .markup-note { margin-top: .25rem; }


/* The one-line alert summary on the working pages: the whole banner is a link to the Alerts page. */

/* The alert bell in the header's top row, beside the groups button: a red count badge when limits are exceeded. */
.notif-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #cfd8e6; text-decoration: none; font-size: .85rem; }
.notif-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
button.notif-btn { padding: 0; cursor: pointer; font: inherit; }
.sound-btn.is-off { opacity: .6; }
.notif-btn.has-alerts { color: #fff; border-color: color-mix(in srgb, var(--neg) 70%, transparent); }
.notif-badge { position: absolute; top: -.3rem; right: -.35rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 1rem; background: var(--neg); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.15rem; text-align: center; box-shadow: 0 0 0 2px #0f2b38; }


/* The colour key opens from a small "?" in the header's top row instead of taking three rows under it. */

/* Page loading: a thin bar across the very top while a page gets its data, and a spinner line wherever a block is waiting. */
.top-progress { animation: top-progress-fade .15s .2s both; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; overflow: hidden; background: rgba(0, 207, 153, .15); }
.top-progress-bar { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent, #00cf99); border-radius: 0 2px 2px 0; animation: top-progress-slide 1.1s ease-in-out infinite; }
@keyframes top-progress-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes top-progress-slide { 0% { left: -35%; } 100% { left: 100%; } }
.page-loading { display: flex; align-items: center; gap: .6rem; color: var(--bs-secondary-color, #8ca3ad); font-size: .85rem; padding: .35rem 0; }
.page-loading .spinner-border { color: var(--accent, #00cf99); }
.page-loading-large { justify-content: center; padding: 2.5rem 0; font-size: .95rem; }
.page-loading-large .spinner-border { width: 1.4rem; height: 1.4rem; }
@media (prefers-reduced-motion: reduce) { .top-progress-bar { animation-duration: 2.4s; } }

/* How many groups are included, beside "Grup Seçimi" in the menu - a plain count, not an alarm. */
.nav-count { background: color-mix(in srgb, var(--accent, #00cf99) 28%, transparent); color: var(--accent, #00cf99); border-radius: 1rem; min-width: 1.35rem; padding: 0 .4rem; font-size: .72rem; font-weight: 700; line-height: 1.35rem; text-align: center; }

/* The three round controls in the header's top row ("?", the alert bell, the live status) share one height, border and text size. */
.app-header-status .notif-btn { width: var(--hdr-ctl); height: var(--hdr-ctl); box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); font-size: .85rem; line-height: 1; }
.app-header-status .status-pill { height: var(--hdr-ctl); box-sizing: border-box; padding: 0 .9rem; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); font-size: .85rem; line-height: 1; }

/* live feed: pop-ups top right + the page's rows */
.live-toasts { position: fixed; top: .75rem; right: .75rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; width: min(21rem, calc(100vw - 1.5rem)); pointer-events: none; }
.live-toast { pointer-events: auto; position: relative; padding-right: 2rem !important; color: inherit; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-left: 4px solid #6c757d; border-radius: 10px; padding: .55rem .75rem; box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .18); animation: live-toast-in .25s ease-out; }
.live-toast-body, .live-toast-body:hover { display: block; color: inherit; text-decoration: none; }
.live-toast-x { position: absolute; top: .2rem; right: .45rem; border: 0; background: none; padding: 0 .2rem; font-size: 1.2rem; line-height: 1.2; color: var(--bs-secondary-color, #6c757d); cursor: pointer; }
.live-toast-x:hover { color: var(--bs-body-color, #000); }
.live-toast-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.live-toast-time { color: var(--bs-secondary-color, #6c757d); font-variant-numeric: tabular-nums; }
.live-toast-result { font-weight: 600; font-variant-numeric: tabular-nums; }
.live-toast-open { border-left-color: #0d6efd; }
.live-toast-gain { border-left-color: #1f6feb; }
.live-toast-loss { border-left-color: #e0a100; }
.live-toast-money { border-left-color: #198754; }
.live-side { display: inline-block; padding: 0 .35rem; border-radius: .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.live-side-buy { background: rgba(25, 135, 84, .15); color: #198754; }
.live-side-sell { background: rgba(220, 53, 69, .15); color: #dc3545; }
.live-search { width: 11rem; }
@keyframes live-toast-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-toast { animation: none; } }
.live-alert-badge { display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: .25rem; font-size: .72rem; font-weight: 600; background: rgba(224, 161, 0, .18); color: #9a6b00; white-space: nowrap; }
[data-bs-theme="dark"] .live-alert-badge { color: #ffd166; }

/* header risk figures: clickable, colour by how close to the limit, and a thin usage bar */
a.strip-link, a.strip-link:hover { text-decoration: none; color: inherit; }
a.strip-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.kpi-warning strong { color: #ffd166 !important; }
.kpi-critical strong { color: #ff8b98 !important; }
.kpi-bar { display: block; width: 100%; min-width: 5.5rem; height: 3px; margin-top: 3px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.kpi-bar > span { display: block; height: 100%; background: #6fdc9a; }
.kpi-warning .kpi-bar > span { background: #ffd166; }
.kpi-critical .kpi-bar > span { background: #ff8b98; }

/* card explanations: closed by default, one quiet line instead of a paragraph on every card */
.card-help { margin: 0 0 .75rem; }
.card-help > summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; color: var(--bs-secondary-color, #6c757d); font-size: .78rem; user-select: none; }
.card-help > summary::-webkit-details-marker { display: none; }
.card-help > summary::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border: 1px solid currentColor; border-radius: 50%; font-size: .68rem; font-weight: 700; line-height: 1; }
.card-help > summary:hover { color: var(--bs-body-color, #212529); }
.card-help[open] > summary { color: var(--bs-body-color, #212529); }
.card-help-body { margin-top: .4rem; padding: .55rem .75rem; border-left: 3px solid var(--bs-border-color, #dee2e6); font-size: .82rem; color: var(--bs-secondary-color, #6c757d); line-height: 1.45; }


/* menu: a plain note beside an item (a count that is not an alert) */
.nav-meta { font-size: .7rem; color: rgba(255, 255, 255, .55); white-space: nowrap; }

/* a thin label row above column headers, naming a group of columns (e.g. "Hedge tarafı") */
.table-group-head th { padding-top: 0; padding-bottom: .1rem; font-size: .72rem; font-weight: 600; color: var(--bs-secondary-color); border-bottom: 0; }
.table-group-head th[colspan]:not(:empty) { border-bottom: 1px solid var(--bs-border-color); }

/* profit-sources chart: one colour per source, stacked per period; the white-ish tick is the period's net */

/* the figure that all the others add up to gets an accent edge; a small flag line inside a stat card marks something to look at */

/* Yardım page: contents list on the left, the guide on the right */
.help-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.help-toc { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .15rem; padding: .75rem; }
.help-toc a { padding: .3rem .5rem; border-radius: .4rem; text-decoration: none; font-size: .88rem; }
.help-toc a:hover { background: var(--sunken, rgba(0, 0, 0, .05)); }
.help-toc-title { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6c757d); padding: 0 .5rem .35rem; }
.help-doc { max-width: 60rem; line-height: 1.6; }
.help-doc h1 { font-size: 1.5rem; margin-bottom: .75rem; }
.help-doc h2 { font-size: 1.15rem; margin-top: 2rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color, #dee2e6); scroll-margin-top: 1rem; }
.help-doc h3 { font-size: 1rem; margin-top: 1.25rem; }
.help-doc code { background: var(--sunken, rgba(0, 0, 0, .06)); padding: .05rem .3rem; border-radius: .25rem; }
.help-doc ul, .help-doc ol { padding-left: 1.4rem; }
.help-doc li { margin-bottom: .25rem; }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; flex-direction: row; flex-wrap: wrap; } }

/* side menu: collapsible sections, tighter links, one compact row of tools at the bottom */
.sidenav-tools { display: flex; gap: .3rem; margin-top: .3rem; }
.sidenav-tool-form { flex: 1 1 0; margin: 0; }
.sidenav-tool { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; width: 100%; padding: .45rem .25rem; border: 0; border-radius: .45rem; background: rgba(255, 255, 255, .06); color: #cfd8e6 !important; font: inherit; font-size: .68rem; text-decoration: none; cursor: pointer; }
.sidenav-tool:hover { background: rgba(255, 255, 255, .14); color: #fff !important; }
.sidenav-tool.active { background: rgba(255, 255, 255, .2); color: #fff !important; }
.sidenav-tool .fa { font-size: .95rem; }
.sidenav-tool.theme-toggle .icon-sun, .sidenav-tool.theme-toggle .label-to-light { display: none; }
[data-bs-theme="dark"] .sidenav-tool.theme-toggle .icon-sun, [data-bs-theme="dark"] .sidenav-tool.theme-toggle .label-to-light { display: inline; }
[data-bs-theme="dark"] .sidenav-tool.theme-toggle .icon-moon, [data-bs-theme="dark"] .sidenav-tool.theme-toggle .label-to-dark { display: none; }

/* a collapsible section under the main table (details / summary) */
.fold > .fold-summary { cursor: pointer; font-weight: 600; padding: .55rem .25rem; list-style: none; }
.fold > .fold-summary::-webkit-details-marker { display: none; }
.fold > .fold-summary::before { content: "▸"; display: inline-block; width: 1.1rem; color: var(--muted, #6c757d); transition: transform .15s; }
.fold[open] > .fold-summary::before { transform: rotate(90deg); }

/* the reasons of a client in the trader table: green ticks side by side, wrapping between items, at most about two lines */
.reason-cell { min-width: 22rem; max-width: 38rem; }
.reason-chips { display: flex; flex-wrap: wrap; gap: .1rem .85rem; }
.reason-chip { white-space: nowrap; font-size: .82rem; color: var(--pos-text, #198754); }

/* Data tables: flat rows with a hairline between them, a quiet sticky header, a firm totals row. */
:root .netsummary-table { --bs-table-border-color: var(--line); }
:root .netsummary-table.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
:root .netsummary-table > tbody > tr:hover > * { --bs-table-bg-state: var(--sunken); }
:root .netsummary-table thead th {
    position: sticky; top: 0; z-index: 2; background: var(--card);
    color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
    box-shadow: inset 0 -2px 0 var(--line-strong);   /* a collapsed border would scroll away from a sticky cell */
}
:root .netsummary-table tfoot th { border-top: 2px solid var(--line-strong); background: var(--sunken); font-weight: 700; }
/* A long table scrolls inside its own box so the sticky header has something to stick to. */
.table-responsive:has(> .netsummary-table) { max-height: 75vh; }
/* First column stays put when a wide table is scrolled sideways. */
.netsummary-table.table-sticky-first > tbody > tr > :first-child,
.netsummary-table.table-sticky-first > tfoot > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.netsummary-table.table-sticky-first > thead > tr > :first-child { left: 0; z-index: 3; }
.netsummary-table.table-sticky-first > tbody > tr:hover > :first-child { background: var(--sunken); }
.netsummary-table.table-sticky-first > tfoot > tr > :first-child { background: var(--sunken); }

/* Live prices: a cell flashes when the price moved, a product whose price stopped while its market is open turns amber. */
.px { display: inline-block; padding: 0 .3rem; border-radius: .25rem; }
.px-up { animation: px-flash-up 1.2s ease-out; }
.px-down { animation: px-flash-down 1.2s ease-out; }
@keyframes px-flash-up { 0% { background: rgba(43, 211, 160, .55); } 100% { background: transparent; } }
@keyframes px-flash-down { 0% { background: rgba(255, 107, 110, .55); } 100% { background: transparent; } }
:root .netsummary-table tr.px-stale > td { background: var(--warn-soft); color: var(--warn-text); }

/* In-page menu of a long page: chips that stay under the sticky header and scroll to a card. */
.page-nav { position: sticky; top: var(--page-nav-top, 0px); z-index: 30; display: flex; gap: .4rem; overflow-x: auto; margin: 0 0 1rem; padding: .5rem .25rem; background: var(--page); scrollbar-width: thin; }
.live-toast-text { font-size: .85rem; color: var(--bs-secondary-color, #6c757d); overflow-wrap: anywhere; }
.live-toast-limit { border-left-color: #e0a100; }
.live-toast-critical { border-left-color: #dc3545; }
.live-toast-alert { border-left-color: #fd7e14; }
.live-toast-ok { border-left-color: #198754; }
.live-toast-telegram { border-left-color: #0dcaf0; }

/* The printable daily report. */
.report { max-width: 52rem; background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: 1.5rem 1.75rem; }
.report-head { border-bottom: 2px solid var(--line-strong); margin-bottom: 1rem; padding-bottom: .6rem; }
.report-section { margin-bottom: 1.1rem; break-inside: avoid; }
.report-section h2 { border-bottom: 1px solid var(--line); padding-bottom: .25rem; margin-bottom: .5rem; }
.report-table td:first-child { width: 55%; }
.report-foot { border-top: 1px solid var(--line); padding-top: .6rem; }
@media print {
    .sidenav, .app-header, .live-toasts, .no-print, .page-nav, .top-progress, #blazor-error-ui { display: none !important; }
    html, body, .shell, .content, main { background: #fff !important; color: #000 !important; }
    .shell { display: block !important; }
    .content, main { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; }
    .report { border: 0; padding: 0; max-width: none; background: #fff; }
    .report-table { font-size: .85rem; }
    .netsummary-table > :not(caption) > * > * { padding-top: .25rem; padding-bottom: .25rem; }
}

/* Live prices at the top of the header: one tile per product (icon, sell / buy, day change). */
.hdr-prices { display: flex; align-items: stretch; justify-content: flex-start; gap: .35rem; flex: 1 1 22rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.hdr-price { flex: 0 0 auto; display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .28rem .5rem; border-radius: .5rem; background: rgba(255, 255, 255, .07); color: #cfd8e6; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity .3s, background .15s; }
.hdr-price:hover { background: rgba(255, 255, 255, .12); color: #fff !important; }
.hdr-head { display: flex; align-items: center; gap: .15rem; font-size: .68rem; }
.hdr-head b { color: #fff; font-weight: 600; letter-spacing: .01em; font-size: .76rem; }
.hdr-head .sym-icon { margin-right: .2rem; }
.hdr-head .sym-icon img { width: .95rem; height: .95rem; }
.hdr-chg { margin-left: auto; padding-left: .35rem; font-size: .66rem; }
.hdr-quote { display: flex; gap: .5rem; font-size: .82rem; }
.hdr-up { color: #5fe0a0; }
.hdr-down { color: #ff8f91; }
.hdr-quote .hdr-px { transition: color .25s; }
.hdr-stale { opacity: .5; }
@keyframes hdr-flash-up { from { box-shadow: inset 0 0 0 1px rgba(95, 224, 160, .8); } to { box-shadow: inset 0 0 0 1px rgba(95, 224, 160, 0); } }
@keyframes hdr-flash-down { from { box-shadow: inset 0 0 0 1px rgba(255, 143, 145, .8); } to { box-shadow: inset 0 0 0 1px rgba(255, 143, 145, 0); } }

/* Settings: tabs, and a small heading above each group of fields */
.settings-layout { display: flex; flex-direction: column; }
.section-tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 1.1rem; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.section-tab { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; text-align: left; padding: .6rem 1.1rem; border: 0; border-bottom: 3px solid transparent; border-radius: .5rem .5rem 0 0; background: transparent; color: inherit; }
.section-tab:hover { background: rgba(0, 0, 0, .05); }
.section-tab.active { background: var(--accent-soft); border-bottom-color: var(--accent); }
.section-tab i { width: 1.2rem; text-align: center; color: #6c757d; }
.section-tab.active i { color: var(--accent-text); }
.section-tab span { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.section-tab small { color: #6c757d; font-size: .75rem; }
.settings-body { min-width: 0; }
 (max-width: 700px) {
    .section-tab small { display: none; }
    .section-tab { padding: .55rem .8rem; }
}

/* Steady widths: the header does not jiggle when a number gains or loses a digit */
.strip-item { min-width: 5.2rem; flex: 0 0 auto; }
.app-header-bar .strip-item strong { font-size: .88rem; }
.app-header-status .status-pill { min-width: 6.5rem; justify-content: center; }
.hdr-meta.hdr-time { min-width: 4.2rem; }

/* The period filter of a whole page (Kâr / Zarar) */
.period-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; margin-bottom: 1rem; padding: .6rem .9rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .6rem; background: var(--accent-soft); }
.period-bar-label { font-weight: 600; color: var(--accent-text); }
.period-bar-range { font-weight: 700; font-variant-numeric: tabular-nums; }
.period-bar-hint { order: -1; margin-right: auto; font-size: .78rem; color: #6c757d; }
/* On a wide screen the bar is one row: the sentence at its left gives way (cut with ...; the whole of it is in its tooltip) before anything wraps. */
@media (min-width: 992px) {
    .period-bar { flex-wrap: nowrap; }
    .period-bar > * { flex: 0 0 auto; }
    .period-bar > .period-bar-hint { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* The account page shows profit and loss as green and red. */
.acct-redgreen { --cl-up: var(--pos); --cl-down: var(--neg); }
/* A table cell would otherwise keep the table's own text colour over the class (Bootstrap sets it on every cell), so the profit and loss cells say it again. */
.acct-redgreen td.cl-up { color: var(--cl-up); }
.acct-redgreen td.cl-down { color: var(--cl-down); }

/* The colour key, always on show at the top right of the header */
.persp-legend-bar b { font-weight: 600; }

/* The synthetic futures - spot tile: dashed outline, its note in plain colour (it is a gap, not a day change) */

/* The main menu folds down to a narrow strip of icons */
.sidenav { transition: flex-basis .18s, width .18s; }
.sidenav-brand { position: relative; }
.sidenav-toggle { margin-left: auto; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 0; border-radius: .4rem; background: rgba(255, 255, 255, .08); color: #cfd8e6; }
.sidenav-toggle:hover { background: rgba(255, 255, 255, .18); color: #fff; }
@media (min-width: 993px) {
    .sidenav.is-rail { flex-basis: 4.4rem; width: 4.4rem; padding-left: .5rem; padding-right: .5rem; }
    .sidenav.is-rail .sidenav-brand { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidenav.is-rail .brand-logo-full { display: none; }
    .sidenav.is-rail .sidenav-toggle { margin-left: 0; }
    .sidenav.is-rail .sidenav-link { justify-content: center; padding-left: 0; padding-right: 0; position: relative; }
    .sidenav.is-rail .sidenav-text, .sidenav.is-rail .nav-meta { display: none; }
    .sidenav.is-rail .nav-badge { position: absolute; top: .1rem; right: .3rem; min-width: 1rem; height: 1rem; padding: 0 .25rem; font-size: .6rem; line-height: 1rem; }
    .sidenav.is-rail .sidenav-tools { flex-direction: column; }
    .sidenav.is-rail .sidenav-tool span { display: none; }
}

/* =====================================================================
   Tablet and phone: the menu is a drawer, the header stacks, tables scroll sideways
   ===================================================================== */
.mobile-bar, .sidenav-backdrop, .sidenav-close { display: none; }

@media (max-width: 992px) {
    :root { --page-gutter: 1rem; }
    .shell { flex-direction: column; align-items: stretch; }
    .shell > .content { padding: .75rem var(--page-gutter) 1.5rem; }

    .mobile-bar { display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 1100; height: 3rem; padding: 0 .75rem; background: var(--ink); }
    .mobile-menu-btn { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: .5rem; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.05rem; }
    .mobile-brand { height: 1.4rem; }

    .sidenav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1300; flex: none; width: min(18rem, 86vw); height: 100vh; transform: translateX(-102%); transition: transform .2s ease; }
    .sidenav.is-open { transform: none; box-shadow: 8px 0 28px rgba(0, 0, 0, .35); }
    .sidenav-backdrop { display: block; position: fixed; inset: 0; z-index: 1250; background: rgba(15, 23, 42, .5); }
    .sidenav-toggle { display: none; }
    .sidenav-close { display: inline-grid; place-items: center; margin-left: auto; width: 1.8rem; height: 1.8rem; border: 0; border-radius: .4rem; background: rgba(255, 255, 255, .08); color: #cfd8e6; }

    .app-header { position: static; margin: 0 0 .75rem; padding: .65rem .8rem; border-radius: .6rem; }
    .app-header-top { flex-direction: column; align-items: stretch; gap: .5rem; }
    .app-header-title { flex: 0 0 auto; }
    .app-header-status { align-self: stretch; align-items: stretch; margin-left: 0; }
    .status-row { justify-content: flex-start; }
    .app-header-bar { gap: .4rem .75rem; }
    .hdr-prices { flex: 1 1 100%; justify-content: flex-start; }

    .netsummary-table { display: block; max-width: 100%; overflow-x: auto; }
    .live-toasts { top: 3.6rem; right: .5rem; }
    .period-bar { justify-content: flex-start; }
    .period-bar-hint { display: none; }
    .section-tab { padding: .5rem .8rem; }
    .section-tab small { display: none; }
    .drawer { width: 100vw; }
}

@media (max-width: 576px) {
    :root { --page-gutter: .7rem; }
    .stat-value { font-size: 1.15rem; }
    .app-header-title h1 { font-size: 1.1rem; }
    .panel { padding: .75rem; }
    .btn-group-sm > .btn { padding: .25rem .5rem; }
    .section-tab i { display: none; }
    /* a denser header, so the page starts higher on a small screen */
    .app-header-status { gap: .3rem; }
    .status-row { gap: .35rem .5rem; }
    .acct-search { flex: 1 1 8rem; min-width: 0; }
    .acct-search input { width: 100%; min-width: 0; }
    .hdr-meta:not(.hdr-time) { display: none; }
    .app-header-top { gap: .35rem; }
    .app-header-bar { margin-top: .45rem; padding-top: .45rem; }
}

/* More glyphs of the same icon font: menu button, close, fold / unfold the menu, settings tab, history tab */
.fa-bars { --fa: "\f0c9"; }
.fa-xmark { --fa: "\f00d"; }
.fa-angles-left { --fa: "\f100"; }
.fa-angles-right { --fa: "\f101"; }
.fa-sliders { --fa: "\f1de"; }
.fa-clock-rotate-left { --fa: "\f1da"; }

/* The theme colours links blue; the price tiles sit on the dark header and keep their own colour */
.hdr-price { color: #cfd8e6 !important; }
.hdr-price:hover { color: #fff !important; }

/* The buttons and filters in a card's header wrap instead of pushing the page wider; a search box shrinks to the room there is */
.card-actions { max-width: 100%; }
.card-actions > .form-control, .card-actions > .form-select { min-width: 0; max-width: 100%; }


.hdr-prices > :first-child { margin-left: auto; }

/* Tablet in landscape and small laptops: the menu is a little narrower */
@media (min-width: 993px) and (max-width: 1199px) {
    :root { --nav-width: 15rem; }
}

/* Tablet in portrait: there is room for the description under the page title */
@media (min-width: 577px) and (max-width: 992px) {
    .app-header-title p { display: block; }
}

/* Phone: the Olaylar table becomes a list of cards - time, type and status on the first line, the event itself under it */
@media (max-width: 576px) {
    .netsummary-table.events-table, .events-table tbody, .events-table tr, .events-table td { display: block; }
    .netsummary-table.events-table { overflow: visible; }
    .events-table thead { display: none; }
    .events-table tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .2rem .6rem; margin-bottom: .55rem; padding: .55rem .7rem; border: 1px solid var(--line, #dee2e6); border-radius: .6rem; background: var(--card, #fff); }
    .events-table td { padding: 0; border: 0; background: transparent; }
    .events-table .ev-time { grid-column: 1; font-variant-numeric: tabular-nums; color: #6c757d; font-size: .8rem; }
    .events-table .ev-kind { grid-column: 2; }
    .events-table .ev-status { grid-column: 3; text-align: right; }
    .events-table .ev-body { grid-column: 1 / -1; padding-top: .2rem; border-top: 1px solid var(--line, #dee2e6); }
    .table-responsive:has(> .events-table) { overflow: visible; }
}

/* Sinyaller: the rating of a timeframe on a five-step meter, and the buy / neutral / sell colours (the words always say it too) */
.sig-buy { color: #1f9d6b; }
.sig-sell { color: #dd4b5a; }
.sig-neutral { color: #8591a0; }
/* Bootstrap colours every table cell itself, which beats the classes above; inside a table the cell's own class has to win */
:root .table > tbody > tr > td.sig-buy { color: #1f9d6b; }
:root .table > tbody > tr > td.sig-sell { color: #dd4b5a; }
:root .table > tbody > tr > td.sig-neutral { color: #8591a0; }
.sig-rating { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.sig-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: .55rem 0 .15rem; }
.sig-meter > span { height: .6rem; border-radius: .3rem; background: rgba(127, 127, 127, .25); }
.sig-meter > span.on { background: currentColor; box-shadow: 0 0 0 2px rgba(127, 127, 127, .25); }
.sig-meter-labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; font-size: .62rem; text-align: center; color: #8591a0; }
.table-group-row td { background: transparent; border-bottom: 1px solid rgba(127, 127, 127, .25); padding-top: .5rem; }


/* Overview accounts card: who a row is for, and the small line under its name */
.persp.stat-who { margin-left: 0; margin-bottom: .25rem; }
.stat-note { display: block; font-size: .7rem; font-weight: 400; line-height: 1.25; color: var(--muted, #6c757d); overflow-wrap: anywhere; }


/* the general net under the accounts table: two proportional bars, then the sum with every name under its figure */
.ne { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ne-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: .3rem; background: var(--sunken); }
.ne-bar > span { display: block; height: 100%; }
.ne-bar > span + span { border-left: 2px solid var(--card); }
.ne-client { background: #b4b2a9; }
.ne-up { background: var(--pos); }
.ne-down { background: var(--neg); }
.ne-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem 1.1rem; margin-top: .8rem; font-variant-numeric: tabular-nums; }
.ne-term { min-width: 0; }
.ne-num { font-size: 1.15rem; font-weight: 600; color: var(--heading); line-height: 1.5rem; white-space: nowrap; }
.ne-result { font-size: 1.4rem; font-weight: 700; }
.ne-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; vertical-align: .1rem; }
.ne-name { font-size: .78rem; line-height: 1.1; color: var(--muted); }
.ne-op { font-size: 1.4rem; line-height: 1.5rem; font-weight: 300; color: var(--muted); }
.ne-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: .8rem 1.5rem; margin-top: .8rem; }
.ne-foot .ne-line { margin-top: 0; }
.ne-side { flex: 1 1 28rem; padding-left: 1.2rem; border-left: 1px solid var(--line); font-size: .8rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 767.98px) { .ne-side { flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: 0; } }

/* the header status pill: the state's colour fills the pill, the dot turns white */
:root .status-pill.status-live { background: #0a9a73; color: #fff; }
:root .status-pill.status-closed { background: #3d6fb0; color: #fff; }
:root .status-pill.status-bad { background: #d63f42; color: #fff; }
:root .status-pill.status-paused { background: #e0a93a; color: #2b1d00; }
:root .status-pill.status-live .status-dot,
:root .status-pill.status-closed .status-dot,
:root .status-pill.status-bad .status-dot { background: #fff; }
:root .status-pill.status-paused .status-dot { background: #2b1d00; }
:root .status-pill.status-live .status-dot { animation: live-pulse-light 1.8s ease-out infinite; }
@keyframes live-pulse-light { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70% { box-shadow: 0 0 0 .5rem rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

/* an LP's account figures and properties: plain label + value pairs in a tight grid instead of a box each */
.lp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr)); gap: .55rem 1rem; padding: .6rem .8rem; margin-bottom: .9rem; background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; }
.lp-fact { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; font-variant-numeric: tabular-nums; }
.lp-fact-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lp-fact strong { font-size: 1.02rem; font-weight: 650; color: var(--heading); }
.lp-fact-sub { font-size: .72rem; color: var(--muted); }

/* LP sub-rows under a product in the Broker net position table */
.netsummary-table .lp-subrow > * { background: rgba(0, 0, 0, .03); color: #6c757d; font-size: .86rem; padding-top: .35rem; padding-bottom: .35rem; }
.netsummary-table .lp-subrow .lp-subname { padding-left: 2rem; }
[data-bs-theme="dark"] .netsummary-table .lp-subrow > * { background: rgba(255, 255, 255, .04); color: #8f9bab; }

.persp-legend-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .15rem 1.1rem; margin-bottom: .55rem; font-size: .72rem; color: #aab4c3; text-align: right; }
/* Header, three rows: (1) title on the left, on the right the colour key over the search / date row; (2) the figures, the whole width; (3) the prices and nothing else. */
.app-header-prices { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.app-header-prices .hdr-prices { padding-bottom: .1rem; }
.app-header-prices .hdr-prices > :first-child { margin-left: 0; }
.app-header-kpis { gap: .5rem 0; align-items: flex-start; flex-wrap: wrap; }
.app-header-kpis .strip-group { flex: 1 1 auto; flex-wrap: wrap; white-space: nowrap; justify-content: space-between; gap: .4rem clamp(.5rem, .55vw, .8rem); padding: 0 clamp(.5rem, .55vw, .8rem); }
.app-header-kpis .strip-group:first-child { padding-left: 0; }
.app-header-kpis .strip-group:last-child { border-right: 0; padding-right: 0; }

/* Header: the description is one line under the title (all of it in the "?" popup, which also holds the colour key); the figures sit in two groups. */
.app-header-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem .95rem; padding-right: .95rem; border-right: 1px solid rgba(255, 255, 255, .14); }
.strip-sub { font-size: .66rem; color: #8f9bb0; white-space: nowrap; }
@media (max-width: 992px) { .persp-legend-bar { justify-content: flex-start; text-align: left; } }
@media (max-width: 576px) { .persp-legend-bar { font-size: .64rem; gap: .1rem .6rem; margin-bottom: .3rem; } .persp-legend-bar .persp { font-size: .58rem; padding: .05rem .35rem; } }
/* From 1700 px wide on the figures are ONE row that never wraps and never scrolls (the type scales down a little to make room); narrower, they wrap rather than lose a figure */
@media (min-width: 1700px) {
    .app-header-kpis, .app-header-kpis .strip-group { flex-wrap: nowrap; }
}
/* A linked figure keeps the same grey label as a plain one (a.strip-link used to turn its label white) */
.strip-item.strip-link, .strip-item.strip-link:hover { color: #aab4c3; }
.app-header-bar.app-header-kpis .strip-item strong { font-weight: 700; }

/* The day-change text reserves room for two-digit percents ("▼ 10,80%") so a tile does not grow and push the ones after it when the change passes 10 % */
.hdr-chg { display: inline-block; min-width: 4.6em; text-align: right; }

/* The brand font (DM Sans, byte for byte the one of the design project) has no tabular figures, so a number's width follows its digits. Instead of another font, a live
   number never gets narrower than the widest it has been (see the "number lock" in app.js): the layout settles after the first few ticks and then stays put. */
.hdr-px { display: inline-block; }

/* The first column of a table that names its rows (the account, the product) stays on one line; the table takes the width it needs. */
.netsummary-table.nowrap-first > thead > tr > :first-child,
.netsummary-table.nowrap-first > tbody > tr > :first-child:not([colspan]),
.netsummary-table.nowrap-first > tfoot > tr > :first-child { white-space: nowrap; }
/* ...and the other columns give way so the table fits its card without a scrollbar: headers may take two lines, cells sit closer together. */
:root .netsummary-table.nowrap-first thead th, :root .netsummary-table.nowrap-first thead th.sortable, :root .netsummary-table.nowrap-first thead th .sortable { white-space: normal; line-height: 1.15; vertical-align: bottom; }
:root .netsummary-table.nowrap-first > :not(caption) > * > * { padding-left: .3rem; padding-right: .3rem; }
@media (max-width: 1399.98px) { .netsummary-table.nowrap-first { font-size: .82rem; } }

/* The five totals of the LP tab share one row at any width a desk screen has; a phone gets two to a row. */
.lp-totals-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.lp-totals-row .stat-card { min-width: 0; }
@media (max-width: 767.98px) { .lp-totals-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- account history chart (AccountResultChart): the client's colours, hover figures without script ---- */
.ar-svg { width: 100%; height: auto; display: block; background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; }
.ar-grid { stroke: var(--line); stroke-width: 1; }
.ar-zero { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.ar-axis { font-size: 11px; fill: var(--muted); }
.ar-axis-title { font-size: 10px; fill: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ar-line { fill: none; stroke: var(--heading); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ar-area-up { fill: var(--cl-up); opacity: .16; }
.ar-area-down { fill: var(--cl-down); opacity: .18; }
.ar-bar-up { fill: var(--cl-up); }
.ar-bar-down { fill: var(--cl-down); }
.ar-dd { fill: var(--muted); opacity: .13; }
.ar-dd-label { font-size: 11px; fill: var(--text); font-weight: 600; }
.ar-in { fill: var(--heading); }
.ar-out { fill: none; stroke: var(--heading); stroke-width: 1.4; }
.ar-hit { fill: transparent; }
.ar-cross, .ar-dot, .ar-tip { display: none; pointer-events: none; }
.ar-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ar-dot { fill: var(--card); stroke: var(--heading); stroke-width: 2; }
.ar-day:hover .ar-cross, .ar-day:hover .ar-dot, .ar-day:hover .ar-tip { display: inline; }
.ar-day:hover .ar-hit { fill: rgba(127, 127, 127, .07); }
.ar-tip-box { fill: var(--card); stroke: var(--line-strong); stroke-width: 1; }
.ar-tip-text { font-size: 11.5px; fill: var(--text); }
.ar-tip-head { font-weight: 700; fill: var(--heading); }
.ar-tip-flow { font-weight: 600; }
.ar-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .4rem; }
.ar-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ar-key { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; }
.ar-key-up { background: var(--cl-up); }
.ar-key-down { background: var(--cl-down); }
.ar-key-dd { background: var(--muted); opacity: .3; }
.ar-key-in { width: 0; height: 0; border-radius: 0; border-left: .4rem solid transparent; border-right: .4rem solid transparent; border-bottom: .65rem solid var(--heading); }
.ar-key-out { width: 0; height: 0; border-radius: 0; border-left: .4rem solid transparent; border-right: .4rem solid transparent; border-top: .65rem solid var(--heading); opacity: .55; }
.drawer-stats-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .drawer-stats-6 { grid-template-columns: repeat(3, 1fr); } }

/* ---- result per product as bars around a centre line ---- */
.sym-bars { display: grid; gap: .1rem; }
.sym-row { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr 6.5rem minmax(9rem, 14rem); align-items: center; gap: .75rem; padding: .35rem .2rem; border-bottom: 1px solid var(--line); }
.sym-row:last-child { border-bottom: 0; }
.sym-name { font-weight: 600; white-space: nowrap; }
.sym-track { position: relative; height: .85rem; background: var(--sunken); border-radius: 4px; }
.sym-track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-strong); }
.sym-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.sym-fill-up { left: 50%; background: var(--cl-up); }
.sym-fill-down { right: 50%; background: var(--cl-down); }
.sym-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sym-meta { font-size: .78rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) { .sym-row { grid-template-columns: minmax(6rem, 9rem) 1fr 6rem; } .sym-meta { display: none; } }

/* ---- customer profitability (ClientProfitCard): where each client's money for the company comes from ---- */
:root { --cmp-markup: #0d9488; --cmp-commission: #7c3aed; --cmp-swap: #64748b; --cmp-other: #db2777; --cmp-position: #a8b3c0; }
:root[data-bs-theme="dark"] { --cmp-markup: #2dd4bf; --cmp-commission: #a78bfa; --cmp-swap: #94a3b8; --cmp-other: #f472b6; --cmp-position: #6b7b8c; }
.cmp-markup { background: var(--cmp-markup); }
.cmp-commission { background: var(--cmp-commission); }
.cmp-swap { background: var(--cmp-swap); }
.cmp-other { background: var(--cmp-other); }
.cmp-position { background: var(--cmp-position); }
.cmp-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-left: auto; }
.cmp-key { display: inline-flex; align-items: center; }
.cmp-bar { display: flex; align-items: center; height: .9rem; min-width: 11rem; }
.cmp-half { display: flex; width: 50%; height: 100%; }
.cmp-neg { flex-direction: row-reverse; justify-content: flex-start; border-right: 1px solid var(--line-strong); }
.cmp-pos { justify-content: flex-start; }
.cmp-seg { display: block; height: 100%; min-width: 1px; }
.cmp-cell { width: 28%; }
.cmp-head { width: 28%; }
.profit-totals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.profit-tile .stat-value { font-size: 1.2rem; }
.profit-tile-main .stat-value { font-size: 1.45rem; }
@media (max-width: 1100px) { .profit-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .profit-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ar-point { fill: var(--heading); stroke: var(--card); stroke-width: 2; }