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

/*
  Design system for the portal. Every reusable component and page draws from
  these classes, so the look stays uniform. Neutrals use Tailwind slate, the
  single accent is the brand color, radii are rounded-lg / rounded-xl, and
  shadows use the shadow-card / shadow-pop scale from the config.
*/
@layer base {
  body {
    @apply bg-slate-100 text-slate-700 antialiased;
  }
}

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }
  .btn-primary {
    @apply btn bg-brand-600 text-white hover:bg-brand-700 focus-visible:ring-brand-500;
  }
  .btn-secondary {
    @apply btn border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus-visible:ring-brand-500;
  }
  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500;
  }
  /* Small square icon button (header controls) */
  .icon-btn {
    @apply inline-flex h-9 w-9 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500;
  }

  /* Forms */
  .form-label {
    @apply mb-1 block text-sm font-medium text-slate-600;
  }
  .form-input {
    @apply block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/30;
  }
  .form-help {
    @apply mt-1.5 text-xs text-slate-500;
  }
  .form-error {
    @apply mt-1.5 text-xs font-medium text-red-600;
  }

  /* Cards */
  .card {
    @apply rounded-xl border border-slate-200 bg-white shadow-card;
  }
  .card-header {
    @apply border-b border-slate-100 px-5 py-4;
  }
  .card-title {
    @apply text-sm font-semibold text-slate-800;
  }
  .card-body {
    @apply px-5 py-5;
  }
  .card-footer {
    @apply border-t border-slate-100 px-5 py-4;
  }

  /* Page typography */
  .page-header {
    @apply mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between;
  }
  .page-title {
    @apply text-xl font-semibold tracking-tight text-slate-900;
  }
  .page-subtitle {
    @apply mt-1 text-sm text-slate-500;
  }
  .section-title {
    @apply text-base font-semibold text-slate-800;
  }

  /* Tables */
  .table {
    @apply min-w-full divide-y divide-slate-200 text-sm;
  }
  .table-th {
    @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500;
  }
  .table-td {
    @apply px-4 py-3 text-slate-700;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
  }
  .badge-brand {
    @apply badge bg-brand-50 text-brand-700;
  }
  .badge-gray {
    @apply badge bg-slate-100 text-slate-600;
  }
  .badge-green {
    @apply badge bg-green-50 text-green-700;
  }

  /* Sidebar and navigation */
  .app-sidebar {
    @apply fixed inset-y-0 left-0 z-40 flex w-64 flex-col border-r border-slate-200 bg-white transition-all duration-200 lg:static lg:z-auto;
  }
  .nav-item {
    @apply relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500;
  }
  .nav-item-active {
    @apply bg-brand-50 text-brand-700 hover:bg-brand-50 hover:text-brand-700;
  }
  .nav-icon {
    @apply flex h-5 w-5 shrink-0 items-center justify-center;
  }
  .nav-label {
    @apply truncate;
  }
  .nav-tooltip {
    @apply pointer-events-none absolute left-full top-1/2 z-50 ml-3 hidden -translate-y-1/2 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs font-medium text-white shadow-pop;
  }

  /* Auth pages background */
  .auth-bg {
    @apply min-h-screen bg-gradient-to-br from-slate-100 via-white to-brand-50;
  }
}

/*
  Collapsed sidebar (desktop only). Toggled by adding the is-collapsed class to
  the body from sidebar.js, and set on first paint from a cookie so there is no
  flash. On mobile the sidebar is a full-width drawer and is unaffected.
*/
@layer components {
  .is-collapsed .app-sidebar {
    @apply lg:w-16;
  }
  .is-collapsed .nav-item {
    @apply lg:justify-center lg:gap-0 lg:px-2;
  }
  .is-collapsed .nav-label {
    @apply lg:hidden;
  }
  .is-collapsed .sidebar-brand-text {
    @apply lg:hidden;
  }
  .is-collapsed .nav-item:hover .nav-tooltip,
  .is-collapsed .nav-item:focus-within .nav-tooltip {
    @apply lg:block;
  }
}