* { margin: 0; padding: 0; box-sizing: border-box; }
a { color: var(--accent); }
a:hover { color: color-mix(in srgb,var(--accent) 80%,var(--heading)); }

:root {
  --radius: 10px; --radius-sm: 7px;
  --sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
  --gdur: .48s;
  --shadow: 0 1px 2px rgba(30,24,12,.06), 0 6px 18px rgba(30,24,12,.07);
  --shadow-md: 0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* Header — layout only; colors come from the [CT] theme layer */
.header {
  padding: 0 24px; min-height: 60px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 1400;
}
/* r244: only the injected global nav (#appNavHeader) and the genuine app shell
   topbars (#shellHeader on admin/authorized) may be sticky. Standalone feature
   pages ship a hardcoded in-content .header (title + Back); make those static so
   they don't create a second stacking context over the nav dropdowns. A static
   header's absolutely-positioned ::after would escape to the initial containing
   block, so real topbars must stay sticky (and feature headers are hidden by
   app-nav). */
.header:not(#appNavHeader):not(#shellHeader) { position: static; z-index: auto; }
.header h1 { font-size: 17px; font-weight: 800; line-height: 1.1; margin: 0; white-space: nowrap; }
.header h1+span, .header>div span { line-height: 1.1; font-size: 11px; white-space: nowrap; }
.header .header-actions { display: flex; gap: 12px; align-items: center; }
.pro-btn { display: none; }
.user-header { position: sticky; top: 0; z-index: 1400; min-height: 60px; display: flex; align-items: center; padding: 0 24px; }

/* Buttons - Glass / iOS style */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.2px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.06);
  transition: all 0.12s ease;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
  text-decoration: none;
  overflow: hidden;
  /* r177: a classless .btn must still be readable on every theme (variants below override) */
  background: var(--surface-alt);
  color: var(--text);
  text-shadow: none;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%);
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 4px 12px rgba(0,0,0,0.15),
    0 2px 4px rgba(0,0,0,0.08);
}
.btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.08);
}
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb,var(--accent) 86%,#fff) 0%, var(--accent) 100%);
  color: var(--on-accent);
}
.btn-success {
  background: linear-gradient(180deg, color-mix(in srgb,var(--good) 85%,#fff) 0%, var(--good) 100%);
  color: var(--on-accent);
}
.btn-danger {
  background: linear-gradient(180deg, color-mix(in srgb,var(--bad) 86%,#fff) 0%, var(--bad) 100%);
  color: var(--on-accent);
}
.btn-secondary {
  background: linear-gradient(180deg, color-mix(in srgb,var(--surface) 80%,transparent) 0%, var(--surface-alt) 100%);
  color: var(--text);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 1px 3px rgba(0,0,0,0.06);
}
.btn-secondary::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
}
.btn-secondary:hover {
  background: var(--hover);
}
.btn-outline {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 1px 3px rgba(0,0,0,0.06);
}
.btn-outline::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
}
.btn-outline:hover {
  background: var(--hover);
  border-color: var(--faint);
}
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Container */
.container { max-width: 100%; margin: 0; padding: 20px 24px; display: flex; flex-direction: column; min-height: calc(100vh - 80px); background: var(--bg); transform: translateZ(0); }

/* Cards */
.card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5);
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.card-title-row .card-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.card-title-row .search-box {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  max-width: 500px;
}
.card-title-row .search-box .form-control {
  flex: 1;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.pagination .page-info {
  font-size: 13px;
  color: var(--dim);
  padding: 0 8px;
}

/* Amount formatting */
.amount-cell {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Drag over state */
.upload-area.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.01);
}

/* Forms */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  background: color-mix(in srgb,var(--surface-inset) 94%,transparent);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: inset 0 1px 2px color-mix(in srgb,var(--heading) 6%,transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04), 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
  background: var(--surface);
}
textarea.form-control { min-height: 80px; resize: vertical; }
select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235F6368' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  appearance: none;
  -webkit-appearance: none;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }

/* Search */
.search-box {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.search-box .form-group { flex: 1; min-width: 200px; margin-bottom: 0; }

/* Table */
.table-wrap { overflow-x: auto; width: 100%; min-width: 0; max-width: 100%; flex: 0 0 auto; }
.table-wrap::-webkit-scrollbar { height: 12px; }
table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: auto;
}
/* The main multi-column data tables live inside a scrolling .table-wrap and keep
   a wide min-width (horizontal scroll there). Standalone/portal tables shrink to
   their card and wrap instead of clipping (r243). */
th, td { overflow-wrap: anywhere; }
th, td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
th {
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: normal;
  word-break: break-word;
  vertical-align: middle;
  line-height: 1.4;
}
td {
  white-space: normal;
  word-break: break-word;
}
td.memo-cell {
  max-width: 300px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}
td.actions-cell { white-space: nowrap; max-width: none; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--hover); }
tbody tr.locked-row { background: color-mix(in srgb,var(--hold) 16%,var(--surface)); }
tbody tr.locked-row:hover { background: color-mix(in srgb,var(--hold) 26%,var(--surface)); }
td .actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Checkbox */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
  vertical-align: middle;
}

/* Login */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--topbar-a) 0%, var(--topbar-b) 100%);
}
.login-box {
  background: color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb,var(--surface) 60%,transparent);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 24px 64px rgba(0,0,0,0.2),
    0 8px 20px rgba(0,0,0,0.1);
}
.login-box h2 { text-align: center; margin-bottom: 8px; color: var(--heading); }
.login-box p { text-align: center; color: var(--dim); margin-bottom: 24px; font-size: 14px; }
.login-box .btn { width: 100%; justify-content: center; padding: 10px; }

