:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1c232c;
  --line: #2b3440;
  --ink: #e6edf3;
  --muted: #8b98a5;
  --accent: #4a9eff;
  /* The PetroSelect mark is #004179. That navy is legible on white but
     too dark to read against this dark ground, so the dark theme uses a
     lifted tint of the same hue and the light theme uses the mark's own
     colour. */
  --brand: #3d8fd4;
  --brand-ink: #06263f;
  --ok: #3fb950;
  --warn: #d29922;
  --band: rgba(74, 158, 255, 0.22);
  --zero: #c99a3f;
  --radius: 8px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8fa; --panel: #fff; --panel-2: #f0f3f6; --line: #d8dee4;
    --ink: #1f2328; --muted: #636c76; --band: rgba(74, 158, 255, 0.20);
    --zero: #9a6b12;
    --brand: #004179; --brand-ink: #ffffff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.screen { min-height: 100vh; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.pad { padding: 24px; }
.spacer { flex: 1; }

/* ------------------------------------------------------------- sign in */
#login { display: grid; place-items: center; }

/* The sign-in panel used to be a .card; it is .signin now, and .card belongs
   to the specification panels on the unit tabs. The old rule pinned every card
   to 360px, which is why it had to go rather than simply be left alone. */

label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }

input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  padding: 9px 10px;
  font: inherit;
}
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }
button.link {
  background: none; color: var(--muted); font-weight: 400; padding: 4px 6px;
}
button.link:hover { color: var(--ink); }

.error { color: #f85149; margin: 0; font-size: 13px; }

/* ----------------------------------------------------------------- app */
.bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}

.pill {
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.pill.live { color: var(--ok); border-color: var(--ok); }
.pill.live::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ok); margin-right: 6px;
  vertical-align: 1px;
}

.layout { display: grid; grid-template-columns: 240px 1fr; align-items: start; }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; } }

