/* TW AI Grid Dashboard — frontend styles
 * Dark ops-terminal aesthetic. Everything monospace-first.
 */

:root {
	--tw-bg:        #0b0f14;
	--tw-bg-card:   #121821;
	--tw-bg-card-2: #1a212d;
	--tw-border:    #232b38;
	--tw-text:      #e6edf3;
	--tw-text-dim:  #8b96a5;
	--tw-accent:    #7cc4ff;
	--tw-green:     #3fb950;
	--tw-red:       #f85149;
	--tw-yellow:    #d29922;
	--tw-orange:    #f0883e;
	--tw-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--tw-sans:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body { background: var(--tw-bg); color: var(--tw-text); }
body { font-family: var(--tw-sans); -webkit-font-smoothing: antialiased; }

/* Topbar & footer */
.tw-aige-topbar { background: #0d131a; border-bottom: 1px solid var(--tw-border); padding: 12px 0; }
.tw-aige-topbar__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
.tw-aige-brand { margin: 0; font-size: 16px; font-family: var(--tw-mono); letter-spacing: 0.5px; }
.tw-aige-brand a { color: var(--tw-accent); text-decoration: none; }
.tw-aige-nav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.tw-aige-nav a { color: var(--tw-text-dim); text-decoration: none; font-size: 14px; }
.tw-aige-nav a:hover { color: var(--tw-text); }
.tw-aige-footer { border-top: 1px solid var(--tw-border); margin-top: 40px; padding: 16px 0; }
.tw-aige-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; color: var(--tw-text-dim); }

/* Container & hero */
.tw-aige-main { padding: 24px 0 48px; }
.tw-aige-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.tw-aige-hero { padding: 24px 0 20px; border-bottom: 1px solid var(--tw-border); margin-bottom: 24px; }
.tw-aige-hero__title { font-family: var(--tw-mono); font-size: 28px; margin: 0 0 8px; }
.tw-aige-hero__sub { color: var(--tw-text-dim); margin: 0; }
.tw-aige-hero__note { margin-top: 12px; }
.tw-aige-hero__note a { color: var(--tw-accent); }

/* Grid layout */
.tw-aige-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 900px) { .tw-aige-grid { grid-template-columns: 1fr; } }

