/* Modern ERP system-wide create and edit page redesign stylesheet
 * Standardized after http://127.0.0.1:8000/products/create
 */

/* 1. Global Page Wrapper & Container */
.product-create-redesign,
.product-create-page,
.erp-form-page,
.product-form-page,
.product-edit-page,
section.content.product-form-page {
    padding: 24px 28px !important;
    background-color: #f8fafc !important;
    min-height: calc(100vh - 60px) !important;
    font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    direction: inherit;
    text-align: start;
    overflow-x: hidden !important;
    max-width: 100% !important;
}

body.erp-form-route #scrollable-container {
    background: #f8fafc !important;
}

body.erp-form-route section.content-header {
    padding: 24px 28px 0 !important;
    background: #f8fafc !important;
}

body.erp-form-route section.content {
    padding: 24px 28px 120px !important;
    background: #f8fafc !important;
    min-height: calc(100vh - 60px) !important;
    overflow-x: clip;
}

body.erp-form-route section.content-header + section.content {
    padding-top: 16px !important;
}

body.erp-form-route section.content-header h1 {
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

body.erp-form-route section.content-header h1 small {
    display: block;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin-top: 6px !important;
}

/* 2. Page Header & Breadcrumbs */
.pcr-header,
.erp-page-header {
    margin-bottom: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.pcr-breadcrumb,
.erp-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

.pcr-breadcrumb a,
.erp-breadcrumb a {
    color: #475569 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.pcr-breadcrumb a:hover,
.erp-breadcrumb a:hover {
    color: #0d9488 !important;
}

.pcr-title,
.erp-page-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.02em !important;
}

.pcr-subtitle,
.erp-page-subtitle {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* Hide redundant duplicate h1 titles on pages using pl-title-copy / pl-page-heading */
body.erp-form-route .pl-title-copy h1,
body.erp-form-route .pl-page-heading h1 {
    display: none !important;
}

/* Hide print title section in web view */
body.erp-form-route .print_section,
.product-create-redesign .print_section {
    display: none !important;
}

/* 3. Card Shell Container */
.pcr-card,
.erp-form-card,
body.erp-form-route .box,
body.erp-form-route .box-solid,
body.erp-form-route .box-primary,
body.erp-form-route .box-default {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.03) !important;
    transition: box-shadow 0.2s ease !important;
    text-align: start !important;
}

.pcr-card-header,
.product-form-card-head,
body.erp-form-route .box-header,
.erp-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent !important;
    justify-content: flex-start !important;
    text-align: start !important;
}

.pcr-card-icon,
.product-form-step,
.erp-card-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #ccfbf1 !important;
    color: #0d9488 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.pcr-card-title,
.product-form-card-head h2,
body.erp-form-route .box-title,
.erp-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

/* 4. Form Labels & Inputs */
.product-create-redesign .form-group,
.erp-form-page .form-group,
body.erp-form-route .form-group {
    margin-bottom: 20px !important;
    text-align: start !important;
}

.product-create-redesign .form-group > label,
.erp-form-page .form-group > label,
body.erp-form-route .form-group > label,
body.erp-form-route label:not(.pcr-toggle-card):not(.custom-control-label) {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    text-align: start !important;
}

.product-create-redesign .fa-info-circle,
.product-create-redesign .hover-q,
body.erp-form-route .fa-info-circle,
body.erp-form-route .hover-q,
body.erp-form-route i.fa-info-circle,
body.erp-form-route i[data-toggle="popover"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
    margin-left: 5px !important;
    font-size: 14px !important;
    color: #0284c7 !important;
    cursor: pointer !important;
}

.product-create-redesign .form-control,
.erp-form-page .form-control,
body.erp-form-route .form-control {
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    height: 42px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
    transition: all 0.2s ease !important;
}

.product-create-redesign .form-control:focus,
.erp-form-page .form-control:focus,
body.erp-form-route .form-control:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
    outline: none !important;
}

.product-create-redesign textarea.form-control,
.erp-form-page textarea.form-control,
body.erp-form-route textarea.form-control {
    height: auto !important;
    min-height: 100px !important;
}

/* Select2 Inputs Styling */
.product-create-redesign .select2-container--default .select2-selection--single,
.product-create-redesign .select2-container--default .select2-selection--multiple,
body.erp-form-route .select2-container--default .select2-selection--single,
body.erp-form-route .select2-container--default .select2-selection--multiple {
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    padding: 5px 8px !important;
    background-color: #ffffff !important;
}

.product-create-redesign .select2-container--default .select2-selection--single .select2-selection__rendered,
body.erp-form-route .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
    color: #0f172a !important;
    font-size: 14px !important;
}

