/* MyFlightOps shared design foundations.
   Page styles may compose these tokens without redefining the brand language. */
:root {
  color-scheme: light;

  --fo-color-brand: #243244;
  --fo-color-brand-strong: #182533;
  --fo-color-on-brand: #fff;
  --fo-color-action: #315f7b;
  --fo-color-action-hover: #244b62;
  --fo-color-accent: #0097c7;
  --fo-color-silver-blue: #8ea8bc;
  --fo-color-canvas: #f4f6f8;
  --fo-color-surface: #fff;
  --fo-color-surface-subtle: #edf1f3;
  --fo-color-ink: #1b2933;
  --fo-color-muted: #687780;
  --fo-color-border: #dce4e8;
  --fo-color-success: #24734e;
  --fo-color-success-ink: #176b48;
  --fo-color-success-soft: #e0f2e8;
  --fo-color-warning: #9a650a;
  --fo-color-warning-ink: #755512;
  --fo-color-warning-soft: #faeabb;
  --fo-color-danger: #b5443c;
  --fo-color-danger-soft: #f8e4e2;
  --fo-color-info: #2e6f91;
  --fo-color-info-soft: #e5eff4;

  --fo-font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fo-font-mono: "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fo-space-1: .25rem;
  --fo-space-2: .5rem;
  --fo-space-3: .75rem;
  --fo-space-4: 1rem;
  --fo-space-5: 1.5rem;
  --fo-space-6: 2rem;
  --fo-space-7: 3rem;
  --fo-space-8: 4rem;

  --fo-radius-sm: 6px;
  --fo-radius-md: 8px;
  --fo-radius-lg: 12px;
  --fo-radius-xl: 16px;
  --fo-radius-pill: 999px;

  --fo-shadow-1: 0 3px 12px rgba(28, 42, 53, .04);
  --fo-shadow-2: 0 8px 24px rgba(28, 42, 53, .08);
  --fo-shadow-3: 0 16px 40px rgba(24, 37, 51, .14);
  --fo-focus-ring: 0 0 0 .2rem rgba(0, 151, 199, .2);
  --fo-control-height: 2.5rem;
  --fo-touch-target: 2.75rem;
  --fo-page-max: 100rem;

  /* Compatibility aliases for older screens. */
  --blue: var(--fo-color-action);
  --white: var(--fo-color-surface);
  --grey: var(--fo-color-canvas);
  --black1: var(--fo-color-ink);
  --black2: var(--fo-color-muted);
  --aDark: var(--fo-color-brand-strong);
  --aBlue: var(--fo-color-action);
  --aGray: var(--fo-color-brand);
  --aWhite: var(--fo-color-surface-subtle);

  --bs-body-font-family: var(--fo-font-sans);
  --bs-body-color: var(--fo-color-ink);
  --bs-body-bg: var(--fo-color-canvas);
  --bs-primary: var(--fo-color-action);
  --bs-primary-rgb: 49, 95, 123;
  --bs-link-color: var(--fo-color-action);
  --bs-link-color-rgb: 49, 95, 123;
  --bs-link-hover-color: var(--fo-color-action-hover);
  --bs-link-hover-color-rgb: 36, 75, 98;
  --bs-border-color: var(--fo-color-border);
  --bs-border-radius: var(--fo-radius-md);
  --bs-border-radius-lg: var(--fo-radius-lg);
  --bs-border-radius-xl: var(--fo-radius-xl);
}

html { background: var(--fo-color-canvas); }

