/* ==========================================================================
   NI Fuel Price Tracker — Stylesheet
   v0.06
   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;
}

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);
}

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-4);
  max-width: 1200px;
  margin: 0 auto;
}

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

@media (min-width: 600px) {
  .summary-grid { grid-template-columns: repeat(4, 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);
}
.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--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:   0 var(--space-4) var(--space-4);
  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;
}

.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);
  width:       fit-content;
}

.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);
}

.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: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; min-width: 140px; }

.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;
}

/* 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: 1fr;
  gap:                   var(--space-3);
}

@media (min-width: 540px) {
  .stations-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .stations-grid { grid-template-columns: repeat(3, 1fr); }
}

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

/* 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; }

.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 */
.card-prices {
  display: grid;
  grid-template-columns: 1fr 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--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); }

/* --- 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); }

.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: 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; }
}

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