@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');

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

/* ============================================================
   BASE
   ============================================================ */
@layer base {
    /* Alpine.js: hide elements until Alpine initialises */
    [x-cloak] { display: none !important; }

    html {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    body {
        @apply bg-page text-primary dark:bg-dark-page dark:text-dark-text;
    }

    /* Headings follow the typographic scale from desain.md */
    h1 { @apply text-[3rem] font-bold leading-[1.15]; }
    h2 { @apply text-[2.25rem] font-bold leading-[1.2]; }
    h3 { @apply text-[1.75rem] font-semibold leading-[1.25]; }
    h4 { @apply text-2xl font-semibold leading-[1.3]; }
    h5 { @apply text-xl font-semibold leading-[1.35]; }
    h6 { @apply text-lg font-medium leading-[1.4]; }

    /* Custom scrollbar — subtle, gov-themed */
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { @apply bg-transparent; }
    ::-webkit-scrollbar-thumb { @apply rounded-full bg-border dark:bg-dark-border; }
    ::-webkit-scrollbar-thumb:hover { @apply bg-muted; }
}

/* ============================================================
   COMPONENTS — reusable building blocks for consistency
   ============================================================ */
@layer components {
    /* ---- Buttons ---- */
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5
               text-sm font-medium transition-all duration-150 ease-standard
               focus:outline-none focus:ring-2 focus:ring-gov-primary focus:ring-offset-2
               disabled:cursor-not-allowed disabled:opacity-50
               dark:focus:ring-offset-dark-page;
    }
    .btn-primary {
        @apply btn bg-gov-primary text-white shadow-sm
               hover:-translate-y-px hover:bg-gov-primary-dark hover:shadow-md
               active:translate-y-0 active:scale-[0.99];
    }
    .btn-danger {
        @apply btn bg-danger text-white shadow-sm
               hover:-translate-y-px hover:bg-red-600 hover:shadow-md
               active:translate-y-0 active:scale-[0.99];
    }
    .btn-outline {
        @apply btn border border-gov-primary text-gov-primary
               hover:bg-gov-50 dark:hover:bg-gov-primary/10;
    }
    .btn-ghost {
        @apply btn text-secondary hover:bg-gray-100 hover:text-primary
               dark:text-dark-text-secondary dark:hover:bg-white/5 dark:hover:text-dark-text;
    }

    /* ---- Card ---- */
    .card {
        @apply rounded-2xl bg-white p-6 shadow-card dark:bg-dark-card;
    }
    .card-interactive {
        @apply card cursor-pointer transition-all duration-250 ease-standard
               hover:-translate-y-0.5 hover:shadow-card-hover;
    }

    /* ---- Form controls ---- */
    .form-label {
        @apply mb-1.5 block text-sm font-medium text-primary dark:text-dark-text;
    }
    .form-input {
        @apply w-full rounded-lg border border-border bg-white px-4 py-2.5 text-sm text-primary
               transition-all duration-150 placeholder:text-muted
               focus:border-gov-primary focus:ring-2 focus:ring-gov-primary/20
               dark:border-dark-border dark:bg-dark-card dark:text-dark-text;
    }
    .form-input-error {
        @apply border-danger focus:border-danger focus:ring-danger/20;
    }
    .form-hint { @apply mt-1 text-xs text-secondary; }
    .form-error { @apply mt-1 text-xs text-danger; }

    /* ---- Status badge base ---- */
    .badge {
        @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium;
    }

    /* ---- Group label (sidebar / sections) ---- */
    .group-label {
        @apply px-4 text-[10px] font-semibold uppercase tracking-widest text-muted
               dark:text-dark-text-secondary;
    }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
    /* Skeleton shimmer surface */
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        @apply animate-shimmer rounded;
    }
    .dark .skeleton {
        background: linear-gradient(90deg, #1f2b26 25%, #2d3b35 50%, #1f2b26 75%);
        background-size: 200% 100%;
    }

    /* Custom tooltip for collapsed sidebar items (data-tooltip attribute) */
    .tooltip-host { @apply relative; }
    .tooltip-host[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        @apply absolute left-full top-1/2 z-50 ml-3 -translate-y-1/2 whitespace-nowrap
               rounded-lg bg-primary px-2.5 py-1.5 text-xs font-medium text-white shadow-dropdown;
    }

    .scrollbar-none::-webkit-scrollbar { display: none; }
    .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
}