/*
 * Shared authenticated application system.
 * Page-specific inventory semantics live in inventory.css.
 */
/*
 * Palette shared with the marketing site. --app-paper and --app-primary-700 already
 * held the landing page's --page and --button values before this; the inks, lines and
 * status ramps below bring the rest of the system onto the same scale so a signed-in
 * page and the landing page no longer sit in two different blues.
 */
.app-authenticated {
  --app-ink-950: #162033;
  --app-ink-900: #1d2b42;
  --app-ink-800: #2c3c55;
  --app-ink-700: #47566d;
  --app-ink-600: #5f6c80;
  --app-ink-500: #7a8798;
  --app-neutral-pill-bg: #47566d;
  --app-paper: #f4f8fc;
  --app-surface: #fff;
  --app-surface-muted: #f7fafe;
  --app-surface-translucent: rgba(255, 255, 255, 0.96);
  --app-control-bg: #fff;
  --app-control-hover-bg: #f7faff;
  --app-line: #dfe6f1;
  --app-line-strong: #c3d0e2;
  --app-accent-200: #f7dfae;
  --app-accent-900: #14213d;
  --app-primary-800: #124b83;
  --app-primary-700: #185fa5;
  --app-primary-600: #2f78bd;
  --app-primary-100: #dbe7ff;
  --app-primary-50: #eef4ff;
  /* Deliberately still the button blue, not the landing's brighter index blue
     (#155eef). That token reads .app-eyebrow, and 22 of the 45 eyebrows in the
     views also carry .text-body-secondary, whose !important pins them to
     secondary grey -- so adopting it would repaint half of them and leave the
     rest, while dropping every accent link from 6.5:1 to 5.4:1 for no match the
     eye can actually see. */
  --app-accent-text: var(--app-primary-700);
  --app-warning-text: #93370d;
  /* The landing's proof green is #079455, which carries only 3.9:1 against white --
     below AA for the 12px badge text it would fill. These use its darker step, which
     is the same hue at 5.9:1. Every ramp below stays legible with white on 700. */
  --app-success-700: #05733f;
  --app-success-800: #045530;
  --app-success-100: #d6f2e3;
  --app-success-50: #eefaf3;
  --app-success-text: var(--app-success-700);
  --app-warning-700: #b54708;
  --app-warning-800: #93370d;
  --app-warning-100: #fdecd3;
  --app-warning-50: #fff8ec;
  --app-danger-700: #b42318;
  --app-danger-800: #912018;
  --app-danger-100: #fee4e2;
  --app-danger-50: #fff5f4;
  --app-danger-text: var(--app-danger-700);
  --app-link-color: var(--app-primary-700);
  --app-focus-color: var(--app-primary-600);
  --app-background-glow-primary: rgba(21, 94, 239, 0.12);
  --app-background-glow-secondary: rgba(237, 243, 255, 0.9);
  --app-shadow-sm:
    0 1px 2px rgba(11, 31, 51, 0.05), 0 7px 22px rgba(11, 31, 51, 0.055);
  --app-shadow-md: 0 22px 55px rgba(11, 31, 51, 0.12);
  --app-radius-sm: 0.625rem;
  --app-radius-md: 0.875rem;
  --app-radius-lg: 1.375rem;
  --app-font-ui: var(--font-ui);
  --app-font-data: var(--font-data);

  min-height: 100vh;
  color: var(--app-ink-950);
  background:
    radial-gradient(
      circle at 8% -8%,
      var(--app-background-glow-primary),
      transparent 31rem
    ),
    radial-gradient(
      circle at 96% 20%,
      var(--app-background-glow-secondary),
      transparent 30rem
    ),
    var(--app-paper);
  font-family: var(--app-font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Scanner discovery stays quiet until the shared PWA module has classified the device. */
.app-scanner-promo {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.15rem 3.25rem 1.15rem 1.15rem;
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--app-primary-600) 30%, var(--app-line));
  border-radius: var(--app-radius-lg);
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(231, 183, 93, 0.2),
      transparent 15rem
    ),
    linear-gradient(
      115deg,
      color-mix(in srgb, var(--app-primary-50) 75%, var(--app-surface)),
      var(--app-surface)
    );
  box-shadow: var(--app-shadow-sm);
}

.app-scanner-promo[hidden] {
  display: none;
}

.app-scanner-promo__mark {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 0.9rem;
  background: var(--app-primary-700);
  color: #f3c96f;
}

.app-scanner-promo__mark svg {
  width: 1.65rem;
  height: 1.65rem;
}
.app-scanner-promo__copy h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.app-scanner-promo__copy p:last-child {
  margin: 0.3rem 0 0;
  color: var(--app-ink-600);
}

.app-scanner-promo__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.app-scanner-promo__handoff {
  color: var(--app-primary-700);
  font-weight: 700;
  text-underline-offset: 0.18em;
}

.app-scanner-promo__dismiss {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-ink-600);
}

.app-scanner-promo__dismiss:hover {
  background: color-mix(in srgb, var(--app-ink-900) 8%, transparent);
}
.app-scanner-promo__dismiss:focus-visible {
  outline: 3px solid var(--app-primary-100);
  outline-offset: 2px;
}
.app-scanner-promo__dismiss svg {
  width: 1rem;
  height: 1rem;
}
.app-scanner-promo__status {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--app-danger-700);
  font-size: 0.82rem;
}

.pwa-install-steps {
  display: grid;
  gap: 0.65rem;
  padding-left: 1.25rem;
}

[data-bs-theme="dark"] .app-authenticated {
  --app-ink-950: #f1f6fb;
  --app-ink-900: #e2ebf4;
  --app-ink-800: #cbd8e5;
  --app-ink-700: #b4c5d6;
  --app-ink-600: #9cafc2;
  --app-ink-500: #8399ad;
  --app-neutral-pill-bg: #405d72;
  --app-paper: #07131f;
  --app-surface: #0f2232;
  --app-surface-muted: #162c3e;
  --app-surface-translucent: rgba(15, 34, 50, 0.96);
  --app-control-bg: #11283a;
  --app-control-hover-bg: #1b3447;
  --app-line: #2b4559;
  --app-line-strong: #405d72;
  --app-primary-100: #173a57;
  --app-primary-50: #102d45;
  --app-accent-text: #72baff;
  --app-warning-text: #f5d9a8;
  --app-success-100: #123812;
  --app-success-50: #102c10;
  --app-success-text: #79d279;
  --app-warning-100: #473519;
  --app-warning-50: #332713;
  --app-warning-text: #f3c56b;
  --app-danger-100: #49262b;
  --app-danger-50: #351d22;
  --app-danger-text: #f2aaae;
  --app-link-color: #72baff;
  --app-focus-color: #69b4ff;
  --app-background-glow-primary: rgba(47, 120, 189, 0.2);
  --app-background-glow-secondary: rgba(24, 95, 165, 0.12);
  --app-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.22);
  --app-shadow-md: 0 22px 55px rgba(0, 0, 0, 0.38);
}

.app-authenticated h1 {
  font-family: var(--type-page-title-family);
  font-size: var(--type-page-title-size);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-line-height);
  letter-spacing: var(--type-page-title-letter-spacing);
  text-transform: var(--type-page-title-transform);
}

.app-authenticated h2 {
  font-family: var(--type-section-title-family);
  font-size: var(--type-section-title-size);
  font-weight: var(--type-section-title-weight);
  line-height: var(--type-section-title-line-height);
  letter-spacing: var(--type-section-title-letter-spacing);
  text-transform: var(--type-section-title-transform);
}

.app-authenticated :is(h3, h4, h5, h6) {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-line-height);
  letter-spacing: var(--type-card-title-letter-spacing);
  text-transform: var(--type-card-title-transform);
}

.app-authenticated :is(.card-title, .app-card-title) {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-line-height);
  letter-spacing: var(--type-card-title-letter-spacing);
  text-transform: var(--type-card-title-transform);
}

.app-authenticated .app-stat-label {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
  text-transform: var(--type-caption-transform);
}

.app-authenticated .app-stat-value {
  font-family: var(--type-stat-family);
  font-size: var(--type-stat-size);
  font-weight: var(--type-stat-weight);
  line-height: var(--type-stat-line-height);
  letter-spacing: var(--type-stat-letter-spacing);
  text-transform: var(--type-stat-transform);
  font-variant-numeric: tabular-nums;
}

.app-authenticated p {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  text-transform: var(--type-body-transform);
}

.app-authenticated :is(small, .small) {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
  text-transform: var(--type-caption-transform);
}

.app-authenticated
  :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--app-focus-color);
  outline-offset: 3px;
  box-shadow: none;
}

.app-authenticated :is(h1, h2, h3, p) {
  overflow-wrap: anywhere;
}

.app-authenticated a {
  color: var(--app-link-color);
}

.app-skip-link {
  position: fixed;
  z-index: 1100;
  top: 0.5rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 0.625rem;
  color: #fff !important;
  background: var(--app-primary-800);
  box-shadow: var(--app-shadow-md);
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
}

.app-skip-link:focus {
  transform: translateY(0);
}

.app-authenticated .text-body-secondary {
  color: var(--app-ink-600) !important;
}

.app-authenticated .btn {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 0.6875rem;
  font-family: var(--type-control-family);
  font-size: var(--type-control-size);
  font-weight: var(--type-control-weight);
  line-height: var(--type-control-line-height);
  letter-spacing: var(--type-control-letter-spacing);
  text-transform: var(--type-control-transform);
}

