/* === Stardew Valley Value Guide === */

:root {
  --q-silver: #8e98a6;
  --q-gold: #d6a32e;
  --q-irid: #9b6dd6;
  --q-irid-bg: #efe6fb;
  --gain: #3a9d6e;

  /* tab bar accent, consumed by stardew-common.css */
  --tab-bg: var(--pick-bg);
  --tab-accent: var(--pick-border);
  --tab-text: var(--primary-dark);
}

/* differs from stardew-common.css */
.tab { min-width: 90px; padding: 0.5rem 0.9rem; font-size: 0.95rem; }

/* Wider page so the data tables can show every column on desktop; text stays readable. */
main { max-width: 960px; }
.subtitle, .profit-basis, .sub-desc, .table-foot { max-width: 660px; }

/* --- Sub-tabs (the shared tab bar lives in stardew-common.css) --- */
.tabs.subtabs {
  margin-bottom: 0.75rem;
  box-shadow: none;
  background: #fffaf5;
}

/* --- Filters --- */
.sdv-search {
  width: 100%;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.9rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  font: inherit;
  background: var(--card);
  transition: border-color 0.15s ease;
}
.sdv-search:focus { outline: none; border-color: var(--primary); }

.filter-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.filter-label {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
  min-width: 86px;
}
.filter-row .options { flex: 1; gap: 0.4rem; }

.filter-row .pill {
  padding: 0.34rem 0.8rem;
  font-size: 0.85rem;
}
/* profession pills carry a tiny tooltip via title; tint when active */
.pill.prof.picked {
  background: #e7f4ee;
  border-color: var(--gain);
  color: #277552;
}

