/* Global Modal Button Styling - Consistent across all modals */

/* Modal footer button container */
.modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 20px !important;
    border-top: 1px solid #e0e0e0 !important;
}

/* Primary action buttons (Save, Create, etc.) - Now dark blue-gray and on the RIGHT */
.modal-footer .button.success,
.modal-footer .success,
.modal-footer .primary,
.modal-footer .button.primary,
.modal-footer #save-client,
.modal-footer #save-edit,
.modal-footer #process-import,
.modal-footer button[type="submit"],
.modal-footer button[id*="save"],
.modal-footer button[id*="create"],
.modal-footer button[onclick*="save"],
.modal-footer button[onclick*="create"] {
    background-color: #293241 !important;
    background: #293241 !important;
    color: white !important;
    border: 1px solid #293241 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    order: 2 !important; /* Always appear on the right */
}

.modal-footer .button.success:hover,
.modal-footer .success:hover,
.modal-footer .primary:hover,
.modal-footer .button.primary:hover,
.modal-footer #save-client:hover,
.modal-footer #save-edit:hover,
.modal-footer #process-import:hover {
    background-color: #1e2330 !important;
    background: #1e2330 !important;
    border-color: #1e2330 !important;
}

/* Secondary action buttons (Cancel, Close, etc.) - Always GRAY and on the LEFT */
.modal-footer .button.outline,
.modal-footer .outline,
.modal-footer #cancel-client,
.modal-footer #cancel-edit,
.modal-footer #cancel-import,
.modal-footer button[id*="cancel"],
.modal-footer button[onclick*="cancel"],
.modal-footer button[onclick*="close"] {
    background-color: #f8f9fa !important;
    background: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    order: 1 !important; /* Always appear on the left */
}

.modal-footer .button.outline:hover,
.modal-footer .outline:hover,
.modal-footer #cancel-client:hover,
.modal-footer #cancel-edit:hover,
.modal-footer #cancel-import:hover {
    background-color: #e9ecef !important;
    background: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* Settings page save button - now dark blue-gray */
#save-settings,
.button-primary,
button.button-primary {
    background-color: #293241 !important;
    background: #293241 !important;
    color: white !important;
    border: 1px solid #293241 !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

#save-settings:hover,
.button-primary:hover,
button.button-primary:hover {
    background-color: #1e2330 !important;
    background: #1e2330 !important;
    border-color: #1e2330 !important;
}

/* Ensure consistent button order in all modals */
.modal-footer {
    flex-direction: row !important;
}

/* Handle any modal with different class names */
.modal .modal-footer button:last-child {
    order: 2 !important; /* Save/Create buttons on right */
}

.modal .modal-footer button:first-child {
    order: 1 !important; /* Cancel buttons on left */
}

/* Invoice modal specific buttons */
#createInvoiceModal .modal-footer button,
#editInvoiceModal .modal-footer button {
    order: initial !important; /* Reset for specific handling */
}

#createInvoiceModal .modal-footer button[onclick*="create"],
#editInvoiceModal .modal-footer button[onclick*="save"] {
    background-color: #293241 !important;
    order: 2 !important;
}

#createInvoiceModal .modal-footer button[onclick*="cancel"],
#editInvoiceModal .modal-footer button[onclick*="cancel"] {
    order: 1 !important;
}