.app-authenticated :is(.form-control, .form-select) {
  font-family: var(--type-supporting-family);
  font-size: var(--type-supporting-size);
  font-weight: var(--type-supporting-weight);
  line-height: var(--type-supporting-line-height);
  letter-spacing: var(--type-supporting-letter-spacing);
  text-transform: var(--type-supporting-transform);
}

.app-password-field {
  flex-wrap: nowrap;
}

.app-password-field .form-control {
  min-width: 0;
}

.app-password-toggle {
  min-width: 4.75rem;
  border-color: var(--app-line-strong);
  color: var(--app-accent-text);
  background: var(--app-control-bg);
  font-size: var(--type-caption-size);
  font-weight: 800;
}

.app-password-toggle:hover,
.app-password-toggle:focus-visible {
  border-color: var(--app-primary-600);
  color: var(--app-ink-950);
  background: var(--app-primary-50);
}

.app-field-feedback,
.app-password-requirement {
  margin-top: 0.4rem;
  color: var(--app-danger-text);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.app-field-feedback.is-success,
.app-password-requirement.is-success {
  color: var(--app-success-text);
}

.app-password-requirement.is-warning {
  color: var(--app-warning-text);
}

.app-field-feedback[hidden],
.app-password-requirement:empty {
  display: none;
}

.app-authenticated .btn-sm {
  min-height: 2.25rem;
  border-radius: 0.5625rem;
}

.app-authenticated .btn-lg {
  min-height: 3.125rem;
}

.app-authenticated .btn-primary {
  --app-filled-button-bg: var(--app-primary-700);
  --app-filled-button-hover-bg: var(--app-primary-800);
}

.app-authenticated .btn-secondary {
  --app-filled-button-bg: var(--app-ink-600);
  --app-filled-button-hover-bg: var(--app-ink-700);
}

.app-authenticated .btn-success {
  --app-filled-button-bg: var(--app-success-700);
  --app-filled-button-hover-bg: var(--app-success-800);
}

.app-authenticated .btn-warning {
  --app-filled-button-bg: var(--app-warning-700);
  --app-filled-button-hover-bg: var(--app-warning-800);
}

.app-authenticated .btn-danger {
  --app-filled-button-bg: var(--app-danger-700);
  --app-filled-button-hover-bg: var(--app-danger-800);
}

.app-authenticated .btn-info {
  --app-filled-button-bg: var(--app-primary-700);
  --app-filled-button-hover-bg: var(--app-primary-800);
}

.app-authenticated
  :is(
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-warning,
    .btn-danger,
    .btn-info
  ) {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-filled-button-bg);
  --bs-btn-border-color: var(--app-filled-button-bg);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-filled-button-hover-bg);
  --bs-btn-hover-border-color: var(--app-filled-button-hover-bg);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-filled-button-hover-bg);
  --bs-btn-active-border-color: var(--app-filled-button-hover-bg);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--app-filled-button-bg);
  --bs-btn-disabled-border-color: var(--app-filled-button-bg);
  color: #fff;
}

.app-authenticated
  :is(
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-warning,
    .btn-danger,
    .btn-info
  ):is(
    :hover,
    :focus-visible,
    :active,
    .active,
    :disabled,
    .disabled,
    [aria-disabled="true"]
  ) {
  color: #fff;
}

.app-authenticated .btn-outline-primary {
  --bs-btn-color: var(--app-accent-text);
  --bs-btn-border-color: #9ebeda;
  --bs-btn-hover-color: var(--app-ink-950);
  --bs-btn-hover-bg: var(--app-primary-50);
  --bs-btn-hover-border-color: var(--app-primary-600);
  --bs-btn-active-color: var(--app-ink-950);
  --bs-btn-active-bg: var(--app-primary-100);
}

.app-authenticated .btn-outline-secondary {
  --bs-btn-color: var(--app-ink-800);
  --bs-btn-border-color: var(--app-line-strong);
  --bs-btn-hover-color: var(--app-ink-950);
  --bs-btn-hover-bg: var(--app-primary-50);
  --bs-btn-hover-border-color: #91b5d5;
  --bs-btn-active-color: var(--app-ink-950);
  --bs-btn-active-bg: var(--app-primary-100);
}

.app-page {
  width: min(calc(100% - 2.5rem), 76rem);
  margin-inline: auto;
  padding-block: clamp(1.75rem, 4vw, 3.5rem) 4rem;
}

.app-page--wide {
  width: min(calc(100% - 2.5rem), 90rem);
}

.app-page--medium {
  width: min(calc(100% - 2.5rem), 68rem);
}

.app-page--form {
  width: min(calc(100% - 2.5rem), 58rem);
}

.app-page--scan {
  width: min(calc(100% - 2.5rem), 42rem);
}

.app-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.app-page-header > :first-child {
  min-width: 0;
}

.app-page-header h1 {
  margin: 0;
  color: var(--app-ink-950);
}

.app-page-header > div > p:last-child {
  max-width: 46rem;
  margin: 0.7rem 0 0;
  color: var(--app-ink-600);
  font-family: var(--type-lead-family);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-line-height);
  letter-spacing: var(--type-lead-letter-spacing);
  text-transform: var(--type-lead-transform);
}

.app-workspace-header {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.75rem;
  padding: 1.75rem 1.875rem;
  border: 1px solid
    color-mix(in srgb, var(--app-primary-600) 18%, var(--app-line));
  border-radius: var(--app-radius-lg);
  background:
    linear-gradient(110deg, var(--app-primary-50), var(--app-surface)),
    var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

.app-workspace-header::after {
  position: absolute;
  z-index: 0;
  top: -6.875rem;
  right: 7%;
  width: 15.625rem;
  height: 15.625rem;
  border: 2.625rem solid
    color-mix(in srgb, var(--app-primary-600) 6%, transparent);
  border-radius: 50%;
  clip-path: inset(6.875rem 0 0);
  content: "";
  pointer-events: none;
}

.app-workspace-header > * {
  position: relative;
  z-index: 1;
}

.app-back-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.organization-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.app-eyebrow {
  margin: 0 0 0.55rem;
  color: var(--app-accent-text);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: var(--type-label-transform);
}

.organization-dashboard__search-controls {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: 0.5rem;
}

.organization-dashboard__mobile-actions {
  display: none;
}

.organization-dashboard__mobile-actions > summary {
  list-style: none;
}

.organization-dashboard__mobile-actions > summary::-webkit-details-marker {
  display: none;
}

.organization-dashboard__search-group {
  min-width: 0;
  flex: 1 1 auto;
}

.organization-dashboard__search-clear {
  flex: 0 0 auto;
}

.app-surface {
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface-translucent);
  box-shadow: var(--app-shadow-sm);
}

.app-surface--table {
  --app-table-surface-edge-radius: calc(var(--app-radius-lg) - 1px);
  overflow: visible;
}

.app-surface--table > .app-surface__header:first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

.app-surface--table .dropdown-menu {
  z-index: 1080;
}

.app-surface--table > .app-surface__body--flush:last-child .app-data-table,
.app-surface--table > .app-table-wrap:last-child .app-data-table {
  border-end-start-radius: var(--app-table-surface-edge-radius);
  border-end-end-radius: var(--app-table-surface-edge-radius);
}

.app-surface--table
  > .app-surface__body--flush:last-child
  .app-data-table
  tbody
  tr:last-child
  > td:first-child,
.app-surface--table
  > .app-table-wrap:last-child
  .app-data-table
  tbody
  tr:last-child
  > td:first-child {
  border-end-start-radius: var(--app-table-surface-edge-radius);
}

.app-surface--table
  > .app-surface__body--flush:last-child
  .app-data-table
  tbody
  tr:last-child
  > td:last-child,
.app-surface--table
  > .app-table-wrap:last-child
  .app-data-table
  tbody
  tr:last-child
  > td:last-child {
  border-end-end-radius: var(--app-table-surface-edge-radius);
}

.app-surface + .app-surface {
  margin-top: 1.25rem;
}

.organization-dashboard
  > :is(.organization-dashboard__header, .app-scanner-promo, .app-surface) {
  margin-block: 0;
}

.app-surface__header,
.app-surface__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.2rem 1.35rem;
}

.app-surface__header {
  border-bottom: 1px solid var(--app-line);
  background: linear-gradient(
    135deg,
    var(--app-surface),
    var(--app-primary-50)
  );
}

.app-surface__header h2,
.app-form-section h2 {
  margin: 0;
  color: var(--app-ink-950);
}

.app-surface__header p {
  margin: 0.25rem 0 0;
  color: var(--app-ink-600);
  font-family: var(--type-supporting-family);
  font-size: var(--type-supporting-size);
  font-weight: var(--type-supporting-weight);
  line-height: var(--type-supporting-line-height);
  letter-spacing: var(--type-supporting-letter-spacing);
  text-transform: var(--type-supporting-transform);
}

.app-surface__body {
  padding: clamp(1.2rem, 3vw, 2rem);
}

.app-surface__body--flush {
  padding: 0;
}

.app-surface__footer {
  border-top: 1px solid var(--app-line);
  background: var(--app-surface-muted);
}

.app-form-section {
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-md);
  background: var(--app-surface-muted);
}

.app-form-section + .app-form-section {
  margin-top: 1rem;
}

.app-form-section > p {
  margin: 0.35rem 0 1rem;
  color: var(--app-ink-600);
  font-family: var(--type-supporting-family);
  font-size: var(--type-supporting-size);
  font-weight: var(--type-supporting-weight);
  line-height: var(--type-supporting-line-height);
  letter-spacing: var(--type-supporting-letter-spacing);
  text-transform: var(--type-supporting-transform);
}