/* Card */
.tw-card {
	background: var(--tw-bg-card);
	border: 1px solid var(--tw-border);
	border-radius: 8px;
	padding: 18px 20px;
	position: relative;
}
.tw-card--wide { grid-column: 1 / -1; }
.tw-card__head {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--tw-border);
}
.tw-card__title {
	margin: 0; font-size: 13px; font-family: var(--tw-mono);
	text-transform: uppercase; letter-spacing: 1px; color: var(--tw-text-dim);
}
.tw-card__actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Pills */
.tw-pill {
	display: inline-block; padding: 3px 10px; border-radius: 12px;
	font-size: 11px; font-family: var(--tw-mono); letter-spacing: 0.5px;
	background: var(--tw-bg-card-2); color: var(--tw-text); border: 1px solid var(--tw-border);
}
.tw-pill--muted { color: var(--tw-text-dim); }
.tw-pill--action { background: #1d2836; color: var(--tw-accent); border-color: #2a3b52; }
.tw-pill[data-value="OPEN_NOW"]       { background: rgba(63,185,80,.12); color: var(--tw-green);  border-color: rgba(63,185,80,.35); }
.tw-pill[data-value="NO_TRADE"],
.tw-pill[data-value="HIGH_RISK_WAIT"] { background: rgba(248,81,73,.12); color: var(--tw-red);    border-color: rgba(248,81,73,.35); }
.tw-pill[data-value="WAIT"]           { background: rgba(210,153,34,.12); color: var(--tw-yellow); border-color: rgba(210,153,34,.35); }
.tw-pill[data-value="NO_DATA"]        { background: #222;                 color: var(--tw-text-dim); }

/* Key-value lists */
.tw-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.tw-kv dt { color: var(--tw-text-dim); font-family: var(--tw-mono); font-size: 12px; }
.tw-kv dd { margin: 0; color: var(--tw-text); }
.tw-kv--cols { grid-template-columns: repeat(3, 1fr); text-align: left; }
.tw-kv--cols dt { display: block; }
.tw-kv--cols dd { display: block; font-weight: 600; }

/* Labels (small caps) */
.tw-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
	color: var(--tw-text-dim); font-family: var(--tw-mono); margin-bottom: 4px; }

/* Price block */
.tw-price { display: flex; align-items: baseline; gap: 14px; margin: 10px 0 18px; }
.tw-price__value { font-family: var(--tw-mono); font-size: 32px; font-weight: 700; color: var(--tw-text); }
.tw-price__change { font-family: var(--tw-mono); font-size: 14px; color: var(--tw-text-dim); }
.tw-price__change.is-up   { color: var(--tw-green); }
.tw-price__change.is-down { color: var(--tw-red); }

/* Signal rows */
.tw-signal__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 16px;
	padding: 12px 0;
}
.tw-signal__row + .tw-signal__row { border-top: 1px dashed var(--tw-border); }
.tw-signal__row--meta .tw-signal__block strong,
.tw-signal__row--meta .tw-signal__block span { font-size: 13px; font-weight: 500; color: var(--tw-text); }
.tw-signal__block strong { font-family: var(--tw-mono); font-size: 16px; color: var(--tw-text); display: block; }
.tw-signal__reason {
	margin: 14px 0 0; padding: 12px 14px;
	background: var(--tw-bg-card-2); border-left: 3px solid var(--tw-accent);
	color: var(--tw-text); font-style: italic; border-radius: 0 6px 6px 0;
}
.tw-signal__reasons { margin-top: 12px; }
.tw-signal__reasons summary { cursor: pointer; color: var(--tw-text-dim); font-size: 13px; }
.tw-signal__reasons ul { margin: 10px 0 0; padding-left: 20px; color: var(--tw-text); font-size: 13px; }
.tw-signal__reasons li { margin-bottom: 4px; }
.tw-signal__sub { display: block; margin-top: 2px; font-size: 11px; color: var(--tw-text-dim); font-family: var(--tw-mono); }
.tw-signal__note {
	display: none;
	margin: 12px 0 0;
	padding: 8px 12px;
	background: rgba(234, 179, 8, .08);
	border-left: 3px solid #eab308;
	border-radius: 0 6px 6px 0;
	color: var(--tw-text);
	font-size: 12px;
}
.tw-signal__note.is-visible { display: block; }
.tw-signal__note strong { color: #eab308; }

/* Signal TTL progress bar */
.tw-signal__ttl {
	--tw-ttl-pct: 0%;
	--tw-ttl-color: var(--tw-green, #22c55e);
	margin-top: 14px;
	padding: 10px 12px;
	background: var(--tw-bg-card-2);
	border-radius: 6px;
}
.tw-signal__ttl-bar {
	position: relative;
	height: 8px;
	background: var(--tw-border);
	border-radius: 4px;
	overflow: hidden;
}
.tw-signal__ttl-bar::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--tw-ttl-pct);
	background: var(--tw-ttl-color);
	border-radius: 4px;
	transition: width 0.4s linear, background-color 0.3s;
}
.tw-signal__ttl-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 6px;
	font-size: 12px;
}
.tw-signal__ttl-meta strong { font-family: var(--tw-mono); font-size: 13px; color: var(--tw-text); }
.tw-signal__ttl[data-ttl-state="healthy"]  { --tw-ttl-color: #22c55e; }
.tw-signal__ttl[data-ttl-state="caution"]  { --tw-ttl-color: #eab308; }
.tw-signal__ttl[data-ttl-state="warning"]  { --tw-ttl-color: #f97316; }
.tw-signal__ttl[data-ttl-state="critical"] { --tw-ttl-color: #ef4444; }
.tw-signal__ttl[data-ttl-state="critical"] .tw-signal__ttl-bar::before { animation: tw-ttl-pulse 1.2s ease-in-out infinite; }
.tw-signal__ttl[data-ttl-state="expired"]  { --tw-ttl-color: #6b7280; opacity: 0.6; }
.tw-signal__ttl[data-ttl-state="none"]     { opacity: 0.4; }
@keyframes tw-ttl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* KPI strip */
.tw-kpi-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}
.tw-kpi {
	background: var(--tw-bg-card);
	border: 1px solid var(--tw-border);
	border-radius: 8px;
	padding: 12px 14px;
	transition: border-color 0.2s;
}
.tw-kpi:hover { border-color: var(--tw-accent); }
.tw-kpi__label {
	display: block;
	font-size: 10.5px;
	color: var(--tw-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}
.tw-kpi__value {
	display: block;
	font-family: var(--tw-mono);
	font-size: 20px;
	color: var(--tw-text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Range visualizer */
.tw-card--range .tw-card__sub { font-size: 12px; color: var(--tw-text-dim); }
.tw-range-viz {
	--tw-band-top: 30%;
	--tw-band-bottom: 70%;
	display: flex;
	gap: 10px;
	height: 220px;
	padding: 10px 0;
}
.tw-range-viz__axis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: var(--tw-mono);
	font-size: 11px;
	color: var(--tw-text-dim);
	min-width: 70px;
}
.tw-range-viz__label--high::before { content: "▲ "; color: var(--tw-green); }
.tw-range-viz__label--low::before  { content: "▼ "; color: var(--tw-red); }
.tw-range-viz__track {
	flex: 1;
	position: relative;
	background: linear-gradient(180deg, rgba(239,68,68,.06), rgba(34,197,94,.06));
	border: 1px solid var(--tw-border);
	border-radius: 6px;
}
.tw-range-viz__band {
	position: absolute;
	left: 6px; right: 6px;
	top: var(--tw-band-top);
	bottom: calc(100% - var(--tw-band-bottom));
	background: rgba(63,185,80,.12);
	border-top: 2px solid rgba(63,185,80,.5);
	border-bottom: 2px solid rgba(63,185,80,.5);
	border-radius: 2px;
}
.tw-range-viz__marker {
	position: absolute;
	left: 0; right: 0;
	height: 0;
	border-top: 2px dashed var(--tw-accent);
	transition: top 0.6s ease;
}
.tw-range-viz__marker::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -5px;
	width: 10px; height: 10px;
	background: var(--tw-accent);
	border-radius: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 10px rgba(99,102,241,.5);
}
.tw-range-viz__price {
	position: absolute;
	right: 8px;
	top: -18px;
	background: var(--tw-bg-card-2);
	padding: 2px 8px;
	border-radius: 3px;
	font-family: var(--tw-mono);
	font-size: 12px;
	color: var(--tw-text);
	border: 1px solid var(--tw-border);
}
.tw-range-viz__invalid {
	position: absolute;
	left: 0; right: 0;
	border-top: 1px dotted #b91c1c;
}
.tw-range-viz__footer {
	display: none;
}
.tw-range-viz[data-state="below"] .tw-range-viz__marker::before { background: var(--tw-red); box-shadow: 0 0 12px rgba(239,68,68,.6); }
.tw-range-viz[data-state="above"] .tw-range-viz__marker::before { background: var(--tw-green); box-shadow: 0 0 12px rgba(34,197,94,.6); }

/* Performance feed */
.tw-feed { display: flex; flex-direction: column; gap: 4px; max-height: 400px; overflow-y: auto; }
.tw-feed__row {
	display: grid;
	grid-template-columns: 130px 85px 1fr 60px 70px 100px;
	gap: 10px;
	align-items: center;
	padding: 6px 10px;
	background: var(--tw-bg-card-2);
	border-radius: 4px;
	font-size: 12px;
	font-family: var(--tw-mono);
	border-left: 3px solid var(--tw-border);
}
.tw-feed__row--success, .tw-feed__row--expired_profit { border-left-color: var(--tw-green); }
.tw-feed__row--partial, .tw-feed__row--expired_neutral { border-left-color: #eab308; }
.tw-feed__row--expired_loss { border-left-color: #f97316; }
.tw-feed__row--invalidated { border-left-color: var(--tw-red); }
.tw-feed__row--no_entry { border-left-color: #9ca3af; opacity: 0.75; }
.tw-feed__time { color: var(--tw-text-dim); font-size: 11px; }
.tw-feed__action { font-weight: 600; }
.tw-feed__ms { color: var(--tw-text-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-feed__conf { color: var(--tw-text-dim); font-size: 11px; }
.tw-feed__pnl { text-align: right; }
.tw-feed__pnl.is-up { color: var(--tw-green); }
.tw-feed__pnl.is-down { color: var(--tw-red); }
.tw-feed__outcome {
	text-align: center;
	padding: 2px 6px;
	border-radius: 10px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #fff;
}
.tw-feed__outcome--success, .tw-feed__outcome--expired_profit { background: var(--tw-green); }
.tw-feed__outcome--partial, .tw-feed__outcome--expired_neutral { background: #eab308; }
.tw-feed__outcome--expired_loss { background: #f97316; }
.tw-feed__outcome--invalidated { background: var(--tw-red); }
.tw-feed__outcome--no_entry { background: #6b7280; }
.tw-feed__outcome--pending { background: #374151; }
.tw-feed__empty { padding: 24px; text-align: center; color: var(--tw-text-dim); font-size: 13px; display: none; }
.tw-feed__empty.is-visible { display: block; }

/* Lists (alerts) */
.tw-list { list-style: none; padding: 0; margin: 0; }
.tw-list li {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 0; border-bottom: 1px solid var(--tw-border);
	font-family: var(--tw-mono); font-size: 13px;
}
.tw-list li:last-child { border-bottom: none; }
.tw-list__type { color: var(--tw-text); }
.tw-list__price { color: var(--tw-text-dim); }

/* Tables */
.tw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tw-table th, .tw-table td {
	padding: 8px 10px; text-align: left;
	border-bottom: 1px solid var(--tw-border);
}
.tw-table th {
	font-family: var(--tw-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
	color: var(--tw-text-dim); font-weight: 500;
}
.tw-table td { color: var(--tw-text); }
.tw-table td.is-ok    { color: var(--tw-green); }
.tw-table td.is-error { color: var(--tw-red); }

/* Buttons */
.tw-btn {
	background: var(--tw-bg-card-2); color: var(--tw-text);
	border: 1px solid var(--tw-border); border-radius: 6px;
	padding: 8px 14px; font-family: var(--tw-mono); font-size: 12px;
	letter-spacing: 0.5px; cursor: pointer; transition: background .15s;
}
.tw-btn:hover { background: #222a38; }
.tw-btn:disabled { opacity: .5; cursor: not-allowed; }
.tw-btn--primary { background: var(--tw-accent); color: #0a0f18; border-color: var(--tw-accent); font-weight: 600; }
.tw-btn--primary:hover { background: #9cd1ff; }

/* Empty states */
.tw-empty { color: var(--tw-text-dim); font-style: italic; margin: 10px 0 0; font-size: 13px; }

/* Hidden by default bind-show; JS toggles .is-visible */
[data-bind-show] { display: none; }
[data-bind-show].is-visible { display: block; }

/* Blink when freshly updated */
@keyframes twPulse { 0% { background: rgba(124,196,255,.18); } 100% { background: transparent; } }
.is-updated { animation: twPulse 1s ease-out; }