/* ==========================================================================
   1. Calendar Popup - Break out of input boundaries & scale properly
   ========================================================================== */
.mud-popover.custom-wide-popover {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
}

.custom-wide-popover .mud-picker-inline-paper,
.custom-wide-popover .mud-picker-container,
.custom-wide-popover .mud-picker,
.custom-wide-popover .mud-picker-calendar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* ==========================================================================
   2. Input Box - Force 26px height to match neighboring text fields
   ========================================================================== */
.custom-row-datepicker-input.mud-input-root-outlined {
    height: 26px !important;
    min-height: 26px !important;
}

.custom-row-datepicker-input .mud-input-slot {
    height: 26px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 24px !important;
}

.custom-row-datepicker-input ~ .mud-input-adornment {
    height: 26px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

    .custom-row-datepicker-input ~ .mud-input-adornment .mud-icon-button {
        padding: 2px !important;
    }

/* ==========================================================================
   3. Table Row Styles - For warning/danger/success states
   ========================================================================== */
.mud-table-row-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.mud-table-row-danger {
    background-color: rgba(244, 67, 54, 0.1) !important;
}

.mud-table-row-success {
    background-color: rgba(76, 175, 80, 0.1) !important;
}

.mud-table-row-info {
    background-color: rgba(33, 150, 243, 0.1) !important;
}

/* ==========================================================================
   4. Animations - Fade in and slide in
   ========================================================================== */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

/* ==========================================================================
   5. List Item Hover - For search results
   ========================================================================== */
.mud-list-item-hover-primary {
    background-color: rgba(33, 150, 243, 0.12) !important;
    border-left: 3px solid #2196f3 !important;
}

/* ==========================================================================
   6. Date Picker Popover Fix - For serial date pickers
   ========================================================================== */
.serial-date-picker {
    z-index: 9999 !important;
    position: relative !important;
}

    .serial-date-picker .mud-popover {
        z-index: 9999 !important;
        min-width: 300px !important;
        max-width: 300px !important;
        width: 300px !important;
        overflow: visible !important;
        position: fixed !important;
    }

        .serial-date-picker .mud-popover > div {
            width: 300px !important;
            min-width: 300px !important;
        }

    .serial-date-picker .mud-picker-container {
        z-index: 9999 !important;
        width: 300px !important;
        min-width: 300px !important;
    }

    .serial-date-picker .mud-picker {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
    }

    .serial-date-picker .mud-picker-calendar {
        width: 100% !important;
        min-width: 280px !important;
    }

    .serial-date-picker .mud-calendar {
        width: 100% !important;
        min-width: 280px !important;
    }

    .serial-date-picker .mud-calendar-day {
        min-width: 36px !important;
        min-height: 36px !important;
        width: 36px !important;
        height: 36px !important;
    }

.mud-picker-overlay {
    z-index: 9999 !important;
}

.mud-picker-container {
    z-index: 9999 !important;
}

/* ==========================================================================
   7. Compact Input Styles - For dense forms
   ========================================================================== */
.compact-input .mud-input {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: 13px !important;
}

.compact-input .mud-input-slot {
    padding: 0 4px !important;
    height: 28px !important;
    min-height: 28px !important;
}

.compact-input .mud-input-adornment {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 4px !important;
}

.compact-input .mud-select-arrow {
    min-height: 28px !important;
    height: 28px !important;
}

.compact-input .mud-input-control {
    margin: 0 !important;
    min-height: 28px !important;
}

/* ==========================================================================
   8. Filter Paper Styles - For consistent filter sections
   ========================================================================== */
.filter-paper {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px !important;
    padding: 16px 20px !important;
}

.filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}

/* ==========================================================================
   9. Table Container Styles
   ========================================================================== */
.table-container {
    border-radius: 8px !important;
    overflow: hidden !important;
}

    .table-container .mud-table {
        border-radius: 8px !important;
    }

/* ==========================================================================
   10. Search Box Styles
   ========================================================================== */
.search-box {
    min-width: 250px !important;
}

    .search-box .mud-input {
        border-radius: 20px !important;
        background-color: white !important;
    }

/* ==========================================================================
   11. Toolbar Styles
   ========================================================================== */
.toolbar-title {
    font-weight: 600;
    color: #1a1a1a;
}

/* ==========================================================================
   12. Badge Styles
   ========================================================================== */
.total-badge {
    background: linear-gradient(135deg, #4a90e2, #357abd);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* ==========================================================================
   13. Status Chip Styles
   ========================================================================== */
.status-chip {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   14. Invoice/Amount Text Styles
   ========================================================================== */
.invoice-number {
    font-weight: 600;
    color: #1a1a1a;
}

.amount-text {
    font-weight: 600;
    color: #2d7d46;
}

.outstanding-text {
    font-weight: 500;
    color: #dc3545;
}

/* ==========================================================================
   15. MudAutocomplete Fixed Height
   ========================================================================== */
.autocomplete-fixed-height .mud-input-control {
    height: 40px !important;
    min-height: 40px !important;
}

.autocomplete-fixed-height .mud-input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    line-height: 40px !important;
}

.autocomplete-fixed-height .mud-input-slot {
    height: 40px !important;
    min-height: 40px !important;
}

.autocomplete-fixed-height .mud-input-adornment {
    height: 40px !important;
}

.autocomplete-fixed-height .mud-icon-button {
    height: 40px !important;
    width: 40px !important;
}

/* ==========================================================================
   16. Filter Control Heights - Consistent 40px
   ========================================================================== */
.filter-control {
    font-size: 13px;
    height: 40px;
}

    .filter-control .mud-input {
        height: 40px !important;
        min-height: 40px !important;
    }

    .filter-control .mud-input-slot {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
    }

    .filter-control .mud-select {
        height: 40px !important;
    }

/* ==========================================================================
   17. MudSelect with py-1 class
   ========================================================================== */
.mud-select.py-1 .mud-input {
    height: 40px !important;
    min-height: 40px !important;
}

.mud-select.py-1 .mud-input-slot {
    height: 40px !important;
    min-height: 40px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   18. Date Picker Popover - Fix for all date pickers
   ========================================================================== */
.mud-popover {
    z-index: 9999 !important;
}

.mud-picker-container {
    z-index: 10000 !important;
}

.mud-picker-inline-paper {
    z-index: 10000 !important;
}

.mud-picker-overlay {
    z-index: 9999 !important;
}

/* Fix for date picker being cut off in filter sections */
.mud-datepicker .mud-popover {
    z-index: 9999 !important;
    min-width: 300px !important;
}

.mud-datepicker .mud-picker-container {
    z-index: 9999 !important;
}

/* Ensure date picker popup has enough space */
.mud-picker-calendar {
    min-width: 280px !important;
}

.mud-calendar {
    min-width: 280px !important;
}

/* Fix for inline picker */
.mud-picker-inline-paper {
    min-width: 300px !important;
}

/* ==========================================================================
   18. Animation for highlighting a newly added product row in the table
   ========================================================================== */
@keyframes highlightFlash {
    0% {
        background-color: rgba(33, 150, 243, 0.3);
    }

    50% {
        background-color: rgba(33, 150, 243, 0.6);
    }

    100% {
        background-color: transparent;
    }
}

.product-highlight {
    animation: highlightFlash 0.5s ease 3;
}