.app-settings-grid {
  display: grid;
  gap: 1.25rem;
}

.app-settings-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}

.app-settings-details > div {
  padding: 1rem;
  border: 1px solid var(--app-line);
  border-radius: 0.85rem;
  background: var(--app-surface-muted);
}

.app-settings-details :is(dt, dd) {
  margin: 0;
}

.app-settings-details dt {
  color: var(--app-ink-600);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-settings-details dd {
  margin-top: 0.3rem;
  color: var(--app-ink-950);
  font-weight: 700;
}

.app-sso-settings__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}

.app-role-create {
  display: flex;
  gap: 0.5rem;
  max-width: 32rem;
}

.app-role-grid-wrap {
  max-height: min(70vh, 42rem);
  border: 1px solid var(--app-line);
  border-radius: 0.85rem;
}

.app-role-grid {
  min-width: 112rem;
  margin-bottom: 0;
}

.app-role-grid th,
.app-role-grid td {
  min-width: 5.5rem;
  text-align: center;
  vertical-align: middle;
}

.app-role-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--app-surface-muted);
}

.app-role-grid__role {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 12rem !important;
  background: var(--bs-body-bg) !important;
  text-align: left !important;
  box-shadow: 1px 0 0 var(--app-line);
}

.app-role-grid thead .app-role-grid__role {
  background: var(--app-surface-muted) !important;
  z-index: 4;
}

.app-role-delete-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.app-role-delete-list form {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--app-line);
  border-radius: 0.65rem;
}

.app-team-invite {
  border-bottom: 1px solid var(--app-line);
}

.app-team-invite-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(9rem, 12rem) auto;
  align-items: stretch;
  gap: 0.5rem;
}

.app-team-invite-controls > * {
  min-width: 0;
}

.app-team-invite-controls .app-team-invite-submit {
  white-space: nowrap;
}

.app-settings-grid .app-team-pending-invitations {
  padding: 0;
  border-top: 1px solid var(--app-line);
}

.app-team-pending-invitations h3 {
  margin: 0;
  color: var(--app-ink-950);
  font-size: 1.05rem;
}

.app-invitation-link {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #9ebeda;
  border-radius: 0.85rem;
  background: var(--app-primary-50);
}

.app-invitation-link > div:first-child {
  display: grid;
  gap: 0.2rem;
}

.app-invitation-link span {
  color: var(--app-ink-700);
  font-size: 0.9rem;
}

.app-team-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-team-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--app-line);
}

.app-team-list li:last-child {
  border-bottom: 0;
}

.app-team-member-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-team-avatar {
  display: inline-grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  color: var(--app-accent-text);
  background: var(--app-primary-100);
  font-weight: 800;
}

.app-team-avatar--invitation {
  color: var(--app-warning-text);
  background: var(--app-warning-50);
}

.app-team-person {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.app-team-person > span {
  overflow-wrap: anywhere;
  color: var(--app-ink-600);
  font-size: 0.88rem;
}

.app-danger-zone {
  border-color: #e6b7b2;
}

.auth-shell.auth-shell--single {
  grid-template-columns: minmax(0, 44rem);
  justify-content: center;
}

.app-field-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.app-field-grid.row,
.app-choice-grid.row,
.app-stat-grid.row,
.app-key-value-list.row {
  margin-inline: 0;
}

.app-field-grid.row > *,
.app-choice-grid.row > *,
.app-stat-grid.row > *,
.app-key-value-list.row > * {
  width: auto;
  max-width: none;
  padding-inline: 0;
}

.app-field-grid > * {
  grid-column: span 12;
}

.app-field-grid > .col-md-6,
.app-field-grid > .app-field--half {
  grid-column: span 6;
}

.app-field-grid > .col-md-4,
.app-field-grid > .app-field--third {
  grid-column: span 4;
}

.app-field-grid > .col-md-3 {
  grid-column: span 3;
}

.app-authenticated :is(.form-control, .form-select) {
  min-height: 2.75rem;
  border-color: var(--app-line-strong);
  border-radius: 0.6875rem;
  color: var(--app-ink-950);
  background-color: var(--app-control-bg);
}

.app-authenticated :is(.form-control, .form-select):focus {
  border-color: var(--app-primary-600);
  box-shadow: 0 0 0 0.22rem rgba(47, 120, 189, 0.17);
}

.app-authenticated .form-label,
.app-authenticated legend {
  color: var(--app-ink-800);
  font-family: var(--type-control-family);
  font-size: var(--type-control-size);
  font-weight: var(--type-control-weight);
  line-height: var(--type-control-line-height);
  letter-spacing: var(--type-control-letter-spacing);
  text-transform: var(--type-control-transform);
}

.app-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.app-surface__footer.app-form-actions {
  margin-top: 0;
}

.app-feedback {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--app-danger-100);
  border-radius: var(--app-radius-sm);
  color: var(--app-danger-text);
  background: var(--app-danger-50);
  font-family: var(--type-supporting-family);
  font-size: var(--type-supporting-size);
  font-weight: var(--type-supporting-weight);
  line-height: var(--type-supporting-line-height);
  letter-spacing: var(--type-supporting-letter-spacing);
  text-transform: var(--type-supporting-transform);
}

.app-feedback:is(.alert-success, .is-success) {
  border-color: var(--app-success-100);
  color: var(--app-success-text);
  background: var(--app-success-50);
}

.app-feedback:is(.alert-warning, .is-warning) {
  border-color: var(--app-warning-100);
  color: var(--app-warning-text);
  background: var(--app-warning-50);
}

.app-feedback:is(.alert-info, .is-info) {
  border-color: var(--app-primary-100);
  color: var(--app-accent-text);
  background: var(--app-primary-50);
}

.app-feedback__icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: currentColor;
  background: color-mix(in srgb, currentcolor 14%, transparent);
}

.app-feedback__icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-feedback__body {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 0.15rem;
}

.app-feedback__title {
  color: var(--app-ink-900);
  font-weight: 800;
}

.app-feedback__description {
  color: var(--app-ink-600);
}

.app-feedback__action {
  min-height: 2rem;
  flex: 0 0 auto;
  align-self: center;
  padding: 0.35rem 0.65rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  color: inherit;
  background: transparent;
  font-weight: 800;
}

.app-feedback__action:hover {
  background: color-mix(in srgb, currentcolor 9%, transparent);
}

.app-feedback__dismiss {
  width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  color: var(--app-ink-500);
  background: transparent;
  cursor: pointer;
}

.app-feedback__dismiss:hover {
  color: var(--app-ink-800);
  background: var(--app-surface-muted);
}

.app-feedback__dismiss svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-feedback--floating {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1080;
  width: min(26rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  color: var(--app-success-text);
  background: var(--app-surface);
  box-shadow: 0 18px 45px rgba(11, 31, 51, 0.22);
}

.app-status-pill {
  min-height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  color: #fff;
  background: var(--app-ink-700);
  font-family: var(--type-count-family);
  font-size: var(--type-count-size);
  font-weight: var(--type-count-weight);
  line-height: var(--type-count-line-height);
  letter-spacing: var(--type-count-letter-spacing);
  text-transform: var(--type-count-transform);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-authenticated .badge {
  font-family: var(--type-count-family);
  font-size: var(--type-count-size);
  font-weight: var(--type-count-weight);
  line-height: var(--type-count-line-height);
  letter-spacing: var(--type-count-letter-spacing);
  text-transform: var(--type-count-transform);
  font-variant-numeric: tabular-nums;
}

.app-status-pill.is-info {
  color: #fff;
  background: var(--app-primary-700);
}

.app-status-pill.is-neutral {
  color: #fff;
  background: var(--app-neutral-pill-bg);
}

.app-status-pill.is-success {
  color: #fff;
  background: var(--app-success-700);
}

.app-status-pill.is-warning {
  color: #fff;
  background: var(--app-warning-700);
}

.app-status-pill.is-danger {
  color: #fff;
  background: var(--app-danger-700);
}

/* First-run onboarding checklist (organization hub). */
.app-onboarding {
  border-color: var(--app-primary-100);
  background: linear-gradient(
    180deg,
    var(--app-primary-50),
    var(--app-surface) 60%
  );
}

.app-onboarding__header {
  align-items: flex-start;
}

.app-onboarding.is-complete {
  border-color: var(--app-line);
  background: var(--app-surface);
}

.app-onboarding__complete-header {
  align-items: center;
  min-height: 4.25rem;
  padding-block: 0.8rem;
}

.app-onboarding__complete-header h2 {
  margin: 0;
}

.app-onboarding__complete-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin-left: auto;
}

.app-onboarding__collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--app-line-strong);
  border-radius: 0.45rem;
  color: var(--app-ink-700);
  background: var(--app-surface);
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
}

.app-onboarding__collapse-toggle:hover {
  border-color: var(--app-primary-600);
  color: var(--app-accent-text);
  background: var(--app-primary-50);
}

.app-onboarding__collapse-toggle:focus-visible {
  outline: 3px solid var(--app-primary-100);
  outline-offset: 2px;
}

.app-onboarding__collapse-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.app-onboarding__collapse-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.app-onboarding-accordion {
  --bs-accordion-border-color: var(--app-line);
  --bs-accordion-btn-color: var(--app-ink-900);
  --bs-accordion-btn-bg: var(--app-surface);
  --bs-accordion-active-color: var(--app-primary-800);
  --bs-accordion-active-bg: var(--app-primary-50);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(14, 104, 181, 0.18);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  overflow: hidden;
}

