/* Fitness Paws brand foundation: shared tokens and restrained global defaults. */
:root {
  --fp-forest-900: #123b34;
  --fp-forest-800: #115347;
  --fp-forest-700: #176b5b;
  --fp-forest-600: #23806e;
  --fp-lime-400: #b7db6e;
  --fp-coral-500: #ed765e;
  --fp-mint-100: #ddf3ed;
  --fp-sand-50: #fbf9f3;
  --fp-white: #ffffff;
  --fp-ink-900: #17231f;
  --fp-ink-600: #53645e;
  --fp-line-200: #d7e2de;
  --fp-danger-600: #b83b3b;

  --fp-radius-sm: 0.5rem;
  --fp-radius-md: 0.875rem;
  --fp-radius-lg: 1.25rem;
  --fp-radius-pill: 999px;
  --fp-shadow-card: 0 0.5rem 1.5rem rgb(18 59 52 / 0.1);
  --fp-focus-ring: 0 0 0 0.25rem rgb(183 219 110 / 0.5);

  --bs-primary: var(--fp-forest-700);
  --bs-primary-rgb: 23, 107, 91;
  --bs-link-color: var(--fp-forest-700);
  --bs-link-hover-color: var(--fp-forest-800);
  --bs-focus-ring-color: rgb(183 219 110 / 0.5);
}

body {
  color: var(--fp-ink-900);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

/* Shared engagement counters: icon-first controls with iOS-style badges. */
.fp-engagement-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0;
}

.fp-count-action {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  color: var(--fp-forest-700);
  border: 1px solid var(--fp-line-200);
  border-radius: 50%;
  background: var(--fp-white);
  box-shadow: 0 0.2rem 0.65rem rgb(18 59 52 / 0.1);
  text-decoration: none !important;
  line-height: 1;
  vertical-align: middle;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.fp-count-action:hover {
  color: var(--fp-forest-900);
  border-color: #a9c8c0;
  background: var(--fp-mint-100);
  transform: translateY(-1px);
}

.fp-count-action:focus-visible {
  color: var(--fp-forest-900);
  outline: 0;
  box-shadow: var(--fp-focus-ring), 0 0.2rem 0.65rem rgb(18 59 52 / 0.1);
}

.fp-count-action > .bi {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1;
}

.fp-engagement-badge {
  position: absolute !important;
  top: -0.42rem !important;
  right: -0.45rem !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.25rem;
  color: #fff !important;
  border: 2px solid var(--fp-white);
  border-radius: var(--fp-radius-pill) !important;
  background: #dc3545 !important;
  box-shadow: 0 0.15rem 0.35rem rgb(116 25 32 / 0.28);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  transform: none !important;
  box-sizing: border-box;
  white-space: nowrap;
  pointer-events: none;
}

/* Reset the legacy bottom-left overlay and keep reaction summaries in flow. */
.reaction-counts,
.reaction-counts.small {
  position: static;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
}

.reaction-emoji-container.fp-reaction-badge,
.reaction-pill.fp-reaction-badge,
.fp-count-stat {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 2.05rem;
  height: 2.05rem;
  min-width: 2.05rem;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--fp-ink-900);
  border: 1px solid var(--fp-line-200);
  border-radius: 50% !important;
  background: var(--fp-white);
  box-shadow: 0 0.16rem 0.5rem rgb(18 59 52 / 0.1);
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
  transform: none !important;
  overflow: visible;
}

.fp-reaction-badge > .reaction-symbol,
.fp-reaction-badge > .fp-reaction-symbol,
.fp-count-stat > .bi {
  display: inline-grid;
  place-items: center;
  margin: 0;
  line-height: 1;
}

.fp-count-stat > .bi {
  color: var(--fp-forest-700);
  font-size: 1rem;
}

.reaction-empty {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.65rem;
  color: var(--fp-ink-600);
  border: 1px solid var(--fp-line-200);
  border-radius: var(--fp-radius-pill);
  background: var(--fp-white);
  font-size: 0.82rem;
  line-height: 1;
}

