/**
 * BRNB Expense Form — ShadCN-inspired design system.
 * Scoped entirely to #brnb-expense-form-wrapper.
 * Does not depend on UIkit.
 *
 * @package BRNB\ExpenseManagement
 */

/* ============================================================
   Design tokens
   ============================================================ */
#brnb-expense-form-wrapper,
#brnb-status-form-wrapper {
  --exp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --exp-bg: #ffffff;
  --exp-bg-subtle: #fafafa;
  --exp-border: #e4e4e7;
  --exp-border-hover: #d4d4d8;
  --exp-border-focus: #18181b;
  --exp-text: #09090b;
  --exp-text-muted: #71717a;
  --exp-text-placeholder: #a1a1aa;
  --exp-error: #ef4444;
  --exp-error-border: #fca5a5;
  --exp-error-bg: #fef2f2;
  --exp-warning-bg: #fffbeb;
  --exp-warning-border: #fde68a;
  --exp-warning-text: #854d0e;
  --exp-info-bg: #eff6ff;
  --exp-info-border: #bfdbfe;
  --exp-info-text: #1e40af;
  --exp-radius-sm: 4px;
  --exp-radius: 6px;
  --exp-radius-lg: 8px;
  --exp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --exp-primary: var(--brnb-primary, #18181b);

  font-family: var(--exp-font);
  color: var(--exp-text);
  -webkit-font-smoothing: antialiased;
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  box-sizing: border-box;
}

#brnb-expense-form-wrapper *,
#brnb-expense-form-wrapper *::before,
#brnb-expense-form-wrapper *::after,
#brnb-status-form-wrapper *,
#brnb-status-form-wrapper *::before,
#brnb-status-form-wrapper *::after {
  box-sizing: border-box;
}

/* ============================================================
   Header
   ============================================================ */
.brnb-exp-logo {
  text-align: center;
  margin-bottom: 28px;
}
.brnb-exp-logo img {
  /* 300px is the target width on a desktop viewport. max-width: 100%
     stops it overflowing the form wrapper on narrow phones, where
     it scales down proportionally with height: auto. */
  width: 300px;
  max-width: 100%;
  height: auto;
}
.brnb-exp-header {
  text-align: center;
  margin-bottom: 32px;
}
.brnb-exp-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--exp-text);
  margin: 0 0 8px;
}
.brnb-exp-subtitle {
  font-size: 0.875rem;
  color: var(--exp-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   Messages / alerts
   ============================================================ */
.brnb-exp-messages {
  border-radius: var(--exp-radius);
  padding: 12px 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
.brnb-exp-messages:focus {
  outline: none;
}
.brnb-exp-messages:focus-visible {
  outline: 2px solid var(--exp-border-focus);
  outline-offset: 2px;
}
.brnb-exp-messages p {
  margin: 0 0 4px;
}
.brnb-exp-messages p:last-child {
  margin-bottom: 0;
}
.brnb-exp-messages ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.brnb-exp-messages li {
  margin-bottom: 3px;
}
.brnb-exp-messages--error {
  background: var(--exp-error-bg);
  border: 1px solid var(--exp-error-border);
  color: #991b1b;
}
.brnb-exp-messages--success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

/* ============================================================
   Sections (card-like panels)
   ============================================================ */
.brnb-exp-section {
  background: var(--exp-bg);
  border: 1px solid var(--exp-border);
  border-radius: var(--exp-radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--exp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.brnb-exp-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--exp-text-muted);
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--exp-border);
}

/* ============================================================
   Visually-hidden utility — present in the accessibility tree
   but not visible. Used for SR-only labels and live-region
   announcements that don't have a visible counterpart.
   ============================================================ */
.brnb-exp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Grid layouts
   ============================================================ */
.brnb-exp-row {
  display: grid;
  gap: 16px;
}
.brnb-exp-row--2col {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 540px) {
  .brnb-exp-row--2col {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Fields
   ============================================================ */
.brnb-exp-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brnb-exp-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--exp-text);
  line-height: 1.25;
  cursor: default;
}
.brnb-exp-required {
  color: var(--exp-error);
  margin-left: 1px;
}
.brnb-exp-hint {
  font-size: 0.75rem;
  color: var(--exp-text-muted);
  line-height: 1.4;
}
/* Admin-configured guidance string shown beneath an input on the
   public form (description_help, receipt_help). Sits between the
   field control and its error span; intentionally subdued so it
   reads as secondary to the label/input hierarchy. Matches the
   ShadCN convention of muted 12px helper text. */
.brnb-exp-help-text {
  margin: 0;
  /* Pull the help text up against the input so it reads as
     attached metadata rather than a fresh paragraph in the gap. */
  margin-top: -2px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--exp-text-muted);
}
.brnb-exp-label-hint {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--exp-text-muted);
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
}

