@import 'tailwindcss';

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

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    
    /* Custom colors */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    
    --color-success-50: #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-200: #bbf7d0;
    --color-success-300: #86efac;
    --color-success-400: #4ade80;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-800: #166534;
    --color-success-900: #14532d;
    
    --color-warning-50: #fefce8;
    --color-warning-100: #fef9c3;
    --color-warning-200: #fef08a;
    --color-warning-300: #fde047;
    --color-warning-400: #facc15;
    --color-warning-500: #eab308;
    --color-warning-600: #ca8a04;
    --color-warning-700: #a16207;
    --color-warning-800: #854d0e;
    --color-warning-900: #713f12;
    
    --color-danger-50: #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-200: #fecaca;
    --color-danger-300: #fca5a5;
    --color-danger-400: #f87171;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-800: #991b1b;
    --color-danger-900: #7f1d1d;
}

@layer base {
    /* Custom base styles */
    html {
        @apply scroll-smooth;
    }
    
    body {
        @apply antialiased;
    }
}

@layer components {
    /* Custom component styles */
    .btn-primary {
        @apply bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 
               transition duration-200 focus:outline-none focus:ring-2 
               focus:ring-primary-500 focus:ring-offset-2 
               dark:bg-primary-500 dark:hover:bg-primary-600 
               dark:focus:ring-offset-gray-900;
    }

    .btn-secondary {
        @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-lg 
               hover:bg-gray-300 transition duration-200 
               focus:outline-none focus:ring-2 focus:ring-gray-400 
               focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-200 
               dark:hover:bg-gray-600 dark:focus:ring-offset-gray-900;
    }

    .btn-success {
        @apply bg-success-600 text-white px-4 py-2 rounded-lg 
               hover:bg-success-700 transition duration-200 
               focus:outline-none focus:ring-2 focus:ring-success-500 
               focus:ring-offset-2 dark:bg-success-500 
               dark:hover:bg-success-600 dark:focus:ring-offset-gray-900;
    }

    .btn-danger {
        @apply bg-danger-600 text-white px-4 py-2 rounded-lg 
               hover:bg-danger-700 transition duration-200 
               focus:outline-none focus:ring-2 focus:ring-danger-500 
               focus:ring-offset-2 dark:bg-danger-500 
               dark:hover:bg-danger-600 dark:focus:ring-offset-gray-900;
    }

    .btn-outline {
        @apply border border-gray-300 text-gray-700 px-4 py-2 rounded-lg 
               hover:bg-gray-50 transition duration-200 
               focus:outline-none focus:ring-2 focus:ring-gray-400 
               focus:ring-offset-2 dark:border-gray-600 
               dark:text-gray-300 dark:hover:bg-gray-800 
               dark:focus:ring-offset-gray-900;
    }

    .btn-warning {
        @apply bg-warning-500 text-gray-900 px-4 py-2 rounded-lg 
               hover:bg-warning-600 transition duration-200 
               focus:outline-none focus:ring-2 focus:ring-warning-500 
               focus:ring-offset-2 dark:bg-warning-600 
               dark:hover:bg-warning-700 dark:focus:ring-offset-gray-900;
    }

    .input-field {
        @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm 
               focus:border-primary-500 focus:ring focus:ring-primary-500 
               focus:ring-primary-500/50 dark:bg-gray-800 
               dark:border-gray-700 dark:text-gray-300 
               dark:focus:border-primary-400 dark:focus:ring-primary-400;
    }

    .input-error {
        @apply border-danger-300 text-danger-900 placeholder-danger-300 
               focus:border-danger-500 focus:ring-danger-500 
               dark:border-danger-700 dark:text-danger-400;
    }

    .label-field {
        @apply block text-sm font-medium text-gray-700 mb-1 
               dark:text-gray-300;
    }

    .card {
        @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 
               border border-gray-200 dark:border-gray-700;
    }

    .card-header {
        @apply text-lg font-semibold text-gray-800 dark:text-gray-200 
               mb-4 pb-2 border-b border-gray-200 dark:border-gray-700;
    }

    /* Step indicator styles */
    .step-container {
        @apply flex items-center justify-between;
    }

    .step-item {
        @apply flex items-center relative;
    }

    .step-item:not(:last-child) {
        @apply flex-1;
    }

    .step-item:not(:last-child)::after {
        @apply content-[''] w-full h-0.5 bg-gray-300 absolute left-1/2;
    }

    .step-active {
        @apply flex items-center text-primary-600 dark:text-primary-400 font-medium;
    }

    .step-completed {
        @apply flex items-center text-success-600 dark:text-success-400;
    }

    .step-inactive {
        @apply flex items-center text-gray-400 dark:text-gray-600;
    }

    .step-circle {
        @apply w-8 h-8 rounded-full flex items-center justify-center font-semibold;
    }

    .step-circle-active {
        @apply bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300;
    }

    .step-circle-completed {
        @apply bg-success-100 text-success-700 dark:bg-success-900 dark:text-success-300;
    }

    .step-circle-inactive {
        @apply bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400;
    }

    /* Z-Score gauge styles */
    .gauge-container {
        @apply relative w-48 h-48 mx-auto;
    }

    .gauge-safe {
        @apply text-success-600 dark:text-success-400;
    }

    .gauge-warning {
        @apply text-warning-600 dark:text-warning-400;
    }

    .gauge-danger {
        @apply text-danger-600 dark:text-danger-400;
    }

    .gauge-value {
        @apply text-4xl font-bold;
    }

    .gauge-label {
        @apply text-sm font-medium text-gray-500 dark:text-gray-400;
    }

    /* Z-Score categories */
    .zscore-safe {
        @apply bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200;
    }

    .zscore-warning {
        @apply bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-200;
    }

    .zscore-danger {
        @apply bg-danger-100 text-danger-800 dark:bg-danger-900 dark:text-danger-200;
    }

    /* Table styles */
    .table-container {
        @apply overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow 
               border border-gray-200 dark:border-gray-700;
    }

    .table {
        @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
    }

    .table thead {
        @apply bg-gray-50 dark:bg-gray-900;
    }

    .table th {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 
               dark:text-gray-400 uppercase tracking-wider;
    }

    .table tbody {
        @apply bg-white dark:bg-gray-800 divide-y divide-gray-200 
               dark:divide-gray-700;
    }

    .table td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 
               dark:text-gray-300;
    }

    .table tr:hover {
        @apply bg-gray-50 dark:bg-gray-700;
    }

    /* Form group */
    .form-group {
        @apply mb-4;
    }

    .form-row {
        @apply grid grid-cols-1 md:grid-cols-2 gap-4;
    }

    /* Badge */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs 
               font-medium;
    }

    .badge-success {
        @apply bg-success-100 text-success-800 dark:bg-success-900 
               dark:text-success-200;
    }

    .badge-warning {
        @apply bg-warning-100 text-warning-800 dark:bg-warning-900 
               dark:text-warning-200;
    }

    .badge-danger {
        @apply bg-danger-100 text-danger-800 dark:bg-danger-900 
               dark:text-danger-200;
    }

    .badge-info {
        @apply bg-primary-100 text-primary-800 dark:bg-primary-900 
               dark:text-primary-200;
    }

    /* Alert */
    .alert {
        @apply p-4 rounded-lg border-l-4;
    }

    .alert-success {
        @apply bg-success-50 border-success-500 text-success-800 
               dark:bg-success-900 dark:border-success-400 dark:text-success-200;
    }

    .alert-error {
        @apply bg-danger-50 border-danger-500 text-danger-800 
               dark:bg-danger-900 dark:border-danger-400 dark:text-danger-200;
    }

    .alert-warning {
        @apply bg-warning-50 border-warning-500 text-warning-800 
               dark:bg-warning-900 dark:border-warning-400 dark:text-warning-200;
    }

    .alert-info {
        @apply bg-primary-50 border-primary-500 text-primary-800 
               dark:bg-primary-900 dark:border-primary-400 dark:text-primary-200;
    }

    /* Progress bar */
    .progress-bar {
        @apply w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700;
    }

    .progress-bar-fill {
        @apply bg-primary-600 h-2.5 rounded-full dark:bg-primary-400;
    }

    /* Dropdown */
    .dropdown-menu {
        @apply absolute right-0 mt-2 w-48 rounded-md shadow-lg 
               bg-white dark:bg-gray-800 ring-1 ring-black/5
               divide-y divide-gray-100 dark:divide-gray-700;
    }

    .dropdown-item {
        @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 
               hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer;
    }

    /* Modal */
    .modal-backdrop {
        @apply fixed inset-0 bg-gray-500/75 dark:bg-gray-900/75 transition-opacity;
    }

    .modal-container {
        @apply fixed inset-0 z-50 overflow-y-auto;
    }

    .modal-content {
        @apply relative bg-white dark:bg-gray-800 rounded-lg shadow-xl 
               max-w-lg mx-auto;
    }

    /* Navigation */
    .nav-link {
        @apply px-3 py-2 rounded-md text-sm font-medium text-gray-700 
               dark:text-gray-300 hover:text-gray-900 dark:hover:text-white 
               hover:bg-gray-50 dark:hover:bg-gray-800 transition;
    }

    .nav-link-active {
        @apply bg-primary-50 text-primary-700 dark:bg-primary-900 
               dark:text-primary-300;
    }

    /* Sidebar */
    .sidebar-item {
        @apply flex items-center px-4 py-3 text-sm font-medium rounded-lg 
               transition-colors duration-150;
    }

    .sidebar-item-active {
        @apply bg-primary-50 text-primary-700 dark:bg-primary-900 
               dark:text-primary-300;
    }

    .sidebar-item-inactive {
        @apply text-gray-600 dark:text-gray-400 hover:bg-gray-50 
               dark:hover:bg-gray-800 hover:text-gray-900 
               dark:hover:text-white;
    }

    /* Currency input */
    .currency-input {
        @apply relative rounded-md shadow-sm;
    }

    .currency-symbol {
        @apply absolute inset-y-0 left-0 pl-3 flex items-center 
               pointer-events-none text-gray-500 dark:text-gray-400;
    }

    .currency-amount {
        @apply pl-8 block w-full rounded-md border-gray-300 
               focus:border-primary-500 focus:ring-primary-500 
               dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300;
    }

    /* Financial table specific */
    .financial-table {
        @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
    }

    .financial-table .variable-row {
        @apply bg-white dark:bg-gray-800;
    }

    .financial-table .formula-col {
        @apply font-mono text-sm text-gray-600 dark:text-gray-400;
    }

    .financial-table .value-col {
        @apply font-semibold text-right;
    }

    /* Loading spinner */
    .spinner {
        @apply animate-spin rounded-full border-4 border-gray-200 
               border-t-primary-600 h-8 w-8;
    }

    .spinner-sm {
        @apply h-4 w-4 border-2;
    }

    .spinner-lg {
        @apply h-12 w-12 border-4;
    }
}

