/* ==========================================================================
   Accessibility: Skip to Content Link (WCAG 2.4.1 Bypass Blocks)
   ========================================================================== */

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 99999;
}

.skip-to-content:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 1rem 1.5rem;
  background: var(--fs-accent);
  color: var(--fs-text-inverse);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  outline: 3px solid var(--fs-accent-hover);
  outline-offset: 2px;
}

.skip-to-content:focus:hover {
  background: var(--fs-accent-hover);
}

/* Main content focus state for skip link target */
#main-content:focus {
  outline: none;
}

/* ==========================================================================
   End Accessibility Styles
   ========================================================================== */

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid var(--fs-border-control);
}

.invalid {
  outline: 1px solid var(--fs-error);
}

.validation-message {
  color: var(--fs-error);
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: var(--fs-text-inverse);
}

.blazor-error-boundary::after {
  content: "We hit a snag";
}

.darker-border-checkbox.form-check-input {
  border-color: var(--fs-text-muted);
}

/* Reconnect dialog (App.razor). No display rule: a <dialog> is hidden until showModal() and shown until
   close(), whatever state class it carries. A rule keyed on those classes hid it while open, leaving the
   page inert, once paused or after the Resume button failed (#1620).

   The dim behind it is its ::backdrop, which otherwise keeps the browser's faint default. Before Safari
   17.4 / Chrome 122 a ::backdrop cannot see the page's variables, so it carries the light value as a
   fallback rather than no dim at all. */
#components-reconnect-modal::backdrop {
  background: var(--fs-backdrop, rgba(26, 26, 26, 0.34));
}

/* Snack Section Styling */
.snacks-section {
  border-top: 2px solid var(--fs-border-default);
  padding-top: 1.5rem;
}

.snacks-section .section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fs-text-secondary);
  margin-bottom: 0.75rem;
}

/* Apply special styling to snack meal cards */
.snacks-section .optimized-meal-card {
  background-color: var(--fs-bg-secondary);
  border: 1px solid var(--fs-border-default);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  box-shadow: none;
}

/* Compact header for snacks */
.snacks-section .optimized-meal-header {
  background-color: var(--fs-bg-secondary);
  padding: 0.625rem 0.875rem;
  min-height: auto;
}

.snacks-section .optimized-meal-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fs-text-secondary);
}

/* Smaller chevron icon for snacks */
.snacks-section .meal-chevron-icon {
  font-size: 0.75rem;
}

/* Compact macro display for snacks */
.snacks-section .optimized-meal-macros,
.snacks-section .optimized-meal-status {
  font-size: 0.813rem;
}

.snacks-section .macro-item {
  margin: 0 0.375rem;
}

.snacks-section .macro-label {
  font-size: 0.75rem;
  color: var(--fs-text-secondary);
}

/* Smaller buttons for snacks */
.snacks-section .btn-sm {
  font-size: 0.813rem;
  padding: 0.25rem 0.5rem;
}

/* Compact content area for snacks */
.snacks-section .optimized-meal-content {
  padding: 0.75rem;
  background-color: var(--fs-bg-primary);
}

.snacks-section .food-item {
  padding: 0.625rem 0;
}

/* Smaller input fields for snacks */
.snacks-section input.form-control-sm {
  font-size: 0.813rem;
  padding: 0.25rem 0.375rem;
  height: calc(1.5rem + 2px);
}

/* Pills/Chips style for snack items (alternative display) */
.snack-chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--fs-border-default);
  border: 1px solid var(--fs-border-default);
  border-radius: 1rem;
  padding: 0.375rem 0.75rem;
  margin: 0.25rem;
  font-size: 0.875rem;
  color: var(--fs-text-body);
  transition: all 0.2s ease;
}

.snack-chip:hover {
  background-color: var(--fs-border-default);
  border-color: var(--fs-border-hover);
}

.snack-chip .chip-calories {
  font-weight: 600;
  margin-left: 0.5rem;
  color: var(--fs-text-primary);
}

/* Add Snack Button - styled as a subtle action */
.snacks-section .btn-outline-primary {
  color: var(--fs-text-secondary);
  border-color: var(--fs-border-hover);
  background-color: transparent;
  font-size: 0.813rem;
  padding: 0.375rem 0.75rem;
  transition: all 0.2s ease;
}

.snacks-section .btn-outline-primary:hover {
  color: var(--fs-primary-text);
  background-color: var(--fs-bg-secondary);
  border-color: var(--fs-primary-text);
}

/* Empty snacks message */
.snacks-section .text-muted {
  font-size: 0.875rem;
  font-style: italic;
}

/* Mobile responsiveness for snacks */
@media (max-width: 576px) {
  .snacks-section .optimized-meal-header {
    padding: 0.5rem 0.75rem;
  }

  .snacks-section .optimized-meal-title {
    font-size: 0.875rem;
  }

  .snacks-section .btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.375rem;
  }

  .snacks-section .optimized-meal-content {
    padding: 0.625rem;
  }
}