body {
  color: var(--fo-color-ink);
  background: var(--fo-color-canvas);
  font-family: var(--fo-font-sans);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.fo-skip-link { position: fixed; top: .65rem; left: .65rem; z-index: 2000; padding: .65rem .9rem; border-radius: .5rem; color: #fff; background: var(--fo-color-brand-strong); font-weight: 700; text-decoration: none; transform: translateY(calc(-100% - 1rem)); transition: transform .15s ease; }
.fo-skip-link:focus { color: #fff; transform: translateY(0); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid rgba(0,151,199,.42); outline-offset: 2px; }
:where(input, select, textarea):focus-visible { outline: 0; }
[id] { scroll-margin-top: 1rem; }
.fo-scroll-region { scrollbar-gutter: stable; }
.fo-scroll-region:focus-visible { outline: 3px solid rgba(0,151,199,.32); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6, strong, .fw-semibold, .fw-bold {
  text-wrap: balance;
}

small, .small { line-height: 1.4; }

/* Own the heading baseline previously supplied by Sandstone. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 400; }

code, kbd, pre, samp, .font-monospace, .fontMono,
.fo-operational-data { font-family: var(--fo-font-mono) !important; }

a, button, input, select, textarea, [tabindex]:not([tabindex="-1"]) {
  scroll-margin: var(--fo-space-4);
}

:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--fo-color-accent);
  outline-offset: 2px;
}

.form-control,
.form-select {
  min-height: var(--fo-control-height);
  height: auto;
  padding: .5rem .75rem;
  border-color: var(--fo-color-border);
  border-radius: var(--fo-radius-md);
  color: var(--fo-color-ink);
  background-color: var(--fo-color-surface);
  font-family: var(--fo-font-sans);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.45;
}

textarea.form-control { min-height: 6rem; line-height: 1.5; }

.form-control::placeholder { color: #8a969e; opacity: 1; }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--fo-color-accent);
  box-shadow: var(--fo-focus-ring);
}

.form-label, label.form-label {
  margin-bottom: var(--fo-space-2);
  color: #526570;
  font-size: .75rem;
  font-weight: 600;
}

.form-text { color: var(--fo-color-muted); font-size: .75rem; }

/* Opt-in text actions override older directory icon-only mobile rules. */
.fo-page-header.fo-page-header--text-actions { flex-wrap: wrap; }
.fo-page-header.fo-page-header--text-actions .fo-page-header__actions .btn {
  width: auto;
  min-height: var(--fo-touch-target);
  padding: .6rem .85rem;
  font-size: .85rem;
}
.fo-missing-value { display: inline-flex; align-items: center; color: var(--fo-color-muted); font-size: 1rem; }

.btn {
  text-transform: none;
  min-height: var(--fo-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fo-space-2);
  border-radius: var(--fo-radius-md);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.btn-primary {
  --bs-btn-color: var(--fo-color-on-brand);
  --bs-btn-hover-color: var(--fo-color-on-brand);
  --bs-btn-active-color: var(--fo-color-on-brand);
  --bs-btn-disabled-color: var(--fo-color-on-brand);
  --bs-btn-disabled-bg: var(--fo-color-action);
  --bs-btn-disabled-border-color: var(--fo-color-action);
  --bs-btn-focus-shadow-rgb: 49, 95, 123;
  --bs-btn-bg: var(--fo-color-action);
  --bs-btn-border-color: var(--fo-color-action);
  --bs-btn-hover-bg: var(--fo-color-action-hover);
  --bs-btn-hover-border-color: var(--fo-color-action-hover);
  --bs-btn-active-bg: var(--fo-color-brand-strong);
  --bs-btn-active-border-color: var(--fo-color-brand-strong);
}

.btn-outline-primary {
  --bs-btn-hover-color: var(--fo-color-on-brand);
  --bs-btn-active-color: var(--fo-color-on-brand);
  --bs-btn-active-bg: var(--fo-color-brand-strong);
  --bs-btn-active-border-color: var(--fo-color-brand-strong);
  --bs-btn-disabled-color: var(--fo-color-action);
  --bs-btn-disabled-border-color: #9eb4c1;
  --bs-btn-focus-shadow-rgb: 49, 95, 123;
  --bs-btn-color: var(--fo-color-action);
  --bs-btn-border-color: #9eb4c1;
  --bs-btn-hover-bg: var(--fo-color-action);
  --bs-btn-hover-border-color: var(--fo-color-action);
}

.btn-danger {
  --bs-btn-bg: var(--fo-color-danger);
  --bs-btn-border-color: var(--fo-color-danger);
  --bs-btn-hover-bg: #963830;
  --bs-btn-hover-border-color: #963830;
  --bs-btn-active-bg: #7d2e28;
  --bs-btn-active-border-color: #7d2e28;
  --bs-btn-disabled-bg: var(--fo-color-danger);
  --bs-btn-disabled-border-color: var(--fo-color-danger);
  --bs-btn-focus-shadow-rgb: 181, 68, 60;
}

.btn-secondary {
  --bs-btn-bg: var(--fo-color-muted);
  --bs-btn-border-color: var(--fo-color-muted);
  --bs-btn-hover-bg: #52616a;
  --bs-btn-hover-border-color: #52616a;
  --bs-btn-active-bg: #43515a;
  --bs-btn-active-border-color: #43515a;
  --bs-btn-disabled-bg: var(--fo-color-muted);
  --bs-btn-disabled-border-color: var(--fo-color-muted);
  --bs-btn-focus-shadow-rgb: 104, 119, 128;
}

.btn-outline-secondary {
  --bs-btn-color: var(--fo-color-muted);
  --bs-btn-border-color: var(--fo-color-muted);
  --bs-btn-hover-color: var(--fo-color-on-brand);
  --bs-btn-hover-bg: var(--fo-color-muted);
  --bs-btn-hover-border-color: var(--fo-color-muted);
  --bs-btn-active-color: var(--fo-color-on-brand);
  --bs-btn-active-bg: #52616a;
  --bs-btn-active-border-color: #52616a;
  --bs-btn-disabled-color: var(--fo-color-muted);
  --bs-btn-disabled-border-color: var(--fo-color-muted);
  --bs-btn-focus-shadow-rgb: 104, 119, 128;
}

.btn-icon,
button[aria-label]:not(.btn-close):not(.sidebar-toggle):not(.mobile-nav-link) {
  min-width: var(--fo-control-height);
}

.card, .fo-card {
  border-color: var(--fo-color-border);
  border-radius: var(--fo-radius-lg);
  background: var(--fo-color-surface);
  box-shadow: var(--fo-shadow-1);
}

.card-header, .fo-card-header {
  border-bottom-color: var(--fo-color-border);
}

.badge, .fo-status {
  border-radius: var(--fo-radius-pill);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .025em;
}

.fo-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  width: max-content;
  padding: .2rem .5rem;
}

.row-actions, .fo-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  white-space: nowrap;
}

.row-action, .fo-row-action {
  display: inline-grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  min-width: 2.125rem;
  padding: 0;
  border: 1px solid #d7e0e4;
  border-radius: .5rem;
  color: var(--fo-color-action);
  background: #fff;
  box-shadow: none;
  text-decoration: none;
}

.row-action:hover, .fo-row-action:hover { border-color: #aec2cc; color: var(--fo-color-action-hover); background: #edf4f7; }
.row-action.warning, .fo-row-action--warning { color: var(--fo-color-warning-ink); }
.row-action.warning:hover, .fo-row-action--warning:hover { border-color: #e2c776; color: #65470a; background: #fff5d9; }
.row-action.danger, .fo-row-action--danger { color: var(--fo-color-danger); }
.row-action.danger:hover, .fo-row-action--danger:hover { border-color: #dfa9a3; color: #8f3028; background: var(--fo-color-danger-soft); }
.row-action.success, .row-action.paid, .fo-row-action--success { color: var(--fo-color-success); }
.row-action.success:hover, .row-action.paid:hover, .fo-row-action--success:hover { border-color: #a8cfb9; color: #105c3c; background: var(--fo-color-success-soft); }
.row-action:focus-visible, .fo-row-action:focus-visible { outline: 3px solid rgba(49, 95, 123, .24); outline-offset: 2px; }
.row-action:disabled, .row-action.disabled, .fo-row-action:disabled, .fo-row-action.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.fo-status--pending, .status-pending, .status-needs-attention {
  color: var(--fo-color-warning);
  background: var(--fo-color-warning-soft);
}

.fo-status--approved, .fo-status--completed, .fo-status--paid,
.status-approved, .status-completed, .status-paid {
  color: var(--fo-color-success);
  background: var(--fo-color-success-soft);
}

.fo-status--rejected, .fo-status--cancelled,
.status-rejected, .status-cancelled {
  color: var(--fo-color-danger);
  background: var(--fo-color-danger-soft);
}

.fo-status--draft, .fo-status--archived, .status-draft, .status-archived {
  color: var(--fo-color-muted);
  background: var(--fo-color-surface-subtle);
}

.fo-status--unpaid, .fo-status--overdue, .status-unpaid, .status-overdue {
  color: var(--fo-color-warning);
  background: var(--fo-color-warning-soft);
}

.alert { border-radius: var(--fo-radius-lg); }
.modal-content { border-color: var(--fo-color-border); border-radius: var(--fo-radius-xl); }
.fo-modal-header { gap: var(--fo-space-3); color: #fff; background: var(--fo-color-brand); }
.fo-modal-header--danger { background: var(--fo-color-danger); }
.fo-modal-header--info { background: var(--fo-color-info); }
.fo-modal-header--warning { color: var(--fo-color-brand-strong); background: var(--fo-color-warning-soft); }
.fo-modal-header--warning .btn-close { filter: none; }
.fo-modal-header .modal-title { display: flex; align-items: center; gap: var(--fo-space-2); min-width: 0; }
.fo-modal-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--fo-space-2); }
.dropdown-menu { border-color: var(--fo-color-border); border-radius: var(--fo-radius-lg); box-shadow: var(--fo-shadow-2); }
.dropdown-item { min-height: 2.5rem; gap: var(--fo-space-2); }

.page-eyebrow, .fo-eyebrow {
  color: #52758a;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .6875rem;
  font-weight: 700;
}

.fo-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fo-space-4);
  margin-bottom: var(--fo-space-5);
}

.fo-page-header h1 {
  margin: 0;
  color: var(--fo-color-ink);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.035em;
}

.fo-page-header p:last-child {
  margin: var(--fo-space-1) 0 0;
  color: var(--fo-color-muted);
}

.fo-page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--fo-space-2);
}

.fo-status-tabs {
  display: flex;
  align-items: center;
  gap: var(--fo-space-2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.fo-status-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--fo-space-2);
  min-height: var(--fo-control-height);
  white-space: nowrap;
}

.fo-filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fo-space-2);
}

