/* Admin v2 fonts */
@font-face {
  font-family: "HeSimplSans";
  src: url("/static/fonts/HeSimplSans-VF.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/Barlow-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/Barlow-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Scoped reset */
body[data-app="admin"],
body[data-app="admin"] *,
body[data-app="admin"] *::before,
body[data-app="admin"] *::after {
  box-sizing: border-box;
}

body[data-app="admin"] {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  background: var(--adm-canvas);
  color: var(--adm-fg);
  font-family: var(--adm-font-sans);
  font-size: var(--adm-font-size-md);
  font-weight: var(--adm-weight-regular);
  line-height: var(--adm-line-normal);
  letter-spacing: 0;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-app="admin"] :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd) {
  margin: 0;
}

body[data-app="admin"] :where(ol, ul) {
  margin-block: 0;
  padding-inline-start: 1.25rem;
}

body[data-app="admin"] :where(ul[role="list"], ol[role="list"]) {
  padding: 0;
  list-style: none;
}

body[data-app="admin"] :where(img, picture, svg, canvas, video) {
  display: block;
  max-width: 100%;
}

body[data-app="admin"] :where(img, svg) {
  height: auto;
}

body[data-app="admin"] :where(button, input, select, textarea) {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

body[data-app="admin"] :where(button, [type="button"], [type="reset"], [type="submit"]) {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
}

body[data-app="admin"] :where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body[data-app="admin"] :where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

body[data-app="admin"] :where(a) {
  color: inherit;
  text-decoration: none;
}

body[data-app="admin"] :where(abbr[title]) {
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
  cursor: help;
}

body[data-app="admin"] :where(hr) {
  height: 1px;
  margin: var(--adm-space-6) 0;
  border: 0;
  background: var(--adm-border);
}

body[data-app="admin"] ::selection {
  background: var(--adm-accent);
  color: var(--adm-accent-fg);
}

/* Typography */
body[data-app="admin"] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--adm-fg);
  font-family: var(--adm-font-sans);
  font-weight: var(--adm-weight-bold);
  line-height: var(--adm-line-tight);
  letter-spacing: 0;
  text-wrap: balance;
}

body[data-app="admin"] h1 {
  font-size: var(--adm-font-size-3xl);
}

body[data-app="admin"] h2 {
  font-size: var(--adm-font-size-2xl);
}

body[data-app="admin"] h3 {
  font-size: var(--adm-font-size-xl);
}

body[data-app="admin"] h4 {
  font-size: var(--adm-font-size-lg);
}

body[data-app="admin"] :where(h5, h6) {
  font-size: var(--adm-font-size-md);
}

body[data-app="admin"] :where(p) {
  line-height: var(--adm-line-relaxed);
}

body[data-app="admin"] :where(strong, b) {
  font-weight: var(--adm-weight-bold);
}

body[data-app="admin"] :where(small) {
  font-size: var(--adm-font-size-xs);
}

body[data-app="admin"] :where(code, kbd, samp, pre) {
  font-family: var(--adm-font-mono);
  font-size: 0.92em;
}

body[data-app="admin"] :where(kbd) {
  padding: 0.1em 0.35em;
  border: 1px solid var(--adm-border-strong);
  border-radius: var(--adm-radius-sm);
  background: var(--adm-surface-raised);
  box-shadow: inset 0 -1px 0 var(--adm-border-strong);
}

body[data-app="admin"] :where(pre) {
  max-width: 100%;
  overflow: auto;
  white-space: pre;
}

body[data-app="admin"] :where(.admin-text-link) {
  color: var(--adm-fg);
  text-decoration: underline;
  text-decoration-color: var(--adm-border-interactive);
  text-underline-offset: 0.2em;
}

body[data-app="admin"] :where(.admin-text-link):hover {
  text-decoration-color: currentColor;
}

/* Focus and interaction */
body[data-app="admin"] :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--adm-focus);
  outline-offset: 2px;
}

body[data-app="admin"] :where(button, input, select, textarea):disabled,
body[data-app="admin"] :where([aria-disabled="true"]) {
  cursor: not-allowed;
}

body[data-app="admin"] :where([aria-busy="true"]) {
  cursor: progress;
}

/* Form controls */
body[data-app="admin"] :where(label, legend) {
  color: var(--adm-fg-muted);
  font-size: var(--adm-font-size-sm);
  font-weight: var(--adm-weight-semibold);
}

