/* Halldin & Co Sourcing Console -- Silver section. Design tokens
   (palette/type) live in halldin-tokens.css, shared verbatim across every
   Halldin section (see that file's own header for why it's a documented
   copy, not a live cross-app import) -- imported here, everything below is
   this section's own component styling built on those tokens, mirroring
   diamond_sourcing's own style.css component-for-component so the two
   sections read as one product. Every selector below is a real, existing
   hook app.js already reads/sets (classList, className, getElementById) --
   restyled in place, none renamed, so this file changed with zero JS
   changes required. */
@import url("halldin-tokens.css");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

body:has(#login-view:not(.hidden)) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none !important;
}

/* -- Login -- */
#login-view {
  width: 100%;
  max-width: 340px;
  padding: 0 1.5rem;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 8px;
}

#login-form h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
  text-align: center;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
}

#login-form input {
  padding: 0.65rem 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--ground);
  color: var(--ink);
  font-size: 1rem;
  font-family: var(--font-ui);
}

#login-form input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

#login-form button {
  padding: 0.65rem 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #1c2b1f;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

#login-form button:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.error {
  color: var(--critical);
  font-size: 0.875rem;
  min-height: 1.25rem;
  margin: 0;
  text-align: center;
}

/* -- App shell: fixed sidebar + scrolling main content -- */
#app-view {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}

.sidebar {
  background: linear-gradient(180deg, #0c2419 0%, var(--ground) 100%);
  border-right: 1px solid var(--surface-line);
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 6px;
  text-decoration: none;
  cursor: pointer;
}

.brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  color: var(--gold-bright);
  line-height: 1.15;
}

.brand-word small {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-top: 3px;
}

nav.tabs {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

nav.tabs .nav-label {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 10px 8px;
  margin-top: 14px;
}

nav.tabs .nav-label:first-child {
  margin-top: 0;
}

.tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 3px;
  border: none;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  color: var(--ink-dim);
  cursor: pointer;
}

.tab-btn:hover {
  background: rgba(198, 161, 91, 0.07);
  color: var(--ink);
}

.tab-btn.active {
  background: var(--surface-raised);
  color: var(--gold-bright);
}

.tab-btn.active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}

.sidebar-foot {
  margin-top: auto;
  padding: 12px 10px 0;
  border-top: 1px solid var(--surface-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#logout-btn {
  align-self: flex-start;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: var(--font-ui);
}

#logout-btn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.switch-section-link {
  align-self: flex-start;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: var(--font-ui);
  text-decoration: none;
}

.switch-section-link:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(198, 161, 91, 0.07);
}

main {
  padding: 24px 32px 56px;
  min-width: 0;
}

/* -- Generic buttons: scrape controls, filter/apply, market-card actions,
   modal actions, purchase-row actions -- one shared look across every
   plain <button>, so the redesign doesn't need each caller's class renamed. */
.topbar button,
.filters button,
.scrape-control button,
.market-card button,
.calc-form button[type="submit"],
.modal-actions button,
.purchase-action-btn {
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-ui);
}

.topbar button:hover,
.filters button:hover,
.market-card button:hover,
.modal-actions button:hover,
.purchase-action-btn:hover {
  background: var(--surface-raised);
  color: var(--ink);
}

/* Primary action per surface -- Start Scrape, Apply filters, Solve/
   Calculate, Log Purchase -- the single gold-filled CTA, matching Diamond's
   scrape-control button and login button treatment. */
.scrape-control button,
.filters button[type="submit"],
.calc-form button[type="submit"],
#purchase-modal-confirm {
  border-color: var(--gold);
  background: var(--gold);
  color: #1c2b1f;
  font-weight: 600;
}

.scrape-control button:hover,
.filters button[type="submit"]:hover,
.calc-form button[type="submit"]:hover,
#purchase-modal-confirm:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.scrape-control button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-raised);
  border-color: var(--surface-line);
  color: var(--ink-muted);
}