.fo-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  gap: var(--fo-space-1);
  padding: .25rem .55rem;
  border: 1px solid #b7cad5;
  border-radius: var(--fo-radius-pill);
  background: var(--fo-color-info-soft);
  color: var(--fo-color-action);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
}

.fo-filter-chips__label {
  color: var(--fo-color-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .625rem;
  font-weight: 700;
}

.fo-filter-chips__clear { color: var(--fo-color-warning); font-size: .75rem; font-weight: 600; }

.fo-feedback-state {
  display: grid;
  justify-items: center;
  gap: var(--fo-space-2);
  padding: clamp(var(--fo-space-6), 7vw, var(--fo-space-8));
  border: 1px dashed #bdcbd3;
  border-radius: var(--fo-radius-lg);
  background: var(--fo-color-surface);
  color: var(--fo-color-muted);
  text-align: center;
}

.fo-feedback-state__icon { color: var(--fo-color-silver-blue); font-size: 2rem; }
.fo-feedback-state__icon-wrap {
  display: inline-grid;
  place-items: center;
  width: 3.375rem;
  height: 3.375rem;
  margin-bottom: var(--fo-space-1);
  border: 1px solid #c8d9e2;
  border-radius: var(--fo-radius-lg);
  color: var(--fo-color-action);
  background: var(--fo-color-info-soft);
}
.fo-feedback-state__icon-wrap .fo-feedback-state__icon { color: inherit; font-size: 1.5rem; }
.fo-feedback-state.compact .fo-feedback-state__icon-wrap,
.fo-empty-state--compact .fo-feedback-state__icon-wrap { width: 2.875rem; height: 2.875rem; border-radius: var(--fo-radius-md); }
.fo-feedback-state.compact .fo-feedback-state__icon,
.fo-empty-state--compact .fo-feedback-state__icon { font-size: 1.25rem; }
.fo-feedback-state--error .fo-feedback-state__icon { color: var(--fo-color-danger); }
.fo-feedback-state--success .fo-feedback-state__icon { color: var(--fo-color-success); }
.fo-feedback-state h2 { margin: 0; color: var(--fo-color-ink); font-size: 1rem; }
.fo-feedback-state > strong { color: var(--fo-color-ink); }
.fo-feedback-state p { max-width: 38rem; margin: 0; }
.fo-feedback-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fo-space-2); margin-top: var(--fo-space-2); }

