/* Action Queue — the support console's front page.
   Descended from at-risk.css (same layout scale and token fallbacks), stripped
   to the two card types this queue has. Gone with the At-Risk page: the filter
   chip bar, the resolve form and its confirmation flash, the closed/example/
   awaiting pills, the reply quote and move-in sequence blocks. The queue mostly
   clears itself; the one manual control is the struggling card's Dismiss
   (reason required, posts to #support-escalations — migration 229). */

.aq-main { padding: 24px 32px 64px; max-width: 960px; margin: 0 auto; }

.aq-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.aq-title { margin: 0; font-size: 22px; font-weight: 600; }
.aq-count { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }

.aq-hint { font-size: 13px; color: var(--n-500, #64748b); margin-bottom: 20px; line-height: 1.5; }

.aq-list { display: flex; flex-direction: column; gap: 24px; }

/* ─── Groups ────────────────────────────────────────────────────────── */
/* Two labelled groups rather than one list: missed calls and struggling
   tenants are different calls to make, and missed-above-struggling is a rule
   worth stating rather than leaving as an apparent coincidence of sorting. */

.aq-group { display: flex; flex-direction: column; gap: 10px; }
.aq-group__title {
  margin: 0 0 2px; font-size: 12px; font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--n-700, #334155);
}
.aq-group__title .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ─── Card ──────────────────────────────────────────────────────────── */

.aq-card {
  border: 1px solid var(--n-200, #e2e8f0); border-radius: 8px; background: #fff;
  padding: 14px 16px;
}

/* A missed call outranks everything else in the queue, so it carries the KISS
   Red left rule and a faint tint. Deliberately not a fully red card: the text
   still has to be comfortable to read while someone is on the phone. */
.aq-card--missed {
  border-color: var(--kiss-red, #D80812);
  border-left-width: 3px;
  background: #fffafa;
}

.aq-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 8px;
}

.aq-card__age {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--n-500);
  white-space: nowrap;
}

.aq-card__name { font-size: 15px; font-weight: 600; color: var(--n-900, #0f172a); }
.aq-card__meta { font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ─── Pills ─────────────────────────────────────────────────────────── */

.aq-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 4px;
  background: var(--n-100, #f1f5f9); color: var(--n-700, #334155);
  border: 1px solid var(--n-200, #e2e8f0);
  white-space: nowrap;
}
.aq-pill--missed { background: var(--kiss-red, #D80812); color: #fff; border-color: var(--kiss-red, #D80812); }
/* Which of the three lock situations. Darker than a neutral pill so it reads as
   the card's classification rather than incidental metadata. */
.aq-pill--signal { background: var(--n-800, #1e293b); color: #fff; border-color: var(--n-800, #1e293b); }

/* ─── Detail blocks ─────────────────────────────────────────────────── */

/* The opening line for the call. Sits directly under the tenant name because it
   is the one thing the agent must read before dialling — the three lock
   situations look near-identical by failure count and are different calls. */
.aq-card__hint {
  font-size: 13px; line-height: 1.5; margin-top: 8px;
  padding: 8px 10px; border-radius: 6px;
  background: var(--n-50, #f8fafc);
  border-left: 2px solid var(--n-400, #94a3b8);
  color: var(--n-800, #1e293b);
}
.aq-card--missed .aq-card__hint { border-left-color: var(--kiss-red, #D80812); }

.aq-card__errors {
  font-size: 12.5px; margin-top: 8px; padding: 8px 10px;
  background: var(--n-50, #f8fafc); border-radius: 6px; color: var(--n-700, #334155);
}

/* ─── Actions ───────────────────────────────────────────────────────── */

.aq-card__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.aq-btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px;
  padding: 7px 12px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--n-200, #e2e8f0);
  background: #fff; color: var(--n-800, #1e293b);
}
.aq-btn:hover { background: var(--n-50, #f8fafc); }

/* Every card in this queue exists because somebody needs a phone call, so the
   call button carries the brand red rather than sitting level with the link. */
.aq-btn--call {
  background: var(--kiss-red, #D80812); color: #fff;
  border-color: var(--kiss-red, #D80812); font-weight: 500;
}
.aq-btn--call:hover { background: #b8060f; }

.aq-btn:disabled { opacity: 0.55; cursor: default; }
.aq-btn:disabled:hover { background: #fff; }

/* ─── Dismiss (struggling cards only) ──────────────────────────────────── */
/* Quiet next to Open contact: dismissing is the exception, calling is the
   job. The commitment (red) only appears once the reason form is open. */
.aq-btn--dismiss { color: var(--n-500, #64748b); }

.aq-btn--danger {
  border-color: var(--kiss-red, #D80812); color: var(--kiss-red, #D80812);
  font-weight: 500;
}
.aq-btn--danger:hover:not(:disabled) { background: #fff5f5; }

.aq-dismiss {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--n-200, #e2e8f0); border-radius: 6px;
  background: var(--n-50, #f8fafc);
}
.aq-dismiss__label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--n-800, #1e293b); margin-bottom: 6px;
}
.aq-dismiss__label .muted { font-weight: 400; }
.aq-dismiss__reason {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; font-size: 13px; line-height: 1.4;
  padding: 7px 9px; border-radius: 6px;
  border: 1px solid var(--n-200, #e2e8f0); background: #fff;
  color: var(--n-900, #0f172a);
}
.aq-dismiss__reason:focus { outline: 2px solid var(--n-400, #94a3b8); outline-offset: 0; }
.aq-dismiss__error {
  margin-top: 6px; font-size: 12.5px; color: var(--kiss-red, #D80812);
}

@media (max-width: 640px) {
  .aq-main { padding: 16px 16px 48px; }
  .aq-card__head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ─── Client tickets (tier 3) ─────────────────────────────────────────── */
/* Below the lock work: a tenant standing at a unit they can't open outranks an
   email. Neutral rather than red — it is waiting on us, but nobody is locked
   out of anything. */
.aq-card--ticket { border-left: 3px solid var(--n-400, #94a3b8); }
.aq-pill--ticket {
  background: var(--n-700, #334155);
  color: #fff;
  border-color: var(--n-700, #334155);
}
.aq-ref {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--n-700, #334155);
}