/* shadcn-html (https://github.com/codylindley/shadcn-html, commit 0964e09) — MIT License, ver LICENSE.
   Componentes combinados en un solo archivo, sin modificaciones. */
@layer base, components;

/* ===== button ===== */
/* -- Button component ------------------------------------------ */

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 150ms ease;
    outline: none;
    flex-shrink: 0;
    height: 2.25rem;
    padding: 0 1rem;
    background-color: var(--primary);
    color: var(--primary-foreground);

    & svg {
      pointer-events: none;
      flex-shrink: 0;

      &:not([class*="size-"]) { width: 1rem; height: 1rem; }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled, &[aria-disabled="true"] {
      pointer-events: none;
      opacity: 0.5;
    }

    /* -- Variants -------------------------------------------- */
    &[data-variant="default"] {
      background-color: var(--primary);
      color: var(--primary-foreground);

      &:hover { opacity: 0.9; }
    }

    &[data-variant="secondary"] {
      background-color: var(--secondary);
      color: var(--secondary-foreground);

      &:hover { opacity: 0.8; }
    }

    &[data-variant="outline"] {
      background-color: var(--background);
      color: var(--foreground);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xs);

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    &[data-variant="ghost"] {
      background-color: transparent;
      color: var(--foreground);
      border-color: transparent;

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    &[data-variant="destructive"] {
      background-color: var(--destructive);
      color: var(--destructive-foreground);

      &:hover { opacity: 0.9; }
    }

    &[data-variant="link"] {
      background-color: transparent;
      color: var(--primary);
      height: auto;
      padding: 0;
      text-underline-offset: 4px;

      &:hover { text-decoration: underline; }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="xs"]      { height: 1.75rem; padding: 0 0.5rem;  font-size: 0.75rem; border-radius: var(--radius-sm); }
    &[data-size="sm"]      { height: 2rem;    padding: 0 0.75rem; font-size: 0.8125rem; }
    &[data-size="lg"]      { height: 2.75rem; padding: 0 2rem;    font-size: 1rem; }
    &[data-size="icon"]    { height: 2.25rem; width: 2.25rem;  padding: 0; }
    &[data-size="icon-xs"] { height: 1.75rem; width: 1.75rem;  padding: 0; border-radius: var(--radius-sm); }
    &[data-size="icon-sm"] { height: 2rem;    width: 2rem;     padding: 0; }
    &[data-size="icon-lg"] { height: 2.75rem; width: 2.75rem;  padding: 0; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
  }

  @media (prefers-contrast: more) {
    .btn {
      border: 2px solid transparent;

      &[data-variant="default"],
      &[data-variant="secondary"],
      &[data-variant="destructive"] {
        border-color: currentColor;
      }

      &[data-variant="outline"],
      &[data-variant="ghost"] {
        border-color: var(--foreground);
      }
    }
  }

  @media (forced-colors: active) {
    .btn {
      border: 1px solid ButtonText;

      &:disabled, &[aria-disabled="true"] {
        border-color: GrayText;
        color: GrayText;
      }
    }
  }
}

/* ===== card ===== */
/* -- Card component -------------------------------------------- */

@layer components {
  .card {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    container-type: inline-size;
  }

  .card-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem;
    padding-bottom: 0;
  }

  .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .card-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.6;
  }

  .card-content {
    padding: 1.5rem;
  }

  .card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    padding-top: 0;
  }

  /* -- Container query: compact card in narrow containers -- */
  @container (max-width: 280px) {
    .card-header { padding: 1rem; padding-bottom: 0; }
    .card-content { padding: 1rem; }
    .card-footer { padding: 1rem; padding-top: 0; }
    .card-title { font-size: 1rem; }
  }
}

/* ===== badge ===== */
/* -- Badge component ------------------------------------------- */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5rem;

    &[data-variant="outline"] {
      border: 1px solid var(--border);
      color: var(--muted-foreground);
    }

    &[data-variant="secondary"] {
      background: var(--secondary);
      color: var(--secondary-foreground);
    }

    &[data-variant="default"] {
      background: var(--primary);
      color: var(--primary-foreground);
    }
  }
}

/* ===== dialog ===== */
/* -- Dialog component ------------------------------------------ */

