/* ===========================================================================
   ARC PRIVATE — styles for this tenant's own tools.

   Loaded after the shared stylesheet and after brand.css, so every colour
   here is still a brand token rather than a literal. Only ARC gets this file;
   it is not deployed to any other tenant.

   The Annual Engagements register reuses the shared register chrome — the
   stat tiles, pills, links and rows that the Agreement Tracker introduced.
   What follows is the part that register has and the other does not.
   =========================================================================== */

/* ---------- Annual Engagements ---------- */

/* States the agreement register has no equivalent for. An engagement that has
   run out is the loud one: an Annual Engagement does not renew, so a term
   past its end date means a fee that should have stopped. */
.ag-pill.is-ended { border-color: #b4453a; color: #b4453a; background: #fdf2f2; }
.ag-pill.is-ending { border-color: #b4762a; color: #8a5a17; background: #fdf6ec; }
.ag-pill.is-pending { border-color: var(--rule); color: var(--grey); }
.ag-pill.is-ok { border-color: var(--rule); color: var(--body); }

/* Sent, not yet signed and set up. A dashed rule because that is what the
   record is — provisional. Distinct from "Not started", which is a real
   engagement whose term simply begins later. */
.ag-pill.is-awaiting {
  border-style: dashed;
  border-color: var(--sand);
  color: var(--grey);
}

.ag-deadline.is-awaiting { border-left-style: dashed; border-left-color: var(--sand); }

/* The toggle governs everything below it, so it sits above the dates rather
   than among them, with room of its own. */
.ae-active {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}

.ag-tr.is-ended td:first-child,
.ag-tr.is-ending td:first-child { font-weight: 600; }

.ag-deadline.is-ended { border-left-color: #b4453a; color: #b4453a; }
.ag-deadline.is-ending { border-left-color: #b4762a; }
.ag-deadline.is-pending,
.ag-deadline.is-undated { border-left-color: var(--rule); color: var(--grey); }

/* The named alerts above the register. They sit outside a card so they read
   as the page speaking rather than as one more panel among several. */
.ae-alerts { margin-top: var(--s5); display: grid; gap: var(--s2); }
.ae-alerts .ag-deadline { margin: 0; }

/* The client a run of rows belongs to. A heading inside the table rather than
   a separate table each, so one sort order runs through the whole register. */
.ae-group td {
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}

.ae-group .ag-link { font-weight: 600; }

.ae-group-meta {
  margin-left: var(--s3);
  font-size: 12px;
  color: var(--grey);
}

/* The annual fee is right-aligned and the payment beside it is not, so
   without this the two columns run into each other. */
.table th.ae-paid,
.table td.ae-paid { padding-left: var(--s5); }

.ae-engagement + .ae-engagement { margin-top: var(--s4); }

.ae-engagement-head {
  display: flex;
  align-items: flex-end;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.ae-engagement-head .ag-pill { margin-bottom: 11px; }

.ae-row-term { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ae-row-source { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ae-row-term .select,
.ae-row-source .select { width: 100%; }

.ae-engagement .field { margin-bottom: var(--s4); }
.ae-engagement .ag-deadline { margin-bottom: 0; }

@media screen and (max-width: 1100px) {
  .ae-row-term,
  .ae-row-source { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 640px) {
  .ae-row-term,
  .ae-row-source { grid-template-columns: minmax(0, 1fr); }
  .ae-engagement-head { flex-wrap: wrap; }
}

/* ---------- Income Report ---------- */

/* The summary strip: four states the year's money can be in. The brand has no
   green or red, so the states are told apart the way the target bars already
   do it — solid sand for money that is in, hatched for money that is not,
   outlined for money that is not even signed. */
.fr-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fr-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--s2);
  vertical-align: -1px;
  border: 1px solid var(--sand);
}
.fr-key.is-received,
.fr-split-part.is-received { background: var(--sand); }
.fr-key.is-owing,
.fr-split-part.is-owing {
  background: repeating-linear-gradient(135deg, transparent 0 2px, var(--sand) 2px 4px);
}
.fr-key.is-scheduled,
.fr-split-part.is-scheduled {
  background: repeating-linear-gradient(135deg, transparent 0 4px, var(--on-navy-dim) 4px 5px);
  border-color: var(--on-navy-dim);
}
.fr-key.is-unsigned,
.fr-split-part.is-unsigned { background: transparent; border: 1px dashed var(--on-navy-dim); }

.fr-status-note { margin: 0 0 var(--s3); font-size: 13px; color: var(--on-navy-muted); }

.fr-status-lines { border-top: 1px solid var(--rule-dark); padding-top: var(--s2); }
.fr-status-line {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 0 var(--s1);
  font-size: 13px;
  color: var(--on-navy);
  font-variant-numeric: tabular-nums;
}

.fr-split {
  display: flex;
  height: 12px;
  margin-top: var(--s5);
  gap: 2px;
}
.fr-split:empty { display: none; }
.fr-split-part { display: block; height: 100%; border: 1px solid var(--sand); min-width: 2px; }

.fr-split + .result-sub strong { color: var(--white); font-weight: 600; }

/* Paid and owing in the upfront table, in the same marks as the strip. */
.fr-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 1px var(--s2);
  border: 1px solid var(--sand);
  color: var(--ink);
}
.fr-tag.is-received { background: var(--sand); }
.fr-tag.is-owing {
  background: repeating-linear-gradient(135deg, var(--white) 0 3px, var(--bone) 3px 5px);
}

.fr-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  margin-bottom: var(--s5);
}

.fr-bar-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 210px 96px;
  gap: var(--s4);
  align-items: center;
  padding: var(--s3) 0;
}

.fr-bar-row + .fr-bar-row { border-top: 1px solid var(--rule); }
.fr-bar-row.is-total { border-top: 2px solid var(--navy); font-weight: 600; }

.fr-bar-label { font-size: 14px; color: var(--ink); }

.fr-bar {
  position: relative;
  height: 10px;
  background: var(--bone);
  border: 1px solid var(--rule);
}

.fr-bar-fill { display: block; height: 100%; background: var(--sand); }

/* Met or beaten. Navy rather than a second accent, since the brand has no
   green and inventing one for this would be the only colour on either site
   that means something on its own. */
.fr-bar-fill.is-met { background: var(--navy); }

/* Money still sitting in the registers, shown under a what-if. Outlined
   rather than filled, so a bar that only reaches its target on a what-if can
   never be mistaken for one that has. */
.fr-bar-extra {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid var(--sand);
  background: repeating-linear-gradient(
    135deg, transparent 0 3px, var(--sand) 3px 4px);
}

/* Where the year has actually got to, against which the fill is judged. */
.fr-bar-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--ink);
}

.fr-bar-figure {
  font-size: 14px;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fr-bar-of { color: var(--grey); font-weight: 400; }

.fr-bar-state {
  font-size: 14px;
  color: var(--grey);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fr-bar-state.is-met { color: var(--ink); font-weight: 600; }
.fr-bar-state .ag-sub { font-weight: 400; }

.fr-legend { margin-top: var(--s4); }
.fr-whatif-note { color: var(--body); }

@media screen and (max-width: 1100px) {
  .fr-targets { grid-template-columns: minmax(0, 1fr); }
  .fr-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-bar-row {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: var(--s2) var(--s3);
  }
  .fr-bar { grid-column: 1 / 3; }
  .fr-bar-figure { text-align: left; }
}

/* ---------- Dashboard ---------- */

.db-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.db-group {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
}

.db-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--grey);
  letter-spacing: 0;
}

.db-actions { display: grid; }

/* A row is a link because every one of them is something to go and do, and
   the thing to do is always in another tool. */
.db-action {
  display: grid;
  grid-template-columns: 130px 240px minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-left: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--body);
}