.fo-route-loader { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; color: var(--fo-color-muted); }
.fo-route-loader svg { display: block; flex: none; overflow: visible; }
.fo-route-loader--compact svg { width: 3.25rem; height: 3.25rem; }
.fo-route-loader--full { flex-direction: column; text-align: center; }
.fo-route-loader--full svg { width: 10rem; height: 10rem; }
.fo-route-loader__copy { display: grid; gap: .15rem; }
.fo-route-loader__copy strong { color: var(--fo-color-ink); font-size: .8125rem; font-weight: 650; }
.fo-route-loader__copy small { color: var(--fo-color-muted); font-size: .6875rem; }
.fo-route-loader__globe { fill: none; stroke: var(--fo-color-silver-blue); stroke-linecap: round; }
.fo-route-loader__globe circle { stroke-width: 1.8; }
.fo-route-loader__globe path { opacity: .55; stroke-width: 1.05; }
.fo-route-loader__orbit, .fo-route-loader__trace { fill: none; stroke: var(--fo-color-info); stroke-linecap: round; }
.fo-route-loader__orbit { stroke-width: 1.45; opacity: .3; }
.fo-route-loader__orbit--front { stroke-width: 1.9; opacity: 1; }
.fo-route-loader__trace { stroke-width: 2.15; stroke-dasharray: 24 76; filter: drop-shadow(0 0 2.5px rgba(0,151,199,.62)); }
.fo-route-loader__trace--back { opacity: .42; }
.fo-route-loader__chevron path { fill: none; stroke: #fff; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.fo-route-loader__chevron--back { opacity: .72; }
.fo-feedback-state__loader .fo-route-loader__copy { display: none; }
.fo-loading-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1rem; background: rgba(255,255,255,.88); backdrop-filter: blur(1px); }

