/* Approvals: pending list with a detail pane, and the decision history */
.apr-grid { display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.apr-grid.is-empty { grid-template-columns: minmax(0, 1fr); }
.apr-grid.is-empty .apr-pane { display: none; }

/* list */
.apr-list { position: sticky; top: var(--s-4); display: flex; flex-direction: column; max-height: var(--apr-h, calc(100vh - var(--topbar) - 2 * var(--s-4))); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); min-width: 0; }
.apr-lh { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r-md) var(--r-md) 0 0; font-size: var(--fs-sm); color: var(--text-muted); flex: none; }
.apr-lh-n { color: var(--text-2); font-weight: var(--fw-medium); }
.apr-lh-a { display: flex; gap: var(--s-2); margin-left: auto; }
.apr-q { overflow-y: auto; flex: 1; min-height: 0; }
.apr-q .err-card { margin: var(--s-4); }
.apr-ck { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; cursor: pointer; }
.apr-ck input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.apr-ck input:disabled { cursor: not-allowed; opacity: .45; }
.apr-row { display: grid; grid-template-columns: 20px 32px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); cursor: pointer; outline: none; }
.apr-row:last-child { border-bottom: 0; }
.apr-row:hover { background: var(--surface-2); }
.apr-row:focus-visible { box-shadow: inset var(--focus); }
.apr-row.sel { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.apr-row .apr-ck { margin-top: 6px; }
.apr-rt { min-width: 0; }
.apr-r1 { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.apr-r1 b { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apr-r2 { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.apr-r3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.apr-wait { font-size: var(--fs-xs); color: var(--text-muted); margin-right: 2px; }
.apr-r4 { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
.apr-list .ui-empty { padding: 32px 16px; }

/* detail */
.apr-pane { min-width: 0; position: sticky; top: var(--s-4); }
.apr-d { display: flex; flex-direction: column; max-height: var(--apr-h, calc(100vh - var(--topbar) - 2 * var(--s-4))); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); min-width: 0; }
.apr-d.apr-skel { padding: var(--s-5); }
.apr-none { align-items: center; justify-content: center; gap: var(--s-3); padding: 48px 20px; color: var(--text-muted); text-align: center; }
.apr-back { display: none; align-items: center; gap: 4px; margin: var(--s-3) var(--s-5) 0; align-self: flex-start; }
.apr-back svg { width: 16px; height: 16px; }
.apr-dh { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); flex: none; }
.apr-dh-t { min-width: 0; flex: 1; }
.apr-dh-r { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.apr-dh-r h2 a { color: var(--text); }
.apr-dh-m { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.apr-db { overflow-y: auto; flex: 1; min-height: 0; }
.apr-sec { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.apr-sec:last-child { border-bottom: 0; }
.apr-sec h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: var(--s-3); }
.apr-gap { height: var(--s-3); }
.apr-note { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.apr-alert { margin-top: var(--s-3); padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.apr-alert.danger { background: var(--danger-soft); color: var(--danger); }
.apr-alert.warning { background: var(--warning-soft); color: var(--warning); }
.apr-ev { display: flex; align-items: flex-start; gap: var(--s-4); }
.apr-ev-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.apr-photo, .apr-doc { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-3); cursor: zoom-in; display: block; }
.apr-bal { border-collapse: collapse; min-width: 280px; font-size: var(--fs-sm); }
.apr-bal th, .apr-bal td { padding: 6px 0; border-bottom: 1px solid var(--border); }
.apr-bal th { text-align: left; font-weight: var(--fw-regular); color: var(--text-muted); padding-right: var(--s-8); }
.apr-bal td { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.apr-bal tr.total th, .apr-bal tr.total td { font-weight: var(--fw-semibold); color: var(--text); border-bottom: 0; }

/* decision bar */
.apr-bar { flex: none; border-top: 1px solid var(--border); padding: var(--s-4) var(--s-5); background: var(--surface); border-radius: 0 0 var(--r-md) var(--r-md); }
.apr-form { display: flex; flex-direction: column; gap: var(--s-3); }
.apr-form textarea.input { min-height: 36px; height: 36px; width: 100%; resize: none; padding-top: 7px; padding-bottom: 7px; }
.apr-form .is-req textarea.input { min-height: 60px; height: 60px; resize: vertical; }
.apr-btns { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.apr-bar-note { font-size: var(--fs-sm); color: var(--text-muted); }
.apr-bar-block { display: flex; align-items: center; gap: var(--s-2); padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); }
.apr-bar-block svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.apr-bar-err { font-size: var(--fs-sm); color: var(--danger); }
.apr-times { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.apr-times .field { width: 160px; }
.apr-less { display: flex; align-items: flex-start; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.apr-less .apr-km { width: 140px; }
.apr-less-out { align-self: flex-start; margin-top: 34px; font-size: var(--fs-md); white-space: nowrap; }
.apr-less-b { display: flex; gap: var(--s-2); flex-wrap: wrap; align-self: flex-start; margin-top: 29px; }

/* history */
.apr-fbar .ui-fsearch { width: 160px; }
.apr-emp { display: flex; flex-direction: column; line-height: 17px; white-space: nowrap; }
.apr-emp b { font-weight: var(--fw-medium); }
.apr-emp small { color: var(--text-muted); font-size: var(--fs-xs); }
.apr-rmk { display: block; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.apr-htable .err-card { margin-top: var(--s-2); }

@media (max-width: 1099px) {
  .apr-grid { grid-template-columns: minmax(0, 1fr); }
  .apr-grid.detail .apr-list { display: none; }
  .apr-grid:not(.detail) .apr-pane { display: none; }
  .apr-list, .apr-pane { position: static; max-height: none; }
  .apr-d { max-height: none; }
  .apr-bar { position: sticky; bottom: 0; box-shadow: 0 -4px 12px rgba(15, 23, 42, .06); }
  .apr-back { display: inline-flex; }
  .apr-fbar:has(+ .apr-grid.detail) { display: none; }
}
@media (max-width: 720px) {
  .apr-dh, .apr-sec, .apr-bar { padding-left: var(--s-4); padding-right: var(--s-4); }
  .apr-dh .avatar.lg { width: 40px; height: 40px; font-size: 14px; }
  .apr-sec .ui-kv.c2 { grid-template-columns: minmax(0, 1fr); }
  .apr-bal { min-width: 0; width: 100%; }
  .apr-less-out, .apr-less-b { margin-top: 0; }
}