.db-action:hover { background: var(--bone); }
.db-action.is-overdue { border-left-color: #b4453a; }
.db-action.is-soon { border-left-color: #b4762a; }
.db-action.is-ahead { border-left-color: var(--sand); }

.db-action-when { font-size: 13px; color: var(--ink); white-space: nowrap; }
.db-action-what { font-size: 14px; font-weight: 600; color: var(--ink); }
.db-action-detail { font-size: 13px; color: var(--grey); }
.db-action .ag-sub { font-weight: 400; }

.db-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
}

.db-split .section-heading { margin-top: 0; }
.db-split .table td { vertical-align: top; }

.db-renewal { display: grid; gap: var(--s2); }

.db-renewal-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  gap: var(--s4);
  align-items: center;
  padding: var(--s2) 0;
}

.db-renewal-label { font-size: 14px; color: var(--ink); }

.db-renewal-figure {
  font-size: 14px;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 1280px) {
  .db-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
  .db-action { grid-template-columns: 120px minmax(0, 1fr); }
  .db-action-detail { grid-column: 1 / 3; }
  .db-split { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .db-renewal-row { grid-template-columns: 130px minmax(0, 1fr) 120px; }
}

@media screen and (max-width: 640px) {
  .fr-status { grid-template-columns: minmax(0, 1fr); }
}