/* Fares Digital Hub v25 — shared layout, scrolling, safe-area and focus layer. */
:root {
  --v25-scroll-track: color-mix(in srgb, var(--surface, #111827) 76%, transparent);
  --v25-scroll-thumb: color-mix(in srgb, var(--accent, #32d583) 56%, #667085);
  --v25-scroll-thumb-hover: color-mix(in srgb, var(--accent, #32d583) 74%, #475467);
  --v25-anchor-offset: 112px;
}

html {
  min-block-size: 100%;
  scrollbar-gutter: stable;
  scrollbar-color: var(--v25-scroll-thumb) var(--v25-scroll-track);
  scrollbar-width: auto;
}

body {
  min-block-size: 100svh;
  min-block-size: 100dvh;
  padding-block-end: max(0px, env(safe-area-inset-bottom, 0px));
}

:where(html, body, dialog, textarea, pre, .admin-auth-card, .admin-mfa-card, .admin-recovery-dialog-panel, .share-dialog-panel, .feedback-dialog-panel, [class*="scroll"]) {
  scrollbar-color: var(--v25-scroll-thumb) var(--v25-scroll-track);
  scrollbar-width: auto;
}

:where(html, body, dialog, textarea, pre, .admin-auth-card, .admin-mfa-card, .admin-recovery-dialog-panel, .share-dialog-panel, .feedback-dialog-panel, [class*="scroll"])::-webkit-scrollbar {
  inline-size: 12px;
  block-size: 12px;
}

:where(html, body, dialog, textarea, pre, .admin-auth-card, .admin-mfa-card, .admin-recovery-dialog-panel, .share-dialog-panel, .feedback-dialog-panel, [class*="scroll"])::-webkit-scrollbar-track {
  background: var(--v25-scroll-track);
  border-radius: 999px;
}

:where(html, body, dialog, textarea, pre, .admin-auth-card, .admin-mfa-card, .admin-recovery-dialog-panel, .share-dialog-panel, .feedback-dialog-panel, [class*="scroll"])::-webkit-scrollbar-thumb {
  min-block-size: 44px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--v25-scroll-thumb);
  background-clip: padding-box;
}

:where(html, body, dialog, textarea, pre, .admin-auth-card, .admin-mfa-card, .admin-recovery-dialog-panel, .share-dialog-panel, .feedback-dialog-panel, [class*="scroll"])::-webkit-scrollbar-thumb:hover {
  background: var(--v25-scroll-thumb-hover);
  background-clip: padding-box;
}

:where(main, section[id], article[id], [data-anchor-target]) {
  scroll-margin-block-start: var(--v25-anchor-offset);
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #32d583) 72%, white);
  outline-offset: 3px;
}

:where(dialog[open]) {
  max-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
}

html[data-theme="light"] {
  --v25-scroll-track: rgba(15, 23, 42, 0.08);
  --v25-scroll-thumb: rgba(22, 101, 68, 0.64);
  --v25-scroll-thumb-hover: rgba(11, 84, 55, 0.82);
}

html[data-theme="light"] :where(.profile-card, .hero-visual) {
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] :where(.profile-card)::before {
  opacity: 0.5;
}

@media (max-width: 760px) {
  :root {
    --v25-anchor-offset: 86px;
  }

  body {
    padding-block-end: max(16px, env(safe-area-inset-bottom, 0px));
  }

  :where(dialog[open]) {
    max-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

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