/* ═══════════════════════════════════════════════════════════════
   ADMIN + OFFICE DASHBOARD · WORK LEDGER
   One grouped work surface for operational roles, plus a sales workspace that
   leads with the work due now.
   ═══════════════════════════════════════════════════════════════ */

/* ─── HEADER ─────────────────────────────────────────────────── */
.adm-mhdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.adm-mhdr--controls {
  justify-content: flex-end;
  padding: 0;
  margin: 0 0 8px;
  border: 0;
}
.adm-mhdr__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.adm-mhdr__day {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.adm-mhdr__date {
  font-size: 14px;
  color: var(--text-2);
}
.adm-mhdr__scope {
  display: inline-flex;
  background: var(--surface-hi);
  border-radius: var(--r-pill);
  padding: 3px;
  border: 1px solid var(--border);
}
.adm-mhdr__scope-tab {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  text-decoration: none;
  transition: all 0.12s;
}
.adm-mhdr__scope-tab:hover {
  color: var(--text-1);
}
.adm-mhdr__scope-tab.is-active {
  background: var(--surface);
  color: var(--text-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.adm-mhdr__alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-1);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--r-md);
}
.adm-mhdr__alert i {
  color: var(--warning-text);
}
.adm-mhdr__alert-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--brass-lo);
}

/* [wave-ui-polish] NOTHING SLIPS banner. Reuses the .kpi-card stat-tile
   treatment (dashboard.css) — top accent bar, mono uppercase label,
   display-font value — instead of inventing a new stat pattern, and the
   app's real --danger/--success tokens for the leaking/clean states
   instead of the ad hoc warning-only palette .adm-mhdr__alert uses. */
.adm-mhdr__nothing-slips {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 16px 18px 14px;
  margin-bottom: 16px;
  animation: risein 0.4s ease both;
}
.adm-mhdr__nothing-slips::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.adm-mhdr__nothing-slips.is-clean::before {
  background: linear-gradient(90deg, #15803d, var(--success));
}
.adm-mhdr__nothing-slips.is-leaking::before {
  background: linear-gradient(90deg, #b91c1c, var(--danger));
}
.adm-mhdr__nothing-slips-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.adm-mhdr__nothing-slips-number {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}
.adm-mhdr__nothing-slips-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.adm-mhdr__nothing-slips-headline i {
  margin-left: auto;
  font-size: 15px;
}
.adm-mhdr__nothing-slips.is-clean .adm-mhdr__nothing-slips-headline i {
  color: var(--success);
}
.adm-mhdr__nothing-slips.is-leaking .adm-mhdr__nothing-slips-headline i {
  color: var(--danger);
}
.adm-mhdr__nothing-slips-details {
  margin-top: 6px;
}
.adm-mhdr__nothing-slips-details summary {
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
}
.adm-mhdr__nothing-slips-details[open] summary {
  margin-bottom: 8px;
}
.adm-mhdr__nothing-slips-details .adm-queue__list {
  margin-top: 4px;
}

/* [#1398] One house ledger, with queue groups contributing rows rather than
   twelve separate cards. Group headings disappear with their empty group. */
.dashboard-ledger {
  display: block;
  animation: risein 0.28s ease both;
}
.dashboard-ledger__group {
  padding: 0;
}
.dashboard-ledger__group + .dashboard-ledger__group {
  border-top: 1px solid var(--border);
}
.dashboard-ledger__group .adm-queue__title {
  margin: 0;
  padding: 8px 14px;
  background: var(--surface-lo);
  border: 0;
  border-bottom: 1px solid var(--border-lo);
}
/* No row stripe: the row's own badge and the group dot carry the state. */
.dashboard-ledger__row.ledger__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}
/* [design-standardization #28] "Start production" is a button_to, so its real
   flex sibling in the row is the <form> wrapper, not the .dashboard-ledger__action
   button inside it — display:contents drops the form out of layout so every
   row's action (link_to or button_to) behaves identically as a flex item. */
.dashboard-ledger__row form {
  display: contents;
}
.dashboard-ledger__action {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-1);
  font: 600 11px var(--font-ui);
  text-decoration: none;
  cursor: pointer;
}
.dashboard-ledger__action:hover {
  border-color: var(--brass);
  color: var(--brass-lo);
}
.dashboard-ledger__quiet {
  margin: 0;
  padding: 26px 18px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
}
.dashboard-ledger__quiet i {
  margin-right: 7px;
  color: var(--success);
}
.dashboard-ledger__foot {
  justify-content: flex-start;
  font-size: 12px;
  color: var(--text-2);
}
.dashboard-ledger__foot a {
  color: var(--brass-lo);
  font-weight: 600;
  text-decoration: none;
}

/* ─── WORK LEDGER ───────────────────────────────────────────── */
.adm-queues,
.adm-queues > *,
.adm-queue,
.adm-queue__row {
  min-width: 0;
  max-width: 100%;
}

