:root {
  color-scheme: light;
  --ink: #18201d;
  --muted: #69736e;
  --line: #dce2de;
  --panel: #fff;
  --background: #f4f6f4;
  --green: #185c43;
  --green-soft: #e7f2ec;
  --red: #a13030;
  --red-soft: #fae9e7;
  --amber-soft: #fff3d8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--background);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
}
a { color: var(--green); }
button, input, select, textarea { font: inherit; }
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #b8c1bc;
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .button:hover { border-color: #7e8d85; }
button:disabled, input[type="submit"]:disabled, .button[aria-disabled="true"] { cursor: wait; opacity: .72; }
form[aria-busy="true"] { position: relative; }
.form-working { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
.form-working::before, .queue-loading::before { width: 12px; height: 12px; border: 2px solid #b8c1bc; border-top-color: var(--green); border-radius: 50%; content: ""; animation: dashboard-spin .65s linear infinite; }
@keyframes dashboard-spin { to { transform: rotate(1turn); } }
.primary { color: #fff; border-color: var(--green); background: var(--green); }
.primary:disabled { cursor: not-allowed; border-color: #c7ceca; color: #8a9590; background: #e5e9e6; }
.danger { color: #fff; border-color: var(--red); background: var(--red); }
.secondary-button { background: #f0f3f1; }
.small { min-height: 32px; padding: 5px 10px; }
.link-button { min-height: 0; padding: 0; border: 0; color: var(--green); background: none; }
.report-button { min-height: 32px; padding: 5px 10px; color: var(--green); border-color: #9fbdaf; background: var(--green-soft); font-size: 12px; font-weight: 700; }

.app-header {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 62px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { color: var(--ink); font-size: 16px; font-weight: 750; text-decoration: none; }
.app-header nav { display: flex; gap: 18px; }
.app-header nav a { color: var(--muted); text-decoration: none; }
.user-menu { display: flex; align-items: center; gap: 14px; margin-left: auto; color: var(--muted); }
.page { max-width: 1480px; margin: 0 auto; padding: 30px 28px 60px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.pos-session-actions { display: flex; align-items: center; gap: 10px; }
.pos-session-actions form { margin: 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: 28px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.eyebrow { margin-bottom: 5px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.muted, .secondary { color: var(--muted); }
.secondary { display: block; margin-top: 3px; font-size: 12px; }
.nowrap { white-space: nowrap; }

.card, .table-card, .login-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgb(20 35 27 / 5%);
}
.card { padding: 20px; }
.login-card { width: min(440px, 100%); margin: 10vh auto; padding: 32px; }
.stack { display: grid; gap: 16px; }
.stack.compact { gap: 9px; }
label { display: grid; gap: 6px; color: #39433e; font-weight: 650; }
input, select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #b8c1bc;
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
}
textarea { resize: vertical; }
.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; }
.check input { width: auto; margin-top: 3px; }
.review-approval .check {
  margin: 0 -8px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease;
}
.review-approval.stack.compact { gap: 0; }
.review-approval button { margin-top: 9px; }
.review-approval .check:hover, .review-approval .check:focus-within { background: var(--green-soft); }
.filters { display: flex; align-items: end; gap: 12px; margin-bottom: 16px; }
.filter-search { min-width: 280px; }
.filter-divider { align-self: stretch; border-left: 1px solid var(--line); }
.filter-options { display: flex; align-items: end; gap: 12px; }
.table-card { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); background: #f9faf9; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.empty { padding: 36px; color: var(--muted); text-align: center; }
.submission-contact > * { display: block; overflow-wrap: anywhere; }
.submission-contact-line { display: flex; align-items: center; gap: 4px; }
.submission-contact-line > :first-child { min-width: 0; overflow-wrap: anywhere; }
.submission-contact-name { color: #000; font-weight: 700; }
.copy-button {
  flex: 0 0 24px;
  min-height: 24px;
  width: 24px;
  padding: 3px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}
.submission-contact-line:hover .copy-button, .submission-contact-line:focus-within .copy-button { opacity: 1; }
.copy-button:hover, .copy-button:focus-visible { color: var(--green); background: var(--green-soft); }
.copy-button[data-copied="true"] { color: var(--green); opacity: 1; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }

.status, .badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #3c5147;
  background: #e8eeea;
  font-size: 11px;
  font-weight: 750;
  text-transform: capitalize;
}
.status-accepted, .status-completed, .status-reward_issued { color: var(--green); background: var(--green-soft); }
.status-rejected, .status-reward_failed { color: var(--red); background: var(--red-soft); }
.status-resubmission_requested { color: #74500e; background: var(--amber-soft); }
.alert { margin-bottom: 16px; padding: 11px 13px; border-radius: 7px; }
.alert.success { color: var(--green); background: var(--green-soft); }
.alert.error { color: var(--red); background: var(--red-soft); }
.alert.warning { color: #74500e; background: var(--amber-soft); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(340px, .8fr); gap: 20px; align-items: start; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.sticky { position: sticky; top: 18px; }
.review-settings summary { cursor: pointer; font-weight: 700; }
.review-settings .check { margin-top: 12px; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline; }
.htmx-request .htmx-indicator { display: inline-flex; align-items: center; gap: 6px; }
.htmx-request .htmx-indicator::before { width: 12px; height: 12px; border: 2px solid #b8c1bc; border-top-color: var(--green); border-radius: 50%; content: ""; animation: dashboard-spin .65s linear infinite; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.facts div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.facts dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.document-frame { margin-top: 14px; padding: 12px; border-radius: 8px; background: #eef1ef; text-align: center; }
.document-preview { max-width: 100%; }
.document-frame img { max-height: 760px; object-fit: contain; }
.document-preview-pdf { display: block; width: 100%; height: min(82vh, 980px); min-height: 760px; border: 0; background: #fff; }
.section-heading { display: flex; align-items: center; justify-content: space-between; }
.history-item { padding: 12px 0; border-top: 1px solid var(--line); }
.history-item span, .history-item small { display: block; color: var(--muted); }
.history-item p { margin: 7px 0; }
.back-link { display: inline-block; margin-bottom: 16px; text-decoration: none; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { min-width: 220px; }
hr { margin: 20px 0; border: 0; border-top: 1px solid var(--line); }
.issue-dialog { width: min(560px, calc(100% - 32px)); padding: 26px; border: 0; border-radius: 12px; color: var(--ink); box-shadow: 0 20px 64px rgb(18 32 25 / 28%); }
.manual-creation-dialog { width: min(680px, calc(100% - 32px)); padding: 26px; border: 0; border-radius: 12px; color: var(--ink); box-shadow: 0 20px 64px rgb(18 32 25 / 28%); }
.issue-dialog::backdrop { background: rgb(12 27 19 / 48%); }
.manual-creation-dialog::backdrop { background: rgb(12 27 19 / 48%); }
.issue-dialog h2 { margin-bottom: 4px; }
.dialog-close { display: flex; justify-content: end; margin: -12px -12px 2px 0; }
.dialog-close button { min-height: 28px; width: 28px; padding: 0; border: 0; background: transparent; font-size: 22px; }
.dialog-actions { display: flex; justify-content: end; gap: 8px; }
.manual-creation-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reward-choice { display: grid; gap: 9px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.reward-choice legend { padding: 0 4px; color: #39433e; font-weight: 650; }
.user-editor-page { width: min(860px, 100%); }
.user-editor-section { margin-bottom: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 1px 2px rgb(20 35 27 / 5%); }
.user-editor-section h2 { margin-bottom: 14px; }
.user-details .section-heading { margin-bottom: 14px; }
.user-details .section-heading h2 { margin-bottom: 0; }
.user-details-pin { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.user-editor-dialog { width: min(660px, calc(100% - 32px)); max-width: none; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 12px 0 0 12px; color: var(--ink); box-shadow: -12px 0 48px rgb(18 32 25 / 22%); opacity: 0; transform: translateX(100%); transition: opacity .2s ease-out, transform .24s cubic-bezier(.2, .8, .2, 1); }
.user-editor-dialog[open] { opacity: 1; transform: translateX(0); }
@starting-style { .user-editor-dialog[open] { opacity: 0; transform: translateX(100%); } }
.user-editor-dialog::backdrop { background: rgb(12 27 19 / 42%); opacity: 0; transition: opacity .2s ease-out; }
.user-editor-dialog[open]::backdrop { opacity: 1; }
@starting-style { .user-editor-dialog[open]::backdrop { opacity: 0; } }
.user-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 26px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.user-editor-header h1 { margin-bottom: 2px; }
.user-editor-header .muted { margin: 0; }
.dialog-close-button { min-height: 32px; width: 32px; padding: 0; border: 0; background: transparent; font-size: 24px; line-height: 1; }
.user-editor-body { max-height: calc(100dvh - 190px); overflow-y: auto; padding: 20px 26px 24px; background: var(--background); }
.user-editor-footer { display: flex; justify-content: end; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--line); background: var(--panel); }
.user-details-dialog { width: min(760px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 14px; color: var(--ink); box-shadow: 0 20px 64px rgb(18 32 25 / 28%); }
.user-details-dialog form { padding: 22px; }
.user-details-dialog::backdrop { background: rgb(12 27 19 / 42%); }
.user-details-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.user-details-modal-header h2 { margin: 0; }
.user-details-modal-pin { padding: 16px; border-radius: 10px; background: #f0f2f1; }
.user-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.user-editor-body .user-editor-section:last-child { margin-bottom: 0; }
.role-list { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.role-list legend { padding: 0 4px; color: #39433e; font-weight: 650; }
.pin-field { max-width: 240px; }
.pin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pin-actions [data-pos-pin-copy-status] { min-height: 1.25em; }
.icon-button { min-height: 36px; width: 36px; padding: 0; border-radius: 8px; color: #63706a; font-size: 20px; line-height: 1; }
.location-list { display: grid; gap: 8px; margin: 14px 0; }
.location-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.account-actions { display: grid; gap: 12px; }
.account-actions form { margin: 0; }

@media (max-width: 900px) {
  .app-header { flex-wrap: wrap; padding: 12px 18px; }
  .user-menu { width: 100%; margin-left: 0; }
  .report-button { order: -1; }
  .page { padding: 22px 16px; }
  .detail-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .filters { align-items: stretch; flex-direction: column; }
  .filter-search { min-width: 0; }
  .filter-divider { width: 100%; border-top: 1px solid var(--line); border-left: 0; }
  .filter-options { align-items: stretch; flex-direction: column; }
  .manual-creation-fields { grid-template-columns: 1fr; }
  .user-editor-dialog { width: 100%; height: 100dvh; border-radius: 0; }
  .user-editor-header { padding: 20px 18px 16px; }
  .user-editor-body { max-height: calc(100dvh - 174px); padding: 16px 18px; }
  .user-editor-footer { padding: 14px 18px; }
  .user-editor-fields { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .user-editor-dialog, .user-editor-dialog::backdrop, .form-working::before, .htmx-request .htmx-indicator::before { transition: none; animation: none; }
}