@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --ink: #1c2825;
  --muted: #6c7975;
  --line: #dce5e0;
  --paper: #f4f7f3;
  --surface: #fff;
  --green: #126d53;
  --green-dark: #0e4c3e;
  --mint: #e1f1e9;
  --orange: #e87545;
  --red: #a94335;
  --shadow: 0 10px 28px rgba(28, 48, 41, .06);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 'DM Sans', sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.topbar { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; padding: 0 clamp(20px, 5vw, 76px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 11px; font: 800 18px 'Manrope', sans-serif; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--green); color: white; font: 800 15px 'Manrope', sans-serif; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { padding: 9px 13px; border-radius: 7px; color: var(--muted); font-size: 14px; font-weight: 600; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--mint); color: var(--green-dark); }
.page { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 72px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 11px; font-weight: 700; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font: 800 36px/1.15 'Manrope', sans-serif; }
h2 { margin-bottom: 5px; font: 700 19px/1.3 'Manrope', sans-serif; }
h3 { margin-bottom: 4px; font: 700 15px 'Manrope', sans-serif; }
.subhead { max-width: 680px; margin: 0; color: var(--muted); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.layout { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); align-items: start; gap: 22px; }
.surface { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.form-panel { padding: 22px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { color: #45534e; font-size: 12px; font-weight: 700; }
input, textarea, select { width: 100%; border: 1px solid #cbd8d1; border-radius: 6px; outline: 0; background: white; color: var(--ink); }
input, select { min-height: 42px; padding: 9px 11px; }
textarea { min-height: 98px; padding: 10px 11px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(18,109,83,.12); }
.hint { margin: -7px 0 14px; color: var(--muted); font-size: 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 13px; border: 1px solid transparent; border-radius: 6px; background: var(--green); color: white; font-weight: 700; }
.button:hover { background: var(--green-dark); }
.button.secondary { border-color: var(--line); background: white; color: var(--ink); }
.button.secondary:hover { background: #f3f7f4; }
.button.quiet-danger { border-color: #f1d5cf; background: white; color: var(--red); }
.button.quiet-danger:hover { background: #fff3f0; }
.button.small { min-height: 33px; padding: 6px 10px; font-size: 12px; }
.button:disabled { cursor: wait; opacity: .65; }
.list-panel { overflow: hidden; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.list-head .search { width: min(300px, 48%); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 11px 16px; background: #f8faf8; color: #75817c; font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
td { padding: 14px 16px; border-top: 1px solid #e9efeb; vertical-align: top; }
td strong { display: block; font-size: 13px; }
td small, .muted { color: var(--muted); font-size: 12px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: #eef2ef; color: #50605a; font-size: 11px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ''; }
.status.done, .status.approved { background: var(--mint); color: var(--green-dark); }
.status.processing { background: #fff3df; color: #90611b; }
.status.failed { background: #fff0ed; color: var(--red); }
.status.received, .status.draft { background: #edf2f0; color: #52635c; }
.stats { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.stat-number { color: var(--ink); font: 700 19px 'Manrope', sans-serif; }
.notice { display: none; margin: 0 0 18px; padding: 11px 14px; border: 1px solid #b8dbc9; border-radius: 6px; background: #eaf6ef; color: #245b43; font-size: 13px; }
.notice.error { border-color: #efc6be; background: #fff1ee; color: #8d382d; }
.notice.visible { display: block; }
.empty { padding: 46px 20px; color: var(--muted); text-align: center; }
.empty strong { display: block; margin-bottom: 5px; color: var(--ink); font: 700 15px 'Manrope', sans-serif; }
.import-strip { display: grid; grid-template-columns: minmax(200px, 1fr) auto auto; align-items: end; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.import-strip .field { margin: 0; }
.result-box { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.application-message { max-width: 380px; }
.application-message summary, details summary { cursor: pointer; color: var(--green); font-size: 12px; font-weight: 700; }
.application-message p { margin: 8px 0 0; color: #596761; font-size: 12px; white-space: pre-wrap; }
.responses { display: grid; gap: 14px; padding: 16px; }
.response-card { padding: 19px; }
.response-top { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.response-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--muted); font-size: 12px; }
.response-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 15px 0; }
.response-body p { margin: 0; color: #45534e; font-size: 13px; white-space: pre-wrap; }
.response-body .field { margin: 0; }
.response-body textarea { min-height: 145px; font-size: 13px; }
.response-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.callout { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--orange); background: #fff0e8; color: #74452f; font-size: 12px; }
.table-actions { display: flex; gap: 7px; white-space: nowrap; }
.detail-dialog, .form-dialog { width: min(680px, calc(100% - 28px)); max-height: min(84vh, 820px); overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); box-shadow: 0 24px 80px rgba(14, 38, 30, .24); }
.detail-dialog::backdrop, .form-dialog::backdrop { background: rgba(20, 35, 30, .48); }
.form-dialog { width: min(620px, calc(100% - 28px)); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.dialog-head h2 { margin: 0; }
.detail-dialog h3 { margin: 20px 0 7px; }
.detail-dialog p, .detail-dialog li { color: #52615b; font-size: 13px; }
.detail-dialog ul { margin: 0 0 16px; padding-left: 20px; }
.repeat-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.repeat-heading label { color: #45534e; font-size: 12px; font-weight: 700; }
.repeat-list { display: grid; gap: 8px; }
.repeat-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 7px; }
.remove-row { width: 36px; min-height: 40px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--red); font-size: 20px; }
.remove-row:disabled { cursor: not-allowed; opacity: .4; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 6px; background: #f7faf8; }
.detail-grid strong { font-size: 11px; }
.detail-grid p { margin: 3px 0 0; overflow-wrap: anywhere; }
.detail-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-link { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.category-detail { margin: 10px 0; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfb; }
.category-detail h4 { margin: 0 0 5px; font: 700 14px 'Manrope', sans-serif; }
.category-detail strong { font-size: 12px; }
.category-detail ul { margin-top: 4px; }
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } .page { padding-top: 30px; } }
@media (max-width: 600px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 6px; padding: 12px 18px 10px; }
  .nav { width: 100%; overflow-x: auto; }
  .nav a { padding: 7px 9px; font-size: 12px; white-space: nowrap; }
  .page { width: min(100% - 28px, 1200px); padding: 24px 0 48px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  h1 { font-size: 28px; }
  .form-panel { padding: 17px; }
  .detail-grid { grid-template-columns: 1fr; }
  .list-head { align-items: flex-start; flex-direction: column; }
  .list-head .search { width: 100%; }
  .import-strip, .response-body { grid-template-columns: 1fr; }
  .response-top { flex-direction: column; }
  th, td { padding-right: 12px; padding-left: 12px; }
}