/* Upload Section Styling */
.category-prediction-upload .x-panel-body {
    background: #ffffff;
}

.category-prediction-upload .x-panel-header {
    border-bottom: 2px solid #dee2e6;
    font-size: 14px;
    padding: 12px 15px;
}

/* Primary Button Styling */
.pimcore_button_primary {
    background: linear-gradient(to bottom, #3498db 0%, #2980b9 100%) !important;
    border: 1px solid #2471a3 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important;
}

.pimcore_button_primary:hover {
    background: linear-gradient(to bottom, #5dade2 0%, #3498db 100%) !important;
    border-color: #2471a3 !important;
}

.pimcore_button_primary:active {
    background: linear-gradient(to bottom, #2980b9 0%, #21618c 100%) !important;
}

/* Secondary Button Styling */
.pimcore_button_secondary {
    background: linear-gradient(to bottom, #95a5a6 0%, #000000 100%) !important;
    border: 1px solid #6c757d !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important;
}

.pimcore_button_secondary:hover {
    background: linear-gradient(to bottom, #b2babb 0%, #95a5a6 100%) !important;
}

.pimcore_button_secondary:active {
    background: linear-gradient(to bottom, #7f8c8d 0%, #6c757d 100%) !important;
}

/* File Upload Field Styling */
#category_prediction_file_upload {
    height: 32px !important;
}

#category_prediction_file_upload .x-form-text {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
}

#category_prediction_file_upload .x-btn {
    height: 32px !important;
    border: 1px solid #ced4da !important;
    color: #495057 !important;
}

#category_prediction_file_upload .x-btn:hover {
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%) !important;
}

/* Grid Styling */
.category-prediction-grid .x-grid-header {
    background: linear-gradient(to bottom, #34495e 0%, #2c3e50 100%) !important;
    border-bottom: 2px solid #1a252f !important;
}

.category-prediction-grid .x-column-header {
    color: #ffffff !important;
    font-weight: 600 !important;
    border-right: 1px solid rgba(255,255,255,0.1) !important;
}

.category-prediction-grid .x-grid-row {
    border-bottom: 1px solid #ecf0f1 !important;
}

.category-prediction-grid .x-grid-row:hover {
    background: #f8f9fa !important;
}

.category-prediction-grid .x-grid-row-alt {
    background: #fafbfc !important;
}

/* Status Badge Styling */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.status-open {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.status-badge.status-processing {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #17a2b8;
}

.status-badge.status-completed {
    background: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
}

.status-badge.status-failed {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}

/* Action Column Icons */
.x-action-col-icon {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.x-action-col-icon:hover {
    opacity: 1;
}

/* Panel Title Styling */
#category_prediction_panel .x-panel-header-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
}

/* Grid Panel Headers */
.category-prediction-grid .x-panel-header {
    background: linear-gradient(to bottom, #ecf0f1 0%, #bdc3c7 100%) !important;
    border-bottom: 2px solid #95a5a6 !important;
    padding: 10px 15px !important;
}

.category-prediction-grid .x-panel-header-title {
    font-size: 14px !important;
    color: #2c3e50 !important;
}

/* Toolbar Styling */
.category-prediction-grid .x-toolbar {
    background: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 5px 10px !important;
}

/* Loading Mask */
.category-prediction-loading {
    background: rgba(255, 255, 255, 0.9) !important;
}

.category-prediction-loading .x-mask-msg {
    background: linear-gradient(to bottom, #3498db 0%, #2980b9 100%) !important;
    border: 2px solid #2471a3 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 15px 25px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Info Box Styling */
.info-box {
    background: #e8f4f8;
    border-left: 4px solid #3498db;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 14px;
    color: #2c3e50;
    line-height: 1.6;
}

.info-box i {
    color: #3498db;
    margin-right: 8px;
    font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .category-prediction-grid {
        font-size: 12px !important;
    }
}

/* Animation for upload success */
@keyframes uploadSuccess {
    0% { background-color: #d4edda; }
    100% { background-color: transparent; }
}

.upload-success {
    animation: uploadSuccess 2s ease-out;
}

/* Tooltip Styling */
.x-tip {
    background: #2c3e50 !important;
    border: 1px solid #1a252f !important;
    color: #ffffff !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
}

.x-tip-body {
    color: #ffffff !important;
}