/* ═══════════════════════════════════════════════════════════════════════════ */
/* Stellar UI 2 — Polished component layer on Stellar2 design tokens        */
/* Mobile-first · Clean · Class-based dark mode                             */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root { color-scheme: light; }
:root.dark { color-scheme: dark; }

html {
  font-size: var(--viewport-base-font-size);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", var(--font-sans);
  font-size: var(--font-size-0);
  line-height: var(--font-line-height-0);
  color: var(--neutral-1-on);
  background: var(--neutral-2);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── App Shell ───────────────────────────────────────────────────────────── */

[data-app] {
  --app-nav-h: 3.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

[data-app-header] {
  position: sticky;
  top: 0;
  z-index: var(--zindex-drawer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  padding-inline: var(--size-1);
  background: var(--neutral-1);
  border-bottom: 1px solid var(--neutral-3);

  > strong {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-semi-bold);
    color: var(--neutral-2-on);
  }

  > nav {
    display: flex;
    align-items: center;
    gap: var(--size--1);
  }
}

[data-app] > main {
  flex: 1;
  padding: var(--size-1);
  padding-bottom: calc(var(--app-nav-h) + var(--size-1) + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  [data-app] > main {
    padding: var(--size-2);
    padding-bottom: calc(var(--app-nav-h) + var(--size-2));
    max-width: 48rem;
  }
}

[data-app-nav] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--zindex-drawer);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--neutral-1);
  border-top: var(--border-width-0) solid var(--neutral-3);

  > a,
  > button {
    all: unset;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding: var(--size--2) 0;
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    color: var(--neutral-6);
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--anim-duration-fast);

    > svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    &:hover,
    &[aria-current] {
      color: var(--primary-7);
    }
  }

  > ot-dropdown {
    flex: 1;
    display: flex;

    > [popovertarget] {
      all: unset;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.125rem;
      padding: var(--size--2) 0;
      font-size: 0.625rem;
      font-weight: var(--font-weight-medium);
      color: var(--neutral-6);
      cursor: pointer;
      transition: color var(--anim-duration-fast);

      > svg { width: 1.25rem; height: 1.25rem; }
      &:hover { color: var(--primary-7); }
    }
  }
}

/* ── Sidebar Layout (desktop) ────────────────────────────────────────────── */

[data-sidebar-layout] {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  > nav[data-topnav] { order: -1; }

  > aside[data-sidebar] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--zindex-drawer) + 1);
    width: 16rem;
    height: 100dvh;
    background: var(--neutral-1);
    border-inline-end: 1px solid var(--neutral-3);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--anim-duration-base) var(--anim-ease-standard);

    > header {
      flex-shrink: 0;
      padding: var(--size-0);
      border-bottom: 1px solid var(--neutral-3);

      strong {
        display: block;
        font-size: var(--font-size-0);
        color: var(--neutral-2-on);
      }

      small {
        font-size: var(--font-size--2);
        color: var(--neutral-6);
      }
    }

    > nav {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: var(--size--2);
      font-size: var(--font-size--1);

      ul { list-style: none; display: flex; flex-direction: column; }

      a {
        display: flex;
        gap: var(--size--2);
        padding: var(--size--2) var(--size--1);
        color: var(--neutral-1-on);
        text-decoration: none;
        border-radius: 0.375rem;
        transition: background-color var(--anim-duration-fast);

        &:hover,
        &[aria-current] {
          background: var(--neutral-3);
        }
      }
    }

    > footer {
      flex-shrink: 0;
      margin-block-start: auto;
      border-top: var(--border-width-0) solid var(--neutral-3);
    }
  }

  &[data-sidebar-open] > aside[data-sidebar] {
    transform: translateX(0);
  }

  > main {
    flex: 1;
    min-width: 0;
  }
}

@media (min-width: 768px) {
  [data-sidebar-layout] {
    display: grid;
    grid-template-columns: 14rem 1fr;
    grid-template-rows: auto 1fr;

    > nav[data-topnav] { grid-column: 1 / -1; order: unset; }

    > aside[data-sidebar] {
      position: sticky;
      top: var(--topnav-h, 0px);
      width: auto;
      height: calc(100dvh - var(--topnav-h, 0px));
      z-index: 1;
      grid-row: 2;
      transform: none;
    }

    &[data-sidebar-open] {
      grid-template-columns: 0px 1fr;

      > aside[data-sidebar] {
        overflow: hidden;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        border-inline-end: none;
      }
    }

    [data-sidebar-toggle] { display: none; }

    &[data-sidebar-layout="always"] [data-sidebar-toggle] {
      display: inline-flex;
    }

    > main { grid-row: 2; }
  }
}

