/* prices.css - lifted verbatim from the extension's options.html inline
   <style>. Shared tokens come from theme.css. */
:root {
    --bg: #ffffff;
    --text: #1a1a1a;
    --muted: #6b6b6b;
    --border: #e4e4e4;
    --accent: #ffcc33;
    --accent-strong: #e0b400;
    --accent-ink: #1a1a1a;
    --header-bg: #1a1a1a;
    --header-text: #ffffff;
    --header-muted: #b8b8b8;
    --error: #c8102e;
    --card-bg: #fafafa;
  }
  [data-theme="dark"] {
    --bg: #1c1c1c;
    --text: #f0f0f0;
    --muted: #a0a0a0;
    --border: #333333;
    --header-bg: #0f0f0f;
    --error: #ff5c72;
    --card-bg: #262626;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
  }
  header {
    padding: 16px 24px;
    background: var(--header-bg);
    color: var(--header-text);
    border-bottom: 3px solid var(--accent);
    /* Matches catalog.css so the title sits left and the actions right,
       instead of the toggle stacking under the subtitle. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  header .version {
    font-size: 10px;
    font-weight: 400;
    color: var(--header-muted);
  }
  .header-actions {
    display: flex;
    gap: 6px;
    flex: none;
  }
  header h1 { font-size: 18px; margin: 0; letter-spacing: 0.02em; }
  header .sub { font-size: 12px; color: var(--header-muted); margin-top: 4px; }
  main {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    /* body is a flex column (.app-shell), and a flex item defaults to
       min-width:auto - so one wide descendant pushed main to 440px on a
       375px screen. It never showed before only because the page was
       overflow:hidden, which is the same rule that stopped it scrolling. */
    min-width: 0;
    width: 100%;
  }
  .card, .card * { min-width: 0; }
  /* Two columns do not fit a phone. */
  @media (max-width: 519px) {
    .mapping-row { grid-template-columns: 1fr; }
    .currency-choice { flex-wrap: wrap; gap: 10px 16px; }
  }
  /* Long placeholders and part numbers must wrap, not widen the card. */
  input[type="text"], input[type="number"], select { max-width: 100%; }
  #previewTable, #sectionTable, #unmatchedList { overflow-x: auto; }
  .card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
  }
  .card h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0 0 10px;
  }
  #currentStatus { font-size: 13px; }
  #dropZone {
    border: 2px dashed var(--accent-strong);
    border-radius: 8px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    background: rgba(255, 204, 51, 0.06);
    font-size: 14px;
    color: var(--text);
  }
  #dropZone.dragover {
    background: rgba(255, 204, 51, 0.25);
  }
  #dropZone .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
  #parseStatus {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--muted);
    min-height: 1.2em;
  }
  #parseStatus.error { color: var(--error); font-weight: 700; }
  label.field {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin: 12px 0 4px;
  }
  input[type="text"], input[type="number"], select {
    width: 100%;
    padding: 7px 9px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
  }
  #mappingCard {
    border-color: var(--accent-strong);
  }
  #mappingHint {
    font-size: 12.5px;
    margin-bottom: 10px;
  }
  .mapping-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .currency-choice {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 6px;
    font-size: 13px;
  }
  .currency-choice label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;
    cursor: pointer;
  }
  #previewTable {
    margin-top: 10px;
    overflow-x: auto;
    font-size: 11.5px;
  }
  #previewTable table {
    border-collapse: collapse;
    width: 100%;
  }
  #previewTable th, #previewTable td {
    border: 1px solid var(--border);
    padding: 4px 6px;
    text-align: left;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #previewTable th { background: rgba(255, 204, 51, 0.15); }
  #useMappingBtn {
    border: 1px solid var(--accent-strong);
    background: var(--accent);
    color: var(--accent-ink);
    margin-top: 12px;
  }
  #fxSource { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
  #summary { font-size: 13px; margin-bottom: 10px; font-weight: 700; }
  .section-row, .unmatched-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
  }
  .unmatched-row { display: block; }
  .unmatched-row.muted { color: var(--muted); }
  #sectionTable, #unmatchedList {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 6px;
  }
  details summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 10px;
  }
  .actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }
  button {
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  #applyBtn {
    border: 1px solid var(--accent-strong);
    background: var(--accent);
    color: var(--accent-ink);
  }
  #applyBtn:disabled { opacity: 0.45; cursor: default; }
  #revertBtn {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
  }
  #revertBtn:disabled { opacity: 0.45; cursor: default; }
  .privacy-note {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 18px;
    line-height: 1.5;
  }

