/* ============================================================
 * StarkTrade 5.0K - style-tables.css
 * Tablas (ordenes activas, velas, etc.) y utilidades de color
 * compartidas por badges, celdas y texto.
 * ============================================================ */

.table-container { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

th {
    text-align: left;
    color: var(--text-secondary);
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    /* FIX UI: celdas con texto largo (reasoning, gate_reason, notes)
     * deben envolver y romper strings sin espacios. vertical-align se
     * mantiene en default (middle) para no alterar tablas cortas. */
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Utilidades de color (usadas tambien en badges fuera de tabla) */
.profit  { color: var(--accent-neon); }
.loss    { color: var(--accent-red); }
.neutral { color: var(--text-secondary); }

/* FASE 8.8: flecha visual de la columna LADO (BUY/SELL). El color
 * lo aporta el <td class="profit|loss"> padre; aqui solo escalamos. */
.side-arrow {
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    letter-spacing: 0;
}

/* FASE 3: tags de estado Binance Spot Testnet. Cinco familias
 * visuales: filled (verde), pending (ambar), rejected (rojo),
 * cancel (rojo tenue), paper (gris — sin ejecucion real). */
.bnc-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}
.bnc-filled   { color: var(--accent-neon); border-color: var(--accent-neon); background: rgba(0, 255, 153, 0.08); }
.bnc-pending  { color: #ffb347; border-color: #ffb347; background: rgba(255, 179, 71, 0.08); }
.bnc-rejected { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255, 70, 90, 0.10); }
.bnc-cancel   { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255, 70, 90, 0.04); opacity: 0.75; }
.bnc-paper    { color: var(--text-secondary); border-color: var(--border); background: transparent; }

/* Flash visual en filas de active_orders cuando llega un update RT */
@keyframes rowFlash {
    0%   { background-color: rgba(0, 255, 153, 0.18); }
    100% { background-color: transparent; }
}
tr.row-flash { animation: rowFlash 1.4s ease-out; }

/* Layout de la vista #orders: 2 cards apiladas con gap */
.orders-grid { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.orders-meta { font-size: 0.7rem; color: var(--text-secondary); }

@media (max-width: 768px) {
    table { font-size: 0.68rem; }
    th, td { padding: 7px 6px; }
}