body[data-app="admin"] :where(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea,
  select
) {
  width: 100%;
  min-height: var(--adm-control-height);
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-md);
  outline: 0;
  background-color: var(--adm-control);
  color: var(--adm-fg);
  box-shadow: none;
  transition:
    background-color var(--adm-duration-fast) var(--adm-ease-standard),
    border-color var(--adm-duration-fast) var(--adm-ease-standard),
    box-shadow var(--adm-duration-fast) var(--adm-ease-standard);
}

body[data-app="admin"] :where(textarea) {
  min-height: 6rem;
  line-height: var(--adm-line-normal);
  resize: vertical;
}

body[data-app="admin"] :where(select) {
  appearance: none;
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--adm-fg-muted) 50%),
    linear-gradient(135deg, var(--adm-fg-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) 50%,
    calc(100% - 0.6875rem) 50%;
  background-repeat: no-repeat;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  cursor: pointer;
}

body[data-app="admin"] :where(select[multiple], select[size]:not([size="1"])) {
  min-height: 7rem;
  padding-right: 0.75rem;
  background-image: none;
}

body[data-app="admin"] :where(select option) {
  background: var(--adm-surface-raised);
  color: var(--adm-fg);
}

body[data-app="admin"] :where(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea,
  select
):hover:not(:disabled):not([readonly]) {
  border-color: var(--adm-border-strong);
  background-color: var(--adm-control-hover);
}

body[data-app="admin"] :where(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea,
  select
):focus-visible {
  border-color: var(--adm-focus);
  outline: 0;
  box-shadow: 0 0 0 3px var(--adm-focus-ring);
}

body[data-app="admin"] :where(input, textarea)::placeholder {
  color: var(--adm-fg-subtle);
  opacity: 1;
}

body[data-app="admin"] :where(input, textarea, select):disabled {
  border-color: var(--adm-border);
  background-color: var(--adm-canvas-subtle);
  color: var(--adm-fg-disabled);
  opacity: 1;
}

body[data-app="admin"] :where(input, textarea)[readonly] {
  background-color: var(--adm-canvas-subtle);
  color: var(--adm-fg-muted);
}

body[data-app="admin"] :where(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--adm-danger-border);
}

body[data-app="admin"] :where(input, textarea, select)[aria-invalid="true"]:focus-visible {
  border-color: var(--adm-danger-fg);
  box-shadow: 0 0 0 3px rgba(255, 123, 123, 0.18);
}

body[data-app="admin"] :where(input[type="search"]) {
  appearance: none;
}

body[data-app="admin"] :where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--adm-accent);
  cursor: pointer;
}

body[data-app="admin"] :where(input[type="checkbox"], input[type="radio"]):disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

body[data-app="admin"] :where(input[type="file"]) {
  width: 100%;
  color: var(--adm-fg-muted);
  font-size: var(--adm-font-size-sm);
}

body[data-app="admin"] :where(input[type="file"])::file-selector-button {
  min-height: var(--adm-control-height-sm);
  margin-right: var(--adm-space-3);
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-md);
  background: var(--adm-surface-raised);
  color: var(--adm-fg);
  font: inherit;
  cursor: pointer;
}

body[data-app="admin"] :where(input[type="file"])::file-selector-button:hover {
  border-color: var(--adm-border-strong);
  background: var(--adm-surface-hover);
}

body[data-app="admin"] .admin-field {
  display: grid;
  gap: var(--adm-space-2);
}

body[data-app="admin"] .admin-field-hint {
  color: var(--adm-fg-subtle);
  font-size: var(--adm-font-size-xs);
  line-height: var(--adm-line-normal);
}

body[data-app="admin"] .admin-field-error {
  color: var(--adm-danger-fg);
  font-size: var(--adm-font-size-xs);
  line-height: var(--adm-line-normal);
}

/* Button primitive */
body[data-app="admin"] .admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--adm-space-2);
  min-height: var(--adm-control-height);
  padding: 0.5rem 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--adm-radius-md);
  background: var(--adm-accent);
  color: var(--adm-accent-fg);
  font-family: var(--adm-font-sans);
  font-size: var(--adm-font-size-sm);
  font-weight: var(--adm-weight-bold);
  line-height: var(--adm-line-tight);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition:
    background-color var(--adm-duration-fast) var(--adm-ease-standard),
    border-color var(--adm-duration-fast) var(--adm-ease-standard),
    color var(--adm-duration-fast) var(--adm-ease-standard),
    transform var(--adm-duration-fast) var(--adm-ease-standard);
}

body[data-app="admin"] .admin-button:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--adm-accent-hover);
}