[data-bs-theme="dark"] .fp-count-action,
[data-bs-theme="dark"] .reaction-emoji-container.fp-reaction-badge,
[data-bs-theme="dark"] .reaction-pill.fp-reaction-badge,
[data-bs-theme="dark"] .fp-count-stat,
[data-bs-theme="dark"] .reaction-empty {
  color: #e5f2ee;
  border-color: #3b5148;
  background: #173f37;
}

[data-bs-theme="dark"] .fp-count-action:hover {
  color: #a1e5d7;
  border-color: #4b7d70;
  background: #205348;
}

[data-bs-theme="dark"] .fp-engagement-badge {
  border-color: #173f37;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: "Nunito Sans", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
}

.navbar.fp-navbar,
.navbar.navbar-dark.bg-dark {
  background: var(--fp-forest-900) !important;
}

.fp-brand-mark {
  display: block;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
}

.navbar-brand {
  font-weight: 800;
  letter-spacing: -0.015em;
}

.fp-site-footer {
  background: var(--fp-forest-900);
}

/* Shared branded off-canvas navigation for standalone and base templates. */
.fp-more-drawer {
  border-right: 0;
}

.fp-more-header {
  border-bottom: 1px solid var(--fp-line-200);
  background: linear-gradient(135deg, var(--fp-mint-100), var(--fp-white));
}

.fp-drawer-kicker,
.fp-drawer-section-title {
  color: var(--fp-forest-700);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fp-drawer-section-title {
  padding: 0.9rem 1rem 0.35rem;
}

.fp-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.75rem 0.75rem;
}

.fp-drawer-link,
.fp-sub-link,
.fp-drawer-footer-link {
  color: var(--fp-ink-900);
  text-decoration: none;
}

.fp-drawer-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--fp-line-200);
  border-radius: var(--fp-radius-md);
  background: var(--fp-sand-50);
  font-weight: 700;
}

.fp-drawer-link i {
  width: 1.375rem;
  color: var(--fp-forest-700);
  font-size: 1.05rem;
}

.fp-drawer-link:hover,
.fp-brand-drawer .accordion-button:not(.collapsed),
.fp-drawer-accordion .accordion-button:not(.collapsed) {
  color: var(--fp-forest-700);
  background: var(--fp-mint-100);
}

.fp-brand-drawer,
.fp-drawer-accordion {
  border-top: 1px solid var(--fp-line-200);
}

.fp-brand-drawer .accordion-button,
.fp-drawer-accordion .accordion-button {
  padding: 0.9rem 1rem;
  color: var(--fp-ink-900);
  background: var(--fp-white);
  box-shadow: none;
  font-weight: 800;
}

.fp-brand-drawer .accordion-body,
.fp-drawer-accordion .accordion-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.25rem 0.95rem 0.85rem 2.75rem;
}

.fp-sub-link {
  display: block;
  padding: 0.35rem 0;
  font-weight: 650;
}

.fp-sub-link:hover {
  color: var(--fp-forest-700);
}

.fp-sub-muted {
  color: var(--fp-ink-600);
  font-size: 0.9rem;
}

.fp-drawer-footer {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--fp-line-200);
}

.fp-drawer-footer-link {
  font-size: 0.92rem;
  font-weight: 750;
}

.fp-appearance-option {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--fp-line-200);
  border-radius: var(--fp-radius-md);
  color: var(--fp-ink-900);
  background: var(--fp-white);
  text-align: left;
  font-weight: 700;
}

.fp-appearance-option:hover,
.fp-appearance-option.active {
  color: var(--fp-forest-700);
  border-color: var(--fp-forest-700);
  background: var(--fp-mint-100);
}

