/* =====================================================================
   MineOS operator console.

   Grounded in the weighbridge house, not in dashboard convention. The
   palette is galvanised steel and poured concrete; the one warm colour is
   the amber of the weight indicator the operator is already looking at
   across the room, and it appears nowhere except on live mass readouts.

   Every number in this system is data that must align, so figures are set
   in a mono face with tabular figures throughout.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root {
  --steel-900: #14171A;
  --steel-800: #1E2328;
  --steel-700: #2B3238;
  --steel-500: #5A656E;
  --steel-300: #9AA4AC;
  --concrete:  #DEDCD6;
  --concrete-2:#EBE9E4;
  --paper:     #FFFFFF;

  --indicator: #FFB000;   /* amber LED — live mass only, nowhere else */
  --signal:    #C4302B;   /* exception */
  --verified:  #1B7A4B;   /* clean, released */
  --info:      #2D6CA2;

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --r: 3px;
  --shadow: 0 1px 2px rgba(20,23,26,.08), 0 4px 12px rgba(20,23,26,.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--body);
  background: var(--concrete);
  color: var(--steel-900);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- masthead ---------- */
header {
  background: var(--steel-900);
  color: var(--concrete-2);
  padding: 0 20px;
  display: flex; align-items: center; gap: 28px;
  height: 52px;
  border-bottom: 3px solid var(--indicator);
}
.brand {
  font-family: var(--display);
  font-size: 24px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.brand span { color: var(--indicator); }

nav { display: flex; gap: 2px; margin-left: auto; }
nav button {
  font-family: var(--display);
  font-size: 15px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  background: none; border: none; color: var(--steel-300);
  padding: 8px 14px; cursor: pointer; border-radius: var(--r);
}
nav button:hover { color: var(--paper); background: var(--steel-700); }
nav button[aria-current="page"] { color: var(--steel-900); background: var(--indicator); }
nav button:focus-visible { outline: 2px solid var(--indicator); outline-offset: 2px; }

.whoami { font-size: 12px; color: var(--steel-300); font-family: var(--mono); }
.whoami button {
  background: none; border: 1px solid var(--steel-700); color: var(--steel-300);
  padding: 3px 8px; border-radius: var(--r); cursor: pointer; margin-left: 8px;
  font-family: var(--mono); font-size: 11px;
}

main { padding: 20px; max-width: 1500px; margin: 0 auto; }

/* ---------- section headings ---------- */
h2 {
  font-family: var(--display);
  font-size: 21px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 10px;
}
h2 .sub {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--steel-500);
}

/* ---------- cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid rgba(20,23,26,.10);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 16px;
}
.grid { display: grid; grid-template-columns: 400px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

/* ---------- THE SIGNATURE: the indicator panel ----------
   A weighbridge indicator is an amber seven-segment readout on black. The
   operator's mental model is that display, so the console shows the same
   thing. This is the only place amber appears.                            */
.indicator {
  background: var(--steel-900);
  border: 1px solid var(--steel-700);
  border-radius: var(--r);
  padding: 14px 18px 12px;
  margin-bottom: 16px;
  position: relative;
}
.indicator::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  pointer-events: none; border-radius: var(--r);
}
.indicator-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--steel-500); margin-bottom: 2px;
}
.indicator-value {
  font-family: var(--mono); font-weight: 600;
  font-size: 46px; line-height: 1.05;
  color: var(--indicator);
  text-shadow: 0 0 18px rgba(255,176,0,.30);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px;
}
.indicator-value .unit { font-size: 16px; color: #8a6200; letter-spacing: .1em; }
.indicator-value.idle { color: var(--steel-700); text-shadow: none; }

.readout-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--steel-700); margin-top: 12px;
  border-radius: var(--r); overflow: hidden;
}
.readout-cell { background: var(--steel-800); padding: 8px 12px; }
.readout-cell .k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--steel-500);
}
.readout-cell .v {
  font-family: var(--mono); font-size: 17px; font-weight: 500;
  color: var(--concrete-2); font-variant-numeric: tabular-nums;
}
.readout-cell .v.net { color: var(--indicator); }