.product-create-redesign .select2-container--default .select2-selection--single .select2-selection__arrow,
body.erp-form-route .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

.product-create-redesign .select2-container--default.select2-container--focus .select2-selection--single,
.product-create-redesign .select2-container--default.select2-container--focus .select2-selection--multiple,
body.erp-form-route .select2-container--default.select2-container--focus .select2-selection--single,
body.erp-form-route .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
}

/* 5. Modern Flex Input Groups */
.product-create-redesign .input-group,
.product-create-redesign .file-input,
body.erp-form-route .input-group,
body.erp-form-route .file-input {
    display: flex !important;
    align-items: stretch !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 3px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.product-create-redesign .input-group .form-control,
.product-create-redesign .input-group .select2-container,
.product-create-redesign .file-input .file-caption,
.product-create-redesign .file-input .form-control,
body.erp-form-route .input-group .form-control,
body.erp-form-route .input-group .select2-container,
body.erp-form-route .file-input .file-caption,
body.erp-form-route .file-input .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 0 !important;
}

.product-create-redesign .input-group .input-group-btn,
.product-create-redesign .input-group .input-group-addon,
body.erp-form-route .input-group .input-group-btn,
body.erp-form-route .input-group .input-group-addon {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: stretch !important;
}

.product-create-redesign .input-group .input-group-btn .btn,
.product-create-redesign .input-group .input-group-addon,
body.erp-form-route .input-group .input-group-btn .btn,
body.erp-form-route .input-group .input-group-addon {
    border-radius: 10px !important;
    height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #0d9488 !important;
}

