/* ═══════════════════════════════════════════════════════════════
   Petro AI — the brand system, in white
   Deep Navy #0D1B2A · Petrol Teal #009688 · Cloud Gray #E5E7EB · Soft White #F7F8FA
   Inter. 2px outline icons. From the brand guidelines, v1.0.

   ── why this is a separate file ──

   The dashboard was built as a dark forecourt-at-night theme, with its palette
   in one token block inside app.html. Everything downstream reads those
   tokens, so the whole surface turns over by redefining them — and doing that
   here rather than in app.html means the design system has one home, is shared
   with every other page, and does not sit in the middle of a file somebody
   else is working in.

   Loaded last, so a redefinition here wins. Where a token swap is not enough —
   a shadow tuned for a black page, a gradient that assumed a dark ground — the
   rule is overridden below and the reason is written next to it.

   ── how to extend this ──

   Add tokens, not colours. If a new screen needs a hue that is not here, it
   belongs in the palette with a name, not inline in a component. The guidelines
   are the source: navy for ink, teal for action, cloud for lines, soft white
   for ground.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── the three planes, inverted ──
     Was ink → s1 → s2 going lighter out of a black page. Now the page is the
     soft white and cards lift off it in pure white, so the order of lightness
     reverses while the meaning of each name is kept: ink is the ground, s1 is
     a card, s2 is something raised above a card. */
  --ink:#F7F8FA;
  --s1:#FFFFFF;
  --s2:#FFFFFF;
  --s3:#F2F4F7;

  --line:#E5E7EB;
  --line-soft:#EEF0F3;

  --text:#0D1B2A;
  --text-2:#43566A;
  --muted:#6B7C8F;

  /* Sodium was the chrome accent of the night theme — every active state, focus
     ring and brand mark reads from it. Pointing it at Petrol Teal turns the
     whole interface over to the brand in one line. */
  --sodium:#009688;
  --sodium-dim:#B2DFDB;
  --sodium-ink:#FFFFFF;

  /* ── data hues, from the guidelines' own chart ──
     Petrol teal, diesel amber, power violet, other blue. Kept in that order so
     a reader who has seen the brand deck recognises the fuels by colour. */
  --cat-1:#009688;
  --cat-2:#E8A33D;
  --cat-3:#6C5CE7;
  --cat-4:#3B82F6;
  --ms:#009688;     /* petrol */
  --hsd:#E8A33D;    /* diesel */
  --pw:#6C5CE7;     /* power  */
  --lub:#3B82F6;    /* other  */

  --good:#009688; --warn:#E8A33D; --serious:#EA7C3C; --crit:#D64545;

  --r-1:8px; --r-2:12px; --r-3:16px;

  /* Shadows on a white ground are the navy at low opacity, not black at half.
     Black over white reads as grey dirt; the brand colour reads as depth. */
  --sh-1:0 1px 2px rgba(13,27,42,.06);
  --sh-2:0 1px 3px rgba(13,27,42,.07), 0 8px 24px -8px rgba(13,27,42,.10);
  --sh-3:0 2px 6px rgba(13,27,42,.08), 0 24px 56px -16px rgba(13,27,42,.16);
}

/* ── type ──
   Inter throughout, per the guidelines. Barlow Condensed was the display face
   of the old theme; the brand specifies Inter for H1 and H2, so the condensed
   uppercase headings become Inter with weight and tracking doing the work
   instead of the compression. */
