/* Rockwellist CMS -- Devbox Kaitech design system skin.
   Tokens (colours, type, spacing, radius, elevation, motion) live in
   devbox-tokens.css, copied from the design system; this file only maps them
   onto the CMS. Two layers:
     1. Bootstrap overrides, so every existing page (buttons, inputs, tables,
        tabs, badges, alerts, modals) picks up the system without markup
        changes.
     2. CMS layout + the three designed screens (shell, dashboard, sign in,
        rewards queue) from "RLC CMS Devbox.dc.html".
   Industrial look: square corners (2px max), hairline borders instead of
   shadows, Host Grotesk Light body, Chivo Mono for figures. */

/* ---------------------------------------------------------------------------
   1. Base + Bootstrap variable overrides
   --------------------------------------------------------------------------- */

:root {
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-small);
  --bs-body-font-weight: var(--text-body-weight);
  --bs-body-line-height: var(--lh-body);
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--surface-page);
  --bs-secondary-color: var(--text-tertiary);
  --bs-emphasis-color: var(--ink);
  --bs-border-color: var(--border-hairline);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-sm);
  --bs-border-radius-xl: var(--radius-sm);
  --bs-border-radius-pill: var(--radius-sm);
  --bs-link-color: var(--text-link);
  --bs-link-color-rgb: 11, 44, 245;
  --bs-link-hover-color: var(--text-link-hover);
  --bs-link-hover-color-rgb: 35, 35, 35;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 11, 44, 245;
  --bs-success: var(--status-success);
  --bs-success-rgb: 0, 161, 75;
  --bs-danger: var(--status-danger);
  --bs-danger-rgb: 255, 78, 70;
  --bs-warning: var(--status-warning);
  --bs-warning-rgb: 247, 148, 29;
  --bs-dark-rgb: 35, 35, 35;
  --bs-light-rgb: 240, 241, 244;
  --bs-secondary-rgb: 110, 114, 122;
  --bs-focus-ring-color: color-mix(in srgb, var(--accent) 25%, transparent);
  --bs-heading-color: var(--ink);
}

body {
  -webkit-font-smoothing: antialiased;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--text-body-weight);
  text-rendering: optimizeLegibility;
}

a {
  color: var(--text-link);
  transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color: var(--text-link-hover);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: var(--focus-ring-offset);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--text-heading-weight);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
}

h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
  font-weight: var(--text-heading-sm-weight);
}

strong, b {
  font-weight: var(--fw-semibold);
}

code, kbd, pre, samp {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.text-muted {
  color: var(--text-tertiary) !important;
}

.text-danger {
  color: #c22b23 !important;
}

.text-warning {
  color: #8a4d00 !important;
}

.bg-light {
  background-color: var(--surface-sunken) !important;
}

.shadow {
  box-shadow: none !important;
}

.rounded {
  border-radius: var(--radius-sm) !important;
}

/* Buttons -- DS Button: semibold, 0.01em tracking, 2px radius.
   primary = accent fill, secondary = ink outline that inverts on hover,
   ghost = transparent. Bootstrap variants map onto those three. */
.btn {
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 12px;
  --bs-btn-font-family: var(--font-core);
  --bs-btn-font-size: var(--fs-small);
  --bs-btn-font-weight: var(--fw-semibold);
  --bs-btn-line-height: 1.2;
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-disabled-opacity: 0.38;
  --bs-btn-focus-box-shadow: none;
  letter-spacing: 0.01em;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-sm {
  --bs-btn-padding-x: 14px;
  --bs-btn-padding-y: 8px;
  --bs-btn-font-size: var(--fs-caption);
  --bs-btn-border-radius: var(--radius-sm);
}

.btn-lg {
  --bs-btn-padding-x: 28px;
  --bs-btn-padding-y: 16px;
  --bs-btn-font-size: var(--fs-body);
  --bs-btn-border-radius: var(--radius-sm);
}

.btn-primary,
.btn-success,
.btn-warning {
  --bs-btn-color: var(--accent-contrast);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-contrast);
  --bs-btn-hover-bg: var(--accent-lift);
  --bs-btn-hover-border-color: var(--accent-lift);
  --bs-btn-active-color: var(--accent-contrast);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-disabled-color: var(--accent-contrast);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}

.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark,
.btn-light {
  --bs-btn-color: var(--text-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-inverse);
  --bs-btn-hover-bg: var(--surface-inverse);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-inverse);
  --bs-btn-active-bg: var(--n-800);
  --bs-btn-active-border-color: var(--n-800);
  --bs-btn-disabled-color: var(--text-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--border-strong);
}

