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

@layer base {
  :root {
    --color-primary: #4F46E5;
    --color-success: #16A34A;
    --color-danger: #DC2626;
    --color-warning: #D97706;
    --color-info: #2563EB;
    --color-sidebar: #0F172A;
    --color-bg: #F8FAFC;
  }

  body {
    font-family: 'Inter', system-ui, sans-serif;
    @apply bg-[#F8FAFC] text-slate-800 antialiased;
  }

  * {
    @apply box-border;
  }
}

@layer components {

  /* ── Buttons ── */
  .btn {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-sm
           transition-all duration-200 cursor-pointer focus:outline-none
           focus:ring-2 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply btn bg-indigo-600 text-white hover:bg-indigo-700 active:bg-indigo-800
           shadow-sm focus:ring-indigo-500;
  }
  .btn-success {
    @apply btn bg-green-600 text-white hover:bg-green-700 active:bg-green-800
           shadow-sm focus:ring-green-500;
  }
  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 active:bg-red-800
           shadow-sm focus:ring-red-500;
  }
  .btn-warning {
    @apply btn bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-700
           shadow-sm focus:ring-amber-400;
  }
  .btn-ghost {
    @apply btn bg-transparent text-slate-600 hover:bg-slate-100 active:bg-slate-200
           focus:ring-slate-400;
  }
  .btn-outline {
    @apply btn bg-transparent border border-indigo-600 text-indigo-600
           hover:bg-indigo-50 active:bg-indigo-100 focus:ring-indigo-500;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }
  .btn-lg {
    @apply px-6 py-3 text-base;
  }

  /* ── Cards ── */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden;
  }
  .card-header {
    @apply px-6 py-4 border-b border-slate-100 flex items-center justify-between;
  }
  .card-body {
    @apply px-6 py-4;
  }
  .card-footer {
    @apply px-6 py-4 border-t border-slate-100 bg-slate-50;
  }

  /* ── Form elements ── */
  .label {
    @apply block text-sm font-medium text-slate-700 mb-1;
  }
  .input {
    @apply w-full px-3 py-2 rounded-lg border border-slate-200 text-sm text-slate-800
           bg-white placeholder-slate-400 transition-all duration-200
           focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent;
  }
  .input-error {
    @apply border-red-400 focus:ring-red-400;
  }
  .select {
    @apply input appearance-none cursor-pointer;
  }
  .error-msg {
    @apply text-xs text-red-500 mt-1;
  }
  .help-text {
    @apply text-xs text-slate-400 mt-1;
  }

  /* ── Badges ── */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
  }
  .badge-green  { @apply badge bg-green-100 text-green-700; }
  .badge-red    { @apply badge bg-red-100 text-red-700; }
  .badge-yellow { @apply badge bg-amber-100 text-amber-700; }
  .badge-blue   { @apply badge bg-blue-100 text-blue-700; }
  .badge-gray   { @apply badge bg-slate-100 text-slate-600; }
  .badge-indigo { @apply badge bg-indigo-100 text-indigo-700; }

  /* ── Table ── */
  .table-styled {
    @apply w-full text-sm text-left border-collapse;
  }
  .table-styled thead {
    @apply bg-slate-50 border-b border-slate-200;
  }
  .table-styled thead th {
    @apply px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider whitespace-nowrap;
  }
  .table-styled tbody tr {
    @apply border-b border-slate-100 hover:bg-slate-50 transition-colors duration-150;
  }
  .table-styled tbody tr:last-child {
    @apply border-b-0;
  }
  .table-styled tbody td {
    @apply px-4 py-3 text-slate-700;
  }

  /* ── Modal ── */
  .modal-overlay {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-50
           flex items-center justify-center p-4;
  }
  .modal-box {
    @apply bg-white rounded-xl shadow-2xl w-full overflow-hidden
           animate-[fadeIn_0.15s_ease-out];
  }
  .modal-box-sm { @apply max-w-sm; }
  .modal-box-md { @apply max-w-md; }
  .modal-box-lg { @apply max-w-2xl; }
  .modal-header {
    @apply flex items-center justify-between px-6 py-4 border-b border-slate-100;
  }
  .modal-body {
    @apply px-6 py-4;
  }
  .modal-footer {
    @apply flex items-center justify-end gap-2 px-6 py-4 border-t border-slate-100 bg-slate-50;
  }

  /* ── Sidebar navigation ── */
  .sidebar-link {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
           transition-all duration-150 cursor-pointer select-none;
  }
  .sidebar-link-active {
    @apply sidebar-link bg-indigo-600 text-white shadow-sm;
  }
  .sidebar-link-inactive {
    @apply sidebar-link text-slate-400 hover:bg-slate-800 hover:text-slate-100;
  }

  /* ── Stat / KPI card ── */
  .stat-card {
    @apply bg-white rounded-xl shadow-sm border-l-4 p-5
           flex items-start justify-between gap-4;
  }

  /* ── Page header ── */
  .page-header {
    @apply flex items-start justify-between pb-5 mb-6 border-b border-slate-200;
  }
  .page-title {
    @apply text-xl font-semibold text-slate-800;
  }
  .page-subtitle {
    @apply text-sm text-slate-500 mt-0.5;
  }

  /* ── Skeleton loader ── */
  .skeleton {
    @apply bg-slate-200 rounded animate-pulse;
  }

  /* ── Divider ── */
  .divider {
    @apply border-t border-slate-100 my-4;
  }
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
  }
  .scrollbar-thin::-webkit-scrollbar {
    width: 5px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #CBD5E1;
    border-radius: 9999px;
  }
}