/* Grocery Budget Calculator — shared chrome (header, nav, buttons, field-group,
   settings-section, mgmt-card, pg-modal, info-banners) comes from styles.css;
   this file only covers what's unique to this tool. */

/* ─── totals bar: two stat tiles + local currency override ─── */
.gb-summary-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

@media (min-width: 700px) {
  .gb-summary-bar {
    flex-direction: row;
    align-items: flex-start;
  }
}

.gb-stat-tile {
  flex: 1 1 0;
  min-width: 0;
}
.gb-stat-label {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.gb-stat-value {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 22px;
}
.gb-stat-sub {
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}

.gb-currency-override {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* ─── page split: add-item vs. the working list ─── */
.gb-builder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (min-width: 900px) {
  .gb-builder-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .gb-col-left {
    order: -1;
    position: sticky;
    top: 16px;
  }
}

.gb-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#gb-list-section .section-header {
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 20px;
}

/* ─── search ─── */
.gb-search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0px;
}
.gb-search-results:empty {
  margin-top: 0;
}
.gb-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.gb-search-result:hover {
  border-color: var(--accent);
}
.gb-search-result-name {
  font-size: 13px;
  font-weight: 500;
}
.gb-saved-star {
  font-size: 14px;
  color: var(--accent);
  vertical-align: -2px;
  margin-right: 3px;
}
.gb-search-result-cost {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ─── item list ─── */
#gb-item-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.gb-empty-note {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  padding: 8px 0;
}

.gb-item-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.gb-item-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gb-item-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  word-break: break-word;
}
.gb-remove-btn {
  color: var(--warn);
  cursor: pointer;
  font-size: 18px;
  flex-shrink: 0;
}

.gb-item-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px) {
  .gb-item-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gb-bulk-helper {
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}
.gb-bulk-helper-label {
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.gb-bulk-helper-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gb-bulk-helper-row .field-group {
  flex: 1 1 100px;
  min-width: 100px;
}

.gb-target-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gb-target-row input {
  width: 70px;
}
.gb-unit-toggle-btn {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
}
.gb-unit-toggle-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.gb-item-results {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.gb-item-result {
  display: flex;
  flex-direction: column;
}
.gb-item-result-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gb-item-result-value {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 15px;
}

/* ─── saved plans list ─── */
#gb-saved-plans-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
#gb-saved-plans-list .mgmt-card-actions {
  flex-wrap: wrap;
}

/* ─── print export (Export PDF button) ───────────────────────────────────
   #gb-print-area is populated with one saved plan's markup right before
   window.print() is called (see gbExportPlanPdf). It stays empty/hidden the
   rest of the time — only @media print reveals it, and only it. Colors are
   hardcoded to light/dark-text here (not var(--bg)/var(--text)) since the
   printout must stay legible regardless of which site theme is active. */
.gb-print-area {
  display: none;
}

@media print {
  html,
  body {
    background: #ffffff !important;
  }

  /* #confirm-modal and .page are both direct children of body, siblings of
     #gb-print-area (see index.html) — display:none removes them from the
     layout entirely rather than just hiding them, so the printed page's
     height matches the print area's content instead of the full app's
     height (which was producing a blank second page). */
  body > *:not(#gb-print-area) {
    display: none !important;
  }

  .gb-print-area {
    display: block;
    width: 100%;
    background: #ffffff;
    color: #111111;
    padding: 24px;
  }

  .gb-print-area h1 {
    font-family: "Syne", sans-serif;
    font-size: 22px;
    color: #111111;
    margin-bottom: 14px;
  }

  .gb-print-items {
    margin-bottom: 16px;
  }

  .gb-print-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid #cccccc;
    font-family: "DM Mono", monospace;
    font-size: 14px;
    color: #111111;
  }

  .gb-print-totals {
    padding-top: 12px;
    border-top: 2px solid #111111;
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #111111;
  }

  .gb-print-totals div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
  }
}