/*
  ----------------------------------------
  Admin (superadmin shared layout)
  ----------------------------------------
*/

@layer styles {
  .admin {
    /* Admin nav links (left menu) */
    .nav-link-admin {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 0.4rem;
      text-decoration: none;
      color: var(--midtone);
      padding: 0.5rem 0.5rem;
      border: 1px solid transparent;
      border-radius: var(--rounded-lg);
      transition: color 300ms ease;
      font-weight: var(--font-semibold);

      &.active,
      &:hover,
      &:active {
        background: var(--darker);
        color: var(--white);
      }

      svg {
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  }
}

/* Admin shell details; layout and spacing compose Prewind utilities. */
@layer styles {
  .admin.ui-dark {
    .ui-admin-rail {
      background: var(--workspace-rail);
      border-bottom: 1px solid var(--light);
    }
    .ui-admin-logo { width: 6.5rem; }
    .nav-link-admin {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      text-decoration: none;
      color: var(--midtone);
      padding: var(--space-xs);
      border-radius: var(--field-border-radius);
      transition: background-color 150ms ease, color 150ms ease;
      font-weight: var(--font-normal);
    }
    .nav-link-admin:hover { background: var(--lighter); color: var(--darker); }
    .nav-link-admin.active { background: var(--workspace-selected); color: var(--brand-2); }
    .nav-link-admin svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
    .ui-admin-account .ui-dropdown { width: 100%; }
    .ui-admin-account .ui-dropdown > button { width: 100%; }
    .ui-admin-content { min-width: 0; }
    .ui-admin-content .crud-header { min-height: 5rem; gap: var(--space-sm); flex-wrap: wrap; }
    .ui-admin-content .crud-header :is(h1, h3) { font-size: var(--text-xl); margin: 0; }
    .ui-admin-content table { font-variant-numeric: tabular-nums; }
    .ui-admin-content :is(th, td) { padding: var(--space-sm); }
    .ui-admin-content tbody tr:hover { background: var(--lighter); }
    .ui-admin-destinations { max-width: var(--max-w-form); }
    .ui-admin-destinations > a { color: var(--darker); transition: background-color 150ms ease; }
    .ui-admin-destinations > a:hover { background: var(--lighter); }
    .ui-admin-destinations p { color: var(--midtone); }
  }

  @media (min-width: 1024px) {
    .admin.ui-dark {
      .ui-admin-rail { position: sticky; top: 0; width: 12rem; height: 100dvh; border-right: 1px solid var(--light); border-bottom: 0; }
      .ui-admin-account .ui-dropdown menu { top: auto; bottom: calc(100% + var(--space-xs)); left: 0; right: auto; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .admin.ui-dark :is(.nav-link-admin, .ui-admin-destinations > a) { transition: none; }
  }
}