body,
h1, h2, h3, .display, .eyebrow, .brand-name, .brand-mark, .reg-lbl{
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body{ font-size:15px; line-height:1.6; letter-spacing:-.005em; }
h1, h2, h3, .display{ letter-spacing:-.022em; line-height:1.12; font-weight:700; }

/* The page title was condensed and uppercase. Inter at 40/48 Bold is what the
   guidelines call H1, and it does not need shouting. */
.page-ttl{ font-size:36px; line-height:44px; font-weight:700; text-transform:none; letter-spacing:-.025em; }
.page-sub{ color:var(--muted); font-size:15px; }

/* Small caps labels stay — they are how this interface separates a label from a
   figure — but in Inter they need more tracking and less weight to sit quietly. */
.eyebrow, .reg-lbl, .kpi-l, .card-l{
  font-weight:600; letter-spacing:.08em; font-size:11px;
}

/* ── the ground ──
   The night theme painted two radial washes over the page to suggest canopy
   light. On white that reads as a smudge, so it goes; a single, very faint
   teal wash in the top corner keeps the page from being flat paper. */
body{ background:var(--ink); color:var(--text); }
body::before{
  background:
    radial-gradient(120% 60% at 15% -20%, rgba(0,150,136,.06), transparent 62%),
    radial-gradient(90% 50% at 100% 0%, rgba(13,27,42,.035), transparent 60%) !important;
}
body::after{ display:none !important; }

/* ── chrome ── */
.topbar{
  background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.4) blur(12px);
}
.brand-mark{
  background:var(--navy, #0D1B2A); color:#fff;
  border-radius:10px; box-shadow:none;
}
.brand-name{ font-size:17px; font-weight:700; letter-spacing:-.01em; }

.rail{ background:transparent; border-right:1px solid var(--line); }
.rail-btn{ border-radius:10px; font-weight:500; color:var(--text-2); }
.rail-btn:hover{ background:#EDF0F3; color:var(--text); }
.rail-btn[data-on="true"]{
  background:var(--text); color:#fff; font-weight:600;
}
.rail-btn[data-on="true"] svg{ stroke:#fff; color:#fff; opacity:1; }
.rail-btn svg{ opacity:.75; }

/* ── surfaces ──
   A card on white is defined by its border first and its shadow second. The
   old theme leaned on shadow because there was no contrast to draw a line
   with; here a 1px cloud-gray line does most of the work. */
.panel, .card, .modal, .pick, .tbl-wrap{
  background:var(--s1);
  border:1px solid var(--line);
  border-radius:var(--r-3);
  box-shadow:var(--sh-1);
}
.panel-hd{ border-bottom:1px solid var(--line-soft); }

/* ── tables ──
   Rows separated by the softest line in the palette, and a tinted hover so a
   long credit book stays readable across a wide screen. */
.tbl th{
  color:var(--muted); font-weight:600; letter-spacing:.06em;
  border-bottom:1px solid var(--line);
  background:var(--s3);
}
.tbl td{ border-bottom:1px solid var(--line-soft); }
.tbl tbody tr:hover{ background:#F5F9F9; }

/* ── buttons, in the four the guidelines name ── */
.btn{
  border-radius:10px; font-weight:600; letter-spacing:0;
  background:var(--text); color:#fff; border:1.5px solid transparent;
  box-shadow:none;
}
.btn:hover{ background:#16293D; }
.btn-2, .btn-teal{ background:var(--sodium); color:#fff; }
.btn-2:hover, .btn-teal:hover{ background:#00877A; }
.btn-ghost{
  background:#fff; color:var(--text); border:1.5px solid var(--line);
}
.btn-ghost:hover{ background:var(--s3); border-color:#D5D9DF; }

/* ── inputs ── */
input, select, textarea{
  background:#fff; color:var(--text);
  border:1.5px solid var(--line); border-radius:10px;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--sodium);
  box-shadow:0 0 0 3px rgba(0,150,136,.13);
  outline:0;
}
input[data-bad="true"], select[data-bad="true"]{
  border-color:var(--crit); box-shadow:0 0 0 3px rgba(214,69,69,.12);
}
input[readonly]{ background:var(--s3); color:var(--muted); }

/* ── tags, the three in the guidelines ── */
.chip{
  background:var(--s3); color:var(--text-2);
  border:1px solid var(--line); border-radius:999px; font-weight:600;
}
.chip-warn{ background:#FDF1E3; border-color:#F4DFC2; color:#9A6B18; }

/* ── guards and banners ──
   The critical one keeps its red bar; on white it needs a tint behind it or
   the bar floats with nothing to anchor. */
.guard{
  background:#FDF3F3; border-left:3px solid var(--crit);
  border-radius:0 var(--r-2) var(--r-2) 0; color:var(--text);
}
.guard-ok{ background:#EDF8F6; border-left-color:var(--good); }
.banner{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-3); box-shadow:var(--sh-1);
}

/* ── the big figures ──
   The register is the one place this interface shouts, and it should keep
   doing that — but in navy, with the ghost digits behind it barely there. */
.reg-digits{ color:var(--text); }
.huge-v, .kpi-v{ color:var(--text); }

/* ── tanks ──
   The gauge is data, so it takes a data hue rather than chrome. */
.tank-fill{ opacity:.92; }
.tank-shell{ background:var(--s3); border:1px solid var(--line); }

/* ── scrollbars, so the page does not end in a dark strip ── */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:#D3D9E0; border-radius:999px; border:3px solid var(--ink);
}
*::-webkit-scrollbar-thumb:hover{ background:#BFC7D1; }

/* ── the dialog scrim ──
   Navy at 45%, not black: the page behind should read as Petro AI dimmed,
   not as a photograph with the lights off. */
.scrim{ background:rgba(13,27,42,.42); backdrop-filter:blur(3px); }

/* Anything that assumed light text on a dark ground and is not covered by a
   token. Kept explicit and short on purpose — a long list here would mean the
   tokens are not doing their job. */
.modal-hd, .modal-ft{ border-color:var(--line); }
.segs{ background:var(--s3); border:1px solid var(--line); border-radius:12px; }
.segs button{ color:var(--text-2); font-weight:600; border-radius:9px; }
.segs button[data-on="true"]{ background:#fff; color:var(--text); box-shadow:var(--sh-1); }

/* ═══════════════ the signature register ═══════════════
   The one component the old theme built as a physical object: a dark LCD with
   an orange seven-segment glow, ghost digits showing the unlit segments, and
   scanlines over the top. It is the best thing on the screen and the idea
   survives the inversion — it just becomes a paper-white meter face with the
   digits in Petrol Teal instead of a lit panel in a dark room.

   The ghost digits stay, because they are what makes it read as a meter rather
   than a number: they are the segments that are not lit. On white they have to
   be barely there — cloud gray at a whisper — or they fight the figure. */
.register{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 100%) !important;
  border:1px solid var(--line);
  box-shadow:var(--sh-2), inset 0 1px 0 #fff;
}
/* The lamp glow above the digits, and the scanlines, were both about a screen
   emitting light in the dark. Neither means anything on paper. */
.register::before{
  background:radial-gradient(80% 120% at 50% -20%, rgba(0,150,136,.055), transparent 65%) !important;
}
.register::after{ display:none !important; }

/* The ghost — a full row of 8s behind the figure, the unlit positions of a
   mechanical pump register — does not come across to a white ground, and it
   cannot be made to.

   app.html says why, in the rule itself: the unlit segments "read as dark
   slate, exactly as on a real LCD — never dim amber, which would let a ghost
   digit be misread as part of the value". That worked because on black there
   is a colour that reads as unlit. On white there is not: everything drawn is
   darker than the ground, so a ghost digit is simply a digit. The ghost row is
   also wider than most figures, so its leading 8 sits to the left of the
   number, and ₹8,42,150 arrived on screen reading as ₹88,42,150 — an order of
   magnitude, on the one screen whose whole job is money.

   Fading it did not fix that; at 58px even three per cent of navy is a clear
   shape. So it is not drawn on this theme. The markup stays (it is already
   aria-hidden), the register still shouts in tabular teal, and nothing else
   about the metaphor is lost — the digits were always the point. */
.reg-ghost{ display:none !important; }
.reg-val{ color:var(--sodium) !important; text-shadow:none !important; }
.reg-b .reg-val{ color:var(--text) !important; }
.reg-row + .reg-row{ border-top:1px solid var(--line-soft); }

.reg-period button{
  border:1px solid var(--line); background:#fff; color:var(--muted);
  font-family:Inter,sans-serif; letter-spacing:.06em;
}
.reg-period button[data-on="true"]{
  background:var(--sodium); border-color:var(--sodium); color:#fff;
}
.reg-note{ color:#9A6B18; }

/* ═══════════════ the tanks ═══════════════
   A tank was a dark cylinder with liquid in it, lit from one side. On white it
   becomes a clean vessel: a pale ground, the fuel in its own data hue, and the
   curvature reduced to a hint rather than a black edge. */
.tank-glass{
  background:#F2F4F7 !important;
  border:1px solid var(--line);
  box-shadow:inset 0 1px 3px rgba(13,27,42,.06) !important;
}
.tank-glass::after{
  background:linear-gradient(90deg, rgba(255,255,255,.55) 0%, transparent 22%,
             transparent 78%, rgba(13,27,42,.07) 100%) !important;
}
.tank-tick{ background:rgba(13,27,42,.10); }

/* The fuel bars under the tanks read as data, so they take the data hues. */
.fuelbars-hd{ font-family:Inter,sans-serif; color:var(--muted); letter-spacing:.07em; }

/* ═══════════════ the tank gauge, read at a glance ═══════════════
   The figure used to sit at the bottom-right of the tank with a heavy black
   drop shadow, and the LOW marker put its label directly above it — so on a
   part-full tank the two collided, and on a light tank the shadow was a smear.

   The percentage now floats top-right in a white pill: it never lands on the
   fuel, never lands on the LOW line, and stays legible whatever the level.
   The LOW label moves to the left end of its own line, where nothing else is. */
.tank-pct{
  top:8px; right:8px; bottom:auto;
  font-family:Inter, sans-serif; font-variant-numeric:tabular-nums;
  font-size:12.5px; font-weight:700; letter-spacing:-.01em;
  padding:3px 8px; border-radius:999px;
  background:rgba(255,255,255,.94); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(13,27,42,.08);
  text-shadow:none !important;
}
/* No `color` here on purpose. The markup sets it inline — crit when the tank is
   under its reorder level, ink when it is not — and an !important would win
   that argument and lose the warning. */

/* The red line is the reorder level, drawn on every tank, not an alarm on any
   one of them. It was a solid rule with a mono LOW label; as a dashed hairline
   with the label whispered beside it, it marks the threshold without four
   tanks all appearing to shout at once. The actual warning is the red
   "2.0 days cover" under the tank that has earned it. */
.tank-low{ background:transparent; opacity:1; height:0; border-top:1px dashed rgba(214,69,69,.55); }
.tank-low::after{
  content:'LOW'; left:4px; right:auto; top:-13px;
  font-family:Inter, sans-serif; font-size:8px; font-weight:600; letter-spacing:.1em;
  color:rgba(214,69,69,.62); background:none; padding:0;
}
.tank-lbl{ font-size:12px; font-weight:600; }
.tank-sub{ font-family:Inter, sans-serif; font-size:11px; letter-spacing:0; }

/* The fill rises when the figure changes. On a light vessel it wants a soft top
   edge so the liquid has a surface rather than a hard cut. */
.tank-fill{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }

/* ═══════════════ segmented controls ═══════════════
   Billing had a good one — a light trough with pill buttons. Products had a
   dark bar with barely visible labels, which is the same control drawn twice,
   badly the second time. They are one thing now.

   The selection animation runs as a keyframe rather than a transition because
   this app re-renders its markup on every click: a transition has nothing to
   transition from when the element is new, so it never plays. An animation on
   the active state fires each time the pill is created, which is exactly when
   it should. */
@keyframes segIn{
  from{ opacity:.4; transform:translateY(1px) scale(.985); }
  to  { opacity:1;  transform:none; }
}
@keyframes segUnderline{
  from{ transform:scaleX(0); opacity:0; }
  to  { transform:scaleX(1); opacity:1; }
}

.segs, .product-tabs{
  display:inline-flex; gap:4px; padding:4px;
  background:var(--s3); border:1px solid var(--line); border-radius:14px;
}
.segs button, .product-tabs button{
  position:relative; border:0; background:transparent; color:var(--muted);
  font-family:Inter, sans-serif; font-size:13px; font-weight:600;
  letter-spacing:0; text-transform:none;
  padding:8px 15px; border-radius:10px; cursor:pointer;
  transition:color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.segs button:hover, .product-tabs button:hover{
  color:var(--text); background:rgba(13,27,42,.045);
}
.segs button:active, .product-tabs button:active{ transform:scale(.985); }
.segs button[data-on="true"], .product-tabs button[data-on="true"]{
  background:#fff; color:var(--text);
  box-shadow:0 1px 2px rgba(13,27,42,.09), 0 0 0 1px rgba(13,27,42,.05);
  animation:segIn 240ms var(--ease-out) both;
}
/* A teal hairline under the chosen one, growing out from the middle. It is the
   only motion here, and it is over in a quarter of a second. */
.segs button[data-on="true"]::after,
.product-tabs button[data-on="true"]::after{
  content:''; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  border-radius:2px; background:var(--sodium);
  animation:segUnderline 280ms var(--ease-out) both;
}
@media (prefers-reduced-motion:reduce){
  .segs button[data-on="true"], .product-tabs button[data-on="true"],
  .segs button[data-on="true"]::after, .product-tabs button[data-on="true"]::after{
    animation:none;
  }
}

/* The rail's sub-items, the same idea one size down. */
.rail-product-sub button{
  font-family:Inter, sans-serif; font-size:12px; font-weight:500;
  border-radius:8px; padding:6px 9px;
  transition:color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.rail-product-sub button:hover{ background:rgba(13,27,42,.045); color:var(--text); }
.rail-product-sub button[data-on="true"]{
  background:rgba(0,150,136,.09); color:var(--text); font-weight:600;
  box-shadow:inset 2px 0 0 var(--sodium);
  animation:segIn 220ms var(--ease-out) both;
}
.rail-product-sub{ border-left:1px solid var(--line); }

/* ═══════════════ Products ═══════════════
   products.css was written against the dark theme and kept its own hardcoded
   surfaces — #132c37 gradients on the cards, #06141a gauges, a near-black
   trough behind the tab bar. On white those read as grey blocks with the text
   sunk into them, which is what the Products page looked like.

   Overridden here rather than edited there for the same reason as everything
   else in this file: one home for the design system, and products.css keeps
   being about layout. */
.product-kpi,
.product-tank-card,
.product-fuel-card,
.product-build-gate{
  background:#fff !important;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
}
/* A fuel card keeps a wash of its own product colour — that is how a dealer
   picks Diesel out of four cards at a glance — but at a tenth of the strength
   it needed against black. */
.product-fuel-card{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--product-tone) 7%, #fff), #fff 62%) !important;
  border-color:color-mix(in srgb, var(--product-tone) 22%, var(--line));
}
.product-kpi strong{ font-family:Inter, sans-serif; font-weight:700; letter-spacing:-.02em; }

.product-next-step,
.product-plan-list>div{ background:var(--s3) !important; }
.product-next-step{ border:1px dashed #D5DAE1; }

.product-stock-track,
.product-tank-gauge{ background:var(--s3) !important; border:1px solid var(--line); }
.product-tank-gauge span{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--product-tone) 78%, #fff), var(--product-tone)) !important;
}
.product-tank-gauge i{ border-left:1px dashed rgba(13,27,42,.28) !important; }

.product-build-icon{ background:var(--sodium); color:#fff; font-family:Inter, sans-serif; }
.product-type-icon{
  background:rgba(0,150,136,.10); border:1px solid rgba(0,150,136,.28);
  color:var(--sodium); font-family:Inter, sans-serif;
}
.product-type-card{ background:#fff; box-shadow:var(--sh-1); transition:
  transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out); }
.product-type-card:hover{
  background:#fff; border-color:var(--sodium);
  box-shadow:0 2px 6px rgba(13,27,42,.07), 0 12px 28px -12px rgba(0,150,136,.28);
  transform:translateY(-2px);
}
.product-type-card strong{ font-family:Inter, sans-serif; font-weight:700; font-size:17px; }
.product-stock-question{ background:var(--s3); }
.product-page-hd .eyebrow{ color:var(--sodium); }
.product-plan-list span,
.product-scope-note strong{ color:var(--sodium); font-family:Inter, sans-serif; }
.product-tank-values small{ font-family:Inter, sans-serif; letter-spacing:.07em; }
.product-fuel-top h2, .product-tank-head h2, .product-build-gate h2,
.product-section-heading h2{ font-family:Inter, sans-serif; letter-spacing:-.02em; }

/* The numbered workflow card on Daily Sales Entry — it was a dark slab with the
   step text nearly invisible against it. */
.product-build-gate p, .product-next-step p{ color:var(--text-2); }