/* Wizard steps */
.steps {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
}
.step {
  flex: 1;
  text-align: center;
  padding: 12px;
  background: var(--surface-alt);
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  position: relative;
}
.step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.step:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.step.active {
  background: linear-gradient(180deg, color-mix(in srgb,var(--accent) 86%,#ffffff) 0%, var(--accent) 100%);
  color: var(--on-accent);
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.step.completed {
  background: linear-gradient(180deg, color-mix(in srgb,var(--good) 85%,#ffffff) 0%, var(--good) 100%);
  color: var(--on-accent);
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb,var(--accent) 16%,var(--surface));
  color: var(--heading);
  font-weight: 700;
  margin-right: 8px;
  font-size: 12px;
}
.step.active .step-num, .step.completed .step-num {
  background: transparent;
  color: var(--on-accent);
}

/* Upload area */
.upload-area {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--surface-alt);
}
.upload-area:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload-area.has-file { border-color: var(--good); background: color-mix(in srgb,var(--good) 12%,var(--surface)); }
.upload-area .upload-icon { font-size: 40px; margin-bottom: 8px; }
.upload-area p { color: var(--dim); font-size: 14px; }
.upload-area input[type=file] { display: none; }

/* Side-by-side dual upload layout */
.dual-upload {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.dual-upload .upload-area {
  padding: 28px 16px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dual-upload .upload-area .upload-icon { font-size: 32px; margin-bottom: 6px; }
.dual-upload .upload-area p { font-size: 13px; margin: 2px 0; }
.dual-upload .upload-area.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb,var(--accent) 14%,transparent);
  transform: scale(1.01);
}
.dual-upload .upload-area.has-file {
  border-color: var(--good);
  background: color-mix(in srgb,var(--good) 12%,var(--surface));
}
.dual-upload .upload-side-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--dim);
}
@media (max-width: 700px) {
  .dual-upload { grid-template-columns: 1fr; }
}

/* Image preview */
.image-preview {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin: 12px 0;
  display: block;
}

/* Result cards */
.result-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5);
  padding: 24px;
  margin-bottom: 20px;
  border-left: 4px solid var(--accent);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.result-card h3 {
  font-size: 18px;
  margin-bottom: 16px;
  color: var(--heading);
}
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.result-item { margin-bottom: 8px; }
.result-item .label {
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.result-item .value {
  font-size: 15px;
  color: var(--heading);
  word-break: break-word;
}
.result-item .value a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.result-item .value a:hover { text-decoration: underline; }
.amount-value { font-size: 20px; font-weight: 700; color: var(--good); }

/* Modal - Glass style */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.modal {
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 24px 64px rgba(0,0,0,0.2),
    0 8px 20px rgba(0,0,0,0.1);
  font-size: 10pt;
}
.modal input, .modal select, .modal textarea, .modal button, .modal label, .modal h3, .modal h4, .modal h5, .modal p, .modal div, .modal span, .modal td, .modal th {
  font-size: 10pt;
}
.modal h3 { font-size: 13pt; }
.modal h4 { font-size: 11pt; }
.modal .btn-sm { font-size: 9pt; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-alt) 0%, color-mix(in srgb,var(--surface-alt) 40%,transparent) 100%);
  border-radius: 14px 14px 0 0;
}
.modal-header h3 { font-size: 18px; }
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--dim);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
.modal-close:hover { background: var(--surface-alt); }
.modal-body { padding: 24px; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Badge */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.badge-fedex { background: #4d148c; color: white; }
.badge-usps { background: #004b87; color: white; }
.badge-ups { background: #351c15; color: #ffb500; }
.badge-dhl { background: #d40511; color: #ffcc00; }
.badge-other { background: var(--line); color: var(--text); }
/* r172.4 delivery-method badges: soft theme-aware tints, keep per-method hue, readable on light AND dark themes */
.badge-person, .badge-pickup, .badge-deposited, .badge-email, .badge-shipping,
.badge-ach, .badge-wire, .badge-zelle, .badge-creditcard, .badge-waiting,
.badge-wechat, .badge-8b, .badge-hand {
  border: 1px solid color-mix(in srgb, var(--bh, #888) 30%, transparent);
  background: color-mix(in srgb, var(--bh, #888) 14%, var(--surface));
  color: color-mix(in srgb, var(--bh, #888) 68%, var(--text));
  font-weight: 700;
}
.badge-person { --bh: #dc2626; }
.badge-pickup { --bh: #16a34a; }
.badge-deposited { --bh: #ea580c; }
.badge-email { --bh: #ca8a04; }
.badge-shipping { --bh: #0891b2; }
.badge-ach { --bh: #2563eb; }
.badge-wire { --bh: #7c3aed; }
.badge-zelle { --bh: #db2777; }
.badge-creditcard { --bh: #3b5b8a; }
.badge-waiting { --bh: #6b7280; }
.badge-wechat { --bh: #07c160; }
.badge-8b { --bh: #4f46e5; }
.badge-hand { --bh: #a16207; }

/* Alert */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
}
.alert-info { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb,var(--accent) 32%,var(--line)); }
.alert-success { background: color-mix(in srgb,var(--good) 14%,var(--surface)); color: var(--good); border: 1px solid color-mix(in srgb,var(--good) 32%,var(--line)); }
.alert-error { background: color-mix(in srgb,var(--bad) 14%,var(--surface)); color: var(--bad); border: 1px solid color-mix(in srgb,var(--bad) 32%,var(--line)); }

/* Loading */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--dim); font-size: 14px; display: flex; align-items: center; gap: 8px; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--dim);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 15px; }

/* Tabs */
.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--line); }
.tab {
  padding: 10px 20px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab:hover { color: var(--text); }

/* Auto-refresh indicator */
.refresh-indicator {
  font-size: 12px;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.refresh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Responsive */
@media (max-width: 768px) {
  .form-row, .form-row-3, .form-row-4 { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .container { padding: 16px; }
  .search-box { flex-direction: column; }
  .search-box .form-group { width: 100%; }
  /* Long welcome/title must wrap, not force horizontal page overflow (r-sec 10). */
  .header, .user-header { flex-wrap: wrap; }
  .header > div, .header .header-actions, .user-header > div { min-width: 0; }
  .header h1, .user-header h1 { white-space: normal; overflow-wrap: anywhere; }
  .header h1+span, .header>div span, .user-header span { white-space: normal; overflow-wrap: anywhere; }
}

/* User info in header */
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--dim);
}
.user-info .user-name { font-weight: 600; color: var(--heading); }
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.role-badge.admin { background: color-mix(in srgb,var(--hold) 16%,var(--surface)); color: color-mix(in srgb,var(--hold) 58%,var(--heading)); }
.role-badge.authorized { background: color-mix(in srgb,var(--accent) 14%,var(--surface)); color: color-mix(in srgb,var(--accent) 78%,var(--heading)); }
.role-badge.self_check { background: color-mix(in srgb,var(--accent-2) 14%,var(--surface)); color: color-mix(in srgb,var(--accent-2) 64%,var(--heading)); }

/* Lock indicator */
.lock-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb,var(--hold) 16%,var(--surface));
  color: var(--hold);
}
.lock-banner {
  background: color-mix(in srgb,var(--hold) 16%,var(--surface));
  border: 1px solid color-mix(in srgb,var(--hold) 34%,var(--line));
  color: var(--hold);
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}

/* Detail view */
.detail-section {
  margin-bottom: 20px;
}
.detail-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* User management table */
.user-table td, .user-table th {
  max-width: none;
  white-space: nowrap;
}

/* Inline add user form */
.add-user-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--surface-alt);
  border-radius: var(--radius);
}
.add-user-row .form-group { margin-bottom: 0; flex: 1; }

/* ========== Hold / Void ========== */
.hv-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-right: 6px;
  vertical-align: middle;
}
.hv-hold { background: var(--bad); color: var(--on-bad); }
/* r191: pair --heading with --surface (not fixed #fff) so the chip inverts on dark themes too */
.hv-void { background: var(--heading); color: var(--surface); }
tr.row-hold td { color: var(--bad); font-weight: 700; }
tr.row-hold .amount-cell { color: var(--bad); }
tr.row-void td { color: var(--dim); font-weight: 700; text-decoration: line-through; text-decoration-color: var(--dim); }
tr.row-void .hv-badge, tr.row-void .btn, tr.row-void input, tr.row-void .lock-indicator { text-decoration: none; }
.hold-by-text { font-size: 11px; font-weight: 600; color: var(--bad); }
.btn-hold { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); }
.btn-hold:hover { background: var(--bad); color: var(--on-accent); }
.btn-hold-active { background: var(--bad); color: var(--on-accent); border: 1px solid var(--bad); }
.btn-void { background: var(--surface-alt); color: var(--dim); border: 1px solid var(--line); }
.btn-void:hover { background: var(--dim); color: #fff; }
.btn-void-active { background: var(--dim); color: #fff; border: 1px solid var(--dim); }
.result-card.is-void { border-color: var(--bad); border-width: 2px; }
.result-card.is-void .label, .result-card.is-void .value, .result-card.is-void h3 { color: var(--bad); }
.result-card.is-hold { border-color: var(--good); border-width: 2px; }
.result-card.is-hold .label, .result-card.is-hold .value, .result-card.is-hold h3 { color: var(--good); }

.void-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 3px solid var(--bad);
  color: var(--bad);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  padding: 4px 14px;
  transform: rotate(-12deg);
  text-transform: uppercase;
  opacity: 0.85;
  pointer-events: none;
  z-index: 5;
}

.hold-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--good);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  z-index: 5;
}

/* Role-based menu visibility */
.admin-only { display: none !important; }
body.role-admin .admin-only { display: flex !important; }

/* Dropdown wrapper (menu visuals & fixed position in [CT] layer; coords set by JS) */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu-right {
  left: auto;
  right: 0;
  transform-origin: top right;
}
.dropdown-toggle::after {
  margin-left: 4px;
}

/* Carrier logo */
.carrier-logo {
  height: 20px;
  vertical-align: middle;
  border-radius: 3px;
}
.tracking-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tracking-num {
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline;
  font-size: 12px;
}
.tracking-num:hover {
  color: var(--accent);
}

/* Disclosed badge */
.badge-disclosed {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.badge-disclosed.yes { background: color-mix(in srgb,var(--good) 14%,var(--surface)); color: var(--good); }
.badge-disclosed.no { background: color-mix(in srgb,var(--bad) 14%,var(--surface)); color: var(--bad); }
.badge-disclosed.partial { background: color-mix(in srgb,var(--hold) 16%,var(--surface)); color: var(--hold); }

/* Multi-check result card */
.multi-check-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
}
.multi-check-card img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.multi-check-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.multi-check-fields input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 13px;
}

select[multiple] { min-height: 80px; }

/* Record type badge */
.badge-record-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}
.badge-record-type.issued { background: color-mix(in srgb,var(--accent) 14%,var(--surface)); color: var(--accent); }
.badge-record-type.received { background: color-mix(in srgb,var(--hold) 16%,var(--surface)); color: var(--hold); }

/* Back to Top button */
#backToTop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1300;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, color-mix(in srgb,var(--accent) 86%,#fff) 0%, var(--accent) 100%);
  color: var(--on-accent);
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 12px var(--shadow);
  transition: all 0.15s ease;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
#backToTop:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 6px 16px var(--shadow);
}
#backToTop:active {
  transform: translateY(1px);
}

/* Horizontal scroll wrapper */
.table-scroll-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.table-scroll-wrap::-webkit-scrollbar { height: 12px; }
.table-scroll-wrap::-webkit-scrollbar-track {
  background: var(--surface-alt);
  border-radius: 6px;
}
.table-scroll-wrap::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 6px;
}
.table-scroll-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
}

/* Class autocomplete */
.class-suggest-box {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1300;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.class-suggest-box.show { display: block; }
.class-suggest-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.class-suggest-item:hover { background: var(--hover); }

/* ===== Table Redesign ===== */
#checkTable { table-layout: fixed; width: 100%; min-width: 1288px; }
.table-wrap th { position: relative; }
th .col-resizer {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 6px; cursor: col-resize; user-select: none; z-index: 2;
}
th .col-resizer:hover { background: color-mix(in srgb,var(--accent) 30%,transparent); }
td.clamp-2 {
  line-height: 1.35em;
  max-height: 2.7em;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
  vertical-align: middle;
}
th.col-memo, td.col-memo { min-width: 200px; }
td.col-delivery { white-space: normal; word-break: break-word; max-width: 130px; line-height: 1.4; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--hover); }
th.sortable .sort-arrow { font-size: 10px; margin-left: 2px; color: var(--text); }
th.sortable.active .sort-arrow { color: color-mix(in srgb,var(--accent) 78%,var(--heading)); }
.disc-dropdown { position: relative; display: inline-block; z-index: 10; }
.disc-dropdown:has(.disc-menu.show) { z-index: 1300; }
td.actions-cell { position: relative; overflow: visible; z-index: 10; }
td.actions-cell:has(.row-actions-menu.show) { z-index: 1300; }
td.disc-cell { position: relative; overflow: visible; z-index: 10; }
td.disc-cell:has(.disc-menu.show) { z-index: 1300; }

/* Disclosure decision buttons — layout only; colors in [CT] layer */
.disc-btn {
  position: relative; border: 1px solid transparent; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  min-width: 90px; text-align: center; transition: transform .18s ease, box-shadow .22s ease;
}
.disc-btn:hover { transform: translateY(-1px); }
.disc-btn:active { transform: translateY(1px); }

/* Disclosure menu (.disc-menu visuals & fixed position in [CT] layer) */

.row-actions-dropdown { position: relative; display: inline-block; }
/* Keep the floating shortcut from covering a row menu or mobile action sheet. */
body:has(.row-actions-menu.show,.disc-menu.show) #backToTop { visibility: hidden; pointer-events: none; }
/* Row Actions trigger/menu (.row-actions-* visuals & fixed position in [CT] layer) */

/* ================= r168 Lien Waiver + merged Status cell ================= */
td.status-cell { vertical-align: top; line-height: 1.4; min-width: 205px; white-space: normal; word-break: break-word; }
.stk { display: flex; flex-direction: column; gap: 2px; }
.stk .ln { font-size: 12px; line-height: 1.45; display: flex; gap: 4px; align-items: baseline; }
.stk .k { color: var(--dim); font-weight: 600; white-space: nowrap; }
.stk .v { color: var(--text); }
/* row separator lines + zebra alternating tint — token-driven across all 9 themes (baseline 197-201) */
#checkTableBody tr td { border-bottom: 1px solid var(--line); background: var(--surface); }
#checkTableBody tr:nth-child(even) td { background: var(--row-alt); }
#checkTableBody tr:hover td { background: var(--hover); }
#checkTableBody tr.row-hold:hover td, #checkTableBody tr.row-void:hover td { background: var(--hover); }
#checkTableBody tr.sel td, #checkTableBody tr.selected td { background: var(--accent-soft); }
/* gold Lien Waiver action */

/* =====================================================================
   [CT] ONE clean theme + chrome layer (replaces all legacy hardcoded
   color blocks AND the old r172.x override cascade). Single source of
   truth for color/menu/modal/mobile. Values driven by 18 theme tokens.
   Email templates / print PDF / lien-waiver paper / carrier brand colors
   are intentionally NOT themed here.
   ===================================================================== */

/* ---------- 18 theme tokens (default Gilt + 18 selectors) ---------- */
:root{
  /* default theme = Gilt Ivory; 18-theme system, values verbatim from approved preview */
  --bg:#E9E4D8;--surface:#FDFCF8;--surface-alt:#F5F2EA;--surface-inset:#fbf8f0;
  --line:#DDD4C0;--line-strong:#cdc2a6;
  --text:#2A2419;--dim:#665e4e;--faint:#9a917e;--heading:#211b11;
  --topbar-a:#2c261d;--topbar-b:#1a150e;--topbar-text:#f4ecdb;
  --accent:#8a6a2e;--accent-2:#b08a2e;--accent-soft:#f3ead2;--on-accent:#fffdf6;
  --row-alt:#f7f3e9;--hover:#f1e9d6;--marker:#b08a2e;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#c9a24b,#e7d3a0,#a9791c);
}
html[data-theme="gilt"]{
  --bg:#E9E4D8;--surface:#FDFCF8;--surface-alt:#F5F2EA;--surface-inset:#fbf8f0;
  --line:#DDD4C0;--line-strong:#cdc2a6;
  --text:#2A2419;--dim:#665e4e;--faint:#9a917e;--heading:#211b11;
  --topbar-a:#2c261d;--topbar-b:#1a150e;--topbar-text:#f4ecdb;
  --accent:#8a6a2e;--accent-2:#b08a2e;--accent-soft:#f3ead2;--on-accent:#fffdf6;
  --row-alt:#f7f3e9;--hover:#f1e9d6;--marker:#b08a2e;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#c9a24b,#e7d3a0,#a9791c);
}
html[data-theme="navy"]{
  --bg:#e7ebf1;--surface:#fbfcfe;--surface-alt:#f1f5fa;--surface-inset:#f6f9fc;
  --line:#d3dce8;--line-strong:#b7c6d8;
  --text:#16202e;--dim:#586577;--faint:#8a97a8;--heading:#0d1828;
  --topbar-a:#13294b;--topbar-b:#0a1830;--topbar-text:#eaf1fa;
  --accent:#1d4e89;--accent-2:#5b86b8;--accent-soft:#e6eef8;--on-accent:#ffffff;
  --row-alt:#f4f8fc;--hover:#e8f0f9;--marker:#5b86b8;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#5b86b8,#bcd2ea,#1d4e89);
}
html[data-theme="emerald"]{
  --bg:#e6ece7;--surface:#fbfdfb;--surface-alt:#eef4ee;--surface-inset:#f5f9f6;
  --line:#cfdacd;--line-strong:#b3c6b8;
  --text:#17241c;--dim:#56665b;--faint:#88978c;--heading:#0f1f16;
  --topbar-a:#17392b;--topbar-b:#0b2117;--topbar-text:#e9f3ec;
  --accent:#1f6b4a;--accent-2:#4e9b76;--accent-soft:#e2f0e8;--on-accent:#ffffff;
  --row-alt:#f2f8f4;--hover:#e6f1ea;--marker:#4e9b76;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#4e9b76,#bfe0cf,#1f6b4a);
}
html[data-theme="bordeaux"]{
  --bg:#f0e8e6;--surface:#fefbfb;--surface-alt:#f6eeec;--surface-inset:#faf5f4;
  --line:#e0d0cd;--line-strong:#ccb6b2;
  --text:#2a1c1c;--dim:#6e5755;--faint:#9c8582;--heading:#211314;
  --topbar-a:#3d1c22;--topbar-b:#240e12;--topbar-text:#f7e9e7;
  --accent:#84263a;--accent-2:#b06471;--accent-soft:#f6e3e4;--on-accent:#fff6f5;
  --row-alt:#faf0ef;--hover:#f4e6e4;--marker:#b06471;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#b06471,#e6c3c9,#84263a);
}
html[data-theme="amethyst"]{
  --bg:#ece8f4;--surface:#fdfcff;--surface-alt:#f2eef9;--surface-inset:#f8f6fc;
  --line:#dcd3ea;--line-strong:#c4b5d8;
  --text:#241c33;--dim:#5e5473;--faint:#8f83a6;--heading:#1a1129;
  --topbar-a:#34204f;--topbar-b:#1e1030;--topbar-text:#f1eaf8;
  --accent:#6338a6;--accent-2:#8e6cc4;--accent-soft:#ede2f8;--on-accent:#fdf8ff;
  --row-alt:#f6f1fb;--hover:#ede4f6;--marker:#8e6cc4;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#8e6cc4,#d6c6f0,#6338a6);
}
html[data-theme="terracotta"]{
  --bg:#f2e9df;--surface:#fefbf6;--surface-alt:#f7efe4;--surface-inset:#fbf6ee;
  --line:#e2d2bf;--line-strong:#cfb89e;
  --text:#2e2016;--dim:#6b5947;--faint:#a5907a;--heading:#25180d;
  --topbar-a:#4a2818;--topbar-b:#2c160b;--topbar-text:#f9ece0;
  --accent:#b3532a;--accent-2:#c98a3e;--accent-soft:#f9e5d6;--on-accent:#fff6ee;
  --row-alt:#faf2e8;--hover:#f5e8d9;--marker:#c98a3e;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#c98a3e,#f0d2a8,#b3532a);
}
html[data-theme="platinum"]{
  --bg:#eceef1;--surface:#ffffff;--surface-alt:#f5f6f8;--surface-inset:#fafbfc;
  --line:#dde1e6;--line-strong:#c3cad3;
  --text:#20252c;--dim:#5d6570;--faint:#9199a4;--heading:#141920;
  --topbar-a:#d9dde3;--topbar-b:#a9b0bb;--topbar-text:#232830;
  --accent:#59636f;--accent-2:#8b94a1;--accent-soft:#e9ecef;--on-accent:#ffffff;
  --row-alt:#f6f7f9;--hover:#e9ecf0;--marker:#8b94a1;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#f2f4f7,#b6bcc6,#e7eaee);
}
html[data-theme="goldmetal"]{
  --bg:#f4f1e9;--surface:#fffdf8;--surface-alt:#f8f4ea;--surface-inset:#fdfaf2;
  --line:#e6dcc4;--line-strong:#d2c19a;
  --text:#2a2314;--dim:#6e6350;--faint:#a2947a;--heading:#1f180c;
  --topbar-a:#8a6420;--topbar-b:#52390f;--topbar-text:#fdf6e3;
  --accent:#8a6418;--accent-2:#c39848;--accent-soft:#f7ecd2;--on-accent:#fffdf4;
  --row-alt:#faf5ea;--hover:#f2e9d4;--marker:#c39848;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#e3c57e,#96732a,#d0ab5c);
}
html[data-theme="rosegold"]{
  --bg:#f6ecea;--surface:#fffbfb;--surface-alt:#faf0ee;--surface-inset:#fdf6f5;
  --line:#ecd4cf;--line-strong:#dab8b1;
  --text:#33201d;--dim:#765b56;--faint:#ab8d87;--heading:#271310;
  --topbar-a:#a04e3a;--topbar-b:#6b2d20;--topbar-text:#fdf1ec;
  --accent:#a35544;--accent-2:#d69583;--accent-soft:#f8e1db;--on-accent:#fff8f6;
  --row-alt:#fbf1ee;--hover:#f6e5e0;--marker:#d69583;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#ecc0b2,#b06a55,#d99a86);
}
html[data-theme="pearl"]{
  --bg:#f2f3f5;--surface:#ffffff;--surface-alt:#f7f8fa;--surface-inset:#fbfcfd;
  --line:#e4e7eb;--line-strong:#cfd4da;
  --text:#1d2126;--dim:#5c6168;--faint:#949aa2;--heading:#101318;
  --topbar-a:#f4f6f9;--topbar-b:#d6dae1;--topbar-text:#1f242b;
  --accent:#3a414b;--accent-2:#6b7480;--accent-soft:#eceef1;--on-accent:#ffffff;
  --row-alt:#f8f9fb;--hover:#eceff3;--marker:#6b7480;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#ffffff,#cdd2d9,#f4f6f9);
}
html[data-theme="cerulean"]{
  --bg:#e9f1f9;--surface:#ffffff;--surface-alt:#f2f7fd;--surface-inset:#f8fbff;
  --line:#d1e0f0;--line-strong:#b1cae4;
  --text:#0e2030;--dim:#52657b;--faint:#88a0b6;--heading:#081828;
  --topbar-a:#0866bd;--topbar-b:#002f6e;--topbar-text:#f4f9ff;
  --accent:#0060c6;--accent-2:#4fa0e2;--accent-soft:#e2f0fc;--on-accent:#ffffff;
  --row-alt:#f3f9fe;--hover:#e6f1fb;--marker:#4fa0e2;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#4fa0e2,#0b7be0,#003d8a);
}
html[data-theme="malachite"]{
  --bg:#e8f2ee;--surface:#fcfffd;--surface-alt:#eef7f3;--surface-inset:#f6fbf9;
  --line:#cde2d9;--line-strong:#aecdbf;
  --text:#102620;--dim:#516b60;--faint:#87a095;--heading:#0a1c16;
  --topbar-a:#0a7d5e;--topbar-b:#044a38;--topbar-text:#eefdf7;
  --accent:#087a59;--accent-2:#43b08c;--accent-soft:#dff1ea;--on-accent:#ffffff;
  --row-alt:#f1f8f5;--hover:#e5f2ec;--marker:#43b08c;
  --good:#0b6b4d;--bad:#a3302a;--hold:#9a6b16;--on-good:#ffffff;--on-bad:#ffffff;--on-hold:#ffffff;
  --shadow:0 1px 2px rgba(30,24,12,.06),0 6px 18px rgba(30,24,12,.07);
  --toprule:linear-gradient(90deg,#43b08c,#0e9a72,#066049);
}
html[data-theme="graphite"]{
  --bg:#0e1014;--surface:#171a20;--surface-alt:#1e222b;--surface-inset:#12151a;
  --line:#2b303a;--line-strong:#3a414d;
  --text:#d6dbe3;--dim:#97a0ae;--faint:#68717e;--heading:#f0f2f6;
  --topbar-a:#1c2027;--topbar-b:#12151a;--topbar-text:#e8ecf3;
  --accent:#d2af63;--accent-2:#e3c98c;--accent-soft:#2a2418;--on-accent:#1a1408;
  --row-alt:#1a1e25;--hover:#232934;--marker:#e3c98c;
  --good:#3ecf9b;--bad:#e88178;--hold:#e0b457;--on-good:#0c1a13;--on-bad:#2a0f0c;--on-hold:#241a05;
  --shadow:0 1px 2px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.38);
  --toprule:linear-gradient(90deg,#8a6a2e,#e3c98c,#8a6a2e);
}
html[data-theme="mocha"]{
  --bg:#120e0a;--surface:#1d1711;--surface-alt:#271f17;--surface-inset:#15100b;
  --line:#342a1f;--line-strong:#46392a;
  --text:#e4d9c9;--dim:#ab9c86;--faint:#7b6e5a;--heading:#f4ecdf;
  --topbar-a:#251b11;--topbar-b:#150e08;--topbar-text:#f1e7d6;
  --accent:#d09a5a;--accent-2:#e6bd80;--accent-soft:#2f2417;--on-accent:#1c1307;
  --row-alt:#211a13;--hover:#2c2319;--marker:#e6bd80;
  --good:#3ecf9b;--bad:#e88178;--hold:#e0b457;--on-good:#0c1a13;--on-bad:#2a0f0c;--on-hold:#241a05;
  --shadow:0 1px 2px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.38);
  --toprule:linear-gradient(90deg,#b07f44,#e6bd80,#8a6234);
}
html[data-theme="midnight"]{
  --bg:#0a1418;--surface:#112026;--surface-alt:#182c33;--surface-inset:#0e1a1f;
  --line:#223942;--line-strong:#314d57;
  --text:#d2e2e4;--dim:#8fa9ad;--faint:#5f7a7f;--heading:#ecf6f6;
  --topbar-a:#0f2a33;--topbar-b:#081a21;--topbar-text:#e4f4f3;
  --accent:#38b6a8;--accent-2:#6fd3c4;--accent-soft:#14323a;--on-accent:#06201c;
  --row-alt:#15262c;--hover:#1c323a;--marker:#6fd3c4;
  --good:#46d3a4;--bad:#ef857a;--hold:#e3b95c;--on-good:#0c1a13;--on-bad:#2a0f0c;--on-hold:#241a05;
  --shadow:0 1px 2px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.38);
  --toprule:linear-gradient(90deg,#2f9c90,#6fd3c4,#1d6f66);
}
html[data-theme="onyx"]{
  --bg:#0b0b0d;--surface:#151518;--surface-alt:#1d1d22;--surface-inset:#101013;
  --line:#2b2b31;--line-strong:#3c3c44;
  --text:#e6e7ea;--dim:#989aa1;--faint:#666970;--heading:#f4f5f7;
  --topbar-a:#232328;--topbar-b:#0b0b0d;--topbar-text:#ededf0;
  --accent:#c8ccd2;--accent-2:#9aa1ac;--accent-soft:#26262c;--on-accent:#16161a;
  --row-alt:#19191e;--hover:#26262d;--marker:#9aa1ac;
  --good:#3ecf9b;--bad:#ef8076;--hold:#e0b457;--on-good:#0c1a13;--on-bad:#2a0f0c;--on-hold:#241a05;
  --shadow:0 1px 2px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.38);
  --toprule:linear-gradient(90deg,#f2f3f5,#9aa1ac,#c8ccd2);
}
html[data-theme="lapis"]{
  --bg:#0a1322;--surface:#121f38;--surface-alt:#18294a;--surface-inset:#0e1830;
  --line:#223457;--line-strong:#31497a;
  --text:#dde6f4;--dim:#8fa0bd;--faint:#5d7095;--heading:#eef3fc;
  --topbar-a:#1a3a73;--topbar-b:#0a1e45;--topbar-text:#eaf1fd;
  --accent:#6fa8ff;--accent-2:#9cc4ff;--accent-soft:#182c4e;--on-accent:#081428;
  --row-alt:#152543;--hover:#1d3156;--marker:#9cc4ff;
  --good:#46d3a4;--bad:#f0857a;--hold:#e3b95c;--on-good:#0c1a13;--on-bad:#2a0f0c;--on-hold:#241a05;
  --shadow:0 1px 2px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.38);
  --toprule:linear-gradient(90deg,#9cc4ff,#2f63b8,#6fa8ff);
}
html[data-theme="oxblood"]{
  --bg:#160d10;--surface:#211318;--surface-alt:#2c1a20;--surface-inset:#170e12;
  --line:#3a232a;--line-strong:#52323c;
  --text:#ecdfe2;--dim:#b48f98;--faint:#805e68;--heading:#f7ecef;
  --topbar-a:#4a1f2b;--topbar-b:#2a0f18;--topbar-text:#f6e9ec;
  --accent:#e0b06a;--accent-2:#f0cd92;--accent-soft:#33202a;--on-accent:#241014;
  --row-alt:#25161c;--hover:#321e25;--marker:#f0cd92;
  --good:#46d3a4;--bad:#f0857a;--hold:#e3b95c;--on-good:#0c1a13;--on-bad:#2a0f0c;--on-hold:#241a05;
  --shadow:0 1px 2px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.38);
  --toprule:linear-gradient(90deg,#f0cd92,#a8762e,#e0b06a);
}

@keyframes ctFlow{from{background-position:200% 0,0 0}to{background-position:0 0,0 0}}
@keyframes ctFadeIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ctSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

body{background:var(--bg);color:var(--text);font-family:var(--sans);transition:background .3s,color .3s}

/* ---------- top bar: ONE rule for every role variant (r177 hardened with !important so it
   overrides per-page <style> that hardcodes color:#fff / background:var(--accent), and the
   inline color:var(--accent) left on standalone "Back to Main" links) ---------- */
.header,.user-header{
  background:linear-gradient(180deg,var(--topbar-a),var(--topbar-b)) !important;
  color:var(--topbar-text) !important;border-bottom:none;box-shadow:var(--shadow);
}
.header::after,.user-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--toprule);opacity:.9;pointer-events:none}
.header h1,.header h2,.header h3,.header h4,.user-header h1{color:var(--topbar-text) !important;text-shadow:none}
.header #welcomeHeader,.header > .header-actions > span,.user-header span{color:var(--topbar-text)}
.header [style*="color:#"]{color:var(--topbar-text) !important}
.header a,.user-header a,.header a[href="/"],.user-header a[href="/"],.header .back-link,.user-header .back-link{color:var(--topbar-text) !important}
.header a[href="/"]:hover,.user-header a[href="/"]:hover,.header .back-link:hover,.user-header .back-link:hover{color:var(--accent-2) !important}
/* current-user name / generic header text that pages may theme individually */
.header #currentUserName,.user-header #currentUserName{color:var(--topbar-text) !important}

/* header buttons: translucent glass, raise + continuous flow on hover */
.header .btn,.header .dropdown-toggle,.header-actions .btn,.user-header .btn,.user-header .dropdown-toggle,.user-header-actions .btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:8px;padding:7px 12px;font-size:13px;font-weight:700;letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.22) !important;background:rgba(0,0,0,.14) !important;
  color:var(--topbar-text) !important;text-shadow:none;box-shadow:none;
  transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
/* bare header links/buttons that pages theme with a translucent-white pill -> use a dark glass pill so topbar-text keeps contrast on every theme */
.header a,.header button,.user-header a,.user-header button{background-color:rgba(0,0,0,.14) !important}
.header .dropdown-menu,.user-header .dropdown-menu{background-color:var(--surface) !important}
.header .dropdown-menu a,.header .dropdown-menu button,.user-header .dropdown-menu a,.user-header .dropdown-menu button{background-color:transparent !important}
/* r189: NO instant per-item hover fill — the .menu-glider is the sole highlight and slides in over
   var(--gdur); an instant surface-alt fill here lit the row before the flowing light arrived. */
.header .dropdown-menu a:hover,.header .dropdown-menu button:hover,.user-header .dropdown-menu a:hover,.user-header .dropdown-menu button:hover{background-color:transparent !important}
.header .btn::before,.header .dropdown-toggle::before,.user-header .btn::before,.user-header .dropdown-toggle::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;pointer-events:none;
  background:
   linear-gradient(108deg,transparent 0%,color-mix(in srgb,var(--accent-2) 32%,transparent) 12%,rgba(255,247,222,.5) 50%,color-mix(in srgb,var(--accent-2) 32%,transparent) 88%,transparent 100%),
   linear-gradient(180deg,
     color-mix(in srgb,var(--accent-2) 21%,rgba(255,255,255,.11)) 0%,
     color-mix(in srgb,var(--accent-2) 16%,rgba(255,255,255,.07)) 48%,
     color-mix(in srgb,var(--accent-2) 20%,rgba(255,255,255,.10)) 100%);
  /* r187: second layer even top-to-bottom (was fading to .02 at the bottom edge -> glow only on upper half of the title button) */
  background-size:200% 100%,100% 100%;background-repeat:repeat-x,no-repeat;
}
.header .btn:hover,.header .dropdown-toggle:hover,
.header .dropdown.show>.btn,.header .dropdown.show>.dropdown-toggle,
.header .dropdown:has(.disc-menu.show)>.disc-btn,
.user-header .btn:hover,.user-header .dropdown-toggle:hover,
.user-header .dropdown.show>.btn,.user-header .dropdown.show>.dropdown-toggle{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent-2) 60%,rgba(255,255,255,.22));
  box-shadow:0 14px 26px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3);
}
.header .btn:hover::before,.header .dropdown-toggle:hover::before,
.header .dropdown.show>.btn::before,.header .dropdown.show>.dropdown-toggle::before,
.header .dropdown:has(.disc-menu.show)>.disc-btn::before,
.user-header .btn:hover::before,.user-header .dropdown-toggle:hover::before,
.user-header .dropdown.show>.btn::before,.user-header .dropdown.show>.dropdown-toggle::before{opacity:1;animation:ctFlow 10s linear infinite}
.header .btn-success,.header .btn-primary{background:rgba(0,0,0,.14) !important;color:var(--topbar-text) !important}
.header .xio-btn,.user-header .xio-btn{background-color:rgba(0,0,0,.14) !important;color:var(--topbar-text) !important;border-color:color-mix(in srgb,var(--topbar-text) 30%,transparent) !important}
.header .xio-btn:hover,.user-header .xio-btn:hover{color:var(--topbar-text) !important}

