@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

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

:root {
  --brand-50: #f4f8ff;
  --brand-100: #dfeafe;
  --brand-200: #b9d3ff;
  --brand-300: #8ab3ff;
  --brand-400: #5d91ff;
  --brand-500: #3b6cff;
  --brand-600: #2c53d3;
  --brand-700: #233da3;
  --brand-800: #1f2f73;
  --brand-900: #1a2552;
  --erp-font-family-base: 'Work Sans', sans-serif;
  --erp-title-size: 20px;
  --erp-title-weight: 600;
  --erp-title-style: normal;
  --erp-subtitle-size: 14px;
  --erp-subtitle-weight: 400;
  --erp-subtitle-style: normal;
  --erp-field-label-size: 12px;
  --erp-field-label-weight: 500;
  --erp-field-label-style: normal;
  --erp-field-input-size: 12px;
  --erp-field-input-weight: 400;
  --erp-field-input-style: normal;
  --erp-table-header-size: 11px;
  --erp-table-header-weight: 600;
  --erp-table-header-style: normal;
  --erp-table-cell-size: 12px;
  --erp-table-cell-weight: 400;
  --erp-table-cell-style: normal;
  --erp-button-size: 12px;
  --erp-button-weight: 600;
  --erp-button-style: normal;
  --erp-menu-size: 12px;
  --erp-menu-weight: 600;
  --erp-menu-style: normal;
  --erp-card-title-size: 13px;
  --erp-card-title-weight: 600;
  --erp-card-title-style: normal;
  --erp-body-size: 12px;
  --erp-body-weight: 400;
  --erp-body-style: normal;
}

body {
  font-family: var(--erp-font-family-base);
  background:
    radial-gradient(circle at top left, rgba(59, 108, 255, 0.2), transparent 40%),
    radial-gradient(circle at bottom right, rgba(26, 37, 82, 0.25), transparent 45%),
    linear-gradient(120deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.85));
}

@layer components {
  .layout {
    @apply min-h-screen;
  }

  .topbar {
    @apply sticky top-0 z-10 flex items-center justify-between border-b border-slate-200 bg-white/90 px-7 py-4 backdrop-blur;
  }

  .brand {
    @apply flex items-center gap-3;
  }

  .topbar h1 {
    font-size: var(--erp-title-size);
    font-weight: var(--erp-title-weight);
    font-style: var(--erp-title-style);
  }

  .topbar nav a,
  .topbar nav button {
    @apply ml-3 inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition;
  }

  .topbar nav a.active {
    @apply bg-brand-500 text-white;
  }

  .content {
    @apply px-7 py-6;
  }

  .card {
    @apply mb-4 rounded-2xl border border-slate-200 bg-white/90 p-5 shadow-sm;
  }

  .login-image {
    @apply flex min-h-[240px] items-center justify-center;
  }

  .login-image img {
    @apply w-full max-w-sm rounded-xl border border-slate-200 bg-white;
  }

  .grid-layout {
    @apply grid gap-4 md:grid-cols-2 xl:grid-cols-4;
  }

  button {
    font-size: var(--erp-button-size);
    font-weight: var(--erp-button-weight);
    font-style: var(--erp-button-style);
  }

  input,
  select,
  textarea {
    font-size: var(--erp-field-input-size);
    font-weight: var(--erp-field-input-weight);
    font-style: var(--erp-field-input-style);
    @apply w-full rounded-xl border border-slate-200 px-3 py-2;
  }

  label {
    font-size: var(--erp-field-label-size);
    font-weight: var(--erp-field-label-weight);
    font-style: var(--erp-field-label-style);
    @apply text-slate-500;
  }

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

  .table th {
    font-size: var(--erp-table-header-size);
    font-weight: var(--erp-table-header-weight);
    font-style: var(--erp-table-header-style);
    @apply border-b border-slate-200 px-3 py-2 text-left text-slate-500;
  }

  .table td {
    font-size: var(--erp-table-cell-size);
    font-weight: var(--erp-table-cell-weight);
    font-style: var(--erp-table-cell-style);
    @apply border-b border-slate-100 px-3 py-2 text-left;
  }

  .subnav {
    @apply mb-4 flex gap-3 rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-sm;
  }

  .subnav button {
    @apply inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm;
  }

  .subnav button.active {
    @apply bg-brand-500 text-white;
  }

  .action-btn {
    @apply inline-flex h-10 w-10 items-center justify-center rounded-full border border-transparent shadow-sm;
  }

  .action-btn i {
    font-size: 16px;
  }

  .action-suspend {
    @apply bg-amber-400 text-amber-950;
  }

  .action-activate {
    @apply bg-emerald-400 text-emerald-950;
  }

  .action-save {
    @apply bg-brand-500 text-white;
  }

  .action-report {
    @apply bg-sky-600 text-white;
  }

  .action-delete {
    @apply bg-rose-600 text-white;
  }

  .badge {
    @apply rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700;
  }

  .modal-backdrop {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/40;
  }

  .modal {
    @apply w-[min(420px,90vw)] rounded-2xl border border-slate-200 bg-white p-6 shadow-xl;
  }
}