.app-onboarding-group-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--app-line);
  background: var(--app-surface-muted);
}

.app-onboarding-group-header h3,
.app-onboarding-optional__header h3 {
  margin: 0;
  color: var(--app-ink-900);
  font-size: 0.92rem;
  font-weight: 700;
}

.app-onboarding-group-header p,
.app-onboarding-optional__header p {
  margin: 0.15rem 0 0;
  color: var(--app-ink-500);
  font-size: 0.82rem;
}

.app-onboarding-group-header > span,
.app-onboarding-optional__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--app-line-strong);
  border-radius: 999px;
  color: var(--app-ink-600);
  background: var(--app-surface);
  font-size: 0.76rem;
  font-weight: 600;
}

.app-onboarding-group-header__progress.is-neutral {
  border-color: var(--app-line-strong);
  color: var(--app-ink-600);
  background: var(--app-surface);
}

.app-onboarding-group-header__progress.is-warning {
  border-color: var(--app-warning-100);
  color: var(--app-warning-text);
  background: var(--app-warning-50);
}

.app-onboarding-group-header__progress.is-success {
  border-color: var(--app-success-700);
  color: #fff;
  background: var(--app-success-700);
}

.app-onboarding-step {
  overflow: hidden;
  border-width: 1px 0 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: var(--app-surface);
}

.app-onboarding-step.is-current {
  box-shadow: inset 4px 0 0 var(--app-primary-700);
}

.app-onboarding-step .accordion-button {
  gap: 1rem;
  min-height: 4.75rem;
  padding: 0.95rem 1.25rem;
  letter-spacing: 0;
}

.app-onboarding-step .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.app-onboarding-step.is-current .accordion-button {
  background: var(--app-primary-50);
}

.app-onboarding-step .accordion-button:not(:disabled):hover {
  background: var(--app-grey-hover-bg);
}

.app-onboarding-step.is-current .accordion-button:not(:disabled):hover {
  background: var(--app-primary-100);
}

.app-onboarding-step .accordion-button::after {
  flex: 0 0 auto;
  margin-left: 0.75rem;
}

.app-onboarding-step .accordion-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.app-onboarding-step__marker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--app-line-strong);
  border-radius: 999px;
  color: var(--app-ink-600);
  background: var(--app-surface);
  font-size: 0.9rem;
  font-weight: 700;
}

.app-onboarding-step__marker svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-onboarding-step.is-done .app-onboarding-step__marker {
  border-color: var(--app-success-700);
  color: #fff;
  background: var(--app-success-700);
}

.app-onboarding-step.is-current .app-onboarding-step__marker {
  border-color: var(--app-primary-700);
  color: #fff;
  background: var(--app-primary-700);
  box-shadow: 0 0 0 4px var(--app-primary-100);
}

.app-onboarding-step.is-optional .app-onboarding-step__marker {
  border-color: var(--app-primary-600);
  color: var(--app-accent-text);
  background: var(--app-primary-50);
}

.app-onboarding-step__summary {
  flex: 1 1 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.app-onboarding-step__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
  color: inherit;
  font-weight: 600;
}

.app-onboarding-step__number {
  color: var(--app-primary-700);
  font-weight: 700;
}

.app-onboarding-step__status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  color: var(--app-ink-500);
  background: var(--app-surface-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.app-onboarding-step__status:is(.is-done, .is-current) {
  justify-content: center;
  width: 3.5rem;
}

.app-onboarding-step__status.is-done {
  border-color: var(--app-success-700);
  color: #fff;
  background: var(--app-success-700);
}

.app-onboarding-step__status.is-current {
  border-color: var(--app-primary-700);
  color: #fff;
  background: var(--app-primary-700);
}

.app-onboarding-step__status.is-locked {
  color: var(--app-ink-500);
  background: var(--app-surface-muted);
}

.app-onboarding-step .accordion-body {
  padding: 1rem 1.25rem 1rem 4.5rem;
  color: var(--app-ink-600);
  background: var(--app-surface);
}

.app-onboarding-step.is-current .accordion-body {
  background: var(--app-primary-50);
}

.app-onboarding-step .accordion-body p {
  margin: 0;
}

.app-onboarding-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.app-onboarding-step__hint {
  color: var(--app-ink-500);
  font-size: 0.85rem;
}

.app-onboarding-step__button-icon {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.1em;
}

.app-onboarding-optional {
  background: var(--app-surface);
}

.app-onboarding-optional__header {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--app-line);
  border-bottom: 1px solid var(--app-line);
  background: var(--app-surface-muted);
}

.app-onboarding-optional__header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.app-onboarding-optional__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--app-primary-100);
  border-radius: 0.45rem;
  color: var(--app-accent-text);
  background: var(--app-surface);
}

.app-onboarding-optional__icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-onboarding-optional__badge {
  border-color: var(--app-primary-100);
  color: var(--app-primary-700);
}

.app-onboarding-step--optional:first-of-type {
  border-top: 0;
}

@media (max-width: 575.98px) {
  .app-onboarding__header {
    gap: 0.75rem;
  }

  .app-onboarding__complete-header {
    flex-direction: row;
    gap: 0.75rem;
  }

  .app-onboarding__complete-actions {
    gap: 0.45rem;
  }

  .app-onboarding-group-header {
    align-items: flex-start;
  }

  .app-onboarding-step .accordion-button {
    align-items: flex-start;
    padding-inline: 1rem;
  }

  .app-onboarding-step__summary {
    display: grid;
    gap: 0.35rem;
    justify-items: start;
  }

  .app-onboarding-step__status {
    min-height: 1.5rem;
  }

  .app-onboarding-step .accordion-body {
    padding-right: 1rem;
    padding-left: 4.25rem;
  }

  .app-onboarding-optional__header {
    flex-wrap: wrap;
    padding-inline: 1rem;
  }

  .app-onboarding-optional__badge {
    margin-left: 2.85rem;
  }
}

/* One-time "you're all set" completion toast for the onboarding checklist. */
.app-onboarding-toast {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.app-onboarding-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .app-onboarding-toast {
    transition: none;
    transform: none;
  }
}

.app-authenticated .text-bg-primary,
.app-authenticated .text-bg-info {
  color: #fff !important;
  background-color: var(--app-primary-700) !important;
}

.app-authenticated .text-bg-secondary {
  color: #fff !important;
  background-color: var(--app-ink-600) !important;
}

.app-authenticated .text-bg-success {
  color: #fff !important;
  background-color: var(--app-success-700) !important;
}

.app-authenticated .text-bg-warning {
  color: #fff !important;
  background-color: var(--app-warning-700) !important;
}

.app-authenticated .text-bg-danger {
  color: #fff !important;
  background-color: var(--app-danger-700) !important;
}

.app-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.app-stat-tile {
  padding: 1rem;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-md);
  background: linear-gradient(
    145deg,
    var(--app-surface),
    var(--app-primary-50)
  );
}

.app-stat-tile > :last-child {
  color: var(--app-ink-950);
  font-family: var(--type-stat-family);
  font-size: var(--type-stat-size);
  font-weight: var(--type-stat-weight);
  line-height: var(--type-stat-line-height);
  letter-spacing: var(--type-stat-letter-spacing);
  text-transform: var(--type-stat-transform);
  font-variant-numeric: tabular-nums;
}

.app-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.app-choice-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-md);
  color: var(--app-ink-950);
  background: linear-gradient(
    145deg,
    var(--app-surface),
    var(--app-surface-muted)
  );
  box-shadow: 0 1px 2px rgba(11, 31, 51, 0.04);
  text-decoration: none;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.app-choice-card:hover,
.app-choice-card:focus-within {
  color: var(--app-ink-950);
  border-color: #8eb5d8;
  box-shadow: var(--app-shadow-sm);
  transform: translateY(-2px);
}

.app-choice {
  border-color: var(--app-line) !important;
  border-radius: var(--app-radius-md) !important;
  color: var(--app-ink-950);
  background: linear-gradient(
    145deg,
    var(--app-surface),
    var(--app-surface-muted)
  );
  box-shadow: 0 1px 2px rgba(11, 31, 51, 0.04);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.app-choice:hover,
.app-choice:focus-within {
  border-color: #8eb5d8 !important;
  box-shadow: var(--app-shadow-sm);
  transform: translateY(-2px);
}

.app-progress-steps {
  display: block;
  margin-bottom: 1.25rem;
}

.import-stepper {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  list-style: none;
}

.import-step {
  min-width: 0;
}

.import-step__content {
  min-height: 3.5rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-sm);
  color: var(--app-ink-600);
  background: color-mix(in srgb, var(--app-surface) 82%, transparent);
  text-decoration: none;
}

.import-step__number {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: 999px;
  background: var(--app-surface);
  font-family: var(--type-count-family);
  font-size: var(--type-count-size);
  font-weight: var(--type-count-weight);
}

.import-step__number .app-icon {
  width: 1rem;
  height: 1rem;
}