/* ---------- three floating menu families: FIXED glass, continuous flow ---------- */
.dropdown-menu,.disc-menu,.row-actions-menu{
  position:fixed;z-index:1500;
  min-width:208px;max-width:min(92vw,320px);max-height:min(70vh,560px);overflow:auto;
  padding:6px;border-radius:13px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--line-strong) 70%,transparent);
  box-shadow:0 24px 52px -14px rgba(10,8,4,.5),0 6px 16px -8px rgba(10,8,4,.28),inset 0 1px 0 rgba(255,255,255,.4);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.985);
  transition:opacity .2s,transform var(--gdur) cubic-bezier(.22,1,.36,1),visibility 0s linear .2s;
}
/* Hidden per-row fixed menus park at 0,0 so they never widen the (transformed) container's scroll area; open state sets explicit coords. */
.disc-menu,.row-actions-menu{top:0;left:0}
.dropdown-menu.show,.disc-menu.show,.row-actions-menu.show{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .18s,transform .18s cubic-bezier(.22,1,.36,1);
  animation:ctFadeIn .2s ease-out;
}
.dropdown-menu a,.disc-menu a,.row-actions-menu a,.row-actions-menu button{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font:inherit;font-size:14px;font-weight:600;color:var(--text) !important;text-decoration:none;
  padding:10px 12px;border-radius:9px;white-space:nowrap;cursor:pointer;border:0;background:transparent;
  /* r188: label colour must cross-fade in LOCKSTEP with the .menu-glider glide (same 480ms + same
     easing); a faster .22s colour made the text change before the flowing highlight arrived. */
  transition:color var(--gdur) cubic-bezier(.22,1,.36,1);
}
.dropdown-menu a small,.disc-menu a small,.row-actions-menu small{color:var(--dim) !important}
/* floating panels sit on --surface (not the colored topbar); their items must use --text.
   Higher specificity than the later `.header a{color:var(--topbar-text)}` rule so light-topbar-text
   never washes out menu labels on light glass (and stays correct on dark themes). */