.scrape-error {
  color: var(--critical);
}

.scrape-success {
  color: var(--positive);
}

/* -- Top strip: scrape controls -- */
.scrape-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

/* Block-level banners, not inline text -- these two states are meant to be
   unmissable, not just a colored word in a status line you could skim. */
.scrape-blocked,
.scrape-cooldown {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  font-weight: 600;
}

.scrape-blocked {
  background: var(--critical-bg);
  border: 1px solid var(--critical);
  color: var(--critical);
}

.scrape-cooldown {
  background: var(--attention-bg);
  border: 1px solid var(--attention);
  color: var(--attention);
}

/* Deliberately styled to look like a warning, not a normal action button --
   this bypasses a safeguard, and should never visually read as routine. */
.scrape-override-btn {
  border-color: var(--critical) !important;
  background: transparent !important;
  color: var(--critical) !important;
}

.scrape-override-btn:hover {
  background: var(--critical-bg) !important;
}

.abort-scrape-btn {
  border-color: var(--attention) !important;
  background: transparent !important;
  color: var(--attention) !important;
}

.abort-scrape-btn:hover {
  background: var(--attention-bg) !important;
}

/* Informational, not alarming -- "there's newer data" is routine, not a
   warning -- so its own dusty-blue tone rather than the amber
   scrape-cooldown "caution" meaning, though same block-banner treatment
   for visibility. */
.favorites-newer-data-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  background: var(--info-bg);
  border: 1px solid var(--info);
  color: var(--info);
  font-weight: 600;
}

.favorites-newer-data-banner button {
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--info);
  background: var(--surface);
  color: var(--info);
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-ui);
}

.favorites-newer-data-banner button:hover {
  background: var(--info-bg);
}

.spinner {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--surface-line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.editable-value {
  cursor: pointer;
  border-bottom: 1px dashed var(--ink-muted);
  padding-bottom: 1px;
}

.editable-value:hover {
  border-bottom-color: var(--ink);
}

/* A correction that's actually been made (persisted), distinct from the
   default/uncorrected value every other cell shows. */
.editable-value.value-corrected {
  color: var(--info);
  font-weight: 600;
  border-bottom-style: solid;
}

.editable-input {
  width: 4.5rem;
  padding: 0.2rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--gold);
  background: var(--ground);
  color: var(--ink);
}

/* Chip-styled status cells -- worthBiddingClass() in app.js sets
   worth-buy/worth-pass/worth-missing-data/worth-closed directly on the
   <td>, mirroring SilverMathPipeline's own xlsx conditional formatting
   (GREEN/RED/YELLOW/GREY) -- reused here as-is, restyled from bare colored
   text to a tinted, rounded cell so status reads as a glanceable chip, the
   same treatment Diamond's confidence-*/reserve-* cells use. */
.worth-buy,
.worth-pass,
.worth-missing-data,
.worth-closed,
.reserve-met,
.reserve-not-met {
  display: inline-block;
  border-radius: 999px !important;
  padding: 0.15rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
}

.worth-buy { background: var(--positive-bg) !important; color: var(--positive) !important; }
.worth-pass { background: var(--critical-bg) !important; color: var(--critical) !important; }
.worth-missing-data { background: var(--attention-bg) !important; color: var(--attention) !important; }
.worth-closed { background: var(--neutral-bg) !important; color: var(--ink-muted) !important; font-weight: 500; }

.reserve-met { background: var(--positive-bg) !important; color: var(--positive) !important; }
.reserve-not-met { background: var(--attention-bg) !important; color: var(--attention) !important; }

.no-longer-profitable {
  color: var(--critical);
  font-weight: 600;
  font-size: 0.8rem;
}

/* -- Filters (Results tab) -- Silver's own static form, restyled with the
   same tightened layout language as Diamond's dynamically-built
   .filters-panel/.filter-field (both classes are present on this markup;
   see index.html), not renamed since app.js reads these fields by id, not
   by their wrapper class. -- */
