@import 'tailwindcss';
@import 'leaflet/dist/leaflet.css';

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

@theme {
    --color-surface-container-high: #e6e8ea;
    --color-outline-variant: #c7c4d8;
    --color-secondary-fixed-dim: #b7c8e1;
    --color-primary-fixed: #e2dfff;
    --color-secondary: #505f76;
    --color-error: #ba1a1a;
    --color-on-background: #191c1e;
    --color-surface-bright: #f7f9fb;
    --color-on-surface-variant: #464555;
    --color-surface-container: #eceef0;
    --color-tertiary: #004d70;
    --color-background: #f7f9fb;
    --color-on-secondary-fixed-variant: #38485d;
    --color-on-tertiary: #ffffff;
    --color-inverse-on-surface: #eff1f3;
    --color-on-primary-container: #dad7ff;
    --color-inverse-surface: #2d3133;
    --color-on-tertiary-fixed-variant: #004c6e;
    --color-surface: #f7f9fb;
    --color-primary-fixed-dim: #c3c0ff;
    --color-on-secondary-container: #54647a;
    --color-on-primary-fixed: #0f0069;
    --color-surface-container-lowest: #ffffff;
    --color-surface-dim: #d8dadc;
    --color-primary-container: #4f46e5;
    --color-primary: #3525cd;
    --color-secondary-container: #d0e1fb;
    --color-tertiary-fixed-dim: #89ceff;
    --color-surface-tint: #4d44e3;
    --color-surface-variant: #e0e3e5;
    --color-inverse-primary: #c3c0ff;
    --color-on-surface: #191c1e;
    --color-on-error: #ffffff;
    --color-on-error-container: #93000a;
    --color-on-primary: #ffffff;
    --color-secondary-fixed: #d3e4fe;
    --color-on-secondary-fixed: #0b1c30;
    --color-on-primary-fixed-variant: #3323cc;
    --color-on-tertiary-container: #b8e0ff;
    --color-error-container: #ffdad6;
    --color-tertiary-fixed: #c9e6ff;
    --color-surface-container-low: #f2f4f6;
    --color-on-tertiary-fixed: #001e2f;
    --color-surface-container-highest: #e0e3e5;
    --color-outline: #777587;
    --color-on-secondary: #ffffff;

    --font-headline: "Manrope", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-label: "Inter", sans-serif;

    --radius-DEFAULT: 0px;
    --radius-sm: 0px;
    --radius-md: 0.375rem;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-2xl: 0px;
    --radius-3xl: 0px;
    --radius-full: 9999px;
}

@layer base {
    body { font-family: var(--font-body); }
    h1, h2, h3, h4, h5 { font-family: var(--font-headline); }

    /* Force correct border-radius values regardless of Tailwind injection order */
    .rounded-md { border-radius: 0.375rem !important; }
    .rounded-full { border-radius: 9999px !important; }
    .rounded-none { border-radius: 0px !important; }
}