/* ─── LEFT: ACTION QUEUES ───────────────────────────────────── */
.adm-queues {
  display: block;
}
.adm-queue {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 16px 18px 14px;
  animation: risein 0.4s ease both;
}
.adm-queue__title {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  /* [design-standardization #28] Bumped from 13px now that the explainer
     paragraph (and its own 11px line) no longer sits under it — this is the
     group's only heading now, so it reads at a proper heading size. Stays
     sentence-case/sans, matching how these titles already read, rather than
     adopting the uppercase-mono lane-label style from .leads-ledger__group-label
     (a different ledger's convention, not this one's). */
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-lo);
}
/* [design-standardization #28] The row stays nowrap (dot and count/meta stay
   pinned on the top line) — only the label itself wraps, inside its own
   shrinkable box. */
.adm-queue__title-text {
  flex: 1 1 auto;
  min-width: 0;
}
.adm-queue__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}
.adm-queue__dot--danger {
  background: var(--danger);
}
.adm-queue__dot--warn {
  background: var(--warning);
}
.adm-queue__dot--info {
  background: var(--brass);
}
.adm-queue__count {
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}
.adm-queue__count small {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}
/* The way out of a queue, beside the queue's name. Quiet link voice, not a
   button: it is a destination, not an action on the rows. */
