:root {
  /* Brochure palette: near-black ground, steel text, gold accent.
     Token names are unchanged so every page picks this up automatically.
     --molten is the accent (was light steel, now gold); --ok and --danger stay
     green and red because they carry meaning, not branding. */
  --steel-900:#0A0C0F; --steel-850:#12161C; --steel-800:#181E27;
  --steel-700:#1E252F; --steel-600:#2A323D; --line:rgba(255,255,255,.10);
  --edge:rgba(255,255,255,.22);
  --text:#EEF2F7; --dim:#98A1AE; --dim2:#6E7681;
  --molten:#E9A23B; --molten-2:#FFC96E; --molten-ink:#150F04; --arc:#E9A23B;
  --gold-soft:rgba(233,162,59,.14);
  --ok:#57c98c; --danger:#ec7d7a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--steel-900);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 40px;
}

a { color: inherit; }

.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.wrap-wide { max-width: 1100px; margin: 0 auto; padding: 0 22px; }

/* Top nav shared across employee tool pages */
.et-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: var(--steel-850); flex-wrap: wrap; gap: 10px;
}
.et-nav-left { display: flex; align-items: center; gap: 12px; }
.et-nav-left img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.et-wordmark { font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.et-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* The office tabs live inside one <span> so a page can show or hide the lot in
   one go. That span was being revealed as display:inline, which made it a
   single flex item holding seven links as inline text -- and inline boxes do
   not reserve room for the padding on a link, so on a phone the wrapped rows
   sat on top of each other. Six pairs of tabs literally overlapped at 390px.

   display:contents drops the span itself and hands its seven links straight to
   the flex row above, where they wrap and space like every other tab. The
   pages clear the inline style rather than set one, so this stays the only
   place that decides. */
#adminNavLinks { display: contents; }

/* The Time Clock page groups the crew's tabs the same way, so it can take them
   off the nav for somebody who works at a desk. Same span, same trap: left as
   an inline box its links overlap the row above on a phone. */
#crewNavLinks { display: contents; }

/* Each tab is drawn as its own object rather than as a word in a row of words.
   Six pixels of gap between two unbordered labels reads as one long line of
   text, and the eye has to find the word breaks before it can find the link.
   The border and the ground do that work; the gap then only has to separate two
   things that already look separate. */
.et-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--dim);
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--steel-800);
  white-space: nowrap;
}
.et-link:hover { color: var(--text); background: var(--steel-700); border-color: var(--edge); }
.et-link.on { color: var(--molten); background: var(--gold-soft); border-color: var(--molten); }

/* On a phone the links have to wrap - there are up to twelve of them and they
   will not fit on one line at 390px.

   They were made to scroll sideways instead, which was worse: a row you have to
   drag to read, opening somewhere other than the left, with most of the links
   off-screen. Wrapping shows all of them at once. It is taller, and being able
   to see where you can go is worth more than the inch it costs.

   This block sits after the base rules on purpose. It carries no extra
   specificity, so written above them it lost every property they also set - the
   padding and the size here were being overridden by the desktop ones, which is
   why the tabs stayed cramped after they were supposedly loosened. */
@media (max-width: 760px) {
  .et-nav {
    padding: 10px 12px;
    gap: 8px;
    /* The logo and the user block sit on one line; the links take the full
       width underneath, aligned to the same margin as the page below them. */
    justify-content: space-between;
  }
  .et-nav-left { flex: 0 0 auto; }
  .et-user { flex: 0 0 auto; }

  .et-links {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    /* Row gap larger than the column gap. Wrapped rows sitting as close to each
       other as the tabs within a row is what made the block read as a wall. */
    gap: 10px 8px;
    margin: 2px 0 0;
  }
  .et-link {
    padding: 10px 13px;
    font-size: 13px;
  }
}
.et-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }

/* Green once the page is listening for changes, grey when it is only
   refreshing on return. Hover gives the plain-language version. */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dim2);
  flex: none;
  cursor: help;
  transition: background .2s ease, box-shadow .2s ease;
}
.live-dot.is-live {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(87, 201, 140, .18);
}
.et-logout {
  background: none; border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 7px 13px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.et-logout:hover { border-color: var(--edge); }
.admin-pill {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--arc); background: var(--gold-soft); padding: 3px 7px; border-radius: 5px;
}

