/* ============================================================
   IBKR TRADE MODULE — assets/css/trade.css
   Trade-ticket + order-confirmation styles ONLY. Load this file
   together with trade.js, on the Trade page alone:
     <link rel="stylesheet" href="assets/css/gateway.css"/>
     <link rel="stylesheet" href="assets/css/trade.css"/>
     <script src="assets/js/gateway.js"></script>
     <script src="assets/js/trade.js"></script>

   THEME: every rule below reads var(--ibkr-trade-*), which are
   declared in gateway.css under :root (light) and
   :root[data-theme="dark"] (dark) — same one-file-drives-both-
   themes pattern as the rest of the IBKR module. Do NOT hardcode
   colors here; add a new --ibkr-trade-* variable in gateway.css
   instead so both themes stay in sync.
   ============================================================ */

/* ============================================================
   IBKR Trade screen
   ============================================================ */

.trade-card{
    max-width:700px;
    margin:auto;
    background:var(--ibkr-trade-card-bg);
    border:1px solid var(--ibkr-trade-card-border);
    border-radius:18px;
    padding:28px;
    box-shadow:var(--ibkr-trade-card-shadow);
    color:var(--ibkr-trade-text-primary);
}

.trade-search{
    display:flex;
    gap:12px;
    margin-bottom:25px;
}

.trade-search input{
    flex:1;
    background:var(--ibkr-trade-input-bg);
    color:var(--ibkr-trade-input-text);
    border:1px solid var(--ibkr-trade-input-border);
    border-radius:10px;
    padding:12px 15px;
    font-size:15px;
    outline:none;
}

.trade-search input::placeholder{
    color:var(--ibkr-trade-input-placeholder);
}

.trade-search input:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.25);
}

.trade-search button{
    background:var(--ibkr-trade-search-btn-bg);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:12px 22px;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
}

.trade-search button:hover{
    background:var(--ibkr-trade-search-btn-bg-hover);
}

.trade-info{
    background:var(--ibkr-trade-input-bg);
    border:1px solid var(--ibkr-trade-section-border);
    border-radius:14px;
    margin-bottom:24px;
}

.info-row{
    display:flex;
    justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px solid var(--ibkr-trade-section-border);
}

.info-row:last-child{
    border-bottom:none;
}

.info-row span{
    color:var(--ibkr-trade-text-secondary);
}

.info-row strong{
    color:var(--ibkr-trade-text-primary);
}

.trade-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:30px;
}

.trade-field{
    display:flex;
    flex-direction:column;
}

.trade-field label{
    margin-bottom:8px;
    color:var(--ibkr-trade-text-secondary);
    font-size:14px;
}

.trade-field input,
.trade-field select{
    background:var(--ibkr-trade-input-bg);
    color:var(--ibkr-trade-input-text);
    border:1px solid var(--ibkr-trade-input-border);
    border-radius:10px;
    padding:12px;
    outline:none;
}

.trade-field input:focus,
.trade-field select:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.2);
}

.trade-buttons{
    display:flex;
    gap:15px;
}

.buy-btn,
.sell-btn{
    flex:1;
    border:none;
    border-radius:10px;
    padding:14px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.buy-btn{
    background:var(--ibkr-accent-green);
    color:#fff;
}

.buy-btn:hover{
    filter:brightness(.9);
}

.sell-btn{
    background:var(--ibkr-accent-red);
    color:#fff;
    text-align:center;
    display:none;
    justify-content:center;
}

.sell-btn:hover{
    filter:brightness(.9);
}

/* Empty-state icon circle ("No Symbol Selected") */
.trade-empty-icon{
    width:64px;
    height:64px;
    margin:0 auto 20px;
    border-radius:50%;
    background:var(--ibkr-trade-empty-icon-bg);
    display:flex;
    align-items:center;
    justify-content:center;
}

@media(max-width:700px){
    .trade-form{ grid-template-columns:1fr; }
    .trade-search{ flex-direction:column; }
    .trade-buttons{ flex-direction:column; }
}

/* ============================================================
   Order confirmation ticket (modal)
   Same "stamped ticket" look in both themes — only the surface
   colors swap; the punch-hole perforation trick uses
   --ibkr-trade-perf-dot-bg to match each theme's ticket
   background so the illusion still reads correctly.
   ============================================================ */

#tradeConfirmModal{
    display:none;
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    background:var(--ibkr-trade-modal-overlay);
    justify-content:center;
    align-items:center;
    z-index:9999;
    backdrop-filter:blur(3px);
}

#tradeConfirmModal .ticket{
    position:relative;
    width:380px;
    max-width:90%;
    background:var(--ibkr-trade-ticket-bg);
    border:1px solid var(--ibkr-trade-ticket-border);
    border-radius:14px;
    box-shadow:var(--ibkr-trade-ticket-shadow);
    animation:ticketRise .28s cubic-bezier(.2,.8,.25,1);
}
@keyframes ticketRise{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}

