/* Product additions on top of the prototype's backoffice.css (UX-CONTRACTS-BO-001 §7). No JS: the mobile
   menu opens with :target, dialogs are inline <details> forms. */
.shell { min-block-size: 100vh; }
.inline { display: inline; margin: 0; }
.search-form { display: contents; }
.nav-close { display: none !important; }
.decision form { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.decision details { display: inline-block; }
.decision details[open] { display: block; inline-size: 100%; }
.decision details > summary { list-style: none; cursor: pointer; }
.decision details > summary::-webkit-details-marker { display: none; }
.reason-form { display: grid; gap: 8px; margin-block-start: 8px; }
.reason-form textarea { min-block-size: 72px; inline-size: 100%; }
.otp-input { font-family: ui-monospace, monospace; letter-spacing: .3em; inline-size: 9ch; direction: ltr; unicode-bidi: isolate; }
.money { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.mono { font-family: ui-monospace, monospace; font-size: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 12px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-block-end: 12px; }
.tabs a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); }
.tabs a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ceo-card { max-inline-size: 720px; }
.align-start { align-content: start; }
.narrow { max-inline-size: 760px; }
.card ul { padding-inline-start: 18px; margin: 0; }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: start; }
@media (max-width: 720px) {
  .sidenav:target { display: block; }
  .nav-close { display: block !important; }
}