/* ==========================================================================
   NI Fuel Price Tracker — Stylesheet
   v0.32
   Mobile-first. System fonts. Safe-area inset aware.
   ========================================================================== */

/* --- Custom Properties --- */
:root {
  /* Colour palette */
  --clr-bg:           #f1f5f9;
  --clr-surface:      #ffffff;
  --clr-surface-2:    #f8fafc;
  --clr-border:       #e2e8f0;
  --clr-text:         #0f172a;
  --clr-text-2:       #475569;
  --clr-text-3:       #94a3b8;

  --clr-header-bg:    #0f172a;
  --clr-header-text:  #f8fafc;

  --clr-petrol:       #16a34a;   /* UK green = unleaded */
  --clr-petrol-light: #dcfce7;
  --clr-diesel:       #1e293b;   /* UK black = diesel */
  --clr-diesel-light: #f1f5f9;
  --clr-accent:       #f59e0b;

  --clr-cheap:        #16a34a;
  --clr-fair:         #d97706;
  --clr-expensive:    #dc2626;

  --clr-badge-bg:     #f1f5f9;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radii */
  --radius:    12px;
  --radius-sm:  8px;
  --radius-xs:  6px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow:    0 2px 4px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);

  /* Transitions */
  --transition: 0.15s ease;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-family:        var(--font);
  font-size:          16px;
  line-height:        1.5;
  color:              var(--clr-text);
  background-color:   var(--clr-bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior:    smooth;
  overflow-x:         hidden;
}

body {
  min-height:         100dvh;
  /* Safe-area padding is handled by the #safe-area-top DOM spacer.
     Bottom padding ensures content is not hidden behind home indicators. */
  padding-bottom:     env(safe-area-inset-bottom, 0px);
  /* Prevent any child element from creating a horizontal scrollbar */
  overflow-x:         hidden;
}

a {
  color:            var(--clr-petrol);
  text-decoration:  none;
}
a:hover { text-decoration: underline; }

button {
  font-family:  inherit;
  cursor:       pointer;
  border:       none;
  background:   none;
}

img, svg { display: block; }

/* --- Utilities --- */
.hidden  { display: none !important; }
.sr-only {
  position:   absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0,0,0,0);
  white-space: nowrap;
  border:      0;
}

/* --- Safe-area top spacer ---
   This is the PRIMARY guard for notched / Dynamic Island iPhones.
   It fills the status bar area with the header colour so the
   content doesn't bleed under the notch.
   CSS env() alone is NOT relied upon as the sole protection here. */
#safe-area-top {
  height:           env(safe-area-inset-top, 0px);
  background-color: var(--clr-header-bg);
  /* sticky so it stays above the header when scrolled */
  position: sticky;
  top:      0;
  z-index:  101;
}

/* --- Site Header --- */
.site-header {
  position:         sticky;
  /* Must use env() here — not top: 0 — so it pins below the notch. */
  top:              env(safe-area-inset-top, 0px);
  z-index:          100;
  background-color: var(--clr-header-bg);
  color:            var(--clr-header-text);
  box-shadow:       0 2px 8px rgba(0,0,0,0.25);
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
  max-width:       1200px;
  margin:          0 auto;
  padding:         var(--space-3) var(--space-4);
}

