@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

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

/* ── Brand CSS Variables ─────────────────────────────────── */
:root {
    --brand-blue:   #0D47A1;
    --brand-yellow: #FFC107;
    --brand-white:  #FFFFFF;
}

@layer base {
    :root { color-scheme: light dark; }
    html  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

@layer components {

    /* ── Sidebar ── */
    .sidebar-link {
        @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
               text-blue-200 hover:text-white hover:bg-white/10
               transition-all duration-150;
    }
    .sidebar-link.active {
        @apply bg-accent-500/20 text-accent-400 font-semibold;
    }
    .sidebar-link .icon { @apply w-5 h-5 flex-shrink-0; }

    /* ── Stat card ── */
    .stat-card {
        @apply bg-white dark:bg-slate-800 rounded-2xl shadow-card p-6 flex flex-col gap-3
               border border-slate-100 dark:border-slate-700/50
               transition-shadow hover:shadow-card-hover;
    }

    /* ── Data table card ── */
    .data-card {
        @apply bg-white dark:bg-slate-800 rounded-2xl shadow-card
               border border-slate-100 dark:border-slate-700/50 overflow-hidden;
    }

    /* ── Buttons ── */
    .btn {
        @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold
               transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2
               disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-primary {
        @apply btn bg-brand-500 hover:bg-brand-600 text-white focus:ring-brand-500
               dark:focus:ring-offset-slate-900;
    }
    /* Yellow CTA button */
    .btn-accent {
        @apply btn bg-accent-500 hover:bg-accent-600 text-brand-900 focus:ring-accent-500
               dark:focus:ring-offset-slate-900 font-bold;
    }
    .btn-success {
        @apply btn bg-emerald-500 hover:bg-emerald-600 text-white focus:ring-emerald-500
               dark:focus:ring-offset-slate-900;
    }
    .btn-danger {
        @apply btn bg-red-500 hover:bg-red-600 text-white focus:ring-red-500
               dark:focus:ring-offset-slate-900;
    }
    .btn-ghost {
        @apply btn bg-transparent border border-slate-200 dark:border-slate-600
               text-slate-700 dark:text-slate-300
               hover:bg-slate-50 dark:hover:bg-slate-700 focus:ring-slate-300;
    }
    .btn-icon {
        @apply w-8 h-8 inline-flex items-center justify-center rounded-lg
               text-slate-400 dark:text-slate-500
               hover:bg-slate-100 dark:hover:bg-slate-700
               hover:text-slate-700 dark:hover:text-slate-200
               transition-colors duration-150 focus:outline-none;
    }

    /* ── Form controls ── */
    .form-input {
        @apply block w-full rounded-lg border-slate-200 dark:border-slate-600
               bg-white dark:bg-slate-700/50
               text-slate-900 dark:text-slate-100
               placeholder-slate-400 dark:placeholder-slate-500
               text-sm shadow-sm
               focus:border-brand-500 focus:ring-brand-500
               dark:focus:border-brand-400 dark:focus:ring-brand-400
               transition-colors duration-150;
    }
    .form-label  { @apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5; }
    .form-error  { @apply text-xs text-red-500 dark:text-red-400 mt-1.5; }
    .form-hint   { @apply text-xs text-slate-500 dark:text-slate-400 mt-1; }

    /* ── Badges ── */
    .badge          { @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold; }
    .badge-income   { @apply bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400; }
    .badge-expense  { @apply bg-red-100 text-red-700 dark:bg-red-500/15 dark:text-red-400; }
    .badge-admin    { @apply bg-accent-100 text-brand-800 dark:bg-accent-500/15 dark:text-accent-400; }
    .badge-staff    { @apply bg-brand-100 text-brand-700 dark:bg-brand-500/15 dark:text-brand-300; }
    .badge-active   { @apply bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400; }
    .badge-inactive { @apply bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400; }

    /* ── Alert ── */
    .alert {
        @apply flex items-start gap-3 p-4 rounded-xl text-sm font-medium mb-4 border;
    }
    .alert-success {
        @apply alert bg-emerald-50 border-emerald-200 text-emerald-800
               dark:bg-emerald-500/10 dark:border-emerald-500/30 dark:text-emerald-300;
    }
    .alert-danger {
        @apply alert bg-red-50 border-red-200 text-red-800
               dark:bg-red-500/10 dark:border-red-500/30 dark:text-red-300;
    }
    .alert-warning {
        @apply alert bg-accent-50 border-accent-200 text-brand-800
               dark:bg-accent-500/10 dark:border-accent-500/30 dark:text-accent-300;
    }

    /* ── Table ── */
    .data-table { @apply w-full text-sm; }
    .data-table thead th {
        @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider
               text-slate-500 dark:text-slate-400
               bg-slate-50 dark:bg-slate-700/40
               border-b border-slate-100 dark:border-slate-700;
    }
    .data-table tbody td {
        @apply px-4 py-3.5 text-slate-700 dark:text-slate-300
               border-b border-slate-50 dark:border-slate-700/50;
    }
    .data-table tbody tr:last-child td { @apply border-b-0; }
    .data-table tbody tr:hover td {
        @apply bg-blue-50/30 dark:bg-brand-500/5;
    }

    /* ── Pagination ── */
    .page-btn {
        @apply inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm
               text-slate-600 dark:text-slate-400
               hover:bg-slate-100 dark:hover:bg-slate-700
               transition-colors duration-150;
    }
    .page-btn.active  { @apply bg-brand-500 text-white hover:bg-brand-600; }
    .page-btn.disabled { @apply opacity-40 cursor-not-allowed pointer-events-none; }

    /* ── Chart container ── */
    .chart-card {
        @apply bg-white dark:bg-slate-800 rounded-2xl shadow-card
               border border-slate-100 dark:border-slate-700/50 p-6;
    }

    /* ── Color dot ── */
    .color-dot { @apply inline-block w-2.5 h-2.5 rounded-full flex-shrink-0; }

    /* ── Empty state ── */
    .empty-state { @apply py-16 text-center; }
}