/*
 * Embedded admin styles.
 *
 * Built on Polaris design tokens (spacing scale, type scale, colour roles) rather than
 * on the Polaris web components. App Bridge only registers those components inside the
 * Shopify admin frame, so they cannot be exercised outside it, and shipping an admin
 * whose entire UI could not be tested before submission is the wrong trade for one
 * night's work. See the HANDOFF note in TODO.md.
 */

:root {
  --p-space-100: 4px;
  --p-space-200: 8px;
  --p-space-300: 12px;
  --p-space-400: 16px;
  --p-space-500: 20px;
  --p-space-600: 24px;
  --p-space-800: 32px;
  --p-space-1200: 48px;

  --p-radius-200: 8px;
  --p-radius-300: 12px;

  --p-bg-app: #f1f1f1;
  --p-bg-surface: #ffffff;
  --p-bg-surface-secondary: #f7f7f7;
  --p-bg-surface-hover: #f1f1f1;
  --p-bg-fill-brand: #303030;
  --p-bg-fill-brand-hover: #1a1a1a;
  --p-bg-fill-success: #cdfee1;
  --p-bg-fill-warning: #ffd6a4;
  --p-bg-fill-critical: #fee9e8;
  --p-bg-fill-info: #d6f0ff;

  --p-text: #303030;
  --p-text-secondary: #616161;
  --p-text-brand-on-fill: #ffffff;
  --p-text-success: #0c5132;
  --p-text-warning: #5e4200;
  --p-text-critical: #8e1f0b;

  --p-border: #e3e3e3;
  --p-border-strong: #b5b5b5;
  --p-border-critical: #e0b3b2;

  --p-shadow-card: 0 1px 0 rgba(26, 26, 26, 0.07);
  --p-focus: 0 0 0 2px #ffffff, 0 0 0 4px #005bd3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--p-bg-app);
  color: var(--p-text);
  font: 14px/1.4285 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }

/* ------------------------------------------------------------------- layout --- */

.page { max-width: 1000px; margin: 0 auto; padding: var(--p-space-500) var(--p-space-400) var(--p-space-1200); }
.page__header { display: flex; align-items: flex-start; gap: var(--p-space-400); margin-bottom: var(--p-space-500); flex-wrap: wrap; }
.page__title { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.page__subtitle { color: var(--p-text-secondary); margin-top: var(--p-space-100); }
.page__actions { margin-left: auto; display: flex; align-items: center; gap: var(--p-space-200); }

.card {
  background: var(--p-bg-surface);
  border-radius: var(--p-radius-300);
  box-shadow: var(--p-shadow-card);
  padding: var(--p-space-400);
  margin-bottom: var(--p-space-400);
}
.card__title { font-size: 14px; font-weight: 650; margin-bottom: var(--p-space-100); }
.card__hint { color: var(--p-text-secondary); margin-bottom: var(--p-space-400); }
.card__section + .card__section { margin-top: var(--p-space-400); padding-top: var(--p-space-400); border-top: 1px solid var(--p-border); }

.grid { display: grid; gap: var(--p-space-400); }
@media (min-width: 720px) { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--preview { grid-template-columns: 1fr 320px; } }
/* Three plan cards. Two up at tablet width, three only when there is room for the
   feature lists to breathe, so a card never collapses to one word per line. */
@media (min-width: 720px) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .grid--3 { grid-template-columns: 1fr 1fr 1fr; } }

.row { display: flex; gap: var(--p-space-300); align-items: center; flex-wrap: wrap; }
/* Feature bullets. .row wraps, so a feature longer than one line dropped its text onto a
   new line underneath a stranded bullet. These align to the top and let the text take the
   remaining width instead. */
.feature { display: flex; gap: var(--p-space-200); align-items: flex-start; flex-wrap: nowrap; }
.feature > span:last-child { flex: 1; min-width: 0; }
.row--between { justify-content: space-between; }
.stack > * + * { margin-top: var(--p-space-300); }
.muted { color: var(--p-text-secondary); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------- tabs --- */

.tabs { display: flex; gap: var(--p-space-100); margin-bottom: var(--p-space-400); flex-wrap: wrap; }
.tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: var(--p-space-200) var(--p-space-300); border-radius: var(--p-radius-200);
  font: inherit; font-weight: 550; color: var(--p-text-secondary);
}
.tab:hover { background: var(--p-bg-surface-hover); }
.tab[aria-selected='true'] { background: var(--p-bg-surface); color: var(--p-text); box-shadow: var(--p-shadow-card); }
.tab:focus-visible { outline: 0; box-shadow: var(--p-focus); }

/* ------------------------------------------------------------------ controls --- */

.btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  border-radius: var(--p-radius-200); padding: 7px 14px;
  border: 1px solid var(--p-border-strong); background: var(--p-bg-surface); color: var(--p-text);
  display: inline-flex; align-items: center; gap: var(--p-space-200);
}
.btn:hover:not(:disabled) { background: var(--p-bg-surface-hover); }
.btn:focus-visible { outline: 0; box-shadow: var(--p-focus); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--p-bg-fill-brand); border-color: var(--p-bg-fill-brand); color: var(--p-text-brand-on-fill); }
.btn--primary:hover:not(:disabled) { background: var(--p-bg-fill-brand-hover); }
.btn--plain { border-color: transparent; background: transparent; padding: 4px 6px; text-decoration: underline; font-weight: 500; }
.btn--critical { color: var(--p-text-critical); border-color: var(--p-border-critical); }
.btn--small { padding: 4px 10px; font-size: 12px; }