@layer components {
  dialog.dialog {
    border: none;
    border-radius: var(--radius-xl);
    background-color: var(--popover);
    color: var(--popover-foreground);
    padding: 0;
    margin: auto;
    position: fixed;
    inset: 0;
    max-width: 28rem;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    box-shadow: 0 25px 80px oklch(0 0 0 / 0.25), 0 0 0 1px var(--border);
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transition: opacity 200ms ease, transform 200ms ease, display 200ms allow-discrete;

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

    /* -- Sizes ------------------------------------------------ */
    &[data-size="sm"]   { max-width: 24rem; }
    &[data-size="lg"]   { max-width: 32rem; }
    &[data-size="xl"]   { max-width: 40rem; }
    &[data-size="full"] { max-width: calc(100vw - 2rem); }

    /* -- Backdrop --------------------------------------------- */
    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition: all 200ms ease, display 200ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }
  }

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

    dialog.dialog[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  /* -- Content sections ------------------------------------- */
  .dialog-content { padding: 1.5rem; }
  .dialog-header  { margin-bottom: 1rem; }
  .dialog-title   { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.375rem; letter-spacing: -0.01em; }
  .dialog-description { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; line-height: 1.6; }
  .dialog-body    { margin-top: 1rem; }
  .dialog-footer  { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }
}

/* ===== sheet ===== */
/* -- Sheet component ------------------------------------------- */