/* ---------- forms ---------- */
label {
  display: block; font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-500); margin: 12px 0 4px;
}
input, select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid rgba(20,23,26,.20); border-radius: var(--r);
  font-family: var(--body); font-size: 14px; background: var(--paper);
  color: var(--steel-900);
}
input.num-input { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--steel-900);
  box-shadow: 0 0 0 3px rgba(20,23,26,.08);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

button.primary {
  width: 100%; margin-top: 18px; padding: 13px;
  background: var(--steel-900); color: var(--concrete-2);
  border: none; border-radius: var(--r); cursor: pointer;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
button.primary:hover { background: var(--steel-700); }
button.primary:disabled { background: var(--steel-500); cursor: not-allowed; }
button.primary.depart { background: var(--verified); }
button.primary.depart:hover { background: #15613b; }

button.ghost {
  background: none; border: 1px solid rgba(20,23,26,.25);
  padding: 5px 10px; border-radius: var(--r); cursor: pointer;
  font-family: var(--mono); font-size: 11px; color: var(--steel-700);
}
button.ghost:hover { background: var(--concrete-2); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel-500);
  text-align: left; padding: 7px 10px;
  border-bottom: 2px solid var(--steel-900);
  white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid rgba(20,23,26,.07); }
tbody tr:hover { background: var(--concrete-2); }
td.r, th.r { text-align: right; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- state ---------- */
.tag {
  display: inline-block; font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px; border: 1px solid;
}
.tag.ok    { color: var(--verified); border-color: rgba(27,122,75,.35); background: rgba(27,122,75,.07); }
.tag.warn  { color: var(--signal);   border-color: rgba(196,48,43,.35);  background: rgba(196,48,43,.07); }
.tag.info  { color: var(--info);     border-color: rgba(45,108,162,.35); background: rgba(45,108,162,.07); }
.tag.mute  { color: var(--steel-500);border-color: rgba(90,101,110,.30); }

.msg { padding: 11px 14px; border-radius: var(--r); margin-bottom: 14px; font-size: 13px; }
.msg.err  { background: rgba(196,48,43,.09); border-left: 3px solid var(--signal); }
.msg.ok   { background: rgba(27,122,75,.09); border-left: 3px solid var(--verified); }
.msg .hint { display: block; margin-top: 5px; color: var(--steel-500); font-size: 12px; }

.empty {
  padding: 32px 20px; text-align: center; color: var(--steel-500);
  font-family: var(--mono); font-size: 12px;
}

/* dwell time earns attention as it grows — the operator needs to notice a
   truck that has been on site too long without reading every row */
.dwell { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dwell.long { color: var(--signal); font-weight: 600; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--steel-900);
}
.login {
  width: 340px; background: var(--paper); padding: 30px;
  border-radius: var(--r); border-top: 3px solid var(--indicator);
}
.login .brand { color: var(--steel-900); font-size: 30px; margin-bottom: 2px; }
.login .tagline {
  font-family: var(--mono); font-size: 11px; color: var(--steel-500);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px;
}

.stat-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.stat { background: var(--paper); border: 1px solid rgba(20,23,26,.10); border-radius: var(--r); padding: 14px; }
.stat .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-500); }
.stat .v { font-family: var(--mono); font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 3px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- modal ---------- */
.backdrop {
  position: fixed; inset: 0; background: rgba(20,23,26,.55);
  display: grid; place-items: start center; padding: 40px 20px; overflow: auto; z-index: 50;
}
.modal {
  background: var(--paper); width: 100%; max-width: 720px;
  border-radius: var(--r); border-top: 3px solid var(--indicator);
  box-shadow: 0 24px 60px rgba(20,23,26,.35);
}
.modal.wide { max-width: 940px; }
.modal-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid rgba(20,23,26,.10);
}
.modal-head h3 {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.modal-head .x {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--steel-500); padding: 0 4px;
}
.modal-body { padding: 20px; }
.modal-foot {
  padding: 14px 20px; border-top: 1px solid rgba(20,23,26,.10);
  display: flex; gap: 8px; justify-content: flex-end; background: var(--concrete-2);
}
.modal-foot button.primary { width: auto; margin: 0; padding: 9px 18px; font-size: 14px; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar input { max-width: 260px; }
.toolbar .spacer { margin-left: auto; }
button.add {
  background: var(--steel-900); color: var(--concrete-2); border: none;
  padding: 8px 16px; border-radius: var(--r); cursor: pointer;
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
button.add:hover { background: var(--steel-700); }

/* ---------- definition rows ---------- */
.dl { display: grid; grid-template-columns: 160px 1fr; gap: 4px 16px; font-size: 13px; }
.dl dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-500); padding-top: 3px;
}
.dl dd { margin: 0; }

