/* ========================================
   MANAGEMENT PANELS STYLES
   ======================================== */

/* Native color input styles for all Management Panels */
.form-control-color {
    width: 80px !important;
    height: 50px !important;
    padding: 0.5rem !important;
    border: 3px solid #dee2e6 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-right: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.form-control-color:hover {
    border-color: #adb5bd !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.form-control-color:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Hide color preview since we don't need it with native color input */
.priority-custom-color-picker .priority-custom-color-preview,
.status-custom-color-picker .status-custom-color-preview,
.delivery-method-custom-color-picker .delivery-method-custom-color-preview,
.delivered-custom-color-picker .delivered-custom-color-preview {
    display: none !important;
}

/* Ensure native color input is the only visible color picker */
.priority-custom-color-picker,
.status-custom-color-picker,
.delivery-method-custom-color-picker,
.delivered-custom-color-picker {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Hide any Pickr-related elements that might still appear */
.priority-custom-color-picker .pickr,
.priority-custom-color-picker .pcr-button,
.priority-custom-color-picker .pcr-app,
.status-custom-color-picker .pickr,
.status-custom-color-picker .pcr-button,
.status-custom-color-picker .pcr-app,
.delivery-method-custom-color-picker .pickr,
.delivery-method-custom-color-picker .pcr-button,
.delivery-method-custom-color-picker .pcr-app,
.delivered-custom-color-picker .pickr,
.delivered-custom-color-picker .pcr-button,
.delivered-custom-color-picker .pcr-app {
    display: none !important;
}

/* ========================================
   FORM VALIDATION FIXES FOR MANAGEMENT PANELS
   ======================================== */

/* Hide validation messages by default for management forms */
.management-form .invalid-feedback,
.management-modal .invalid-feedback {
    display: none !important;
}

/* Only show validation messages when form has was-validated class */
.management-form.was-validated .invalid-feedback,
.management-modal .modal-content .was-validated .invalid-feedback {
    display: block !important;
}

/* Ensure form fields don't show validation state by default */
.management-form .form-control.is-invalid,
.management-form .form-control.is-valid,
.management-modal .form-control.is-invalid,
.management-modal .form-control.is-valid {
    border-color: #dee2e6 !important;
    box-shadow: none !important;
}

/* Only show validation styling when form is validated */
.management-form.was-validated .form-control.is-invalid,
.management-modal .modal-content .was-validated .form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.management-form.was-validated .form-control.is-valid,
.management-modal .modal-content .was-validated .form-control.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* ========================================
   MANAGEMENT PANEL SPECIFIC STYLES
   ======================================== */

/* Priority Management Panel */
.priority-management-panel {
    padding: 0.75rem;
    height: 100%;
    overflow-y: auto;
}

.priority-management-panel .card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Status Management Panel */
.status-management-panel {
    padding: 0.75rem;
    height: 100%;
    overflow-y: auto;
}

.status-management-panel .card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Delivery Method Management Panel */
.delivery-method-management-panel {
    padding: 0.75rem;
    height: 100%;
    overflow-y: auto;
}

.delivery-method-management-panel .card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Delivered Management Panel */
.delivered-management-panel {
    padding: 0.75rem;
    height: 100%;
    overflow-y: auto;
}

.delivered-management-panel .card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .form-control-color {
        width: 60px !important;
        height: 45px !important;
        padding: 0.375rem !important;
        margin-right: 10px !important;
    }
    
    .priority-management-panel,
    .status-management-panel,
    .delivery-method-management-panel,
    .delivered-management-panel {
        padding: 0.375rem;
    }
}