/* ── Top Navigation ──────────────────────────────────────────────────────── */

nav[data-topnav] {
  position: sticky;
  top: 0;
  z-index: var(--zindex-drawer);
  display: flex;
  align-items: center;
  gap: var(--size-0);
  height: 3.5rem;
  padding-inline: var(--size-1);
  background: var(--neutral-1);
  border-bottom: 1px solid var(--neutral-3);

  a { text-decoration: none; color: inherit; }

  strong {
    font-size: var(--font-size-1);
    color: var(--neutral-2-on);
  }
}

/* ── Main Content ────────────────────────────────────────────────────────── */

main {
  flex: 1;
  padding: var(--size-1);
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;

  @media (min-width: 768px) {
    padding: var(--size-2);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Typography                                                                */
/* ═══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  color: var(--neutral-2-on);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1.3;
  margin-block-end: var(--size--1);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--font-size-4); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-3); }
h3 { font-size: var(--font-size-2); }
h4 { font-size: var(--font-size-1); }
h5 { font-size: var(--font-size-0); }
h6 { font-size: var(--font-size--1); text-transform: uppercase; letter-spacing: 0.05em; color: var(--neutral-6); }

p {
  margin-block-end: var(--size-0);
  color: var(--neutral-1-on);
}

a {
  color: var(--primary-7);
  text-decoration: none;
  transition: color var(--anim-duration-fast);

  &:hover { color: var(--primary-8); text-decoration: underline; }
}

strong, b { font-weight: var(--font-weight-semi-bold); }
small { font-size: var(--font-size--1); }

mark {
  background: color-mix(in oklch, var(--secondary-5) 30%, transparent);
  color: inherit;
  padding: 0.05em 0.25em;
  border-radius: 0.25rem;
}

code {
  font-family: "Inconsolata", var(--font-mono);
  font-size: 0.875em;
  background: var(--neutral-3);
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
}

pre {
  margin-block-end: var(--size-0);
  padding: var(--size-0);
  background: var(--neutral-3);
  border: 1px solid var(--neutral-4);
  border-radius: 0.5rem;
  overflow-x: auto;

  code { background: none; padding: 0; }
}

blockquote {
  margin-block-end: var(--size-0);
  padding: var(--size--1) var(--size-1);
  border-inline-start: 3px solid var(--neutral-4);
  color: var(--neutral-6);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--neutral-3);
  margin-block: var(--size-1);
}

ul, ol {
  margin-block-end: var(--size-0);
  padding-inline-start: var(--size-2);
}

li { margin-block-end: var(--size--2); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Forms                                                                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

label {
  display: block;
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-2-on);

  &:has(input:where([type=checkbox], [type=radio])) {
    display: inline-flex;
    align-items: center;
    gap: var(--size--1);
    font-weight: var(--font-weight-normal);
    color: var(--neutral-1-on);
  }
}

:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), textarea, select) {
  width: 100%;
  height: 2.5rem;
  margin-block-start: var(--size--2);
  padding: 0 0.75rem;
  font-size: var(--font-size--1);
  font-family: inherit;
  line-height: var(--font-line-height-0);
  background-color: var(--neutral-1);
  color: var(--neutral-1-on);
  border: 1px solid var(--neutral-4);
  border-radius: 0.375rem;
  transition: border-color var(--anim-duration-fast), box-shadow var(--anim-duration-fast);

  &::placeholder { color: var(--neutral-6); }

  &:focus {
    outline: none;
    border-color: var(--primary-7);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary-7) 15%, transparent);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &:is([aria-invalid="true"], :user-invalid) {
    border-color: var(--error-7);
    &:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--error-7) 15%, transparent); }
  }
}

textarea {
  height: auto;
  min-height: 5rem;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-inline-end: 2rem;
  cursor: pointer;
}

input:where([type=checkbox], [type=radio]) {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  position: relative;
  background-color: var(--neutral-1);
  border: 1px solid var(--neutral-4);
  cursor: pointer;
  transition: background-color var(--anim-duration-fast), border-color var(--anim-duration-fast);

  &:checked {
    background-color: var(--primary-7);
    border-color: var(--primary-7);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--primary-7-on);
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: 100%;
    }
  }

  &:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary-7) 15%, transparent);
  }
}

input[type=checkbox] {
  border-radius: 0.25rem;
  &:checked::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }

  &[role=switch] {
    --_h: 1.25rem;
    --_inset: 2px;
    --_thumb: calc(var(--_h) - var(--_inset) * 3);
    width: calc(var(--_h) * 2);
    height: var(--_h);
    border-radius: 999px;
    background-color: var(--neutral-4);

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: var(--_inset);
      transform: translateY(-50%);
      width: var(--_thumb);
      height: var(--_thumb);
      background-color: var(--neutral-1);
      border-radius: 999px;
      transition: transform var(--anim-duration-fast);
    }

    &:checked {
      background-color: var(--primary-7);
      &::after { content: none; }
      &::before { transform: translateY(-50%) translateX(var(--_h)); }
    }
  }
}

input[type=radio] {
  border-radius: 999px;
  &:checked::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
  }
}

input[type=range] {
  width: 100%;
  height: 0.25rem;
  appearance: none;
  background: var(--neutral-3);
  border-radius: 999px;

  &::-webkit-slider-thumb {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--primary-7);
    border-radius: 999px;
    border: 2px solid var(--neutral-1);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
    transition: transform var(--anim-duration-fast);
    &:hover { transform: scale(1.1); }
  }

  &::-moz-range-thumb {
    width: 1.125rem;
    height: 1.125rem;
    background: var(--primary-7);
    border: 2px solid var(--neutral-1);
    border-radius: 999px;
  }
}

fieldset {
  border: 1px solid var(--neutral-3);
  border-radius: 0.5rem;
  padding: var(--size-1);
  margin-block-end: var(--size-1);
}

legend {
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--size--1);
}

/* Input group */
fieldset.group {
  display: flex;
  align-items: stretch;
  border: none;
  padding: 0;
  margin: 0;

  > :is(input, textarea, select) {
    flex: 1;
    margin-block-start: 0;
    &:not(:focus):not(:last-child) { border-inline-end-color: transparent; }
  }

  > :is(input, textarea, select, button) {
    border-radius: 0;
    &:first-child { border-radius: 0.375rem 0 0 0.375rem; }
    &:last-child { border-radius: 0 0.375rem 0.375rem 0; }
  }

  > button { height: auto; }

  > legend {
    float: inline-start;
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    line-height: var(--font-line-height-0);
    font-weight: var(--font-weight-normal);
    color: var(--neutral-6);
    background-color: var(--neutral-2);
    border: 1px solid var(--neutral-4);
    border-inline-end: none;
    border-radius: 0.375rem 0 0 0.375rem;
  }
}

/* Field wrapper */
[data-field] {
  margin-block-end: var(--size-0);

  [data-hint], .error {
    font-size: var(--font-size--2);
    font-weight: var(--font-weight-normal);
    color: var(--neutral-6);
    margin-block-start: var(--size--2);
  }

  .error { display: none; }

  &[data-field="error"] .error {
    display: block;
    color: var(--error-7);
  }
}

::file-selector-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  background-color: transparent;
  color: var(--neutral-1-on);
  border: 1px solid var(--neutral-4);
  border-radius: 0.375rem;
  cursor: pointer;
  margin-inline-end: var(--size-0);
}

::file-selector-button:hover {
  background-color: var(--neutral-2);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Buttons                                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

:is(button, [type=submit], [type=reset], [type=button], a.button):not([data-app-nav] *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  font-size: var(--font-size--1);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  background-color: var(--primary-7);
  color: var(--primary-7-on);
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--anim-duration-fast), opacity var(--anim-duration-fast), box-shadow var(--anim-duration-fast);

  &:hover:not(:disabled) { background-color: var(--primary-8); }
  &:active:not(:disabled) { background-color: var(--primary-9); }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary-7) 20%, transparent);
  }

  &:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Variants */
  &[data-variant="secondary"] {
    background-color: var(--neutral-3);
    color: var(--neutral-1-on);
    &:hover:not(:disabled) { background-color: var(--neutral-4); }
  }

  &[data-variant="danger"] {
    background-color: var(--error-7);
    color: var(--error-7-on);
    &:hover:not(:disabled) { background-color: var(--error-8); }
    &:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--error-7) 20%, transparent); }
  }

  /* Outline */
  &.outline {
    background-color: transparent;
    color: var(--neutral-1-on);
    border-color: var(--neutral-4);

    &:hover:not(:disabled) { background-color: var(--neutral-2); }

    &[data-variant="danger"] {
      color: var(--error-7);
      border-color: color-mix(in oklch, var(--error-7) 40%, transparent);
      &:hover:not(:disabled) { background-color: color-mix(in oklch, var(--error-7) 8%, transparent); }
    }

    &[data-variant="secondary"] {
      color: var(--neutral-6);
      border-color: var(--neutral-4);
    }
  }

  /* Ghost */
  &.ghost {
    background-color: transparent;
    color: var(--neutral-1-on);
    border-color: transparent;
    &:hover:not(:disabled) { background-color: var(--neutral-3); }

    &[data-variant="danger"] {
      color: var(--error-7);
      &:hover:not(:disabled) { background-color: color-mix(in oklch, var(--error-7) 8%, transparent); }
    }
  }

  /* Sizes */
  &.small { height: 2rem; padding: 0 0.625rem; font-size: var(--font-size--2); }
  &.large { height: 2.75rem; padding: 0 1.25rem; font-size: var(--font-size-0); }

  &.icon {
    width: 2.25rem;
    padding: 0;
    &.small { width: 2rem; height: 2rem; }
    &.large { width: 2.75rem; height: 2.75rem; }
  }

  &.w-full { width: 100%; }
}

