/*
 * Epistola Design System — Shared Components
 *
 * Reusable UI patterns used across the editor and main app.
 * These are intentionally generic (not scoped to a specific panel).
 *
 * Inspired by shadcn/ui: clean, minimal, precise micro-interactions.
 */

@layer components {

  /* ── Buttons ──────────────────────────────────────────────────────────── */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ep-space-2);
    height: var(--ep-h-9);
    padding: 0 var(--ep-space-4);
    font-size: var(--ep-text-sm);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--ep-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--ep-transition-colors);
    text-decoration: none;

    &:focus-visible {
      outline: none;
      box-shadow: var(--ep-ring);
    }

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

  .btn-primary {
    background-color: var(--ep-primary);
    color: var(--ep-primary-foreground);

    &:hover {
      background-color: var(--ep-blue-700);
      color: var(--ep-primary-foreground);
    }
  }

  .btn-secondary {
    background-color: var(--ep-muted);
    color: var(--ep-accent-foreground);

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

  .btn-outline {
    border-color: var(--ep-input-border);
    background-color: var(--ep-white);
    color: var(--ep-foreground);

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

  .btn-ghost {
    background-color: transparent;
    color: var(--ep-foreground);

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

  .btn-destructive {
    background-color: var(--ep-destructive);
    color: var(--ep-destructive-foreground);

    &:hover {
      background-color: var(--ep-red-700);
      color: var(--ep-destructive-foreground);
    }
  }

  .btn-sm {
    height: var(--ep-h-8);
    padding: 0 var(--ep-space-3);
    font-size: var(--ep-text-xs);
    border-radius: var(--ep-radius-sm);
  }

  .btn-lg {
    height: var(--ep-h-11);
    padding: 0 var(--ep-space-8);
    font-size: var(--ep-text-base);
    border-radius: var(--ep-radius-md);
  }

  .btn-icon {
    width: var(--ep-h-9);
    padding: 0;
  }

  .btn-icon.btn-sm {
    width: var(--ep-h-8);
  }

  /* ── Cards ────────────────────────────────────────────────────────────── */

  .card {
    background-color: var(--ep-card);
    border: 1px solid var(--ep-border-color);
    border-radius: var(--ep-radius-lg);
    box-shadow: var(--ep-shadow-sm);
  }

  .card-header {
    display: flex;
    flex-direction: column;
    gap: var(--ep-space-1-5);
    padding: var(--ep-space-6);
    border-bottom: 1px solid var(--ep-border-color);
  }

  .card-title {
    font-size: var(--ep-text-lg);
    font-weight: 600;
    line-height: var(--ep-leading-tight);
    letter-spacing: var(--ep-tracking-tight);
    color: var(--ep-card-foreground);
  }

  .card-description {
    font-size: var(--ep-text-sm);
    color: var(--ep-muted-foreground);
  }

  .card-content {
    padding: var(--ep-space-6);
  }

  .card-footer {
    display: flex;
    align-items: center;
    padding: var(--ep-space-6);
    border-top: 1px solid var(--ep-border-color);
  }

  /* ── Form controls ────────────────────────────────────────────────────── */

  .ep-label {
    display: block;
    font-size: var(--ep-text-sm);
    font-weight: 500;
    color: var(--ep-foreground);
    margin-bottom: var(--ep-space-1-5);
  }

  .ep-input {
    display: flex;
    width: 100%;
    height: var(--ep-h-9);
    padding: var(--ep-space-1-5) var(--ep-space-3);
    font-size: var(--ep-text-sm);
    line-height: var(--ep-leading-normal);
    color: var(--ep-foreground);
    background-color: var(--ep-white);
    border: 1px solid var(--ep-input-border);
    border-radius: var(--ep-radius-md);
    transition: var(--ep-transition-colors);

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

    &:focus {
      outline: none;
      border-color: var(--ep-ring-color);
      box-shadow: var(--ep-ring);
    }

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

    &.mono {
      font-family: var(--ep-font-mono);
    }
  }

  .ep-textarea {
    display: flex;
    width: 100%;
    min-height: 5rem;
    padding: var(--ep-space-2) var(--ep-space-3);
    font-size: var(--ep-text-sm);
    line-height: var(--ep-leading-normal);
    color: var(--ep-foreground);
    background-color: var(--ep-white);
    border: 1px solid var(--ep-input-border);
    border-radius: var(--ep-radius-md);
    resize: vertical;
    transition: var(--ep-transition-colors);

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

    &:focus {
      outline: none;
      border-color: var(--ep-ring-color);
      box-shadow: var(--ep-ring);
    }

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

  .ep-select {
    display: flex;
    width: 100%;
    height: var(--ep-h-9);
    padding: var(--ep-space-1-5) var(--ep-space-3);
    font-size: var(--ep-text-sm);
    line-height: var(--ep-leading-normal);
    color: var(--ep-foreground);
    background-color: var(--ep-white);
    border: 1px solid var(--ep-input-border);
    border-radius: var(--ep-radius-md);
    transition: var(--ep-transition-colors);

    &:focus {
      outline: none;
      border-color: var(--ep-ring-color);
      box-shadow: var(--ep-ring);
    }

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

  .ep-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: var(--ep-radius-sm);
    border: 1px solid var(--ep-input-border);
    accent-color: var(--ep-primary);
  }

  /* ── Badges ───────────────────────────────────────────────────────────── */

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--ep-space-2-5);
    font-size: var(--ep-text-xs);
    font-weight: 500;
    line-height: var(--ep-leading-normal);
    border-radius: var(--ep-radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
    transition: var(--ep-transition-colors);
  }

  .badge-primary {
    background-color: var(--ep-blue-100);
    color: var(--ep-blue-800);
    border-color: var(--ep-blue-200);
  }

  .badge-success {
    background-color: var(--ep-green-100);
    color: var(--ep-green-800);
    border-color: var(--ep-green-100);
  }

  .badge-warning {
    background-color: var(--ep-amber-100);
    color: var(--ep-amber-800);
    border-color: var(--ep-amber-100);
  }

  .badge-destructive {
    background-color: var(--ep-red-100);
    color: var(--ep-red-700);
    border-color: var(--ep-red-200);
  }

  .badge-outline {
    background-color: transparent;
    color: var(--ep-foreground);
    border-color: var(--ep-border-color);
  }

  /* ── Tables ───────────────────────────────────────────────────────────── */

  .ep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ep-text-sm);

    & thead {
      border-bottom: 1px solid var(--ep-border-color);

      & th {
        padding: var(--ep-space-3) var(--ep-space-4);
        text-align: left;
        font-weight: 500;
        font-size: var(--ep-text-xs);
        color: var(--ep-muted-foreground);
        text-transform: uppercase;
        letter-spacing: var(--ep-tracking-wider);
      }
    }

    & tbody {
      & tr {
        border-bottom: 1px solid var(--ep-border-color);
        transition: background-color var(--ep-transition-fast);

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

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

      & td {
        padding: var(--ep-space-3) var(--ep-space-4);
        color: var(--ep-foreground);
        vertical-align: middle;
      }
    }
  }

  /* ── Icons ────────────────────────────────────────────────────────────── */

  .ep-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;

    & svg {
      width: 100%;
      height: 100%;
    }
  }

  .ep-icon-sm {
    width: 0.875rem;
    height: 0.875rem;
  }

  .ep-icon-lg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .ep-icon-xl {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* ── Layout helpers ───────────────────────────────────────────────────── */

  .separator {
    border: none;
    border-top: 1px solid var(--ep-border-color);
    margin: var(--ep-space-4) 0;
  }

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ep-space-6);

    & h1 {
      margin: 0;
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ep-space-12) var(--ep-space-4);
    text-align: center;
    color: var(--ep-muted-foreground);

    & .empty-state-icon {
      width: 3rem;
      height: 3rem;
      margin-bottom: var(--ep-space-4);
      color: var(--ep-gray-300);
    }

    & .empty-state-title {
      font-size: var(--ep-text-lg);
      font-weight: 500;
      color: var(--ep-foreground);
      margin-bottom: var(--ep-space-2);
    }

    & .empty-state-description {
      font-size: var(--ep-text-sm);
      max-width: 24rem;
    }
  }

  /* ── Alerts ───────────────────────────────────────────────────────────── */

  .alert {
    display: flex;
    gap: var(--ep-space-3);
    padding: var(--ep-space-4);
    border-radius: var(--ep-radius-lg);
    border: 1px solid transparent;
    font-size: var(--ep-text-sm);
    line-height: var(--ep-leading-normal);

    & .alert-title {
      font-weight: 600;
      margin-bottom: var(--ep-space-1);
    }
  }

  .alert-info {
    background-color: var(--ep-blue-50);
    border-color: var(--ep-blue-200);
    color: var(--ep-blue-800);
  }

  .alert-success {
    background-color: var(--ep-green-50);
    border-color: var(--ep-green-100);
    color: var(--ep-green-800);
  }

  .alert-warning {
    background-color: var(--ep-amber-50);
    border-color: var(--ep-amber-200);
    color: var(--ep-amber-800);
  }

  .alert-error {
    background-color: var(--ep-red-50);
    border-color: var(--ep-red-200);
    color: var(--ep-red-700);
  }

  /* ── Panel patterns (existing, updated) ──────────────────────────────── */

  .panel-heading {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ep-muted-foreground);
    text-transform: uppercase;
    letter-spacing: var(--ep-tracking-wider);
    padding: var(--ep-space-1) var(--ep-space-2);
    margin-bottom: var(--ep-space-1);
  }

  .panel-empty {
    padding: var(--ep-space-3);
    font-size: var(--ep-text-sm);
    color: var(--ep-gray-400);
  }

  .panel-error {
    padding: var(--ep-space-3);
    font-size: var(--ep-text-sm);
    color: var(--ep-red-400);
  }

  /* ── Danger button (existing, updated) ───────────────────────────────── */

  .ep-btn-danger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--ep-h-9);
    padding: 0 var(--ep-space-3);
    font-size: var(--ep-text-sm);
    font-weight: 500;
    background: var(--ep-red-50);
    color: var(--ep-red-600);
    border: 1px solid var(--ep-red-200);
    border-radius: var(--ep-radius-md);
    transition: var(--ep-transition-colors);

    &:hover {
      background: var(--ep-red-100);
      border-color: var(--ep-red-400);
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 var(--ep-ring-offset) var(--ep-white), 0 0 0 calc(var(--ep-ring-offset) + var(--ep-ring-width)) var(--ep-red-500);
    }
  }
}