/* ============================================================
   Inputs / select / textarea
   ============================================================ */
.brnb-exp-input,
.brnb-exp-select,
.brnb-exp-textarea {
  width: 100%;
  background: var(--exp-bg);
  border: 1px solid var(--exp-border);
  border-radius: var(--exp-radius);
  padding: 8px 12px;
  font-size: 0.875rem;
  font-family: var(--exp-font);
  color: var(--exp-text);
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  margin: 0;
}

/* iOS Safari date input fix.
   `-webkit-appearance: none` strips the intrinsic sizing the date
   input needs to render its placeholder and value correctly on iOS,
   producing the "squashed" empty input the user reported. Restoring
   the native appearance for date inputs + ensuring a minimum height
   (iOS's default touch target) makes it size correctly while leaving
   all other inputs styled. font-size: 16px also prevents iOS Safari's
   automatic page-zoom-on-focus which double-shrinks the field. */
.brnb-exp-input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  font-size: 16px;
  /* iOS aligns the date text from the right by default — pulling it
     back to the left so it lines up with every other field's value. */
  -webkit-text-align: left;
  text-align: left;
  /* Without an explicit display value the placeholder area can
     collapse on empty inputs in some iOS Safari versions. */
  display: block;
}
.brnb-exp-input::placeholder,
.brnb-exp-textarea::placeholder {
  color: var(--exp-text-placeholder);
}
.brnb-exp-input:hover,
.brnb-exp-select:hover,
.brnb-exp-textarea:hover {
  border-color: var(--exp-border-hover);
}
.brnb-exp-input:focus,
.brnb-exp-select:focus,
.brnb-exp-textarea:focus {
  border-color: var(--exp-border-focus);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
}

/* ============================================================
   Read-only Amount field — applied when the chosen expense type
   is rate-based, where the value is computed live from
   rate × quantity and the input must not be edited directly.
   The grey background + cursor change make it obvious the field
   is non-interactive without disabling it (we keep the input in
   the form so its value still submits and screen readers can
   read it).
   ============================================================ */