@layer components {
  /* -- Base -------------------------------------------------- */
  dialog.sheet {
    border: none;
    border-radius: 0;
    background-color: var(--background);
    color: var(--foreground);
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease, display 300ms allow-discrete;

    &[open] { opacity: 1; }

    /* -- Side: right (default) --------------------------------- */
    &, &[data-side="right"] {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      left: auto;
      width: 24rem;
      max-width: 100vw;
      max-height: 100vh;
      height: 100%;
      border-left: 1px solid var(--border);
      transform: translateX(100%);
    }

    &[open], &[data-side="right"][open] {
      transform: translateX(0);
    }

    /* -- Side: left -------------------------------------------- */
    &[data-side="left"] {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      right: auto;
      width: 24rem;
      max-width: 100vw;
      max-height: 100vh;
      height: 100%;
      border-left: none;
      border-right: 1px solid var(--border);
      transform: translateX(-100%);

      &[open] { transform: translateX(0); }
    }

    /* -- Side: top --------------------------------------------- */
    &[data-side="top"] {
      position: fixed;
      top: 0; left: 0; right: 0;
      bottom: auto;
      width: 100%;
      max-width: 100vw;
      max-height: 100vh;
      height: auto;
      border-left: none;
      border-bottom: 1px solid var(--border);
      transform: translateY(-100%);

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

    /* -- Side: bottom ------------------------------------------ */
    &[data-side="bottom"] {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      top: auto;
      width: 100%;
      max-width: 100vw;
      max-height: 100vh;
      height: auto;
      border-left: none;
      border-top: 1px solid var(--border);
      transform: translateY(100%);

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

    /* -- Backdrop ---------------------------------------------- */
    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition: all 300ms ease, display 300ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }
  }

  @starting-style {
    dialog.sheet[open],
    dialog.sheet[data-side="right"][open] {
      opacity: 0;
      transform: translateX(100%);
    }

    dialog.sheet[data-side="left"][open] {
      opacity: 0;
      transform: translateX(-100%);
    }

    dialog.sheet[data-side="top"][open] {
      opacity: 0;
      transform: translateY(-100%);
    }

    dialog.sheet[data-side="bottom"][open] {
      opacity: 0;
      transform: translateY(100%);
    }

    dialog.sheet[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  /* -- Content sections -------------------------------------- */
  .sheet-content     { padding: 1.5rem; position: relative; }
  .sheet-header      { margin-bottom: 1rem; padding-right: 2rem; }
  .sheet-title       { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.375rem; letter-spacing: -0.01em; }
  .sheet-description { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; line-height: 1.6; }
  .sheet-body        { margin-top: 1rem; }
  .sheet-footer      { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }

  /* -- Close button ------------------------------------------ */
  .sheet-close-x {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 1.75rem; height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: var(--foreground);
      background-color: var(--accent);
    }
  }
}

/* ===== input ===== */
/* -- Input component ------------------------------------------- */

@layer components {
  .input {
    height: 2.5rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &::placeholder { color: var(--muted-foreground); }

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

    /* -- Readonly state -------------------------------------- */
    &:read-only:not([type="file"]) {
      background: var(--muted);
      cursor: default;
      opacity: 0.7;

      &:focus {
        border-color: var(--input);
        box-shadow: var(--shadow-xs);
      }
    }

    /* -- Invalid state --------------------------------------- */
    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* -- File input ------------------------------------------ */
    &[type="file"] {
      padding: 0;
      font-size: 0.875rem;

      &::file-selector-button {
        height: 100%;
        border: none;
        border-right: 1px solid var(--input);
        background: var(--muted);
        color: var(--foreground);
        font-size: 0.875rem;
        font-weight: 500;
        font-family: var(--font-sans);
        padding: 0 0.75rem;
        margin-right: 0.75rem;
        cursor: pointer;
        transition: background 150ms;

        &:hover { background: var(--accent); }
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="sm"] { height: 2rem;    padding: 0 0.625rem; font-size: 0.8125rem; }
    &[data-size="lg"] { height: 2.75rem; padding: 0 1rem;     font-size: 1rem; }
  }

  /* -- Auto-growing textarea --------------------------------- */
  textarea.input {
    field-sizing: content;
    min-height: 5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* -- Field description ------------------------------------- */
  .field-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: 0.375rem 0 0;
  }

  /* -- Field error ------------------------------------------- */
  .field-error {
    font-size: 0.8125rem;
    color: var(--destructive);
    margin: 0.375rem 0 0;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .input {
      transition: none;
    }

    .input[type="file"]::file-selector-button {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .input {
      border-width: 2px;
    }

    .input:disabled {
      opacity: 0.7;
    }
  }

  @media (forced-colors: active) {
    .input {
      border-color: ButtonBorder;
      color: ButtonText;
      background: Field;
    }

    .input:focus {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }

    .input:disabled {
      opacity: 1;
      color: GrayText;
      border-color: GrayText;
    }

    .input:is([aria-invalid="true"], :user-invalid) {
      border-color: LinkText;
    }

    .field-error {
      color: LinkText;
    }
  }
}

/* ===== label ===== */
/* -- Label component -------------------------------------------- */

@layer components {
  .label {
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    line-height: 1;
    color: var(--foreground);
    display: block;
    margin-bottom: 0.375rem;
    cursor: default;

    /* Disabled — explicit attribute */
    &[data-disabled] {
      opacity: 0.7;
      cursor: not-allowed;
    }

    /* Disabled — auto-detect via adjacent disabled control */
    &:has(+ :disabled),
    &:has(+ [data-disabled]) {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

  /* -- Hint text (optional, required indicators) ----------- */
  .label-hint {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-contrast: more) {
    .label[data-disabled],
    .label:has(+ :disabled),
    .label:has(+ [data-disabled]) {
      opacity: 0.85;
    }
  }

  @media (forced-colors: active) {
    .label {
      color: LinkText;
    }

    .label[data-disabled],
    .label:has(+ :disabled),
    .label:has(+ [data-disabled]) {
      opacity: 1;
      color: GrayText;
    }
  }
}

/* ===== select ===== */
/* -- Select component ------------------------------------------- */

@layer components {
  .select {
    appearance: none;
    height: 2.5rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 2rem 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms;

    /* Custom chevron */
    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='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

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

    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="sm"] { height: 2rem;    padding-left: 0.625rem; font-size: 0.8125rem; }
    &[data-size="lg"] { height: 2.75rem; padding-left: 1rem;     font-size: 1rem; }
  }
}

/* ===== textarea ===== */
/* -- Textarea component ----------------------------------------- */

@layer components {
  .textarea {
    width: 100%;
    min-height: 5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;
    resize: vertical;
    field-sizing: content;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &::placeholder { color: var(--muted-foreground); }

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

    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .textarea {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .textarea {
      border-width: 2px;
    }

    .textarea:disabled {
      opacity: 0.7;
    }
  }

  @media (forced-colors: active) {
    .textarea {
      border-color: ButtonBorder;
      color: ButtonText;
      background: Field;
    }

    .textarea:focus {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }

    .textarea:disabled {
      opacity: 1;
      color: GrayText;
      border-color: GrayText;
    }

    .textarea:is([aria-invalid="true"], :user-invalid) {
      border-color: LinkText;
    }
  }
}

/* ===== checkbox ===== */
/* -- Checkbox component ----------------------------------------- */

@layer components {
  .checkbox {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--background);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background-color 150ms, border-color 150ms;

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

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 45%;
        width: 6px;
        height: 10px;
        border: solid var(--primary-foreground);
        border-width: 0 2px 2px 0;
        transform: translate(-50%, -50%) rotate(45deg);
      }
    }

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

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 2px;
        background: var(--primary-foreground);
        transform: translate(-50%, -50%);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

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

    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);
    }
  }

  /* -- Checkbox item layout --------------------------------- */
  .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      cursor: pointer;
    }
  }

  .checkbox-item-block {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      cursor: pointer;
    }

    & > .checkbox {
      margin-top: 0.125rem;
    }
  }

  /* Disabled auto-styling */
  .checkbox-item:has(.checkbox:disabled),
  .checkbox-item-block:has(.checkbox:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .checkbox {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .checkbox {
      border-width: 2px;
    }

    .checkbox:disabled {
      opacity: 0.7;
    }
  }

  @media (forced-colors: active) {
    .checkbox {
      appearance: auto;
    }
  }
}