#tradeConfirmModal .stamp{
    position:absolute;
    top:-16px;
    left:24px;
    transform:rotate(-3.5deg);
    border:1.5px solid var(--side,#22c55e);
    background:var(--side-deep,#123a20);
    color:var(--side,#22c55e);
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:12px;
    letter-spacing:.14em;
    padding:6px 14px 5px;
    border-radius:4px;
    box-shadow:0 4px 10px rgba(0,0,0,.35);
}

#tradeConfirmModal .ticket-head{ padding:24px 22px 14px; }
#tradeConfirmModal .ticket-head h2{ margin:0; font-size:22px; color:var(--ibkr-trade-row-heading); }

#tradeConfirmModal .perf{
    position:relative;
    height:0;
    border-top:1.5px dashed var(--ibkr-trade-perf-line);
}
#tradeConfirmModal .perf::before,
#tradeConfirmModal .perf::after{
    content:'';
    position:absolute;
    top:50%;
    width:18px;
    height:18px;
    background:var(--ibkr-trade-perf-dot-bg);
    border-radius:50%;
    transform:translateY(-50%);
}
#tradeConfirmModal .perf::before{ left:-9px; }
#tradeConfirmModal .perf::after{ right:-9px; }

#tradeConfirmModal .notice-wrap{
    padding:16px 24px 0;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .28s ease,opacity .2s ease,padding .28s ease;
}
#tradeConfirmModal .notice-wrap.show{ max-height:160px; opacity:1; padding:16px 24px 0; }

#tradeConfirmModal .notice{
    position:relative;
    background:var(--ibkr-warn-bg);
    border:1px solid var(--ibkr-warn-border);
    border-radius:3px;
    padding:12px 14px 13px;
    transform:rotate(-.6deg);
    box-shadow:0 6px 14px rgba(0,0,0,.15);
}
#tradeConfirmModal .notice::before{
    content:'';
    position:absolute;
    top:-7px;
    left:18px;
    width:34px;
    height:13px;
    background:var(--ibkr-warn-bg);
    border:1px solid var(--ibkr-warn-border);
    transform:rotate(2deg);
}
#tradeConfirmModal .notice-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
    color:var(--ibkr-warn-text);
    text-transform:uppercase;
}
#tradeConfirmModal .notice p{
    margin:7px 0 0;
    font-size:12.5px;
    line-height:1.55;
    color:var(--ibkr-warn-text);
}

#tradeConfirmModal .rows{ padding:20px 24px 4px; display:flex; flex-direction:column; gap:12px; }
#tradeConfirmModal .row{ display:flex; justify-content:space-between; gap:12px; }
#tradeConfirmModal .row .label{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ibkr-trade-row-label); }
#tradeConfirmModal .row .value{ font-family:'IBM Plex Mono',monospace; font-size:14.5px; color:var(--ibkr-trade-row-value); font-weight:500; font-variant-numeric:tabular-nums; }
#tradeConfirmModal .row .value.dim{ color:var(--ibkr-trade-row-value-dim); font-weight:400; }

#tradeConfirmModal .total-wrap{ padding:14px 24px 24px; }
#tradeConfirmModal .total{ display:flex; justify-content:space-between; padding-top:14px; }
#tradeConfirmModal .total .label{ font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ibkr-trade-row-label); }
#tradeConfirmModal .total .value{ font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; color:var(--side,#22c55e); }

#tradeConfirmModal .actions{ display:flex; gap:10px; padding:0 24px 24px; }
#tradeConfirmModal .actions button{ flex:1; padding:13px 10px; border-radius:8px; font-size:14.5px; font-weight:600; cursor:pointer; border:none; transition:transform .12s ease,filter .12s ease; }
#tradeConfirmModal .btn-cancel{ background:var(--ibkr-trade-btn-cancel-bg); border:1px solid var(--ibkr-trade-btn-cancel-border); color:var(--ibkr-trade-btn-cancel-text); }
#tradeConfirmModal .btn-confirm{ background:var(--side,#22c55e); color:#08110b; }
#tradeConfirmModal .btn-confirm:active,
#tradeConfirmModal .btn-confirm.stamping{ transform:scale(.94); filter:brightness(1.25); }

.ibkr-account-status-bar{
    display:flex;
    align-items:center;
    gap:12px;
}

.ibkr-account-id{
    font-size:20px;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--ibkr-trade-text-primary);
}

.ibkr-account-type{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 11px;
    border-radius:999px;
    background:rgba(245,158,11,.10);
    border:1px solid rgba(245,158,11,.22);
    color:#f59e0b;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.ibkr-account-type::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#f59e0b;
    box-shadow:0 0 0 3px rgba(245,158,11,.12);
}