@import "../../css/tokens.css";
@import "../../css/shell.css";

/* ---- Stock exchange deltas --------------------------------------------- */
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-checkbox-row { display: flex; align-items: center; gap: 8px; }
.admin-checkbox-row input { width: auto; }
.admin-optional-fields { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; }
.admin-optional-fields summary { cursor: pointer; color: var(--text-dim); font-size: 13px; }
.admin-optional-fields label { margin-top: 8px; }
#manage-markets-table button.halt-btn {
  padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel-bg); cursor: pointer; font-size: 12px;
}
.badge.halted { background: var(--no-bg); color: var(--no-strong); }

/* Company-logo slot -- catalog cards and the market header both use this next to a ticker. */
.ticker-logo { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Catalog v2 (2026-08-23): featured strip + Tabulator grid + search-to-add ---------------- */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.featured-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.featured-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
.featured-card-top { display: flex; align-items: center; justify-content: space-between; }
.featured-ticker { font-weight: 700; font-size: 16px; }
.featured-name { font-size: 13px; color: var(--text-dim); }
.featured-volume { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }

.grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.grid-toolbar .section-heading { margin: 0; }
.add-ticker-form { display: flex; gap: 8px; }
.add-ticker-form input {
  width: 220px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  color: var(--text);
  font-size: 13px;
}
.add-ticker-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.add-ticker-form .submit-btn { padding: 8px 16px; font-size: 13px; }
.add-ticker-error { font-size: 12px; color: var(--no-strong); min-height: 16px; margin: 6px 0 var(--space-2); }

.grid-ticker-cell { display: inline-flex; align-items: center; gap: 8px; }
.grid-ticker-symbol { font-weight: 700; }
.grid-remove-btn {
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.grid-remove-btn:hover { color: var(--no-strong); background: var(--no-bg); }
.grid-bid-col { color: var(--yes-strong); font-family: var(--mono); }
.grid-ask-col { color: var(--no-strong); font-family: var(--mono); }
#stock-grid .tabulator-cell[tabulator-field="last"] { font-family: var(--mono); }

/* Flash-on-change (marketGrid.js's flashCell()) -- a brief background flash on whichever of
   bid/ask/last just moved, green up / red down. The flash itself applies instantly (transition:
   none, so it's visible the moment the class lands); removing the class falls back to this base
   rule's own transition, fading smoothly back to the row's normal background over the same window
   the JS timer holds the flash class for. */
#stock-grid .tabulator-cell { transition: background-color 0.5s ease; }
#stock-grid .tabulator-cell.grid-flash-up { background-color: var(--yes-bg-strong); transition: none; }
#stock-grid .tabulator-cell.grid-flash-down { background-color: var(--no-bg-strong); transition: none; }

/* Tabulator ships a hardcoded light theme (no CSS custom properties to hook into) -- every rule
   below is a direct override to the same var(--x) tokens the rest of the site uses, so the grid
   still repaints correctly on the dark-mode toggle instead of staying stuck light. */
.tabulator {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.tabulator .tabulator-header {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.tabulator .tabulator-header .tabulator-col {
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-filter input {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}
.tabulator-row { background: var(--panel-bg); border-bottom: 1px solid var(--border); cursor: pointer; }
.tabulator-row.tabulator-row-even { background: var(--bg-alt); }
.tabulator-row:hover { background: var(--accent-bg); }
.tabulator-row .tabulator-cell { border-right: 1px solid var(--border); color: var(--text); }
.tabulator .tabulator-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  color: var(--text-dim);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: var(--accent-bg); }
.tabulator .tabulator-header .tabulator-col-sorter { color: var(--text-faint); }