/* Back-office console.
 *
 * The opposite device to the field app: desktop, office wifi, long
 * analytical sessions (build plan 0.1). So this is dense where the field
 * app is spacious — tables, numbers aligned for comparison, everything on
 * one screen rather than one task per screen.
 */

:root {
  --navy: #0d3b66;
  --navy-dark: #082744;
  --paper: #f4f6f9;
  --ink: #10202e;
  --muted: #5b7085;
  --line: #dbe3ec;
  --white: #fff;
  --green: #17795e;
  --amber: #b25f00;
  --red: #b3261e;
  --crit: #7a1710;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
}

.top {
  background: var(--navy);
  color: #fff;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.top h1 { font-size: 17px; margin: 0; font-weight: 600; }
.top nav { display: flex; gap: 4px; margin-left: 18px; flex: 1; }
.top nav button {
  background: none; border: 0; color: #cfe0f0; font: inherit;
  padding: 7px 13px; border-radius: 6px; cursor: pointer;
}
.top nav button:hover { background: rgba(255,255,255,.1); color: #fff; }
.top nav button.on { background: var(--navy-dark); color: #fff; font-weight: 600; }
.top .who { font-size: 13px; opacity: .85; }
.top .who button {
  background: none; border: 1px solid rgba(255,255,255,.35); color: #fff;
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px;
  margin-left: 10px; cursor: pointer;
}

main { padding: 22px; max-width: 1400px; margin: 0 auto; }

/* --- the exposure headline ----------------------------------------- */
.exposure {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px 22px; margin-bottom: 18px;
}
.exposure .total { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.exposure .amount {
  font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.1; margin: 2px 0 4px;
}
.exposure .parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; }
.part {
  border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px;
  cursor: pointer; background: var(--white); text-align: left; font: inherit; width: 100%;
}
.part:hover { border-color: var(--navy); }
.part .label { font-size: 13px; color: var(--muted); }
.part .value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.part .count { font-size: 12px; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 18px; }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 18px;
}
.card h2 { margin: 0 0 3px; font-size: 15px; }
.card .sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--line); padding: 7px 9px;
}
td { padding: 8px 9px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcfe; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Severity has to be readable at a glance across a long queue. */
.sev { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; letter-spacing: .3px; }
.sev.CRITICAL { background: var(--crit); }
.sev.HIGH { background: var(--red); }
.sev.MEDIUM { background: var(--amber); }
.sev.LOW { background: var(--muted); }
.sev.INFO { background: #6b7f93; }

.pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: var(--muted); }
.pill.ESCALATED { background: #fde8e6; color: var(--red); font-weight: 600; }
.pill.ACKNOWLEDGED { background: #fff4e5; color: var(--amber); }
/* Trip status. An unsettled trip is the one worth the eye — a settled one
   is finished business. */
.pill.OPEN { background: #e5f0ff; color: var(--navy); font-weight: 600; }
.pill.RETURNING { background: #fff4e5; color: var(--amber); font-weight: 600; }
.pill.PENDING_SETTLEMENT { background: #fff4e5; color: var(--amber); font-weight: 600; }
.pill.SETTLED { background: #e7f4ef; color: var(--green); }
.pill.DISPUTED { background: #fde8e6; color: var(--red); font-weight: 600; }
/* QuickBooks queue states. A dead letter is the one that needs a person. */
.pill.PENDING { background: #eef2f7; color: var(--muted); }
.pill.SENT { background: #e7f4ef; color: var(--green); }
.pill.FAILED { background: #fff4e5; color: var(--amber); font-weight: 600; }
.pill.DEAD_LETTER { background: #fde8e6; color: var(--red); font-weight: 600; }

button.act {
  font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--white); cursor: pointer;
}
button.act:hover { border-color: var(--navy); }
button.act.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
button.act.danger { background: var(--red); color: #fff; border-color: var(--red); }
button.act:disabled { opacity: .5; cursor: not-allowed; }

.error { background: #fdecea; border: 1px solid #f5c6c2; color: var(--red); padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; }
.ok { background: #e7f4ef; border: 1px solid #b8ded1; color: var(--green); padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 18px 4px; font-style: italic; }

/* --- login ---------------------------------------------------------- */
/* --- signing in ------------------------------------------------------
   The whole viewport, not a small card adrift in the middle of one. This
   is the first screen anybody sees and the only one a stranger sees, so it
   carries the company's name at a size that reads as deliberate.

   The left panel is painted with --navy, which applyBranding() overwrites
   with the org's own colour, so a client's palette reaches the sign-in page
   without a client's NAME being anywhere in this source. No image files:
   the texture is two gradients, which cost nothing to serve and cannot
   fail to load. */
.signin {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

/* favourhost's green, used as an ACCENT against this system's navy rather
   than as the palette. The two products are sold by the same company and
   should look related; they are not the same product, and a wholly green
   back office would say they were. */
:root {
  --fh-green: #16a34a;
  --fh-green-lit: #4ade80;
}

.signin .brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Room at the bottom for the plant to stand in, so the line about the
     field app is not printed across a silo. */
  padding: 44px 46px 150px;
  color: #fff;
  background:
    radial-gradient(90% 70% at 82% 92%, rgba(22, 163, 74, .30), transparent 62%),
    radial-gradient(120% 90% at 8% 4%, rgba(255, 255, 255, .14), transparent 58%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
}

/* The plant along the bottom of the panel: silos, pipework, a filler line
   and crates coming off it. Drawn rather than photographed — a photograph
   of somebody else's factory is a licence to keep track of and a face that
   is not this client's, and this one costs 2KB and cannot fail to load. */
.signin .plant {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: auto;
  max-height: 46%;
  pointer-events: none;
}

.signin .brand .rule {
  width: 54px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--fh-green-lit), var(--fh-green));
  margin: 0 0 20px;
}
.signin .brand .for-org {
  font-size: 13px; letter-spacing: .3px; text-transform: uppercase;
  opacity: .72; margin: 0 0 10px; position: relative; z-index: 1;
}

.signin .brand > div:first-child { position: relative; z-index: 1; }
.signin .brand h1 {
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -.4px;
}
.signin .brand .lede { font-size: 17px; line-height: 1.5; max-width: 30ch; opacity: .92; margin: 0; }
.signin .brand ul { list-style: none; padding: 0; margin: 26px 0 0; position: relative; z-index: 1; }
.signin .brand li {
  font-size: 14px; line-height: 1.45; opacity: .88;
  padding-left: 20px; margin-bottom: 12px; position: relative;
}
.signin .brand li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--fh-green-lit);
  box-shadow: 0 0 10px rgba(74, 222, 128, .45);
}
.signin .brand .foot {
  font-size: 12px; opacity: .75; position: relative; z-index: 1;
  /* Sits in the clear sky above the plant rather than across it. */
  margin-bottom: 4px;
  text-shadow: 0 1px 6px rgba(8, 39, 68, .8);
}

.signin .panel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 34px; background: var(--paper);
}
.signin .panel-inner { width: 100%; max-width: 400px; }
.signin .panel h2 { font-size: 23px; margin: 0 0 6px; letter-spacing: -.2px; }
.signin .panel .sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.signin .panel .card { padding: 24px; margin: 0; box-shadow: 0 1px 2px rgba(16, 32, 46, .06); }
.signin .panel input { padding: 11px 12px; font-size: 15px; }
.signin .panel button.act.primary { width: 100%; padding: 11px; font-size: 15px; }
.signin .panel .row-end { margin-top: 18px; gap: 10px; }
.signin .panel .row-end button.act:not(.primary) { width: auto; }

/* One column on a phone or a narrow window, with the panel shrunk to a
   header rather than dropped — the name is the reassurance that this is
   the right address. */
@media (max-width: 880px) {
  .signin { grid-template-columns: 1fr; min-height: 100vh; }
  .signin .brand { padding: 30px 26px 90px; }
  .signin .brand h1 { font-size: 25px; margin-bottom: 8px; }
  .signin .brand .lede { font-size: 15px; }
  .signin .brand ul, .signin .brand .foot { display: none; }
  .signin .plant { max-height: 90px; opacity: .8; }
  .signin .panel { padding: 26px 20px 40px; align-items: flex-start; }
}

/* The old centred card, kept for the enrolment screen which is not a
   sign-in and should not look like one. */
.login { max-width: 380px; margin: 90px auto; }
.login .card { padding: 26px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 5px; }
input, textarea, select {
  width: 100%; font: inherit; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--white);
}
textarea { min-height: 78px; resize: vertical; }

/* --- modal ---------------------------------------------------------- */
.backdrop {
  position: fixed; inset: 0; background: rgba(8,39,68,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal { background: var(--white); border-radius: 10px; padding: 22px; width: 100%; max-width: 520px; }
.modal h3 { margin: 0 0 6px; font-size: 16px; }
.row-end { display: flex; gap: 9px; justify-content: flex-end; margin-top: 16px; }

/* --- printable statement -------------------------------------------- */
@media print {
  .top, .no-print { display: none !important; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .card { border: 0; padding: 0; margin-bottom: 20px; }
  table { font-size: 12px; }
}

/* Unread count beside a heading. Small, quiet, and never the only signal —
   the row itself is still legible without it. */
.badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  margin-left: 8px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}