/* ===== radio ===== */
/* -- Radio Group component -------------------------------------- */

@layer components {
  .radio-group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & > legend {
      margin-bottom: 0.375rem;
    }

    /* Horizontal layout */
    &[data-orientation="horizontal"] {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem;
    }
  }

  .radio-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      font-weight: 400;
      cursor: pointer;
    }
  }

  /* -- With-description layout -------------------------------- */
  .radio-item-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.5rem;

    & > .radio {
      grid-row: 1 / 3;
      margin-top: 0.125rem;
    }

    & > label {
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      line-height: 1.4;
    }

    & > .radio-description {
      grid-column: 2;
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      line-height: 1.5;
    }
  }

  /* -- Card variant ------------------------------------------- */
  .radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 150ms, background 150ms;

    &:hover {
      background: var(--accent);
    }

    &:has(.radio:checked) {
      border-color: var(--primary);
    }

    &:has(.radio:focus-visible) {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:has(.radio:disabled) {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    & > .radio {
      position: absolute;
      top: 1rem;
      right: 1rem;
    }

    & > label {
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
    }

    & > .radio-description {
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      line-height: 1.5;
    }
  }

  .radio {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--background);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 150ms;

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

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--primary);
        transform: translate(-50%, -50%);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

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

      & + label { opacity: 0.5; cursor: not-allowed; }
    }

    &[aria-invalid="true"] {
      border-color: var(--destructive);

      &:checked {
        border-color: var(--destructive);

        &::after {
          background: var(--destructive);
        }
      }
    }
  }

  /* Helper text for group-level descriptions */
  .radio-group-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: -0.125rem 0 0.25rem;
  }

  /* -- Accessibility ------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .radio,
    .radio-card {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .radio {
      border-color: ButtonText;

      &:checked {
        border-color: Highlight;

        &::after {
          background: Highlight;
        }
      }

      &:disabled {
        border-color: GrayText;

        &:checked::after {
          background: GrayText;
        }
      }
    }

    .radio-card {
      border-color: ButtonText;

      &:has(.radio:checked) {
        border-color: Highlight;
      }
    }
  }
}

/* ===== form ===== */
/* -- Form component --------------------------------------------- */

@layer components {
  .form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* -- Form field -------------------------------------------- */
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0;

    /* -- Horizontal orientation (label beside control) ------- */
    &[data-orientation="horizontal"] {
      flex-direction: row;
      align-items: start;
      gap: 1rem;

      & > .label {
        margin-bottom: 0;
        padding-top: 0.5rem;
        min-width: 8rem;
        flex-shrink: 0;
      }
    }

    /* -- Invalid state -------------------------------------- */
    &[data-invalid] {
      & > .field-description {
        color: var(--destructive);
      }
    }
  }

  /* -- Inline field (checkbox, switch, radio inline) -------- */
  .form-field-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > .label {
      margin-bottom: 0;
    }
  }

  /* -- Notification / switch row layout --------------------- */
  .form-field-row {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-xs);

    & > div {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
    }

    & > div > .label {
      margin-bottom: 0;
      line-height: 1.4;
    }

    & > div > .field-description {
      margin: 0;
    }

    &[data-disabled] {
      opacity: 0.6;
    }
  }

  /* -- Button actions row ----------------------------------- */
  .form-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
  }

  /* -- Fieldset --------------------------------------------- */
  .form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & > legend {
      font-size: 0.875rem;
      font-weight: 500;
      font-family: var(--font-sans);
      color: var(--foreground);
      padding: 0;
      margin-bottom: 0.25rem;
    }

    & > .field-description {
      margin: -0.25rem 0 0.5rem;
    }
  }

  /* -- Form group (vertical stack of fields) ---------------- */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-contrast: more) {
    .form-field-row {
      border-width: 2px;
    }
  }

  @media (forced-colors: active) {
    .form-field-row {
      border-color: ButtonBorder;
    }

    .form-fieldset > legend {
      color: LinkText;
    }
  }
}