.import-step__copy {
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.import-step__label {
  overflow: hidden;
  font-family: var(--type-navigation-family);
  font-size: var(--type-navigation-size);
  font-weight: var(--type-navigation-weight);
  line-height: var(--type-navigation-line-height);
  letter-spacing: var(--type-navigation-letter-spacing);
  text-transform: var(--type-navigation-transform);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-step__state {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.import-step.is-current .import-step__content {
  border-color: var(--app-primary-700);
  color: var(--app-accent-text);
  background: var(--app-primary-50);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--app-primary-700) 25%, transparent);
}

.import-step.is-current .import-step__number {
  color: #fff;
  border-color: var(--app-primary-700);
  background: var(--app-primary-700);
}

.import-step.is-complete .import-step__content {
  color: var(--app-success-text);
  border-color: color-mix(in srgb, var(--app-success-700) 32%, var(--app-line));
  background: var(--app-success-50);
}

.import-step.is-complete .import-step__number {
  color: var(--app-success-text);
  border-color: color-mix(in srgb, var(--app-success-700) 35%, var(--app-line));
  background: var(--app-success-100);
}

.import-step.is-complete .import-step__content:is(:hover, :focus-visible) {
  color: var(--app-success-text);
  border-color: var(--app-success-700);
  box-shadow: var(--app-shadow-sm);
}

.import-step.is-upcoming .import-step__content {
  color: var(--app-ink-500);
  background: var(--app-surface-muted);
}

.google-sheets-mapping-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.google-sheets-mapping-controls,
.google-sheets-mapping-preview {
  min-width: 0;
}

.google-sheets-mapping-preview > .app-surface {
  position: static;
}

.import-mapping-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.import-wizard-actions {
  position: sticky;
  z-index: 10;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--app-radius-md);
  background: var(--app-surface-translucent);
  box-shadow: var(--app-shadow-md);
  backdrop-filter: blur(16px);
}

.import-wizard-actions > div:first-child {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.app-key-value-list {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1fr);
  margin: 0;
}

.app-key-value-list :is(dt, dd) {
  margin: 0;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--app-line);
}

.app-key-value-list dt {
  color: var(--app-ink-600);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
  text-transform: var(--type-caption-transform);
}

.app-key-value-list dd {
  color: var(--app-ink-950);
  font-family: var(--type-data-family);
  font-size: var(--type-data-size);
  font-weight: var(--type-data-weight);
  line-height: var(--type-data-line-height);
  letter-spacing: var(--type-data-letter-spacing);
  text-transform: var(--type-data-transform);
  font-variant-numeric: tabular-nums;
}

.app-setting-card {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-md);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

.app-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: 0.6rem;
}

.app-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  padding: clamp(2rem, 7vw, 4.5rem) 1.25rem;
  color: var(--app-ink-600);
  text-align: center;
}

.app-empty-state h2,
.app-empty-state strong {
  margin: 0;
  color: var(--app-ink-950);
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-line-height);
  letter-spacing: var(--type-card-title-letter-spacing);
  text-transform: var(--type-card-title-transform);
}

.app-empty-state p,
.app-empty-state span {
  max-width: 38rem;
  margin: 0;
  font-family: var(--type-supporting-family);
  font-size: var(--type-supporting-size);
  font-weight: var(--type-supporting-weight);
  line-height: var(--type-supporting-line-height);
  letter-spacing: var(--type-supporting-letter-spacing);
  text-transform: var(--type-supporting-transform);
}

.app-empty-state--compact {
  padding: 2rem 1rem;
}

.app-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-table-wrap--cards {
  overflow: visible;
  overscroll-behavior-inline: auto;
  scrollbar-gutter: auto;
}

.app-table-wrap--scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.app-table-wrap--scroll .app-data-table {
  min-width: max(46rem, 100%);
  max-width: none;
}

/* Wider phone landscape layouts keep the desktop table readable without
   letting it widen the entire page or hiding controls past the safe area. */
@media (orientation: landscape) and (any-pointer: coarse) and (max-height: 31.25rem) and (min-width: 47.5625rem) {
  .order-list-table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
  }

  .order-list-table-wrap .order-list-table {
    min-width: max(48rem, 100%);
    max-width: none;
  }
}

.app-data-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--app-ink-900);
  background: var(--app-surface);
  font-family: var(--type-supporting-family);
  font-size: var(--type-supporting-size);
  font-weight: var(--type-supporting-weight);
  line-height: var(--type-supporting-line-height);
  letter-spacing: var(--type-supporting-letter-spacing);
  text-transform: var(--type-supporting-transform);
}

.app-data-table--cards {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
}

.app-data-table col {
  min-width: 5rem;
}

.app-data-table--cards col {
  min-width: 0;
}

.app-data-table th,
.app-data-table td {
  min-width: 0;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--app-line);
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.app-data-table th {
  color: var(--app-ink-600);
  background: var(--app-surface-muted);
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: var(--type-label-transform);
}

.google-sheets-sample-table th {
  white-space: nowrap;
}

.app-data-table tbody tr:last-child > td {
  border-bottom: 0;
}

.app-data-table tbody tr {
  transition: background-color 140ms ease;
}

.app-data-table tbody tr:hover > td {
  background: var(--app-primary-50);
}

.app-data-table__heading--center {
  text-align: center;
}

.app-data-table__heading--end,
.app-data-table__actions {
  text-align: right;
}

@media (min-width: 760px) {
  /* Opens each run of rows held by one supplier cart, and the run of free rows after them.
     The cell is both :first-child and :last-child, so the table's left-align rule applies
     and the middle-column centering rule correctly does not. */
  .order-list-table .order-list-group-row > th {
    padding: 0.6rem 0.75rem;
    background: var(--app-primary-50);
    border-bottom: 1px solid var(--app-line);
  }

  .order-list-table col[data-table-column-key="location"],
  .order-list-table
    :is(
      [data-order-list-column="location"],
      [data-order-list-cell="location"]
    ) {
    min-width: 120px;
  }

  .order-list-table col[data-table-column-key="labels"],
  .order-list-table
    :is([data-order-list-column="labels"], [data-order-list-cell="labels"]) {
    min-width: 120px;
  }

  .order-list-table col[data-table-column-key="procurement"],
  .order-list-table
    :is(
      [data-order-list-column="procurement"],
      [data-order-list-cell="procurement"]
    ) {
    min-width: 120px;
  }

  .order-list-table col[data-table-column-key="amount"],
  .order-list-table
    :is([data-order-list-column="amount"], [data-order-list-cell="amount"]) {
    min-width: 120px;
  }

  .order-list-table col[data-table-column-key="price"],
  .order-list-table
    :is([data-order-list-column="price"], [data-order-list-cell="price"]) {
    min-width: 100px;
  }

  .order-list-table col[data-table-column-key="subtotal"],
  .order-list-table
    :is(
      [data-order-list-column="subtotal"],
      [data-order-list-cell="subtotal"]
    ) {
    min-width: 100px;
  }

  .order-list-table col[data-table-column-key="last-activity"],
  .order-list-table
    :is(
      [data-order-list-column="last-activity"],
      [data-order-list-cell="last-activity"]
    ) {
    min-width: 120px;
  }

  .order-list-table col[data-table-column-key="ordered"],
  .order-list-table
    :is([data-order-list-column="ordered"], [data-order-list-cell="ordered"]) {
    min-width: 120px;
  }

  .order-list-table col[data-table-column-key="received"],
  .order-list-table
    :is(
      [data-order-list-column="received"],
      [data-order-list-cell="received"]
    ) {
    min-width: 120px;
  }

  .order-list-table col[data-table-column-key="actions"],
  .order-list-table
    :is([data-order-list-column="actions"], [data-order-list-cell="actions"]) {
    min-width: 150px;
  }

  .order-list-table :is([data-order-list-column="stock"], [data-order-list-cell="stock"]) {
    min-width: 96px;
  }

  .order-list-table :is([data-order-list-column="on-hand"], [data-order-list-cell="on-hand"]) {
    min-width: 88px;
  }

  .order-list-table :is([data-order-list-column="added-by"], [data-order-list-cell="added-by"]) {
    min-width: 112px;
  }
}

@media (min-width: 761px) {
  .app-data-table--sticky-header thead th {
    position: sticky;
    z-index: 6;
    top: calc(4.25rem + env(safe-area-inset-top, 0px));
    box-shadow:
      0 1px 0 var(--app-line),
      0 5px 12px rgba(11, 31, 51, 0.06);
  }

  /* Resizable tables scroll inside their wrapper, so headers anchor there. */
  .app-table-wrap .app-data-table--sticky-header.resizable-table thead th {
    top: 0;
  }

  .organization-dashboard__search-group {
    gap: 0.5rem;
  }

  .organization-dashboard__search-group > :is(.form-control, .btn) {
    border-radius: var(--bs-border-radius) !important;
  }

  .app-data-table > :not(caption) > * > :is(th, td):first-child {
    text-align: left;
  }

  .app-data-table
    > :not(caption)
    > *
    > :is(th, td):not(:first-child):not(:last-child) {
    text-align: center !important;
  }

  .app-data-table
    > :not(caption)
    > *
    > td:not(:first-child):not(:last-child)
    > :is(.d-flex.flex-wrap, .inventory-tag-list) {
    justify-content: center !important;
  }

  .app-data-table
    > :not(caption)
    > *
    > td:not(:first-child):not(:last-child)
    > .d-flex.flex-column {
    align-items: center !important;
  }

  .app-data-table
    > :not(caption)
    > *
    > td:not(:first-child):not(:last-child)
    .order-list-amount-input {
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }
}

.app-data-table__primary strong {
  display: block;
  color: var(--app-ink-950);
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-line-height);
  letter-spacing: var(--type-card-title-letter-spacing);
  text-transform: var(--type-card-title-transform);
}

.app-data-table__secondary {
  display: block;
  margin-top: 0.25rem;
  color: var(--app-ink-600);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
  text-transform: var(--type-caption-transform);
}

