:root {
    --form-accent: #7c5cc4;
    --form-accent-hover: #6244a6;
    --form-accent-soft: rgba(124, 92, 196, 0.12);
    --form-accent-ring: rgba(124, 92, 196, 0.18);
    --form-border: #e4e6fc;
    --form-border-hover: #cfc6f3;
    --form-bg: #fbfbfe;
    --form-label: #4a4568;
    --form-muted: #7a7490;
    --form-radius: 10px;
    --form-control-height: 44px;
}

/* -------------------------------------------------
   Global input polish (safe, light)
   ------------------------------------------------- */
body:not(.pos-page) .form-control,
body:not(.pos-page) .custom-select {
    border-radius: var(--form-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

body:not(.pos-page) .form-control:hover {
    border-color: var(--form-border-hover);
}

body:not(.pos-page) .form-control:focus {
    border-color: var(--form-accent) !important;
    box-shadow: 0 0 0 3px var(--form-accent-ring) !important;
    background-color: #fff;
}

body:not(.pos-page) textarea.form-control {
    min-height: 96px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

body:not(.pos-page) input[type="file"].form-control {
    height: auto;
    padding: 8px 12px;
    line-height: 1.4;
}

body:not(.pos-page) input[type="checkbox"],
body:not(.pos-page) input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--form-accent);
    vertical-align: middle;
    cursor: pointer;
}

/* -------------------------------------------------
   Form pages
   ------------------------------------------------- */
section.forms {
    padding-bottom: 24px;
}

section.forms > .container-fluid {
    padding-top: 4px;
}

section.forms .card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(28, 39, 61, 0.06);
    overflow: visible;
}

section.forms .card-header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 16px 24px 16px 28px;
    background: linear-gradient(90deg, rgba(124, 92, 196, 0.08), rgba(124, 92, 196, 0.02) 42%, #fff);
    border-bottom: 1px solid #efeaf8;
    border-radius: 16px 16px 0 0;
}

section.forms .card-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--form-accent);
}

section.forms .card-header h4 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2d2250;
    letter-spacing: 0.01em;
}

section.forms .card-body {
    padding: 22px 24px 28px;
}

section.forms .italic {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.35rem;
    padding: 8px 12px;
    background: var(--form-accent-soft);
    color: #5c4e82;
    border-radius: 8px;
    font-style: normal !important;
}

section.forms .italic small {
    font-size: 0.82rem;
    font-weight: 500;
}

/* Labels */
section.forms label,
.modal-content .form-group > label,
.modal-body > .form-group > label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--form-label);
    line-height: 1.35;
}

section.forms .form-group:focus-within > label,
.modal-content .form-group:focus-within > label {
    color: var(--form-accent);
}

section.forms .asterisk,
.modal-content .asterisk {
    color: #e74c3c;
    font-weight: 700;
}

section.forms .form-group,
.modal-body .form-group {
    margin-bottom: 1.15rem;
}

section.forms .form-group.d-inline-block {
    margin-right: 12px;
}

/* Controls inside forms and modals */
section.forms .form-control,
.modal-content .form-control,
#filter-card .form-control {
    height: var(--form-control-height);
    padding: 8px 14px;
    font-size: 14px;
    background-color: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
}

section.forms textarea.form-control,
.modal-content textarea.form-control {
    height: auto;
}

section.forms select.form-control:not(.selectpicker) {
    padding-right: 28px;
}

/* Bootstrap-select */
section.forms .bootstrap-select.form-control,
.modal-content .bootstrap-select.form-control,
#filter-card .bootstrap-select.form-control,
.form-group.top-fields .bootstrap-select.form-control {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

section.forms .bootstrap-select > .dropdown-toggle,
.modal-content .bootstrap-select > .dropdown-toggle,
#filter-card .bootstrap-select > .dropdown-toggle,
.form-group.top-fields .bootstrap-select > .dropdown-toggle {
    display: flex !important;
    align-items: center;
    height: var(--form-control-height);
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #3b3554 !important;
    background-color: var(--form-bg) !important;
    border: 1px solid var(--form-border) !important;
    border-radius: var(--form-radius) !important;
    box-shadow: none !important;
}

section.forms .bootstrap-select > .dropdown-toggle:hover,
.modal-content .bootstrap-select > .dropdown-toggle:hover,
#filter-card .bootstrap-select > .dropdown-toggle:hover {
    border-color: var(--form-border-hover) !important;
}