.field { display: block; margin-bottom: var(--p-space-300); }
.field__label { display: block; font-weight: 550; margin-bottom: var(--p-space-100); }
.field__hint { color: var(--p-text-secondary); margin-top: var(--p-space-100); }
.field__error { color: var(--p-text-critical); margin-top: var(--p-space-100); }

.input, .select, textarea.input {
  width: 100%; font: inherit; color: var(--p-text);
  padding: 7px 10px; border: 1px solid var(--p-border-strong);
  border-radius: var(--p-radius-200); background: var(--p-bg-surface);
}
.input:focus, .select:focus { outline: 0; box-shadow: var(--p-focus); }
.input--invalid { border-color: var(--p-text-critical); }
.input--short { width: 7rem; }

/* The .checkbox rules are gone: checkboxes are Polaris <s-checkbox> components now, which
   carry their own label, help text, focus ring and checked styling. The native control
   they replaced rendered in the browser's blue accent, next to Polaris's black buttons. */

/* ------------------------------------------------------------------- banners --- */

.banner { border-radius: var(--p-radius-200); padding: var(--p-space-300) var(--p-space-400); margin-bottom: var(--p-space-400); }
.banner--success { background: var(--p-bg-fill-success); color: var(--p-text-success); }
.banner--warning { background: var(--p-bg-fill-warning); color: var(--p-text-warning); }
.banner--critical { background: var(--p-bg-fill-critical); color: var(--p-text-critical); }
.banner--info { background: var(--p-bg-fill-info); }
.banner__title { font-weight: 650; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 550; background: var(--p-bg-surface-secondary); }
.badge--success { background: var(--p-bg-fill-success); color: var(--p-text-success); }
.badge--warning { background: var(--p-bg-fill-warning); color: var(--p-text-warning); }
.badge--attention { background: var(--p-bg-fill-info); }

/* ----------------------------------------------------------------- checklist --- */

.check { display: flex; gap: var(--p-space-300); padding: var(--p-space-300) 0; align-items: flex-start; }
.check + .check { border-top: 1px solid var(--p-border); }
.check__mark {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px;
  background: var(--p-bg-surface-secondary); color: var(--p-text-secondary); border: 1px solid var(--p-border);
}
.check--done .check__mark { background: #0c5132; color: #fff; border-color: #0c5132; }
.check__body { flex: 1; min-width: 0; }
.check__title { font-weight: 550; }

/* ------------------------------------------------------------------ products --- */

.product { display: flex; gap: var(--p-space-300); padding: var(--p-space-300) 0; align-items: flex-start; }
.product + .product { border-top: 1px solid var(--p-border); }
.product__main { flex: 1; min-width: 0; }
.product__title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product__fields { display: grid; gap: var(--p-space-200); grid-template-columns: 5rem 1fr 1fr auto; align-items: start; margin-top: var(--p-space-200); }
@media (max-width: 720px) { .product__fields { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------- preview --- */

.preview { position: sticky; top: var(--p-space-400); }
.preview__frame { background: var(--p-bg-surface-secondary); border-radius: var(--p-radius-200); padding: var(--p-space-400); display: grid; gap: var(--p-space-400); justify-items: center; }
.preview__notice img { display: block; width: 100%; height: auto; max-width: 260px; }
.preview__label svg { display: block; width: 100%; height: auto; max-width: 220px; }
.preview__label--nested svg { max-width: 280px; }

/* --------------------------------------------------------------------- misc --- */

.boot { min-height: 60vh; display: grid; place-items: center; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--p-border); border-top-color: var(--p-text-secondary);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.empty { text-align: center; padding: var(--p-space-800) var(--p-space-400); color: var(--p-text-secondary); }

.toast {
  position: fixed; left: 50%; bottom: var(--p-space-500); transform: translateX(-50%);
  background: #303030; color: #fff; padding: var(--p-space-300) var(--p-space-400);
  border-radius: var(--p-radius-200); box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 40;
  max-width: 90vw;
}
.toast--error { background: #8e1f0b; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/*
 * Column widths for the GARAN worklist, on wrapper divs: Polaris fields are
 * display: contents and ignore a width of their own. Fixed widths, so a validation
 * message wraps under its field instead of widening the column and squeezing the others.
 */
.garan-col--years { width: 120px; }
.garan-col--text { width: 180px; }

/* The loading line under the first-load spinner. */
.boot__inner { display: grid; justify-items: center; gap: var(--p-space-300); }
.boot__text { color: var(--p-text-secondary); font-size: 13px; }

/* The GARAN column guide: folded away once the merchant has a first complete label. */
.guide { margin-bottom: var(--p-space-400); padding: var(--p-space-300); border-radius: var(--p-radius-200); background: var(--p-bg-surface-secondary); }
.guide summary { cursor: pointer; font-weight: 600; }
.guide ul { margin-top: var(--p-space-300); }