/*
 * Farpoint Options — App Home styling.
 *
 * App Home is our own page in an iframe, so unlike a UI extension we control
 * the document. Polaris web components handle the form controls and the page
 * chrome; the data rows are ours, which is what makes drag-to-reorder, no-wrap
 * titles and the Farpoint palette possible.
 *
 * Palette taken from the live theme (config/settings_data.json):
 *   color_button / color_header  #313652   deep navy
 *   color_borders                #e8e8e1   warm grey
 *   color_savings_text           #ba4444   muted brick
 *   color_price                  #1c1d1d
 */

:root {
  --fp-navy: #313652;
  --fp-navy-tint: #eef0f5;
  --fp-navy-line: #d7dae4;
  --fp-border: #e8e8e1;
  --fp-accent: #ba4444;
  --fp-ink: #1c1d1d;
  --fp-muted: #6b7085;
  --fp-head-bg: #f6f6f4;

  /* Comfortable reading width. s-page inlineSize="large" is full-bleed, which
     leaves the action buttons stranded a long way from the names. */
  --fp-max: 1200px;
}

s-page {
  display: block;
  max-width: var(--fp-max);
  margin-inline: auto;
}

/* ------------------------------------------------------------------ *
 * Section headings
 * ------------------------------------------------------------------ */

.fp-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fp-navy);
}

.fp-h .fp-h-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-muted);
}

.fp-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--fp-muted);
}

/* ------------------------------------------------------------------ *
 * Rows
 * ------------------------------------------------------------------ */

.fp-table {
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.fp-row {
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--fp-border);
}

.fp-row:first-child { border-top: 0; }

/* Sets list: handle | name | options | used by | status | actions */
.fp-row--set {
  grid-template-columns: 34px minmax(240px, 2.2fr) minmax(90px, 0.8fr) 120px 110px minmax(230px, auto);
}

/* Options list: handle | name | type | values | price | required | actions */
.fp-row--opt {
  grid-template-columns: 34px minmax(240px, 2.2fr) 150px 90px 130px 120px minmax(200px, auto);
}

.fp-head {
  background: var(--fp-head-bg);
  border-bottom: 2px solid var(--fp-navy);
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-muted);
}

.fp-body .fp-row:nth-child(even) { background: #fcfcfb; }
.fp-body .fp-row:hover { background: var(--fp-navy-tint); }

/* ------------------------------------------------------------------ *
 * Cells
 * ------------------------------------------------------------------ */

/* The title. Bigger, heavier, and never wraps — it ellipsises instead, with
   the full text on hover. */
.fp-name {
  font-size: 15px;
  font-weight: 650;
  color: var(--fp-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.fp-name-link {
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.fp-name-link:hover { border-bottom-color: var(--fp-navy); }

.fp-cell {
  font-size: 13px;
  color: var(--fp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.fp-cell--muted { color: var(--fp-muted); }
.fp-cell--num { font-variant-numeric: tabular-nums; }

/* Actions stay on one line, always. */
.fp-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ *
 * Pills
 * ------------------------------------------------------------------ */

.fp-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.fp-pill--on    { background: var(--fp-navy); color: #fff; }
.fp-pill--off   { background: #fff; color: var(--fp-muted); border-color: var(--fp-border); }
.fp-pill--req   { background: #fbeaea; color: var(--fp-accent); border-color: #f0d2d2; }
.fp-pill--cond  { background: var(--fp-navy-tint); color: var(--fp-navy); border-color: var(--fp-navy-line); }
.fp-pill--warn  { background: #fdf3e6; color: #9a6212; border-color: #f2dcb8; }

/* ------------------------------------------------------------------ *
 * Drag to reorder
 * ------------------------------------------------------------------ */

.fp-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  border-radius: 6px;
  cursor: grab;
  color: #a4a9bb;
  user-select: none;
  line-height: 1;
  font-size: 15px;
  letter-spacing: 1px;
}

.fp-handle:hover { background: var(--fp-navy-tint); color: var(--fp-navy); }
.fp-handle:active { cursor: grabbing; }

.fp-row--dragging { opacity: 0.45; }

/* Where it will land. */
.fp-row--over-before { box-shadow: inset 0 3px 0 0 var(--fp-navy); }
.fp-row--over-after  { box-shadow: inset 0 -3px 0 0 var(--fp-navy); }

.fp-empty {
  padding: 22px 18px;
  color: var(--fp-muted);
  font-size: 13px;
}

.fp-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 2px 0;
}

.fp-total {
  font-size: 13px;
  color: var(--fp-muted);
}

.fp-total strong { color: var(--fp-navy); }

/* Narrow screens: let the grids collapse rather than overflow. */
@media (max-width: 900px) {
  .fp-row--set,
  .fp-row--opt {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .fp-head { display: none; }
  .fp-actions { justify-content: flex-start; }
  .fp-name { white-space: normal; }
}

/* A cell that holds one or two pills side by side. */
.fp-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
}