.brnb-amount-input[readonly] {
  background: var(--exp-bg-subtle);
  color: var(--exp-text-muted, #71717a);
  cursor: default;
  border-style: dashed;
}
.brnb-amount-input[readonly]:hover,
.brnb-amount-input[readonly]:focus {
  border-color: var(--exp-border);
  box-shadow: none;
}

/* Stronger keyboard-only outline for WCAG 2.4.7 conformance.
   :focus-visible isolates this from mouse-click focus rings. */
.brnb-exp-input:focus-visible,
.brnb-exp-select:focus-visible,
.brnb-exp-textarea:focus-visible {
  outline: 2px solid var(--exp-border-focus);
  outline-offset: 2px;
}
.brnb-exp-select {
  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='%2371717a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.brnb-exp-textarea {
  resize: vertical;
  min-height: 76px;
}
/* Error state on the field container, plus aria-invalid hook so the
   visual treatment follows the AT signal even if the class is missed. */
.brnb-exp-field--error .brnb-exp-input,
.brnb-exp-field--error .brnb-exp-select,
.brnb-exp-field--error .brnb-exp-textarea,
.brnb-exp-field--error .brnb-receipt-upload-area,
.brnb-exp-input[aria-invalid="true"],
.brnb-exp-select[aria-invalid="true"],
.brnb-exp-textarea[aria-invalid="true"] {
  border-color: var(--exp-error-border);
}
.brnb-exp-field--error .brnb-exp-input:focus,
.brnb-exp-field--error .brnb-exp-select:focus,
.brnb-exp-field--error .brnb-exp-textarea:focus {
  border-color: var(--exp-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ============================================================
   Field error text
   ============================================================ */
.brnb-exp-error {
  font-size: 0.75rem;
  color: var(--exp-error);
  line-height: 1.4;
  display: none;
}
.brnb-exp-error:not(:empty) {
  display: block;
}

/* ============================================================
   Info / warning callouts
   ============================================================ */
.brnb-exp-info {
  background: var(--exp-info-bg);
  border: 1px solid var(--exp-info-border);
  border-radius: var(--exp-radius);
  padding: 12px 14px;
  font-size: 0.8125rem;
  color: var(--exp-info-text);
  line-height: 1.5;
  margin-bottom: 16px;
}
.brnb-exp-warning {
  background: var(--exp-warning-bg);
  border: 1px solid var(--exp-warning-border);
  border-radius: var(--exp-radius);
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: var(--exp-warning-text);
  line-height: 1.5;
  display: none;
}

/* Amount limit hint (shown by JS) */
.brnb-amount-limit-hint {
  display: none;
}

/* ============================================================
   Line item cards
   ============================================================ */
.brnb-exp-line-item {
  background: var(--exp-bg-subtle);
  border: 1px solid var(--exp-border);
  border-radius: var(--exp-radius-lg);
  padding: 20px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.brnb-exp-line-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brnb-exp-line-item-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--exp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.brnb-exp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--exp-radius);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--exp-font);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
}
.brnb-exp-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.brnb-exp-btn:focus-visible {
  outline: 2px solid var(--exp-border-focus);
  outline-offset: 2px;
}
.brnb-exp-btn--primary {
  background: var(--exp-primary);
  color: #fafafa;
  border-color: var(--exp-primary);
}
.brnb-exp-btn--primary:hover:not(:disabled) {
  opacity: 0.85;
}
.brnb-exp-btn--ghost {
  background: transparent;
  color: var(--exp-text);
  border-color: var(--exp-border);
}
.brnb-exp-btn--ghost:hover:not(:disabled) {
  background: #f4f4f5;
  border-color: var(--exp-border-hover);
}
.brnb-exp-btn--danger {
  background: transparent;
  color: var(--exp-error);
  border-color: var(--exp-error-border);
  padding: 4px 10px;
  font-size: 0.75rem;
}
.brnb-exp-btn--danger:hover:not(:disabled) {
  background: var(--exp-error-bg);
}
.brnb-exp-btn--block {
  width: 100%;
}
.brnb-exp-btn--lg {
  padding: 11px 24px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ============================================================
   Add-item bar and running total
   ============================================================ */
.brnb-exp-item-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--exp-bg-subtle);
  border: 1px solid var(--exp-border);
  border-radius: var(--exp-radius-lg);
  margin-top: 4px;
}
.brnb-exp-total-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brnb-exp-total-label {
  font-size: 0.8125rem;
  color: var(--exp-text-muted);
  line-height: 1;
}
.brnb-exp-total-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--exp-primary);
  line-height: 1;
}

/* v1.15.0: the running total lives in its own section between the
   line items and the Turnstile widget, so the figure and the
   per-currency breakdown have a full row to render cleanly. */
.brnb-exp-total-section {
  padding: 14px 16px;
  background: var(--exp-bg-subtle);
  border: 1px solid var(--exp-border);
  border-radius: var(--exp-radius-lg);
}
.brnb-exp-total-section .brnb-exp-total-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
  width: 100%;
}
.brnb-exp-total-breakdown {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 0.8125rem;
  color: var(--exp-text-muted);
  margin-top: 4px;
}

/* ============================================================
   Receipt upload area
   ============================================================ */
.brnb-receipt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.brnb-receipt-upload-area {
  border: 2px dashed var(--exp-border);
  border-radius: var(--exp-radius);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.brnb-receipt-upload-area:hover,
.brnb-receipt-upload-area.brnb-dragover {
  border-color: var(--exp-border-focus);
  background: var(--exp-bg-subtle);
}
.brnb-receipt-drop-label {
  cursor: pointer;
  display: block;
}
.brnb-exp-upload-icon {
  display: block;
  font-size: 1.375rem;
  color: var(--exp-text-muted);
  margin-bottom: 6px;
  line-height: 1;
}
.brnb-exp-upload-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--exp-text);
  margin-bottom: 3px;
}
.brnb-exp-upload-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--exp-text-muted);
}