.header .dropdown-menu a,.header .disc-menu a,.header .row-actions-menu a,.header .row-actions-menu button{color:var(--text) !important}
/* ONE gliding highlight per menu: it smoothly follows the pointer between options over 480ms
   and carries the continuous 10s side-flow sheen (1:1 port of the approved preview .gliner). */
.menu-glider{
  position:absolute;left:6px;right:6px;top:0;height:0;border-radius:9px;overflow:hidden;
  /* r188: flowing sheen must sit ON TOP of the option (items are z-index:1); stays click-through. */
  opacity:0;z-index:2;pointer-events:none;transform:translateY(0);
  transition:transform var(--gdur) cubic-bezier(.22,1,.36,1),
             height var(--gdur) cubic-bezier(.22,1,.36,1),
             opacity .18s ease,background .2s ease;
  /* r186: even FULL-HEIGHT glass fill (was top-heavy -> looked lit only on the upper half);
     the traveling gilt band is carried by ::before. Top/bottom kept close so the whole row glows. */
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 17%,rgba(255,255,255,.15)) 0%,
    color-mix(in srgb,var(--accent) 13%,rgba(255,255,255,.10)) 48%,
    color-mix(in srgb,var(--accent) 15%,rgba(255,255,255,.13)) 100%);
}
.menu-glider::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.85;pointer-events:none;
  /* r188: band built from the theme's accent-2 (not warm-white) so the continuous flow reads on
     light glass too; it paints above the row (glider z-index:2) yet stays translucent over the label. */
  background-image:linear-gradient(108deg,transparent 0%,color-mix(in srgb,var(--accent) 26%,transparent) 12%,color-mix(in srgb,var(--accent-2) 44%,transparent) 38%,color-mix(in srgb,var(--accent-2) 68%,rgba(255,255,255,.32)) 50%,color-mix(in srgb,var(--accent-2) 44%,transparent) 62%,color-mix(in srgb,var(--accent) 26%,transparent) 88%,transparent 100%);
  background-size:200% 100%;background-repeat:repeat-x;animation:ctFlow 10s linear infinite;
}
.menu-glider.danger{background:linear-gradient(180deg,color-mix(in srgb,var(--bad) 17%,rgba(255,255,255,.13)) 0%,color-mix(in srgb,var(--bad) 13%,rgba(255,255,255,.09)) 48%,color-mix(in srgb,var(--bad) 15%,rgba(255,255,255,.12)) 100%)}
@media (prefers-reduced-motion:reduce){.menu-glider::before{animation:none}.menu-glider{transition:opacity .15s}}
/* item label only cross-fades colour; the moving highlight is the .menu-glider (no per-item jump) */
.dropdown-menu a:hover,.disc-menu a:hover,.row-actions-menu a:hover,.row-actions-menu button:hover,
.dropdown-menu a.gl-hover,.disc-menu a.gl-hover,.row-actions-menu a.gl-hover,.row-actions-menu button.gl-hover,
.header .dropdown-menu a.gl-hover,.header .disc-menu a.gl-hover{color:var(--accent) !important}
.dropdown-menu a.danger:hover,.disc-menu a.danger:hover,.row-actions-menu a.danger:hover,.row-actions-menu button.danger:hover,
.dropdown-menu a.danger.gl-hover,.disc-menu a.danger.gl-hover,.row-actions-menu a.danger.gl-hover,.row-actions-menu button.danger.gl-hover{color:var(--bad)}
.header .dropdown-menu a.danger.gl-hover,.header .disc-menu a.danger.gl-hover{color:var(--bad) !important}
/* top + disc items carry a dot; row actions are text-only */
.dropdown-menu a::before,.disc-menu a::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent-2);
}
.row-actions-menu a::before,.row-actions-menu button::before{display:none}
.dropdown-menu a.danger,.disc-menu a.danger,.row-actions-menu a.danger,.row-actions-menu button.danger{color:var(--bad)}
.dropdown-menu a.danger::before,.disc-menu a.danger::before{background:var(--bad)}
.dropdown-menu a small,.disc-menu a small{color:var(--dim);font-size:10px;font-weight:400;margin-left:2px}
.dropdown-menu hr,.disc-menu hr,.row-actions-menu hr{height:1px;border:0;background:var(--line);margin:5px 6px}