body.erp-form-route .has-error .form-control,
body.erp-form-route .form-control[aria-invalid='true'],
body.erp-form-route .select2-container[aria-invalid='true'] .select2-selection {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

body.erp-form-route .help-block,
body.erp-form-route .text-muted {
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

body.erp-form-route .has-error .help-block,
body.erp-form-route label.error {
    color: #b91c1c !important;
}

body.erp-form-route :is(.form-control, .select2-selection, .btn):disabled,
body.erp-form-route :is(.form-control, .select2-selection, .btn).disabled {
    cursor: not-allowed !important;
    opacity: 0.62 !important;
}

/* 6. Toggle Cards / Switches */
.pcr-toggle-cards-grid,
.erp-toggle-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

label.pcr-toggle-card,
.pcr-toggle-card,
.erp-toggle-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.pcr-toggle-card:hover,
.erp-toggle-card:hover {
    border-color: #0d9488 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.08) !important;
}

.pcr-toggle-card-icon,
.erp-toggle-card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #475569 !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
}

.pcr-toggle-card-title,
.erp-toggle-card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

/* 7. Dropzone / File Upload Styling */
.pcr-dropzone,
.erp-dropzone {
    border: 2px dashed #cbd5e1 !important;
    background: #f8fafc !important;
    border-radius: 14px !important;
    padding: 24px 16px !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.pcr-dropzone:hover,
.erp-dropzone:hover {
    border-color: #0d9488 !important;
    background: #f0fdf4 !important;
}

/* 8. Sticky Action Footer Bar & Buttons */
.pcr-sticky-actions,
.product-form-actions,
body.erp-form-route section.content form > .box-footer,
body.erp-form-route section.content form > .form-actions,
body.erp-form-route section.content form > .row:last-of-type:has(button[type='submit']),
body.erp-form-route section.content form > .row:last-of-type:has(input[type='submit']),
.erp-sticky-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 16px 28px !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
    border-radius: 16px 16px 0 0 !important;
    margin-top: 32px !important;
    width: 100% !important;
}

.pcr-actions-inner,
.pcr-btn-group,
.erp-actions-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.pcr-btn-primary,
body.erp-form-route .btn-primary.btn-big,
body.erp-form-route .btn-primary:not(.btn-flat):not(.btn-sm),
body.erp-form-route .tw-dw-btn-primary {
    background-color: #0d9488 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 26px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pcr-btn-primary:hover,
body.erp-form-route .btn-primary.btn-big:hover,
body.erp-form-route .btn-primary:not(.btn-flat):not(.btn-sm):hover,
body.erp-form-route .tw-dw-btn-primary:hover {
    background-color: #0f766e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.35) !important;
}

.pcr-btn-outline,
body.erp-form-route .btn-default:not(.btn-flat):not(.btn-modal),
body.erp-form-route .tw-dw-btn-neutral {
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 11px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pcr-btn-outline:hover,
body.erp-form-route .btn-default:not(.btn-flat):not(.btn-modal):hover,
body.erp-form-route .tw-dw-btn-neutral:hover {
    background-color: #f8fafc !important;
    border-color: #0d9488 !important;
    color: #0d9488 !important;
}

.pcr-btn-primary:active,
.pcr-btn-outline:active,
body.erp-form-route :is(.btn, .tw-dw-btn):active {
    transform: translateY(1px) !important;
}

.pcr-btn-primary:focus-visible,
.pcr-btn-outline:focus-visible,
body.erp-form-route :is(.btn, .tw-dw-btn, .form-control, a):focus-visible {
    outline: 3px solid rgba(13, 148, 136, 0.32) !important;
    outline-offset: 2px !important;
}

/* 9. Modal Dialog Standardization */
body.erp-form-route .modal-content,
body .view_modal .modal-content,
body .modal[id*='create'] .modal-content,
body .modal[id*='edit'] .modal-content {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

body.erp-form-route .modal-header,
body .view_modal .modal-header,
body .modal[id*='create'] .modal-header,
body .modal[id*='edit'] .modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 18px 24px !important;
}

body.erp-form-route .modal-title,
body .view_modal .modal-title,
body .modal[id*='create'] .modal-title,
body .modal[id*='edit'] .modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

body.erp-form-route .modal-body,
body .view_modal .modal-body,
body .modal[id*='create'] .modal-body,
body .modal[id*='edit'] .modal-body {
    padding: 24px !important;
    background-color: #ffffff !important;
}

body.erp-form-route .modal-footer,
body .view_modal .modal-footer,
body .modal[id*='create'] .modal-footer,
body .modal[id*='edit'] .modal-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 16px 24px !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* AJAX and static create/edit form modals use the same control language. */
body .view_modal .form-group,
body .modal[id*='create'] .form-group,
body .modal[id*='edit'] .form-group,
body .modal.in:has(form) .form-group {
    margin-bottom: 20px !important;
    text-align: start !important;
}

body .view_modal .form-group > label,
body .modal[id*='create'] .form-group > label,
body .modal[id*='edit'] .form-group > label,
body .modal.in:has(form) .form-group > label {
    display: inline-block !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    text-align: start !important;
}

body .view_modal .form-control,
body .modal[id*='create'] .form-control,
body .modal[id*='edit'] .form-control,
body .modal.in:has(form) .form-control {
    height: 42px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body .view_modal textarea.form-control,
body .modal[id*='create'] textarea.form-control,
body .modal[id*='edit'] textarea.form-control,
body .modal.in:has(form) textarea.form-control {
    height: auto !important;
    min-height: 100px !important;
}

body .view_modal .form-control:focus,
body .modal[id*='create'] .form-control:focus,
body .modal[id*='edit'] .form-control:focus,
body .modal.in:has(form) .form-control:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
    outline: 0 !important;
}

body .view_modal .select2-container--default .select2-selection--single,
body .view_modal .select2-container--default .select2-selection--multiple,
body .modal[id*='create'] .select2-container--default .select2-selection--single,
body .modal[id*='create'] .select2-container--default .select2-selection--multiple,
body .modal[id*='edit'] .select2-container--default .select2-selection--single,
body .modal[id*='edit'] .select2-container--default .select2-selection--multiple,
body .modal.in:has(form) .select2-container--default .select2-selection--single,
body .modal.in:has(form) .select2-container--default .select2-selection--multiple {
    min-height: 42px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 5px 8px !important;
}

body .view_modal .input-group,
body .modal[id*='create'] .input-group,
body .modal[id*='edit'] .input-group,
body .modal.in:has(form) .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 3px !important;
}

body .view_modal .input-group .form-control,
body .view_modal .input-group .select2-container,
body .modal[id*='create'] .input-group .form-control,
body .modal[id*='create'] .input-group .select2-container,
body .modal[id*='edit'] .input-group .form-control,
body .modal[id*='edit'] .input-group .select2-container,
body .modal.in:has(form) .input-group .form-control,
body .modal.in:has(form) .input-group .select2-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 0 !important;
}

body .view_modal .input-group-addon,
body .view_modal .input-group-btn,
body .modal[id*='create'] :is(.input-group-addon, .input-group-btn),
body .modal[id*='edit'] :is(.input-group-addon, .input-group-btn),
body .modal.in:has(form) :is(.input-group-addon, .input-group-btn) {
    flex: 0 0 auto !important;
}

body .view_modal :is(.has-error .form-control, .form-control[aria-invalid='true']),
body .modal[id*='create'] :is(.has-error .form-control, .form-control[aria-invalid='true']),
body .modal[id*='edit'] :is(.has-error .form-control, .form-control[aria-invalid='true']),
body .modal.in:has(form) :is(.has-error .form-control, .form-control[aria-invalid='true']) {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

body .view_modal :is(.tw-dw-btn-primary, .btn-primary:not(.btn-sm)),
body .modal[id*='create'] :is(.tw-dw-btn-primary, .btn-primary:not(.btn-sm)),
body .modal[id*='edit'] :is(.tw-dw-btn-primary, .btn-primary:not(.btn-sm)),
body .modal.in:has(form) :is(.tw-dw-btn-primary, .btn-primary:not(.btn-sm)) {
    min-height: 42px !important;
    color: #ffffff !important;
    background: #0d9488 !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25) !important;
}

body .view_modal :is(.tw-dw-btn-neutral, .btn-default),
body .modal[id*='create'] :is(.tw-dw-btn-neutral, .btn-default),
body .modal[id*='edit'] :is(.tw-dw-btn-neutral, .btn-default),
body .modal.in:has(form) :is(.tw-dw-btn-neutral, .btn-default) {
    min-height: 42px !important;
    color: #334155 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

body .view_modal :is(.btn, .tw-dw-btn, .form-control):focus-visible,
body .modal[id*='create'] :is(.btn, .tw-dw-btn, .form-control):focus-visible,
body .modal[id*='edit'] :is(.btn, .tw-dw-btn, .form-control):focus-visible,
body .modal.in:has(form) :is(.btn, .tw-dw-btn, .form-control):focus-visible {
    outline: 3px solid rgba(13, 148, 136, 0.32) !important;
    outline-offset: 2px !important;
}

body.erp-form-route .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
}

body.erp-form-route :is(img, video, iframe) {
    max-width: 100%;
}

html[dir='rtl'] body.erp-form-route .pcr-breadcrumb i {
    transform: scaleX(-1);
}

@media (min-width: 1200px) {
    body.erp-form-route section.content {
        padding-bottom: 120px !important;
    }
}

@media (max-width: 991px) {
    body.erp-form-route section.content-header {
        padding: 16px 16px 0 !important;
    }

    body.erp-form-route section.content {
        padding: 16px 16px 160px !important;
    }
}

@media (max-width: 767px) {
    body.erp-form-route section.content-header {
        padding: 12px 10px 0 !important;
    }

    body.erp-form-route section.content {
        padding: 12px 10px 220px !important;
    }

    body.erp-form-route section.content-header h1,
    body.erp-form-route .pcr-title,
    body.erp-form-route .erp-page-title {
        font-size: 22px !important;
    }

    body.erp-form-route :is(.pcr-card, .erp-form-card, .box, .box-solid, .box-primary, .box-default) {
        padding: 18px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 18px !important;
    }

    body.erp-form-route :is(.pcr-card-header, .product-form-card-head, .box-header, .erp-card-header) {
        margin-bottom: 18px !important;
        padding-bottom: 12px !important;
    }

    body.erp-form-route section.content form > .box-footer,
    body.erp-form-route section.content form > .form-actions,
    body.erp-form-route section.content form > .row:last-of-type:has(button[type='submit']),
    body.erp-form-route section.content form > .row:last-of-type:has(input[type='submit']),
    body.erp-form-route .pcr-sticky-actions {
        padding: 10px 12px !important;
        border-radius: 14px 14px 0 0 !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    body.erp-form-route section.content form > .row:last-of-type:has(button[type='submit']),
    body.erp-form-route section.content form > .row:last-of-type:has(input[type='submit']),
    body.erp-form-route :is(.pcr-actions-inner, .pcr-btn-group, .erp-actions-inner) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        margin-inline: 0 !important;
    }

    body.erp-form-route section.content form > .row:last-of-type:has(button[type='submit']) :is(.btn, .tw-dw-btn),
    body.erp-form-route section.content form > .row:last-of-type:has(input[type='submit']) :is(.btn, .tw-dw-btn),
    body.erp-form-route :is(.pcr-btn-primary, .pcr-btn-outline) {
        flex: 1 1 140px !important;
        justify-content: center !important;
        white-space: normal !important;
    }

    body .view_modal .modal-dialog,
    body .modal[id*='create'] .modal-dialog,
    body .modal[id*='edit'] .modal-dialog {
        width: auto !important;
        margin: 10px !important;
    }

    body .view_modal .modal-body,
    body .modal[id*='create'] .modal-body,
    body .modal[id*='edit'] .modal-body {
        padding: 18px 16px !important;
        max-height: calc(100dvh - 150px);
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.erp-form-route *,
    body.erp-form-route *::before,
    body.erp-form-route *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}