/* ============================================================
   Attachment tiles (v1.13.1)
   ============================================================ */
.brnb-receipt-upload-area--has-files {
  /* When at least one tile is present, soften the dashed border so
     the tiles read as the dominant visual rather than the dropzone. */
  border-style: solid;
  background: var(--exp-bg-subtle);
}
.brnb-receipt-upload-area--at-capacity {
  /* Make the at-cap state read as "complete" rather than "error" —
     a calmer treatment, the user has finished a task. */
  background: var(--exp-bg);
  border-color: var(--exp-border);
  cursor: default;
}
.brnb-receipt-upload-area--at-capacity:hover {
  background: var(--exp-bg);
  border-color: var(--exp-border);
}

.brnb-receipt-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  text-align: left;
}
.brnb-receipt-upload-area--has-files .brnb-receipt-preview-list {
  margin-top: 4px;
}

.brnb-attachment-tile {
  position: relative;
  background: var(--exp-bg);
  border: 1px solid var(--exp-border);
  border-radius: var(--exp-radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.brnb-attachment-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--exp-radius-sm);
  background: var(--exp-bg-subtle);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brnb-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brnb-attachment-thumb--pdf {
  background: var(--exp-error-bg);
}
.brnb-attachment-thumb--file {
  background: var(--exp-bg-subtle);
}
.brnb-attachment-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--exp-error);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 8px;
  border-radius: 999px;
}
.brnb-attachment-thumb--file .brnb-attachment-badge {
  color: var(--exp-text-muted);
}

.brnb-attachment-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brnb-attachment-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--exp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.brnb-attachment-size {
  font-size: 0.6875rem;
  color: var(--exp-text-muted);
  line-height: 1.4;
}

.brnb-attachment-remove {
  /* Overlay the × on the thumbnail rather than as a separate row;
     keeps the tile compact while still giving a clear target. */
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: rgba(9, 9, 11, 0.7);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}
.brnb-attachment-remove:hover,
.brnb-attachment-remove:focus-visible {
  background: var(--exp-error);
  outline: none;
}

.brnb-receipt-counter {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--exp-text-muted);
  text-align: left;
  line-height: 1.4;
}
.brnb-receipt-counter--at-cap {
  color: var(--exp-text);
  font-weight: 600;
}
.brnb-receipt-counter--at-cap::before {
  content: "✓ ";
  color: #16a34a;
  font-weight: 700;
}

.brnb-receipt-inline-error {
  display: block;
  font-size: 0.75rem;
  color: var(--exp-error);
  margin-top: 8px;
  text-align: left;
}

/* ============================================================
   Upload progress
   ============================================================ */
.brnb-exp-progress {
  background: var(--exp-bg-subtle);
  border: 1px solid var(--exp-border);
  border-radius: var(--exp-radius);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.brnb-exp-progress-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.brnb-exp-progress-text {
  font-size: 0.75rem;
  color: var(--exp-text-muted);
}
.brnb-exp-progress-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: var(--exp-border);
  display: block;
}
.brnb-exp-progress-bar::-webkit-progress-bar {
  background: var(--exp-border);
  border-radius: 2px;
}
.brnb-exp-progress-bar::-webkit-progress-value {
  background: var(--exp-primary);
  border-radius: 2px;
}
.brnb-exp-progress-bar::-moz-progress-bar {
  background: var(--exp-primary);
  border-radius: 2px;
}
.brnb-exp-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--exp-border);
  border-top-color: var(--exp-primary);
  border-radius: 50%;
  animation: brnb-exp-spin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes brnb-exp-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Turnstile widget wrapper
   The widget itself is rendered with data-size="flexible" so it
   stretches to fill its container (300px minimum). Cloudflare's
   script injects an iframe with an inline width attribute, so we
   need !important to override it. The .cf-turnstile container is
   forced to display:block in case Cloudflare's CSS gives it
   inline-block (which would shrink it to the iframe's intrinsic
   width).
   ============================================================ */
.brnb-exp-turnstile {
  width: 100%;
  margin-bottom: 20px;
}
.brnb-exp-turnstile .cf-turnstile {
  display: block !important;
  width: 100% !important;
}
.brnb-exp-turnstile .cf-turnstile iframe {
  width: 100% !important;
}