@layer components {
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        vertical-align: middle;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: 'liga';
    }
    .glass-nav {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background-color: rgba(255, 255, 255, 0.8);
    }
    .ambient-shadow {
        box-shadow: 0px 12px 32px rgba(15, 0, 105, 0.06);
    }
    .hero-gradient {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
    }
    .tonal-shift { background-color: var(--color-surface-container-low); }

    /* TYPOGRAPHY STANDARDS */
    .page-title {
        @apply text-xl md:text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white font-headline leading-tight;
    }
    .section-title {
        @apply text-base md:text-lg font-bold tracking-tight text-slate-900 dark:text-white font-headline;
    }
    .page-desc {
        @apply text-[13px] text-slate-500 dark:text-slate-400 font-medium mt-1 leading-relaxed;
    }
    .form-label {
        @apply text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-slate-400 mb-2 block;
    }

    /* CARD STANDARDS */
    .dashboard-card {
        @apply bg-white dark:bg-slate-900 rounded-none border border-slate-100 dark:border-slate-800 shadow-sm p-4 md:p-8 transition-all duration-300 hover:shadow-md;
    }

    /* BUTTON STANDARDS */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-4 md:px-6 h-10 md:h-12 rounded-md text-[10px] md:text-[11px] font-black uppercase tracking-widest transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:hover:-translate-y-0 shadow-sm active:scale-95 cursor-pointer;
    }
    .btn-primary {
        @apply bg-primary text-white hover:bg-primary/90 hover:shadow-lg hover:-translate-y-0.5 focus:ring-primary;
    }
    .btn-secondary {
        @apply bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700 focus:ring-slate-200 border border-slate-200 dark:border-slate-700;
    }
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 hover:shadow-lg hover:-translate-y-0.5 focus:ring-red-500;
    }
    .btn-success {
        @apply bg-emerald-600 text-white hover:bg-emerald-700 hover:shadow-lg hover:-translate-y-0.5 focus:ring-emerald-500;
    }
    .btn-info {
        @apply bg-blue-500 text-white hover:bg-blue-600 hover:shadow-lg hover:-translate-y-0.5 focus:ring-blue-500;
    }
    .btn-neutral {
        @apply bg-slate-200 text-slate-700 hover:bg-slate-300 hover:shadow-md focus:ring-slate-300 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600;
    }
    .btn-icon {
        @apply w-10 h-10 rounded-md flex items-center justify-center transition-all duration-300 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:hover:scale-100 cursor-pointer;
    }

    /* FORM INPUT STANDARDS */
    .form-input {
        @apply w-full h-12 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-none px-4 text-sm font-medium text-slate-900 dark:text-white placeholder:text-slate-400 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all;
    }
    .form-input-error {
        @apply border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/50 dark:bg-red-900/10;
    }
    .form-error-msg {
        @apply text-[10px] font-bold text-red-500 mt-1.5 flex items-center gap-1;
    }

    /* TABLE STANDARDS */
    .table-container {
        @apply bg-white dark:bg-slate-900 rounded-none border border-slate-100 dark:border-slate-800 shadow-sm overflow-hidden;
    }
    .table-header {
        @apply bg-slate-50/50 dark:bg-slate-800/30 border-b border-slate-100 dark:border-slate-800 px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-slate-400 font-headline;
    }
    .table-cell {
        @apply px-6 py-4 text-sm font-medium text-slate-700 dark:text-slate-300 border-b border-slate-50 dark:border-slate-800/50;
    }
    .table-row {
        @apply hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors duration-200;
    }
    
    /* BADGE STANDARDS */
    .badge {
        @apply px-3 py-1 rounded-none text-[9px] font-black uppercase tracking-widest border inline-flex items-center gap-1.5 whitespace-nowrap shadow-sm;
    }
    .badge-primary {
        @apply bg-primary/10 text-primary border-primary/20;
    }
    .badge-success {
        @apply bg-emerald-50 text-emerald-600 border-emerald-200 dark:bg-emerald-500/10 dark:border-emerald-500/20;
    }
    .badge-warning {
        @apply bg-amber-50 text-amber-600 border-amber-200 dark:bg-amber-500/10 dark:border-amber-500/20;
    }
    .badge-danger {
        @apply bg-red-50 text-red-600 border-red-200 dark:bg-red-500/10 dark:border-red-500/20;
    }
    .badge-info {
        @apply bg-blue-50 text-blue-600 border-blue-200 dark:bg-blue-500/10 dark:border-blue-500/20;
    }
    .badge-neutral {
        @apply bg-slate-50 text-slate-600 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700;
    }

    /* CUSTOM KEYFRAMES */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes zoomIn {
        from { transform: scale(0.95); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    @keyframes slideInRight {
        from { transform: translateX(2rem); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }

    /* MODAL STANDARDS */
    .modal-overlay {
        @apply fixed inset-0 z-[100] flex items-center justify-center p-6 bg-slate-950/40 backdrop-blur-sm;
        animation: fadeIn 0.3s ease-out forwards;
    }
    .modal-content {
        @apply relative bg-white dark:bg-slate-900 rounded-md w-full max-w-xl p-8 md:p-10 shadow-2xl border border-slate-100 dark:border-slate-800;
        animation: zoomIn 0.3s ease-out forwards;
    }

    /* TOAST STANDARDS */
    .toast-item {
        @apply flex items-center gap-4 p-4 rounded-md shadow-xl border-2 backdrop-blur-md min-w-[320px] max-w-[450px];
        animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .toast-success { @apply bg-emerald-50/90 border-emerald-200 text-emerald-800 dark:bg-emerald-950/90 dark:border-emerald-500/20 dark:text-emerald-300; }
    .toast-error { @apply bg-red-50/90 border-red-200 text-red-800 dark:bg-red-950/90 dark:border-red-500/20 dark:text-red-300; }
    .toast-warning { @apply bg-amber-50/90 border-amber-200 text-amber-800 dark:bg-amber-950/90 dark:border-amber-500/20 dark:text-amber-300; }
    .toast-info { @apply bg-blue-50/90 border-blue-200 text-blue-800 dark:bg-blue-950/90 dark:border-blue-500/20 dark:text-blue-300; }

    /* LOADING SHIMMER */
    .shimmer-bg {
        @apply bg-slate-100 dark:bg-slate-800 relative overflow-hidden;
    }
    .shimmer-bg::after {
        @apply content-[''] absolute inset-0 -translate-x-full;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        animation: shimmer 1.5s infinite;
    }
    @keyframes shimmer {
        100% { transform: translateX(100%); }
    }
}