/* ProAgri Client Portal - the approval history screen ("Approved").
   Scoped to .pa-hist-*; mounted at /history by views/history.js.

   THE ONE SETTLED SCREEN. Every other screen in this portal is a queue with work
   on it. This one has none, and it should not look like the others with the
   buttons taken out. So it is built on the two things this CI gives "done":
   navy, and calm.

     - It opens on a filled NAVY ledger panel rather than a white section head.
       Navy is approved/done in the ProAgriMedia palette, and on this screen done
       is the entire content, so the first thing the eye lands on is the answer.
     - The rows are a TIMELINE, not a list. The question a client opens this
       screen with is always "when", so the shape of the screen is a chronology:
       one navy rail, a tick node per approval, a month marker where the rail
       crosses into a new month.
     - Cards float on the canvas with big radii and soft shadow, like the rest of
       the app. They carry no hover lift and no pointer affordance, because there
       is nothing to open: the record is read-only and must never imply otherwise.

   Colour discipline. Navy carries all of it. The ONLY red on this screen is the
   outstanding-work dot in the ledger and the failed-load block - the two things
   that are not settled. There is no green in this CI and none is invented here.

   Every value resolves against css/tokens.css. */

.pa-hist-view {
  /* The timeline geometry, in one place, so the rail, the nodes, the month
     markers and the ghost rows in the empty state cannot drift apart. The rail
     runs down the centre of the gutter column and the node is centred on it. */
  --pa-hist-gutter: 44px;
  --pa-hist-node: 36px;
  --pa-hist-rail: 22px;

  /* The quiet ink for this screen. --pa-text-muted clears 4.5:1 on white but
     NOT on the tinted grounds this screen puts small text on: it measures
     4.26:1 inside a --pa-surface-3 pill, 4.23:1 on the --pa-bg canvas and
     4.37:1 on the --pa-danger-soft block. Pulled a third of the way toward the
     ink it clears 6:1 on all three, and it is still visibly a secondary tone.
     --pa-text-faint is worse again (2.6:1 on white) and is not used here for
     anything a client has to read - "Approved by <name>" is information, not
     decoration. */
  --pa-hist-quiet: color-mix(in srgb, var(--pa-text-muted) 68%, var(--pa-text));

  display: flex;
  flex-direction: column;
  gap: var(--pa-space-6);
}

/* ── The ledger panel ────────────────────────────────────────────────────────
   The page heading and the two figures, in one filled navy block. It is the
   screen's identity: nothing else in the portal opens on a dark panel, and this
   is the screen that has earned one. */

.pa-hist-ledger {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pa-space-5);
  padding: var(--pa-space-6);
  background: var(--pa-brand-accent);
  color: var(--pa-on-dark);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow-lg);
}

.pa-hist-ledger-main {
  flex: 1 1 26ch;
  min-width: 0;
}

/* No figures to sit beside, so the copy is allowed a wider measure rather than
   leaving half a navy panel empty. This is the loading and failed-load state. */
.pa-hist-ledger.is-bare { padding-bottom: var(--pa-space-5); }
.pa-hist-ledger.is-bare .pa-hist-ledger-note { max-width: 74ch; }

.pa-hist-ledger-eyebrow {
  margin: 0 0 var(--pa-space-2);
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
  color: var(--pa-on-dark-muted);
}

/* The page's one biggest title, so it is the one at 700. Poppins has the full
   weight range; the 400 that used to sit in this file was a leftover from
   Instrument Serif and rendered every display slot here limp. */
.pa-hist-ledger-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--pa-track-tight);
  color: var(--pa-on-dark);
}

/* Set on the body face at body size, not shrunk to a caption. It is the one
   sentence that tells a first-time client what this screen is for, and 46ch of
   13px is a column too thin to read as an introduction. */
.pa-hist-ledger-note {
  margin: var(--pa-space-3) 0 0;
  max-width: 46ch;
  font-size: var(--pa-text-base);
  line-height: 1.6;
  color: var(--pa-on-dark-muted);
}

/* The two figures. A <dl>, so the number and its label are bound to each other
   for a screen reader rather than being two loose runs of text. */
.pa-hist-figs {
  display: flex;
  flex: 0 1 auto;
  gap: var(--pa-space-6);
  margin: 0;
}