.btn-ghost {
  --bs-btn-color: var(--text-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-bg: var(--surface-active);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--text-primary);
  --bs-btn-disabled-border-color: transparent;
}

/* Destructive actions stay visibly destructive: the DS has no danger button,
   so this is a scarlet take on primary/secondary. */
.btn-danger {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--status-danger);
  --bs-btn-border-color: var(--status-danger);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: #c22b23;
  --bs-btn-hover-border-color: #c22b23;
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: #c22b23;
  --bs-btn-active-border-color: #c22b23;
  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--status-danger);
  --bs-btn-disabled-border-color: var(--status-danger);
}

.btn-outline-danger {
  --bs-btn-color: #c22b23;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--status-danger);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--status-danger);
  --bs-btn-hover-border-color: var(--status-danger);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: #c22b23;
  --bs-btn-active-border-color: #c22b23;
  --bs-btn-disabled-color: #c22b23;
  --bs-btn-disabled-border-color: var(--status-danger);
}

.btn-link {
  --bs-btn-color: var(--text-accent);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-active-color: var(--text-primary);
  text-decoration: none;
}

.btn-icon-left {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

/* Form fields -- DS Input: hairline, 2px radius, focus = accent border + 1px ring. */
.form-control,
.form-select {
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-core);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.45;
  padding: 10px 12px;
  transition: var(--transition-ui);
}

.form-select {
  padding-right: 36px;
}

.form-control-sm,
.form-select-sm {
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  min-height: 0;
  padding: 6px 10px;
}

.form-select-sm {
  padding-right: 32px;
}

.form-control::placeholder {
  color: var(--text-tertiary);
  font-weight: var(--fw-light);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
  outline: none;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--surface-sunken);
}