/* ============================================================
   Submit area
   ============================================================ */
.brnb-exp-submit-area {
  margin-top: 8px;
}
.brnb-exp-disclaimer {
  font-size: 0.75rem;
  color: var(--exp-text-muted);
  text-align: center;
  margin: 10px 0 0;
}

/* ============================================================
   Confirmation screen
   ============================================================ */
.brnb-exp-confirmation {
  text-align: center;
  padding: 48px 24px;
}
.brnb-exp-confirmation-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--exp-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 1.75rem;
  line-height: 1;
}
.brnb-exp-confirmation-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--exp-text);
  margin: 0 0 12px;
}
.brnb-exp-confirmation-lead {
  font-size: 0.9375rem;
  color: var(--exp-text-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}
.brnb-exp-ref-box {
  display: inline-block;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: var(--exp-radius);
  padding: 12px 20px;
  font-size: 0.875rem;
  color: #166534;
  margin-bottom: 16px;
}
.brnb-reference {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.brnb-exp-confirmation-meta {
  font-size: 0.8125rem;
  color: var(--exp-text-muted);
  margin: 0 0 28px;
}

/* ============================================================
   Status lookup result
   ============================================================ */

/* Outer region container — separates the result from the form
   above and gives keyboard-focused users a visible outline that
   matches the rest of the form. */
#brnb-status-result {
  margin-top: 24px;
}
#brnb-status-result:focus {
  outline: none;
}
#brnb-status-result:focus-visible {
  outline: 2px solid var(--exp-border-focus);
  outline-offset: 2px;
  border-radius: var(--exp-radius-lg);
}

.brnb-status-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Summary card */
.brnb-status-summary {
  background: var(--exp-bg);
  border: 1px solid var(--exp-border);
  border-radius: var(--exp-radius-lg);
  padding: 20px 24px;
}
.brnb-status-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.brnb-status-summary-ref {
  font-size: 1rem;
  font-weight: 700;
  color: var(--exp-text);
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 0.03em;
}

/* Key-value grid */
.brnb-status-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 0;
}
@media (max-width: 480px) {
  .brnb-status-kv { grid-template-columns: 1fr; }
}
.brnb-status-kv-row { display: contents; }
.brnb-status-kv dt {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--exp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: center;
}
.brnb-status-kv dd {
  font-size: 0.875rem;
  color: var(--exp-text);
  margin: 0;
  align-self: center;
}

/* Status badges */
.brnb-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.brnb-status-badge--pending  { background: #fef9c3; color: #854d0e; }
.brnb-status-badge--approved { background: #dcfce7; color: #166534; }
.brnb-status-badge--rejected { background: #fee2e2; color: #991b1b; }
.brnb-status-badge--paid     { background: #dbeafe; color: #1e40af; }

/* Line items section */
.brnb-status-items-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--exp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.brnb-status-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brnb-status-item {
  background: var(--exp-bg);
  border: 1px solid var(--exp-border);
  border-left: 3px solid var(--exp-border);
  border-radius: var(--exp-radius-lg);
  padding: 14px 16px;
}
.brnb-status-item--approved { border-left-color: #22c55e; }
.brnb-status-item--rejected { border-left-color: #ef4444; }
.brnb-status-item--pending  { border-left-color: #eab308; }
.brnb-status-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.brnb-status-item-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--exp-bg-subtle);
  border: 1px solid var(--exp-border);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--exp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brnb-status-item-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.brnb-status-item-type {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--exp-text);
}
.brnb-status-item-date {
  font-size: 0.75rem;
  color: var(--exp-text-muted);
}
.brnb-status-item-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}
.brnb-status-item-amount {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--exp-text);
}
.brnb-status-item-desc {
  font-size: 0.8125rem;
  color: var(--exp-text-muted);
  margin: 8px 0 0 36px;
  line-height: 1.5;
}
.brnb-status-reason {
  margin: 8px 0 0 36px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid var(--exp-error-border);
  border-radius: var(--exp-radius);
  font-size: 0.8125rem;
  color: #991b1b;
}
.brnb-status-reason-label {
  font-weight: 600;
}