/**
 * TherapyFlow accessibility foundation.
 * Behavioral/semantic affordances only; the approved visual system is unchanged.
 */

:root {
  --focus-ring-color: #0b6b63;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-offset-color: var(--bg-card, #fff);
  --accent-text: #0f766e;
  --success-text: #166534;
  --warning-text: #92400e;
  --danger-text: #b42318;
  --text-subtle-accessible: #6b7280;
  --text-muted: var(--text-subtle-accessible);
}

/* Bright status colors remain available for dots/fills; text uses AA-safe variants. */
.status-new { color: var(--accent-text); }
.status-success { color: var(--success-text); }
.status-warning { color: var(--warning-text); }
.status-danger { color: var(--danger-text); }
.status-neutral { color: var(--text-subtle-accessible); }

[data-theme="dark"],
body.dark-mode {
  --focus-ring-color: #5eead4;
  --focus-ring-offset-color: var(--bg-main, #1f2326);
  --accent-text: #5eead4;
  --success-text: #86efac;
  --warning-text: #fcd34d;
  --danger-text: #fca5a5;
  --text-subtle-accessible: #cbd5e1;
}

:where(
  a[href], button, input, select, textarea, summary,
  [role="button"], [role="link"], [role="tab"], [role="menuitem"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
  box-shadow: 0 0 0 1px var(--focus-ring-offset-color) !important;
}

.tf-skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: var(--tf-z-toast, 100070);
  max-width: calc(100vw - 16px);
  padding: 10px 16px;
  border: 2px solid var(--focus-ring-color);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #111827);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
  transition: transform var(--transition-fast, 150ms ease);
}

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

/* Reuse the existing mobile shell throughout its existing JS breakpoint. */
@media (max-width: 1024px) {
  body:not(.no-navbar) #appSidebar {
    display: none !important;
  }

  body:not(.no-navbar) .app-layout {
    padding-inline-start: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.no-navbar) .app-topbar {
    inset-inline: 0 !important;
    width: 100% !important;
  }

  .mobile-sidebar {
    position: fixed;
    inset-block-start: var(--topbar-height, 72px);
    width: min(80vw, 300px);
    height: calc(100dvh - var(--topbar-height, 72px));
    max-height: calc(100dvh - var(--topbar-height, 72px));
    display: flex !important;
    flex-direction: column;
    padding: 16px 20px 20px;
    background: var(--sidebar-bg);
    border-inline-start: 1px solid var(--sidebar-border);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: none;
    z-index: 1300;
  }

  html[dir="rtl"] .mobile-sidebar {
    inset-inline-end: 0;
    transform: translateX(100%);
  }

  html[dir="ltr"] .mobile-sidebar {
    inset-inline-start: 0;
    transform: translateX(-100%);
  }

  .mobile-sidebar.active {
    transform: translateX(0) !important;
    pointer-events: auto;
  }

  .mobile-bottom-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-bottom-bar .bottom-item,
  .mobile-bottom-bar .mobile-nav-link,
  .mobile-bottom-bar .bottom-nav-item {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 6px 2px;
    padding-bottom: 4px;
    border: 0;
    border-radius: var(--sidebar-item-radius, 12px);
    background: transparent;
    color: var(--sidebar-icon, #6e8489);
    font-family: inherit;
    font-size: 11px;
    text-decoration: none;
  }

  .mobile-bottom-bar .mobile-nav-link svg,
  .mobile-bottom-bar .bottom-nav-item svg {
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-bottom-bar .mobile-nav-link svg :is(path, circle, rect, line) {
    fill: none !important;
    stroke: currentColor !important;
  }

  .mobile-bottom-bar .bottom-nav-item svg circle {
    fill: currentColor !important;
    stroke: none !important;
  }

  .mobile-bottom-bar :is(.mobile-nav-link, .bottom-nav-item).active {
    background: var(--sidebar-active-bg, rgba(28, 181, 166, 0.08));
    color: var(--sidebar-text-active, #16383d);
    font-weight: 600;
  }

  .mobile-bottom-bar :is(.mobile-nav-link, .bottom-nav-item).active svg {
    color: var(--sidebar-icon-active, #1cb5a6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms linear;
    --transition-normal: 0.01ms linear;
    --transition-slow: 0.01ms linear;
  }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}