/* ===== accordion ===== */
/* -- Accordion component --------------------------------------- */

@layer components {
  .accordion {
    display: flex;
    flex-direction: column;
  }

  .accordion-item {
    border-bottom: 1px solid var(--border);

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

    /* -- Content animation (CSS-only) ------------------------- */
    & ::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open] ::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .accordion-item[open] ::details-content {
      block-size: 0;
    }
  }

  /* Remove default details marker */
  .accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    list-style: none;
    color: var(--foreground);
    transition: color 150ms;

    &::-webkit-details-marker { display: none; }
    &::marker { content: ''; }
    &:hover { text-decoration: underline; }
  }

  /* Chevron rotation */
  .accordion-chevron {
    color: var(--muted-foreground);
    transition: transform 200ms ease;
    flex-shrink: 0;

    details[open] > .accordion-trigger & {
      transform: rotate(180deg);
    }
  }

  /* Content */
  .accordion-content {
    padding-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    overflow: hidden;

    & p { margin: 0; }
  }
}

/* ===== tabs ===== */
/* -- Tabs component -------------------------------------------- */

@layer components {
  /* -- Default (pill) variant ----------------------------------- */
  .tab-list {
    display: inline-flex;
    align-items: center;
    background: var(--muted);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    gap: 0.125rem;

    /* -- Line variant --------------------------------------------- */
    &[data-variant="line"] {
      background: transparent;
      border-radius: 0;
      padding: 0;
      gap: 0;
      border-bottom: 1px solid var(--border);

      & .tab-trigger {
        border-radius: 0;
        padding: 0.5rem 1rem;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;

        &[aria-selected="true"] {
          background: transparent;
          color: var(--foreground);
          border-bottom-color: var(--primary);
          box-shadow: none;
        }
      }
    }

    /* -- Vertical orientation ------------------------------------ */
    &[aria-orientation="vertical"] {
      flex-direction: column;
      width: auto;

      & .tab-trigger {
        justify-content: flex-start;
        width: 100%;
      }
    }
  }

  .tab-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: calc(var(--radius) * 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
    outline: none;

    &[aria-selected="true"] {
      background: var(--background);
      color: var(--foreground);
      box-shadow: 0 1px 3px oklch(0 0 0 / 0.08), 0 0 0 1px var(--border);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }

  /* -- Vertical layout container ----------------------------- */
  .tabs:has(.tab-list[aria-orientation="vertical"]) {
    display: flex;
    gap: 1rem;
    align-items: flex-start;

    & > .tab-content {
      margin-top: 0;
      flex: 1;
    }
  }

  /* -- Panel ---------------------------------------------------- */
  .tab-content {
    margin-top: 0.75rem;

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &[hidden] { display: none; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .tab-trigger { transition: none; }
  }

  @media (forced-colors: active) {
    .tab-trigger[aria-selected="true"] {
      border: 2px solid Highlight;
      box-shadow: none;
    }

    .tab-list[data-variant="line"] .tab-trigger[aria-selected="true"] {
      border: none;
      border-bottom: 2px solid Highlight;
    }
  }
}

/* ===== breadcrumb ===== */
@layer components {
  .breadcrumb-list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.375rem; list-style: none; margin: 0; padding: 0;
    font-size: 0.875rem;
  }
  .breadcrumb-item { display: inline-flex; align-items: center; gap: 0.375rem; }
  .breadcrumb-link {
    color: var(--muted-foreground); text-decoration: none;
    border-radius: var(--radius-sm); outline: none;
    transition: color 150ms ease;
    &:hover { color: var(--foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .breadcrumb-separator {
    color: var(--muted-foreground); font-size: 0.75rem;
    & svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

    /* RTL: auto-flip chevron separators */
    [dir="rtl"] & svg { scale: -1 1; }
  }
  .breadcrumb-page { color: var(--foreground); font-weight: 400; }
  .breadcrumb-ellipsis {
    display: flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; color: var(--muted-foreground);
    & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .breadcrumb-link { transition: none; }
  }

  @media (prefers-contrast: more) {
    .breadcrumb-link { text-decoration: underline; }
    .breadcrumb-page { font-weight: 600; }
  }

  @media (forced-colors: active) {
    .breadcrumb-link {
      &:hover { forced-color-adjust: none; color: HighlightText; background: Highlight; }
    }
    .breadcrumb-page { color: CanvasText; }
    .breadcrumb-separator { color: GrayText; }
  }
}

/* ===== separator ===== */
/* -- Separator component ---------------------------------------- */

@layer components {
  .separator {
    border: none;
    margin: 0;
    flex-shrink: 0;
    background: var(--border);

    /* Horizontal (default) */
    height: 1px;
    width: 100%;

    /* Vertical */
    &[data-orientation="vertical"] {
      height: auto;
      width: 1px;
      align-self: stretch;
    }

    /* Decorative — hidden from assistive technology */
    &[aria-hidden="true"],
    &[role="none"] {
      /* No visual change — purely semantic */
    }
  }

  /* -- Labeled separator ------------------------------------- */
  .separator-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    & .separator { flex: 1; }

    & span {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
      flex-shrink: 0;
    }
  }

  /* -- Accessibility ----------------------------------------- */
  @media (forced-colors: active) {
    .separator {
      background: CanvasText;
    }
  }

  @media (prefers-contrast: more) {
    .separator {
      background: var(--foreground);
      height: 2px;

      &[data-orientation="vertical"] {
        width: 2px;
        height: auto;
      }
    }
  }
}

/* ===== table ===== */
@layer components {
  .table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    container-type: inline-size;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
    caption-side: bottom;
  }

  .table-caption {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-align: center;
  }

  .table-head {
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: var(--muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);

    &:first-child {
      border-top-left-radius: var(--radius-lg);
    }

    &:last-child {
      border-top-right-radius: var(--radius-lg);
    }
  }

  .table-row {
    border-bottom: 1px solid var(--border);
    transition: background-color 150ms ease;

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

    tbody &:hover {
      background-color: var(--muted);
    }
  }

  .table-cell {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: var(--foreground);
  }

  tfoot .table-row {
    background-color: var(--muted);
    border-top: 1px solid var(--border);
    font-weight: 500;
  }

  tfoot .table-cell:first-child {
    border-bottom-left-radius: var(--radius-lg);
  }

  tfoot .table-cell:last-child {
    border-bottom-right-radius: var(--radius-lg);
  }

  /* -- Container query: compact table in narrow containers -- */
  @container (max-width: 480px) {
    .table-head,
    .table-cell { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
  }
}

/* ===== alert ===== */
@layer components {
  .alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--foreground);
    background-color: var(--background);

    &[data-variant="destructive"] {
      border-color: var(--destructive);
      color: var(--destructive);

      & .alert-title {
        color: var(--destructive);
      }

      & .alert-description {
        color: var(--destructive);
        opacity: 0.9;
      }

      & .alert-icon {
        color: var(--destructive);
      }
    }
  }

  .alert-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--foreground);
  }

  .alert-content {
    flex: 1;
    min-width: 0;
  }

  .alert-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--foreground);
  }

  .alert-description {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted-foreground);
  }

  .alert-action {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
  }
}

/* ===== avatar ===== */
@layer components {
  .avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--muted);

    &[data-size="sm"] {
      width: 2rem;
      height: 2rem;
      font-size: 0.6875rem;
    }

    &[data-size="lg"] {
      width: 3rem;
      height: 3rem;
      font-size: 0.875rem;
    }
  }

  .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  .avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: var(--muted);
    position: absolute;
    inset: 0;
  }

  /* Hide fallback when image is loaded */
  .avatar:has(.avatar-image:not([data-error])) .avatar-fallback {
    display: none;
  }

  .avatar-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: #16a34a;
    border: 2px solid var(--background);
  }

  /* Avatar group */
  .avatar-group {
    display: flex;
    align-items: center;

    & .avatar {
      border: 2px solid var(--background);
      margin-left: -0.5rem;

      &:first-child {
        margin-left: 0;
      }
    }
  }

  .avatar-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    border: 2px solid var(--background);
    margin-left: -0.5rem;
  }
}