/* Approvals inbox (templates/contracts/approval_center.html, approvals.js). */
.approvals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.approvals h2 { margin: 0; font-size: 20px; }
.section-head { display: flex; align-items: baseline; gap: 10px; }
.section-head .count { color: var(--muted); font-weight: 700; }
.kpis--approvals .kpi { min-height: 0; }
.kpis--approvals a.kpi:hover { text-decoration: none; }
.kpi.kpi--warn { border-left: 5px solid var(--accent); }
.kpi.kpi--warn strong { color: #875313; }

/* Toolbar: type chips + search. */
.approval-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.approval-toolbar input[type=search] { flex: 1 1 260px; min-width: 0; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.filter-chip small { margin-left: 4px; color: var(--muted); font-weight: 600; }
.filter-chip[aria-pressed="true"] { border-color: var(--brand-deep); background: var(--brand-deep); color: #fff; }
.filter-chip[aria-pressed="true"] small { color: #d6e4ea; }

/* Shared bits of cards and rows. */
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 14px; }
.tag-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.approvals .amount { font-size: 20px; font-weight: 800; color: var(--brand-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.holder { font-size: 14px; color: var(--muted); }
.holder strong { color: var(--ink); }
.holder.is-slow, .holder.is-slow strong { color: var(--danger); }
.route-progress { display: grid; gap: 4px; min-width: 0; }
.route-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.route-dots li { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.route-dots li + li::before { content: "→"; margin-right: 1px; color: #a9b6bc; }
.route-dots .dot { width: 10px; height: 10px; border: 2px solid #b8c6cd; border-radius: 50%; }
.route-dots .is-done .dot { border-color: var(--ok); background: var(--ok); }
.route-dots .is-current { color: var(--ink); font-weight: 800; }
.route-dots .is-current .dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgba(192, 131, 50, .2); }
.route-dots .is-returned .dot { border-color: var(--danger); background: var(--danger); }
.initiator-note { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); background: rgba(255, 255, 255, .6); font-size: 14px; overflow-wrap: anywhere; }
.initiator-note span { color: var(--muted); }

/* Cards waiting for the user's decision. */
.inbox-list { display: grid; gap: 12px; }
.approval-card { display: grid; gap: 12px; padding: 18px; }
.approval-card.is-overdue { border-left: 5px solid var(--danger); }
.approval-card.is-soon { border-left: 5px solid var(--accent); }
.approval-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.approval-card-head h3 { margin: 4px 0 2px; font-size: 18px; overflow-wrap: anywhere; }
.approval-card-head h3 a { color: var(--ink); }
.approval-card .decision-box { margin-top: 0; display: grid; gap: 10px; }
.decision-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.decision-comment { display: grid; gap: 6px; }
.decision-comment[hidden] { display: none; }

/* Compact rows for the other sections. */
.compact-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
/* Fixed deadline and amount columns keep all rows aligned. */
.compact-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 190px 170px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.compact-deadline { justify-self: start; }
.compact-amount { justify-self: end; text-align: right; }
.compact-row:last-child { border-bottom: 0; }
.compact-row .title { display: grid; gap: 2px; min-width: 0; }
.compact-row .title a { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.compact-row .amount { font-size: 16px; }
[data-item][hidden] { display: none; }

@media (max-width: 1050px) {
  .compact-row { grid-template-columns: minmax(0, 1fr) auto; }
  .compact-row > .title { grid-column: 1; grid-row: 1; }
  .compact-row > .compact-amount { grid-column: 2; grid-row: 1; }
  .compact-row > .route-progress { grid-column: 1 / -1; grid-row: 2; }
  .compact-row > .compact-deadline { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 620px) {
  .approval-card { padding: 14px; }
  .approval-card-head { grid-template-columns: 1fr; }
  .decision-actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; min-height: 44px; }
  .decision-actions [data-decide="approve"] { flex-basis: 100%; }
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 4px; scrollbar-width: none; }
  .filter-chip { flex: 0 0 auto; }
  .kpis--approvals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}