.app-table-actions {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.app-data-table--cards :is(th, td, form),
.app-data-table--cards .app-table-actions > * {
  min-width: 0;
  max-width: 100%;
}

.app-data-table--cards
  :is(.app-status-pill, .badge, .btn, .order-list-action-btn) {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.app-data-table--cards :is(.table-action-btn, .order-list-action-btn) {
  min-width: min(2.35rem, 100%);
}

.app-authenticated .app-table-actions__primary {
  --bs-btn-color: var(--app-accent-text);
  --bs-btn-bg: var(--app-control-bg);
  --bs-btn-border-color: var(--app-primary-600);
  --bs-btn-hover-color: var(--app-accent-text);
  --bs-btn-hover-bg: var(--app-control-bg);
  --bs-btn-hover-border-color: var(--app-primary-800);
  --bs-btn-active-color: var(--app-accent-text);
  --bs-btn-active-bg: var(--app-control-bg);
  --bs-btn-active-border-color: var(--app-primary-800);
  --bs-btn-disabled-color: var(--app-accent-text);
  --bs-btn-disabled-bg: var(--app-control-bg);
  --bs-btn-disabled-border-color: var(--app-line-strong);
  color: var(--app-accent-text);
  background-color: var(--app-control-bg);
  border-color: var(--app-primary-600);
  box-shadow: 0 2px 7px rgba(11, 31, 51, 0.12);
}

.app-authenticated
  .app-table-actions__primary:is(:hover, :focus-visible, :active, .active) {
  color: var(--app-accent-text);
  background-color: var(--app-control-bg);
  border-color: var(--app-primary-800);
  box-shadow: 0 4px 11px rgba(11, 31, 51, 0.17);
}

.app-authenticated
  .app-table-actions__primary:is(:disabled, .disabled, [aria-disabled="true"]) {
  color: var(--app-accent-text);
  background-color: var(--app-control-bg);
  border-color: var(--app-line-strong);
}

.order-list-amount-input {
  width: min(100%, 6rem);
  margin-left: auto;
  font-family: var(--type-data-family);
  font-size: var(--type-data-size);
  font-weight: var(--type-data-weight);
  line-height: var(--type-data-line-height);
  letter-spacing: var(--type-data-letter-spacing);
  text-transform: var(--type-data-transform);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.order-list-action-btn {
  min-width: 2.35rem;
}

.order-list-quick-filters {
  display: flex;
  gap: 0.5rem;
}

.app-favorite-star {
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-list-favorites-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--app-line-strong);
  color: var(--app-ink-600);
  background: var(--app-surface);
}

.order-list-favorites-toggle:hover,
.order-list-favorites-toggle:focus-visible,
.order-list-favorites-toggle.is-active {
  border-color: var(--app-warning-text);
  color: var(--app-warning-text);
  background: var(--app-warning-50);
}

.order-list-favorites-toggle__icon {
  width: 1rem;
  height: 1rem;
  fill: none;
}

.order-list-favorites-toggle.is-active .order-list-favorites-toggle__icon {
  fill: currentColor;
}

/* The filter card is a <details> so it collapses without JavaScript, which keeps the
   item table near the top of the page. The default disclosure triangle is replaced by a
   chevron that rotates, so the summary reads as a row rather than a list item. */
.order-list-filters > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  cursor: pointer;
  list-style: none;
}

.order-list-filters > summary::-webkit-details-marker {
  display: none;
}

.order-list-filters > summary:focus-visible {
  outline: 2px solid var(--app-focus-color);
  outline-offset: -2px;
}

.order-list-filters__heading {
  min-width: 0;
}

/* A real heading element keeps the document outline intact; the summary row just wants
   it at card-title scale rather than section scale. */
.order-list-filters__title {
  font-size: 1.15rem;
}

.order-list-filters__state {
  margin-left: auto;
  font-size: 0.9rem;
}

.order-list-filters > summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.order-list-filters[open] > summary::after {
  transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .order-list-filters > summary::after {
    transition: none;
  }
}

.order-list-table .table-column-resizer::after {
  width: 1px;
}

.order-list-row-actions {
  width: 100%;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.order-list-row-actions > form {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

.order-list-row-actions .order-list-action-btn:not(.table-action-btn) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.order-list-trash-icon {
  background-color: currentColor;
  -webkit-mask: url("/public/icons/icons8-trash-64.png") center / contain
    no-repeat;
  mask: url("/public/icons/icons8-trash-64.png") center / contain no-repeat;
}

.order-list-row--leaving {
  opacity: 0;
  transform: translateY(-0.35rem);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.table-action-btn {
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem !important;
  padding: 0;
}

.table-action-icon {
  width: 1rem;
  height: 1rem;
  display: block;
  object-fit: contain;
}

[data-resizable-table],
.resizable-table {
  table-layout: fixed;
}

[data-resizable-table] th,
.resizable-table th {
  position: relative;
}

.table-column-resizer {
  position: absolute;
  z-index: 3;
  top: 0;
  right: -0.4rem;
  width: 0.8rem;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

.table-column-resizer::after {
  position: absolute;
  top: 0.45rem;
  right: 0.35rem;
  bottom: 0.45rem;
  width: 2px;
  border-radius: 999px;
  background: var(--app-line-strong);
  content: "";
}

.app-data-table--sticky-header .table-column-resizer::after {
  right: 0.45rem;
}

.table-column-resizer:hover::after,
.table-column-resizer:focus-visible::after {
  background: var(--app-primary-600);
}

body.table-resize-active {
  cursor: col-resize;
  user-select: none;
}

.app-authenticated .modal-content {
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-lg);
  color: var(--app-ink-950);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-md);
}

.app-authenticated .modal-header,
.app-authenticated .modal-footer {
  border-color: var(--app-line);
  background: var(--app-surface-muted);
}

.app-authenticated .modal-title {
  font-family: var(--type-section-title-family);
  font-size: var(--type-section-title-size);
  font-weight: var(--type-section-title-weight);
  line-height: var(--type-section-title-line-height);
  letter-spacing: var(--type-section-title-letter-spacing);
  text-transform: var(--type-section-title-transform);
}

.app-authenticated .nav-tabs {
  gap: 0.25rem;
  border-color: var(--app-line);
}

.app-authenticated .nav-tabs .nav-link {
  min-height: 2.75rem;
  border-radius: 0.625rem 0.625rem 0 0;
  color: var(--app-ink-600);
  font-family: var(--type-navigation-family);
  font-size: var(--type-navigation-size);
  font-weight: var(--type-navigation-weight);
  line-height: var(--type-navigation-line-height);
  letter-spacing: var(--type-navigation-letter-spacing);
  text-transform: var(--type-navigation-transform);
}

.app-authenticated .nav-tabs .nav-link.active {
  color: var(--app-accent-text);
  border-color: var(--app-line) var(--app-line) var(--app-surface);
  background: var(--app-surface);
}

.order-list-tabs-header {
  padding: 0 1rem;
  overflow-x: auto;
  border-bottom-color: var(--app-line);
  background: var(--app-surface-muted);
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.order-list-tabs-nav {
  --bs-nav-underline-gap: clamp(1.25rem, 4vw, 2.25rem);
  --bs-nav-underline-border-width: 0.1875rem;
  --bs-nav-underline-link-active-color: var(--app-accent-text);
  min-width: max-content;
  flex-wrap: nowrap;
}

.order-list-tabs-nav .nav-link {
  min-height: 3.25rem;
  padding: 1rem 0.125rem 0.875rem;
  border-radius: 0;
  color: var(--app-ink-600);
  font-family: var(--type-navigation-family);
  font-size: var(--type-navigation-size);
  font-weight: var(--type-navigation-weight);
  line-height: var(--type-navigation-line-height);
  letter-spacing: var(--type-navigation-letter-spacing);
  text-transform: var(--type-navigation-transform);
  white-space: nowrap;
  opacity: 1;
}

.order-list-tabs-nav .nav-link:hover,
.order-list-tabs-nav .nav-link:focus-visible {
  color: var(--app-accent-text);
}

.order-list-tabs-nav .nav-link.active {
  color: var(--app-accent-text);
  border-bottom-color: var(--app-primary-600);
}

.order-list-tab-count {
  min-width: 1.5rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--app-line-strong);
  color: var(--app-ink-600);
  background: transparent;
  text-align: center;
}

.order-list-tabs-nav .nav-link.active .order-list-tab-count {
  border-color: var(--app-primary-600);
  color: var(--app-accent-text);
  background: var(--app-primary-50);
}

.app-authenticated :is(.card, .dropdown-menu, .list-group-item) {
  color: var(--app-ink-950);
  background-color: var(--app-surface);
  border-color: var(--app-line);
}

.app-authenticated .alert {
  border-color: color-mix(in srgb, currentcolor 28%, var(--app-line));
  box-shadow: var(--app-shadow-sm);
}

html[data-billing-notice-hidden] [data-billing-notice] {
  display: none;
}

.app-billing-notice--dismissible > .alert {
  padding-right: calc(var(--bs-alert-padding-x) + 20px);
}

/* Reserve horizontal room without adding the dismiss control to the flex layout. */
.app-billing-notice-dismiss {
  position: absolute;
  top: 50%;
  right: var(--bs-alert-padding-x);
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 20px;
  height: 16px;
  padding: 0 5px;
  background-size: 10px 10px;
}

.app-billing-notice-actions .app-billing-notice-dismiss {
  left: 100%;
  right: auto;
}

@media (max-width: 760px) {
  .app-data-table--cards.order-list-table tbody tr.order-list-group-row {
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-data-table--cards.order-list-table .order-list-group-row > th {
    padding: 0.25rem 0 0;
    background: transparent;
    border-bottom: 0;
  }

  .app-page,
  .app-page--wide,
  .app-page--medium,
  .app-page--form,
  .app-page--scan {
    width: min(calc(100% - 1.25rem), 100%);
    padding-block: 1.25rem 2.5rem;
  }

  .app-page-header {
    align-items: stretch;
  }

  .app-page-header > :last-child:not(:first-child) {
    width: 100%;
  }

  .app-page-header > :last-child:not(:first-child) .btn {
    flex: 1 1 9rem;
  }

  .app-surface {
    border-radius: 1rem;
  }

  .app-surface--table {
    --app-table-surface-edge-radius: calc(var(--app-radius-md) - 1px);
  }

  .order-list-tabs-header {
    padding-inline: 0.75rem;
  }

  .order-list-tabs-nav {
    --bs-nav-underline-gap: 1rem;
  }

  [data-order-list-scope],
  .order-list-page-intro {
    display: none;
  }

  .order-list-panel-description {
    display: none;
  }

  .app-surface__header,
  .app-surface__body,
  .app-surface__footer {
    padding: 1rem;
  }

  .app-surface__body--flush {
    padding: 0.75rem;
  }

  .app-settings-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-team-list li {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .app-team-list li > :is(.app-status-pill, form, .app-team-member-actions) {
    grid-column: 2;
    justify-self: start;
  }

  .app-field-grid > .app-field--half,
  .app-field-grid > .app-field--third,
  .app-field-grid > .col-md-3,
  .app-field-grid > .col-md-4,
  .app-field-grid > .col-md-6 {
    grid-column: span 12;
  }

  .app-form-actions > .btn,
  .app-form-actions > button {
    flex: 1 1 9rem;
  }

  .app-table-wrap--cards {
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .app-data-table--cards,
  .app-data-table--cards tbody {
    display: block;
    width: 100%;
  }

  .app-data-table--cards colgroup {
    display: none;
  }

  .app-data-table--cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-data-table--cards tbody {
    display: grid;
    gap: 0.75rem;
  }

  .app-data-table--cards tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: 0 4px 16px rgba(11, 31, 51, 0.055);
  }

  .app-data-table--cards tbody tr > td {
    display: grid;
    grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--app-line);
    text-align: left !important;
  }

  .app-data-table--cards
    tbody
    tr
    > td
    > :is(.d-flex.flex-wrap, .inventory-tag-list) {
    justify-content: flex-start !important;
  }

  .app-data-table--cards tbody tr > td > .d-flex.flex-column {
    align-items: flex-start !important;
  }

  .app-data-table--cards .order-list-amount-input {
    margin-right: auto !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  .app-data-table--cards tbody tr > td::before {
    color: var(--app-ink-600);
    content: attr(data-mobile-label);
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-label-line-height);
    letter-spacing: var(--type-label-letter-spacing);
    text-transform: var(--type-label-transform);
  }

  .app-data-table--cards tbody tr > td:last-child {
    border-bottom: 0;
    border-end-start-radius: calc(var(--app-radius-md) - 1px);
    border-end-end-radius: calc(var(--app-radius-md) - 1px);
  }

  .app-data-table--cards tbody tr > td:first-child {
    border-start-start-radius: calc(var(--app-radius-md) - 1px);
    border-start-end-radius: calc(var(--app-radius-md) - 1px);
  }

  .app-data-table--cards .app-data-table__primary {
    display: block;
    padding-block: 0.95rem;
    background: var(--app-primary-50);
  }

  .app-data-table--cards .app-data-table__primary::before {
    display: block;
    margin-bottom: 0.35rem;
  }

  .app-data-table--cards .app-data-table__actions {
    text-align: left;
  }

  .app-data-table--cards.order-list-table .app-data-table__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-data-table--cards.order-list-table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-data-table--cards.order-list-table tbody tr > td {
    display: block;
    min-width: 0;
    padding: 12px;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }

  .app-data-table--cards.order-list-table tbody tr > td::before {
    display: block;
    margin-bottom: 3px;
  }

  .app-data-table--cards.order-list-table [data-order-list-cell="item"] {
    grid-column: 1 / -1;
    padding: 15px 15px 10px;
    border-bottom: 1px solid var(--app-line);
  }

  .app-data-table--cards.order-list-table [data-order-list-cell="actions"] {
    display: block;
    grid-column: 1 / -1;
    padding: 4px 12px 12px;
  }

  .app-data-table--cards .app-table-actions {
    justify-content: flex-start !important;
  }

  .organization-dashboard-page .organization-dashboard {
    width: auto;
    gap: 1rem;
    margin-right: max(0.625rem, env(safe-area-inset-right));
    margin-left: max(0.625rem, env(safe-area-inset-left));
    padding-block: 1rem calc(2rem + env(safe-area-inset-bottom));
  }

  .organization-dashboard__header {
    gap: 0.8rem;
  }

  .app-workspace-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 1.375rem 1.25rem;
    border-radius: 1rem;
  }

  .organization-dashboard__header h1 {
    font-size: clamp(1.7rem, 8vw, 2.15rem);
    letter-spacing: -0.035em;
  }

  .organization-dashboard__header > div:first-child > p:last-child {
    display: none;
  }

  .organization-dashboard__title-block {
    width: 100%;
  }

  .organization-dashboard__title-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .organization-dashboard__title-row h1 {
    min-width: 0;
  }

  .app-onboarding__complete-header {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    min-height: 0;
    padding: 0.65rem 0.85rem;
  }

  .app-onboarding__complete-header > :first-child {
    grid-column: 1 / span 3;
    min-width: 0;
  }

  .app-onboarding__complete-header > :first-child > p:last-child {
    display: none;
  }

  .app-onboarding__complete-header h2 {
    font-size: 1.05rem;
    line-height: 1.15;
  }

  .app-onboarding__complete-actions {
    grid-column: 4;
    min-width: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0;
  }

  .app-onboarding__complete-actions .app-status-pill {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    padding: 0.15rem 0.3rem;
    font-size: 0.68rem;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
  }

  .app-onboarding__complete-actions .app-onboarding__collapse-toggle {
    width: 2rem;
    height: 2rem;
  }

  .organization-dashboard .organization-dashboard__mobile-actions {
    position: relative;
    display: block;
    flex: 0 0 auto;
  }

  .organization-dashboard__mobile-actions > summary {
    display: inline-flex;
    width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }

  .organization-dashboard__mobile-actions > summary:focus-visible {
    outline: 3px solid var(--app-focus-color);
    outline-offset: 2px;
  }

  .organization-dashboard__mobile-actions[open] > summary {
    color: var(--app-accent-text);
    background: var(--app-primary-50);
    border-color: var(--app-primary-600);
  }

  .organization-dashboard__mobile-actions-menu {
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: min(18rem, calc(100vw - 2rem));
    margin: 0;
    z-index: 1080;
  }

  .organization-dashboard__mobile-actions[open]
    .organization-dashboard__mobile-actions-menu {
    display: block;
  }

  .organization-dashboard .organization-dashboard__header-actions {
    display: none !important;
    width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .organization-dashboard
    .organization-dashboard__header-actions::-webkit-scrollbar {
    display: none;
  }

  .organization-dashboard .organization-dashboard__header-actions > .btn {
    min-height: 2.75rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .organization-dashboard__search {
    border-radius: 1rem;
  }

  .organization-dashboard__search .app-surface__header {
    padding: 0.85rem 1rem 0.75rem;
  }

  .organization-dashboard__search .app-surface__header h2,
  .organization-dashboard__locations .app-surface__header h2 {
    font-size: 1.05rem;
  }

  .organization-dashboard__search .app-surface__header p,
  .organization-dashboard__locations .app-surface__header p {
    display: none;
  }

  .organization-dashboard__search .app-surface__body {
    padding: 0.8rem;
  }

  .organization-dashboard__search .form-label {
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
  }

  .organization-dashboard__search-controls {
    flex-wrap: wrap;
  }

  .organization-dashboard__search-group {
    flex-basis: 100%;
  }

  .organization-dashboard__search-group > :is(.form-control, .btn) {
    min-height: 2.75rem;
  }

  .organization-dashboard__search-group > .btn {
    padding-inline: 0.85rem;
  }

  .organization-dashboard__search-clear {
    min-height: 2.5rem;
    padding: 0.45rem 0.25rem;
    border-color: transparent;
  }

  .organization-dashboard__search-help {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }

  .organization-dashboard__search-empty {
    display: none;
  }

  .organization-dashboard__locations {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .organization-dashboard__locations .app-surface__header {
    padding: 0.25rem 0 0.75rem;
    border: 0;
    background: transparent;
  }

  .organization-dashboard__locations .app-surface__body--flush {
    padding: 0;
  }

  .organization-dashboard .storage-location-data-table tbody {
    gap: 0.65rem;
  }

  .organization-dashboard .storage-location-data-table tbody tr {
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(11, 31, 51, 0.075);
  }

  .organization-dashboard .storage-location-data-table tbody tr > td {
    gap: 0.6rem;
    padding: 0.45rem 0.9rem;
    border-bottom: 0;
  }

  .organization-dashboard
    .storage-location-data-table
    .app-data-table__primary {
    display: block;
    padding: 0.95rem 0.9rem 0.55rem;
    background: transparent;
  }

  .organization-dashboard
    .storage-location-data-table
    .app-data-table__primary::before,
  .organization-dashboard
    .storage-location-data-table
    .app-data-table__actions::before {
    display: none;
  }

  .organization-dashboard
    .storage-location-data-table
    .app-data-table__primary
    strong {
    font-size: 1.05rem;
  }

  .organization-dashboard
    .storage-location-data-table
    tbody
    tr
    > td:not(.app-data-table__primary):not(.app-data-table__actions) {
    grid-template-columns: minmax(5.75rem, 0.38fr) minmax(0, 1fr);
  }

  .organization-dashboard .storage-location-data-table tbody tr > td::before {
    font-size: 0.68rem;
  }

  .organization-dashboard .storage-location-data-table .app-status-pill {
    justify-self: start;
  }

  .organization-dashboard
    .storage-location-data-table
    .app-data-table__actions {
    display: block;
    margin-top: 0.35rem;
    padding: 0.75rem 0.9rem 0.9rem;
    border-top: 1px solid var(--app-line);
  }

  .organization-dashboard .storage-location-data-table .app-table-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
  }

  .organization-dashboard
    .storage-location-data-table
    .app-table-actions__primary {
    width: 100%;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .organization-dashboard .storage-location-data-table .table-action-btn {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
  }

  [data-resizable-table] .table-column-resizer {
    display: none;
  }

  .app-key-value-list {
    grid-template-columns: 1fr;
  }

  .app-key-value-list dt {
    padding-bottom: 0.2rem;
    border-bottom: 0;
  }

  .app-key-value-list dd {
    padding-top: 0;
  }
}

@media (max-width: 767.98px) {
  .app-team-invite-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-team-invite-controls
    :is(.app-team-invite-role, .app-team-invite-submit) {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .app-authenticated :is(.form-control, .form-select, textarea.form-control) {
    font-size: 1rem;
  }

  .app-role-create {
    max-width: none;
    flex-direction: column;
  }
  .app-scanner-promo {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    padding: 1rem 2.85rem 1rem 1rem;
  }

  .app-scanner-promo__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .app-scanner-promo__actions .btn {
    flex: 1 1 10rem;
  }
  .app-scanner-promo__handoff {
    display: none;
  }
  .app-scanner-promo__status {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .import-wizard-actions {
    bottom: calc(
      var(--app-mobile-nav-space) + env(safe-area-inset-bottom) + 0.5rem
    );
    align-items: stretch;
    flex-direction: column;
  }

  .import-wizard-actions .btn {
    flex: 1 1 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-authenticated *,
  .app-authenticated *::before,
  .app-authenticated *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Prefill handoff: one row per item number the buyer copies into the supplier's own order
   form. The number is the thing being transcribed, so it gets the monospace treatment and
   enough size to read across a tab switch without leaning in. */
.handoff-item__number {
  font-family: var(--bs-font-monospace, monospace);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--app-surface-muted, rgba(0, 0, 0, 0.05));
  color: inherit;
}

.handoff-item__detail {
  flex-basis: 100%;
}

/* Ticked rows recede rather than disappear: the buyer still needs to see what is done, and
   a row that vanished would make the list jump under the cursor mid-entry. */
.handoff-item.is-entered {
  opacity: 0.6;
}

.handoff-item.is-entered .handoff-item__number {
  text-decoration: line-through;
}

@media (min-width: 576px) {
  .handoff-item__detail {
    flex-basis: auto;
    flex-grow: 1;
  }
}

/* "Couldn't order" sits on the item row, deliberately quiet: it is the exception, and a
   control competing with the item number would invite mis-clicks during fast entry. */
.handoff-item__drop {
  color: var(--app-ink-600, inherit);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  white-space: nowrap;
  cursor: pointer;
}

.handoff-item__drop .form-check-input {
  margin: 0;
  float: none;
}

/* No extra styling for an item marked "couldn't order": a checked box beside those words is
   already the clearest signal on the row, and every tint, weight and colour tried here lost
   to a Bootstrap utility or a later rule. Shipping declarations that quietly do nothing is
   worse than leaving the checkbox to speak for itself. */

/* ==========================================================================
   Order list — the "ledger" treatment.
   Density first: flat panels, hairline rules, a dark heading band and tighter
   cells, so more of the list is visible at once.

   Scoped to the page rather than added to .app-authenticated on purpose. The
   same declarations on the shared class would put every table in the app at
   this density -- inventory, storage locations, organizations, the Sheets
   importer and punch-out all render through .app-data-table -- and the radius
   tokens are read by auth.css and profile.css too, so it would reshape the
   login and profile pages as a side effect. The palette above is shared; this
   is not.

   Everything below hangs off hooks the markup already has: the body class the
   controller passes, and the order-list classes and data attributes the view
   has always rendered.
   ========================================================================== */
.order-list-page-body {
  /* Squared off. Declared on the body, which is also where .app-authenticated
     sits, so these win on source order; the dark theme does not redefine them. */
  --app-radius-sm: 4px;
  --app-radius-md: 6px;
  --app-radius-lg: 6px;
  /* Reserved for the primary action and the section edge that leads to it,
     matching the landing page's rule for the same gradient. */
  --app-button-gradient: linear-gradient(
    120deg,
    #0b63d6 0%,
    #1e86e8 45%,
    #17b3ce 100%
  );
}

/* The header block loses about a third of its height. This is where the density
   actually comes from: row height is set by the item name and the stacked
   buttons, not by cell padding. */
.order-list-page-body .app-page {
  padding-block: clamp(1.25rem, 2.5vw, 2rem) 3rem;
}

.order-list-page-body .app-page h1 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.order-list-page-body .order-list-page-intro {
  font-size: var(--type-supporting-size);
}

/* Panels: a hairline box with no lift. The shadow is dropped per element rather
   than through --app-shadow-sm, because the dark theme redefines that token at a
   higher specificity and would put the shadow back. */
.order-list-page-body :is(.app-surface, .card) {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-md);
  box-shadow: none;
}

.order-list-page-body .card-body {
  padding: 1rem;
}

/* The landing's gradient edge, drawn as a background strip. border-image would
   paint all four edges and put a blue hairline down both sides of the card; a
   sized background paints only this edge. */
.order-list-page-body [data-order-list-tabs] {
  border-radius: 0;
  background-image: var(--app-button-gradient);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 3px;
}

.order-list-page-body .order-list-tabs-header {
  padding-inline: 0.75rem;
  border-bottom-color: var(--app-line);
  background: var(--app-surface);
}

.order-list-page-body .order-list-filters > summary {
  background: var(--app-surface);
}

.order-list-page-body .order-list-tabs-nav .nav-link {
  min-height: 2.75rem;
  padding-block: 0.7rem 0.6rem;
}

.order-list-page-body .order-list-tabs-nav .nav-link.active {
  border-bottom-color: var(--app-primary-700);
  color: var(--app-ink-950);
}

.order-list-page-body .order-list-tab-count {
  border-radius: 4px;
  color: var(--app-ink-950);
  background: var(--app-primary-100);
  font-variant-numeric: tabular-nums;
}

/* --app-surface rather than #fff: in the dark theme --app-ink-950 is nearly
   white, so a hardcoded white would leave this unreadable. */
.order-list-page-body
  .order-list-tabs-nav
  .nav-link.active
  .order-list-tab-count {
  color: var(--app-surface);
  background: var(--app-ink-950);
}

.order-list-page-body :is(.form-control, .form-select) {
  border-color: var(--app-line-strong);
  border-radius: var(--app-radius-sm);
}

.order-list-page-body :is(.form-control, .form-select):focus {
  border-color: var(--app-primary-600);
  box-shadow: 0 0 0 2px var(--app-primary-100);
}

/* The stock badges keep their pill shape: it comes from Bootstrap's
   .rounded-pill, which sets border-radius with !important, so squaring those
   needs a template change rather than a rule here. Their colour already moved
   with the shared palette. */
.order-list-page-body .app-status-pill {
  border-radius: 3px;
  box-shadow: none;
}

.order-list-page-body .badge {
  font-variant-numeric: tabular-nums;
}

.order-list-page-body .btn-primary {
  border-color: transparent;
  background-image: var(--app-button-gradient);
}

.order-list-page-body .btn-primary:is(:hover, :active, :focus-visible) {
  border-color: transparent;
  background-image: var(--app-button-gradient);
  filter: saturate(1.12) brightness(1.06);
}

/* The rows. Cells give up roughly 40% of their vertical padding and the heading
   band goes ink, which keeps a sticky header legible over scrolled rows. */
.order-list-page-body .order-list-table :is(th, td) {
  padding: 0.55rem 0.75rem;
}

/* thead rather than th: the supplier-cart group headings are th elements inside
   tbody, and darkening those would make a cart's heading row indistinguishable
   from the table header. They keep their own pale tint. */
.order-list-page-body .order-list-table thead th {
  border-bottom: 1px solid var(--app-ink-950);
  color: var(--app-surface);
  background: var(--app-ink-950);
}

.order-list-page-body .order-list-table td {
  border-bottom: 1px solid var(--app-line);
}

.order-list-page-body .order-list-table tbody tr:hover > td {
  background: var(--app-primary-50);
}

/* Tabular figures wherever a number is compared down a column, which is the
   point of this treatment. */
.order-list-page-body
  .order-list-table
  :is(.app-data-table__numeric, .app-data-table__cell) {
  font-variant-numeric: tabular-nums;
}

.order-list-page-body .order-list-table .app-data-table__primary {
  color: var(--app-ink-950);
  font-weight: 700;
}

/* No card-mode counterpart to the heading band: at that width .app-data-table--cards
   clips thead to a screen-reader rect, so the band has nothing to paint and a rule
   unwinding it would be a declaration that does nothing. */