.pa-hist-fig {
  display: flex;
  flex-direction: column-reverse; /* number above label, DOM order dt-then-dd */
  gap: var(--pa-space-1);
  min-width: 0;
}

/* Every figure but the first is separated by a hairline of the panel's own ink
   rather than by a border colour from the light palette. */
.pa-hist-fig + .pa-hist-fig {
  padding-left: var(--pa-space-6);
  border-left: 1px solid color-mix(in srgb, var(--pa-on-dark) 22%, transparent);
}

.pa-hist-fig-n {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--pa-track-tight);
  color: var(--pa-on-dark);
  font-variant-numeric: tabular-nums;
}

/* Outstanding work is the one thing on this screen that is not settled, and it
   sits on navy - where red TEXT would be two dark colours touching and fail
   contrast. So it is marked the way this shape language marks anything: a small
   solid accent against the calm field, not a recoloured numeral. */
.pa-hist-fig-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa-brand-primary) 24%, transparent);
}

.pa-hist-fig-l {
  font-size: var(--pa-text-sm);
  line-height: 1.4;
  color: var(--pa-on-dark-muted);
  white-space: nowrap;
}

/* ── The timeline ──────────────────────────────────────────────────────────── */

/* The timeline is capped short of the shell width. At 1180px a card holds a
   title on the left and a date on the right with 500px of nothing between them,
   which reads as a table that lost its columns. Held near a reading measure the
   two halves stay related and the rows read as entries rather than as rules. */
.pa-hist-body {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-6);
  width: 100%;
  max-width: 920px;
}

.pa-hist-group {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
}

/* Month marker. It sits ON the rail rather than above it, so a new month reads
   as a station on the chronology rather than as a new list starting. */
.pa-hist-month {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-base);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-accent-ink);
}

.pa-hist-month-mark {
  position: relative;
  flex: none;
  width: var(--pa-hist-gutter);
  align-self: stretch;
}

/* A small hollow navy ring, centred on the rail. Hollow, not filled, so a month
   station is visibly a different kind of point from an approval tick. */
.pa-hist-month-mark::before {
  content: '';
  position: absolute;
  left: calc(var(--pa-hist-rail) - 5px);
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: var(--pa-radius-pill);
  border: 2px solid var(--pa-brand-accent);
  background: var(--pa-bg);
}

.pa-hist-month-count {
  padding: 2px var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-accent-soft-strong);
  color: var(--pa-accent-ink);
  font-family: var(--pa-brand-font);
  font-size: var(--pa-text-xs);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pa-hist-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rail. One line behind every node in the group, fading out at the foot so
   the chronology ends softly instead of being cut off by a hard stop. */
.pa-hist-list::before {
  content: '';
  position: absolute;
  left: calc(var(--pa-hist-rail) - 1px);
  top: 0;
  bottom: var(--pa-space-5);
  width: 2px;
  border-radius: var(--pa-radius-pill);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--pa-brand-accent) 26%, transparent) 0%,
    color-mix(in srgb, var(--pa-brand-accent) 26%, transparent) 62%,
    transparent 100%
  );
}

.pa-hist-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--pa-hist-gutter) minmax(0, 1fr);
  align-items: start;
  gap: var(--pa-space-3);
}

/* The tick. Solid navy on the rail, ringed in the canvas colour so the rail
   appears to pass behind it rather than stopping at it. */
.pa-hist-node {
  display: grid;
  place-items: center;
  width: var(--pa-hist-node);
  height: var(--pa-hist-node);
  margin-left: calc(var(--pa-hist-rail) - (var(--pa-hist-node) / 2));
  margin-top: var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
  box-shadow: 0 0 0 5px var(--pa-bg), var(--pa-shadow-sm);
}

/* Floating panel, no hairline, no hover state. The absence of a hover state is
   deliberate: a card that lifts under the pointer promises something to open,
   and there is nothing here to open. */
.pa-hist-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pa-space-5);
  min-width: 0;
  padding: var(--pa-space-4) var(--pa-space-5);
  background: var(--pa-surface);
  border: 0;
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-sm);
}

.pa-hist-main {
  flex: 1 1 auto;
  min-width: 0;
}

.pa-hist-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-base);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-text);
  overflow-wrap: anywhere;
}

.pa-hist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin-top: var(--pa-space-2);
}

