@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* Force Class-based Dark Mode */
@variant dark (&:where(.dark, .dark *));

@layer base {
    html {
        font-size: 14px; /* Default Tailwind is 16px. Scaling down proportionally */
    }
}

@theme {
    --font-sans:
        "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";

    /* JoinTrust Identity Colors */
    --color-brand-orange: #e37322;
    --color-brand-wine: #681e15;
    --color-brand-green: #749d46;
    --color-berry-dark: #1e1b24;
    --color-berry-light: #2d2a35;
    --color-surface: #f8fafc;

    /* Legacy/Alias support if needed */
    --color-berry-red: #a91e24;
    --color-fresh-green: #6da342;
}

/* Alpine.js Cloak */
[x-cloak] {
    display: none !important;
}

/* Dark Mode Transition */
body {
    transition:
        background-color 0.3s,
        color 0.3s;
}

/* Premium Utilities (v2.0) */
@layer utilities {
    /* PREMIUM Card (ACRU Style - Solid Minimalist) */
    .glass-card-premium {
        @apply bg-white dark:bg-slate-800 rounded-[1.75rem] border-0 transition-all duration-300;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

    .glass-card-premium:hover {
        @apply transform -translate-y-1;
        box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.08);
    }

    /* Modal Specific Card - High Elevation */
    .modal-card {
        @apply bg-white dark:bg-slate-800 rounded-3xl border-0 transition-all duration-300;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    /* Keep .glass as a helper but solid for high contrast areas if needed, or deprecate visually */
    .glass {
        @apply bg-white dark:bg-slate-900 border-b border-slate-100 dark:border-slate-800;
    }

    /* Utility for Dense Grids */
    .grid-dense {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-berry-red to-brand-orange;
    }

    .shadow-glow {
        box-shadow: 0 4px 20px -2px rgba(169, 30, 36, 0.15);
    }

    .metric-value {
        @apply text-3xl font-bold tracking-tight text-slate-800 dark:text-white;
    }

    .metric-label {
        @apply text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500;
    }

    /* Premium Table Styles - Clean & Spacious */
    .table-premium {
        @apply w-full text-left border-collapse;
    }

    .table-premium thead {
        @apply bg-transparent text-slate-400 dark:text-slate-500 text-xs font-bold uppercase tracking-wider;
    }

    .table-premium th {
        @apply px-6 py-4;
    }

    .table-premium tbody tr {
        @apply hover:bg-slate-50/80 dark:hover:bg-slate-700/30 transition-colors border-b border-slate-50 dark:border-slate-800 last:border-0;
    }

    .table-premium td {
        @apply px-6 py-5 text-sm font-medium text-slate-700 dark:text-slate-200;
    }

    /* Standardized Row Styles (Centralized Control) */
    .table-row-standard {
        @apply hover:bg-brand-orange/20 dark:hover:bg-brand-orange/20 transition-colors duration-200 border-b border-slate-50 dark:border-slate-800 border-l-4 border-l-transparent hover:border-l-brand-orange;
    }

    .table-row-even {
        @apply bg-slate-100 dark:bg-slate-800/50;
    }

    /* Premium Input Forms - High Contrast */
    .input-premium {
        @apply w-full px-5 py-3 bg-slate-50 dark:bg-slate-900 border-0 rounded-2xl focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-700 outline-none transition-all font-semibold text-slate-800 dark:text-white placeholder-slate-400 dark:placeholder-slate-500;
    }

    /* Premium Buttons */
    .btn-premium {
        @apply px-6 py-2.5 rounded-xl font-bold transition-all transform hover:-translate-y-0.5 active:scale-95 flex items-center justify-center gap-2;
    }

    .btn-primary {
        @apply bg-berry-red hover:bg-red-700 text-white shadow-lg shadow-berry-red/30;
    }

    .btn-secondary {
        @apply bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700 shadow-sm;
    }
}