/* quality selector pills, tinted by tier when active */
.pill.q-pill.picked.q-reg    { background: #eef0f4; border-color: var(--ink); color: var(--ink); }
.pill.q-pill.picked.q-silver { background: #eef1f5; border-color: var(--q-silver); color: var(--q-silver); }
.pill.q-pill.picked.q-gold   { background: #fdf3da; border-color: var(--q-gold); color: #9a6a00; }
.pill.q-pill.picked.q-irid   { background: var(--q-irid-bg); border-color: var(--q-irid); color: var(--q-irid); }

/* clickable price rows */
.sdv-table tr.clickable { cursor: pointer; }
.go {
  color: var(--border);
  font-weight: 700;
  margin-left: 0.4rem;
  transition: color 0.12s ease, transform 0.12s ease;
  display: inline-block;
}
.sdv-table tr.clickable:hover .go { color: var(--primary); transform: translateX(2px); }
.price-cell { font-weight: 700; color: var(--primary-dark); }
.price-cell.botanist::after { content: " ✦"; color: var(--q-irid); font-size: 0.8em; }

/* back link */
.link-back {
  background: none;
  border: none;
  padding: 0.2rem 0;
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  width: auto;
}
.link-back:hover { color: var(--primary-dark); transform: none; border: none; }

/* detail header + price chips */
.detail-head { margin: 0.25rem 0 1rem; }
.detail-head h2 {
  margin: 0 0 0.2rem;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--primary-dark);
}
.detail-meta { margin: 0; color: var(--muted); font-size: 0.95rem; }

.price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.5rem;
}
.chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  min-width: 74px;
}
.chip.picked { border-color: var(--pick-border); box-shadow: 0 2px 8px rgba(255,107,157,0.18); }
.chip .chip-q { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.chip .chip-v {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chip.q-silver .chip-v { color: var(--q-silver); }
.chip.q-gold .chip-v { color: var(--q-gold); }
.chip.q-irid .chip-v { color: var(--q-irid); }
.chip-note { color: var(--muted); font-size: 0.82rem; }
.no-proc { background: #fffaf5; border: 2px dashed var(--border); border-radius: 14px; padding: 0.9rem 1.1rem; }

/* --- Table --- */
.table-wrap {
  margin-top: 1rem;
  border: 2px solid var(--border);
  border-radius: 16px;
  overflow: auto;
  background: var(--card);
  box-shadow: var(--shadow);
  max-height: 70vh;
}
.sdv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.sdv-table th,
.sdv-table td {
  padding: 0.5rem 0.7rem;
  text-align: left;
}
.sdv-table th.num, .sdv-table td.num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.sdv-table .cell-days { white-space: nowrap; }
.sdv-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff4ef;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--border);
  font-size: 0.82rem;
}
.sdv-table th.sortable { cursor: pointer; user-select: none; }
.sdv-table th.sortable:hover { color: var(--primary-dark); }
.sdv-table th.sorted::after { content: " \25BE"; color: var(--primary); }
.sdv-table th.sorted.asc::after { content: " \25B4"; }

.sdv-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s ease; }
.sdv-table tbody tr:last-child { border-bottom: none; }
.sdv-table tbody tr:hover { background: #fff7f2; }

.item-name { font-weight: 700; color: var(--ink); }
.tag-forage {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0 0.25rem;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cell-loc { color: var(--muted); font-size: 0.82rem; white-space: normal; }
.cell-days { color: var(--muted); font-size: 0.82rem; }

.q-reg  { color: var(--ink); }
.q-silver { color: var(--q-silver); }
.q-gold { color: var(--q-gold); font-weight: 700; }
.q-irid { color: var(--q-irid); }
td.q-irid.guaranteed { background: var(--q-irid-bg); font-weight: 700; border-radius: 6px; }
.dash { color: var(--border); }
.boosted { position: relative; }
.boosted::after {
  content: "▲";
  font-size: 0.55em;
  color: var(--gain);
  margin-left: 0.15rem;
  vertical-align: super;
}

.table-foot { color: var(--muted); font-size: 0.8rem; margin: 0.6rem 0 0; }
.empty-note { color: var(--muted); text-align: center; padding: 1.5rem 0; }

/* --- Best way to sell --- */
.sdv-select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  font: inherit;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.sdv-select:focus { outline: none; border-color: var(--primary); }

.prof-inline { margin-top: 0.85rem; gap: 0.4rem; }
.prof-inline .pill { font-size: 0.85rem; padding: 0.34rem 0.8rem; }

.sell-method {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.6rem;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.sell-method .m-name {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.sell-method .m-sub { color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; }
.sell-method .m-value {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sell-method .m-value small { font-size: 0.6em; color: var(--muted); font-weight: 600; }
.sell-method .bar {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: var(--pick-bg);
  overflow: hidden;
}
.sell-method .bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  transition: width 0.4s cubic-bezier(0.17,0.89,0.32,1.0);
}
.sell-method.best {
  border-color: var(--q-gold);
  box-shadow: 0 6px 20px rgba(214,163,46,0.28);
}
.sell-method.best .m-value { color: var(--q-gold); }
.sell-method.best .bar > span { background: linear-gradient(90deg, #f0c75a, var(--q-gold)); }
.best-badge {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--q-gold);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
}
.sell-head {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0.5rem 0 1rem;
  color: var(--ink);
}
.proc-caption {
  margin: -0.6rem 0 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.proc-caption strong { color: var(--primary-dark); }
.sell-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.4rem 0 0;
  line-height: 1.45;
}

/* --- Profitability --- */
.sub-desc { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.5rem; line-height: 1.45; }
.profit-basis {
  background: var(--q-irid-bg);
  border: 1px solid #d9c6f0;
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  color: #5a4576;
  line-height: 1.45;
}
.profit-basis strong { color: var(--q-irid); }
.sdv-table td.rank { color: var(--muted); font-weight: 700; width: 1.5rem; text-align: right; }
.sdv-table tbody tr.top td { background: #fffaf0; }
.sdv-table tbody tr.top td.metric { color: var(--q-gold); font-weight: 700; }
.metric { font-weight: 700; color: var(--primary-dark); }
.season-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.s-spring { background: #e7f4ee; color: #277552; }
.s-summer { background: #fff0cc; color: #9a6a00; }
.s-fall   { background: #ffe2d4; color: #b04a23; }
.s-winter { background: #e2eef6; color: #2f6c93; }
.s-other  { background: var(--pick-bg); color: var(--primary-dark); }

/* --- Frozen label column(s): the item name stays put when scrolling right --- */
#prices-table th.freeze-name, #prices-table td.freeze-name,
#profit-table th.rank, #profit-table td.rank,
#profit-table th.freeze-name, #profit-table td.freeze-name {
  position: sticky;
}
#prices-table td.freeze-name,
#profit-table td.rank, #profit-table td.freeze-name {
  background: var(--card);
  z-index: 1;
}
#prices-table th.freeze-name, #prices-table td.freeze-name { left: 0; }
#profit-table th.rank, #profit-table td.rank {
  left: 0; width: 2.6rem; min-width: 2.6rem;
  padding-left: 0.55rem; padding-right: 0.35rem;
}
#profit-table th.freeze-name, #profit-table td.freeze-name { left: 2.6rem; }
#prices-table thead th.freeze-name,
#profit-table thead th.rank,
#profit-table thead th.freeze-name { z-index: 3; }
#prices-table tbody tr:hover td.freeze-name,
#profit-table tbody tr:hover td.rank,
#profit-table tbody tr:hover td.freeze-name { background: #fff7f2; }
#profit-table tbody tr.top td.rank,
#profit-table tbody tr.top td.freeze-name { background: #fffaf0; }
#prices-table th.freeze-name, #prices-table td.freeze-name,
#profit-table th.freeze-name, #profit-table td.freeze-name {
  border-right: 1px solid var(--border);
}

@media (max-width: 500px) {
  .sdv-table { font-size: 0.82rem; }
  .sdv-table th, .sdv-table td { padding: 0.4rem 0.5rem; }
  .filter-label { min-width: 100%; }
  .tab { font-size: 0.88rem; padding: 0.45rem 0.6rem; min-width: 0; }
  .th-days, .cell-days { display: none; }
  .sell-method .m-value { font-size: 1.25rem; }
}

/* === Expandable processed-item detail === */
.sdv-table tr.expandable { cursor: pointer; }
.sdv-table tr.expandable:hover td { background: var(--pick-bg); }
.exp-caret {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--primary);
  font-size: 0.8em;
  transition: transform 0.15s ease;
}
.sdv-table tr.open .exp-caret { transform: rotate(90deg); }
.sdv-table tr.open td { background: var(--pick-bg); }
#profit-table tbody tr.expandable:hover td.rank,
#profit-table tbody tr.expandable:hover td.freeze-name,
#profit-table tbody tr.open td.rank,
#profit-table tbody tr.open td.freeze-name { background: var(--pick-bg); }

.detail-row td {
  padding: 0 !important;
  background: var(--bg);
  border-bottom: 2px solid var(--pick-border);
}
.proc-detail {
  position: sticky;
  left: 0;
  width: min(680px, 92vw);
  padding: 1rem 1.1rem 1.1rem;
  box-sizing: border-box;
}
.pd-title {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 0.75rem;
}

.pstages {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.pstage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0.45rem 0.7rem;
}
.pstage.total { background: var(--pick-bg); border-color: var(--pick-border); }
.pstage-days {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.05rem;
  line-height: 1.1;
}
.pstage-name { font-size: 0.85rem; font-weight: 600; }
.pstage-note { font-size: 0.72rem; color: var(--muted); }
.pstage-plus { align-self: center; color: var(--muted); font-weight: 700; padding: 0 0.1rem; }

.pc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.4rem;
}
.pc {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}
.pc-k { color: var(--muted); font-weight: 600; }
.pc-v { font-weight: 700; text-align: right; }
.pc-v small { font-weight: 600; color: var(--muted); font-size: 0.8em; }
.pc.hl .pc-v { color: var(--primary-dark); }
.pd-foot { margin: 0.85rem 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }

@media (max-width: 560px) {
  .pc-grid { grid-template-columns: 1fr; gap: 0.1rem; }
  .proc-detail { padding: 0.85rem 0.9rem 1rem; }
}


/* --- Print button --- */
.print-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--btn);
  color: var(--muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.print-btn:hover { border-color: var(--primary); color: var(--primary-dark); }

/* ===================================================================
   DARK-MODE OVERRIDES
   Light mode above is untouched. These blocks only fix hardcoded
   light backgrounds / dark text that break readability in dark mode.
   Palette: --card #45203f, --btn #5e2d56, --ink #f0ecf6,
   --muted #b1a6c8, --primary-dark #e98cbb, --pick-bg #281f47.
   =================================================================== */

/* Subtabs: hardcoded light #fffaf5 → use the dark card surface */
html.dark .tabs.subtabs { background: var(--card); }

/* .go arrow & .dash placeholder use var(--border) #322b56 which is nearly
   invisible on the dark --card #45203f surface → lift to --muted */
html.dark .go,
html.dark .dash { color: var(--muted); }

/* Profession pill (active): light green chip + dark green text → dark green chip + light green text */
html.dark .pill.prof.picked {
  background: rgba(58,157,110,0.22);
  border-color: var(--gain);
  color: #7fd6a6;
}

/* Quality selector pills (active): light tier chips → dark tinted chips with light text */
html.dark .pill.q-pill.picked.q-reg    { background: rgba(240,236,246,0.14); border-color: var(--ink);      color: var(--ink); }
html.dark .pill.q-pill.picked.q-silver { background: rgba(142,152,166,0.20); border-color: var(--q-silver); color: #c4ccd6; }
html.dark .pill.q-pill.picked.q-gold   { background: rgba(214,163,46,0.20);  border-color: var(--q-gold);   color: #e6bf57; }
html.dark .pill.q-pill.picked.q-irid   { background: rgba(155,109,214,0.24); border-color: var(--q-irid);   color: #c4a3ec; }

/* Iridium-quality text needs a lighter shade to read on dark surfaces */
html.dark .q-irid,
html.dark .chip.q-irid .chip-v,
html.dark .price-cell.botanist::after { color: #c4a3ec; }
/* Guaranteed iridium cell: light --q-irid-bg → dark violet tint */
html.dark td.q-irid.guaranteed { background: rgba(155,109,214,0.20); }

/* "No processing" note: hardcoded light #fffaf5 → dark page tint */
html.dark .no-proc { background: var(--pick-bg); }

/* Table header: hardcoded light #fff4ef → dark btn surface so it stands apart from cells */
html.dark .sdv-table thead th { background: var(--btn); }

/* Row hover: hardcoded light #fff7f2 → dark indigo highlight */
html.dark .sdv-table tbody tr:hover { background: var(--pick-bg); }
html.dark #prices-table tbody tr:hover td.freeze-name,
html.dark #profit-table tbody tr:hover td.rank,
html.dark #profit-table tbody tr:hover td.freeze-name { background: var(--pick-bg); }

/* Profit-basis callout: light --q-irid-bg + dark #5a4576 text → dark violet tint + light text */
html.dark .profit-basis {
  background: rgba(155,109,214,0.16);
  border-color: var(--q-irid);
  color: var(--ink);
}
html.dark .profit-basis strong { color: #c4a3ec; }

/* Top-ranked profit rows: hardcoded light #fffaf0 → subtle gold-tinted dark */
html.dark .sdv-table tbody tr.top td { background: rgba(214,163,46,0.12); }
html.dark #profit-table tbody tr.top td.rank,
html.dark #profit-table tbody tr.top td.freeze-name { background: rgba(214,163,46,0.12); }
html.dark .sdv-table tbody tr.top td.metric { color: #e6bf57; }

/* Season pills: light seasonal chips + dark text → dark seasonal chips + light text,
   keeping spring=green, summer=gold, fall=orange, winter=blue character */
html.dark .s-spring { background: rgba(58,157,110,0.22);  color: #7fd6a6; }
html.dark .s-summer { background: rgba(214,163,46,0.20);  color: #e6bf57; }
html.dark .s-fall   { background: rgba(176,74,35,0.28);   color: #f0a583; }
html.dark .s-winter { background: rgba(47,108,147,0.30);  color: #8cc2e4; }

@media print {
  @page { size: landscape; margin: 0.5cm; }
  .crumb, .tabs, .subtabs, .sdv-search, .filter-row,
  .link-back, .empty-note, .print-btn, footer { display: none !important; }
  body {
    background: #fff !important;
    padding: 0.3rem 0 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  main { max-width: none !important; }
  .header { margin-bottom: 0.4rem; }
  h1, .subtitle, .profit-basis, .table-foot { color: #000; }
  .table-wrap { overflow: visible !important; box-shadow: none !important; }
  .sdv-table { font-size: 0.72rem; box-shadow: none !important; }
  .sdv-table th, .sdv-table td { padding: 0.25rem 0.4rem; }
  .sdv-table tr { break-inside: avoid; }
  .sdv-table thead { display: table-header-group; }
  .sell-method { box-shadow: none !important; break-inside: avoid; }
}