/* Pills, per the shape language. The type pill is navy-tinted because the type
   is what the item IS; the delivery month is a plain neutral pill so the two do
   not compete. */
.pa-hist-tag {
  padding: 2px var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
  color: var(--pa-hist-quiet);
  font-size: var(--pa-text-xs);
  line-height: 1.5;
  white-space: nowrap;
}

.pa-hist-tag-type {
  background: var(--pa-accent-soft-strong);
  color: var(--pa-accent-ink);
  font-weight: 500;
}

/* The stamp. The date is the fact this screen is opened for, so it is set as
   ink; the clock under it is the tie-breaker and stays quiet. */
.pa-hist-stamp {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.pa-hist-when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.pa-hist-date {
  font-size: var(--pa-text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--pa-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pa-hist-time {
  font-size: var(--pa-text-xs);
  line-height: 1.4;
  color: var(--pa-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pa-hist-by {
  margin: 0;
  font-size: var(--pa-text-xs);
  line-height: 1.4;
  color: var(--pa-hist-quiet);
  overflow-wrap: anywhere;
}

/* The 50-row cap note. Aligned to the card column so it reads as a footnote to
   the timeline rather than as a new element on the page. */
.pa-hist-cap {
  margin: 0;
  padding-left: calc(var(--pa-hist-gutter) + var(--pa-space-3));
  font-size: var(--pa-text-xs);
  line-height: 1.5;
  color: var(--pa-hist-quiet);
  max-width: var(--pa-reading-max);
}

/* ── Nothing approved yet ────────────────────────────────────────────────────
   This empty state carries more weight than the queue screens' do. On those,
   empty means "you are finished" and the client already knew it. Here, a client
   who HAS approved something and lands on a bare panel will conclude their
   record was lost - the one thing this screen exists to disprove. So it states
   what will appear, and it draws the shape it will appear in. */

.pa-hist-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--pa-space-3);
  padding: var(--pa-space-7) var(--pa-space-5);
  background: var(--pa-surface);
  border: 0;
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow);
}

/* Navy, and ringed twice, so the mark reads as the same tick that will fill the
   timeline once there is one - scaled up, not a different symbol. */
.pa-hist-none-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
  box-shadow: 0 0 0 8px var(--pa-accent-soft), 0 0 0 16px color-mix(in srgb, var(--pa-brand-accent) 4%, transparent);
}

.pa-hist-none-title {
  margin: var(--pa-space-3) 0 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-text);
}

.pa-hist-none-note {
  margin: 0;
  max-width: 48ch;
  font-size: var(--pa-text-base);
  line-height: 1.6;
  color: var(--pa-text-muted);
}

.pa-hist-none .pa-btn { margin-top: var(--pa-space-2); }

/* The shape of what will be here. Faint, decorative, aria-hidden in the markup,
   and geometrically identical to the real timeline above so the empty screen and
   the populated one are recognisably the same screen. */
.pa-hist-ghost {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  width: 100%;
  max-width: 380px;
  margin: var(--pa-space-6) 0 0;
  padding: var(--pa-space-5) 0 0;
  list-style: none;
  border-top: 1px solid var(--pa-border);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0.25) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0.25) 100%);
}

.pa-hist-ghost-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: var(--pa-space-3);
}

.pa-hist-ghost-node {
  width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-accent-soft-strong);
}

.pa-hist-ghost-card {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  padding: var(--pa-space-3) var(--pa-space-4);
  border-radius: var(--pa-radius);
  background: var(--pa-surface-2);
  box-shadow: var(--pa-shadow-sm);
}

.pa-hist-ghost-bar {
  height: 8px;
  width: 78%;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
}

.pa-hist-ghost-bar.is-short { width: 42%; }

/* ── Failed load ─────────────────────────────────────────────────────────────
   The one red block on the screen, and deliberately nothing like the empty
   state: that one is a white panel with a navy tick because it states a settled
   fact about the client. This states a fact about US, so it is tinted, carries
   the alert mark and owns the only button on the screen. A client must never
   read "we could not ask the CRM" as "you have approved nothing". */

.pa-hist-fail {
  display: flex;
  align-items: center;
  gap: var(--pa-space-4);
  /* Held to the timeline's column so the error sits where the rows it replaces
     would have sat, rather than spanning wider than the content it stands in
     for. */
  width: 100%;
  max-width: 920px;
  padding: var(--pa-space-5);
  background: var(--pa-danger-soft);
  border: 0;
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-sm);
}

