@import "tailwindcss";

@theme {
  --font-heading: "Manrope", "Inter", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --color-rvfu-bg: #f3f6f8;
  --color-rvfu-panel: #ffffff;
  --color-rvfu-panel-soft: #edf2f6;
  --color-rvfu-border-soft: #dce3ea;
  --color-rvfu-text: #1a2735;
  --color-rvfu-text-muted: #5f7082;
  --color-rvfu-primary: #182232;
  --color-rvfu-primary-soft: #d9e3f9;
  --color-rvfu-success-bg: #d9f6e2;
  --color-rvfu-success-text: #0d5f2f;
  --color-rvfu-warning-bg: #ffe7d1;
  --color-rvfu-warning-text: #8e4b12;
  --color-rvfu-error-bg: #ffe0de;
  --color-rvfu-error-text: #9e1f1a;
}

@layer base {
  body {
    @apply bg-rvfu-bg text-rvfu-text font-body;
  }
}

@layer components {
  .app-shell {
    @apply mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-10;
  }

  .app-topbar {
    @apply mb-6 rounded-xl bg-rvfu-panel px-5 py-4 shadow-sm;
  }

  .app-brand {
    @apply text-2xl font-bold tracking-tight text-rvfu-primary;
    font-family: var(--font-heading);
  }

  .topbar-link {
    @apply rounded-md px-3 py-2 text-sm font-semibold text-rvfu-text-muted transition hover:bg-rvfu-panel-soft hover:text-rvfu-primary;
  }

  .topbar-link-active {
    @apply bg-rvfu-primary text-white hover:bg-rvfu-primary hover:text-white;
  }

  .notice-banner {
    @apply mb-4 rounded-lg border px-4 py-3 text-sm font-medium;
  }

  .notice-success {
    @apply border-rvfu-success-bg bg-rvfu-success-bg text-rvfu-success-text;
  }

  .notice-alert {
    @apply border-rvfu-error-bg bg-rvfu-error-bg text-rvfu-error-text;
  }

  .page-header {
    @apply mb-6 flex flex-col gap-4 rounded-xl bg-rvfu-panel px-6 py-5 shadow-sm lg:flex-row lg:items-end lg:justify-between;
  }

  .page-title {
    @apply text-3xl font-extrabold tracking-tight text-rvfu-primary;
    font-family: var(--font-heading);
  }

  .page-subtitle {
    @apply text-sm text-rvfu-text-muted;
  }

  .section-card {
    @apply rounded-xl bg-rvfu-panel p-5 shadow-sm;
  }

  .section-title {
    @apply mb-4 text-lg font-bold text-rvfu-primary;
    font-family: var(--font-heading);
  }

  .form-grid {
    @apply grid grid-cols-1 gap-4 md:grid-cols-2;
  }

  .field-block {
    @apply space-y-1;
  }

  .field-label {
    @apply text-xs font-semibold uppercase tracking-wide text-rvfu-text-muted;
  }

  .field-input {
    @apply w-full rounded-lg border border-rvfu-border-soft bg-rvfu-panel px-3 py-2 text-sm text-rvfu-text shadow-sm outline-none transition focus:border-rvfu-primary;
  }

  .field-checkbox {
    @apply h-4 w-4 rounded border-rvfu-border-soft text-rvfu-primary focus:ring-rvfu-primary;
  }

  .action-btn {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold transition;
  }

  .action-btn-primary {
    @apply bg-rvfu-primary text-white hover:opacity-90;
  }

  .action-btn-secondary {
    @apply bg-rvfu-panel-soft text-rvfu-primary hover:bg-rvfu-primary-soft;
  }

  .action-btn-danger {
    @apply bg-rvfu-error-bg text-rvfu-error-text hover:brightness-95;
  }

  .records-table-wrap {
    @apply overflow-x-auto rounded-xl bg-rvfu-panel shadow-sm;
  }

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

  .records-table th {
    @apply border-b border-rvfu-border-soft bg-rvfu-panel-soft px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-rvfu-text-muted;
  }

  .records-table td {
    @apply border-b border-rvfu-border-soft px-4 py-3 text-sm text-rvfu-text;
  }

  .records-table tbody tr:last-child td {
    @apply border-b-0;
  }

  .records-table tbody tr:hover {
    @apply bg-rvfu-panel-soft;
  }

  .status-chip {
    @apply inline-flex items-center rounded-full px-2.5 py-1 text-xs font-bold uppercase tracking-wide;
  }

  .status-chip-active {
    @apply bg-rvfu-success-bg text-rvfu-success-text;
  }

  .status-chip-inactive {
    @apply bg-rvfu-warning-bg text-rvfu-warning-text;
  }

  .error-panel {
    @apply mb-4 rounded-lg border border-rvfu-error-bg bg-rvfu-error-bg p-4 text-sm text-rvfu-error-text;
  }
}