/**
 * SeizeControl shared foundation
 * ------------------------------
 * Canonical primitives shared by public and authenticated SeizeControl pages.
 *
 * Intended load order:
 *   vendor styles -> tokens.css -> sc-base.css -> surface shell -> route styles
 *
 * Keep shell geometry and route-specific composition out of this file. The
 * compatibility selectors below intentionally match current EJS class names so
 * routes can move off the legacy themes without a simultaneous markup rewrite.
 */

/* Base canvas and type ----------------------------------------------------- */

html {
  /* Removes double-tap-to-zoom delay/zoom without blocking intentional scroll */
  touch-action: manipulation;
}

body.app-body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--fnd-text);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

/* Buttons/links: no double-tap zoom gesture */
body.app-body :where(a, button, input, select, textarea, label, summary, [role="button"]) {
  touch-action: manipulation;
}

body.app-public {
  font-size: var(--text-lg);
}

body.app-body,
body.app-body *,
body.app-body *::before,
body.app-body *::after {
  box-sizing: border-box;
}

body.app-body :where(img, svg, video, canvas) {
  max-width: 100%;
}

body.app-body :where(h1, h2, .page-title, .section-heading, .care-panel-title, .ov-card-title, .sc-panel__title) {
  color: var(--fnd-ink);
  font-family: var(--font-sans);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
}

body.app-body :where(h3, h4, h5, h6) {
  color: var(--fnd-ink);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
}

body.app-body :where(.page-title, .section-heading, .care-panel-title, .ov-card-title, .sc-panel__title) {
  margin: 0;
}

body.app-body :where(.page-title) {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
}

body.app-body :where(.section-heading) {
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
}

body.app-body :where(p, li, label, td, th, input, select, textarea, button) {
  font-family: inherit;
}

body.app-body :where(.section-copy, .page-subtitle, .care-panel-copy, .ov-card-sub, .sc-panel__copy, .care-muted, .text-muted, .form-text) {
  color: var(--fnd-muted);
  line-height: var(--leading-relaxed);
}

body.app-body :where(.page-kicker, .eyebrow, .care-panel-kicker, .ov-card-kicker, .sc-panel__kicker) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fnd-magenta);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.07em;
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

body.app-body a:not(.btn) {
  color: var(--fnd-magenta);
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

body.app-body a:not(.btn):hover {
  color: var(--fnd-navy);
}

body.app-body :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 3px;
}

/* Buttons ----------------------------------------------------------------- */