[data-bs-theme="dark"] .fp-more-header,
[data-bs-theme="dark"] .fp-brand-drawer .accordion-button,
[data-bs-theme="dark"] .fp-drawer-accordion .accordion-button,
[data-bs-theme="dark"] .fp-drawer-link {
  color: #e5f2ee;
  border-color: #315149;
  background: #173f37;
}

[data-bs-theme="dark"] .fp-brand-drawer .accordion-button:not(.collapsed),
[data-bs-theme="dark"] .fp-drawer-accordion .accordion-button:not(.collapsed),
[data-bs-theme="dark"] .fp-drawer-link:hover {
  color: #a1e5d7;
  background: #205348;
}

[data-bs-theme="dark"] .fp-sub-link,
[data-bs-theme="dark"] .fp-drawer-footer-link,
[data-bs-theme="dark"] .fp-appearance-option {
  color: #e5f2ee;
  border-color: #315149;
  background: #173f37;
}

[data-bs-theme="dark"] .fp-brand-drawer,
[data-bs-theme="dark"] .fp-drawer-accordion,
[data-bs-theme="dark"] .fp-drawer-footer {
  border-color: #315149;
}

[data-bs-theme="dark"] .fp-appearance-option:hover,
[data-bs-theme="dark"] .fp-appearance-option.active {
  color: #a1e5d7;
  background: #205348;
}

/* Standalone feature pages do not inherit a shared application shell. */
.fp-swipe-page,
.fp-tracker-page {
  background: var(--fp-sand-50);
}

.fp-swipe-page .stage {
  background:
    radial-gradient(circle at 50% 0%, var(--fp-mint-100) 0, transparent 24rem),
    var(--fp-sand-50);
}

.fp-swipe-page .fp-card,
.fp-tracker-page .tracker-card {
  border-color: var(--fp-line-200);
  box-shadow: var(--fp-shadow-card);
}

.fp-tracker-page .tracker-shell {
  position: relative;
}

.fp-tracker-page .tracker-hero {
  border-color: var(--fp-line-200);
  background: linear-gradient(180deg, var(--fp-white), var(--fp-mint-100));
}

.fp-tracker-page .tracker-title,
.fp-tracker-page .metric-value,
.fp-tracker-page .completion-title,
.fp-tracker-page .completion-stat-value {
  color: var(--fp-ink-900);
}

.fp-tracker-page .tracker-subtitle,
.fp-tracker-page .metric-label,
.fp-tracker-page .completion-subtitle,
.fp-tracker-page .completion-note,
.fp-tracker-page .completion-stat-label {
  color: var(--fp-ink-600);
}

.fp-tracker-page .metric-pill,
.fp-tracker-page #output,
.fp-tracker-page .completion-stat {
  border-color: var(--fp-line-200);
  background: var(--fp-sand-50);
}

.fp-tracker-page .completion-glow {
  background: radial-gradient(circle, rgb(183 219 110 / 0.3), transparent 65%);
}

.fp-tracker-page .completion-badge {
  color: var(--fp-forest-700);
  border-color: #b9ddd3;
  background: linear-gradient(135deg, var(--fp-mint-100), var(--fp-white));
  box-shadow: 0 0.625rem 1.875rem rgb(23 107 91 / 0.15);
}

.page-view-activity {
  background:
    radial-gradient(circle at 50% 0%, var(--fp-mint-100) 0, transparent 28rem),
    var(--fp-sand-50) !important;
}

.page-view-activity .cardish,
.page-view-activity .fp-activity-view-card,
.page-view-activity .fp-edit-shell {
  border-color: var(--fp-line-200);
  box-shadow: var(--fp-shadow-card);
}

.page-view-activity .fp-owner-command-card,
.page-view-activity .fp-edit-shell {
  background: linear-gradient(135deg, var(--fp-white), var(--fp-mint-100));
}

.page-view-activity .fp-owner-kicker,
.page-view-activity .fp-kebab-btn:hover,
.page-view-activity .fp-kebab-btn:focus,
.page-view-activity .fp-owner-menu .dropdown-item:hover {
  color: var(--fp-forest-700);
}

