:root{
  --brand:#0F2A44;
  --brand-2:#1B3A5C;
  --brand-dark:#081827;
  --accent:#E67E22;
  --accent-hover:#cf6a13;
  --soft:#F4F6F8;
  --line:#E5E9EE;
  --ink:#1f2937;
  --muted:#6B7280;
  --sidebar-w:260px;
  --topbar-h:64px;
  --page-bg:#F6F8FB;

  /* Glassmorphism palette */
  --glass-bg:rgba(255,255,255,0.55);
  --glass-bg-strong:rgba(255,255,255,0.78);
  --glass-bg-soft:rgba(255,255,255,0.40);
  --glass-border:rgba(255,255,255,0.65);
  --glass-border-inner:rgba(255,255,255,0.85);
  --glass-shadow:0 10px 36px rgba(15,42,68,.10), 0 2px 6px rgba(15,42,68,.05),
                inset 0 1px 0 rgba(255,255,255,0.55);
  --glass-blur:22px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  font-feature-settings:"cv11","ss03";
  letter-spacing:-0.005em;
}
body,
body.bg-page,
.bg-page{
  background:
    radial-gradient(38rem 26rem at 92% -6%, rgba(230,126,34,.30), transparent 60%),
    radial-gradient(34rem 24rem at 4% 8%, rgba(31,122,58,.18), transparent 60%),
    radial-gradient(40rem 32rem at 8% 96%, rgba(15,42,68,.22), transparent 62%),
    radial-gradient(28rem 22rem at 96% 86%, rgba(192,57,43,.18), transparent 60%),
    linear-gradient(180deg, #EFF3F9 0%, #E4E9F2 60%, #DDE3EE 100%);
  background-attachment: fixed;
}

/* Auth pages (login / register) — same glass stage */
.auth-stage{
  min-height:100vh;
  display:flex;align-items:flex-start;justify-content:center;
  padding:5rem 1rem 3rem;
}
.auth-stage .auth-shell{width:100%;max-width:480px;}

.bg-brand{background:var(--brand)!important;}
.bg-brand-dark{background:var(--brand-dark)!important;}
.text-brand{color:var(--brand)!important;}
.text-accent{color:var(--accent)!important;}
.text-muted{color:var(--muted)!important;}
.xsmall{font-size:.72rem;line-height:1;}

.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-brand:hover,.btn-brand:focus{background:var(--brand-2);border-color:var(--brand-2);color:#fff;}
.btn-outline-brand{color:var(--brand);border-color:var(--brand);}
.btn-outline-brand:hover{background:var(--brand);color:#fff;}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-accent:hover,.btn-accent:focus{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;}

/* ============ APP SHELL ============ */
.app-shell{display:flex;min-height:100vh;background:var(--page-bg);}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;}

.app-content{flex:1;padding:24px 28px 40px;}
.app-footer{
  padding:16px 28px;border-top:1px solid var(--glass-border);
  font-size:.78rem;color:var(--muted);
  background:var(--glass-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ============ SIDEBAR ============ */
.sidebar,.sidebar-offcanvas{
  --bs-offcanvas-width:var(--sidebar-w);
  width:var(--sidebar-w);
  background:
    linear-gradient(165deg, rgba(230,126,34,.10) 0%, transparent 30%),
    linear-gradient(180deg, rgba(15,42,68,0.92) 0%, rgba(8,24,39,0.94) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color:#cdd6e1;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(0,0,0,.02), 8px 0 28px rgba(15,42,68,.10);
}
.sidebar{position:sticky;top:0;height:100vh;flex-shrink:0;}
.sidebar-admin,.sidebar-offcanvas.sidebar-admin{
  background:
    linear-gradient(165deg, rgba(192,57,43,.10) 0%, transparent 30%),
    linear-gradient(180deg, rgba(10,29,49,0.94) 0%, rgba(4,13,24,0.96) 100%);
}

/* Brand block */
.sidebar-brand{
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-link{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;
}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#f29746);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;
  box-shadow:0 4px 12px rgba(230,126,34,.35);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-name{font-weight:700;font-size:.95rem;color:#fff;letter-spacing:-0.01em;}
.brand-sub{font-size:.7rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-top:2px;}

/* Nav items */
.sidebar-nav{
  padding:14px 12px;flex:1;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
}
.sidebar-nav::-webkit-scrollbar{width:6px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}
.nav-section{
  padding:14px 12px 6px;font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:#7b8a9c;
}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:8px;
  color:#cdd6e1;text-decoration:none;font-size:.9rem;font-weight:500;
  margin:1px 0;position:relative;transition:all .15s ease;
}
.nav-item i{font-size:1.05rem;width:20px;text-align:center;opacity:.85;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item:hover i{opacity:1;}
.nav-item.active{
  background:linear-gradient(90deg, rgba(230,126,34,.20), rgba(230,126,34,.06));
  color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item.active::before{
  content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0;
  box-shadow:0 0 12px rgba(230,126,34,.6);
}
.nav-item.active i{color:var(--accent);opacity:1;}
.nav-item.nav-cta{
  background:rgba(230,126,34,.1);color:#fff;border:1px dashed rgba(230,126,34,.4);
}
.nav-item.nav-cta:hover{background:rgba(230,126,34,.2);border-style:solid;}
.nav-item.nav-cta i{color:var(--accent);opacity:1;}

/* Sidebar footer */
.sidebar-foot{padding:14px 14px 18px;border-top:1px solid rgba(255,255,255,.06);}
.sidebar-foot-card{
  display:flex;gap:10px;align-items:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  padding:10px 12px;border-radius:10px;color:#cdd6e1;
}
.sidebar-foot-card i{font-size:18px;color:var(--accent);}

/* ============ TOPBAR ============ */
.topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;gap:16px;
  padding:0 28px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom:1px solid var(--glass-border);
  position:sticky;top:0;z-index:50;
  box-shadow: 0 1px 14px rgba(15,42,68,.05);
}
.topbar-toggle{
  background:transparent;border:1px solid var(--line);
  width:38px;height:38px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--ink);
}
.topbar-toggle:hover{background:var(--soft);}
.topbar-title{flex:1;min-width:0;}
.topbar-title h1{font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
.topbar-title .text-muted{letter-spacing:.08em;font-size:.66rem;}
.topbar-actions{display:flex;align-items:center;gap:10px;}

.user-chip,
.account-chip{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.7);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding:5px 12px 5px 6px;border-radius:999px;
  cursor:pointer;color:var(--ink);
  transition:background .12s, border-color .12s, box-shadow .12s;
}
.user-chip:hover,
.account-chip:hover{background:#fff;border-color:#cbd3da;box-shadow:0 2px 10px rgba(15,42,68,.06);}
.account-chip{padding:5px 12px;}
.user-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;flex-shrink:0;
}

/* ============ COMPONENTS ============ */
.card,
.glass-card{
  border:1px solid var(--glass-border);
  border-radius:16px;
  background:var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--glass-shadow);
  position:relative;overflow:hidden;
}
.card::before,
.glass-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
}
.card>*,.glass-card>*{position:relative;z-index:1;}
.card-header.bg-white{
  border-bottom:1px solid rgba(15,42,68,.06);
  background:transparent!important;
}
.shadow-sm{box-shadow: var(--glass-shadow) !important;}
.history-current{background:rgba(31,122,58,.10)!important;}

.table{--bs-table-bg: transparent;}
.table>:not(caption)>*>*{padding-top:.85rem;padding-bottom:.85rem;background-color: transparent;}
.table thead{background:rgba(255,255,255,0.4);}
.table thead th{font-weight:600;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid rgba(15,42,68,.08);}
.table tbody tr:hover{background:rgba(15,42,68,.04);}

.badge{font-weight:600;letter-spacing:.04em;padding:.42em .65em;}

.form-control,.form-select,.input-group-text{
  background:rgba(255,255,255,0.78);
  border-color:rgba(15,42,68,.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.form-control:focus,.form-select:focus{
  background:#fff;
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem rgba(15,42,68,.12);
}
.input-group-text{color:var(--muted);font-weight:600;font-size:.82rem;}
.form-label{font-weight:600;font-size:.82rem;color:#334155;}

/* hero / landing */
.hero{
  background:linear-gradient(135deg,var(--brand) 0%,#173d63 60%,#235a92 100%);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(230,126,34,.25),transparent 70%);
}
.feat-icon{
  width:48px;height:48px;border-radius:12px;
  background:rgba(15,42,68,.08);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px;
}
.feat-icon.danger{background:rgba(220,53,69,.1);color:#dc3545;}

/* stat cards (glass + colored left accent) */
.stat-card{
  position:relative;overflow:hidden;border-radius:16px;
  background:var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--glass-shadow);
  border:1px solid var(--glass-border);
}
.stat-card .stat-icon{position:absolute;right:14px;top:14px;font-size:34px;opacity:.15;}
.stat-card.stat-primary{border-left:4px solid var(--brand)!important;}
.stat-card.stat-success{border-left:4px solid #198754!important;}
.stat-card.stat-warning{border-left:4px solid #ffc107!important;}
.stat-card.stat-danger{border-left:4px solid #dc3545!important;}
.stat-card.stat-info{border-left:4px solid #0dcaf0!important;}

/* product cards */
.product-card{background:#fff;transition:all .15s ease;border:1px solid var(--line)!important;}
.product-card:hover{border-color:var(--accent)!important;transform:translateY(-2px);box-shadow:0 6px 16px rgba(15,42,68,.08);}
.product-icon{
  width:38px;height:38px;border-radius:10px;
  background:rgba(230,126,34,.12);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}

/* product radio cards */
.product-choice{
  display:block;cursor:pointer;background:#fff;
  border:1.5px solid var(--line);border-radius:12px;
  padding:14px 14px 12px;
  transition:all .12s ease;height:100%;
  position:relative;user-select:none;
}
.product-choice:hover{border-color:#cbd3da;transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,42,68,.06);}
.product-choice .check-mark{opacity:0;color:var(--accent);font-size:18px;transition:opacity .12s;}
.product-choice.selected{border-color:var(--accent);background:#fff8f1;box-shadow:0 0 0 3px rgba(230,126,34,.12);}
.product-choice.selected .check-mark{opacity:1;}

/* step badge */
.step-badge{
  width:24px;height:24px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;
}

/* fuel chooser */
.fuel-choice{
  --fuel-accent:var(--brand);
  display:block;cursor:pointer;background:#fff;
  border:1.5px solid var(--line);border-radius:12px;
  padding:16px;transition:all .12s ease;user-select:none;height:100%;
}
.fuel-choice:hover{border-color:#cbd3da;transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,42,68,.06);}
.fuel-choice.selected{
  border-color:var(--fuel-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fuel-accent) 18%, transparent);
  background:color-mix(in srgb, var(--fuel-accent) 5%, #fff);
}
.fuel-choice .fuel-mark{
  width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb, var(--fuel-accent) 12%, transparent);
  color:var(--fuel-accent);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.fuel-choice .check-mark{opacity:0;color:var(--fuel-accent);font-size:20px;transition:opacity .12s;}
.fuel-choice.selected .check-mark{opacity:1;}

/* fuel band: groups tiles per fuel into a single row */
.fuel-band{
  --fuel-accent:var(--brand);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:10px 12px 12px;
  border-left:3px solid var(--fuel-accent);
}
.fuel-band-head{
  display:flex;align-items:center;gap:10px;
  padding:2px 4px 8px;
}
.fuel-band-subtotal{
  font-weight:700;color:var(--brand);font-size:.9rem;
  background:color-mix(in srgb, var(--fuel-accent) 8%, transparent);
  padding:3px 10px;border-radius:999px;
}

/* product tile — compact glass */
.product-tile{
  --fuel-accent:var(--brand);
  display:block;cursor:text;
  background:var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:12px;
  padding:10px 12px;height:100%;
  position:relative;overflow:hidden;
  transition:border-color .12s, box-shadow .12s, transform .12s, background .12s;
}
.product-tile:hover{
  border-color:color-mix(in srgb, var(--fuel-accent) 50%, rgba(255,255,255,0.7));
  box-shadow:0 6px 16px rgba(15,42,68,.08);
  transform:translateY(-1px);
}
.product-tile.filled{
  border-color:var(--fuel-accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--fuel-accent) 18%, transparent), 0 6px 18px rgba(15,42,68,.08);
  background:color-mix(in srgb, var(--fuel-accent) 6%, rgba(255,255,255,0.65));
}
.product-tile.error{
  border-color:#dc3545;
  box-shadow:0 0 0 2px rgba(220,53,69,.12);
  background:#fff5f5;
}
.product-tile .tile-error{margin-top:4px;line-height:1.3;}
.product-tile .tile-stripe{display:none;}
.product-tile .tile-row1{
  display:flex;justify-content:space-between;align-items:baseline;
}
.product-tile .tile-denom{
  font-size:1.15rem;font-weight:700;color:var(--brand);letter-spacing:-0.01em;
}
.product-tile .tile-denom-card{font-size:1rem;}
.product-tile .tile-cost{font-weight:600;color:#334155;font-size:.78rem;}
.product-tile .tile-sub{margin-top:1px;margin-bottom:8px;}
.product-tile .tile-input .input-group-text{background:#fafbfc;font-size:.8rem;}
.product-tile .tile-result{
  margin-top:6px;min-height:18px;
  font-size:.78rem;color:var(--fuel-accent);font-weight:600;
}
.product-tile .tile-result-row{display:flex;justify-content:space-between;}
.product-tile .tile-result-total{color:var(--fuel-accent);font-weight:700;}

/* notes details/summary */
.notes-card summary{list-style:none;cursor:pointer;}
.notes-card summary::-webkit-details-marker{display:none;}
.notes-card[open] .chevron{transform:rotate(180deg);}
.notes-card .chevron{transition:transform .15s;}

/* sticky side panels in quote grid */
@media (min-width:1200px){
  .sticky-side{position:sticky;top:calc(var(--topbar-h) + 16px);}
}

/* stations panel (far right rail) */
.stations-card{background:linear-gradient(180deg,#fff 0%,#fafbfc 100%);}
.stations-card h6 i{color:var(--accent);}

.station-list{list-style:none;padding:0;margin:0;}
.station-item{
  padding:12px 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:4px;
}
.station-item:first-child{border-top:none;padding-top:4px;}

.station-name{
  grid-column:1;grid-row:1;
  font-weight:600;font-size:.9rem;color:var(--ink);line-height:1.25;
}
.station-fuels{
  grid-column:2;grid-row:1;
  display:flex;gap:4px;flex-shrink:0;align-items:flex-start;
}
.station-fuels .fuel-chip{font-size:.58rem;padding:2px 7px;line-height:1.2;}
.station-fuels .fuel-chip i{font-size:.65rem;}

.station-address{
  grid-column:1 / -1;grid-row:2;
  line-height:1.35;font-size:.78rem;
}
.station-meta{
  grid-column:1 / -1;grid-row:3;
  display:flex;justify-content:space-between;gap:12px;
  color:var(--muted);font-size:.72rem;
}
.station-meta i{opacity:.7;margin-right:3px;}

/* equal-height side cards */
.quote-grid > [class^="col-"] > .card{height:100%;}

/* admin dashboard: awaiting activation card */
.awaiting-card{border-left:4px solid #ffc107!important;}
.awaiting-card thead th{background:#fffaf0;}
.awaiting-card input.font-monospace{letter-spacing:.04em;}

/* FileMaker reconciliation panel */
.lookup-panel-row .lookup-panel-cell{
  background: rgba(15,42,68,0.04);
  border-top: 0 !important;
}
.lookup-panel{
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border:1px solid var(--glass-border);
  border-radius:12px;
  padding:16px 18px;margin:12px;
  box-shadow:0 4px 14px rgba(15,42,68,.06);
}
.lookup-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.lookup-status{margin-bottom:10px;font-size:.85rem;}
.lookup-status.muted{color:var(--muted);}
.compare-col{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(15,42,68,.08);
  border-radius:10px;padding:10px 14px;height:100%;
}
.compare-col.compare-fm{background:rgba(31,122,58,.04);}
.compare-head{
  font-weight:700;color:var(--brand);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid rgba(15,42,68,.08);
  padding-bottom:6px;margin-bottom:6px;
}
.compare-dl{display:grid;grid-template-columns:90px 1fr;gap:4px 12px;margin:0;font-size:.82rem;}
.compare-dl dt{color:var(--muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;align-self:center;}
.compare-dl dd{margin:0;color:var(--ink);}
.compare-dl dd.compare-match{color:#0d6e2e;font-weight:600;}
.compare-dl dd.compare-diff{color:#a02f24;font-weight:600;background:rgba(192,57,43,.07);padding:0 6px;border-radius:4px;}
.lookup-actions{margin-top:14px;padding-top:12px;border-top:1px dashed var(--glass-border);}
.source-btn.active{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important;}

/* fuel chip used in lists */
.fuel-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}
.fuel-chip.diesel_50{background:rgba(31,122,58,.12);color:#15683a;}
.fuel-chip.blend{background:rgba(192,57,43,.12);color:#a02f24;}
.fuel-chip i{font-size:.85rem;}

/* sticky summary card */
@media (min-width:992px){
  .sticky-summary{position:sticky;top:calc(var(--topbar-h) + 16px);}
}

.font-monospace{font-family:"SFMono-Regular",Menlo,Consolas,monospace;}

/* ============ MOBILE ============ */
@media (max-width:991.98px){
  .app-content{padding:18px 16px 32px;}
  .topbar{padding:0 16px;}
  .app-footer{padding:14px 16px;}
}