/* ---------------------------------------------------------------------
   Settings cards, ported from the extension's options.html so the two
   pages read the same. The upload card above is unchanged; everything
   below is what moved off the catalogue's gear drawer.
   --------------------------------------------------------------------- */

  /* The extension's h2 is an uppercase section label, not a title. */
  .card h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0 0 10px;
  }
  /* A second heading inside the same card (Currency under Badges, etc.). */
  .card h2.sub-heading { margin-top: 18px; }

  .hint { font-size: 12px; color: var(--muted); line-height: 1.5; }

  /* Badge switches. Buttons rather than the extension's checkboxes: the
     catalogue already drives these three as aria-pressed buttons, and one
     control shape for one setting beats two. */
  .toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin-top: 10px;
  }
  .badge-toggle {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .badge-toggle[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent-strong);
  }
  .badge-toggle[aria-pressed="false"] { opacity: 0.6; text-decoration: line-through; }

  /* Currency, as the extension's segmented row. */
  .seg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .seg button {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: inherit;
    font-weight: 600;
  }
  .seg button.active {
    background: var(--accent);
    border-color: var(--accent-strong);
    color: var(--accent-ink);
  }

  /* Language flags, same grid the drawer used: two even rows of six. */
  /* Wraps rather than forcing six columns: at 375px six 44px targets plus
     gaps and the card's padding do not fit, and the last two spilled off
     the screen. */
  .language-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .language-flags button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
  }
  .language-flags button.active {
    border-color: var(--accent-strong);
    background: var(--accent);
  }

  /* Data & updates: label + status left, one action right. */
  #dataCard .data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--border);
  }
  #dataCard .data-row:first-of-type { border-top: 0; }
  #dataCard .data-label { font-weight: 600; font-size: 13px; }
  #dataCard .data-status { font-size: 12px; color: var(--muted); margin-top: 2px; }
  #dataCard .data-status.error { color: var(--error, #c8102e); }
  #dataCard .data-row button { flex: 0 0 auto; min-height: 44px; }

  /* Favourites manager, moved back off the catalogue drawer. */
  #favoritesList { display: flex; flex-direction: column; gap: 2px; }
  .favorites-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    font-size: 13px;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
  }
  .favorites-row:hover {
    background: rgba(255, 204, 51, 0.12);
    text-decoration: line-through;
    opacity: 0.75;
  }
  .favorites-row .favorites-row-remove { font-size: 14px; color: var(--muted); padding: 0 6px; }
  #favoritesEmpty { font-style: italic; }

  #kofiCard { text-align: center; }
  #kofiCard p { font-size: 13px; color: var(--text); }
  #uaGreeting { font-size: 16px; font-weight: 700; margin: 0 0 10px; }

/* Local ko-fi button - no third-party image request on page load. */
.kofi-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: bold;
}
.kofi-btn:hover { background: var(--accent-strong); }
.kofi-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Gear in the header, on this page too: it is the one control that is on
   every other page's header, so dropping it here made the Settings page the
   only place you could not see where you were. On this page it goes back
   rather than nowhere - options.js wires that. Colour is set explicitly:
   it is an <a>, so anything short of that leaves it the browser's link
   blue/violet. */
#advancedBtn {
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--header-text);
  text-decoration: none;
  cursor: pointer;
}
#advancedBtn:hover { border-color: var(--accent); }
#advancedBtn svg { display: block; }
#advancedBtn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }