/*
File: web/static/css/main.css
Name: Main CSS
Use: Primary stylesheet with Tailwind base and custom components
Location: web/static/css/main.css
Description: Main CSS file containing Tailwind directives, custom component classes, and global styles
Change Log:
- v1.0 (2025-09-27): Initial creation with Tailwind base and custom components
*/

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

/* Terpene Color Override Layer */
@layer utilities {
    /* Override Tailwind blue colors with CITRUS orange */
    .text-blue-600 { color: #F9A04B !important; }
    .text-blue-700 { color: #F89D3C !important; }
    .text-blue-800 { color: #F89D3C !important; }
    .bg-blue-600 { background-color: #F9A04B !important; }
    .bg-blue-700 { background-color: #F89D3C !important; }
    .bg-blue-50 { background-color: #F9A04B10 !important; }
    .bg-blue-100 { background-color: #F9A04B20 !important; }
    .border-blue-500 { border-color: #F9A04B !important; }
    .border-blue-600 { border-color: #F9A04B !important; }
    .ring-blue-500 { --tw-ring-color: #F9A04B40 !important; }

    /* Override primary colors with CITRUS orange */
    .text-primary-600 { color: #F9A04B !important; }
    .text-primary-700 { color: #F89D3C !important; }
    .bg-primary-600 { background-color: #F9A04B !important; }
    .bg-primary-700 { background-color: #F89D3C !important; }
    .bg-primary-50 { background-color: #F9A04B10 !important; }
    .bg-primary-100 { background-color: #F9A04B20 !important; }
    .border-primary-500 { border-color: #F9A04B !important; }
    .border-primary-600 { border-color: #F9A04B !important; }

    /* Override green colors with HERBAL green */
    .text-green-600 { color: #7CB76F !important; }
    .text-green-700 { color: #81BC6E !important; }
    .text-green-800 { color: #81BC6E !important; }
    .bg-green-600 { background-color: #7CB76F !important; }
    .bg-green-700 { background-color: #81BC6E !important; }
    .bg-green-50 { background-color: #7CB76F10 !important; }
    .bg-green-100 { background-color: #7CB76F20 !important; }
    .border-green-500 { border-color: #7CB76F !important; }
    .border-green-600 { border-color: #7CB76F !important; }

    /* Override red colors with SPICY red */
    .text-red-600 { color: #E56B6F !important; }
    .text-red-700 { color: #DC5C5F !important; }
    .text-red-800 { color: #DC5C5F !important; }
    .bg-red-600 { background-color: #E56B6F !important; }
    .bg-red-700 { background-color: #DC5C5F !important; }
    .bg-red-50 { background-color: #E56B6F10 !important; }
    .bg-red-100 { background-color: #E56B6F20 !important; }
    .border-red-500 { border-color: #E56B6F !important; }
    .border-red-600 { border-color: #E56B6F !important; }

    /* Override yellow colors with SPICY red for warnings */
    .text-yellow-600 { color: #E56B6F !important; }
    .text-yellow-700 { color: #DC5C5F !important; }
    .text-yellow-800 { color: #DC5C5F !important; }
    .bg-yellow-600 { background-color: #E56B6F !important; }
    .bg-yellow-50 { background-color: #E56B6F10 !important; }
    .bg-yellow-100 { background-color: #E56B6F20 !important; }
    .border-yellow-400 { border-color: #E56B6F !important; }
    .border-yellow-500 { border-color: #E56B6F !important; }

    /* Override purple colors with FLORAL purple */
    .text-purple-600 { color: #9B7BA8 !important; }
    .text-purple-700 { color: #A688B8 !important; }
    .bg-purple-600 { background-color: #9B7BA8 !important; }
    .bg-purple-50 { background-color: #9B7BA810 !important; }
    .bg-purple-100 { background-color: #9B7BA820 !important; }

    /* Add new terpene-specific utility classes */
    .text-citrus { color: #F9A04B; }
    .text-citrus-dark { color: #F89D3C; }
    .bg-citrus { background-color: #F9A04B; }
    .bg-citrus-light { background-color: #F9A04B20; }
    .border-citrus { border-color: #F9A04B; }

    .text-herbal { color: #7CB76F; }
    .text-herbal-dark { color: #81BC6E; }
    .bg-herbal { background-color: #7CB76F; }
    .bg-herbal-light { background-color: #7CB76F20; }
    .border-herbal { border-color: #7CB76F; }

    .text-hoppy { color: #5DADE5; }
    .text-hoppy-dark { color: #6BB3E0; }
    .bg-hoppy { background-color: #5DADE5; }
    .bg-hoppy-light { background-color: #5DADE510; }
    .border-hoppy { border-color: #5DADE5; }

    .text-spicy { color: #E56B6F; }
    .text-spicy-dark { color: #DC5C5F; }
    .bg-spicy { background-color: #E56B6F; }
    .bg-spicy-light { background-color: #E56B6F20; }
    .border-spicy { border-color: #E56B6F; }

    .text-floral { color: #9B7BA8; }
    .text-floral-dark { color: #A688B8; }
    .bg-floral { background-color: #9B7BA8; }
    .bg-floral-light { background-color: #9B7BA820; }
    .border-floral { border-color: #9B7BA8; }

    .text-earthy { color: #D4A58A; }
    .text-earthy-dark { color: #C99A7D; }
    .bg-earthy { background-color: #D4A58A; }
    .bg-earthy-light { background-color: #D4A58A20; }
    .border-earthy { border-color: #D4A58A; }

    .text-terpene { color: #1A1A1A; }
    .bg-terpene { background-color: #1A1A1A; }
}

/* Custom Component Classes */
@layer components {
    /* Button Components */
    .btn-primary {
        @apply px-4 py-2 rounded-md focus:ring-2 focus:ring-offset-2 transition-all duration-200 font-medium inline-flex items-center justify-center;
        background-color: #F9A04B;
        color: white;
    }

    .btn-primary:hover {
        background-color: #F89D3C;
    }

    .btn-primary:focus {
        ring-color: #F9A04B;
    }
    
    .btn-secondary {
        @apply px-4 py-2 rounded-md focus:ring-2 focus:ring-offset-2 transition-all duration-200 font-medium inline-flex items-center justify-center;
        background-color: #7CB76F;
        color: white;
    }

    .btn-secondary:hover {
        background-color: #81BC6E;
    }

    .btn-secondary:focus {
        ring-color: #7CB76F;
    }
    
    .btn-success {
        @apply px-4 py-2 rounded-md focus:ring-2 focus:ring-offset-2 transition-all duration-200 font-medium inline-flex items-center justify-center;
        background-color: #7CB76F;
        color: white;
    }

    .btn-success:hover {
        background-color: #81BC6E;
    }

    .btn-success:focus {
        ring-color: #7CB76F;
    }
    
    .btn-danger {
        @apply px-4 py-2 rounded-md focus:ring-2 focus:ring-offset-2 transition-all duration-200 font-medium inline-flex items-center justify-center;
        background-color: #E56B6F;
        color: white;
    }

    .btn-danger:hover {
        background-color: #DC5C5F;
    }

    .btn-danger:focus {
        ring-color: #E56B6F;
    }
    
    .btn-outline {
        @apply border-2 px-4 py-2 rounded-md hover:text-white focus:ring-2 focus:ring-offset-2 transition-all duration-200 font-medium inline-flex items-center justify-center;
        border-color: #F9A04B;
        color: #F9A04B;
    }

    .btn-outline:hover {
        background-color: #F9A04B;
    }

    .btn-outline:focus {
        ring-color: #F9A04B;
    }
    
    .btn-ghost {
        @apply text-gray-700 px-4 py-2 rounded-md hover:bg-gray-100 focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 transition-all duration-200 font-medium inline-flex items-center justify-center;
    }
    
    .btn-sm {
        @apply px-3 py-1.5 text-sm;
    }
    
    .btn-lg {
        @apply px-6 py-3 text-lg;
    }
    
    .btn-disabled {
        @apply opacity-50 cursor-not-allowed pointer-events-none;
    }
    
    /* Card Components */
    .card {
        @apply bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden;
    }
    
    .card-header {
        @apply px-6 py-4 border-b border-gray-200;
        background-color: #D4A58A10;
    }
    
    .card-body {
        @apply p-6;
    }
    
    .card-footer {
        @apply px-6 py-4 border-t border-gray-200;
        background-color: #D4A58A10;
    }
    
    .card-hover {
        @apply hover:shadow-lg transition-shadow duration-200;
    }
    
    /* Form Components */
    .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 transition-colors duration-200;
    }

    .form-input:focus {
        ring-color: #F9A04B;
        border-color: #F9A04B;
    }
    
    .form-input-error {
        @apply border-red-500 focus:ring-red-500 focus:border-red-500;
    }
    
    .form-textarea {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 transition-colors duration-200 resize-vertical;
    }

    .form-textarea:focus {
        ring-color: #F9A04B;
        border-color: #F9A04B;
    }
    
    .form-select {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 transition-colors duration-200 bg-white;
    }

    .form-select:focus {
        ring-color: #F9A04B;
        border-color: #F9A04B;
    }
    
    .form-checkbox {
        @apply h-4 w-4 border-gray-300 rounded focus:ring-2;
        color: #F9A04B;
    }

    .form-checkbox:focus {
        ring-color: #F9A04B;
    }
    
    .form-radio {
        @apply h-4 w-4 border-gray-300 focus:ring-2;
        color: #F9A04B;
    }

    .form-radio:focus {
        ring-color: #F9A04B;
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }
    
    .form-error {
        @apply text-red-600 text-sm mt-1;
    }
    
    .form-help {
        @apply text-gray-500 text-sm mt-1;
    }
    
    /* Alert Components */
    .alert {
        @apply px-4 py-3 rounded-md border text-sm;
    }
    
    .alert-success {
        background-color: #7CB76F20;
        border-color: #7CB76F;
        color: #1A1A1A;
    }
    
    .alert-error {
        background-color: #E56B6F20;
        border-color: #E56B6F;
        color: #1A1A1A;
    }
    
    .alert-warning {
        background-color: #F9A04B20;
        border-color: #F9A04B;
        color: #1A1A1A;
    }
    
    .alert-info {
        background-color: #5DADE520;
        border-color: #5DADE5;
        color: #1A1A1A;
    }
    
    /* Badge Components */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    
    .badge-primary {
        background-color: #F9A04B20;
        color: #1A1A1A;
    }
    
    .badge-secondary {
        background-color: #D4A58A20;
        color: #1A1A1A;
    }
    
    .badge-success {
        background-color: #7CB76F20;
        color: #1A1A1A;
    }
    
    .badge-danger {
        background-color: #E56B6F20;
        color: #1A1A1A;
    }
    
    .badge-warning {
        background-color: #F9A04B20;
        color: #1A1A1A;
    }
    
    .badge-info {
        background-color: #5DADE520;
        color: #1A1A1A;
    }
    
    /* Navigation Components */
    .nav-link {
        @apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
        color: #1A1A1A;
    }

    .nav-link:hover {
        color: #F9A04B;
    }
    
    .nav-link-active {
        color: #F9A04B;
        background-color: #F9A04B10;
    }
    
    .nav-brand {
        @apply font-bold text-xl;
        color: #1A1A1A;
    }
    
    /* Modal Components */
    .modal-overlay {
        @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
    }
    
    .modal-container {
        @apply bg-white rounded-lg shadow-xl max-w-md w-full max-h-screen overflow-y-auto;
    }
    
    .modal-header {
        @apply px-6 py-4 border-b border-gray-200;
    }
    
    .modal-body {
        @apply px-6 py-4;
    }
    
    .modal-footer {
        @apply px-6 py-4 border-t border-gray-200 flex justify-end space-x-3;
    }
    
    /* Table Components */
    .table {
        @apply min-w-full divide-y divide-gray-200;
    }
    
    .table-header {
        background-color: #D4A58A10;
    }
    
    .table-header-cell {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }
    
    .table-body {
        @apply bg-white divide-y divide-gray-200;
    }
    
    .table-cell {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
    }
    
    .table-row-hover {
        @apply hover:bg-gray-50 transition-colors duration-150;
    }
    
    /* Progress Components */
    .progress-bar {
        @apply w-full bg-gray-200 rounded-full overflow-hidden;
    }
    
    .progress-fill {
        @apply h-full transition-all duration-300 ease-out;
        background-color: #F9A04B;
    }
    
    .progress-fill-success {
        background-color: #7CB76F;
    }
    
    .progress-fill-warning {
        background-color: #F9A04B;
    }
    
    .progress-fill-danger {
        background-color: #E56B6F;
    }
    
    /* Loading Components */
    .spinner {
        @apply animate-spin rounded-full border-2 border-gray-300;
        border-top-color: #F9A04B;
    }
    
    .spinner-sm {
        @apply h-4 w-4;
    }
    
    .spinner-md {
        @apply h-6 w-6;
    }
    
    .spinner-lg {
        @apply h-8 w-8;
    }
    
    /* Utility Components */
    .container-fluid {
        @apply w-full px-4 mx-auto;
    }
    
    .container-sm {
        @apply max-w-2xl mx-auto px-4;
    }
    
    .container-md {
        @apply max-w-4xl mx-auto px-4;
    }
    
    .container-lg {
        @apply max-w-6xl mx-auto px-4;
    }
    
    .container-xl {
        @apply max-w-7xl mx-auto px-4;
    }
    
    /* Text Components */
    .text-muted {
        @apply text-gray-500;
    }
    
    .text-primary {
        color: #F9A04B;
    }
    
    .text-success {
        color: #7CB76F;
    }
    
    .text-danger {
        color: #E56B6F;
    }
    
    .text-warning {
        color: #F9A04B;
    }
    
    .text-info {
        color: #5DADE5;
    }
    
    /* Background Components */
    .bg-muted {
        background-color: #D4A58A20;
    }
    
    .bg-primary {
        background-color: #F9A04B;
    }
    
    .bg-success {
        background-color: #7CB76F;
    }
    
    .bg-danger {
        background-color: #E56B6F;
    }
    
    .bg-warning {
        background-color: #F9A04B;
    }
    
    .bg-info {
        background-color: #5DADE5;
    }
}

/* Custom Base Styles */
@layer base {
    /* Typography */
    h1, h2, h3, h4, h5, h6 {
        @apply font-semibold leading-tight;
    }
    
    h1 {
        @apply text-3xl md:text-4xl;
    }
    
    h2 {
        @apply text-2xl md:text-3xl;
    }
    
    h3 {
        @apply text-xl md:text-2xl;
    }
    
    h4 {
        @apply text-lg md:text-xl;
    }
    
    h5 {
        @apply text-base md:text-lg;
    }
    
    h6 {
        @apply text-sm md:text-base;
    }
    
    /* Links */
    a {
        @apply transition-colors duration-200;
    }
    
    /* Form Elements */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        @apply appearance-none;
    }
    
    /* Focus Styles */
    *:focus {
        @apply outline-none;
    }
    
    /* Scrollbar Styles */
    ::-webkit-scrollbar {
        @apply w-2;
    }
    
    ::-webkit-scrollbar-track {
        @apply bg-gray-100;
    }
    
    ::-webkit-scrollbar-thumb {
        @apply bg-gray-300 rounded-full;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-400;
    }
    
    /* Selection Styles */
    ::selection {
        background-color: #F9A04B30;
        color: #1A1A1A;
    }
    
    /* Print Styles */
    @media print {
        .no-print {
            @apply hidden;
        }
        
        .print-only {
            @apply block;
        }
    }
}

/* Custom Utilities */
@layer utilities {
    /* Animation Utilities */
    .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    
    .animate-slide-in {
        animation: slideIn 0.3s ease-out;
    }
    
    .animate-bounce-in {
        animation: bounceIn 0.6s ease-out;
    }
    
    .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    /* Gradient Utilities */
    .gradient-primary {
        background: linear-gradient(to right, #F9A04B, #9B7BA8);
    }
    
    .gradient-success {
        background: linear-gradient(to right, #7CB76F, #5DADE5);
    }
    
    .gradient-warning {
        background: linear-gradient(to right, #F9A04B, #F89D3C);
    }
    
    .gradient-danger {
        background: linear-gradient(to right, #E56B6F, #DC5C5F);
    }
    
    /* Shadow Utilities */
    .shadow-primary {
        box-shadow: 0 4px 14px 0 rgba(249, 160, 75, 0.39);
    }
    
    .shadow-success {
        box-shadow: 0 4px 14px 0 rgba(124, 183, 111, 0.39);
    }
    
    .shadow-danger {
        box-shadow: 0 4px 14px 0 rgba(229, 107, 111, 0.39);
    }
    
    /* Glass Effect */
    .glass {
        @apply backdrop-blur-md bg-white bg-opacity-25 border border-white border-opacity-20;
    }
    
    /* Responsive Text */
    .text-responsive {
        @apply text-sm sm:text-base md:text-lg lg:text-xl;
    }
    
    /* Aspect Ratios */
    .aspect-square {
        aspect-ratio: 1 / 1;
    }
    
    .aspect-video {
        aspect-ratio: 16 / 9;
    }
    
    .aspect-photo {
        aspect-ratio: 4 / 3;
    }
    
    /* Safe Areas */
    .safe-top {
        padding-top: env(safe-area-inset-top);
    }
    
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .safe-left {
        padding-left: env(safe-area-inset-left);
    }
    
    .safe-right {
        padding-right: env(safe-area-inset-right);
    }
}

/* Keyframe Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .dark-mode-auto {
        @apply bg-gray-900 text-white;
    }
    
    .dark-mode-auto .card {
        @apply bg-gray-800 border-gray-700;
    }
    
    .dark-mode-auto .form-input {
        @apply bg-gray-800 border-gray-600 text-white;
    }
    
    .dark-mode-auto .btn-secondary {
        @apply bg-gray-700 hover:bg-gray-600;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .btn-primary {
        @apply border-2 border-blue-800;
    }
    
    .form-input {
        @apply border-2 border-gray-500;
    }
    
    .card {
        @apply border-2 border-gray-400;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .animate-spin {
        animation: none;
    }
    
    .animate-pulse {
        animation: none;
    }
    
    .animate-bounce {
        animation: none;
    }
}