/* disclosure decision buttons keep semantics, themed */
.disc-btn{border-radius:8px;border:1px solid transparent;isolation:isolate;position:relative;overflow:hidden}
.disc-btn.disc-yes{background:linear-gradient(180deg,color-mix(in srgb,var(--good) 88%,#fff),var(--good));color:var(--on-accent);text-shadow:none}
.disc-btn.disc-partial{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 84%,#fff),var(--accent));color:var(--on-accent);text-shadow:none}
.disc-btn.disc-no{background:linear-gradient(180deg,color-mix(in srgb,var(--heading) 82%,#fff),var(--heading));color:var(--surface);text-shadow:none}

/* row Actions trigger */
.row-actions-btn{
  appearance:none;-webkit-appearance:none;position:relative;isolation:isolate;overflow:hidden;
  background:var(--surface-alt);border:1px solid var(--line);border-radius:8px;
  padding:7px 11px;font-size:12.5px;font-weight:600;color:var(--text);text-shadow:none;box-shadow:none;cursor:pointer;
  transition:transform .16s,border-color .18s,color .18s,background .18s,box-shadow .18s;
}
.row-actions-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;pointer-events:none;
  background:linear-gradient(108deg,transparent,color-mix(in srgb,var(--accent) 22%,transparent) 50%,transparent);background-size:200% 100%}
.row-actions-btn:hover{transform:translateY(-1px);border-color:var(--accent)}
.row-actions-btn:hover::before{opacity:1;animation:ctFlow 10s linear infinite}
.row-actions-dropdown:has(.row-actions-menu.show) .row-actions-btn{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ---------- cards / panels ---------- */
.card,.search-card,.results-card,.management-card,.panel,.login-box,
.search-panel,.user-card,.inquiry-table,.user-search-bar,.multi-select,
.multi-select-dropdown,.sig-card,.edit-form,.mini,.table-scroll-wrap{
  background:var(--surface);color:var(--text);
}
.card{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
.card-title,.card-title-row{color:var(--heading);border-color:var(--line)}
.card-title{font-family:var(--serif)}

/* ---------- forms ---------- */
.form-control,.modal input,.modal select,.modal textarea,.edit-input{
  background:var(--surface-inset);border:1px solid var(--line);color:var(--text);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* r177: bare native controls must also carry themed text (dark-theme black-on-dark fix);
   checkboxes/radios render no glyph text and are handled by accent-color */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{color:var(--text)}
input:not([type="checkbox"]):not([type="radio"])::selection,textarea::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.form-control:focus,.edit-input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.form-group label,label,.form-label,.field-label,legend,caption{color:var(--dim)}
select.form-control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8f98' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px;padding-right:30px;
}

/* ---------- table / records ---------- */
th{background:var(--surface-alt);color:var(--dim)}
th,td{border-bottom:1px solid var(--line)}
tbody tr{position:relative;background:var(--surface);transition:background .15s}
tbody tr:nth-child(even){background:var(--row-alt)}
tbody tr:hover,tr:hover td{background:var(--hover)}
tbody tr:hover{box-shadow:inset 3px 0 0 var(--marker)}
tbody tr.locked-row{background:color-mix(in srgb,var(--hold) 14%,var(--surface))}
.amount-cell{color:var(--good)}
.amount-out,.amount-expense,td.amount-negative{color:var(--bad)}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--accent)}
th.sortable .sort-arrow{font-size:10px;margin-left:2px;color:var(--text)}
th.sortable.active .sort-arrow{color:color-mix(in srgb,var(--accent) 78%,var(--heading))}

/* ---------- pagination ---------- */
.pagination{border-top:1px solid var(--line)}
.pagination .page-info{color:var(--dim)}
.pagination .btn,.multi-select-btn,.ms-actions button,.action-btn{background:var(--surface-alt);border:1px solid var(--line);color:var(--text);text-shadow:none;box-shadow:none}

/* ---------- buttons ---------- */
.btn-outline,.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--line);text-shadow:none;box-shadow:none}
.btn-outline:hover,.btn-secondary:hover{background:var(--hover);border-color:var(--accent);color:var(--text)}
.btn-primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,#000);border-color:color-mix(in srgb,var(--accent) 86%,#000);color:var(--on-accent)}
.btn-success{background:var(--good);color:var(--on-accent);border:1px solid var(--good)}
.btn-success:hover{background:color-mix(in srgb,var(--good) 86%,#000);border-color:color-mix(in srgb,var(--good) 86%,#000);color:var(--on-accent)}
.btn-danger{background:var(--bad);color:var(--on-accent);border:1px solid var(--bad)}
.btn-danger:hover{background:color-mix(in srgb,var(--bad) 86%,#000);border-color:color-mix(in srgb,var(--bad) 86%,#000);color:var(--on-accent)}
.header .btn-primary:hover,.header .btn-success:hover,.header .btn-danger:hover,.header .btn-secondary:hover{background:rgba(255,255,255,.16);color:var(--topbar-text);border-color:transparent}

/* ---------- role badge ---------- */
.role-badge{border:1px solid var(--accent-2);color:color-mix(in srgb,var(--accent-2) 64%,var(--heading));background:transparent}
.role-badge.admin{background:color-mix(in srgb,var(--accent-2) 16%,transparent)}
.role-badge.authorized{background:color-mix(in srgb,var(--accent) 14%,transparent);color:color-mix(in srgb,var(--accent) 78%,var(--heading))}

/* ---------- modals / overlays: themed + fade in/out ---------- */
.modal-overlay,.overlay,.dialog-backdrop{background:color-mix(in srgb,var(--heading) 46%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal,.modal-content,.modal-dialog,.dialog{
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--line-strong) 70%,transparent);border-radius:14px;
  box-shadow:0 24px 60px -16px rgba(10,8,4,.5),0 8px 20px -10px rgba(10,8,4,.3),inset 0 1px 0 rgba(255,255,255,.4);
  color:var(--text);animation:ctFadeIn var(--gdur) cubic-bezier(.22,1,.36,1);
}
.modal-header{background:linear-gradient(180deg,color-mix(in srgb,var(--surface-alt) 88%,transparent),color-mix(in srgb,var(--surface-alt) 28%,transparent));border-bottom:1px solid var(--line);color:var(--heading)}
.modal h3,.modal h4{font-family:var(--serif);color:var(--heading)}
.modal-header h3{font-family:var(--serif);color:inherit}
.modal-footer{background:color-mix(in srgb,var(--surface-alt) 38%,transparent);border-top:1px solid var(--line)}
.modal-close{color:inherit}
.modal-close:hover{background:var(--surface-alt);color:var(--text)}
.empty-state{color:var(--dim)}

/* ---------- global text / chrome ---------- */
h1,h2,h3,h4,h5{color:var(--heading)}
.summary-card{border-left-color:var(--accent)}
.linkbtn{color:var(--accent)}.linkbtn.danger{color:var(--bad)}
.invoice-link{color:var(--good)}
.step-dot.active,.step-dot.done{color:var(--accent);border-bottom-color:var(--accent)}
summary{color:var(--accent)}
.item-grid label{color:var(--dim)}

/* alerts / badges / chips follow theme */
.alert{border-radius:10px}
.alert-info{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line))}
.alert-warning{background:color-mix(in srgb,var(--hold) 15%,var(--surface));color:var(--hold);border:1px solid color-mix(in srgb,var(--hold) 40%,var(--line))}
.alert-danger,.alert-error{background:color-mix(in srgb,var(--bad) 13%,var(--surface));color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 40%,var(--line))}
.alert-success{background:color-mix(in srgb,var(--good) 13%,var(--surface));color:var(--good);border:1px solid color-mix(in srgb,var(--good) 40%,var(--line))}
.badge-blue,.badge-submitted,.badge-ack{background:color-mix(in srgb,var(--accent) 15%,var(--surface));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line))}
.badge-draft,.badge-undisc{background:var(--surface-alt);color:var(--dim);border:1px solid var(--line)}
.badge-rejected{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad)}
.selected-chip,.tag-chip,.multi-select .selected{background:var(--surface-alt);color:var(--text);border:1px solid var(--line)}
.multi-select{border-color:var(--line)}
.multi-select-dropdown{border:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.multi-select-dropdown li:hover,.multi-select-dropdown div:hover,.assign-item:hover,.multi-select-dropdown .ms-item:hover{background:var(--hover)}
.multi-option.checked{background:color-mix(in srgb,var(--good) 13%,var(--surface))}
.batch-bar{background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line))}
.drop-zone:hover,.drop-zone.dragover,.upload-area.dragover{background:var(--hover);border-color:var(--accent);color:var(--accent)}
.mini.danger,.mini.danger:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:var(--surface)}
.um-btn:hover{border-color:var(--accent);box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 1px 0 var(--surface)}
.um-sel.open .um-btn{border-color:var(--accent)}
.um-opt input{accent-color:var(--accent)}
.um-scope-link{color:var(--accent)}