.adm-queue__head-link {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s;
}
.adm-queue__head-link:hover {
  color: var(--brass-lo);
}
.dashboard-ledger__queue-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  color: inherit;
  text-decoration: none;
}
.dashboard-ledger__queue-link:hover {
  background: var(--surface-lo);
}
.dashboard-ledger__queue-label {
  min-width: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
}
.dashboard-ledger__queue-link .adm-queue__count {
  margin-left: auto;
}
.dashboard-ledger__queue-action {
  flex: 0 0 auto;
  color: var(--brass-lo);
  font-size: 12px;
  font-weight: 600;
}
.dashboard-ledger__queue-action i {
  margin-left: 4px;
}
.adm-queue__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.adm-queue__frame {
  display: contents;
}
.adm-queue__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--border-lo);
}
.adm-queue__row:last-child {
  border-bottom: 0;
}
.adm-queue__link {
  display: flex;
  /* Centred, not baseline: the row mixes a 12px mono ref, a 13px name and
     11-12px meta, and baseline alignment sat them high against the row's own
     centred action button. Everything on the row now shares one centreline. */
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.adm-queue__link:hover {
  color: var(--brass-lo);
}
.adm-queue__ref {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brass-lo);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.adm-queue__who {
  font-size: 13px;
  color: var(--text-1);
  flex: 1;
  /* [#1188] Keep a readable stub of the customer's name in the narrow 2-up
     admin grid — before this, a long row collapsed it to a single letter and
     the whole point of the queue (who to call) disappeared. */
  min-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-queue__reason {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.adm-queue__reason--wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
}
.adm-queue__amount {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.adm-queue__more {
  padding: 8px 0 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}

.adm-queue__backlog {
  flex-shrink: 0;
  color: var(--danger);
  font-weight: 600;
  white-space: nowrap;
}
.adm-queue__total-link {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
}
.adm-queue__total-link:hover {
  color: var(--brass-lo);
}

/* [#1188] Per-row owner badge — the AI works a lead's first ten days, the
   office owns it after that. */
.adm-queue__owner {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.adm-queue__owner--ai {
  background: var(--brass-soft);
  color: var(--brass-lo);
}
.adm-queue__owner--office {
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber, #f59e0b);
}

/* [#1188 / W2-C finding] A rejected Estimate stays in the pricing queue, so its
   row has to report the rejection. .adm-queue__frame is `display: contents`,
   which makes the banner a direct flex item of the row — pin it to its own line
   so it never competes with the Approve/Reject controls for width. */
.adm-queue__rejected {
  flex-basis: 100%;
  color: var(--text-2);
}
.adm-queue__rejected strong {
  color: var(--danger);
}

/* [#1188 review F4] The signed-retail release row carries a job number, a
   customer, an amount and a release button; in the 2-up grid the signed-age
   had nothing left and truncated to "Si…". Give it its own full line, same
   treatment as the permit row's jurisdiction detail. */
.adm-queue__row--release {
  flex-wrap: wrap;
  gap: 8px;
}
.adm-queue__row--release .adm-queue__link {
  flex-wrap: wrap;
  row-gap: 2px;
  /* This one wraps onto two lines (the signed-age takes its own), so its
     lines stack from the top rather than centring as one tall box. */
  align-items: flex-start;
  align-content: center;
}
.adm-queue__signed-age {
  flex-basis: 100%;
  white-space: normal;
}

/* [#1188] Permit rows carry a defer control alongside the link, and their
   jurisdiction/age/next-follow-up detail is too long to share one line in the
   admin overview's 2-up grid — it drops to its own line instead of being
   crushed to a single character. */
.adm-queue__row--permit {
  flex-wrap: wrap;
  gap: 8px;
}
.adm-queue__row--permit .adm-queue__link {
  flex-wrap: wrap;
  row-gap: 2px;
}
.adm-queue__row--permit .adm-queue__reason {
  flex-basis: 100%;
  white-space: normal;
}

/* Inline discount approve/reject UI */
.adm-queue__row--discount {
  flex-wrap: wrap;
  gap: 8px;
}
.adm-queue__actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.adm-queue__btn {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  cursor: pointer;
  transition: all 0.1s;
  text-decoration: none;
}
@media (pointer: coarse) {
  .adm-queue__link,
  .adm-queue__more a,
  .adm-queue__reason a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .adm-queue__btn {
    min-height: 44px;
  }
}
.adm-queue__btn:hover {
  border-color: var(--text-3);
}
.adm-queue__btn--ok {
  background: var(--brass-lo);
  border-color: var(--brass-lo);
  color: white;
}
.adm-queue__btn--ok:hover {
  background: #695329;
  border-color: #695329;
}
.adm-queue__btn--no {
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.3);
}
.adm-queue__btn--no:hover {
  border-color: var(--danger);
  background: rgba(220, 38, 38, 0.05);
}
.adm-queue__reject {
  width: 100%;
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.adm-queue__reject-input {
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-lo);
}

.adm-queue--clear {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-3);
  grid-column: 1 / -1;
}
.adm-queue__clear-emoji {
  font-size: 24px;
  color: var(--s-complete);
  margin-bottom: 4px;
}

/* ─── RIGHT: WIDGETS ────────────────────────────────────────── */
.adm-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.adm-widget {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 14px 16px 12px;
  animation: risein 0.4s ease both;
}
.adm-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-lo);
}
.adm-widget__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.adm-widget__sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
}
.adm-widget__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}
.adm-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.adm-widget__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--border-lo);
  font-size: 12.5px;
}
.adm-widget__row:last-child {
  border-bottom: 0;
}
.adm-widget__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.adm-widget__link:hover {
  color: var(--brass-lo);
}
.adm-widget__when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  min-width: 50px;
}
.adm-widget__who {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.adm-widget__msg {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.adm-widget__ref {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brass-lo);
  flex-shrink: 0;
}
.adm-widget__empty {
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

.sales-crew-pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

/* Sales keeps the actual work at the leading edge and reserves a narrow
   reference column for activity. The shell sidebar already consumes width,
   so this stacks before a small laptop compresses queue rows. On My Day this
   pipeline sits under the itinerary, which owns the full width above it. */
.dashboard-myday__pipeline {
  margin-top: 22px;
}
.sales-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(272px, 0.48fr);
  gap: 18px;
  align-items: start;
}
.sales-workspace__queues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sales-workspace__queues .adm-queue--clear {
  grid-column: 1 / -1;
}
.sales-workspace__reference {
  min-width: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
/* The shell may be a drawer or a persistent sidebar at similar viewport
   widths, so the dashboard responds to its real working area instead. */
@media (max-width: 900px) {
  .adm-queue__link {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
}

/* [design-standardization #28] Below this, the sidebar/drawer eats enough
   width that the longer queue titles (e.g. "Signed retail scope awaiting
   office release") wrap. Step the size down and switch the dot/count to
   top-alignment so a two-line title doesn't center them oddly against its
   own height. */
@media (max-width: 640px) {
  .adm-queue__title {
    align-items: flex-start;
    font-size: 13px;
  }
  .adm-queue__dot {
    margin-top: 4px;
  }
}

@media (max-width: 768px) {
  .adm-mhdr {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .adm-mhdr__day {
    font-size: 22px;
  }
  .adm-queue__link {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
}

@media (max-width: 1160px) {
  .sales-workspace {
    grid-template-columns: 1fr;
  }
  .sales-workspace__reference {
    max-width: 720px;
  }
}

@media (max-width: 700px) {
  .sales-workspace__queues {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  /* [design-standardization #28] The row's action ("Start production", "Book",
     "Settle", "Chase", "Call") used to sit beside a `calc(100% - 90px)`
     link box, but real row content (job number, customer, amount, and for
     release/permit rows a second wrapped line) already fills that width at
     this size — the action button was left overflowing onto its own line,
     hugging the left edge instead of reading as a deliberate control. Every
     queue row now gets the same explicit two-part mobile layout: row text on
     top (full width, wraps freely), action button as a full-width line
     below it — applies uniformly across all 5 queues rather than guessing a
     per-row-type width split. */
  .dashboard-ledger__row.ledger__row {
    align-items: stretch;
    flex-wrap: wrap;
    padding-right: 10px;
  }
  /* The link is the full-width top part here, so its own content wraps and
     stacks from the top instead of centring as one tall box. The desktop
     centreline rule does not apply to a wrapped block. */
  .dashboard-ledger__row .adm-queue__link {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 2px;
  }
  .dashboard-ledger__action {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    min-width: 76px;
    min-height: 44px;
  }
}