section.forms .bootstrap-select > .dropdown-toggle:focus,
.modal-content .bootstrap-select > .dropdown-toggle:focus,
#filter-card .bootstrap-select > .dropdown-toggle:focus,
section.forms .bootstrap-select.show > .dropdown-toggle,
.modal-content .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--form-accent) !important;
    box-shadow: 0 0 0 3px var(--form-accent-ring) !important;
}

.bootstrap-select .dropdown-menu {
    margin-top: 6px !important;
    padding: 6px;
    border: 1px solid #efeaf8;
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(28, 39, 61, 0.12);
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu .dropdown-item.active {
    background: var(--form-accent-soft) !important;
    color: var(--form-accent) !important;
}

.bootstrap-select .bs-searchbox {
    padding: 6px 8px 10px;
}

.bootstrap-select .bs-searchbox .form-control {
    height: 36px;
    border-radius: 8px;
}

/* Select + add-button groups */
section.forms .input-group.pos,
.modal-content .input-group.pos {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

section.forms .pos .bootstrap-select.form-control:not([class*="col-"]),
.modal-content .pos .bootstrap-select.form-control:not([class*="col-"]) {
    width: auto !important;
    flex: 1 1 auto;
}

section.forms .input-group.pos > .bootstrap-select > .dropdown-toggle,
.modal-content .input-group.pos > .bootstrap-select > .dropdown-toggle {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

section.forms .input-group.pos > .btn,
section.forms .input-group .btn-default,
.modal-content .input-group.pos > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: var(--form-control-height);
    padding: 0 12px;
    color: var(--form-accent);
    background: #f4f1fb;
    border: 1px solid var(--form-border);
    border-radius: 0 var(--form-radius) var(--form-radius) 0;
}

section.forms .input-group.pos > .btn:hover,
section.forms .input-group .btn-default:hover {
    color: #fff;
    background: var(--form-accent);
    border-color: var(--form-accent);
}

section.forms .input-group > .form-control:not(:last-child),
.modal-content .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

section.forms .input-group > .form-control:not(:first-child),
.modal-content .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

section.forms .input-group-text,
.modal-content .input-group-text {
    height: var(--form-control-height);
    background: #f4f1fb;
    border-color: var(--form-border);
    color: #6b5a96;
    border-radius: var(--form-radius);
}

section.forms .input-group-append .btn,
section.forms .input-group-prepend .btn,
.modal-content .input-group-append .btn {
    min-height: var(--form-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: var(--form-border);
}

/* Checkbox / option rows */
section.forms h5:has(> input[type="checkbox"]),
section.forms h5:has(> input[type="checkbox"] + *),
section.forms .form-group:has(> input[type="checkbox"]:first-child) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 12px 14px;
    background: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
}

section.forms h5:has(> input[type="checkbox"]) {
    color: var(--form-label);
}

section.forms .form-group:has(> input[type="checkbox"]:first-child) label {
    margin: 0;
}

section.forms .form-group.d-inline-block:has(> input[type="checkbox"]:first-child) {
    display: inline-flex;
    margin-right: 8px;
}

section.forms .form-group.d-inline-block:has(> input[type="checkbox"]:first-child) {
    display: inline-flex;
    margin-right: 8px;
}

/* Search boxes inside transaction forms */
section.forms .search-box,
section.forms .input-group.mb-3:has(#lims_productcodeSearch),
section.forms .input-group:has(input[name="product_code_name"]) {
    border-radius: var(--form-radius);
}

section.forms .search-box .btn,
section.forms .input-group .btn-secondary {
    min-height: var(--form-control-height);
    border-radius: var(--form-radius) 0 0 var(--form-radius);
}

/* Form tables */
section.forms .table {
    margin-bottom: 0.5rem;
}

section.forms .table thead th {
    background: #f8f7fc;
    border-top: 0;
    border-bottom: 1px solid var(--form-border);
    color: #5c4e82;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    white-space: nowrap;
}

section.forms table .form-control,
section.forms table .bootstrap-select > .dropdown-toggle {
    height: 36px;
    min-height: 36px;
    padding: 4px 10px;
    font-size: 13px;
}

section.forms .order-list td {
    vertical-align: middle;
}

/* Validation */
section.forms .validation-msg,
.modal-content .validation-msg {
    display: block;
    min-height: 0;
    margin-top: 4px;
    color: #dc3545;
    font-size: 12px;
}

section.forms .form-group small strong,
.modal-content .form-group small strong {
    color: #dc3545;
    font-size: 12px;
    font-weight: 600;
}

section.forms .form-control.is-invalid,
section.forms .form-group:has(.validation-msg:not(:empty)) .form-control {
    border-color: #e74c3c;
}

/* Submit row */
section.forms form > .form-group:last-child:has(.btn),
section.forms form > .form-group:last-child:has(input[type="submit"]),
section.forms .form-group.mt-3:has(> .btn-primary),
section.forms .form-group.mt-3:has(> button[type="submit"]) {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #efeaf8;
}

section.forms .btn-primary,
.modal-content .btn-primary,
section.forms input[type="submit"].btn {
    min-height: 42px;
    padding: 8px 22px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(124, 92, 196, 0.18);
}

section.forms .btn-primary:hover,
.modal-content .btn-primary:hover,
section.forms input[type="submit"].btn:hover {
    background-color: var(--form-accent-hover);
    border-color: var(--form-accent-hover);
    box-shadow: 0 10px 22px rgba(124, 92, 196, 0.26);
}

section.forms .btn-info,
.modal-content .btn-info {
    border-radius: 10px;
    font-weight: 600;
}

/* Filter / floating labels */
body:not(.pos-page) .form-group.top-fields {
    margin-top: 14px;
    position: relative;
}

body:not(.pos-page) .form-group.top-fields > label {
    position: absolute;
    top: -8px;
    left: 12px;
    z-index: 9;
    background: #fff;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: #6b5a96;
    line-height: 1.2;
}

body:not(.pos-page) .form-group.top-fields .form-control,
body:not(.pos-page) .form-group.top-fields .bootstrap-select > .dropdown-toggle {
    height: 44px;
    font-size: 13px;
}

#filter-card {
    background: #fbfbfe;
}

/* Modals */
.modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(28, 39, 61, 0.16);
}

.modal-header {
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(124, 92, 196, 0.08), #fff);
    border-bottom: 1px solid #efeaf8;
    border-radius: 16px 16px 0 0;
}

.modal-title {
    font-weight: 700;
    color: #2d2250;
}

.modal-body {
    padding: 20px 22px 8px;
}

.modal-footer {
    padding: 12px 22px 18px;
    border-top: 1px solid #efeaf8;
}

.modal-header .close {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    opacity: 0.7;
}

.modal-header .close:hover {
    opacity: 1;
    background: var(--form-accent-soft);
}

/* Datepicker / daterange inside forms */
section.forms .daterangepicker-field,
section.forms input.date {
    background-image: none;
}

/* Keep DataTables compact */
.dataTables_wrapper .form-control,
.dataTables_filter input,
.dataTables_length .bootstrap-select > .dropdown-toggle {
    height: 34px !important;
    min-height: 34px;
    padding: 4px 10px;
}

.dataTables_length .bootstrap-select.form-control {
    border: 0 !important;
    background: transparent !important;
}

/* Dark mode */
.dark-mode section.forms .card,
.dark-mode .modal-content {
    background: #283046;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.dark-mode section.forms .card-header,
.dark-mode .modal-header {
    background: linear-gradient(90deg, rgba(124, 92, 196, 0.16), #283046);
    border-bottom-color: #404656;
}

.dark-mode section.forms .card-header h4,
.dark-mode .modal-title {
    color: #e4e6f1;
}

.dark-mode section.forms .italic {
    background: rgba(124, 92, 196, 0.16);
    color: #c5bdd9;
}

.dark-mode section.forms label,
.dark-mode .modal-content .form-group > label {
    color: #c9c4d8;
}

.dark-mode section.forms .form-control,
.dark-mode .modal-content .form-control,
.dark-mode .form-group.top-fields .bootstrap-select > .dropdown-toggle,
.dark-mode section.forms .bootstrap-select > .dropdown-toggle {
    background-color: #343d55 !important;
    border-color: #404656 !important;
    color: #d0d2d6 !important;
}

.dark-mode section.forms .form-control:focus,
.dark-mode section.forms .bootstrap-select > .dropdown-toggle:focus {
    background-color: #343d55 !important;
}

.dark-mode .form-group.top-fields > label {
    background: #283046;
    color: #c5bdd9;
}

.dark-mode section.forms .table thead th {
    background: #323b54;
    border-bottom-color: #404656;
    color: #c5bdd9;
}

.dark-mode section.forms h5:has(> input[type="checkbox"]),
.dark-mode section.forms .form-group:has(> input[type="checkbox"]:first-child) {
    background: #323b54;
    border-color: #404656;
}

.dark-mode section.forms form > .form-group:last-child:has(.btn),
.dark-mode section.forms .form-group.mt-3:has(> .btn-primary) {
    border-top-color: #404656;
}

.dark-mode section.forms .input-group.pos > .btn,
.dark-mode section.forms .input-group-text {
    background: #323b54;
    border-color: #404656;
    color: #c5bdd9;
}

/* RTL */
html[dir="rtl"] section.forms .card-header {
    padding: 16px 28px 16px 24px;
}

html[dir="rtl"] section.forms .card-header::before {
    left: auto;
    right: 0;
    border-radius: 4px 0 0 4px;
}

html[dir="rtl"] section.forms .input-group.pos > .bootstrap-select > .dropdown-toggle,
html[dir="rtl"] .modal-content .input-group.pos > .bootstrap-select > .dropdown-toggle {
    border-radius: 0 var(--form-radius) var(--form-radius) 0 !important;
}

html[dir="rtl"] section.forms .form-control,
html[dir="rtl"] .modal-content .form-control,
html[dir="rtl"] section.forms .bootstrap-select > .dropdown-toggle {
    text-align: right;
}

html[dir="rtl"] body:not(.pos-page) .form-group.top-fields > label {
    left: auto;
    right: 12px;
}

html[dir="rtl"] section.forms .input-group > .form-control:not(:last-child) {
    border-radius: 0 var(--form-radius) var(--form-radius) 0;
}

html[dir="rtl"] section.forms .input-group > .form-control:not(:first-child) {
    border-radius: var(--form-radius) 0 var(--form-radius) 0;
}

html[dir="rtl"] section.forms .input-group.pos > .btn,
html[dir="rtl"] section.forms .input-group-append .btn {
    border-radius: var(--form-radius) 0 0 var(--form-radius);
}

html[dir="rtl"] section.forms .search-box .btn,
html[dir="rtl"] section.forms .input-group .btn-secondary {
    border-radius: 0 var(--form-radius) var(--form-radius) 0;
}

html[dir="rtl"] section.forms .form-group.d-inline-block {
    margin-right: 0;
    margin-left: 12px;
}

@media (max-width: 767px) {
    section.forms .card-header,
    section.forms .card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    section.forms .card-header h4 {
        font-size: 1.05rem;
    }
}