/*
 * Panel component.
 * A container for content sections, cards, dialogs.
 * Uses BEM naming convention.
 */
@layer components {
  .panel {
    --panel-radius: 0.75em;

    background: var(--surface-1);
    border-radius: var(--panel-radius);
    color: var(--text-on-surface-1);
    margin-inline: auto;
    max-inline-size: var(--size-content-3);
    padding: var(--block-space-double) var(--inline-space-double);
  }

  .panel__header {
    margin-block-end: var(--block-space);
  }

  .panel__title {
    font-size: var(--text-large);
    font-weight: 700;
    margin: 0;
  }

  .panel__description {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: var(--block-space-half);
  }

  .panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half) var(--inline-space);
    margin-block-end: var(--block-space);
  }

  .panel__body {
    /* Default body styles */
  }

  .panel__empty {
    color: var(--color-ink-dark);
    font-style: italic;
    padding: var(--block-space);
    text-align: center;
  }

  .panel__footer {
    margin-block-start: var(--block-space);
  }

  /*
   * Wide panel (prose-width, responsive)
   */
  .panel--wide {
    background: var(--surface-1);
    border-radius: var(--panel-radius, 0.75em);
    inline-size: min(95%, var(--size-content-4));
  }

  /*
   * Narrow panel
   */
  .panel--narrow {
    max-inline-size: 32rem;
    margin-inline: auto;
  }

  /*
   * Centered panel
   * For authentication pages, dialogs, etc.
   */
  .panel--centered {
    --panel-padding: var(--block-space-double) var(--inline-space-double);

    max-inline-size: 24rem;
    margin-inline: auto;
  }

  /*
   * Panel with shadow
   */
  .panel--elevated {
    box-shadow: var(--shadow);
  }

  /*
   * Panel with border
   */
  .panel--outlined {
    border: var(--border);
  }

  /*
   * Compact panel
   */
  .panel--compact {
    --panel-padding: var(--block-space-half) var(--inline-space-half);
  }

  /*
   * Shaded background
   */
  .panel--shaded {
    --panel-bg: var(--color-ink-lightest);
  }

  /*
   * Session item - for active sessions list
   */
  .session-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .session-item--current {
    background: var(--color-ink-lightest);
    border-radius: 0.5rem;
    margin-inline: calc(-1 * var(--inline-space));
    padding-inline: var(--inline-space);
  }

  .session-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .session-item__device {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  .session-item__agent {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-item__badge {
    background: oklch(var(--lch-green-lighter));
    border-radius: 1em;
    color: oklch(var(--lch-green-darkest));
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: 0.125em 0.5em;
  }

  .session-item__meta {
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space);
    margin-block-start: 0.25rem;
  }

  /*
   * Token item - for API tokens list
   */
  .token-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .token-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .token-item__name {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  .token-item__permission {
    border-radius: 1em;
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: 0.125em 0.5em;
  }

  .token-item__permission--read {
    background: oklch(var(--lch-blue-lighter));
    color: oklch(var(--lch-blue-darkest));
  }

  .token-item__permission--write {
    background: oklch(var(--lch-purple-lighter));
    color: oklch(var(--lch-purple-darkest));
  }

  .token-item__meta {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: 0.25rem;
  }

  /*
   * Token reveal - for showing newly created token
   */
  .token-reveal {
    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 0.5rem;
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space);
  }

  .token-reveal__value {
    flex: 1;
    overflow: hidden;

    code {
      background: none;
      display: block;
      font-family: var(--font-mono);
      font-size: var(--text-small);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .token-reveal__warning {
    align-items: center;
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space);
  }

  /*
   * Panel divider and sections
   */
  .panel__divider {
    border: none;
    border-block-start: var(--border);
    margin-block: var(--block-space-double);
  }

  .panel__section {
    margin-block-start: var(--block-space);
  }

  .panel__subtitle {
    font-size: var(--text-normal);
    font-weight: 600;
    margin-block-end: var(--block-space);
  }

  .panel__footer-actions {
    display: flex;
    gap: var(--inline-space);
  }

  /*
   * User item - for users list
   */
  .user-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .user-item__avatar {
    flex-shrink: 0;
  }

  .user-item__image,
  .user-item__initials {
    block-size: 2.5rem;
    border-radius: 50%;
    display: block;
    inline-size: 2.5rem;
    object-fit: cover;
  }

  .user-item__initials {
    align-items: center;
    color: var(--color-white);
    display: flex;
    font-size: var(--text-small);
    font-weight: 700;
    justify-content: center;
  }

  .user-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .user-item__name {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);

    a {
      color: var(--color-ink);
      font-weight: 600;
      text-decoration: none;

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

  .user-item__badge {
    border-radius: 1em;
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: 0.125em 0.5em;
  }

  .user-item__badge--you {
    background: oklch(var(--lch-blue-lighter));
    color: oklch(var(--lch-blue-darkest));
  }

  .user-item__badge--owner {
    background: oklch(var(--lch-purple-lighter));
    color: oklch(var(--lch-purple-darkest));
  }

  .user-item__badge--admin {
    background: oklch(var(--lch-green-lighter));
    color: oklch(var(--lch-green-darkest));
  }

  .user-item__badge--member {
    background: var(--color-ink-lighter);
    color: var(--color-ink-darker);
  }

  .user-item__meta {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: 0.125rem;
  }

  /*
   * User profile - for user show page
   */
  .user-profile {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
  }

  .user-profile__avatar {
    flex-shrink: 0;
  }

  .user-profile__image,
  .user-profile__initials {
    block-size: 4rem;
    border-radius: 50%;
    display: block;
    inline-size: 4rem;
    object-fit: cover;
  }

  .user-profile__initials {
    align-items: center;
    color: var(--color-white);
    display: flex;
    font-size: var(--text-large);
    font-weight: 700;
    justify-content: center;
  }

  .user-profile__info {
    flex: 1;
  }

  .user-profile__name {
    font-size: var(--text-large);
    font-weight: 700;
    margin: 0;
  }

  .user-profile__email {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin: 0.25rem 0;
  }

  /*
   * Detail list - for showing key-value pairs
   */
  .detail-list {
    margin: 0;
  }

  .detail-list__item {
    border-block-end: var(--border);
    display: flex;
    justify-content: space-between;
    padding: var(--block-space-half) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .detail-list__label {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
  }

  .detail-list__value {
    font-weight: 500;
  }

  .detail-list__value--with-action {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  /*
   * Settings links - for navigation in settings
   */
  .settings-links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .settings-link {
    align-items: center;
    border-block-end: var(--border);
    color: var(--color-ink);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;
    text-decoration: none;
    transition: background-color 100ms var(--ease-out-expo);

    &:last-child {
      border-block-end: none;
    }

    &:hover {
      color: var(--color-link);
    }
  }

  .settings-link__content {
    flex: 1;

    strong {
      display: block;
    }

    span {
      color: var(--color-ink-dark);
      font-size: var(--text-small);
    }
  }

  .settings-link__arrow {
    color: var(--color-ink-light);
  }

  /*
   * Conference item - for conferences list
   */
  .conference-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .conference-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .conference-item__name {
    a {
      color: var(--color-ink);
      font-weight: 600;
      text-decoration: none;

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

  /*
   * Assignment item - for conference assignments list
   */
  .assignment-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .assignment-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .assignment-item__name {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-weight: 600;
    gap: var(--inline-space-half);
  }

  .assignment-item__badge {
    border-radius: 1em;
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: 0.125em 0.5em;
  }

  .assignment-item__badge--attendee {
    background: var(--color-ink-lighter);
    color: var(--color-ink-darker);
  }

  .assignment-item__badge--speaker {
    background: oklch(var(--lch-purple-lighter));
    color: oklch(var(--lch-purple-darkest));
  }

  .assignment-item__badge--volunteer {
    background: oklch(var(--lch-green-lighter));
    color: oklch(var(--lch-green-darkest));
  }

  .assignment-item__badge--staff {
    background: oklch(var(--lch-blue-lighter));
    color: oklch(var(--lch-blue-darkest));
  }

  .assignment-item__meta {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: 0.125rem;
  }

  .assignment-item__actions {
    display: flex;
    gap: var(--inline-space-half);
  }

  /*
   * Join code - for invite link display
   */
  .join-code {
    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 0.5rem;
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space);
  }

  .join-code__url {
    flex: 1;
    overflow: hidden;

    code {
      background: none;
      display: block;
      font-family: var(--font-mono);
      font-size: var(--text-small);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .join-code__stats {
    display: flex;
    gap: var(--inline-space-double);
    margin-block-start: var(--block-space);
    text-align: center;
  }

  .join-code__stat {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .join-code__stat-value {
    font-size: var(--text-large);
    font-weight: 700;
  }

  .join-code__stat-label {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
  }

  /*
   * Event list - for activity log
   */
  .event-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .event-item {
    align-items: flex-start;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .event-item__icon {
    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 50%;
    color: var(--color-ink-dark);
    display: flex;
    flex-shrink: 0;
    block-size: 2rem;
    inline-size: 2rem;
    justify-content: center;

    .icon {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }

  .event-item__content {
    flex: 1;
    min-inline-size: 0;
  }

  .event-item__action {
    font-weight: 500;
  }

  .event-item__target {
    color: var(--color-ink-dark);
    font-weight: 400;
    margin-inline-start: 0.25em;
  }

  .event-item__meta {
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space);
    margin-block-start: 0.25rem;
  }

  .event-item__details {
    margin-block-start: var(--block-space-half);

    summary {
      color: var(--color-link);
      cursor: pointer;
      font-size: var(--text-small);
    }
  }

  .event-item__metadata {
    background: var(--color-ink-lightest);
    border-radius: 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    margin-block-start: var(--block-space-half);
    overflow-x: auto;
    padding: var(--block-space-half);
    white-space: pre-wrap;
    word-break: break-word;
  }

  /*
   * Notification list - for notifications page
   */
  .notification-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block-end: var(--pad);
  }

  .notification-item {
    align-items: flex-start;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .notification-item--unread {
    background: oklch(var(--lch-blue-lighter) / 0.3);
    border-radius: 0.5rem;
    margin-inline: calc(-1 * var(--inline-space));
    padding-inline: var(--inline-space);
  }

  .notification-item__icon {
    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 50%;
    color: var(--color-ink-dark);
    display: flex;
    flex-shrink: 0;
    block-size: 2rem;
    inline-size: 2rem;
    justify-content: center;

    .icon {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }

  .notification-item--unread .notification-item__icon {
    background: oklch(var(--lch-blue-light));
    color: oklch(var(--lch-blue-darkest));
  }

  .notification-item__content {
    flex: 1;
    min-inline-size: 0;
  }

  .notification-item__link {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: var(--color-link);
    }
  }

  .notification-item__title {
    font-weight: 500;
  }

  .notification-item__description {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: 0.125rem;
  }

  .notification-item__meta {
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space);
    margin-block-start: 0.25rem;
  }

  .notification-item__actions {
    flex-shrink: 0;
  }

  /*
   * License item - for license list
   */
  .license-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .license-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .license-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .license-item__key {
    code {
      background: var(--color-ink-lightest);
      border-radius: 0.25em;
      font-family: var(--font-mono);
      font-size: var(--text-normal);
      font-weight: 600;
      padding: 0.25em 0.5em;
    }
  }

  .license-item__meta {
    color: var(--color-ink-dark);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space-half);
  }

  .license-item__actions {
    display: flex;
    gap: var(--inline-space-half);
  }

  /*
   * Download grid - for app downloads
   */
  .download-grid {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  }

  .download-card {
    align-items: center;
    background: var(--color-ink-lightest);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: var(--block-space);
    text-align: center;
    text-decoration: none;
    transition: border-color 150ms var(--ease-out-expo),
                background-color 150ms var(--ease-out-expo);

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

  .download-card__icon {
    color: var(--color-ink-dark);
    block-size: 2rem;
    inline-size: 2rem;
  }

  .download-card__platform {
    font-weight: 600;
    font-size: var(--text-small);
  }

  .download-card__note {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
  }
}