/* scrollbars */
*::-webkit-scrollbar-track{background:var(--surface-alt)}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--faint) 55%,transparent);border:2px solid var(--surface-alt);border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:var(--faint)}
.table-wrap{background:transparent}

/* ---------- theme picker (User menu) ---------- */
.ct-theme{padding:6px 8px 8px;cursor:default}
.ct-theme-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:2px 2px 6px}
.ct-theme-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ct-theme-swatch{width:100%;aspect-ratio:1;border-radius:50%;cursor:pointer;border:2px solid transparent;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s}
.ct-theme-swatch:hover{transform:scale(1.18)}
.ct-theme-swatch.active{border-color:var(--accent-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-2) 45%,transparent),0 2px 6px rgba(0,0,0,.25);transform:scale(1.12)}
.ct-theme-name{font-size:11px;color:var(--dim);text-align:center;margin-top:3px}
.ct-theme-sep{height:1px;background:var(--line);margin:4px 6px}

/* ---------- surviving component tokens (badges / login / toast / stamps) ---------- */
.login-wrap{background:linear-gradient(135deg,var(--topbar-a) 0%,var(--accent) 100%)}
.login-box{background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid color-mix(in srgb,var(--line-strong) 70%,transparent)}
.lock-banner,.lock-badge{background:color-mix(in srgb,var(--hold) 15%,var(--surface));border:1px solid color-mix(in srgb,var(--hold) 40%,var(--line));color:var(--hold)}
.hold-stamp{background:var(--good);color:var(--on-good)}
.badge-disclosed.yes{background:color-mix(in srgb,var(--good) 14%,var(--surface));color:var(--good)}
.badge-disclosed.no{background:color-mix(in srgb,var(--bad) 13%,var(--surface));color:var(--bad)}
.badge-disclosed.partial{background:color-mix(in srgb,var(--hold) 15%,var(--surface));color:var(--hold)}
.badge-record-type.issued{background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent)}
.badge-record-type.received{background:color-mix(in srgb,var(--hold) 15%,var(--surface));color:var(--hold)}
.role-badge.self_check{background:color-mix(in srgb,var(--accent-2) 14%,transparent);color:color-mix(in srgb,var(--accent-2) 64%,var(--heading))}
.void-stamp{color:var(--bad);border-color:var(--bad)}

/* ---------- preserved functional rules (drag target, native options, tabs, FAB, print) ---------- */
.upload-area{min-height:140px;box-sizing:border-box;background:color-mix(in srgb,var(--surface-alt) 70%,transparent);border:2px dashed var(--line-strong);border-radius:12px;transition:border-color .15s,background .15s}
.upload-area>*{pointer-events:none}
.upload-area:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.upload-area.drag-over{border:3px dashed var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);transform:scale(1.01)}
.assign-list{background:color-mix(in srgb,var(--surface-alt) 70%,transparent);border:1px solid var(--line);border-radius:8px}
.assign-search{background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);border-radius:8px}
.tree-node:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:6px}
.level-badge{border-radius:6px}
select option,select optgroup{background:var(--surface);color:var(--text)}
select option:checked{background:var(--accent);color:var(--on-accent)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type="checkbox"],input[type="radio"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
.compose-btn,.reply-btn,.toggle-btn,.pro-btn{background:var(--surface-alt);border:1px solid var(--line);color:var(--text);border-radius:8px}
.profile-tab{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--text);cursor:pointer;padding:8px 12px;font-weight:600}
.profile-tab:hover{color:var(--heading);background:var(--hover)}
.profile-tab.active{color:var(--heading);font-weight:800;border-bottom-color:var(--accent)}
.upload-remove{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line));border-radius:6px}
.upload-remove:hover{background:color-mix(in srgb,var(--bad) 20%,var(--surface))}
#backToTop{background:var(--accent);color:var(--on-accent);border:none;border-radius:50%;box-shadow:var(--shadow)}
#backToTop:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}
.pagination button:disabled,.user-pagination button:disabled{opacity:.45;cursor:not-allowed}
.ms-item:hover{background:var(--hover)}
.header>.back-link,.header a,.header h1 a,.header h2 a{color:var(--topbar-text)}
.header .back-link:hover{color:var(--accent-2)}
@media print{
  .modal-overlay,.modal-backdrop,.overlay{background:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;position:static !important}
  .modal,.modal-content,.popup,.dialog{background:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important;border:none !important}
  .btn,button.btn,a.btn{box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}

/* =====================================================================
   MOBILE (≤640): left/right record cards, bottom-sheet menus, full-screen
   modals, no horizontal table scrolling.
   ===================================================================== */
@media (max-width:640px){
  .header{height:auto;flex-wrap:wrap;gap:8px;padding:10px 14px}
  .header-actions{flex-wrap:wrap}
  .table-wrap{overflow:visible;padding-bottom:0}
  table{min-width:0}
  /* id-specific reset: desktop sizes #checkTable to min-width:1288; an element
     selector can't override that, so the card-layout table must be reset by id. */
  #checkTable{width:100%;min-width:0}
  thead{display:none}
  tbody tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:8px 12px;box-shadow:var(--shadow)}
  tbody tr:nth-child(even){background:var(--surface)}
  tbody td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;border:0;padding:7px 0;text-align:right}
  tbody td::before{content:attr(data-label);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);flex:none;text-align:left;padding-top:2px}
  /* floating menus become bottom sheets, inline top/left overridden */
  .dropdown-menu,.disc-menu,.row-actions-menu{
    position:fixed !important;top:auto !important;left:0 !important;right:0 !important;bottom:0 !important;
    transform:translateY(100%);width:100% !important;min-width:0 !important;max-width:100% !important;max-height:74vh;border-radius:16px 16px 0 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .dropdown-menu.show,.disc-menu.show,.row-actions-menu.show{transform:translateY(0);animation:ctSheetUp .32s cubic-bezier(.22,1,.36,1)}
  .dropdown-menu a,.disc-menu a,.row-actions-menu a{padding:13px 12px;font-size:15px}
  .modal{width:100vw !important;max-width:100vw !important;max-height:92vh;border-radius:16px 16px 0 0;align-self:flex-end}
}