.form-label {
  color: var(--text-secondary);
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.form-text {
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
}

.form-check-input {
  accent-color: var(--accent);
  border-color: var(--n-400);
  border-radius: var(--radius-sm);
}

.form-check-input[type="checkbox"] {
  border-radius: var(--radius-sm);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}

.form-check-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

/* Tables -- ink rule under the header, hairlines between rows, figures in mono. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-hairline);
  --bs-table-hover-bg: var(--surface-hover);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-striped-bg: var(--n-50);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 10px 16px;
}

.table-sm > :not(caption) > * > * {
  padding: 8px 12px;
}

.table > thead > tr > th {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  padding-bottom: 12px;
  padding-top: 12px;
  text-transform: none;
  white-space: nowrap;
}

.table > :not(:first-child) {
  border-top: 0;
}

.table-bordered > :not(caption) > * > * {
  border-color: var(--border-hairline);
}

.table-danger {
  --bs-table-bg: #ffe8e6;
  --bs-table-color: var(--ink);
}

.table-warning {
  --bs-table-bg: #fdf0dc;
  --bs-table-color: var(--ink);
}

.card,
.table-responsive,
#reader {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 0 !important;
  box-shadow: none;
}

.table-responsive {
  overflow-x: auto;
}

.card-body {
  padding: var(--space-6);
}

/* Badges -- DS Badge: 3px 8px, caption, semibold, 2px radius, tinted tones. */
.badge,
.ds-badge {
  align-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-family: var(--font-core);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  gap: var(--space-2);
  letter-spacing: 0.01em;
  line-height: 1.4;
  padding: 3px 8px;
}

.badge,
.ds-badge-neutral,
.text-bg-secondary,
.bg-secondary {
  background-color: var(--n-150) !important;
  color: var(--n-800) !important;
}

.text-bg-success,
.bg-success,
.ds-badge-success {
  background-color: #e3f4ea !important;
  color: #00703a !important;
}

.text-bg-danger,
.bg-danger,
.ds-badge-danger {
  background-color: #ffe8e6 !important;
  color: #c22b23 !important;
}

.text-bg-warning,
.bg-warning,
.ds-badge-warning {
  background-color: #fdf0dc !important;
  color: #8a4d00 !important;
}

.text-bg-info,
.text-bg-primary,
.bg-info,
.bg-primary,
.ds-badge-info {
  background-color: #e4e8fe !important;
  color: #0b2cf5 !important;
}

.text-bg-light,
.bg-light.badge {
  background-color: var(--white) !important;
  color: var(--n-800) !important;
}

.text-bg-dark,
.bg-dark {
  background-color: var(--ink) !important;
  color: var(--white) !important;
}

.ds-badge-dot {
  background: currentColor;
  border-radius: var(--radius-pill);
  display: inline-block;
  height: 6px;
  width: 6px;
}

.ds-badge-button {
  cursor: pointer;
  transition: var(--transition-ui);
}

.ds-badge-button:hover,
.ds-badge-button:focus-visible {
  background-color: #ffd2cd !important;
}

.ds-badge-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Alerts -- quiet tinted panel with a tone rule on the left. */
.alert {
  --bs-alert-border-radius: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-left-width: 3px;
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}

.alert-danger {
  background: #ffe8e6;
  border-color: #ffc9c4;
  border-left-color: var(--status-danger);
  color: #8f1f19;
}

.alert-success {
  background: #e3f4ea;
  border-color: #bfe6cf;
  border-left-color: var(--status-success);
  color: #00552c;
}

.alert-warning {
  background: #fdf0dc;
  border-color: #f7ddb3;
  border-left-color: var(--status-warning);
  color: #6b3c00;
}

.alert-info,
.alert-primary {
  background: var(--accent-tint);
  border-color: #c9d1fd;
  border-left-color: var(--accent);
  color: var(--ink);
}

/* Tabs -- DS Tabs: underline row, 24px gap, 2px accent rule under the active tab.
   .nav-tabs (existing pages) and .ds-tabs (new markup) share the look. */
.nav-tabs,
.ds-tabs {
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.nav-tabs .nav-link,
.ds-tab {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  margin-bottom: 0;
  padding: 0 0 12px;
  position: relative;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.nav-tabs .nav-link::after,
.ds-tab::after {
  background: transparent;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

.nav-tabs .nav-link:hover,
.ds-tab:hover {
  border: 0;
  color: var(--text-primary);
}

.nav-tabs .nav-link.active,
.ds-tab.is-active {
  background: none;
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.nav-tabs .nav-link.active::after,
.ds-tab.is-active::after {
  background: var(--accent);
}

/* Pills -- DS Tag (selectable): hairline chip, ink fill when selected. */
.nav-pills {
  gap: var(--space-2);
}

.nav-pills .nav-link,
.ds-tag {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: inline-flex;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  gap: var(--space-2);
  line-height: 1.3;
  padding: 5px 10px;
  text-decoration: none;
  transition: var(--transition-ui);
}

.nav-pills .nav-link:hover,
.ds-tag:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.nav-pills .nav-link.active,
.ds-tag.is-selected {
  background: var(--ink);
  border-color: var(--border-strong);
  color: var(--white);
}

.ds-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ds-tag-count {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  opacity: 0.8;
}

/* Dropdowns, modals, list groups */
.dropdown-menu {
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-border-color: var(--border-hairline);
  --bs-dropdown-link-hover-bg: var(--surface-hover);
  --bs-dropdown-link-active-bg: var(--surface-active);
  --bs-dropdown-link-active-color: var(--ink);
  --bs-dropdown-font-size: var(--fs-small);
  --bs-dropdown-item-padding-x: 12px;
  --bs-dropdown-item-padding-y: 8px;
  box-shadow: var(--shadow-2);
  min-width: 160px;
  padding: 4px;
}

.dropdown-item {
  color: var(--ink);
  font-weight: var(--fw-regular);
}

.modal {
  --bs-modal-border-radius: var(--radius-sm);
  --bs-modal-inner-border-radius: var(--radius-sm);
  --bs-modal-border-color: var(--border-hairline);
  --bs-modal-box-shadow: var(--shadow-3);
}

.modal-content {
  box-shadow: var(--shadow-3);
}

.modal-title {
  font-weight: var(--fw-semibold);
}

.list-group {
  --bs-list-group-border-color: var(--border-hairline);
  --bs-list-group-border-radius: 0;
  --bs-list-group-action-hover-bg: var(--surface-hover);
  --bs-list-group-action-active-bg: var(--surface-active);
}

.spinner-border {
  --bs-spinner-border-width: 2px;
}

/* ---------------------------------------------------------------------------
   2. Shared type helpers (designed screens)
   --------------------------------------------------------------------------- */

.ds-eyebrow {
  color: var(--text-tertiary);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.3;
  text-transform: uppercase;
}

.ds-eyebrow-accent {
  color: var(--accent);
}

.ds-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  margin: 0;
}

.ds-h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  margin: 0;
}

.ds-lede {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  margin: 0;
}

.ds-lede strong {
  color: var(--ink);
  font-weight: var(--fw-medium);
}

.ds-mono {
  font-family: var(--font-mono);
}

.ds-icon {
  display: block;
  flex: 0 0 auto;
}

.ds-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ds-page-header {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
}

.ds-page-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------------------
   3. App shell -- 260px white sidebar + sticky 60px top bar
   --------------------------------------------------------------------------- */

.app-shell {
  background: var(--surface-page);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.app-sidebar {
  background: var(--white);
  border-right: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

.sidebar-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 24px 24px 20px;
}

.brand-logo {
  display: block;
  height: 24px;
  width: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 16px 12px 24px;
}

.sidebar-link {
  border-radius: var(--radius-sm);
  color: var(--n-700);
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  padding: 8px 12px;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.sidebar-link-top {
  font-weight: var(--fw-regular);
  padding: 9px 12px;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  background: var(--n-100);
  color: var(--ink);
}

.sidebar-link.is-active {
  background: var(--n-150);
  color: var(--ink);
  font-weight: var(--fw-medium);
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-3);
}

.sidebar-group-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--n-600);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  justify-content: space-between;
  letter-spacing: var(--ls-eyebrow);
  padding: 8px 12px;
  text-transform: uppercase;
  width: 100%;
}

.sidebar-group-toggle:hover {
  color: var(--ink);
}

.sidebar-chevron {
  transition: transform var(--dur-fast) var(--ease-standard);
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-chevron {
  transform: rotate(180deg);
}

.sidebar-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Sub-items sit one step in from their group heading. */
.sidebar-group-items .sidebar-link {
  padding-left: 28px;
}

.role-note {
  background: #fdf0dc;
  border-left: 3px solid var(--status-warning);
  color: #6b3c00;
  font-size: var(--fs-small);
  line-height: 1.4;
  margin: var(--space-3) 0;
  padding: var(--space-3);
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-topbar {
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  gap: var(--space-4);
  height: 60px;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.app-topbar-title {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.app-user-menu {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  gap: var(--space-2);
  padding: 6px 8px;
}

.app-user-menu:hover,
.app-user-menu[aria-expanded="true"] {
  background: var(--n-100);
}

.app-content {
  box-sizing: border-box;
  max-width: 1440px;
  padding: 40px 32px 64px;
  width: 100%;
}

.access-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  max-width: 620px;
  padding: var(--space-6);
}

/* Page loader overlay (footer.ejs). */
.page-loader {
  align-items: center;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  display: none;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 2000;
}

.page-loader.is-visible {
  display: flex;
}

.page-loader-panel {
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-2);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.page-loader-mark {
  animation: page-loader-spin 0.85s linear infinite;
  border: 2px solid var(--n-150);
  border-radius: var(--radius-pill);
  border-top-color: var(--accent);
  display: inline-block;
  height: 24px;
  width: 24px;
}

.page-loader-text {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------------
   4. Dashboard
   --------------------------------------------------------------------------- */

.dashboard-page {
  gap: var(--space-12);
}

.dashboard-refresh {
  align-items: center;
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  gap: var(--space-4);
}

.dashboard-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Three per row by default; one row (all 4-6 cards, depending on role,
   sharing the width) once the content area is wide enough that each card
   keeps ~170px -- narrower than that and the figures clip. */
.metric-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 1400px) {
  .metric-grid {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
  }
}

.metric-card {
  background: var(--white);
  border: 1px solid var(--border-hairline);
  border-top: 2px solid var(--ink);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 148px;
  padding: var(--space-5);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.metric-card:hover,
.metric-card:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-2px);
}

.metric-label {
  color: var(--text-tertiary);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.metric-card strong {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-heading);
  line-height: 1;
}

/* "Unavailable" is a word, not a number: smaller, so it fits the card. */
.metric-card strong.is-unavailable {
  color: var(--text-tertiary);
  font-size: var(--fs-body, 16px);
  letter-spacing: normal;
}

/* Inline so the arrow stays attached to the last word if the text wraps. */
.metric-action {
  color: var(--accent);
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  margin-top: auto;
}

.metric-action .ds-icon {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -3px;
}

.dashboard-columns {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

.status-list {
  background: var(--white);
  border: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
}

.status-list a {
  align-items: center;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.status-list a:last-child {
  border-bottom: 0;
}

.status-list a:hover {
  background: var(--n-100);
  color: var(--ink);
}

.status-list span {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
}

.status-list strong {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------------------
   5. Rewards queue
   --------------------------------------------------------------------------- */

.reward-queue-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bulk-approve-bar {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
}

.bulk-approve-bar > div:first-of-type {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.bulk-approve-bar strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.bulk-approve-count {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
}

.bulk-approve-count .ds-mono {
  color: var(--ink);
}

.bulk-approve-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bulk-approve-actions .form-control {
  flex: 0 1 240px;
  min-width: 150px;
  width: 240px;
}

.reward-search-bar {
  align-items: center;
  display: flex;
  gap: var(--space-4);
}

.ds-input-icon {
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  margin: 0;
  padding: 0 12px;
  transition: var(--transition-ui);
}

.ds-input-icon:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}

.ds-input-icon .form-control {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 10px 0;
}

.ds-table .num {
  text-align: right;
}

.ds-table .num .reward-sort-btn {
  text-align: right;
}

.reward-customer {
  font-weight: var(--fw-regular);
}

.reward-tenant {
  color: var(--text-secondary);
  font-weight: var(--fw-light);
}

.reward-date {
  color: var(--text-secondary);
}

.reward-check-col {
  width: 56px;
}

.reward-check-col .form-check-input {
  height: 18px;
  margin: 0;
  width: 18px;
}

.reward-load-more {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: flex-end;
}

.reward-load-more .text-muted,
.reward-search-bar .text-muted {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
}

.reward-sort-btn {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-align: left;
  text-transform: inherit;
  white-space: nowrap;
}

.reward-sort-btn:hover,
.reward-sort-btn:focus-visible {
  color: var(--ink);
}

.reward-sort-indicator {
  color: var(--accent);
  font-size: 0.7em;
}

.reward-match-hint {
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  max-width: 28rem;
  overflow-wrap: anywhere;
}

.reward-source-badge {
  min-width: 56px;
  justify-content: center;
  text-transform: lowercase;
}

.duplicate-summary {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.duplicate-details-table.table-responsive {
  box-shadow: none;
}

.receipt-preview {
  background: var(--white);
  border: 1px solid var(--border-hairline);
  max-height: 640px;
  overflow: auto;
  padding: var(--space-2);
}

.receipt-preview img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   6. Tenant management spreadsheet (unchanged layout, new skin)
   --------------------------------------------------------------------------- */

.tenant-toolbar {
  align-items: end;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.tenant-search-wrap {
  max-width: 520px;
  width: 100%;
}

.tenant-sheet-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.tenant-sheet {
  font-size: var(--fs-caption);
  table-layout: fixed;
  width: max-content;
}

.tenant-sheet > thead > tr > th {
  font-size: var(--fs-caption);
}

.tenant-sheet .btn-sm {
  --bs-btn-padding-x: 8px;
  --bs-btn-padding-y: 4px;
  --bs-btn-font-size: var(--fs-caption);
}

.tenant-sheet th,
.tenant-sheet td {
  min-width: 0;
  padding: 0.35rem 0.4rem !important;
  width: 112px;
}

.tenant-sheet th:first-child,
.tenant-sheet td:first-child {
  background: var(--white);
  left: 0;
  position: sticky;
  width: 72px;
  z-index: 2;
}

.tenant-sheet thead th:first-child {
  background: var(--white);
  z-index: 3;
}

.tenant-sheet th:nth-child(3),
.tenant-sheet td:nth-child(3) {
  width: 150px;
}

.tenant-sheet th:nth-child(4),
.tenant-sheet td:nth-child(4) {
  width: 200px;
}

.tenant-sheet th:nth-child(5),
.tenant-sheet td:nth-child(5),
.tenant-sheet th:nth-child(14),
.tenant-sheet td:nth-child(14) {
  width: 230px;
}

.tenant-sheet th:nth-child(6),
.tenant-sheet td:nth-child(6),
.tenant-sheet th:nth-child(15),
.tenant-sheet td:nth-child(15) {
  width: 120px;
}

.tenant-sheet th:nth-child(7),
.tenant-sheet td:nth-child(7) {
  width: 170px;
}

.tenant-sheet th:nth-child(11),
.tenant-sheet td:nth-child(11) {
  width: 170px;
}

.tenant-sheet th:nth-child(12),
.tenant-sheet td:nth-child(12) {
  width: 210px;
}

.tenant-sheet th:nth-child(16),
.tenant-sheet td:nth-child(16),
.tenant-sheet th:nth-child(17),
.tenant-sheet td:nth-child(17),
.tenant-sheet th:nth-child(18),
.tenant-sheet td:nth-child(18),
.tenant-sheet th:nth-child(19),
.tenant-sheet td:nth-child(19) {
  width: 92px;
}

.tenant-sheet .tenant-save-state {
  white-space: nowrap;
  width: 62px;
}

.tenant-crm-id code {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.tenant-cell {
  font-size: var(--fs-caption);
  max-width: 100%;
  min-height: 30px;
  overflow: hidden;
  padding: 0.25rem 0.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.tenant-cell-wide {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   7. Sign in -- split: form on paper, Medium Blue panel with the cobalt mark
   --------------------------------------------------------------------------- */

.login-page {
  background: var(--paper);
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.login-panel {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  justify-content: space-between;
  padding: var(--space-12);
}

.login-logo {
  display: block;
  height: 28px;
  width: auto;
}

.login-form-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 380px;
  width: 100%;
}

.login-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-legal {
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
}

.login-hero {
  background: var(--medium-blue);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: var(--space-12);
  position: relative;
}

.login-hero-mark {
  display: block;
  position: absolute;
  top: 0;
}

.login-hero-mark-lg {
  height: 360px;
  right: 0;
  width: 360px;
}

.login-hero-mark-sm {
  height: 180px;
  right: 360px;
  width: 180px;
}

.login-hero-copy {
  color: var(--white);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  margin: 0;
  max-width: 440px;
  position: relative;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   8. Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .app-shell {
    display: block;
  }

  .app-sidebar {
    border-bottom: 1px solid var(--border-hairline);
    border-right: 0;
    height: auto;
    position: static;
  }

  .app-topbar {
    padding: 0 16px;
  }

  .app-content {
    padding: 24px 16px 48px;
  }

  .dashboard-page {
    gap: var(--space-8);
  }

  .dashboard-columns {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-page-header {
    align-items: flex-start;
  }

  .bulk-approve-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .bulk-approve-actions .form-control {
    flex: 1 1 100%;
    width: 100%;
  }

  .reward-search-bar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2);
  }

  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-panel {
    min-height: 100vh;
    padding: var(--space-8) var(--space-4);
  }

  .login-hero {
    display: none;
  }
}