/* Buttons */
.btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; border-radius: 12px; padding: 13px 20px;
  font-size: 15px; font-weight: 800; font-family: inherit;
}
.btn2-solid { color: var(--molten-ink); background: linear-gradient(180deg, var(--molten-2), var(--molten)); box-shadow: 0 6px 18px -8px rgba(233,162,59,.8); }
.btn2-solid:disabled { background: var(--steel-700); color: #5c6572; box-shadow: none; cursor: not-allowed; }
.btn2-line { background: var(--steel-800); border: 1px solid var(--edge); color: var(--text); }
.btn2-ghost { background: none; border: 1px solid var(--line); color: var(--dim); }
.btn2-danger { background: none; border: 1px solid var(--line); color: var(--danger); }

.card {
  background: var(--steel-850); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 16px;
}

.field-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); margin: 10px 2px 6px;
}
.input, select.input, textarea.input {
  width: 100%; background: var(--steel-700); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; font-size: 15px; font-family: inherit;
}
.input:focus { outline: 2px solid var(--molten); outline-offset: -1px; }
.input::placeholder { color: #6a7482; }

/* ---------------------------------------------------------------------------
   FIELDS AND DROPDOWNS ON A PHONE
   ---------------------------------------------------------------------------
   Every office page carries these, so the rules live here rather than being
   written out once per page and drifting apart.

   SIXTEEN PIXELS IS NOT A STYLE CHOICE. Safari zooms the page in whenever a
   field under 16px is focused, and it does not zoom back out. Tap a 14px
   dropdown on an iPhone and the page jumps; every page after that is being
   read at the wrong magnification until it is reloaded. Several of these
   screens were built at 13 and 14px.

   A select is also the one control whose closed text cannot be ellipsised by
   CSS, so a narrow one simply cuts a customer's name off mid-word with nothing
   to say it did. They are given the full width of their line here instead. The
   open list is drawn by the phone and shows the option in full, which is why
   the wording and the price both belong in the option text itself.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Every control, not a list of type attributes. An <input> written without a
     type is a text box, and input[type="text"] does not match it -- which is
     how the Summary bid boxes stayed at 13px while everything beside them was
     lifted. */
  input, select, textarea,
  .input, select.input, textarea.input {
    font-size: 16px;
  }
  select, select.input {
    width: 100%;
    max-width: 100%;
    /* The native arrow is drawn inside the box, and a select with no room left
       for it puts the arrow on top of the last word. */
    padding-right: 34px;
    /* Ours instead of the platform's, so there is one arrow in one place at a
       size that can be seen. */
    -webkit-appearance: none;
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--dim) 50%),
      linear-gradient(135deg, var(--dim) 50%, transparent 50%);
    background-position: right 16px center, right 11px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }
  /* Options are drawn by the phone, not by us, and inherit almost nothing --
     but the colours matter on the handsets that do honour them, or the list
     comes up white on white. */
  select option { font-size: 16px; color: var(--text); background: var(--steel-800); }
  select optgroup { font-size: 15px; font-weight: 800; color: var(--molten-2); background: var(--steel-850); }

  /* A field that is only outlined when you hover it has no outline at all on a
     phone, because there is no hover. */
  .input, select.input, textarea.input { border-color: var(--line); }
}

.error-msg2 { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 1.2em; }
.empty-state2 { color: var(--dim2); font-size: 14px; padding: 12px 4px; }

/* Support footer. Every page carries it, so a man who hits an error never has
   to guess how to reach the office. */
.et-support {
  max-width: 900px; margin: 34px auto 0; padding: 16px 18px 26px;
  border-top: 1px solid var(--line); text-align: center;
  font-size: 12.5px; color: var(--dim2); line-height: 1.7;
}
.et-support b { color: var(--dim); font-weight: 700; }
.et-support a { color: var(--molten); font-weight: 700; text-decoration: none; }
.et-support a:hover { text-decoration: underline; }