.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--steel-900); margin-bottom: 14px; }
.tabs button {
  background: none; border: none; padding: 8px 14px; cursor: pointer;
  font-family: var(--display); font-size: 14px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--steel-500);
}
.tabs button[aria-selected="true"] { color: var(--steel-900); background: var(--concrete-2); }

.checks { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 2px 14px; }
.checks label {
  display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 3px 0;
  font-family: var(--body); font-size: 12px; letter-spacing: 0;
  text-transform: none; color: var(--steel-900); cursor: pointer;
}
.checks input[type=checkbox] { width: auto; margin-top: 2px; }
.checks .mfa { color: var(--signal); font-size: 9px; font-family: var(--mono); }
.perm-group {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel-500);
  margin: 14px 0 4px; padding-bottom: 3px; border-bottom: 1px solid rgba(20,23,26,.10);
}

/* =====================================================================
   Mobile / narrow screens.

   The console was drawn for a weighbridge-house monitor, but it is opened
   just as often on a phone at the gate or on the pit floor. Everything below
   lives inside media queries, so the desktop layout is untouched — this only
   reflows the same components when the viewport gets narrow.
   ===================================================================== */

/* Tablet and down: the two-up form split becomes one column. */
@media (max-width: 720px) {
  .row2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  main { padding: 12px; }

  /* Masthead: brand and identity stay on the top line; the nav drops beneath
     as a single horizontally-scrollable strip rather than overflowing. */
  header {
    height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px 14px;
  }
  .brand { font-size: 20px; order: 1; }
  .whoami { order: 2; margin-left: auto; }
  nav {
    order: 3; width: 100%; margin-left: 0;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 4px; padding-bottom: 2px;
  }
  nav::-webkit-scrollbar { height: 0; }
  nav button { white-space: nowrap; padding: 7px 12px; }

  /* Wide tables scroll within their card instead of stretching the page. */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Definition lists stack label over value. */
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dt { padding-top: 8px; }

  /* Toolbars wrap; the search field takes the full width. */
  .toolbar { flex-wrap: wrap; }
  .toolbar input { max-width: none; flex: 1 1 100%; }
  .toolbar .spacer { display: none; }

  /* 16px inputs stop iOS from zooming the page in on focus. */
  input, select, textarea { font-size: 16px; }
  input.num-input { font-size: 18px; }

  /* The amber readout is the signature, but 46px is too tall on a phone. */
  .indicator-value { font-size: 36px; }

  /* Modal fills the small screen with a comfortable margin. */
  .backdrop { padding: 14px 8px; }
  .modal-body { padding: 16px; }
  .modal-head, .modal-foot { padding-left: 16px; padding-right: 16px; }

  /* Login card must never exceed the viewport on a 320px phone. */
  .login-wrap { padding: 16px; }
  .login { width: 100%; max-width: 360px; padding: 24px; }
}

/* ---------- site map ----------
   The map fills the working area; the side panel is the fleet list. Pins are
   coloured by how recently the machine reported, because on a mine a machine
   that has not said where it is for two hours is the one to go and look for. */
.map-wrap { display: grid; grid-template-columns: 330px 1fr; gap: 14px; align-items: stretch;
            height: calc(100vh - 140px); min-height: 480px; }