.pa-hist-fail-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  color: var(--pa-danger);
  box-shadow: var(--pa-shadow-sm);
}

.pa-hist-fail-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
}

.pa-hist-fail-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--pa-track-heading);
  /* --pa-brand-ink is the AA-safe red ink; the raw red is a fill colour only. */
  color: var(--pa-brand-ink);
}

.pa-hist-fail-note {
  margin: 0;
  font-size: var(--pa-text-sm);
  line-height: 1.5;
  color: var(--pa-hist-quiet);
}

.pa-hist-fail .pa-btn { flex: none; }

/* ── Narrower than a laptop ──────────────────────────────────────────────────
   Below 900px the intro sentence and the two figures stop fitting on one line
   without crowding each other, so the figures take a band of their own under a
   hairline of the panel's own ink. They split the width evenly there, which
   reads as a pair of stats rather than as a ragged tail on the right edge. */

@media (max-width: 899px) {
  .pa-hist-ledger { align-items: stretch; }

  .pa-hist-figs {
    width: 100%;
    gap: var(--pa-space-5);
    padding-top: var(--pa-space-4);
    border-top: 1px solid color-mix(in srgb, var(--pa-on-dark) 22%, transparent);
  }

  .pa-hist-fig { flex: 1 1 0; }
  .pa-hist-fig + .pa-hist-fig { padding-left: var(--pa-space-5); }
}

/* ── Wider ───────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .pa-hist-view {
    --pa-hist-gutter: 56px;
    --pa-hist-rail: 28px;
  }

  .pa-hist-ledger { padding: var(--pa-space-7); }
  .pa-hist-ledger-title { font-size: var(--pa-text-3xl); }
  .pa-hist-card { padding: var(--pa-space-5) var(--pa-space-6); }
  .pa-hist-title { font-size: var(--pa-text-md); }
  .pa-hist-none { padding: var(--pa-space-8) var(--pa-space-6); }
}

/* ── Phone ───────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .pa-hist-view {
    --pa-hist-gutter: 32px;
    --pa-hist-node: 26px;
    --pa-hist-rail: 16px;
    gap: var(--pa-space-5);
  }

  .pa-hist-ledger {
    /* A 32px corner on a panel that is nearly viewport-wide reads as a phone
       bezel, so the shell panels step down a size here as they do app-wide. */
    padding: var(--pa-space-5);
    border-radius: var(--pa-radius-lg);
  }

  .pa-hist-ledger-title { font-size: var(--pa-text-xl); }
  .pa-hist-ledger-note { font-size: var(--pa-text-sm); }

  /* The band itself is set up above, at 899px; only the phone-sized figures and
     a tighter split are restated here. */
  .pa-hist-figs { gap: var(--pa-space-4); }
  .pa-hist-fig + .pa-hist-fig { padding-left: var(--pa-space-4); }
  .pa-hist-fig-n { font-size: var(--pa-text-2xl); }
  .pa-hist-fig-l { white-space: normal; }

  /* The card goes to one column: title, tags, then the stamp on its own line
     aligned LEFT with the title rather than stranded on the right edge of a
     narrow card. It keeps its own line so the dates still scan vertically. */
  .pa-hist-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pa-space-3);
    padding: var(--pa-space-4);
    border-radius: var(--pa-radius);
  }

  .pa-hist-stamp {
    align-items: flex-start;
    text-align: left;
    padding-top: var(--pa-space-3);
    border-top: 1px solid var(--pa-border);
  }

  .pa-hist-when {
    flex-direction: row;
    align-items: baseline;
    gap: var(--pa-space-2);
  }

  .pa-hist-cap { padding-left: 0; }

  .pa-hist-none { padding: var(--pa-space-6) var(--pa-space-4); }
  .pa-hist-none-mark { width: 60px; height: 60px; }
  .pa-hist-none-note { font-size: var(--pa-text-sm); }
  .pa-hist-none .pa-btn { width: 100%; }

  /* The mark and the message keep one line; only the button drops to its own
     full-width row, where it is a comfortable thumb target. */
  .pa-hist-fail {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: var(--pa-space-4);
    border-radius: var(--pa-radius);
  }
  .pa-hist-fail .pa-btn { flex: 1 1 100%; }
}