/*
 * Steel Rate Web — Material You (Material 3) theme.
 *
 * Color tokens are a 1:1 port of the Android app's theme/Color.kt (steel-blue
 * primary + amber secondary, light & dark hand-tuned pairs) mapped onto the
 * --md-sys-color-* token names that @material/web components consume.
 *
 * Per-brand theming: every card carries an inline --brand seed color; all its
 * container / accent tones derive from that seed via color-mix, so each brand
 * card reads as its own Material You tonal scheme.
 */

:root {
  --font: "Roboto", -apple-system, system-ui, "Segoe UI", sans-serif;

  /* @material/web components default to Roboto with a serif fallback — point
     their typeface tokens at the system stack so chips/buttons match the app. */
  --md-ref-typeface-plain: var(--font);
  --md-ref-typeface-brand: var(--font);

  /* Light scheme (Color.kt light values) */
  --md-sys-color-primary: #1f4e79;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cfe0f4;
  --md-sys-color-on-primary-container: #0a1e33;
  --md-sys-color-secondary: #e08a0a;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffe0b2;
  --md-sys-color-on-secondary-container: #4a2c00;
  --md-sys-color-tertiary: #4e6273;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #d6e3ef;
  --md-sys-color-on-tertiary-container: #0c1b26;
  --md-sys-color-background: #f7f9fc;
  --md-sys-color-on-background: #191c20;
  --md-sys-color-surface: #f7f9fc;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-surface-variant: #dde3ea;
  --md-sys-color-on-surface-variant: #42474e;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f1f4f9;
  --md-sys-color-surface-container: #ebeef3;
  --md-sys-color-surface-container-high: #e5e8ee;
  --md-sys-color-surface-container-highest: #dfe3e8;
  --md-sys-color-outline: #72787e;
  --md-sys-color-outline-variant: #c2c7ce;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  /* per-brand derivation strength */
  --brand-mix-container: 12%;
  --brand-mix-header: 88%;
  --brand-ink: #000000; /* mixed into --brand for readable on-light accents */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark scheme (Color.kt dark values) */
    --md-sys-color-primary: #9fc6ee;
    --md-sys-color-on-primary: #0a2e4d;
    --md-sys-color-primary-container: #1a3a57;
    --md-sys-color-on-primary-container: #d3e4ff;
    --md-sys-color-secondary: #ffb95c;
    --md-sys-color-on-secondary: #472a00;
    --md-sys-color-secondary-container: #6a4000;
    --md-sys-color-on-secondary-container: #ffddb3;
    --md-sys-color-tertiary: #b5c9da;
    --md-sys-color-on-tertiary: #20323f;
    --md-sys-color-tertiary-container: #374956;
    --md-sys-color-on-tertiary-container: #d1e4f6;
    --md-sys-color-background: #101418;
    --md-sys-color-on-background: #e1e2e8;
    --md-sys-color-surface: #101418;
    --md-sys-color-on-surface: #e1e2e8;
    --md-sys-color-surface-variant: #42474e;
    --md-sys-color-on-surface-variant: #c2c7ce;
    --md-sys-color-surface-container-lowest: #0b0f12;
    --md-sys-color-surface-container-low: #181c21;
    --md-sys-color-surface-container: #1c2025;
    --md-sys-color-surface-container-high: #262b30;
    --md-sys-color-surface-container-highest: #31363b;
    --md-sys-color-outline: #8c9198;
    --md-sys-color-outline-variant: #42474e;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    --brand-mix-container: 16%;
    --brand-mix-header: 78%;
    --brand-ink: #ffffff; /* lighten brand accents for dark surfaces */
  }
}

* { box-sizing: border-box; }

/* The hidden attribute must always win, even over display:flex rules. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  min-height: 100dvh;
  padding-bottom: 104px;
}

/* ---- top app bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 20px;
  min-height: 64px;
  background: var(--md-sys-color-surface);
  transition: background 0.2s, box-shadow 0.2s;
}

.topbar.scrolled {
  background: var(--md-sys-color-surface-container);
  box-shadow: 0 1px 0 var(--md-sys-color-outline-variant);
}

.topbar-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  gap: 4px;
  color: var(--md-sys-color-primary);
  --md-icon-button-icon-color: var(--md-sys-color-primary);
}

/* ---- location sub-bar ---- */
.location-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--md-sys-color-surface-container-low);
}

.location-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

.location-name svg { color: var(--md-sys-color-primary); }

.location-updated {
  font-size: 12px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}

#progress { width: 100%; }

/* ---- layout ---- */
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

.chip-row {
  display: flex;
  overflow-x: auto;
  padding: 12px 0 4px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

md-chip-set { flex-wrap: nowrap; }

md-filter-chip {
  --md-filter-chip-selected-container-color: var(--md-sys-color-primary);
  --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-primary);
  --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-primary);
  white-space: nowrap;
}

/* ---- loading / error states ---- */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 96px 32px;
  color: var(--md-sys-color-on-surface-variant);
}

.state-error { color: var(--md-sys-color-on-surface-variant); }
.state-error svg { color: var(--md-sys-color-error); }
.state-error h2 {
  margin: 0;
  color: var(--md-sys-color-error);
  font-size: 22px;
}
.state-error p { margin: 0; max-width: 44ch; }

/* ---- brand cards ---- */
.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.card {
  /* Material You per-brand tonal scheme, derived from the --brand seed. */
  --brand-container: color-mix(in srgb, var(--brand) var(--brand-mix-container), var(--md-sys-color-surface-container-lowest));
  --brand-accent: color-mix(in srgb, var(--brand) var(--brand-mix-header), var(--brand-ink));
  --brand-outline: color-mix(in srgb, var(--brand) 30%, transparent);
  background: var(--brand-container);
  border: 1px solid var(--brand-outline);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  animation: card-in 0.35s ease both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.card.failed {
  --brand-container: color-mix(in srgb, var(--md-sys-color-error-container) 35%, var(--md-sys-color-surface));
  border-color: color-mix(in srgb, var(--md-sys-color-error) 30%, transparent);
}

.card-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  background: var(--brand-accent);
}

.card-location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 8px;
  font-size: 14px;
  color: var(--brand-accent);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}

.card-failed-label {
  color: var(--md-sys-color-error);
  font-weight: 700;
}

.card hr {
  border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin: 12px 0;
}

.price-head, .price-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.price-head {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--md-sys-color-on-surface);
}

.price-row {
  padding: 4px 0;
  font-size: 16px;
  color: var(--md-sys-color-on-surface);
}

.price-row .price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.card-sheet-caption {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--md-sys-color-on-surface);
}

.card-sheet {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.card-empty, .card-error {
  margin: 0;
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
}
.card-error { color: var(--md-sys-color-error); }

.card-notes {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.attribution {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  padding: 16px 0 24px;
}

/* ---- FAB ---- */
md-fab {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 20;
}

/* ---- print ("Export Report" = print to PDF) ---- */
@media print {
  .topbar, .chip-row, md-fab, #progress, .state { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
  .card { break-inside: avoid; box-shadow: none; }
}