@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gray-50 min-h-screen;
}

.auth-container {
  @apply flex flex-col items-center justify-center min-h-screen p-4;
}

.nav-container {
  @apply fixed top-0 left-0 w-64 h-full bg-white shadow-lg z-50;
}

.nav-link {
  @apply flex items-center px-4 py-2 text-gray-700 hover:bg-primary-50 hover:text-primary-600;
}

.main-nav {
  min-width: 18.75rem;
  position: fixed;
  height: auto;
  z-index: 1;
}

.spacing-8 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.spacing-16 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.spacing-16-horizontal {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.spacing-32 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.spacing-32-horizontal {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

/* OIDC tokens scrollable container */
.oidc-tokens-scrollable pre {
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.oidc-tokens-code-box {
  width: 100%;
  margin-bottom: 2rem;
}

.spacing-32 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.nav-icon {
  @apply w-5 h-5 mr-3;
}

.content-container {
  @apply ml-64 p-8;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

.btn-primary {
  @apply bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}

.btn-secondary {
  @apply bg-secondary-100 text-secondary-700 px-4 py-2 rounded hover:bg-secondary-200 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2;
}

.input-field {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.error-text {
  @apply text-red-600 text-sm mt-1;
}

.success-text {
  @apply text-green-600 text-sm mt-1;
}