/* In static/css/custom_styles.css */

/* ============================================================================
   GLOBAL FORM STYLING - Date Input Fix
   ============================================================================ */

/* Force border-radius on date inputs globally */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
input[type="month"].form-control,
input[type="week"].form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem !important;
    border: 1px solid #cbd5e1;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="date"].form-control:focus,
input[type="datetime-local"].form-control:focus,
input[type="time"].form-control:focus,
input[type="month"].form-control:focus,
input[type="week"].form-control:focus {
    border-color: #3b82f6;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

/* Ensure all form-control inputs have rounded corners */
.form-control,
.form-select {
    border-radius: 0.375rem !important;
}

/*
  This defines the keyframes for our shake animation.
  It moves the element left and right quickly over 0.4 seconds.
*/
@keyframes shake-horizontal {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/*
  This is the class we add when an error occurs.
  It applies the red border and triggers the shake animation.
  We make it more specific by targeting.form-control.
*/
.form-control.input-error {
    border-color: #dc3545; /* Bootstrap's standard danger red */
    animation: shake-horizontal 0.4s;
}

/*
  THE FIX: This is the new, more powerful rule.
  It specifically targets an input with our error class that is ALSO in focus.
  It overrides Bootstrap's default blue glow with a red one.
*/
.form-control.input-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); /* Bootstrap's standard red focus glow */
}

/* ============================================================================
   BOOTSTRAP + TAILWIND COMPATIBILITY FIX FOR MILK COLLECTION MODAL
   ============================================================================ */

/* Fix for Bootstrap modal with Tailwind utilities */
#milkCollectionModal .modal-content {
    background-color: #f8fafc !important; /* slate-50 */
}

#milkCollectionModal .modal-header {
    background-color: #f1f5f9 !important; /* slate-100 */
    border-bottom: 1px solid #e2e8f0 !important; /* slate-200 */
}

/* Ensure form-control works properly with Tailwind width utilities */
#milkCollectionModal .form-control,
#milkCollectionModal .form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #0f172a;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #cbd5e1; /* slate-300 */
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#milkCollectionModal .form-control:focus,
#milkCollectionModal .form-select:focus {
    color: #0f172a;
    background-color: #fff;
    border-color: #3b82f6; /* blue-500 */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

/* Form control with slate background */
#milkCollectionModal .form-control.bg-slate-100 {
    background-color: #f1f5f9 !important;
}

/* Plaintext form controls (readonly) */
#milkCollectionModal .form-control-plaintext {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: #1e293b;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}

/* Read-only display fields - NO BORDERS */
#milkCollectionModal #cow-degree,
#milkCollectionModal #cow-rate,
#milkCollectionModal #cow-amount,
#milkCollectionModal #buffalo-degree,
#milkCollectionModal #buffalo-rate,
#milkCollectionModal #buffalo-amount {
    border: none !important;
    background: transparent !important;
    padding: 0.5rem 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* White backgrounds for cards */
#milkCollectionModal .bg-white {
    background-color: #ffffff !important;
}

/* Slate backgrounds */
#milkCollectionModal .bg-slate-100 {
    background-color: #f1f5f9 !important;
}

#milkCollectionModal .bg-slate-50 {
    background-color: #f8fafc !important;
}

/* Green backgrounds for amount fields */
#milkCollectionModal .bg-green-100 {
    background-color: #dcfce7 !important;
}

/* Border colors */
#milkCollectionModal .border-slate-200 {
    border-color: #e2e8f0 !important;
}

#milkCollectionModal .border-slate-300 {
    border-color: #cbd5e1 !important;
}

/* Text colors */
#milkCollectionModal .text-slate-600 {
    color: #475569 !important;
}

#milkCollectionModal .text-slate-700 {
    color: #334155 !important;
}

#milkCollectionModal .text-slate-800 {
    color: #1e293b !important;
}

#milkCollectionModal .text-green-700 {
    color: #15803d !important;
}

#milkCollectionModal .text-green-800 {
    color: #166534 !important;
}

/* Rounded corners */
#milkCollectionModal .rounded-md {
    border-radius: 0.375rem !important;
}

#milkCollectionModal .rounded-xl {
    border-radius: 0.75rem !important;
}

/* Shadows */
#milkCollectionModal .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

#milkCollectionModal .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Spacing utilities */
#milkCollectionModal .space-y-8 > * + * {
    margin-top: 2rem !important;
}

/* Grid layouts */
#milkCollectionModal .grid {
    display: grid !important;
}

#milkCollectionModal .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

#milkCollectionModal .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#milkCollectionModal .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#milkCollectionModal .gap-4 {
    gap: 1rem !important;
}

#milkCollectionModal .gap-6 {
    gap: 1.5rem !important;
}

#milkCollectionModal .gap-8 {
    gap: 2rem !important;
}

/* Responsive grid columns */
@media (min-width: 768px) {
    #milkCollectionModal .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    #milkCollectionModal .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    #milkCollectionModal .md\:col-span-1 {
        grid-column: span 1 / span 1 !important;
    }
    
    #milkCollectionModal .md\:col-span-3 {
        grid-column: span 3 / span 3 !important;
    }
}

@media (min-width: 1024px) {
    #milkCollectionModal .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Padding utilities */
#milkCollectionModal .p-2 {
    padding: 0.5rem !important;
}

#milkCollectionModal .p-6 {
    padding: 1.5rem !important;
}

#milkCollectionModal .p-8 {
    padding: 2rem !important;
}

#milkCollectionModal .px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

#milkCollectionModal .py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

#milkCollectionModal .px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

#milkCollectionModal .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Margin utilities */
#milkCollectionModal .mb-1 {
    margin-bottom: 0.25rem !important;
}

#milkCollectionModal .mb-4 {
    margin-bottom: 1rem !important;
}

#milkCollectionModal .mt-1 {
    margin-top: 0.25rem !important;
}

/* Font sizes */
#milkCollectionModal .text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

#milkCollectionModal .text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

#milkCollectionModal .text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

#milkCollectionModal .text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

/* Font weights */
#milkCollectionModal .font-medium {
    font-weight: 500 !important;
}

#milkCollectionModal .font-bold {
    font-weight: 700 !important;
}

/* Text alignment */
#milkCollectionModal .text-center {
    text-align: center !important;
}

/* Display utilities */
#milkCollectionModal .block {
    display: block !important;
}

/* Width utilities */
#milkCollectionModal .w-full {
    width: 100% !important;
}

/* Min height */
#milkCollectionModal .min-h-\[38px\] {
    min-height: 38px !important;
}

/* Items alignment */
#milkCollectionModal .items-end {
    align-items: flex-end !important;
}