
.ibkr-orders-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:18px;
}

.ibkr-orders-toolbar-left{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.ibkr-orders-title{
    font-family:var(--ibkr-serif);
    font-size:22px;
    font-weight:400;
    color:var(--ibkr-text-dark);
    margin:0;
}

.ibkr-orders-toolbar-right{
    display:flex;
    align-items:center;
    gap:14px;
}

.ibkr-orders-updated{
    font-size:12px;
    color:var(--ibkr-text-muted);
}

/* ---------- Gateway online / offline pill ---------- */
.ibkr-gw-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.ibkr-gw-pill.online{
    background:var(--ibkr-pill-connected-bg);
    color:var(--ibkr-pill-connected-text);
}

.ibkr-gw-pill.offline{
    background:var(--ibkr-pill-disconnected-bg);
    color:var(--ibkr-pill-disconnected-text);
}

.ibkr-gw-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
    display:inline-block;
}

.ibkr-gw-pill.online .ibkr-gw-dot{
    animation:ibkr-gw-pulse 1.6s ease-in-out infinite;
}

@keyframes ibkr-gw-pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:.35; }
}

/* ---------- Orders table ---------- */
.ibkr-orders-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:var(--ibkr-table-bg);
    border:1px solid var(--ibkr-table-border);
    border-radius:16px;
    overflow:hidden;
    color:var(--ibkr-text-body);
}

.ibkr-orders-table thead tr{
    background:var(--ibkr-table-head-bg);
}

.ibkr-orders-table th{
    padding:14px 16px;
    text-align:left;
    color:var(--ibkr-text-muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    border-bottom:1px solid var(--ibkr-table-border);
}

.ibkr-orders-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--ibkr-table-border);
    vertical-align:middle;
}

.ibkr-order-id{
    font-weight:700;
    font-size:14px;
    color:var(--ibkr-text-dark);
}

.ibkr-order-permid{
    font-size:11px;
    color:var(--ibkr-text-muted);
    margin-top:2px;
}

.ibkr-order-symbol{
    font-weight:700;
    color:var(--ibkr-text-dark);
}

.ibkr-order-gw{
    font-size:12px;
    font-weight:600;
    color:var(--ibkr-text-body);
}

.ibkr-order-gw-host{
    font-size:11px;
    color:var(--ibkr-text-muted);
    margin-top:2px;
}

/* ---------- Order status badges (reuses badge color tokens) ---------- */
.ibkr-order-status{
    display:inline-block;
    padding:4px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.3px;
    background:var(--ibkr-badge-def-bg);
    color:var(--ibkr-badge-def-text);
    border:1px solid var(--ibkr-badge-def-border);
}

.ibkr-order-status--presubmitted,
.ibkr-order-status--submitted{
    background:var(--ibkr-badge-fut-bg);
    color:var(--ibkr-badge-fut-text);
    border-color:var(--ibkr-badge-fut-border);
}

.ibkr-order-status--filled{
    background:var(--ibkr-badge-cash-bg);
    color:var(--ibkr-badge-cash-text);
    border-color:var(--ibkr-badge-cash-border);
}

.ibkr-order-status--cancelled,
.ibkr-order-status--apicancelled{
    background:var(--ibkr-badge-bond-bg);
    color:var(--ibkr-badge-bond-text);
    border-color:var(--ibkr-badge-bond-border);
}

.ibkr-order-status--pendingsubmit,
.ibkr-order-status--pendingcancel{
    background:var(--ibkr-badge-opt-bg);
    color:var(--ibkr-badge-opt-text);
    border-color:var(--ibkr-badge-opt-border);
}

/* ---------- Empty / error states ---------- */
.ibkr-orders-empty{
    text-align:center;
    padding:48px 24px;
    color:var(--ibkr-text-muted);
}

.ibkr-orders-empty h3{
    font-family:var(--ibkr-serif);
    font-weight:400;
    color:var(--ibkr-text-dark);
    margin:0 0 8px;
}

.ibkr-orders-empty--error h3{
    color:var(--ibkr-accent-red);
}

.ibkr-orders-empty button{
    margin-top:14px;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
    .ibkr-orders-table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }
}

/* =========================================================
   Orders Header
========================================================= */

.ibkr-orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 4px 0;
}

.ibkr-orders-header-left {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.ibkr-orders-title-wrap {
    min-width: 190px;
}

.ibkr-orders-title {
    font-family: var(--ibkr-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ibkr-text-dark);
    margin: 0;
}

.ibkr-orders-subtitle {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--ibkr-text-muted);
}


/* =========================================================
   Account
========================================================= */

.ibkr-orders-account {
    display: flex;
    align-items: center;
    padding-left: 24px;
    border-left: 1px solid var(--ibkr-table-border);
}

.ibkr-orders-account-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ibkr-orders-account-id {
    font-size: 16px;
    font-weight: 700;
    color: var(--ibkr-text-dark);
    letter-spacing: .2px;
    line-height: 1;
}


/* =========================================================
   Paper / Live Badge
========================================================= */

.ibkr-orders-account-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 68px;
    height: 34px;
    padding: 0 12px;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}


/* ---------- Paper ---------- */

.ibkr-orders-account-type.paper {
    color: #f5a623;
    background: rgba(245, 166, 35, 0.08);
    border: 1px solid rgba(245, 166, 35, 0.45);
}


/* ---------- Live ---------- */

.ibkr-orders-account-type.live {
    color: #5da9ff;
    background: rgba(64, 137, 255, 0.10);
    border: 1px solid rgba(64, 137, 255, 0.38);
}


/* Hide the old dot */
.ibkr-orders-account-type-dot {
    display: none;
}


/* =========================================================
   Right Side
========================================================= */

.ibkr-orders-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ibkr-orders-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* =========================================================
   Gateway Pill
========================================================= */

.ibkr-gw-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 11px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.ibkr-gw-pill.online {
    background: var(--ibkr-pill-connected-bg);
    color: var(--ibkr-pill-connected-text);
}

.ibkr-gw-pill.offline {
    background: var(--ibkr-pill-disconnected-bg);
    color: var(--ibkr-pill-disconnected-text);
}

.ibkr-gw-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.ibkr-gw-pill.online .ibkr-gw-dot {
    animation: ibkr-gw-pulse 1.6s ease-in-out infinite;
}

@keyframes ibkr-gw-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px) {

    .ibkr-orders-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .ibkr-orders-header-left {
        width: 100%;
        flex-wrap: wrap;
        gap: 16px;
    }

    .ibkr-orders-account {
        padding-left: 16px;
    }

    .ibkr-orders-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .ibkr-orders-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}