.page-view-activity .fp-kebab-btn:hover,
.page-view-activity .fp-kebab-btn:focus,
.page-view-activity .fp-owner-menu .dropdown-item:hover {
  background: var(--fp-mint-100);
  border-color: #b9ddd3;
}

.fp-swipe-page .fp-drawer-kicker,
.fp-swipe-page .fp-drawer-link i {
  color: var(--fp-forest-700);
}

.fp-swipe-page .fp-drawer-link:hover,
.fp-swipe-page .fp-drawer-accordion .accordion-button:not(.collapsed) {
  color: var(--fp-forest-700);
  background: var(--fp-mint-100);
}

.fp-swipe-page .fp-appearance-option.active {
  border-color: var(--fp-forest-700);
  box-shadow: 0 0 0 0.2rem rgb(23 107 91 / 0.15);
}

.btn-primary {
  --bs-btn-bg: var(--fp-forest-700);
  --bs-btn-border-color: var(--fp-forest-700);
  --bs-btn-hover-bg: var(--fp-forest-800);
  --bs-btn-hover-border-color: var(--fp-forest-800);
  --bs-btn-active-bg: var(--fp-forest-900);
  --bs-btn-active-border-color: var(--fp-forest-900);
  --bs-btn-disabled-bg: var(--fp-forest-700);
  --bs-btn-disabled-border-color: var(--fp-forest-700);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fp-forest-900);
  outline-offset: 2px;
  box-shadow: var(--fp-focus-ring);
}

::selection {
  color: var(--fp-forest-900);
  background: var(--fp-lime-400);
}

[data-bs-theme="dark"] {
  --bs-primary: #67c9b5;
  --bs-primary-rgb: 103, 201, 181;
  --bs-link-color: #75d6c2;
  --bs-link-hover-color: #a1e5d7;
}

/* Shared card action overflow menu. */
.fp-owner-actions {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
}

.fp-owner-actions-absolute {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
}

.fp-owner-actions-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid #e2e6e4;
  border-radius: 50% !important;
  color: #161a19;
  background: #fff;
  box-shadow: 0 0.35rem 1rem rgb(20 68 56 / 0.09);
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.fp-owner-actions-toggle:hover,
.fp-owner-actions-toggle[aria-expanded="true"] {
  color: #111;
  background: #fff;
  border-color: #cbd3d0;
  transform: translateY(-1px);
}

.fp-owner-actions-toggle--compact {
  width: 2.35rem;
  height: 2.35rem;
}

.fp-owner-actions-toggle .bi {
  font-size: 1.15rem;
  line-height: 1;
}

.fp-owner-actions-menu {
  min-width: 13.25rem;
  padding: 0.45rem;
  border: 1px solid #dce9e3;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.25rem rgb(20 68 56 / 0.16);
}

.fp-owner-actions-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: 0.7rem;
  font-weight: 700;
  background: transparent;
}

.fp-owner-actions-menu .dropdown-item .bi {
  width: 1.15rem;
  text-align: center;
}

.fp-owner-actions-menu .dropdown-item:hover,
.fp-owner-actions-menu .dropdown-item:focus {
  color: var(--fp-forest-900);
  background: var(--fp-mint-100);
}

.fp-owner-actions-menu .dropdown-item.text-danger:hover,
.fp-owner-actions-menu .dropdown-item.text-danger:focus {
  color: #b4232f !important;
  background: #fff0f1;
}

.fp-owner-actions-menu form {
  margin: 0;
}

.fp-owner-actions-menu .dropdown-divider {
  margin: 0.35rem 0;
}

@media (max-width: 575.98px) {
  .fp-owner-actions-absolute {
    top: 0.65rem;
    right: 0.65rem;
  }

  .fp-owner-actions-toggle {
    width: 2.4rem;
    height: 2.4rem;
  }
}

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