.header-brand {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.header-icon { flex-shrink: 0; }

.header-title {
  font-size:   1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.header-subtitle {
  font-size:  0.7rem;
  color:      var(--clr-text-3);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.header-meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
}

.badge {
  display:          inline-flex;
  align-items:      center;
  padding:          2px var(--space-2);
  background-color: rgba(255,255,255,0.12);
  color:            var(--clr-header-text);
  border-radius:    20px;
  font-size:        0.7rem;
  font-weight:      600;
  white-space:      nowrap;
}

.last-updated {
  font-size:  0.7rem;
  color:      var(--clr-text-3);
  white-space: nowrap;
}

/* --- Buttons --- */
.btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size:     0.875rem;
  font-weight:   600;
  transition:    background-color var(--transition), transform var(--transition);
}

.btn-primary {
  background-color: var(--clr-petrol);
  color:            #fff;
}
.btn-primary:hover { background-color: #15803d; }
.btn-primary:active { transform: scale(0.97); }

/* --- State Panels (loading / error) --- */
.state-panel {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            var(--space-4);
  min-height:     40vh;
  text-align:     center;
  padding:        var(--space-8) var(--space-4);
  color:          var(--clr-text-2);
}

.state-error .state-icon {
  width:  48px;
  height: 48px;
  color:  var(--clr-expensive);
}

.spinner {
  width:  36px;
  height: 36px;
  border: 3px solid var(--clr-border);
  border-top-color: var(--clr-petrol);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Summary Section --- */
.summary-section {
  padding: var(--space-3) var(--space-4) var(--space-2);
  max-width: 1200px;
  margin: 0 auto;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 600px) {
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.summary-card {
  background:    var(--clr-surface);
  border-radius: var(--radius);
  padding:       var(--space-4);
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--clr-border);
  transition:    box-shadow var(--transition);
  min-width:     0;
  overflow:      hidden;
}
.summary-card:hover { box-shadow: var(--shadow); }

.summary-card--petrol {
  border-top: 3px solid var(--clr-petrol);
}
.summary-card--diesel {
  border-top: 3px solid var(--clr-diesel);
}
.summary-card--e5 {
  border-top: 3px solid #a855f7;
}

.summary-card--avg {
  border-top: 3px solid var(--clr-accent);
}

.summary-label {
  font-size:   0.7rem;
  font-weight: 600;
  color:       var(--clr-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.summary-price {
  font-size:      1.5rem;
  font-weight:    700;
  font-family:    var(--font-mono);
  color:          var(--clr-text);
  line-height:    1.2;
}

.summary-place {
  font-size:  0.75rem;
  color:      var(--clr-text-2);
  margin-top: var(--space-1);
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}

.summary-sub {
  font-size:  0.7rem;
  color:      var(--clr-text-3);
  margin-top: var(--space-1);
}

.summary-delta {
  font-size:   0.7rem;
  font-weight: 600;
  margin-top:  var(--space-1);
  min-height:  1em;
}
.summary-delta--up   { color: var(--clr-expensive); }
.summary-delta--down { color: var(--clr-cheap); }
.summary-delta--flat { color: var(--clr-text-3); }

/* --- Chart Section --- */
.chart-section {
  padding:   var(--space-2) var(--space-4) var(--space-3);
  max-width: 1200px;
  margin:    0 auto;
}

.section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
  margin-bottom:   var(--space-3);
}

.section-title {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--clr-text);
}

.section-sub {
  font-size: 0.75rem;
  color:     var(--clr-text-3);
}

.chart-wrap {
  background:    var(--clr-surface);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius);
  padding:       var(--space-4);
  box-shadow:    var(--shadow-sm);
  position:      relative;
  height:        220px; /* mobile-first; overridden at wider breakpoints */
}

@media (min-width: 600px) {
  .chart-wrap { height: 240px; }
}

@media (min-width: 900px) {
  .chart-wrap { height: 200px; }
}

.chart-no-data {
  text-align: center;
  padding:    var(--space-8) var(--space-4);
  color:      var(--clr-text-3);
  font-size:  0.875rem;
}

/* Chart range selector buttons */
.chart-range-btns {
  display:       flex;
  gap:           var(--space-1);
  background:    var(--clr-surface);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding:       var(--space-1);
  flex-shrink:   0;
}

.range-btn {
  padding:       5px var(--space-3);
  border-radius: var(--radius-xs);
  font-size:     0.75rem;
  font-weight:   600;
  color:         var(--clr-text-2);
  line-height:   1;
  transition:    all var(--transition);
}

.range-btn--active,
.range-btn[aria-pressed="true"] {
  background-color: var(--clr-text);
  color:            #fff;
}

.range-btn:not(.range-btn--active):hover {
  background-color: var(--clr-badge-bg);
  color:            var(--clr-text);
}

/* Period stats strip below chart */
.chart-stats {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-2);
  margin-top:            var(--space-3);
}

@media (min-width: 600px) {
  .chart-stats { grid-template-columns: repeat(4, 1fr); }
}

.chart-stat {
  background:    var(--clr-surface);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding:       var(--space-3);
  text-align:    center;
  box-shadow:    var(--shadow-sm);
}

.chart-stat--petrol { border-top: 2px solid var(--clr-petrol); }
.chart-stat--diesel { border-top: 2px solid #64748b; }

.chart-stat-label {
  display:        block;
  font-size:      0.65rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--clr-text-3);
  margin-bottom:  var(--space-1);
}

.chart-stat-value {
  display:     block;
  font-size:   1.125rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color:       var(--clr-text);
}

/* --- Controls Section --- */
.controls-section {
  position:   sticky;
  top:        calc(env(safe-area-inset-top, 0px) + 56px); /* below header */
  z-index:    50;
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.controls-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   var(--space-3) var(--space-4);
  display:   flex;
  flex-direction: column;
  gap:       var(--space-2);
}

/* Fuel type tabs */
.tab-group {
  display:     flex;
  gap:         var(--space-1);
  background:  var(--clr-surface);
  border:      1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding:     var(--space-1);
  max-width:   100%;
  overflow-x:  auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.tab-group::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.tab {
  padding:       6px var(--space-4);
  border-radius: var(--radius-xs);
  font-size:     0.8125rem;
  font-weight:   600;
  color:         var(--clr-text-2);
  transition:    all var(--transition);
  white-space:   nowrap;
}

.tab--active,
.tab[aria-selected="true"] {
  background-color: var(--clr-text);
  color:            #fff;
}

.tab--fav { display: inline-flex; align-items: center; gap: 4px; }
.tab--fav[aria-selected="true"] { background-color: var(--clr-accent); color: #fff; }
.tab--e5[aria-selected="true"]  { background-color: #a855f7; color: #fff; }

.tab:not(.tab--active):hover {
  background-color: var(--clr-badge-bg);
  color:            var(--clr-text);
}

/* Filter row */
.filter-row {
  display: flex;
  gap:     var(--space-2);
  flex-wrap: wrap;
}

.select-wrap  { flex: 1 1 120px; min-width: 0; }
.postcode-wrap { flex: 1 1 100px; min-width: 0; }

/* On narrow phones: postcode+distance share first row; sort takes full second row */
@media (max-width: 479px) {
  .filter-row > :nth-child(1) { order: 3; flex: 0 0 100%; }
  .filter-row > :nth-child(2) { order: 1; }
  .filter-row > :nth-child(3) { order: 2; }
}

.select {
  width:         100%;
  padding:       var(--space-2) var(--space-3);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background:    var(--clr-surface);
  color:         var(--clr-text);
  font-family:   inherit;
  font-size:     0.8125rem;
  appearance:    none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  padding-right:       28px;
  cursor: pointer;
}
.select:focus {
  outline: 2px solid var(--clr-petrol);
  outline-offset: 2px;
}

/* Postcode text input — inherits .select base styles but without the dropdown arrow */
.postcode-input {
  background-image: none;
  padding-right:    var(--space-3);
  cursor:           text;
  transition:       border-color var(--transition);
}
.postcode-input::placeholder     { color: var(--clr-text-3); }
.postcode-input--ok              { border-color: var(--clr-petrol); }
.postcode-input--error           { border-color: var(--clr-expensive); }

.postcode-hint {
  font-size:  0.7rem;
  color:      var(--clr-expensive);
  margin-top: var(--space-1);
  line-height: 1.3;
}

/* Search */
.search-wrap {
  position: relative;
}

.search-icon {
  position:   absolute;
  left:       10px;
  top:        50%;
  transform:  translateY(-50%);
  width:      16px;
  height:     16px;
  color:      var(--clr-text-3);
  pointer-events: none;
}

.search-input {
  width:         100%;
  padding:       var(--space-2) var(--space-3) var(--space-2) 34px;
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background:    var(--clr-surface);
  color:         var(--clr-text);
  font-family:   inherit;
  font-size:     0.8125rem;
}
.search-input::placeholder { color: var(--clr-text-3); }
.search-input:focus {
  outline: 2px solid var(--clr-petrol);
  outline-offset: 2px;
  border-color: transparent;
}

/* --- Results Meta --- */
.results-meta {
  max-width: 1200px;
  margin:    0 auto;
  padding:   var(--space-2) var(--space-4);
  font-size: 0.75rem;
  color:     var(--clr-text-3);
}

/* --- Stations Grid --- */
.stations-section {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 var(--space-4) var(--space-8);
}

.stations-grid {
  display:               grid;
  grid-template-columns: minmax(0, 1fr);
  gap:                   var(--space-3);
}

/* Station card */
.station-card {
  background:    var(--clr-surface);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius);
  padding:       var(--space-4);
  box-shadow:    var(--shadow-sm);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
  transition:    box-shadow var(--transition), transform var(--transition);
}
.station-card:hover {
  box-shadow: var(--shadow);
  transform:  translateY(-1px);
}

.card-header {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
}

/* Brand badge */
.brand-badge {
  flex-shrink:     0;
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-xs);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  font-weight:     800;
  line-height:     1;
  letter-spacing:  0;
  color:           #fff;
  background:      var(--clr-text-2);
}

.card-info { min-width: 0; overflow: hidden; }

.card-brand {
  font-size:   0.875rem;
  font-weight: 700;
  color:       var(--clr-text);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.card-address {
  font-size:  0.75rem;
  color:      var(--clr-text-2);
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-area {
  font-size:  0.7rem;
  color:      var(--clr-text-3);
  margin-top: 2px;
}

/* Price row — single column on mobile, 2-col on tablet+ (All tab only;
   filter tabs override back to 1fr via the show-* rules below) */
.card-prices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap:     var(--space-2);
}

.price-item {
  background:    var(--clr-surface-2);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding:       var(--space-2) var(--space-3);
}

.price-label {
  font-size:      0.65rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--clr-text-3);
  display:        block;
}

.price-value {
  font-size:   1.0625rem;
  font-weight: 700;
  font-family: var(--font-mono);
  display:     block;
  margin-top:  2px;
}

.price-value--na {
  color:     var(--clr-text-3);
  font-size: 0.875rem;
}

/* Price colour coding relative to NI average */
.price-value--cheap     { color: var(--clr-cheap); }
.price-value--fair      { color: var(--clr-fair); }
.price-value--expensive { color: var(--clr-expensive); }

/* Fuel type accent strips on price items */
.price-item--petrol { border-left: 3px solid var(--clr-petrol); }
.price-item--e5     { border-left: 3px solid #a855f7; grid-column: 1 / -1; }
.price-item--diesel { border-left: 3px solid #64748b; }

/* Favourite star button on station cards */
.fav-btn {
  flex-shrink:  0;
  margin-left:  auto;
  padding:      4px;
  color:        var(--clr-text-3);
  transition:   color var(--transition), transform var(--transition);
  line-height:  1;
}
.fav-btn:hover   { color: var(--clr-accent); transform: scale(1.15); }
.fav-btn--active { color: var(--clr-accent); }
.fav-btn svg { width: 16px; height: 16px; display: block; }

.station-card--favourited { border-color: var(--clr-accent); }

/* --- Fuel-filter column visibility ---
   When a specific fuel tab is active, hide the irrelevant price columns so
   each card shows only the selected fuel type. The grid drops to 1-column
   so the remaining price item fills the full card width. */

.stations-grid.show-petrol .price-item--diesel,
.stations-grid.show-petrol .price-item--e5,
.stations-grid.show-diesel .price-item--petrol,
.stations-grid.show-diesel .price-item--e5,
.stations-grid.show-e5 .price-item--petrol,
.stations-grid.show-e5 .price-item--diesel { display: none !important; }

.stations-grid.show-petrol .card-prices,
.stations-grid.show-diesel .card-prices,
.stations-grid.show-e5 .card-prices { grid-template-columns: minmax(0, 1fr); }

/* --- No Results --- */
.no-results {
  text-align: center;
  padding:    var(--space-8) var(--space-4);
  color:      var(--clr-text-3);
}

/* --- Footer --- */
.site-footer {
  background:    var(--clr-surface);
  border-top:    1px solid var(--clr-border);
  padding:       var(--space-6) var(--space-4);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  margin-top:    var(--space-8);
}

.footer-inner {
  max-width:  1200px;
  margin:     0 auto;
  text-align: center;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}

.footer-disclaimer {
  font-size: 0.75rem;
  color:     var(--clr-text-3);
}
.footer-disclaimer a { color: var(--clr-petrol); }

.footer-links {
  font-size: 0.75rem;
  color:     var(--clr-text-3);
}
.footer-links a { color: var(--clr-text-2); }
.footer-links a:hover { color: var(--clr-text); }
.footer-cta { color: var(--clr-text-3); margin-right: var(--space-1); }

.kofi-link {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
}
.kofi-icon { width: 14px; height: 14px; }

.footer-version {
  font-size:   0.7rem;
  color:       var(--clr-text-3);
  font-family: var(--font-mono);
}

/* #app-version shown after app confirms version (hidden by default via HTML hidden attr) */

/* --- Focus visible (accessibility) --- */
:focus-visible {
  outline:        2px solid var(--clr-petrol);
  outline-offset: 2px;
  border-radius:  2px;
}

/* --- Responsive typography --- */
@media (min-width: 600px) {
  /* Restore 2-col price layout on tablet+ for the All tab.
     Filter-active rules (.show-petrol/.show-diesel/.show-e5) have higher
     specificity and keep their 1fr override when a fuel tab is selected. */
  .card-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .header-title    { font-size: 1.25rem; }
  .summary-price   { font-size: 1.75rem; }
  .controls-inner  { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .tab-group       { flex-shrink: 0; }
  .filter-row      { flex: 1; }
}

/* --- Mobile compactness --- */
@media (max-width: 599px) {
  .summary-section { padding: var(--space-2) var(--space-3) var(--space-1); }
  .summary-card    { padding: var(--space-3); }
  .summary-price   { font-size: 1.25rem; }
  .chart-section   { padding: var(--space-2) var(--space-3) var(--space-2); }
  .chart-wrap      { padding: var(--space-3); }
  .controls-inner  { padding: var(--space-2) var(--space-3); }
  .stations-section { padding: 0 var(--space-3) var(--space-6); }
  .results-meta    { padding: var(--space-1) var(--space-3); }

  /* Tighter tab spacing so all 5 labels fit on one line without scrolling */
  .tab-group { gap: 1px; padding: 2px; }
  .tab       { padding: 6px 6px; font-size: 0.75rem; }

  /* Prevent iOS Safari auto-zoom on input focus (triggers when font-size < 16px) */
  .select, .search-input { font-size: 1rem; }
}

/* --- Print styles --- */
@media print {
  .site-header,
  .controls-section,
  .site-footer { display: none; }
  .stations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}