/* Bluefields Dipstick — shared styling.
   Palette taken from the app icon: deep navy, Bluefields blue, dipstick gold. */
:root {
  --navy-900:#0A1A33; --navy-800:#0D2140; --navy-700:#10294D; --navy-600:#17365f;
  --blue-500:#247DC2; --blue-400:#3F97DA; --gold-500:#E8A41D; --gold-600:#c98c13;
  --silver-300:#C9D2DA; --silver-500:#8A97A5; --paper:#F4F6F8;
  --ok:#2FA36B; --warn:#D99414; --bad:#D2564B;
  --radius:10px; --shadow:0 1px 3px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.16);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font); background:var(--navy-900); color:var(--silver-300);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.45;
}
a { color:var(--blue-400); text-decoration:none; }
h1,h2,h3 { color:#fff; font-weight:650; letter-spacing:-.01em; margin:0 0 .4em; }
h1 { font-size:1.4rem; } h2 { font-size:1.12rem; } h3 { font-size:.95rem; }
.muted { color:var(--silver-500); }
.small { font-size:.82rem; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; }
.right { text-align:right; } .center { text-align:center; }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.spread { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.grow { flex:1; } .hidden { display:none !important; }

/* ---------------------------------------------------------------- chrome */
header.top {
  display:flex; align-items:center; gap:16px; padding:10px 20px;
  background:var(--navy-800); border-bottom:1px solid #1d3a63; position:sticky; top:0; z-index:20;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; color:#fff; letter-spacing:.02em; }
.brand img { width:30px; height:30px; border-radius:7px; }
.brand .b1 { color:var(--blue-400); } .brand .b2 { color:var(--gold-500); }
nav.tabs { display:flex; gap:2px; flex-wrap:wrap; }
nav.tabs button {
  background:none; border:none; color:var(--silver-500); padding:7px 13px; border-radius:7px;
  font:inherit; font-size:.9rem; cursor:pointer;
}
nav.tabs button:hover { color:#fff; background:#16305a; }
nav.tabs button.active { color:var(--navy-900); background:var(--gold-500); font-weight:600; }
main { padding:20px; max-width:1500px; margin:0 auto; }

/* ----------------------------------------------------------------- cards */
.grid { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.g4 { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.card {
  background:var(--navy-700); border:1px solid #1d3a63; border-radius:var(--radius);
  padding:15px 17px; box-shadow:var(--shadow);
}
.card h2, .card h3 { margin-bottom:.55em; }
.stat .label { font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:var(--silver-500); }
.stat .value { font-family:var(--mono); font-size:1.65rem; color:#fff; font-variant-numeric:tabular-nums; }
.stat .value.gold { color:var(--gold-500); }
.stat .sub { font-size:.8rem; color:var(--silver-500); }

.gauge { height:7px; background:#0a1b33; border-radius:4px; overflow:hidden; margin-top:8px; }
.gauge > span { display:block; height:100%; background:linear-gradient(90deg,var(--blue-500),var(--gold-500)); }

/* ---------------------------------------------------------------- tables */
table { width:100%; border-collapse:collapse; font-size:.87rem; }
th {
  text-align:left; font-weight:600; color:var(--silver-500); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.07em; padding:7px 9px; border-bottom:1px solid #24457a;
  white-space:nowrap;
}
td { padding:7px 9px; border-bottom:1px solid #16305a; vertical-align:top; }
tbody tr:hover { background:#14315c; }
tbody tr.clickable { cursor:pointer; }
.table-wrap { overflow:auto; max-height:70vh; }

/* ----------------------------------------------------------------- chips */
.chip {
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.72rem;
  font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.chip.ok    { background:rgba(47,163,107,.16); color:#57c894; }
.chip.warn  { background:rgba(217,148,20,.16); color:var(--gold-500); }
.chip.bad   { background:rgba(210,86,75,.18);  color:#f08a80; }
.chip.info  { background:rgba(36,125,194,.18); color:var(--blue-400); }
.chip.flat  { background:#1b3a68; color:var(--silver-300); }

/* --------------------------------------------------------------- buttons */
button.btn, a.btn {
  font:inherit; font-weight:600; font-size:.88rem; cursor:pointer; border-radius:8px;
  padding:8px 15px; border:1px solid transparent; background:var(--blue-500); color:#fff;
}
button.btn:hover { background:var(--blue-400); }
button.btn.gold { background:var(--gold-500); color:var(--navy-900); }
button.btn.gold:hover { background:var(--gold-600); }
button.btn.ghost { background:transparent; border-color:#2a4d80; color:var(--silver-300); }
button.btn.ghost:hover { border-color:var(--blue-400); color:#fff; }
button.btn.small { padding:4px 10px; font-size:.78rem; }
button.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ---------------------------------------------------------------- inputs */
label.field { display:block; margin-bottom:11px; }
label.field > span { display:block; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--silver-500); margin-bottom:4px; }
input, select, textarea {
  width:100%; font:inherit; padding:9px 11px; border-radius:8px; background:#0b1e3a;
  border:1px solid #2a4d80; color:#fff;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--blue-500); outline-offset:-1px; }
input.big { font-family:var(--mono); font-size:1.5rem; text-align:center; padding:12px; }

/* --------------------------------------------------------------- overlays */
.overlay {
  position:fixed; inset:0; background:rgba(5,12,24,.78); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px; z-index:50;
}
.panel { background:var(--navy-700); border:1px solid #24457a; border-radius:14px;
  padding:22px; width:min(560px,100%); box-shadow:var(--shadow); max-height:90vh; overflow:auto; }
.toast {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:80;
  background:var(--navy-600); border:1px solid #2a4d80; border-left:4px solid var(--gold-500);
  padding:11px 17px; border-radius:9px; box-shadow:var(--shadow); max-width:90vw; color:#fff;
}
.toast.bad { border-left-color:var(--bad); }
.toast.ok  { border-left-color:var(--ok); }

/* ------------------------------------------------------------- pump view */
body.pump { background:var(--navy-900); }
.pump-wrap { max-width:560px; margin:0 auto; padding:14px 14px 90px; }
.step { display:none; } .step.active { display:block; }
.choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px; }
.choice {
  background:var(--navy-700); border:1px solid #24457a; border-radius:11px; padding:13px;
  text-align:left; color:#fff; font:inherit; cursor:pointer; min-height:64px;
}
.choice:hover, .choice.sel { border-color:var(--gold-500); background:var(--navy-600); }
.choice .code { font-family:var(--mono); font-size:.76rem; color:var(--gold-500); }
.choice .sub { font-size:.76rem; color:var(--silver-500); }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }
.keypad button {
  font:inherit; font-family:var(--mono); font-size:1.4rem; padding:15px; border-radius:11px;
  background:var(--navy-700); border:1px solid #24457a; color:#fff; cursor:pointer;
}
.keypad button:active { background:var(--blue-500); }
.bigbar {
  position:fixed; left:0; right:0; bottom:0; padding:12px 14px;
  background:var(--navy-800); border-top:1px solid #1d3a63; display:flex; gap:10px;
}
.bigbar button { flex:1; padding:15px; font-size:1rem; border-radius:11px; }
.readout { font-family:var(--mono); font-size:2.1rem; color:var(--gold-500); text-align:center; margin:6px 0; }
.queued { position:fixed; top:8px; right:12px; z-index:30; }