body[data-app="admin"] .admin-button:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--adm-accent-active);
  transform: translateY(1px);
}

body[data-app="admin"] .admin-button--secondary {
  border-color: var(--adm-border-strong);
  background: var(--adm-surface-raised);
  color: var(--adm-fg);
}

body[data-app="admin"] .admin-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--adm-border-interactive);
  background: var(--adm-surface-hover);
}

body[data-app="admin"] .admin-button--secondary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--adm-surface-active);
}

body[data-app="admin"] .admin-button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--adm-fg-muted);
}

body[data-app="admin"] .admin-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--adm-surface-hover);
  color: var(--adm-fg);
}

body[data-app="admin"] .admin-button--ghost:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--adm-surface-active);
}

body[data-app="admin"] .admin-button--danger {
  border-color: var(--adm-danger-border);
  background: var(--adm-danger-bg);
  color: var(--adm-danger-fg);
}

body[data-app="admin"] .admin-button--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--adm-danger-fg);
  background: #421b1f;
}

body[data-app="admin"] .admin-button--danger:active:not(:disabled):not([aria-disabled="true"]) {
  background: #511f24;
}

body[data-app="admin"] .admin-button:disabled,
body[data-app="admin"] .admin-button[aria-disabled="true"] {
  border-color: var(--adm-border);
  background: var(--adm-surface);
  color: var(--adm-fg-disabled);
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

body[data-app="admin"] .admin-button--sm {
  min-height: var(--adm-control-height-sm);
  padding: 0.375rem 0.625rem;
  font-size: var(--adm-font-size-xs);
}

body[data-app="admin"] .admin-button--lg {
  min-height: var(--adm-control-height-lg);
  padding: 0.625rem 1rem;
  font-size: var(--adm-font-size-md);
}

body[data-app="admin"] .admin-button--icon {
  inline-size: var(--adm-control-height);
  block-size: var(--adm-control-height);
  min-height: 0;
  padding: 0;
}

body[data-app="admin"] .admin-button :where(svg) {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
}

/* Visibility and accessibility helpers */
body[data-app="admin"] [hidden]:not([hidden="until-found"]),
body[data-app="admin"] .admin-hidden {
  display: none;
}

body[data-app="admin"] .admin-invisible {
  visibility: hidden;
}

body[data-app="admin"] :where(.admin-sr-only, .admin-visually-hidden),
body[data-app="admin"] .admin-sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

body[data-app="admin"] .admin-skip-link {
  position: fixed;
  inset-block-start: var(--adm-space-3);
  inset-inline-start: var(--adm-space-3);
  z-index: var(--adm-z-toast);
  padding: 0.625rem 0.875rem;
  border-radius: var(--adm-radius-md);
  background: var(--adm-accent);
  color: var(--adm-accent-fg);
  font-weight: var(--adm-weight-bold);
  transform: translateY(calc(-100% - var(--adm-space-4)));
  transition: transform var(--adm-duration-fast) var(--adm-ease-standard);
}

body[data-app="admin"] .admin-skip-link:focus-visible {
  transform: translateY(0);
}

/* Scoped scrollbars */
body[data-app="admin"],
body[data-app="admin"] * {
  scrollbar-color: var(--adm-border-strong) transparent;
  scrollbar-width: thin;
}

body[data-app="admin"]::-webkit-scrollbar,
body[data-app="admin"] *::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

body[data-app="admin"]::-webkit-scrollbar-track,
body[data-app="admin"] *::-webkit-scrollbar-track {
  background: transparent;
}

body[data-app="admin"]::-webkit-scrollbar-thumb,
body[data-app="admin"] *::-webkit-scrollbar-thumb {
  border: 2px solid var(--adm-canvas);
  border-radius: var(--adm-radius-pill);
  background: var(--adm-border-strong);
  background-clip: padding-box;
}

body[data-app="admin"]::-webkit-scrollbar-thumb:hover,
body[data-app="admin"] *::-webkit-scrollbar-thumb:hover {
  background: var(--adm-border-interactive);
  background-clip: padding-box;
}

body[data-app="admin"]::-webkit-scrollbar-corner,
body[data-app="admin"] *::-webkit-scrollbar-corner {
  background: transparent;
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  body[data-app="admin"] {
    scroll-behavior: auto;
  }

  body[data-app="admin"] *,
  body[data-app="admin"] *::before,
  body[data-app="admin"] *::after {
    animation-delay: 0ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-delay: 0ms;
    transition-duration: 0.01ms;
  }
}