/* xaitpe dashboard — tweaks on top of Tailwind CDN.
   Tailwind handles layout/typography; this file adds a few small
   component-style helpers and a dark Plotly host. */

[x-cloak] { display: none !important; }

html, body {
    background: #0b0f17;
    color: #e6edf7;
}

/* Cards. Tailwind classes (`.card`) for spacing are applied inline;
   here we only set palette + border so the dashboard is consistent. */
.card {
    background: #121826;
    border: 1px solid #1f2a3d;
    border-radius: 8px;
}
.card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #1f2a3d;
}
.card-title { font-size: 0.85rem; font-weight: 600; color: #e6edf7; }
.card-body { padding: 0.75rem 1rem; }

/* KPI strip */
.kpi-label { color: #8a93a6; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-size: 1.15rem; font-weight: 600; margin-top: 0.15rem; }
.kpi-sub   { color: #8a93a6; font-size: 0.7rem; margin-top: 0.1rem; font-family: ui-monospace, monospace; }

/* Card rows */
.row-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.data-table th,
.data-table td {
    padding: 0.5rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid #1f2a3d;
    font-size: 0.78rem;
    white-space: nowrap;
}
.data-table th {
    color: #8a93a6;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #0e1422;
    position: sticky;
    top: 0;
}
.data-table tbody tr:hover { background: rgba(58, 80, 120, 0.12); }
.data-table tr:last-child td { border-bottom: none; }
.data-table .text-left { text-align: left; }

/* Status pills */
.pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-family: ui-monospace, monospace;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.pill-completed { background: rgba(34, 197, 94, 0.12);  color: #4ade80; border-color: rgba(34,197,94,0.35); }
.pill-failed    { background: rgba(239, 68, 68, 0.12);  color: #f87171; border-color: rgba(239,68,68,0.35); }
.pill-running,
.pill-started   { background: rgba(234, 179, 8, 0.12);  color: #fde047; border-color: rgba(234,179,8,0.35); }
.pill-orders_placed,
.pill-intent_persisted { background: rgba(59,130,246,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.35); }
.pill-unknown   { background: rgba(138,147,166,0.12); color: #8a93a6; border-color: rgba(138,147,166,0.35); }
.pill-unavailable { background: rgba(239, 68, 68, 0.08);  color: #f87171; border-color: rgba(239,68,68,0.25); }

/* Color helpers (Tailwind shortcuts) */
.pos     { color: #22c55e; }
.neg     { color: #ef4444; }
.dim     { color: #5a6377; }
.warn-bg { background: rgba(234, 179, 8, 0.15); }
.neg-bg  { background: rgba(239, 68, 68, 0.15); }
.pos-bg  { background: rgba(34, 197, 94, 0.15); }

/* Empty / loading states */
.empty-state {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #5a6377;
    font-size: 0.85rem;
}

/* Chart host */
.chart-host {
    width: 100%;
    height: 320px;
    min-height: 240px;
}
@media (max-width: 640px) {
    .chart-host { height: 260px; }
    .data-table th, .data-table td { padding: 0.35rem 0.5rem; font-size: 0.72rem; }
    .kpi-value { font-size: 1rem; }
}

/* Subtle scrollbars for tables on dark */
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: #2a3a55; border-radius: 3px; }