.filters,
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  align-items: flex-end;
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

.filter-group,
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.filter-group label,
.filter-field label {
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}

.filter-group input[type="number"] {
  padding: 0.32rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--ground);
  color: var(--ink);
  width: 6.2rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
}

.filter-group input:focus {
  outline: 1.5px solid var(--gold);
  outline-offset: 0;
}

.category-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  max-width: 20rem;
}

.category-group legend {
  width: 100%;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  padding: 0;
}

.category-group label {
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--ink-dim);
}

#results-summary {
  color: var(--ink-muted);
  font-size: 0.83rem;
  margin: 0 0 0.85rem;
}

.sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
  white-space: nowrap;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

.status-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
  margin-bottom: 0.75rem;
}

.status-filter label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.status-hidden {
  display: none;
}

.group-header-row td {
  background: var(--surface-raised);
  color: var(--ink-dim);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--surface-line);
  border-bottom: 1px solid var(--surface-line);
}

/* -- Tables -- */
.table-wrap {
  overflow-x: auto;
  scrollbar-width: auto;
  scrollbar-color: var(--surface-line) var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

.table-wrap::-webkit-scrollbar {
  height: 11px;
}

.table-wrap::-webkit-scrollbar-track {
  background: var(--surface);
}

.table-wrap::-webkit-scrollbar-thumb {
  background: var(--surface-line);
  border-radius: 6px;
  border: 2px solid var(--surface);
}

.table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

.lot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.81rem;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}

.lot-table th,
.lot-table td {
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--surface-line);
  text-align: left;
  white-space: nowrap;
}

.lot-table th {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
  position: sticky;
  top: 0;
  background: var(--surface-raised);
  border-top: none;
  border-bottom: 1.5px solid var(--gold);
}

/* A real, concrete background (not "no rule at all") -- the frozen
   heart/Lot# columns below inherit THIS value via background-color:
   inherit, so scrolled-under column content doesn't show through behind
   them. Diamond's own table has no such frozen columns and so never needed
   this; dropping it here (e.g. reintroducing zebra striping) would silently
   reopen that bleed-through bug on this table specifically. */
.lot-tbody tr {
  background: var(--surface);
}

.lot-tbody tr:hover td {
  background: rgba(198, 161, 91, 0.045);
}

/* Frozen left pane (heart / Lot #) on the wide Results/Favorites/Ended
   tables -- so which row you're looking at stays visible while scrolling
   right through Bid/Cost/Profit/etc. A Silver-specific feature Diamond
   doesn't have; kept exactly as-is, just recolored onto the new tokens.
   background-color: inherit pulls the row's own hover tint so a
   horizontally-scrolled column never shows through underneath it. */
#results-table td:nth-child(1),
#results-table th:nth-child(1),
#favorites-table td:nth-child(1),
#favorites-table th:nth-child(1),
#ended-table td:nth-child(1),
#ended-table th:nth-child(1) {
  position: sticky;
  left: 0;
  width: 2.2rem;
  z-index: 1;
  background-color: inherit;
}

#results-table td:nth-child(2),
#results-table th:nth-child(2),
#favorites-table td:nth-child(2),
#favorites-table th:nth-child(2),
#ended-table td:nth-child(2),
#ended-table th:nth-child(2) {
  position: sticky;
  left: 2.2rem;
  width: 6rem;
  z-index: 1;
  background-color: inherit;
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.6);
}

#results-table th:nth-child(1),
#results-table th:nth-child(2),
#favorites-table th:nth-child(1),
#favorites-table th:nth-child(2),
#ended-table th:nth-child(1),
#ended-table th:nth-child(2) {
  z-index: 2;
  background: var(--surface-raised);
}

#results-table td:nth-child(3),
#favorites-table td:nth-child(3),
#ended-table td:nth-child(3) {
  white-space: normal;
  min-width: 18rem;
}

.heart-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
  color: var(--ink-muted);
}