.fo-skeleton { position: relative; overflow: hidden; color: transparent !important; background: #e7ecef !important; border-radius: .35rem; pointer-events: none; }
.fo-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); animation: fo-skeleton-shimmer 1.35s ease-in-out infinite; }
.fo-skeleton-line { display: block; width: 100%; min-height: .75rem; }
.fo-skeleton-line--short { width: 42%; }
.fo-skeleton-row td { height: 2.75rem; }
@keyframes fo-skeleton-shimmer { to { transform: translateX(100%); } }

.alert { display: flex; align-items: flex-start; gap: .6rem; border-width: 1px; box-shadow: none; }
.alert-success { color: var(--fo-color-success-ink); background: var(--fo-color-success-soft); border-color: #b8d9c6; }
.alert-danger { color: #8f3028; background: var(--fo-color-danger-soft); border-color: #e4b9b4; }
.alert-warning { color: var(--fo-color-warning-ink); background: var(--fo-color-warning-soft); border-color: #ead594; }
.invalid-feedback { margin-top: .3rem; color: var(--fo-color-danger); font-size: .75rem; font-weight: 550; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--fo-color-danger); background-color: #fffafa; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--fo-color-danger); box-shadow: 0 0 0 .2rem rgba(181,68,60,.14); }

.fo-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--fo-space-3);
}

.fo-pagination > :first-child { justify-self: start; }
.fo-pagination > :last-child { justify-self: end; }
.fo-pagination a,
.fo-pagination > .disabled { display: inline-flex; align-items: center; gap: var(--fo-space-2); min-height: var(--fo-control-height); }
.fo-pagination > .disabled { color: #9aa5ac; cursor: not-allowed; }
.fo-pagination__summary { color: var(--fo-color-muted); font-size: .8125rem; font-weight: 600; text-align: center; }

.fo-record-card { border-color: var(--fo-color-border); border-radius: var(--fo-radius-lg); background: var(--fo-color-surface); box-shadow: var(--fo-shadow-1); }

.fo-status--active { color: var(--fo-color-success); background: var(--fo-color-success-soft); }
.fo-status--scheduled { color: var(--fo-color-info); background: var(--fo-color-info-soft); }
.fo-status--opportunity, .fo-status--needs-attention, .fo-status--submitted {
  color: var(--fo-color-warning);
  background: var(--fo-color-warning-soft);
}
.fo-status--not-started, .fo-status--unavailable, .fo-status--inactive { color: var(--fo-color-muted); background: var(--fo-color-surface-subtle); }

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

.fo-page-shell {
  width: min(100%, var(--fo-page-max));
  margin-inline: auto;
  padding: clamp(var(--fo-space-4), 2.4vw, var(--fo-space-6));
  padding-bottom: calc(var(--fo-space-8) + env(safe-area-inset-bottom));
}

.table { --bs-table-color: var(--fo-color-ink); --bs-table-border-color: var(--fo-color-border); }
.table > :not(caption) > * > * { padding: .75rem; vertical-align: middle; }
.table.table.table > thead > tr > th { padding: .7rem .8rem; border-bottom: 1px solid #cfd9de; color: #687780; background: #f7f9fa; text-transform: uppercase; letter-spacing: .045em; font-size: .56rem; font-weight: 700; white-space: nowrap; }
.table.table.table > tbody > tr > td { border-bottom: 1px solid #d7e0e4; background: #fff; }
.table.table.table > tbody > tr:nth-child(even) > td { background: #f5f8f9; }
.table.table.table > tbody > tr:hover > td { background: #eaf2f5; }
.text-end, [data-numeric] { font-variant-numeric: tabular-nums; }
.fo-data-table-wrap { position: relative; max-width: 100%; background: var(--fo-color-surface); scrollbar-width: thin; scrollbar-color: #aebbc2 transparent; }
.fo-data-table { width: 100%; margin: 0; color: var(--fo-color-ink); font-size: .75rem; font-variant-numeric: tabular-nums; }
.fo-data-table > tbody > tr > td { padding: .7rem .8rem; vertical-align: middle; }
.fo-data-table .text-end { font-variant-numeric: tabular-nums; }
.fo-data-table .btn-group, .fo-data-table .row-actions { flex-wrap: nowrap; white-space: nowrap; }
.fo-data-table .btn-group .btn, .fo-data-table .row-action { box-shadow: none; }
.fo-data-table .empty-row td, .fo-data-table td[colspan] { white-space: normal; }

@media (min-width: 768px) and (max-width: 991.98px) {
  .fo-page-header { align-items: flex-start; flex-wrap: wrap; }
  .fo-page-header > :first-child { flex: 1 1 26rem; min-width: 0; }
  .fo-page-header__actions { flex: 1 1 auto; }
}

@media (max-width: 767.98px) {
  .fo-data-table-wrap { border-top: 1px solid var(--fo-color-border); border-bottom: 1px solid var(--fo-color-border); }
  .fo-data-table-wrap::after { content: 'Swipe to view more'; position: sticky; right: .55rem; bottom: .35rem; float: right; margin: .35rem .55rem; padding: .2rem .4rem; border-radius: 99px; color: #65757e; background: rgba(238,243,246,.94); font-size: .6rem; font-weight: 600; pointer-events: none; }
  .fo-data-table > thead > tr > th, .fo-data-table > tbody > tr > td { padding: .65rem .7rem; }
  body { font-size: .9375rem; }
  .form-control, .form-select { min-height: var(--fo-touch-target); font-size: 1rem; }
  .btn { min-height: var(--fo-touch-target); }
  .btn-icon, button[aria-label]:not(.btn-close):not(.sidebar-toggle):not(.mobile-nav-link) {
    min-width: var(--fo-touch-target);
  }
  .row-action, .fo-row-action { width: var(--fo-touch-target); height: var(--fo-touch-target); min-width: var(--fo-touch-target); }
  .password-toggle { min-height: var(--fo-touch-target); }
  .dropdown-item { min-height: var(--fo-touch-target); }
  .fo-page-header { align-items: stretch; flex-direction: column; }
  .fo-page-header__actions { justify-content: stretch; }
  .fo-page-header__actions > .btn { flex: 1 1 auto; }
  .fo-status-tabs { margin-inline: calc(var(--fo-space-4) * -1); padding-inline: var(--fo-space-4); }
  .fo-pagination { grid-template-columns: 1fr 1fr; }
  .fo-pagination__summary { grid-column: 1 / -1; grid-row: 1; }
  .page-container, .fo-page-shell { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

@media (pointer: coarse) {
  .sidebar-link, .sidebar-group-toggle, .dropdown-item, .mobile-nav-link, summary { min-height: var(--fo-touch-target); }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .fo-route-loader__trace, .fo-route-loader__chevron { display: none; }
  .fo-skeleton::after { display: none; }
}

@media print {
  :root { --fo-color-canvas: #fff; --fo-shadow-1: none; --fo-shadow-2: none; --fo-shadow-3: none; }
  body { color: #000; background: #fff; }
}