.map-side { display: flex; flex-direction: column; min-height: 0; }
.map-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
.map-stats .stat { padding: 10px 12px; }
.map-stats .stat .v { font-size: 22px; }
.map-list { flex: 1; overflow: auto; background: var(--paper); border: 1px solid rgba(20,23,26,.10);
            border-radius: var(--r); }
.mrow { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center;
        padding: 8px 12px; border-bottom: 1px solid rgba(20,23,26,.07); cursor: pointer; }
.mrow:hover { background: var(--concrete-2); }
.mrow.sel { background: rgba(255,176,0,.14); }
.mrow .k { font-size: 11px; color: var(--steel-500); }
.mrow .age { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--steel-300); display: inline-block; }
.dot.live { background: var(--verified); }
.dot.stale { background: var(--indicator); }
.dot.lost { background: var(--signal); }
.live-t { color: var(--verified); } .stale-t { color: #8a6200; } .lost-t { color: var(--signal); }
.none-t { color: var(--steel-500); } .ok-t { color: var(--verified); } .warn-t { color: var(--signal); }

.map-main { position: relative; min-height: 0; border: 1px solid rgba(20,23,26,.15);
            border-radius: var(--r); overflow: hidden; background: var(--steel-700); }
#map { position: absolute; inset: 0; }
#map.pinning { cursor: crosshair; }
#map.pinning .leaflet-interactive { cursor: crosshair; }
.map-legend { position: absolute; left: 10px; bottom: 26px; z-index: 800;
              background: rgba(20,23,26,.82); color: var(--concrete-2); padding: 6px 10px;
              border-radius: var(--r); font-size: 11px; display: flex; gap: 12px; align-items: center;
              font-family: var(--mono); }
.pin-key::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
                   margin-right: 5px; vertical-align: -1px; background: var(--steel-300); }
.pin-key.live::before { background: var(--verified); }
.pin-key.stale::before { background: var(--indicator); }
.pin-key.lost::before { background: var(--signal); }
.pin-key.down::before { background: var(--paper); border: 2px solid var(--signal); width: 6px; height: 6px; }
.map-updated { margin-left: 8px; color: var(--steel-300); }
#pinbtn.active { background: var(--indicator); color: var(--steel-900); border-color: var(--indicator); }

/* machine pin */
.pin { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
       justify-content: center; font-family: var(--display); font-weight: 700; font-size: 13px;
       letter-spacing: .04em; color: var(--paper); border: 3px solid var(--paper);
       box-shadow: 0 2px 6px rgba(0,0,0,.45); background: var(--steel-500); }
.pin.live { background: var(--verified); }
.pin.stale { background: var(--indicator); color: var(--steel-900); }
.pin.lost { background: var(--signal); }
.pin.down { border-color: var(--signal); border-style: dashed; }

/* popups in the console's voice, not Leaflet's */
.leaflet-popup-content-wrapper { border-radius: var(--r); font-family: var(--body); font-size: 13px; }
.leaflet-popup-content { margin: 12px 14px; line-height: 1.45; }
.map-pop .k { font-size: 11px; color: var(--steel-500); }
.map-pop .hint { font-size: 11px; color: var(--signal); margin-top: 4px; }
.pop-t { margin-top: 6px; border-collapse: collapse; }
.pop-t td { padding: 1px 8px 1px 0; font-size: 12px; vertical-align: top; }
.pop-t td:first-child { color: var(--steel-500); font-family: var(--mono); font-size: 10px;
                        letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.pop-actions { margin-top: 8px; display: flex; gap: 4px; }
.pop-actions button { font-size: 11px; padding: 3px 8px; }
.leaflet-container { font-family: var(--body); }
.leaflet-container a.leaflet-popup-close-button { color: var(--steel-500); }

/* customer receipt tick */
.receipt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer;
           white-space: nowrap; }
.receipt input { width: auto; margin: 0; }
.receipt.done { color: var(--verified); cursor: default; }

@media (max-width: 900px) {
  .map-wrap { grid-template-columns: 1fr; height: auto; }
  .map-list { max-height: 220px; }
  .map-main { height: 60vh; }
}