body.app-body :where(.btn, .care-action-btn, .panel-link) {
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-weight: var(--weight-extrabold);
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem var(--space-4);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

body.app-body :where(.btn, .care-action-btn, .panel-link):hover {
  transform: translateY(-1px);
}

body.app-body :where(.btn-primary, .care-action-btn-primary) {
  --bs-btn-bg: var(--fnd-magenta);
  --bs-btn-border-color: var(--fnd-magenta);
  --bs-btn-color: var(--fnd-white);
  --bs-btn-hover-bg: var(--fnd-navy);
  --bs-btn-hover-border-color: var(--fnd-navy);
  --bs-btn-hover-color: var(--fnd-white);
  --bs-btn-active-bg: var(--fnd-deep-navy);
  --bs-btn-active-border-color: var(--fnd-deep-navy);
  color: var(--fnd-white);
  border-color: var(--fnd-magenta);
  background: var(--fnd-magenta);
}

body.app-body :where(.btn-primary, .care-action-btn-primary):hover,
body.app-body :where(.btn-primary, .care-action-btn-primary):focus-visible {
  color: var(--fnd-white);
  border-color: var(--fnd-navy);
  background: var(--fnd-navy);
}

body.app-body :where(.btn-outline-primary, .care-action-btn-secondary, .panel-link) {
  --bs-btn-color: var(--fnd-magenta);
  --bs-btn-border-color: var(--fnd-magenta);
  --bs-btn-hover-bg: var(--fnd-navy);
  --bs-btn-hover-border-color: var(--fnd-navy);
  --bs-btn-hover-color: var(--fnd-white);
  color: var(--fnd-magenta);
  border-color: var(--fnd-magenta);
  background: var(--fnd-white);
}

body.app-body :where(.btn-outline-primary, .care-action-btn-secondary, .panel-link):hover,
body.app-body :where(.btn-outline-primary, .care-action-btn-secondary, .panel-link):focus-visible,
body.app-body .btn-check:checked + .btn-outline-primary {
  color: var(--fnd-white);
  border-color: var(--fnd-navy);
  background: var(--fnd-navy);
}

body.app-body .btn-outline-secondary {
  color: var(--fnd-navy);
  border-color: var(--fnd-border-strong);
  background: var(--fnd-white);
}

body.app-body .btn-outline-secondary:hover,
body.app-body .btn-outline-secondary:focus-visible {
  color: var(--fnd-navy);
  border-color: var(--fnd-navy);
  background: var(--fnd-blue-pale);
}

body.app-body :where(.btn-danger, .btn-outline-danger) {
  --bs-btn-color: var(--fnd-danger);
  --bs-btn-border-color: var(--fnd-danger);
  --bs-btn-hover-bg: var(--fnd-danger);
  --bs-btn-hover-border-color: var(--fnd-danger);
  --bs-btn-hover-color: var(--fnd-white);
  color: var(--fnd-danger);
  border-color: var(--fnd-danger);
  background: var(--fnd-white);
}

body.app-body .btn-danger,
body.app-body :where(.btn-danger, .btn-outline-danger):hover,
body.app-body :where(.btn-danger, .btn-outline-danger):focus-visible {
  color: var(--fnd-white);
  border-color: var(--fnd-danger);
  background: var(--fnd-danger);
}

body.app-body :where(.btn-light, .btn-outline-light) {
  color: var(--fnd-navy);
  border-color: var(--fnd-white);
  background: var(--fnd-white);
}

body.app-body :where(.btn-light, .btn-outline-light):hover,
body.app-body :where(.btn-light, .btn-outline-light):focus-visible {
  color: var(--fnd-navy);
  border-color: var(--fnd-white);
  background: var(--fnd-blue-pale);
}

body.app-body .btn-link {
  min-height: 44px;
  padding-inline: var(--space-2);
  border-color: transparent;
  color: var(--fnd-magenta);
  background: transparent;
  box-shadow: none;
}

body.app-body .btn-link:hover {
  color: var(--fnd-navy);
}

body.app-body .btn-sm {
  min-height: 40px;
  padding: 0.5rem var(--space-3);
  font-size: var(--text-sm);
}

body.app-body .btn-lg {
  min-height: 52px;
  padding-inline: var(--space-5);
  font-size: var(--text-base);
}

body.app-body :where(.btn, .care-action-btn, .panel-link):disabled,
body.app-body :where(.btn, .care-action-btn, .panel-link).disabled,
body.app-body fieldset:disabled :where(.btn, .care-action-btn, .panel-link) {
  opacity: 0.55;
  pointer-events: none;
  transform: none;
}

/* Fields ------------------------------------------------------------------ */

body.app-body .form-label {
  margin-bottom: var(--space-2);
  color: var(--fnd-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

body.app-body :where(.form-control, .form-select, .choices__inner, .awesomplete > input) {
  min-height: 48px;
  padding: 0.7rem var(--space-3);
  border: 1px solid var(--fnd-border-strong);
  border-radius: var(--radius-md);
  color: var(--fnd-ink);
  background-color: var(--fnd-white);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: max(16px, var(--text-base));
  line-height: var(--leading-normal);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

body.app-body :where(.form-control, .form-select, .choices__inner, .awesomplete > input):focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: 0;
}

body.app-body :where(.form-control, .form-select)::placeholder {
  color: var(--fnd-faint);
  opacity: 1;
}

body.app-body textarea.form-control {
  min-height: 8rem;
  resize: vertical;
}

body.app-body :where(.form-control, .form-select):disabled,
body.app-body :where(.form-control, .form-select)[readonly] {
  color: var(--ink-disabled);
  border-color: var(--fnd-border);
  background: var(--surface-muted);
  cursor: not-allowed;
  opacity: 1;
}

body.app-body :where(.form-check-input, input[type='checkbox'], input[type='radio']) {
  accent-color: var(--fnd-magenta);
}

body.app-body .form-check-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

body.app-body :where(.form-control, .form-select).is-invalid,
body.app-body :where(.form-control, .form-select)[aria-invalid='true'] {
  border-color: var(--fnd-danger);
}

body.app-body :where(.form-control, .form-select).is-valid {
  border-color: var(--fnd-success);
}

/* Panels and content groups ------------------------------------------------ */

body.app-body :where(.sc-panel, .surface-card, .care-panel, .ov-card, .summary-card, .subsection-card, .auth-panel, .auth-aside) {
  min-width: 0;
  border: 1px solid var(--fnd-border);
  border-radius: var(--radius-lg);
  color: var(--fnd-text);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

body.app-body :where(.sc-panel, .surface-card, .care-panel, .ov-card, .summary-card, .subsection-card, .auth-panel, .auth-aside) {
  padding: var(--space-5);
}

body.app-body :where(.surface-card.soft, .care-panel.soft, .sc-panel--soft) {
  background: var(--surface-alt);
}

body.app-body :where(.surface-card.dark, .care-panel.dark, .sc-panel--dark) {
  color: rgba(255, 255, 255, 0.9);
  border-color: var(--rail-border);
  background: var(--fnd-deep-navy);
}

body.app-body :where(.surface-card.dark, .care-panel.dark, .sc-panel--dark) :where(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--fnd-white);
}

body.app-body :where(.surface-card.dark, .care-panel.dark, .sc-panel--dark) :where(p, li, span) {
  color: inherit;
}

body.app-body :where(.care-panel-head, .ov-card-head, .sc-panel__head) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

body.app-body :where(.care-panel-title, .ov-card-title, .sc-panel__title) {
  font-size: var(--text-lg);
}

body.app-body :where(.care-panel-copy, .ov-card-sub, .sc-panel__copy) {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

body.app-body :where(.panel-link, .ov-card-link, .sc-panel__link) {
  font-weight: var(--weight-bold);
}

/* Alerts, status and empty states ----------------------------------------- */

body.app-body :where(.alert, .care-alert, .status-message, .auth-status) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--fnd-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  color: var(--fnd-text);
  background: var(--surface);
  box-shadow: none;
}

body.app-body :where(.alert-info, .care-alert-info, .status-message.is-info) {
  border-color: color-mix(in srgb, var(--fnd-info) 32%, var(--fnd-border));
  border-left-color: var(--fnd-info);
  color: var(--fnd-info);
  background: var(--fnd-info-bg);
}

body.app-body :where(.alert-success, .care-alert-success, .status-message.is-success) {
  border-color: color-mix(in srgb, var(--fnd-success) 32%, var(--fnd-border));
  border-left-color: var(--fnd-success);
  color: var(--fnd-success);
  background: var(--fnd-success-bg);
}

body.app-body :where(.alert-warning, .care-alert-warning, .status-message.is-warning) {
  border-color: color-mix(in srgb, var(--fnd-warning) 32%, var(--fnd-border));
  border-left-color: var(--fnd-warning);
  color: var(--fnd-warning);
  background: var(--fnd-warning-bg);
}

body.app-body :where(.alert-danger, .care-alert-danger, .status-message.is-danger) {
  border-color: color-mix(in srgb, var(--fnd-danger) 32%, var(--fnd-border));
  border-left-color: var(--fnd-danger);
  color: var(--fnd-danger);
  background: var(--fnd-danger-bg);
}

body.app-body :where(.badge, .table-tag, .context-chip, .hero-tag, .status-chip, .ov-tag, .sc-status-chip) {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--fnd-border);
  border-radius: var(--radius-pill);
  color: var(--fnd-navy);
  background: var(--surface-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  white-space: normal;
}

body.app-body :where(.badge.text-bg-success, .badge.bg-success, .badge.is-success, .status-chip.is-success) {
  border-color: color-mix(in srgb, var(--fnd-success) 32%, var(--fnd-border));
  color: var(--fnd-success);
  background: var(--fnd-success-bg);
}

body.app-body :where(.badge.text-bg-warning, .badge.bg-warning, .badge.is-warning, .status-chip.is-warning) {
  border-color: color-mix(in srgb, var(--fnd-warning) 32%, var(--fnd-border));
  color: var(--fnd-warning);
  background: var(--fnd-warning-bg);
}

body.app-body :where(.badge.text-bg-danger, .badge.bg-danger, .badge.is-danger, .status-chip.is-danger) {
  border-color: color-mix(in srgb, var(--fnd-danger) 32%, var(--fnd-border));
  color: var(--fnd-danger);
  background: var(--fnd-danger-bg);
}

body.app-body :where(.badge.text-bg-secondary, .badge.bg-secondary, .badge.bg-light, .badge.is-neutral, .status-chip.is-neutral) {
  border-color: var(--fnd-border);
  color: var(--fnd-muted);
  background: var(--surface-muted);
}

body.app-body :where(.empty-state, .today-empty, .sc-empty-state) {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px dashed var(--fnd-border-strong);
  border-radius: var(--radius-md);
  color: var(--fnd-muted);
  background: var(--surface-alt);
  text-align: center;
}

body.app-body :where(.empty-state, .today-empty, .sc-empty-state) > :last-child {
  margin-bottom: 0;
}

/* Data tables ------------------------------------------------------------- */

body.app-body .table-responsive {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

body.app-body .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--fnd-text);
  --bs-table-border-color: var(--fnd-border);
  width: 100%;
  margin: 0;
  color: var(--fnd-text);
  border-color: var(--fnd-border);
  vertical-align: middle;
}

body.app-body .table caption {
  padding: var(--space-3) 0;
  color: var(--fnd-muted);
  font-size: var(--text-sm);
  text-align: left;
}

body.app-body .table :where(th, td) {
  padding: 0.75rem var(--space-3);
  border-bottom-color: var(--fnd-border);
}

body.app-body .table thead th {
  color: var(--fnd-muted);
  background: var(--surface-alt);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.app-body .table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--fnd-blue-pale);
  color: var(--fnd-ink);
}

body.app-body :where(.table-action-row, .sc-table-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Bootstrap and native dialogs ------------------------------------------- */

/* When modals are re-homed to <body> (soft-nav stacking fix), keep them above
   the mobile dock, product tour (1090), toasts (1080) and the Bootstrap
   backdrop. Inline styles from SeizeControlModals.forceStacking reinforce this. */
body > .modal,
body > .modal.show {
  z-index: 12050 !important;
  pointer-events: auto !important;
}

body > .modal-backdrop,
body > .modal-backdrop.show {
  z-index: 12040 !important;
}

body > .modal .modal-content,
body > .modal .care-modal-content {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  opacity: 1;
  background: #fff;
}

body.app-body :where(.modal-content, .care-modal, dialog.sc-dialog) {
  border: 1px solid var(--fnd-border);
  border-radius: var(--radius-lg);
  color: var(--fnd-text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

body.app-body dialog.sc-dialog {
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100svh - 2rem);
  padding: 0;
  overflow: auto;
}

body.app-body dialog.sc-dialog::backdrop {
  background: rgba(0, 26, 59, 0.58);
  backdrop-filter: blur(2px);
}

body.app-body :where(.modal-header, .care-modal-header) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--fnd-border);
}

body.app-body :where(.modal-body, .care-modal-body) {
  padding: var(--space-5);
}

body.app-body :where(.modal-footer, .care-modal-footer) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--fnd-border);
}

body.app-body .modal-title {
  margin: 0;
  color: var(--fnd-ink);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
}

body.app-body .btn-close:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 3px;
  box-shadow: none;
}

/* Small-screen and motion safeguards ------------------------------------- */

@media (max-width: 575.98px) {
  body.app-public {
    font-size: var(--text-base);
  }

  body.app-body :where(.sc-panel, .surface-card, .care-panel, .ov-card, .summary-card, .subsection-card, .auth-panel, .auth-aside) {
    padding: var(--space-4);
  }

  body.app-body :where(.modal-header, .modal-body, .care-modal-header, .care-modal-body) {
    padding: var(--space-4);
  }

  body.app-body :where(.modal-footer, .care-modal-footer) {
    padding: var(--space-3) var(--space-4);
  }
}

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