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

html {
  background: #f8fbff;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 48%, #f7fafc 100%);
  color: #0f172a;
}

#root {
  min-height: 100vh;
}

* {
  box-sizing: border-box;
}

::selection {
  background: rgba(8, 145, 178, 0.18);
  color: #082f49;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.72);
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 145, 178, 0.9), rgba(15, 23, 42, 0.92));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.96), rgba(15, 23, 42, 0.96));
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.container {
  @apply mx-auto px-4 py-8;
}

.btn {
  @apply px-4 py-2 rounded font-semibold transition-all;
}

.btn-primary {
  @apply btn bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
  @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
}

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

.form-group {
  @apply mb-4;
}

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

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

.table {
  @apply w-full border-collapse;
}

.table th {
  @apply bg-gray-100 px-4 py-2 text-left font-semibold border-b;
}

.table td {
  @apply px-4 py-2 border-b;
}

.badge {
  @apply inline-block px-2 py-1 rounded text-xs font-semibold;
}

.badge-success {
  @apply badge bg-green-100 text-green-800;
}

.badge-warning {
  @apply badge bg-yellow-100 text-yellow-800;
}

.badge-danger {
  @apply badge bg-red-100 text-red-800;
}

.badge-info {
  @apply badge bg-blue-100 text-blue-800;
}

@media (max-width: 1023px) {
  body {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }
}

.public-page {
  @apply min-h-screen bg-slate-100/80 py-10;
}

.public-page__wrapper {
  @apply mx-auto flex max-w-7xl flex-col gap-8 px-4 sm:px-6 lg:px-8;
}

.public-card {
  @apply overflow-hidden rounded-[32px] border border-slate-200/80 bg-white shadow-[0_24px_60px_rgba(15,23,42,0.08)];
}

.public-card__body {
  @apply p-6 sm:p-8;
}

.public-panel {
  @apply rounded-[28px] border border-slate-200/80 bg-slate-50 p-5 shadow-sm;
}

.public-actions {
  @apply flex flex-wrap items-center gap-3 pt-4;
}

.public-btn-primary {
  @apply inline-flex items-center justify-center rounded-2xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-slate-800 disabled:opacity-50;
}

.public-btn-secondary {
  @apply inline-flex items-center justify-center rounded-2xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 disabled:opacity-50;
}

.public-info-grid {
  @apply mt-6 grid gap-3 sm:grid-cols-2;
}

.public-status-tag {
  @apply rounded-full bg-slate-100 px-4 py-2 text-sm text-slate-600;
}