/* ===== r213 styles: Positive Pay, document tiles, pickup confirmation ===== */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.doc-tile{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px;background:color-mix(in srgb,var(--surface) 80%,transparent);}
.doc-ico{width:38px;height:38px;flex:0 0 38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.doc-meta{min-width:0;flex:1;}
.doc-label{font-size:12px;font-weight:800;margin-bottom:2px;}
.doc-name{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-none{font-size:11px;color:var(--dim);}
.pu-box{border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:10px;padding:14px 16px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));}
.pu-box.is-void{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--surface));}
.pu-no{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:2px 8px;font-weight:700;}
.pu-badge{font-size:11px;font-weight:800;border-radius:20px;padding:3px 12px;}
.pu-badge-done{background:color-mix(in srgb,var(--good) 16%,var(--surface));color:var(--good);}
.pu-badge-void{background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--bad);}
.pu-facts{flex:1;min-width:280px;font-size:12.5px;display:flex;flex-direction:column;gap:4px;}
.pu-facts span{color:var(--dim);font-weight:700;display:inline-block;min-width:118px;}
.sig-card{width:230px;border:1px solid var(--line);border-radius:8px;padding:10px;background:#fff;cursor:zoom-in;text-align:center;}
.sig-card img{width:100%;height:90px;object-fit:contain;display:block;}
.sig-cap{font-size:10px;color:#777;margin-top:4px;}
.pu-table{width:100%;max-width:100%;min-width:0;border-collapse:collapse;margin-top:10px;font-size:12px;table-layout:fixed;}
.pu-table th,.pu-table td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top;word-break:break-word;overflow-wrap:anywhere;}
.pu-table th:nth-child(1),.pu-table td:nth-child(1){width:15%;}
.pu-table th:nth-child(2),.pu-table td:nth-child(2){width:33%;}
.pu-table th:nth-child(3),.pu-table td:nth-child(3){width:33%;}
.pu-table th:nth-child(4),.pu-table td:nth-child(4){width:19%;}
.pu-table th{font-size:11px;color:var(--dim);}
.mailchip{margin-top:6px;border:1px dashed var(--line);border-radius:6px;padding:7px 9px;background:var(--surface);}
.mail-line{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;user-select:all;cursor:text;}
.void-banner{background:color-mix(in srgb,var(--bad) 12%,var(--surface));border:1px solid var(--bad);color:var(--bad);border-radius:6px;padding:8px 10px;font-size:12px;font-weight:700;margin:8px 0;}

/* ===================== r215 categorized dropdown menus ===================== */
.dropdown-menu .mc-sect{display:block;padding:7px 14px 2px;font-size:10px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);cursor:default;white-space:nowrap;
  border-top:1px solid var(--line);margin-top:2px;}
.dropdown-menu .mc-sect:first-child{border-top:none;margin-top:0;}
.dropdown-menu .mc-sect:hover{background:transparent;color:var(--accent);}
.dropdown-menu a.mc-sub,.dropdown-menu button.mc-sub{padding-left:26px;}

/* ===================== r215 nested flyout submenus ===================== */
/* A transition cannot start when a flyout changes from display:none to block.
   A keyframe fade runs on every reveal, including nested/edge-flipped menus. */
@keyframes ctFlyoutFadeIn{from{opacity:0}to{opacity:1}}
/* r215.1: top toggles never wrap (caret on its own line looked broken on narrower widths) */
.header .btn,.header .dropdown-toggle,.user-header .btn,.user-header .dropdown-toggle{white-space:nowrap;}
/* action groups wrap to a second row instead of forcing horizontal overflow */
.header .header-actions,.user-header .user-header-actions{flex-wrap:wrap;row-gap:6px;}

.dropdown-menu .mc-parent{position:relative;}
.dropdown-menu .mc-parent-label{display:flex;justify-content:flex-start;align-items:center;gap:10px;position:relative;padding-right:26px;}
.dropdown-menu .mc-arrow{color:var(--dim);font-size:9px;flex:none;position:absolute;right:12px;}
.dropdown-menu .mc-flyout{display:none;position:absolute;left:100%;top:0;min-width:235px;margin:0;
  padding:6px;z-index:1060;background-color:var(--surface) !important;
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);}
.dropdown-menu .mc-flyout.mc-left{left:auto;right:100%;}
.dropdown-menu .mc-flyout.mc-up{top:auto;bottom:0;}
.mc-parent.mc-open > .mc-flyout{display:block;opacity:1;visibility:visible;pointer-events:auto;
  transform:none;transition:opacity .15s ease-out;animation:ctFlyoutFadeIn .15s ease-out both;}
/* a flyout must paint outside the menu box (menu itself is overflow:auto for long lists).
   backdrop-filter on the menu makes the compositor clip descendants to its border box,
   so the open menu must drop the blur while a flyout is shown. */