@layer utilities {
    /* Custom animations */
    .animate-fade-in {
        animation: fadeIn 0.3s ease-in;
    }

    .animate-slide-in {
        animation: slideIn 0.3s ease-out;
    }

    .animate-slide-up {
        animation: slideUp 0.3s ease-out;
    }

    .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .animate-bounce-slow {
        animation: bounce 2s infinite;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes slideIn {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Custom gradients */
    .gradient-primary {
        background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-800));
    }

    .gradient-success {
        background: linear-gradient(135deg, var(--color-success-500), var(--color-success-700));
    }

    .gradient-warning {
        background: linear-gradient(135deg, var(--color-warning-500), var(--color-warning-700));
    }

    .gradient-danger {
        background: linear-gradient(135deg, var(--color-danger-500), var(--color-danger-700));
    }

    /* Text shadows */
    .text-shadow-sm {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Custom widths */
    .w-128 {
        width: 32rem;
    }

    .w-160 {
        width: 40rem;
    }

    .w-192 {
        width: 48rem;
    }

    /* Custom heights */
    .h-128 {
        height: 32rem;
    }

    .h-160 {
        height: 40rem;
    }

    .h-192 {
        height: 48rem;
    }

    /* Z-index utilities */
    .z-60 {
        z-index: 60;
    }

    .z-70 {
        z-index: 70;
    }

    .z-80 {
        z-index: 80;
    }

    .z-90 {
        z-index: 90;
    }

    .z-100 {
        z-index: 100;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
    
    .table {
        break-inside: auto;
    }
    
    .table tr {
        break-inside: avoid;
    }
    
    .badge {
        border: 1px solid #ddd;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}