.pagination-input {
  width: 3.5rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: var(--font-size--1);
  -moz-appearance: textfield;
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Cards                                                                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

article {
  background-color: var(--neutral-1);
  border: 1px solid var(--neutral-3);
  border-radius: 0.5rem;
  padding: var(--size-1);
  margin-block-end: var(--size-0);

  > header {
    margin: calc(-1 * var(--size-1));
    margin-block-end: var(--size-0);
    padding: var(--size-0) var(--size-1);
    border-bottom: 1px solid var(--neutral-3);

    > :is(h1, h2, h3, h4, h5, h6) { margin-block-end: 0; }

    > p {
      font-size: var(--font-size--1);
      color: var(--neutral-6);
      margin-block-end: 0;
    }
  }

  > footer {
    margin: calc(-1 * var(--size-1));
    margin-block-start: var(--size-0);
    padding: var(--size-0) var(--size-1);
    border-top: 1px solid var(--neutral-3);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--size--1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Tables                                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

.table {
  min-width: 320px;
  width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size--1);
}

thead {
  border-bottom: 1px solid var(--neutral-3);
}

th, td { overflow-wrap: break-word; }

th {
  padding: 0.5rem 0.75rem;
  text-align: start;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size--2);
  color: var(--neutral-6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td { padding: 0.5rem 0.75rem; }

tbody tr {
  border-bottom: 1px solid var(--neutral-3);
  transition: background-color var(--anim-duration-fast);

  &:last-child { border-bottom: none; }
  &:hover { background-color: color-mix(in oklch, var(--neutral-2) 50%, transparent); }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Dialog                                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: var(--zindex-dialog);
  width: min(100% - 2rem, 28rem);
  max-height: 85vh;
  margin: 0;
  padding: 0;
  background-color: var(--neutral-1);
  border: 1px solid var(--neutral-3);
  border-radius: 0.75rem;
  box-shadow: 0 16px 32px -4px rgb(0 0 0 / 0.15), 0 4px 8px -2px rgb(0 0 0 / 0.08);
  overflow: hidden;
  color: var(--neutral-1-on);

  opacity: 0;
  transform: scale(0.95) translateY(0.5rem);
  transition:
    opacity 200ms var(--anim-ease-standard),
    transform 200ms var(--anim-ease-standard),
    overlay 200ms allow-discrete,
    display 200ms allow-discrete;

  &[open] { opacity: 1; transform: scale(1) translateY(0); }

  @starting-style {
    &[open] { opacity: 0; transform: scale(0.95) translateY(0.5rem); }
  }

  &::backdrop {
    background-color: rgb(0 0 0 / 0);
    transition:
      background-color 200ms,
      overlay 200ms allow-discrete,
      display 200ms allow-discrete;
  }

  &[open]::backdrop { background-color: rgb(0 0 0 / 0.5); }

  @starting-style {
    &[open]::backdrop { background-color: rgb(0 0 0 / 0); }
  }

  > header, > form > header {
    display: flex;
    flex-direction: column;
    gap: var(--size--2);
    padding: var(--size-1);
    padding-block-end: 0;

    > :is(h1, h2, h3, h4, h5, h6) { margin-block-end: 0; }
    > p { font-size: var(--font-size--1); color: var(--neutral-6); margin-block-end: 0; }
  }

  > p, > div, > section,
  > form > p, > form > div, > form > section {
    padding: var(--size-1);
    overflow-y: auto;
  }

  > footer, > form > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--size--1);
    padding: var(--size-1);
    padding-block-start: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Badges                                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  background-color: var(--neutral-3);
  color: var(--neutral-1-on);
  border-radius: 999px;

  &.secondary {
    background-color: var(--neutral-3);
    color: var(--neutral-6);
  }

  &.outline {
    background-color: transparent;
    color: var(--neutral-1-on);
    border: 1px solid var(--neutral-4);
  }

  &.success {
    color: var(--tertiary-8);
    background-color: color-mix(in oklch, var(--tertiary-7) 12%, transparent);
  }

  &.warning {
    color: var(--secondary-8);
    background-color: color-mix(in oklch, var(--secondary-7) 12%, transparent);
  }

  &.danger {
    color: var(--error-8);
    background-color: color-mix(in oklch, var(--error-7) 12%, transparent);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Alerts                                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

[role="alert"] {
  position: relative;
  display: flex;
  gap: var(--size-0);
  padding: 0.75rem 1rem;
  background-color: var(--neutral-3);
  border: 1px solid var(--neutral-4);
  border-radius: 0.5rem;
  font-size: var(--font-size--1);

  &[data-variant] { border: none; }

  &[data-variant="error"],
  &[data-variant="danger"] {
    color: var(--error-8);
    background-color: color-mix(in oklch, var(--error-7) 8%, transparent);
    a { color: var(--error-8); }
  }

  &[data-variant="success"] {
    color: var(--tertiary-8);
    background-color: color-mix(in oklch, var(--tertiary-7) 8%, transparent);
    a { color: var(--tertiary-8); }
  }

  &[data-variant="warning"] {
    color: var(--secondary-8);
    background-color: color-mix(in oklch, var(--secondary-7) 8%, transparent);
    a { color: var(--secondary-8); }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Spinner                                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

@keyframes sui-spin {
  to { transform: rotate(360deg); }
}

[aria-busy="true"] {
  &::before {
    content: "";
    display: inline-block;
    inset: 0;
    margin: auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--neutral-3);
    border-top-color: var(--primary-7);
    border-radius: 999px;
    animation: sui-spin 0.75s linear infinite;
    text-align: center;
  }

  &[data-spinner~="small"]::before { width: 1rem; height: 1rem; }

  &[data-spinner~="large"]::before { width: 2rem; height: 2rem; border-width: 3px; }

  &[data-spinner~="overlay"] {
    position: relative;
    > * { opacity: 0.3; pointer-events: none; }
    &::before { position: absolute; inset: 0; margin: auto; z-index: 1; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Progress & Meter                                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

progress {
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--neutral-3);

  &::-webkit-progress-bar { background-color: var(--neutral-3); border-radius: 999px; }
  &::-webkit-progress-value { background-color: var(--primary-7); border-radius: 999px; transition: width var(--anim-duration-base); }
  &::-moz-progress-bar { background-color: var(--primary-7); border-radius: 999px; }
}

meter {
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--neutral-3);

  &::-webkit-meter-bar { background: var(--neutral-3); border: none; border-radius: 999px; height: 0.375rem; }
  &::-webkit-meter-optimum-value { border-radius: 999px; background: var(--tertiary-7); }
  &::-webkit-meter-suboptimum-value { border-radius: 999px; background: var(--secondary-7); }
  &::-webkit-meter-even-less-good-value { border-radius: 999px; background: var(--error-7); }
  &::-moz-meter-bar { background: var(--tertiary-7); border-radius: 999px; }
  &:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--secondary-7); }
  &:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--error-7); }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Accordion                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

details {
  border: 1px solid var(--neutral-3);
  border-radius: 0.5rem;
  overflow: hidden;

  & + details {
    margin-top: -1px;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  &:has(+ details) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  &[open] summary { border-bottom: 1px solid var(--neutral-3); }
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size--1);
  padding: 0.625rem 0.75rem;
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--anim-duration-fast);

  &:hover { background-color: var(--neutral-2); }

  &::-webkit-details-marker, &::marker { display: none; }

  &::after {
    content: "";
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    background-color: var(--neutral-6);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    transition: transform var(--anim-duration-fast);
  }

  details[open] &::after { transform: rotate(180deg); }
}

details > *:not(summary) { margin: var(--size-0); }

/* Sidebar nested accordion */
[data-sidebar] details {
  border: none;
  overflow: visible;
  & + details { margin-top: 0; }
  &[open] summary { border-bottom: none; }
  > ul { margin-inline-start: var(--size--1); padding: var(--size--2) 0; }
}

[data-sidebar] summary {
  justify-content: flex-start;
  padding: var(--size--2) var(--size--1);
  border-radius: 0.375rem;
  &::after { width: var(--size--1); height: var(--size--1); margin-inline-start: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Tabs                                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */

[role="tablist"] {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  background-color: var(--neutral-3);
  border-radius: 0.5rem;
}

[role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  background-color: transparent;
  color: var(--neutral-6);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color var(--anim-duration-fast), color var(--anim-duration-fast);

  &:hover { color: var(--neutral-1-on); }

  &[aria-selected="true"] {
    background-color: var(--neutral-1);
    color: var(--neutral-2-on);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  }
}

[role="tabpanel"] {
  padding: var(--size-0) 0;
  &:focus-visible { outline: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Toast                                                                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;

  &::backdrop { display: none; }

  &[data-placement="top-left"]      { inset: var(--size-1) auto auto var(--size-1); }
  &[data-placement="top-center"]    { inset: var(--size-1) auto auto 50%; transform: translateX(-50%); }
  &[data-placement="top-right"]     { inset: var(--size-1) var(--size-1) auto auto; }
  &[data-placement="bottom-left"]   { inset: auto auto var(--size-1) var(--size-1); flex-direction: column-reverse; }
  &[data-placement="bottom-center"] { inset: auto auto var(--size-1) 50%; transform: translateX(-50%); flex-direction: column-reverse; }
  &[data-placement="bottom-right"]  { inset: auto var(--size-1) var(--size-1) auto; flex-direction: column-reverse; }
}

.toast {
  --transition: 250ms;
  padding: 0.75rem 1rem;
  max-width: 24rem;
  min-width: 16rem;
  pointer-events: auto;
  background-color: var(--neutral-1);
  border: 1px solid var(--neutral-3);
  border-inline-start-width: 3px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  transition: opacity var(--transition), transform var(--transition), margin var(--transition);
  line-height: 1.4;
  margin: 0.25rem 0;

  .toast-title {
    font-weight: var(--font-weight-semi-bold);
    font-size: var(--font-size--1);
    margin: 0 0 0.125rem 0;
  }

  .toast-message { color: var(--neutral-6); font-size: var(--font-size--2); }

  &[data-variant="success"] { border-inline-start-color: var(--tertiary-7); .toast-title { color: var(--tertiary-8); } }
  &[data-variant="danger"] { border-inline-start-color: var(--error-7); .toast-title { color: var(--error-8); } }
  &[data-variant="warning"] { border-inline-start-color: var(--secondary-7); .toast-title { color: var(--secondary-8); } }

  > [data-close] {
    margin-inline-start: auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.5;
    &:hover { opacity: 1; }
  }

  &[data-entering] { opacity: 0; transform: translateY(-0.5rem); }

  &[data-exiting] {
    opacity: 0;
    margin: 0;
    padding-block: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity var(--transition), margin var(--transition), padding var(--transition), max-height var(--transition);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Dropdown                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

ot-dropdown {
  position: relative;

  [popover] {
    position: fixed;
    margin: 0;
    margin-inline-start: var(--size--1);
    min-width: 10rem;
    background-color: var(--neutral-1);
    border: var(--border-width-0) solid var(--neutral-3);
    border-radius: var(--border-radius-1);
    box-shadow: var(--shadow-2);
    padding: var(--size--2);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--anim-duration-fast), transform var(--anim-duration-fast), display var(--anim-duration-fast) allow-discrete, overlay var(--anim-duration-fast) allow-discrete;

    &:popover-open { opacity: 1; transform: translateY(0); }
    @starting-style { &:popover-open { opacity: 0; transform: translateY(-4px); } }
  }

  [role="menuitem"] {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--size--1);
    width: 100%;
    box-sizing: border-box;
    padding: var(--size--2) var(--size--1);
    font-size: var(--font-size--1);
    color: var(--neutral-1-on);
    border-radius: var(--border-radius-0);
    cursor: pointer;

    &:hover, &:focus-visible { background-color: var(--neutral-3); }

    &.danger {
      color: var(--error-7);
      &:hover, &:focus-visible { background-color: var(--neutral-3); }
    }
  }

  hr {
    border: none;
    border-top: var(--border-width-0) solid var(--neutral-3);
    margin: var(--size--2) 0;
  }
}

/* User trigger in sidebar footer */
[data-user-trigger] {
  display: flex;
  align-items: center;
  gap: var(--size-0);
  padding: var(--size-1) var(--size-0);
  cursor: pointer;
  transition: background-color var(--anim-duration-fast);

  &:hover,
  &:active,
  &[aria-expanded="true"] { background-color: var(--neutral-3); }

  > .avatar {
    flex-shrink: 0;
    background: var(--neutral-5);
    color: var(--neutral-1);
  }

  > div {
    flex: 1;
    min-width: 0;

    > strong {
      display: block;
      font-size: var(--font-size--1);
      font-weight: var(--font-weight-medium);
      color: var(--neutral-1-on);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    > small {
      display: block;
      font-size: var(--font-size--2);
      color: var(--neutral-6);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  > svg {
    flex-shrink: 0;
    color: var(--neutral-6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Tooltip                                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-tooltip] { position: relative; }

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  inset-inline-start: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--anim-duration-fast), transform var(--anim-duration-fast), visibility var(--anim-duration-fast);
  pointer-events: none;
  z-index: var(--zindex-tooltip);
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  inset-block-end: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 0.375rem 0.625rem;
  font-size: var(--font-size--2);
  line-height: 1.4;
  white-space: nowrap;
  background: var(--neutral-9);
  color: var(--neutral-9-on);
  border-radius: 0.375rem;
}

[data-tooltip]::before {
  content: '';
  inset-block-end: calc(100% - 4px);
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--neutral-9);
}

[data-tooltip]:is(:hover, :focus-visible)::before,
[data-tooltip]:is(:hover, :focus-visible)::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 500ms;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Theme Toggle                                                              */
/* ═══════════════════════════════════════════════════════════════════════════ */

[data-theme-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--neutral-4);
  border-radius: 0.375rem;
  color: var(--neutral-1-on);
  cursor: pointer;
  transition: background-color var(--anim-duration-fast);

  &:hover { background-color: var(--neutral-3); }

  > svg { width: 1rem; height: 1rem; }
}

[data-theme-picker] {
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  background: var(--neutral-3);
  border-radius: 0.375rem;

  button {
    padding: 0.25rem 0.5rem;
    background: none;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--neutral-6);
    font-size: var(--font-size--2);
    font-weight: var(--font-weight-medium);

    &[aria-pressed="true"] {
      background: var(--neutral-1);
      color: var(--neutral-1-on);
      box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Skeleton Loading                                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

@keyframes sui-shimmer {
  to { background-position: -200% 0; }
}

[role="status"].skeleton {
  margin-block-end: var(--size-0);
  background: var(--neutral-3);
  border-radius: 0.375rem;
  animation: sui-shimmer 2s infinite;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, var(--neutral-3) 0%, var(--neutral-4) 50%, var(--neutral-3) 100%);

  &.box { width: 3rem; height: 3rem; border-radius: 0.5rem; }
  &.line { height: 0.875rem; width: 100%; }
  &.circle { width: 2.5rem; height: 2.5rem; border-radius: 999px; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Utilities                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

.align-left   { text-align: start; }
.align-center { text-align: center; }
.align-right  { text-align: end; }
.text-hint    { font-size: var(--font-size--2); color: var(--neutral-6); }
.text-muted   { color: var(--neutral-6); }
.text-light   { color: var(--neutral-6); }
.text-lighter { color: var(--neutral-7); }
.text-success { color: var(--tertiary-7); }
.text-warning { color: var(--secondary-7); }
.text-danger  { color: var(--error-7); }

.hstack {
  display: flex;
  align-items: center;
  gap: var(--size-0);
  flex-wrap: wrap;
  > * { margin: 0; }
  &.spread { justify-content: space-between; }
  &.nowrap { flex-wrap: nowrap; }
  &.responsive {
    flex-direction: column;
    align-items: flex-start;
    @media (min-width: 768px) {
      flex-direction: row;
      align-items: center;
    }
  }
}

.vstack {
  display: flex;
  flex-direction: column;
  gap: var(--size--1);
  > * { margin-block: 0; }
}

.gap-1 { gap: var(--size--2); }
.gap-2 { gap: var(--size--1); }
.gap-3 { gap: var(--size-0); }
.gap-4 { gap: var(--size-1); }

.mt-2 { margin-block-start: var(--size--1); }
.mt-4 { margin-block-start: var(--size-1); }
.mt-6 { margin-block-start: var(--size-2); }

.mb-2 { margin-block-end: var(--size--1); }
.mb-4 { margin-block-end: var(--size-1); }
.mb-6 { margin-block-end: var(--size-2); }

.p-4 { padding: var(--size-1); }
.push-end { margin-inline-start: auto; }
.w-full { width: 100%; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--size--2);
  color: var(--neutral-7);
  text-decoration: none;
  font-size: var(--font-size--1);
  &:hover { color: var(--primary-7); }
  > svg { flex-shrink: 0; }
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-0);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size--1);

  @media (min-width: 768px) {
    grid-template-columns: repeat(4, 1fr);
  }

  article p { margin: 0; }
}

.stat-value {
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

/* Card header helpers */
article > header progress { margin-block-start: var(--size--1); }
article > [role="alert"] { margin-inline: var(--size-0); }

/* Accordion badge inline */
summary .badge { margin-inline-start: var(--size--1); }
summary .inline-status {
  display: inline-flex;
  align-items: center;
  gap: var(--size--2);
  margin-inline-start: var(--size--1);
}

details > div { padding: var(--size-0); }
details > div > [role="alert"] + .hstack { margin-block-start: var(--size-0); }

:is(ul, ol, a).unstyled {
  list-style: none;
  text-decoration: none;
  padding: 0;
}

/* Separator */
.separator {
  display: flex;
  align-items: center;
  gap: var(--size-0);
  color: var(--neutral-6);
  font-size: var(--font-size--2);

  &::before, &::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--neutral-3);
  }
}

/* Avatar placeholder */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--primary-7);
  color: var(--primary-7-on);
  font-size: var(--font-size--2);
  font-weight: var(--font-weight-semi-bold);

  &.large { width: 3rem; height: 3rem; font-size: var(--font-size-0); }
  &.small { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
}

/* List item (for mobile list views) */
.list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--neutral-3);

  &:last-child { border-bottom: none; }

  > .list-item-content {
    flex: 1;
    min-width: 0;

    > strong { display: block; font-size: var(--font-size--1); font-weight: var(--font-weight-medium); }
    > small { display: block; color: var(--neutral-6); font-size: var(--font-size--2); }
  }

  > .list-item-trailing {
    flex-shrink: 0;
    text-align: end;

    > strong { display: block; font-size: var(--font-size--1); font-weight: var(--font-weight-semi-bold); }
    > small { display: block; color: var(--neutral-6); font-size: var(--font-size--2); }
  }
}