#sidebar {
  border-right: 1px solid var(--line);
  padding: 14px;
  min-height: calc(100vh - 45px);
}
#sidebar h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 16px 0 6px;
}
#sidebar h2:first-child { margin-top: 0; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.list button {
  background: none; color: var(--ink); font-weight: 400;
  width: 100%; text-align: left; padding: 7px 9px; border-radius: 6px;
}
.list button:hover { background: var(--panel-2); }
.list button.on { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
.list .sub { display: block; font-size: 11px; color: var(--muted); }

#main { padding: 16px; }

.jobhead {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.jobhead h2 { margin: 0 0 2px; font-size: 17px; }
.jobhead p { margin: 0; }

.range { display: flex; gap: 4px; margin-left: auto; }
.range button {
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
  font-weight: 400; padding: 5px 11px; font-size: 13px;
}
.range button.on { color: var(--ink); border-color: var(--accent); }

/* live value tiles */
.tiles {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.tile {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px;
}
.tile .name {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.tile .val {
  font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.tile .unit { font-size: 12px; color: var(--muted); font-weight: 400; }

/* ------------------------------------------------- company and unit pages */

.page { padding: 18px 20px 28px; }

/* Breadcrumbs live in the top bar so the client always knows whose data they
   are looking at, which matters most for the operator who has several. */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.crumbs .sep { color: var(--muted); font-style: normal; }
.crumbs .crumb { color: var(--muted); }
.crumbs button.crumb { cursor: pointer; }
.crumbs button.crumb:hover { color: var(--ink); text-decoration: underline; }

.companyhead {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.companyhead img, .companyhead .initials {
  width: 52px; height: 52px; border-radius: 10px; object-fit: contain;
  background: var(--panel); border: 1px solid var(--line); flex: none;
}
.companyhead .initials {
  display: grid; place-items: center; font-weight: 700; font-size: 19px;
  color: var(--brand);
}
.companyhead h1 { font-size: 20px; margin: 0; }

.unitcards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.unitcard {
  text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; cursor: pointer;
  color: inherit; font: inherit; display: block; width: 100%;
}
.unitcard:hover { border-color: var(--accent); }
/* An unlicensed unit is still the client's hardware, so it is shown - just
   plainly enough that it does not look like a fault. */
.unitcard.unlicensed { opacity: .72; }
.unitcard.unlicensed:hover { border-color: var(--line); }

.uc-head { display: flex; align-items: baseline; gap: 8px; }
.uc-code { font-weight: 700; font-size: 15px; }
.uc-state {
  margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.uc-state.on { color: var(--ok); border-color: var(--ok); }
.uc-state.idle { color: var(--warn); border-color: var(--warn); }
.uc-name { color: var(--muted); font-size: 12px; margin-top: 1px; }
.uc-pipe { margin-top: 10px; font-size: 13px; font-weight: 600; }
.uc-pipe .muted { font-weight: 400; color: var(--muted); }
.uc-foot { margin-top: 5px; }
.unitcard .lifebar { margin-top: 8px; }

.unithead {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
}
.unithead h1 { font-size: 19px; margin: 0; }
.unithead button { margin-left: auto; }

/* tabs */
.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  margin-bottom: 16px; overflow-x: auto;
}
.tabs button {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
  padding: 8px 12px; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }

.tabpanel { display: grid; gap: 12px; align-content: start; }
/* The live tab holds the original two-column job layout, which brings its own
   spacing; the grid above would fight it. */
#tab-live { display: block; }
#tab-live[hidden] { display: none; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; max-width: 680px;
}
.card.wide { max-width: none; }
.card h3 { margin: 0 0 10px; font-size: 14px; }
.card h4 {
  margin: 16px 0 6px; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.cardhead { display: flex; align-items: flex-start; gap: 12px; }
.cardhead h3 { margin-bottom: 2px; }
.cardhead a { margin-left: auto; white-space: nowrap; }

/* Capped rather than full width: a label/value pair stretched across 1400px
   puts the number so far from its name that the pair stops reading as one. */
table.spec {
  border-collapse: collapse; width: 100%; max-width: 480px; font-size: 13px;
}
table.spec th {
  text-align: left; font-weight: 400; color: var(--muted);
  padding: 4px 14px 4px 0; white-space: nowrap; width: 1%;
}
table.spec td { padding: 4px 0; font-variant-numeric: tabular-nums; }
table.spec td .u { color: var(--muted); font-size: 11px; margin-left: 4px; }
table.spec tr + tr th, table.spec tr + tr td {
  border-top: 1px solid var(--line);
}
/* The taper is a real grid, not label/value pairs, so it needs its own head. */
table.spec.grid { max-width: 720px; }
table.spec.grid th { color: var(--muted); width: auto; padding-right: 18px; }
table.spec.grid td { padding-right: 18px; }
table.spec.grid thead th { font-size: 11px; }

.lifewrap { margin: 4px 0 14px; max-width: 720px; }
.lifetext { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.lifetext strong { color: var(--ink); font-size: 14px; }

.notice {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; color: var(--muted);
  font-size: 13px; max-width: 680px;
}

/* charts */
.chart {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 12px; padding: 10px 12px 4px;
}
.chart header {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
}
.chart header .name { font-weight: 600; font-size: 13px; }
.chart header .unit { font-size: 12px; color: var(--muted); }
.chart header .now {
  margin-left: auto; font-variant-numeric: tabular-nums; font-size: 13px;
}
.chart .plot { position: relative; height: 130px; }
.chart .plot canvas {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
}
/* The cursor layer must not swallow the pointer, or the chart under it would
   stop reporting where the mouse is. */
.chart .plot canvas.cursor { pointer-events: none; }

/* Readout that follows the pointer: every channel at one instant. Fixed
   position so it is never clipped by a scrolling chart column. */
.crosshair {
  position: fixed; z-index: 40; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  font-size: 12px; max-width: 340px;
}
.crosshair .when {
  font-variant-numeric: tabular-nums; font-weight: 600;
  margin-bottom: 5px; white-space: nowrap;
}
.crosshair .when .env {
  display: block; font-weight: 400; font-size: 10.5px; color: var(--muted);
}
.crosshair table { border-collapse: collapse; width: 100%; }
.crosshair th {
  text-align: left; font-weight: 400; color: var(--muted);
  padding: 1px 10px 1px 0; white-space: nowrap;
}
.crosshair td {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.crosshair td .u { color: var(--muted); font-size: 10.5px; margin-left: 3px; }
.crosshair td.rng {
  color: var(--muted); font-size: 10.5px; padding-left: 10px;
}

/* Licence state. Theme-aware like the rest of the page: an expiry notice that
   is unreadable in light mode is worse than none, because the client would
   simply not see it. */
:root {
  --lic-warn-bg: #40320d; --lic-warn-ink: #f5d78a; --lic-warn-line: #6b5416;
  --lic-bad-bg: #431c1c;  --lic-bad-ink: #f3b0b0;  --lic-bad-line: #7a2d2d;
  --lic-off-ink: #d08a8a;
}
@media (prefers-color-scheme: light) {
  :root {
    --lic-warn-bg: #fff8e0; --lic-warn-ink: #6b5000; --lic-warn-line: #e0c56a;
    --lic-bad-bg: #ffeaea;  --lic-bad-ink: #8a1f1f;  --lic-bad-line: #e3a5a5;
    --lic-off-ink: #9a3b3b;
  }
}

.licence {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}
.licence.warn {
  background: var(--lic-warn-bg);
  color: var(--lic-warn-ink);
  border: 1px solid var(--lic-warn-line);
}
.licence.bad {
  background: var(--lic-bad-bg);
  color: var(--lic-bad-ink);
  border: 1px solid var(--lic-bad-line);
}
#units button.unlicensed { opacity: .6; }
#units button.unlicensed .sub { color: var(--lic-off-ink); }

/* The resolution label sits with the range buttons: it explains what those
   buttons just did to the data. */
.rangewrap { display: flex; align-items: center; gap: 10px; }
#resolution { white-space: nowrap; }

/* Pipe-string condition. The bar is the point of the panel: a percentage in
   text does not convey "this string is nearly used up" at a glance. */
.fatigue { display: grid; gap: 10px; margin-bottom: 6px; }
.string {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  display: grid;
  gap: 4px;
}
.stringname { font-size: 13px; font-weight: 600; }
.lifebar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.lifebar span { display: block; height: 100%; background: var(--ok); }
.lifebar span.warm { background: var(--warn); }
.lifebar span.hot { background: #d1493f; }


/* =====================================================================
   Sign-in gateway.

   The layout follows the supplied PetroSelect template, but written as
   plain CSS rather than pulling Tailwind and Google Fonts from a CDN.
   That is a functional decision, not a tidiness one: this portal is used
   from Iranian networks and from well sites on cellular links where
   fonts.googleapis.com and cdn.tailwindcss.com are commonly unreachable.
   A sign-in page that renders unstyled - or hangs waiting on a CDN - is a
   sign-in page the intended users cannot rely on.

   Brand colour is sampled from the logo (#004179) instead of the
   template's indigo, so the page matches the mark it sits beside.
   ===================================================================== */
.gateway {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0;
  background: var(--bg);
}

.gwbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { object-fit: contain; }
.wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.support { display: flex; align-items: center; gap: 14px; font-size: 12px;
           color: var(--muted); }
.support a { color: var(--accent); text-decoration: none; font-weight: 500; }
.support a:hover { text-decoration: underline; }
.helpdesk {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--panel-2, rgba(127, 140, 160, .14));
  color: var(--ink) !important;
  font-size: 12px;
}

.gwmain {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: center;
}

.pitch { display: grid; gap: 18px; align-content: center; padding: 0 24px; }
.pill-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-size: 12px;
  font-weight: 500;
}
.pill-live i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.pitch h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lede { margin: 0; max-width: 30rem; color: var(--muted); line-height: 1.6; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 6px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: 18px; font-weight: 600; color: var(--ink); }
.facts dd { margin: 0; font-size: 12px; color: var(--muted); }

.signin {
  width: 100%;
  max-width: 27rem;
  justify-self: center;
  display: grid;
  gap: 14px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(8, 20, 40, .10);
}
.signin-head { display: flex; align-items: flex-start; justify-content: space-between; }
.signin-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.signin-head .sub { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.signin label { font-size: 12px; font-weight: 500; color: var(--ink); }
.signin button {
  margin-top: 4px;
  padding: 11px 16px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 500;
}
.signin button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand) 85%, #000);
}
.cardfoot {
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}
.cardfoot a { color: var(--accent); }

.gwfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: 12px;
  color: var(--muted);
}
.gwfoot a { color: var(--muted); }

.barlogo { object-fit: contain; margin-right: 2px; }
.only-sm { display: none; }

@media (max-width: 900px) {
  .gwmain { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px; }
  .pitch { display: none; }
  .only-sm { display: block; object-fit: contain; }
  .hide-sm { display: none; }
  .gwbar { padding: 12px 16px; }
}