/* Optional: Pill-style layout for snack foods */
.snack-foods-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.75rem;
}

.snack-food-pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--fs-bg-secondary);
  border: 1px solid var(--fs-border-default);
  border-radius: 1.25rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.813rem;
  color: var(--fs-text-primary);
  white-space: nowrap;
  max-width: 100%;
}

.snack-food-pill .food-name {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.5rem;
}

.snack-food-pill .food-calories {
  font-weight: 600;
  color: var(--fs-text-secondary);
  flex-shrink: 0;
}

/* ==========================================================================
   Sticky CTA Bottom Padding (Mobile)
   Prevents content from being hidden behind the sticky CTA bar
   ========================================================================== */

@media (max-width: 991px) {
  body {
    padding-bottom: 80px;
  }
}

/* ==========================================================================
   Section Title Styling
   ========================================================================== */

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fs-text-primary);
  margin-bottom: 1.25rem;
  margin-top: 0;
}

/* Orange "Custom" pill beside a custom food in the food-search dropdown. Global (not component-scoped)
   on purpose: the desktop dropdown is rendered by TomSelect into a body-level portal that scoped CSS
   can't reach, and the mobile options list uses the same class — one rule styles both. */
.ts-custom-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--fs-text-primary);
  background: var(--fs-bg-tertiary);
  border-radius: var(--fs-radius-pill, 9999px);
}

/* A state laid out but not shown (#1067, #1532): it keeps its box, so swapping states never changes a height.
   Visibility, never display: none, which would collapse the box. Shared by every landing screen. */
.stack-hidden {
  visibility: hidden;
}

/* A landing screen's title (#1532): two lines reserved, so a shorter line keeps every screen in its place; a third
   line (larger text, wider spacing) grows the box rather than being cut. Each screen sets its own place and desktop
   size. */
.landing-title {
  min-height: 56px;
  margin: 0;
  font-size: 24px;
  /* A screen sets the desktop design's tighter leading and tracking through these, never the properties. */
  line-height: var(--landing-title-leading, 1.15);
  font-weight: 700;
  letter-spacing: var(--landing-title-tracking, -0.015em);
  text-wrap: balance;
}

/* A landing screen's main button (#1532). Written as .btn.landing-cta: bootstrap.css loads after this file, and its
   .btn rule (which sets the size and weight) would win over a plain .landing-cta. */
.btn.landing-cta {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
}

/* From 992px (Claude Design "Landing Page Desktop"): the same button, larger. */
@media not all and (max-width: 991.98px) {
  .btn.landing-cta {
    min-height: 56px;
    font-size: 17px;
  }
}

/* Toasts on phones (#1763, Claude Design "Phone Width Fixes"). Blazored.Toast gives each toast a fixed
   20-30rem width and pins the container 2rem from one side (the center positions use left: 50% and a
   translate), so at 320px the left edge and icon were off-screen. Below 576px every position's container
   spans the screen with 12px gutters and the toast fills it; each position keeps its own top or bottom edge.
   These selectors outrank the library's scoped rules by specificity, whatever the load order ("body" plus the repeated class lifts the container over the library's one-class-plus-attribute rule). */
@media (max-width: 575.98px) {
  body .blazored-toast-container.blazored-toast-container {
    left: var(--fs-spacing-md);
    right: var(--fs-spacing-md);
    transform: none; /* the center positions' translate(-50%) would shift the spanned container */
    gap: var(--fs-spacing-sm);
    pointer-events: none; /* the full-width box must not catch taps between toasts */
  }

  body .blazored-toast-container:is(.position-topleft, .position-topright, .position-topcenter) {
    top: calc(var(--fs-spacing-md) + var(--fs-mobile-safe-area-top));
  }

  body .blazored-toast-container:is(.position-bottomleft, .position-bottomright, .position-bottomcenter) {
    bottom: calc(var(--fs-spacing-md) + var(--fs-mobile-safe-area-bottom));
  }

  /* The library's 1rem bottom margin would add to the edge gutter; the gap spaces toasts instead. */
  body .blazored-toast-container .blazored-toast {
    width: auto;
    margin-bottom: 0;
    pointer-events: auto;
  }

  /* A 44px tap area that borrows 12px of the toast's padding (the library's 1rem 1.25rem), so the toast
     does not grow; the top padding puts the X back on the first line, level with the icon. "flex-start"
     keeps it 44px tall instead of stretching down the edge of a multi-line toast. */
  body .blazored-toast-container .blazored-toast .blazored-toast-close {
    min-width: var(--fs-mobile-tap-target-sm);
    min-height: var(--fs-mobile-tap-target-sm);
    margin: calc(-1 * var(--fs-spacing-md)) calc(-1 * var(--fs-spacing-md)) calc(-1 * var(--fs-spacing-md)) 0;
    padding: var(--fs-spacing-md) 0 0;
    align-items: center;
    align-self: flex-start;
  }
}