.heart-btn.favorited {
  color: var(--critical);
}

.heart-btn:hover {
  color: var(--critical);
}

.won-it-btn {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--positive);
  background: transparent;
  color: var(--positive);
  cursor: pointer;
  font-size: 0.75rem;
  white-space: nowrap;
}

.won-it-btn:hover {
  background: var(--positive-bg);
}

/* Dim by default -- barely-there until you look for it -- and full opacity
   once a note actually exists, so a glance at the table shows which rows
   have one without opening anything. */
.note-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0 0.25rem;
  opacity: 0.3;
  vertical-align: middle;
  color: var(--ink);
}

.note-icon-btn:hover {
  opacity: 0.75;
}

.note-icon-btn.has-note {
  opacity: 1;
}

.purchase-delete-btn {
  border-color: var(--critical) !important;
  color: var(--critical) !important;
}

.purchase-delete-btn:hover {
  background: var(--critical-bg) !important;
}

/* -- Calculator -- */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.1rem;
  max-width: 48rem;
}

.calc-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

.calc-form h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
  color: var(--ink);
}

.calc-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.calc-form input[type="number"] {
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--ground);
  color: var(--ink);
  font-size: 0.9rem;
  font-family: var(--font-ui);
}

.calc-form input:focus {
  outline: 1.5px solid var(--gold);
  outline-offset: 0;
}

.calc-form details {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.calc-form details summary {
  cursor: pointer;
  color: var(--info);
}

.calc-form details label {
  margin-top: 0.5rem;
}

.calc-result {
  margin-top: 0.25rem;
  font-size: 0.88rem;
}

.calc-result p {
  margin: 0.3rem 0;
}

.calc-highlight {
  color: var(--positive);
  font-weight: 600;
  font-size: 1rem;
}

.calc-warning {
  color: var(--critical);
  font-weight: 700;
}

.calc-warning-detail {
  color: var(--critical);
  opacity: 0.85;
  font-size: 0.8rem;
}

/* -- Market tab cards -- */
.market-card {
  max-width: 44rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

.market-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12rem;
  margin: 0 0 0.4rem;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.5rem;
}

#goldapi-price {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
  margin: 0 0 0.25rem;
}

.market-meta {
  color: var(--ink-muted);
  font-size: 0.79rem;
  margin: 0 0 0.6rem;
  line-height: 1.5;
}

.favorites-summary {
  color: var(--ink-muted);
  font-size: 0.83rem;
  margin: 0.5rem 0 1rem;
}

.news-card {
  max-width: 32rem;
  margin-top: 1.1rem;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.news-list li {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--surface-line);
}

.news-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-list a {
  color: var(--gold-bright);
  text-decoration: none;
  font-weight: 600;
}

.news-list a:hover {
  text-decoration: underline;
}

.news-item-meta {
  color: var(--ink-muted);
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

.news-item-desc {
  color: var(--ink-dim);
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
}

.chart-card {
  max-width: 40rem;
  margin-top: 1.1rem;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1.5rem;
}

.kpi-tile {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

.kpi-label {
  color: var(--ink-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.kpi-value {
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-top: 0.25rem;
}

.kpi-value.kpi-good {
  color: var(--positive);
}

.kpi-value.kpi-bad {
  color: var(--critical);
}

.roi-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.1rem;
}

.roi-chart-grid .chart-card {
  max-width: none;
  margin-top: 0;
}

.roi-chart-grid .chart-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: var(--ink-dim);
  border-bottom: none;
  padding-bottom: 0;
}

.chart-single-point {
  padding: 0.5rem 0;
}

.chart-single-value {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
}

.chart-wrap {
  position: relative;
}

.history-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -120%);
  background: var(--surface-raised);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  pointer-events: none;
  white-space: nowrap;
}

.chart-tooltip-date {
  color: var(--ink-muted);
}

.chart-tooltip-value {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* -- Modals (Log Purchase, Note) -- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 16, 12, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-box {
  background: var(--surface-raised);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.modal-box h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--gold-bright);
}

