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

/* ============ GOOGLE FONTS ============ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ============ BASE OVERRIDES ============ */
@layer base {
    body {
        @apply font-body text-base text-gray-600 bg-gray-50 antialiased;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-display;
    }
}

/* ============ REUSABLE COMPONENTS ============ */
@layer components {

    /* ---- Buttons ---- */
    .btn {
        @apply inline-flex items-center gap-1.5 font-display font-semibold text-sm rounded-lg
               transition-all duration-200 cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed;
    }
    .btn-primary {
        @apply btn bg-primary-600 text-white px-[18px] py-2
               hover:bg-primary-800 hover:-translate-y-px hover:shadow-primary
               disabled:hover:translate-y-0 disabled:hover:shadow-none;
    }
    .btn-secondary {
        @apply btn bg-white text-gray-600 border border-gray-200 px-3.5 py-2
               hover:bg-gray-50 hover:border-gray-300;
    }
    .btn-danger {
        @apply btn bg-danger-500 text-white px-[18px] py-2
               hover:bg-danger-600 hover:-translate-y-px hover:shadow-danger;
    }
    .btn-ghost {
        @apply text-primary-600 text-xs font-medium bg-transparent border-none px-2 py-1
               hover:text-primary-800 cursor-pointer;
    }
    .btn-icon {
        @apply w-9 h-9 rounded-lg border border-gray-200 bg-white flex items-center justify-center
               text-gray-500 hover:bg-gray-50 hover:border-gray-300 transition-all duration-150 cursor-pointer relative;
    }

    /* ---- Cards ---- */
    .card {
        @apply bg-white rounded-xl border border-gray-200 shadow-xs overflow-hidden
               transition-shadow duration-200 hover:shadow-md;
    }
    .card-static {
        @apply bg-white rounded-xl border border-gray-200 shadow-xs overflow-hidden;
    }
    .card-header {
        @apply flex items-center justify-between px-5 py-4 border-b border-gray-100;
    }
    .card-header-title {
        @apply font-display text-lg font-semibold text-gray-800;
    }
    .card-body {
        @apply p-5;
    }

    /* ---- Stat Cards ---- */
    .stat-card { @apply card p-5; }
    .stat-icon { @apply w-10 h-10 rounded-lg flex items-center justify-center mb-3.5; }
    .stat-value { @apply font-display text-3xl font-bold text-gray-900 leading-none; }
    .stat-label { @apply text-sm text-gray-500 mt-1.5; }

    /* ---- Badges ---- */
    .badge { @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium; }
    .badge-active    { @apply bg-success-100 text-success-600; }
    .badge-present   { @apply bg-success-100 text-success-600; }
    .badge-approved  { @apply bg-success-100 text-success-600; }
    .badge-inactive  { @apply bg-gray-100 text-gray-500; }
    .badge-absent    { @apply bg-danger-100 text-danger-500; }
    .badge-rejected  { @apply bg-danger-100 text-danger-500; }
    .badge-pending   { @apply bg-warning-100 text-warning-600; }
    .badge-leave     { @apply bg-warning-100 text-warning-600; }
    .badge-onboarding { @apply bg-primary-100 text-primary-600; }
    .badge-draft     { @apply bg-primary-100 text-primary-600; }
    .badge-info      { @apply bg-primary-100 text-primary-600; }
    .badge-dot       { @apply w-1.5 h-1.5 rounded-full bg-current; }

    /* ---- Form Inputs ---- */
    .form-input {
        @apply w-full px-3.5 py-2.5 border border-gray-300 rounded-lg font-body text-base text-gray-700
               bg-white transition-all duration-200 outline-none
               focus:border-primary-600 focus:ring-[3px] focus:ring-primary-600/10
               placeholder:text-gray-400;
    }
    .form-input-error { @apply border-danger-500 focus:border-danger-500 focus:ring-danger-500/10; }
    .form-label { @apply block text-sm font-medium text-gray-700 mb-1; }
    .form-error { @apply text-xs text-danger-500 mt-1; }
    .form-hint { @apply text-xs text-gray-400 mt-1; }
    .form-select {
        @apply form-input appearance-none bg-no-repeat bg-right pr-10;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-position: right 12px center;
    }
    .form-textarea {
        @apply form-input resize-y min-h-[80px];
    }
    .form-checkbox {
        @apply w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600/20;
    }

    /* ---- Tables ---- */
    .data-table { @apply w-full border-collapse; }
    .data-table thead th {
        @apply text-xxs font-semibold text-gray-500 uppercase tracking-wider
               px-4 py-3 bg-gray-50 text-left border-b border-gray-200;
    }
    .data-table tbody td {
        @apply px-4 py-3.5 text-sm text-gray-700 border-b border-gray-100;
    }
    .data-table tbody tr:hover td { @apply bg-gray-50; }
    .data-table tbody tr:last-child td { @apply border-b-0; }

    /* ---- Skeleton Loaders ---- */
    .skeleton {
        @apply rounded-sm animate-shimmer;
        background: linear-gradient(90deg, #F1F5F9 25%, #F8FAFC 50%, #F1F5F9 75%);
        background-size: 200% 100%;
    }
    .skeleton-text   { @apply h-4 skeleton; }
    .skeleton-title  { @apply h-6 w-48 skeleton; }
    .skeleton-avatar { @apply w-8 h-8 rounded-full skeleton; }
    .skeleton-card   { @apply h-32 skeleton rounded-xl; }
    .skeleton-stat   { @apply h-24 skeleton rounded-xl; }
    .skeleton-row    { @apply h-12 skeleton; }

    /* ---- Navigation ---- */
    .nav-item {
        @apply flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-gray-600
               cursor-pointer transition-all duration-150 relative;
    }
    .nav-item:hover { @apply bg-gray-50 text-gray-800; }
    .nav-item.active { @apply bg-primary-50 text-primary-600 font-medium; }
    .nav-item .nav-icon { @apply w-5 h-5 flex items-center justify-center opacity-70; }
    .nav-item.active .nav-icon { @apply opacity-100; }
    .nav-section-title { @apply text-xxs font-semibold text-gray-400 uppercase tracking-wider px-3 pt-2 pb-1.5; }

    /* ---- Avatars ---- */
    .avatar { @apply rounded-full flex items-center justify-center font-display font-semibold text-white; }
    .avatar-xs { @apply w-7 h-7 text-[10px]; }
    .avatar-sm { @apply w-8 h-8 text-xxs; }
    .avatar-md { @apply w-9 h-9 text-sm; }
    .avatar-lg { @apply w-12 h-12 text-base; }
    .avatar-xl { @apply w-20 h-20 text-xl; }

    /* ---- Toasts ---- */
    .toast {
        @apply fixed top-5 right-5 z-[100] min-w-[320px] px-4 py-3.5 rounded-lg
               bg-white border border-gray-200 shadow-lg animate-toast-in;
    }
    .toast-success { @apply border-l-4 border-l-success-500; }
    .toast-error   { @apply border-l-4 border-l-danger-500; }
    .toast-warning { @apply border-l-4 border-l-warning-500; }
    .toast-info    { @apply border-l-4 border-l-primary-600; }

    /* ---- Modals ---- */
    .modal-backdrop { @apply fixed inset-0 bg-gray-900/50 backdrop-blur-sm z-50 flex items-center justify-center; }
    .modal { @apply bg-white rounded-2xl max-w-lg w-[90%] shadow-xl animate-modal-in; }
    .modal-header { @apply px-6 py-4 border-b border-gray-100; }
    .modal-body { @apply px-6 py-5; }
    .modal-footer { @apply px-6 py-4 border-t border-gray-100 flex justify-end gap-3; }

    /* ---- Empty States ---- */
    .empty-state { @apply py-16 text-center; }
    .empty-state-icon { @apply w-16 h-16 mx-auto text-gray-300 mb-4; }
    .empty-state-title { @apply font-display text-lg font-semibold text-gray-700; }
    .empty-state-text { @apply text-sm text-gray-500 mt-1 mb-5; }

    /* ---- Breadcrumbs ---- */
    .breadcrumb { @apply flex items-center gap-2 text-sm text-gray-500 mb-5; }
    .breadcrumb a { @apply text-gray-400 hover:text-primary-600 transition-colors; }
    .breadcrumb .separator { @apply text-gray-300; }
    .breadcrumb .current { @apply text-gray-700 font-medium; }

    /* ---- Notification Badge (red dot) ---- */
    .notif-dot {
        @apply absolute top-1.5 right-1.5 w-[7px] h-[7px] bg-danger-500 rounded-full border-[1.5px] border-white;
    }

    /* ---- Quick Action Buttons (Employee Dashboard) ---- */
    .quick-action {
        @apply flex items-center gap-2.5 p-3 bg-gray-50 border border-gray-200 rounded-lg
               cursor-pointer transition-all duration-150 hover:bg-primary-50 hover:border-primary-600;
    }
    .quick-action-icon {
        @apply w-8 h-8 rounded-lg flex items-center justify-center text-sm;
    }
    .quick-action span {
        @apply text-xs font-medium text-gray-700;
    }

    /* ---- Tabs ---- */
    .tab-nav {
        @apply flex items-center gap-0 border-b border-gray-200;
    }
    .tab-item {
        @apply px-4 py-2.5 text-sm font-medium text-gray-500 border-b-2 border-transparent
               cursor-pointer transition-all duration-150 hover:text-gray-700 -mb-px;
    }
    .tab-item.active {
        @apply text-primary-600 border-primary-600;
    }
}