/* Bihar Medicine Shop - Production Tailwind CSS */

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

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

@layer base {
    :root {
        /* Vineet Medical Theme Colors - Blue, White & Orange */
        --color-primary: 59 130 246;
        /* Blue-500 */
        --color-primary-dark: 37 99 235;
        /* Blue-600 */
        --color-secondary: 255 255 255;
        /* White */
        --color-accent: 255 153 51;
        /* Orange #FF9933 */

        /* GST Badge Colors */
        --gst-5: 34 197 94;
        /* Green */
        --gst-12: 249 115 22;
        /* Orange */
        --gst-18: 239 68 68;
        /* Red */

        /* Background */
        --bg-primary: 255 255 255;
        --bg-secondary: 249 250 251;
        --bg-card: 255 255 255;

        /* Text */
        --text-primary: 17 24 39;
        --text-secondary: 107 114 128;
    }

    [data-theme="dark"] {
        --color-primary: 59 130 246;
        --color-primary-dark: 37 99 235;
        --color-secondary: 255 255 255;
        --color-accent: 255 153 51;

        --bg-primary: 17 24 39;
        --bg-secondary: 31 41 55;
        --bg-card: 31 41 55;

        --text-primary: 243 244 246;
        --text-secondary: 156 163 175;
    }

    * {
        @apply border-gray-200 dark:border-gray-700;
    }

    body {
        @apply bg-[rgb(var(--bg-secondary))] text-[rgb(var(--text-primary))] font-['Inter', sans-serif];
    }
}

@layer components {

    /* Header & Navigation */
    .nav-link {
        @apply px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 hover:bg-white/10 hover:text-white active:scale-95;
    }

    .nav-link-active {
        @apply bg-white/20 text-white font-semibold;
    }

    /* Buttons */
    .btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .btn-primary {
        @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-md hover:shadow-lg;
    }
    
    .btn-accent {
        @apply bg-[#ff9933] text-white hover:bg-[#e6892a] focus:ring-[#ff9933] shadow-md hover:shadow-lg;
    }

    .btn-secondary {
        @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-md hover:shadow-lg;
    }

    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-md hover:shadow-lg;
    }

    .btn-outline {
        @apply border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500;
    }

    /* Cards */
    .card {
        @apply bg-[rgb(var(--bg-card))] rounded-xl shadow-md border border-gray-200 dark:border-gray-700 p-6 transition-all duration-200 hover:shadow-lg;
    }

    .stat-card {
        @apply bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border-l-4 transition-all duration-200 hover:shadow-xl hover:scale-[1.02];
    }

    .stat-card-green {
        @apply border-green-500 bg-gradient-to-br from-green-50 to-white dark:from-green-900/20 dark:to-gray-800;
    }

    .stat-card-blue {
        @apply border-blue-500 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-gray-800;
    }

    .stat-card-yellow {
        @apply border-yellow-500 bg-gradient-to-br from-yellow-50 to-white dark:from-yellow-900/20 dark:to-gray-800;
    }

    .stat-card-red {
        @apply border-red-500 bg-gradient-to-br from-red-50 to-white dark:from-red-900/20 dark:to-gray-800;
    }

    /* GST Badges */
    .gst-badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold;
    }

    .gst-5 {
        @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
    }

    .gst-12 {
        @apply bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400;
    }

    .gst-18 {
        @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
    }

    /* Tables */
    .table-container {
        @apply overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm;
    }

    .data-table {
        @apply w-full text-sm text-left;
    }

    .data-table thead {
        @apply bg-gray-50 dark:bg-gray-800 text-xs uppercase font-semibold text-gray-700 dark:text-gray-300;
    }

    .data-table th {
        @apply px-6 py-3 border-b border-gray-200 dark:border-gray-700;
    }

    .data-table td {
        @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
    }

    .data-table tbody tr {
        @apply bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150;
    }

    /* Forms */
    .form-input {
        @apply w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
    }

    .form-label {
        @apply block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2;
    }

    .form-select {
        @apply form-input cursor-pointer;
    }

    /* Mobile POS Specific */
    .pos-item {
        @apply bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-gray-700 active:scale-95 transition-transform duration-150;
    }

    .pos-cart-item {
        @apply flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg mb-2 border border-gray-200 dark:border-gray-700;
    }

    /* Print Styles */
    @media print {
        .no-print {
            display: none !important;
        }

        body {
            @apply bg-white text-black;
        }

        .print-invoice {
            @apply shadow-none border-none;
        }

        .print-header {
            @apply text-center mb-4 pb-4 border-b-2 border-black;
        }

        .print-table {
            @apply w-full border-collapse;
        }

        .print-table th,
        .print-table td {
            @apply border border-black px-2 py-1 text-sm;
        }

        .print-footer {
            @apply mt-8 pt-4 border-t-2 border-black text-center;
        }
    }

    /* Utility Classes */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
    }

    .badge-success {
        @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
    }

    .badge-warning {
        @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
    }

    .badge-danger {
        @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
    }

    .badge-info {
        @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
    }

    /* Loading Spinner */
    .spinner {
        @apply inline-block w-6 h-6 border-4 border-gray-300 border-t-blue-600 rounded-full animate-spin;
    }

    /* Animations */
    @keyframes slideIn {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

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

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in {
        animation: fadeIn 0.3s ease-out;
    }
}

@layer utilities {

    /* Custom Scrollbar */
    .scrollbar-thin::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .scrollbar-thin::-webkit-scrollbar-track {
        @apply bg-gray-100 dark:bg-gray-800 rounded;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
        @apply bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500;
    }

    /* Text Utilities */
    .text-balance {
        text-wrap: balance;
    }

    /* Gradient Text */
    .gradient-text {
        @apply bg-gradient-to-r from-blue-600 to-[#ff9933] bg-clip-text text-transparent;
    }
}