/* Orders & Fills widget — light & dark polish (Bootstrap 5.3+) */

/* ===== Base (theme-agnostic) ===== */
.widget-orders {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .widget-orders .table-responsive {
        max-height: 420px; /* adjust to your widget height */
        overflow: auto; /* both axes */
    }

    /* Sticky header */
    .widget-orders .orders-table thead th {
        position: sticky;
        top: 0;
        z-index: 2; /* above body cells */
        background: var(--bs-table-bg, var(--bs-body-bg, #f8f9fa));
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.075);
    }

    /* Cell density + numeric alignment */
    .widget-orders .orders-table th,
    .widget-orders .orders-table td {
        padding-top: .375rem;
        padding-bottom: .375rem;
        white-space: nowrap;
    }

        .widget-orders .orders-table td.text-end {
            font-variant-numeric: tabular-nums;
        }

    /* Stronger badges for scan speed */
    .widget-orders .badge {
        font-weight: 600;
    }

    /* Fills (child) rows: subtle grouping (light default) */
    .widget-orders .fills-row {
        background: color-mix(in oklab, var(--bs-body-bg, #ffffff) 92%, #000);
    }

@supports not (color-mix: in oklab, white 50%, black) {
    .widget-orders .fills-row {
        background: #f8f9fa;
    }
    /* fallback */
}

/* Indented fills block + guide */
.widget-orders .fills-block {
    padding: .5rem .75rem .75rem .75rem;
    border-left: 2px solid rgba(108, 117, 125, .25); /* secondary tone */
    border-radius: 0 4px 4px 0;
}

/* Details summary: clean, subtle control */
.widget-orders details > summary {
    cursor: pointer;
    list-style: none;
    padding: .25rem 0 .5rem 0;
    color: var(--bs-secondary-color, #6c757d);
}

    .widget-orders details > summary::-webkit-details-marker {
        display: none;
    }

    .widget-orders details > summary::after {
        content: "▾";
        display: inline-block;
        margin-left: .45rem;
        transform: rotate(-90deg);
        transition: transform .12s linear;
        opacity: .6;
    }

.widget-orders details[open] > summary::after {
    transform: rotate(0deg);
}

/* Fills list */
.widget-orders .fills-list {
    margin: 0;
    padding-left: 1rem;
}

    .widget-orders .fills-list li {
        margin: .125rem 0;
        color: var(--bs-secondary-color, #6c757d);
    }

/* Match other cards */
.widget-orders .card-header {
    padding: .5rem .75rem;
}

.widget-orders .card-body {
    padding: .75rem;
}

/* Optional helpers for PnL & side chips — use these classes in markup */
.widget-orders .text-profit {
    color: var(--orders-profit, #198754);
}
/* green-ish */
.widget-orders .text-loss {
    color: var(--orders-loss, #dc3545);
}
/* red */
.widget-orders .badge-buy {
    background: var(--orders-badge-buy-bg, rgba(25,135,84,.12));
    color: var(--orders-badge-buy-fg, #198754);
    border: 1px solid var(--orders-badge-buy-bd, rgba(25,135,84,.35));
}

.widget-orders .badge-sell {
    background: var(--orders-badge-sell-bg, rgba(220,53,69,.12));
    color: var(--orders-badge-sell-fg, #dc3545);
    border: 1px solid var(--orders-badge-sell-bd, rgba(220,53,69,.35));
}

/* Subtle horizontal scrollbar styling for wide tables (WebKit) */
.widget-orders .table-responsive::-webkit-scrollbar {
    height: 10px;
}

.widget-orders .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(108,117,125,.35);
    border-radius: 6px;
}

.widget-orders .table-responsive::-webkit-scrollbar-track {
    background: rgba(0,0,0,.05);
}

/* ===== Light mode finetune ===== */
html:not([data-bs-theme="dark"]) .widget-orders .orders-table,
body:not(.theme-dark):not(.dark) .widget-orders .orders-table {
    --bs-table-color: #212529;
    --bs-table-bg: #ffffff;
    --bs-table-border-color: #e3e6ea;
    --bs-table-striped-bg: #f8f9fb;
    --bs-table-striped-color: var(--bs-table-color);
    --bs-table-hover-bg: #f2f4f8;
    --bs-table-hover-color: var(--bs-table-color);
}

html:not([data-bs-theme="dark"]) .widget-orders thead th,
body:not(.theme-dark):not(.dark) .widget-orders thead th {
    background-color: #f8f9fa;
    color: #0f1720;
    border-bottom-color: #e3e6ea;
}

html:not([data-bs-theme="dark"]) .widget-orders .orders-table > :not(caption) > * > * {
    border-bottom-color: #e8eaee;
}
/* Light-mode badge/PnL tones */
html:not([data-bs-theme="dark"]) .widget-orders {
    --orders-profit: #157347;
    --orders-loss: #b02a37;
    --orders-badge-buy-bg: rgba(21,115,71,.10);
    --orders-badge-buy-fg: #157347;
    --orders-badge-buy-bd: rgba(21,115,71,.30);
    --orders-badge-sell-bg: rgba(176,42,55,.10);
    --orders-badge-sell-fg: #b02a37;
    --orders-badge-sell-bd: rgba(176,42,55,.30);
}

/* ===== Dark mode finetune ===== */
/* Use :is(...) to group supported dark triggers */
:is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders .orders-table {
    --bs-table-color: #e7eaf0;
    --bs-table-bg: #111418;
    --bs-table-border-color: #2a2f36;
    --bs-table-striped-bg: #151a21;
    --bs-table-striped-color: var(--bs-table-color);
    --bs-table-hover-bg: #1a2028;
    --bs-table-hover-color: var(--bs-table-color);
}

:is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders thead th {
    background-color: #0e1114;
    color: #f0f3f7;
    border-bottom-color: #2f3540;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

:is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders .orders-table > :not(caption) > * > * {
    border-bottom-color: #26303a;
}

:is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders .fills-row {
    background: color-mix(in oklab, #0b0c0e 92%, #ffffff);
}

@supports not (color-mix: in oklab, white 50%, black) {
    :is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders .fills-row {
        background: #12161a;
    }
}

:is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders .form-control {
    background-color: #0f1317;
    color: #e7eaf0;
    border-color: #2a2f36;
}

    :is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders .form-control:focus {
        background-color: #0f1317;
        border-color: #3d93ff;
        box-shadow: 0 0 0 0.2rem rgba(61, 147, 255, 0.15);
        color: #ffffff;
    }
/* Dark-mode PnL & badges (accessible contrast) */
:is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders {
    --orders-profit: #31d07f;
    --orders-loss: #ff6b6b;
    --orders-badge-buy-bg: rgba(49, 208, 127, 0.15);
    --orders-badge-buy-fg: #31d07f;
    --orders-badge-buy-bd: rgba(49, 208, 127, 0.35);
    --orders-badge-sell-bg: rgba(255, 107, 107, 0.12);
    --orders-badge-sell-fg: #ff6b6b;
    --orders-badge-sell-bd: rgba(255, 107, 107, 0.35);
}
    /* Scrollbar tone in dark */
    :is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders .table-responsive::-webkit-scrollbar-thumb {
        background: #2a2f36;
    }

    :is(html[data-bs-theme="dark"], body.theme-dark, body.dark) .widget-orders .table-responsive::-webkit-scrollbar-track {
        background: #0e1114;
    }

/* System-dark fallback if no theme class/attr is set */
@media (prefers-color-scheme: dark) {
    .widget-orders .orders-table {
        --bs-table-color: #e7eaf0;
        --bs-table-bg: #111418;
        --bs-table-border-color: #2a2f36;
        --bs-table-striped-bg: #151a21;
        --bs-table-striped-color: var(--bs-table-color);
        --bs-table-hover-bg: #1a2028;
        --bs-table-hover-color: var(--bs-table-color);
    }

    .widget-orders thead th {
        background-color: #0e1114;
        color: #f0f3f7;
        border-bottom-color: #2f3540;
    }

    .widget-orders .orders-table > :not(caption) > * > * {
        border-bottom-color: #26303a;
    }

    .widget-orders .fills-row {
        background: #12161a;
    }

    .widget-orders {
        --orders-profit: #31d07f;
        --orders-loss: #ff6b6b;
    }
}