/*
 * extras.css — utility classes used by our Go-generated HTML that the prebuilt
 * TailAdmin style.css did not include (Tailwind JIT only ships classes it sees
 * in its source templates, and these are generated server-side from Go).
 *
 * Loaded after style.css so we can override and add. Keep this file small and
 * focused; prefer rebuilding upstream Tailwind if it grows past a few KB.
 */

:root {
  --brand-50:  #f0f7ff;
  --brand-100: #d6e9ff;
  --brand-300: #7fb6ff;
  --brand-400: #4f93ff;
  --brand-500: #4f8cff;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
}

/* Set the root background so the body, scrollbar areas, and any
   safe-area insets all show the right colour in light and dark mode.
   Use !important to win against any Tailwind class on body/main that
   may have been generated with the same or higher specificity. */
html { background: #f9fafb; }
html.dark { background: #101828 !important; color-scheme: dark; }
html.dark body { background: #101828 !important; color: #e4e7ec; }
html.dark main { background: #101828 !important; color: #e4e7ec; }
html.dark header { background: #101828 !important; border-color: #1f2937 !important; }
html.dark aside { background: #060606 !important; border-color: #1f2937 !important; }

/* --- Solid background utilities --- */
.bg-emerald-500 { background-color: #10b981; }
.bg-emerald-600 { background-color: #059669; }
.bg-amber-500   { background-color: #f59e0b; }
.bg-amber-600   { background-color: #d97706; }
.bg-red-500     { background-color: #ef4444; }
.bg-red-600     { background-color: #dc2626; }
.bg-blue-500    { background-color: #3b82f6; }
.bg-blue-600    { background-color: #2563eb; }
.bg-brand-600   { background-color: var(--brand-600); }
.bg-brand-700   { background-color: var(--brand-700); }
.hover\:bg-brand-600:hover { background-color: var(--brand-600); }
.hover\:bg-brand-700:hover { background-color: var(--brand-700); }
.hover\:bg-emerald-600:hover { background-color: #059669; }
.hover\:bg-red-600:hover     { background-color: #dc2626; }
.hover\:bg-amber-600:hover   { background-color: #d97706; }

/* Tinted backgrounds (status pills) */
.bg-emerald-100 { background-color: #d1fae5; }
.bg-amber-100   { background-color: #fef3c7; }
.bg-red-100     { background-color: #fee2e2; }
.bg-blue-100    { background-color: #dbeafe; }
.bg-gray-100    { background-color: #f3f4f6; }
.bg-gray-50     { background-color: #f9fafb; }

/* Dark-mode pill bg (the /30 syntax doesn't compile here, define explicit alpha) */
.dark .dark\:bg-emerald-900\/30 { background-color: rgba(6,95,70,.30); }
.dark .dark\:bg-amber-900\/30   { background-color: rgba(120,53,15,.30); }
.dark .dark\:bg-red-900\/30     { background-color: rgba(127,29,29,.30); }
.dark .dark\:bg-blue-900\/30    { background-color: rgba(30,58,138,.30); }
.dark .dark\:bg-emerald-900\/20 { background-color: rgba(6,95,70,.20); }
.dark .dark\:bg-amber-900\/20   { background-color: rgba(120,53,15,.20); }
.dark .dark\:bg-red-900\/20     { background-color: rgba(127,29,29,.20); }
.dark .dark\:bg-blue-900\/20    { background-color: rgba(30,58,138,.20); }
.dark .dark\:bg-gray-900\/40    { background-color: rgba(17,24,39,.40); }
.dark .dark\:bg-gray-900\/30    { background-color: rgba(17,24,39,.30); }
.dark .dark\:bg-gray-900\/20    { background-color: rgba(17,24,39,.20); }
.bg-gray-50\/40                  { background-color: rgba(249,250,251,.40); }
.bg-brand-500\/5                 { background-color: rgba(79,140,255,.05); }
.bg-brand-500\/10                { background-color: rgba(79,140,255,.10); }
.bg-brand-500\/20                { background-color: rgba(79,140,255,.20); }
.hover\:bg-brand-500\/5:hover    { background-color: rgba(79,140,255,.05); }

/* --- Text colour --- */
.text-emerald-500 { color: #10b981; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.dark .dark\:text-emerald-300 { color: #6ee7b7; }
.dark .dark\:text-emerald-400 { color: #34d399; }
.text-amber-500   { color: #f59e0b; }
.text-amber-700   { color: #b45309; }
.dark .dark\:text-amber-300 { color: #fcd34d; }
.text-red-500     { color: #ef4444; }
.text-red-600     { color: #dc2626; }
.text-red-700     { color: #b91c1c; }
.dark .dark\:text-red-300 { color: #fca5a5; }
.dark .dark\:text-red-400 { color: #f87171; }
.text-blue-500    { color: #3b82f6; }
.text-blue-700    { color: #1d4ed8; }
.dark .dark\:text-blue-300 { color: #93c5fd; }
.text-brand-500   { color: var(--brand-500); }
.text-brand-600   { color: var(--brand-600); }
.hover\:text-brand-500:hover { color: var(--brand-500); }

/* --- Border colour --- */
.border-emerald-200 { border-color: #a7f3d0; }
.border-amber-200   { border-color: #fde68a; }
.border-red-200     { border-color: #fecaca; }
.border-blue-200    { border-color: #bfdbfe; }
.dark .dark\:border-emerald-800 { border-color: #065f46; }
.dark .dark\:border-amber-800   { border-color: #92400e; }
.dark .dark\:border-red-800     { border-color: #991b1b; }
.dark .dark\:border-blue-800    { border-color: #1e40af; }
.hover\:border-brand-500:hover  { border-color: var(--brand-500); }

/* --- Gradient utilities used by hero cards and quick actions --- */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}
.from-brand-500 { --tw-gradient-from: var(--brand-500); }
.from-brand-600 { --tw-gradient-from: var(--brand-600); }
.to-brand-600   { --tw-gradient-to:   var(--brand-600); }
.to-brand-700   { --tw-gradient-to:   var(--brand-700); }
.hover\:from-brand-600:hover { --tw-gradient-from: var(--brand-600); }
.hover\:to-brand-700:hover   { --tw-gradient-to:   var(--brand-700); }

/* --- Misc utilities the prebuilt CSS may not have --- */
.text-3xl   { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl   { font-size: 2.25rem;  line-height: 2.5rem; }
.font-bold  { font-weight: 700; }
.font-semibold { font-weight: 600; }
.tracking-wider { letter-spacing: 0.05em; }
.text-\[10px\] { font-size: 10px; line-height: 1.25; }
.text-\[11px\] { font-size: 11px; line-height: 1.3; }
.shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
.transition { transition: all .15s ease; }

/* even:bg-gray-50/40 — :nth-child even */
tbody tr.even\:bg-gray-50\/40:nth-child(even),
tbody tr:nth-child(even).even\:bg-gray-50\/40 { background-color: rgba(249,250,251,.40); }
.dark tbody tr:nth-child(even).dark\:even\:bg-gray-900\/20 { background-color: rgba(17,24,39,.20); }

/* peer-checked styling for the BUY/SELL toggle (the prebuilt CSS does not generate dynamic peer rules for our exact pairs) */
.peer:checked ~ div.peer-checked\:bg-emerald-500 { background-color: #10b981; color: #fff; }
.peer:checked ~ div.peer-checked\:bg-red-500     { background-color: #ef4444; color: #fff; }
.peer:checked ~ div.peer-checked\:text-white     { color: #fff; }

/* sticky table header */
thead.sticky { position: sticky; top: 0; z-index: 5; }

/* gap-px (1px grid gap used by watchlist preview grid) */
.gap-px { gap: 1px; }

/* =====================================================================
 * Trader dashboard layout — purpose-built classes, no Tailwind grid.
 * The prebuilt TailAdmin CSS does not include grid-cols-4..11 or any of
 * their responsive variants, so we use flexbox here instead of fighting
 * the framework.
 * ===================================================================== */

/* Strip of small stat cards — wraps automatically, each card is a fixed
   minimum width and grows to fill the row. */
.td-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.td-strip > * {
  flex: 1 1 140px;   /* min width 140px, grow to fill row */
  min-width: 0;
}

/* Three-column work area: 2 stretchable cards + a narrower right rail.
   Stacks on narrow screens; balances on wide. */
.td-work {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.td-work > .td-pane    { flex: 1 1 360px; min-width: 0; }
.td-work > .td-rail    { flex: 0 1 280px; min-width: 0; }

/* Small KPI tile reused for both indices and KPIs in the strip. */
.td-tile {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
}
.dark .td-tile { background: #000; border-color: #1f2937; }
.td-tile .td-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.td-tile .td-value { font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; margin-top: 2px; color: #111827; }
.dark .td-tile .td-value { color: #f9fafb; }
.td-tile .td-sub   { font-size: 10px; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-tile .td-row   { display: flex; align-items: baseline; gap: 6px; }
.td-tile .td-row .td-value { font-size: 14px; }
.td-tile .td-row .td-delta { font-size: 11px; font-family: ui-monospace, monospace; }
.td-up   { color: #10b981; }
.td-dn   { color: #ef4444; }
.td-flat { color: #6b7280; }

/* Card shell (holdings, recent orders, watchlist) */
.td-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.dark .td-card { background: #000; border-color: #1f2937; }
.td-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.dark .td-card-head { border-color: #1f2937; }
.td-card-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #4b5563; }
.dark .td-card-title { color: #d1d5db; }
.td-card-link  { font-size: 11px; color: var(--brand-500, #4f8cff); text-decoration: none; }
.td-card-link:hover { text-decoration: underline; }

/* Quick action button (no Tailwind gradient required) */
.td-action {
  display: block;
  background: var(--brand-500, #4f8cff);
  color: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  text-decoration: none;
  transition: background .15s;
}
.td-action:hover { background: var(--brand-600, #2563eb); }
.td-action .td-action-label  { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.td-action .td-action-title  { font-size: 14px; font-weight: 600; margin-top: 2px; display: flex; align-items: center; justify-content: space-between; }

/* Compact table inside cards */
.td-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.td-table thead th { background: #f9fafb; color: #6b7280; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; padding: 6px 10px; text-align: left; }
.dark .td-table thead th { background: #0a0a0a; color: #9ca3af; }
.td-table th.r, .td-table td.r { text-align: right; }
.td-table tbody td { padding: 6px 10px; border-top: 1px solid #f3f4f6; font-variant-numeric: tabular-nums; }
.dark .td-table tbody td { border-color: #1f2937; }
.td-table tbody tr:first-child td { border-top: 0; }
.td-table tbody tr:hover { background: rgba(79,140,255,.05); }
.td-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.td-sym  { font-weight: 600; }

/* Watchlist preview tiles (a 2-col flex inside the right rail) */
.td-wl {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: #e5e7eb;
}
.dark .td-wl { background: #1f2937; }
.td-wl > div { flex: 1 1 calc(50% - 1px); min-width: 0; background: #fff; padding: 8px 10px; }
.dark .td-wl > div { background: #000; }
.td-wl .td-wl-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.td-wl .td-wl-last { font-size: 12px; font-family: ui-monospace, monospace; margin-top: 2px; }

/* =====================================================================
 * Watchlist page — same playbook as the dashboard: dedicated tw-* classes,
 * flexbox-only layout, no Tailwind grid utilities. The prebuilt TailAdmin
 * CSS does not include grid-cols-3/4/5/6/7/8 or their responsive variants.
 * ===================================================================== */

/* Container with vertical rhythm */
.tw-page { display: flex; flex-direction: column; gap: 12px; }

/* Indices strip: 3 tiles, wraps if too narrow */
.tw-idx-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-idx-strip > * { flex: 1 1 180px; min-width: 0; }

/* One index tile (slightly larger than the dashboard tiles) */
.tw-idx {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
}
.dark .tw-idx { background: #000; border-color: #1f2937; }
.tw-idx-head { display: flex; align-items: center; justify-content: space-between; }
.tw-idx-code { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.tw-idx-breadth { font-size: 10px; color: #6b7280; }
.tw-idx-body { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.tw-idx-val { font-size: 18px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: #111827; }
.dark .tw-idx-val { color: #f9fafb; }
.tw-idx-delta { font-size: 12px; font-family: ui-monospace, monospace; }

/* Table card */
.tw-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.dark .tw-card { background: #000; border-color: #1f2937; }
.tw-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.dark .tw-card-head { border-color: #1f2937; }
.tw-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: #4b5563;
}
.dark .tw-card-title { color: #d1d5db; }
.tw-asof { font-size: 11px; color: #6b7280; }

/* "Live" pulsing dot */
.tw-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: tw-pulse 2s infinite;
}
@keyframes tw-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* Table */
.tw-table-wrap { overflow-x: auto; }
.tw-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tw-table thead th {
  background: #f9fafb;
  color: #6b7280;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 500;
  padding: 6px 12px;
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.dark .tw-table thead th { background: #0a0a0a; color: #9ca3af; }
.tw-table th.r, .tw-table td.r { text-align: right; }
.tw-table tbody td {
  padding: 6px 12px;
  border-top: 1px solid #f3f4f6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dark .tw-table tbody td { border-color: #1f2937; }
.tw-table tbody tr:first-child td { border-top: 0; }
.tw-table tbody tr:nth-child(even) td { background: rgba(249,250,251,.4); }
.dark .tw-table tbody tr:nth-child(even) td { background: rgba(17,24,39,.2); }
.tw-table tbody tr:hover td { background: rgba(79,140,255,.05); }
.tw-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tw-sym  { font-weight: 600; }
.tw-bid  { color: #059669; }
.dark .tw-bid { color: #34d399; }
.tw-ask  { color: #dc2626; }
.dark .tw-ask { color: #f87171; }
.tw-muted { color: #6b7280; }

/* Tone classes for change% */
.tw-up   { color: #10b981; }
.tw-dn   { color: #ef4444; }
.tw-flat { color: #6b7280; }

/* =====================================================================
 * Missing Tailwind spacing utilities. The prebuilt TailAdmin CSS only
 * ships a few of these; we add every one we use so vertical and
 * horizontal rhythm on every page works as expected.
 * ===================================================================== */

/* space-y-N — children get top margin equal to N*0.25rem */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-7 > * + * { margin-top: 1.75rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-2\.5 > * + * { margin-top: 0.625rem; }

/* space-x-N */
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }

/* Half-step paddings (TailAdmin 4 default scale skips these) */
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-0\.5 { padding-top: 0.125rem;  padding-bottom: 0.125rem; }
.py-1\.5 { padding-top: 0.375rem;  padding-bottom: 0.375rem; }
.py-2\.5 { padding-top: 0.625rem;  padding-bottom: 0.625rem; }
.p-2\.5  { padding: 0.625rem; }

/* Half-step margins */
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2\.5 { margin-top: 0.625rem; }

/* Top/bottom padding utilities missing from the upstream build. */
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-7 { padding-top: 1.75rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-6 { padding-left: 1.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }

/* col-span 3..6 and responsive variants */
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-full { grid-column: 1 / -1; }

/* Sizing utilities used in pulse dots / icons */
.h-1   { height: 0.25rem; }
.h-1\.5{ height: 0.375rem; }
.h-2   { height: 0.5rem; }
.h-3   { height: 0.75rem; }
.w-1   { width: 0.25rem; }
.w-1\.5{ width: 0.375rem; }
.w-2   { width: 0.5rem; }
.w-3   { width: 0.75rem; }

/* min-h-screen and similar */
.min-h-screen { min-height: 100vh; }

/* Border radius half-steps */
.rounded-full { border-radius: 9999px; }
.rounded-md   { border-radius: 0.375rem; }

/* truncate (text overflow ellipsis) */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* tracking-wider was in extras already but make sure */
.tracking-wider { letter-spacing: 0.05em; }

/* whitespace-nowrap */
.whitespace-nowrap { white-space: nowrap; }

/* =====================================================================
 * Order detail page — purpose-built od-* classes.
 * ===================================================================== */

.od-page { display: flex; flex-direction: column; gap: 16px; }

/* Hero header card */
.od-hero {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dark .od-hero { background: #000; border-color: #1f2937; }

.od-hero-left  { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
.od-hero-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Symbol icon block */
.od-sym-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; letter-spacing: .02em;
  background: #eef4ff; color: #2563eb;
}
.dark .od-sym-icon { background: rgba(37,99,235,.15); color: #93c5fd; }

.od-sym-stack { display: flex; flex-direction: column; min-width: 0; }
.od-sym       { font-size: 22px; font-weight: 700; line-height: 1.1; color: #111827; }
.dark .od-sym { color: #f9fafb; }
.od-sym-sub   { font-size: 11px; color: #6b7280; margin-top: 4px; font-family: ui-monospace, monospace; }

/* Side badge */
.od-side {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 6px;
}
.od-side-buy  { background: #d1fae5; color: #047857; }
.dark .od-side-buy  { background: rgba(6,95,70,.35); color: #6ee7b7; }
.od-side-sell { background: #fee2e2; color: #b91c1c; }
.dark .od-side-sell { background: rgba(127,29,29,.35); color: #fca5a5; }

/* Status pill (larger than the blotter pill) */
.od-status {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 6px;
  background: #f3f4f6; color: #4b5563;
}
.dark .od-status { background: #1f2937; color: #d1d5db; }
.od-status-pending  { background: #fef3c7; color: #92400e; }
.od-status-accepted, .od-status-partial { background: #dbeafe; color: #1d4ed8; }
.od-status-filled   { background: #d1fae5; color: #047857; }
.od-status-rejected { background: #fee2e2; color: #b91c1c; }
.dark .od-status-pending  { background: rgba(120,53,15,.35); color: #fcd34d; }
.dark .od-status-accepted, .dark .od-status-partial { background: rgba(30,58,138,.35); color: #93c5fd; }
.dark .od-status-filled   { background: rgba(6,95,70,.35); color: #6ee7b7; }
.dark .od-status-rejected { background: rgba(127,29,29,.35); color: #fca5a5; }

/* Hero action buttons */
.od-btn {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid #d1d5db; background: #fff; color: #111827;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.dark .od-btn { background: #000; border-color: #374151; color: #f9fafb; }
.od-btn:hover { background: #f9fafb; }
.dark .od-btn:hover { background: #111827; }
.od-btn-danger {
  background: #ef4444; border-color: #ef4444; color: #fff;
}
.od-btn-danger:hover { background: #dc2626; border-color: #dc2626; }

/* Body: 2-column. Facts on left (narrower), timeline on right (wider). */
.od-body { display: flex; flex-wrap: wrap; gap: 16px; }
.od-pane-facts { flex: 0 1 380px; min-width: 0; }
.od-pane-time  { flex: 1 1 480px; min-width: 0; }

.od-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.dark .od-card { background: #000; border-color: #1f2937; }
.od-card-head {
  padding: 10px 16px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: #4b5563;
}
.dark .od-card-head { border-color: #1f2937; color: #d1d5db; }
.od-card-body { padding: 4px 0; }

/* Facts table */
.od-facts { width: 100%; border-collapse: collapse; font-size: 13px; }
.od-facts td { padding: 9px 16px; border-top: 1px solid #f3f4f6; }
.dark .od-facts td { border-color: #1f2937; }
.od-facts tr:first-child td { border-top: 0; }
.od-facts .k { color: #6b7280; width: 40%; }
.od-facts .v { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #111827; }
.dark .od-facts .v { color: #f9fafb; }
.od-facts .v.muted { color: #6b7280; }
.od-facts .v.up    { color: #10b981; }
.od-facts .v.dn    { color: #ef4444; }

/* Timeline */
.od-timeline { position: relative; padding: 20px 22px 22px 30px; }
.od-timeline::before {
  content: "";
  position: absolute;
  left: 30px; top: 24px; bottom: 24px;
  width: 2px; background: #e5e7eb;
}
.dark .od-timeline::before { background: #1f2937; }
.od-event { position: relative; padding-left: 22px; padding-bottom: 18px; }
.od-event:last-child { padding-bottom: 0; }
.od-event-dot {
  position: absolute; left: -6px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #4f8cff; border: 3px solid #fff;
}
.dark .od-event-dot { border-color: #000; }
.od-event-dot.ok   { background: #10b981; }
.od-event-dot.warn { background: #f59e0b; }
.od-event-dot.err  { background: #ef4444; }
.od-event-dot.info { background: #4f8cff; }
.od-event-time { font-size: 11px; color: #6b7280; font-family: ui-monospace, monospace; }
.od-event-type { font-size: 13px; font-weight: 600; margin-top: 2px; color: #111827; }
.dark .od-event-type { color: #f9fafb; }
.od-event-meta { font-size: 11px; color: #6b7280; margin-top: 3px; }

/* Empty state */
.od-empty { padding: 36px 16px; text-align: center; color: #6b7280; font-size: 13px; }

/* =====================================================================
 * Order form — purpose-built of-* classes.
 * Layout: form ticket on the left (60-65% width), live summary card on
 * the right (remaining space). Roomy inputs, clear side toggle, no
 * Tailwind grid/utility guesswork.
 * ===================================================================== */

.of-page { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.of-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.of-side { flex: 0 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Ticket card */
.of-ticket {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.dark .of-ticket { background: #000; border-color: #1f2937; }

/* Big BUY / SELL header switch */
.of-side-switch {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}
.dark .of-side-switch { border-color: #1f2937; }
.of-side-opt {
  flex: 1;
  display: block;
  text-align: center;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #6b7280;
  cursor: pointer;
  background: transparent;
  transition: background .15s, color .15s;
  user-select: none;
}
.of-side-opt + .of-side-opt { border-left: 1px solid #e5e7eb; }
.dark .of-side-opt + .of-side-opt { border-color: #1f2937; }
.of-side-opt:hover { background: #f9fafb; }
.dark .of-side-opt:hover { background: #111827; }
.of-side-opt input { position: absolute; opacity: 0; pointer-events: none; }
.of-side-opt.is-buy.is-active  { background: #10b981; color: #fff; }
.of-side-opt.is-sell.is-active { background: #ef4444; color: #fff; }

/* Form body — compact, consistent rhythm */
.of-body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 12px; }

/* Field rows — label above input */
.of-row { display: flex; flex-direction: column; gap: 4px; }
.of-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
}
.dark .of-label { color: #9ca3af; }

/* Every control is the same size — one source of truth */
.of-input, .of-select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  height: 34px;
}
.dark .of-input, .dark .of-select { background: #0a0a0a; border-color: #374151; color: #f9fafb; }
.of-input:focus, .of-select:focus {
  outline: none;
  border-color: #4f8cff;
  box-shadow: 0 0 0 2px rgba(79,140,255,.18);
}
/* Symbol input keeps the uppercase/letter-spacing affordance but same dimensions. */
.of-input-sym {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Old "-lg" modifier kept as a no-op alias so any stale HTML still works. */
.of-input-lg { /* no overrides — same as .of-input */ }

/* Two-up grid for paired fields */
.of-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .of-grid-2 { grid-template-columns: 1fr; }
}

/* Estimate row — match other controls visually */
.of-est {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  height: 34px;
  box-sizing: border-box;
}
.dark .of-est { background: #0f0f0f; border-color: #1f2937; }
.of-est-label { color: #6b7280; }
.of-est-value { font-family: ui-monospace, monospace; font-weight: 600; font-size: 13px; color: #111827; }
.dark .of-est-value { color: #f9fafb; }

/* Hint line */
.of-hint { font-size: 11px; color: #6b7280; }

/* Footer action bar */
.of-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}
.dark .of-foot { border-color: #1f2937; background: #060606; }
.of-cancel { font-size: 12px; color: #6b7280; text-decoration: none; }
.of-cancel:hover { color: #111827; }
.dark .of-cancel:hover { color: #f9fafb; }
.of-submit {
  background: #4f8cff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  height: 34px;
}
.of-submit:hover { background: #2563eb; }
.of-submit:disabled { background: #9ca3af; cursor: not-allowed; }

/* Side panel cards */
.of-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
}
.dark .of-card { background: #000; border-color: #1f2937; }
.of-card-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4b5563;
  margin-bottom: 12px;
}
.dark .of-card-title { color: #d1d5db; }
.of-kv  { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; }
.of-kv .k { font-family: ui-monospace, monospace; }
.of-kv .v { color: #6b7280; }
.of-list { margin: 0; padding-left: 18px; font-size: 12px; color: #4b5563; line-height: 1.7; }
.dark .of-list { color: #d1d5db; }

/* Result banner (under the ticket) */
.of-result-ok {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.of-result-err {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #7f1d1d;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.dark .of-result-ok  { background: rgba(6,95,70,.30); border-color: #065f46; color: #6ee7b7; }
.dark .of-result-err { background: rgba(127,29,29,.30); border-color: #b91c1c; color: #fca5a5; }

/* =====================================================================
 * Autocomplete dropdown — used by the order entry symbol picker.
 * Positioned relative to a wrapping .ac-wrap.
 * ===================================================================== */

.ac-wrap { position: relative; }

.ac-list {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: none;
}
.dark .ac-list { background: #0a0a0a; border-color: #374151; box-shadow: 0 8px 24px rgba(0,0,0,.6); }

.ac-list.open { display: block; }

.ac-empty {
  padding: 14px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
}

.ac-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  border-top: 1px solid #f3f4f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.dark .ac-opt { border-color: #1f2937; }
.ac-opt:first-child { border-top: 0; }
.ac-opt:hover, .ac-opt.is-focus {
  background: rgba(79,140,255,.10);
}

.ac-opt-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  min-width: 64px;
}
.dark .ac-opt-code { color: #f9fafb; }

.ac-opt-name {
  flex: 1 1 auto;
  font-size: 12px;
  color: #4b5563;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .ac-opt-name { color: #9ca3af; }

.ac-opt-meta {
  font-size: 11px;
  color: #6b7280;
  font-family: ui-monospace, monospace;
}

.ac-tag {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  background: #dbeafe;
  color: #1d4ed8;
  letter-spacing: .03em;
  margin-left: 4px;
}
.dark .ac-tag { background: rgba(30,58,138,.35); color: #93c5fd; }
.ac-tag.cw   { background: #fef3c7; color: #92400e; }
.dark .ac-tag.cw { background: rgba(120,53,15,.35); color: #fcd34d; }
.ac-tag.etf  { background: #ede9fe; color: #6d28d9; }
.dark .ac-tag.etf { background: rgba(76,29,149,.35); color: #c4b5fd; }

/*
 * Grid columns 4/5/6/7/8 and their responsive variants — missing from the
 * upstream TailAdmin build because their source templates didn't use them.
 * Without these the browser ignores the class and the grid collapses to a
 * single column, making tiles span full width.
 */
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl\:grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .xl\:col-span-2 { grid-column: span 2 / span 2; }
  .xl\:col-span-3 { grid-column: span 3 / span 3; }
  .xl\:col-span-4 { grid-column: span 4 / span 4; }
  .xl\:col-span-5 { grid-column: span 5 / span 5; }
  .xl\:col-span-6 { grid-column: span 6 / span 6; }
}