.dropdown-menu.mc-has-open{overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none;}
@media (hover:hover){
  .dropdown-menu .mc-parent:hover > .mc-flyout{display:block;opacity:1;visibility:visible;
    pointer-events:auto;transform:none;animation:ctFlyoutFadeIn .15s ease-out both;}
}
@media (prefers-reduced-motion:reduce){
  .dropdown-menu .mc-parent.mc-open > .mc-flyout,
  .dropdown-menu .mc-parent:hover > .mc-flyout{animation:none;transition:none;}
}
@media (max-width:768px){
  .dropdown-menu .mc-flyout{position:static;display:none;min-width:0;padding:2px 0 2px 12px;
    border:none;border-radius:0;box-shadow:none;background:transparent !important;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  .mc-parent.mc-open > .mc-flyout{display:block;}
  .dropdown-menu.mc-has-open{overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .mc-flyout .menu-glider{display:none;}
}

/* r218 Mark Ready for Pickup */
.row-actions-menu a.ra-pickup, .dropdown-menu a.ra-pickup{color:var(--good);font-weight:700}
.row-actions-menu a.ra-unpick, .dropdown-menu a.ra-unpick{color:var(--hold);font-weight:700}
.kiosk-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:11px;font-size:10.5px;font-weight:700;background:color-mix(in srgb,#2563eb 14%,var(--surface));color:color-mix(in srgb,#2563eb 72%,var(--text));border:1px solid color-mix(in srgb,#2563eb 32%,transparent);white-space:nowrap}
.kiosk-pill.off{background:var(--surface-alt);color:var(--dim);font-weight:600}

/* ===== r219 Pickup Function (office) ===== */
.dropdown-menu a.ra-wait{color:var(--good) !important;font-weight:700}
.dropdown-menu a.ra-scan{color:#1d5fa8 !important;font-weight:700}
.row-actions-menu a.ra-qrlabel,.dropdown-menu a.ra-qrlabel{color:#1d5fa8 !important;font-weight:700}
[data-theme="midnight"] .row-actions-menu a.ra-qrlabel,[data-theme="onyx"] .row-actions-menu a.ra-qrlabel,[data-theme="graphite"] .row-actions-menu a.ra-qrlabel,[data-theme="lapis"] .row-actions-menu a.ra-qrlabel,[data-theme="oxblood"] .row-actions-menu a.ra-qrlabel,[data-theme="mocha"] .row-actions-menu a.ra-qrlabel,[data-theme="midnight"] .dropdown-menu a.ra-qrlabel,[data-theme="onyx"] .dropdown-menu a.ra-qrlabel,[data-theme="graphite"] .dropdown-menu a.ra-qrlabel,[data-theme="lapis"] .dropdown-menu a.ra-qrlabel,[data-theme="oxblood"] .dropdown-menu a.ra-qrlabel,[data-theme="mocha"] .dropdown-menu a.ra-qrlabel{color:#7db4ff !important}
[data-theme="midnight"] .dropdown-menu a.ra-scan,[data-theme="onyx"] .dropdown-menu a.ra-scan,[data-theme="graphite"] .dropdown-menu a.ra-scan,[data-theme="lapis"] .dropdown-menu a.ra-scan,[data-theme="oxblood"] .dropdown-menu a.ra-scan,[data-theme="mocha"] .dropdown-menu a.ra-scan{color:#7db4ff !important}
[data-theme="midnight"] .dropdown-menu a.ra-wait,[data-theme="onyx"] .dropdown-menu a.ra-wait,[data-theme="graphite"] .dropdown-menu a.ra-wait,[data-theme="lapis"] .dropdown-menu a.ra-wait,[data-theme="oxblood"] .dropdown-menu a.ra-wait,[data-theme="mocha"] .dropdown-menu a.ra-wait{color:var(--good) !important}
.pf-badge{display:inline-block;min-width:18px;padding:1px 6px;margin-left:6px;border-radius:9px;background:var(--good);color:var(--on-good);font-size:11px;font-weight:800;text-align:center}
.pf-pad{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);margin:4px 2px 12px}
.pf-pad::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--bad);flex:0 0 auto}
.pf-pad.on::before{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}
.pf-batch{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden;background:var(--surface)}
.pf-batch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;flex-wrap:wrap}
.pf-batch-title{cursor:pointer;flex:1;min-width:240px}
.pf-batch-title .pf-chev{display:inline-block;color:var(--dim);font-size:10px;transition:transform .2s;margin-right:6px}
.pf-batch.open .pf-chev{transform:rotate(90deg)}
.pf-batch-sub{font-size:11.5px;color:var(--dim);margin-top:2px;margin-left:16px}
.pf-batch-actions{display:flex;gap:8px;flex-wrap:wrap}
.pf-rows{display:none;border-top:1px solid var(--line);overflow-x:auto}
.pf-batch.open .pf-rows{display:block}
.pf-rows table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:auto}
.pf-rows th,.pf-rows td{padding:7px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.pf-scanbox{border:2px solid var(--accent);border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));padding:16px 18px;text-align:center;margin-bottom:14px}
.pf-scanbox .pf-sb-title{font-weight:800;font-size:15px;margin-bottom:4px;color:var(--heading)}
.pf-scanbox .pf-sb-sub{font-size:12.5px;color:var(--dim)}
.pf-manual{display:flex;gap:8px;margin:10px 0 4px}
.pf-manual input{flex:1}
.pf-qcard{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:12px;background:var(--surface)}
.pf-qcard.ok{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.pf-qcard.no{border-color:color-mix(in srgb,var(--bad) 50%,var(--line));opacity:.92}
.pf-qc-head{font-size:11.5px;color:var(--dim)}
.pf-qc-title{font-weight:800;font-size:15px;margin:3px 0}
.pf-qc-amt{font-weight:700}
.pf-qc-memo{font-weight:400;color:var(--dim);font-size:12.5px}
.pf-qc-warn{margin-top:8px;font-size:12.5px;color:var(--hold)}
.pf-qc-reason{margin-top:8px;font-size:12.5px;color:var(--bad);font-weight:700}
.pf-qc-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pf-q-head{font-size:13px;font-weight:700;margin:6px 0 6px}
.pf-q-row{display:flex;justify-content:space-between;gap:10px;padding:5px 2px;border-bottom:1px dashed var(--line);font-size:13px}
.pf-q-row a{color:var(--bad);text-decoration:none;font-weight:800;margin-left:10px}
.pf-q-empty{color:var(--dim);font-size:12.5px;padding:6px 2px 12px}
.pf-scanstatus{min-height:18px;font-size:12.5px;color:var(--hold);margin-bottom:6px}
/* r230 scan station: continuous scanned-check list */
.pf-li-sec{font-size:13px;font-weight:800;color:var(--heading);margin:14px 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pf-li-sec span{font-weight:500;color:var(--dim);font-size:12px}
.pf-li-sec-no{margin-top:14px}
.pf-li-card{border:1px solid color-mix(in srgb,var(--good) 45%,var(--line));border-radius:10px;padding:11px 14px;margin-bottom:9px;background:var(--surface);display:flex;gap:12px;align-items:flex-start}
.pf-li-card.no{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));background:color-mix(in srgb,var(--bad) 5%,var(--surface))}
.pf-li-main{flex:1;min-width:0}
.pf-li-head{font-size:11.5px;color:var(--dim)}
.pf-li-title{font-weight:800;font-size:14.5px;margin:2px 0}
.pf-li-amt{font-weight:700;font-size:13.5px;word-break:break-word}
.pf-li-memo{font-weight:400;color:var(--dim);font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-li-warn{margin-top:5px;font-size:12.5px;color:var(--hold)}
.pf-li-reason{margin-top:5px;font-size:12.5px;color:var(--bad);font-weight:700}
.pf-li-actions{display:flex;gap:7px;align-items:center;flex:0 0 auto}
.pf-li-x{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--bad);font-weight:800;cursor:pointer;font-size:14px;line-height:1}
.pf-li-x:hover{border-color:var(--bad)}
.pf-li-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.pf-li-total{font-size:13.5px;color:var(--heading)}
.pf-li-total b{font-size:15px}
.pf-li-btns{display:flex;gap:9px;flex-wrap:wrap}
.pf-li-empty{color:var(--dim);font-size:12.5px;padding:8px 2px}

/* r220 pickup flow: batch/separately choice, batch name combobox, push question */
.pf-choice{display:flex;gap:14px;flex-wrap:wrap}
.pf-choice .card-opt{flex:1 1 250px;border:2px solid var(--line-strong);border-radius:12px;padding:18px;cursor:pointer;background:var(--surface);transition:border-color .15s ease,background .15s ease}
.pf-choice .card-opt:hover{border-color:var(--accent);background:var(--surface-alt)}
.pf-choice .card-opt h4{margin:0 0 6px;font-size:16px;color:var(--heading)}
.pf-choice .card-opt p{margin:0;font-size:13px;color:var(--dim);line-height:1.5}
.pf-choice-sub{color:var(--dim);font-size:13px;margin:0 0 14px;line-height:1.5}
.pf-field-label{display:block;font-size:13px;font-weight:600;color:var(--heading);margin-bottom:6px}
.pf-combo{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text);font-size:15px;box-sizing:border-box}
.pf-combo:focus{outline:none;border-color:var(--accent)}
.pf-note{font-size:12.5px;color:var(--dim);margin:10px 2px 0;line-height:1.5}
.pf-push-msg{font-size:15px;color:var(--text);line-height:1.55;margin:0}
.pf-skip{margin-top:12px;font-size:12.5px;color:var(--hold);line-height:1.5}

/* r-sec 10: prevent header horizontal overflow on phone widths */
@media (max-width: 640px) {
  .header { flex-wrap: wrap; gap: 8px; padding: 0 14px; }
  .header > * { min-width: 0; }
  .header h1 { white-space: normal; word-break: break-word; }
  .header h1+span, .header>div span { white-space: normal; }
  .header .header-actions { flex-wrap: wrap; gap: 8px; }
}

/* Dark-theme contrast: inherit native button text, keep readable hints and date controls. */
button{color:inherit}
:root:is([data-theme="graphite"],[data-theme="mocha"],[data-theme="midnight"],[data-theme="onyx"],[data-theme="lapis"],[data-theme="oxblood"]){color-scheme:dark;--faint:var(--dim)}
input::placeholder,textarea::placeholder{opacity:1}
.btn-success,.btn-success:hover{color:var(--on-good)}
.btn-danger,.btn-danger:hover,.btn-hold:hover,.btn-hold-active{color:var(--on-bad)}
.disc-btn.disc-yes{color:var(--on-good)}
:root:is([data-theme="graphite"],[data-theme="mocha"],[data-theme="midnight"],[data-theme="onyx"],[data-theme="lapis"],[data-theme="oxblood"]) :is(.btn-void:hover,.btn-void-active){color:var(--bg)}

/* 20261007 navigation/search: layout only; theme glider, flow and transitions stay intact. */
.header .dropdown-menu a,.user-header .dropdown-menu a,.disc-menu a{
 justify-content:flex-start;text-align:left;box-sizing:border-box;padding-left:29px;padding-right:30px;
}
.header .dropdown-menu a::before,.user-header .dropdown-menu a::before,.disc-menu a::before{
 position:absolute;left:12px;top:50%;transform:translateY(-50%);margin:0;
}
.header .dropdown-menu a .mc-arrow,.user-header .dropdown-menu a .mc-arrow{right:12px;margin:0;}
.ct-nav-badge{margin-left:auto;font-size:10px;font-weight:400;color:var(--dim);}
.dropdown-menu a.ct-nav-reserved{cursor:default;gap:12px;}
.ct-main-search{width:100%;min-width:0;margin-top:8px;text-align:left;color:var(--text);}
.card-title-row:has(>.ct-main-search){flex-wrap:wrap;}
.ct-search-quick{display:flex;flex-wrap:wrap;align-items:end;gap:10px;}
.ct-search-quick label,.ct-filter-field{display:flex;flex-direction:column;gap:5px;color:var(--text);font-size:12px;font-weight:600;min-width:0;}
.ct-search-field{flex:0 1 165px}.ct-search-term{flex:1 1 220px}.ct-search-status{flex:0 1 250px}
.ct-search-quick .form-control,.ct-search-advanced .form-control{width:100%;box-sizing:border-box;color:var(--text);background:var(--input-bg,var(--surface-alt));border-color:var(--line-strong);}
.ct-search-quick .form-control::placeholder,.ct-search-advanced .form-control::placeholder{color:var(--dim);}
.ct-search-tools{display:flex;gap:10px;justify-content:space-between;margin-top:10px;}
.ct-search-advanced{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
.ct-search-advanced[hidden]{display:none;}
.ct-filter-select{position:relative;font-size:13px;font-weight:400;}
.ct-filter-select summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:36px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--input-bg,var(--surface-alt));box-sizing:border-box;}
.ct-filter-select summary::-webkit-details-marker{display:none;}
.ct-filter-caption{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-filter-popup{position:absolute;z-index:1050;top:calc(100% + 4px);left:0;right:0;min-width:220px;padding:10px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);}
.ct-filter-selection{display:flex;gap:10px;justify-content:space-between;margin:8px 0;}
.ct-filter-selection button{background:transparent;border:0;padding:4px 0;text-align:left;color:var(--text);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;}
.ct-filter-options{max-height:230px;overflow:auto;}
.ct-filter-options label{display:flex;flex-direction:row;align-items:start;gap:8px;padding:7px 6px;border-radius:5px;cursor:pointer;color:var(--text);font:inherit;}
.ct-filter-options label:hover{background:var(--surface-alt);}
.ct-filter-options input{flex:none;width:14px;height:14px;accent-color:var(--accent);margin:2px 0 0;}
.ct-filter-options span{overflow-wrap:anywhere;min-width:0;}
.ct-filter-empty{padding:8px;color:var(--dim);font-size:12px;}
.ct-filter-apply{grid-column:span 2;display:flex;gap:12px;align-items:end;font-size:12px;color:var(--dim);}
#mainSearchMessage:empty{display:none}#mainSearchMessage{margin-top:8px;font-size:13px;color:var(--bad);}
@media(max-width:768px){.ct-search-advanced{grid-template-columns:repeat(2,minmax(0,1fr));}.ct-filter-apply{grid-column:1/-1}.ct-filter-popup{min-width:0}.ct-nav-badge{white-space:normal;}}
@media(max-width:480px){.ct-search-advanced{grid-template-columns:minmax(0,1fr)}.ct-search-field,.ct-search-status{flex:1 1 100%}.ct-filter-apply{align-items:center;flex-wrap:wrap}.ct-search-term{flex-basis:100%}}

.card-title-row:has(>.ct-main-search){gap:8px;}