.modal-lot-title {
  color: var(--ink-muted);
  font-size: 0.85rem;
  margin: 0;
}

.modal-box label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.modal-box input[type="number"] {
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--ground);
  color: var(--ink);
  font-size: 0.9rem;
  font-family: var(--font-ui);
}

.modal-box textarea {
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--ground);
  color: var(--ink);
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
}

.modal-box input:focus,
.modal-box textarea:focus {
  outline: 1.5px solid var(--gold);
  outline-offset: 0;
}

#notes-modal .modal-box {
  max-width: 28rem;
}

.modal-box .error {
  text-align: left;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Fixed to the viewport, not the table -- reachable no matter how far down
   the page you're scrolled. Synced to the real table's scrollLeft in both
   directions (see refreshStickyScrollbar in app.js). */
.sticky-hscroll {
  position: fixed;
  bottom: 0;
  /* Must match main's own horizontal padding (32px each side) + .table-wrap's
     1px border, not just the sidebar width -- see diamond_sourcing's
     identical rule for the direct measurement this was confirmed against;
     same sidebar width here now that Silver has one too. */
  left: calc(var(--sidebar-width) + 33px);
  right: 33px;
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--ground);
  border-top: 1px solid var(--surface-line);
  z-index: 50;
  scrollbar-width: auto;
  scrollbar-color: var(--surface-line) var(--ground);
}

.sticky-hscroll::-webkit-scrollbar {
  height: 13px;
}

.sticky-hscroll::-webkit-scrollbar-track {
  background: var(--ground);
}

.sticky-hscroll::-webkit-scrollbar-thumb {
  background: var(--surface-line);
  border-radius: 6px;
  border: 2px solid var(--ground);
}

.sticky-hscroll::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

#sticky-hscroll-spacer {
  height: 1px;
}

@media (max-width: 980px) {
  #app-view {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  nav.tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tab-btn.active::before {
    display: none;
  }
  .sticky-hscroll {
    left: 33px;
  }
}

/* -- Phones: card view --
   Every .lot-table cell is stamped with a data-label attribute by the
   MutationObserver in app.js (setUpMobileTableLabels), sourced from that
   column's own <th> text -- turning the table into a stack of "label /
   value" cards below is pure CSS from there, no per-renderer JS changes
   needed. Nothing above this breakpoint touches the desktop layout. */
@media (max-width: 700px) {
  .table-wrap {
    overflow-x: visible;
    border: none;
  }

  .sticky-hscroll {
    display: none;
  }

  .lot-table,
  .lot-table tbody,
  .lot-table tr {
    display: block;
    width: 100%;
  }

  .lot-table thead {
    display: none;
  }

  .lot-tbody tr {
    margin-bottom: 10px;
    border: 1px solid var(--surface-line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 4px 12px;
  }

  .lot-table td {
    display: block;
    padding: 7px 0;
    border-top: none;
    border-bottom: 1px solid var(--surface-line);
    white-space: normal;
    text-align: left;
  }

  .lot-table td:last-child {
    border-bottom: none;
  }

  .lot-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-bottom: 2px;
  }

  .lot-table td:not([data-label])::before {
    content: none;
    margin-bottom: 0;
  }

  /* Results/Favorites/Ended freeze their first two columns (heart / Lot #)
     while horizontally scrolling wide desktop rows -- see that rule's own
     comment above. Once rows stack into cards there's no horizontal scroll
     left to freeze anything against, so this undoes it here specifically
     rather than trying to out-specificity those #id-scoped selectors with
     a generic .lot-table td rule. */
  #results-table td:nth-child(1),
  #results-table td:nth-child(2),
  #favorites-table td:nth-child(1),
  #favorites-table td:nth-child(2),
  #ended-table td:nth-child(1),
  #ended-table td:nth-child(2) {
    position: static;
    width: auto;
    box-shadow: none;
  }
}