/* ─────────────────────────────────────────────────────────────
   Directional & BiDi Utility Classes for RTL Layout Alignment
   ───────────────────────────────────────────────────────────── */

/* Force explicit LTR isolate */
.bidi-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Phone numbers and serial codes */
.bidi-phone,
.bidi-code,
td.sort-tel,
td.sort-phone,
td[class*="-tel"],
td[class*="-phone"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Numeric & currency containers: keep RTL direction for currency symbol flow (د.ل) */
.bidi-num {
    direction: rtl;
    unicode-bidi: isolate;
}

/* Isolated numeric digit tokens inside bidi-num */
.bidi-num bdi,
.bidi-num span[dir="ltr"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Ensure non-table-cell elements have inline-block for isolate boundary */
span.bidi-phone,
span.bidi-code,
div.bidi-phone,
div.bidi-code,
a.bidi-phone,
a.bidi-code {
    display: inline-block;
}

/* Auto directional text for freeform notes and multiline user input */
.bidi-auto,
.bidi-notes,
textarea.bidi-auto,
textarea.bidi-notes {
    unicode-bidi: plaintext;
    text-align: start;
}

/* Ensure text-center works across all inputs, selects, and table controls in RTL */
.form-control.text-center,
.form-select.text-center,
input.text-center,
select.text-center,
textarea.text-center,
.table td .form-control.text-center,
.table td input.text-center,
.table td select.text-center,
.table th.text-center,
.table td.text-center,
.table.text-center th,
.table.text-center td,
.table.text-center td.bidi-num,
.table.text-center td.bidi-code,
.table.text-center td.bidi-phone,
td.bidi-num.text-center,
td.bidi-code.text-center,
td.bidi-phone.text-center,
input.text-center.bidi-num,
input.text-center.bidi-code,
input.text-center.bidi-phone {
    text-align: center !important;
}

/* Hide number input spinners for clean centering */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

input[type=number] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Ensure inputs, controls, and form columns have relative positioning for floating controls */
.input,
.form-control,
.form-select,
.ts-wrapper,
.flatpickr-wrapper,
.table-responsive {
    position: relative;
}

/* Hide unattached stray close buttons on table headers */
.table-responsive > button:not(.btn):not(.showtable):not(.showtablestaff),
.table-responsive > .btn-close:first-child,
.table th > .btn-close,
.table th > button.close {
    display: none !important;
}

/* Movement Type Select Group (إيداع / مسحوبات) Pills */
.type-selectgroup .form-selectgroup-item {
    margin-left: 0.5rem;
}

/* Debit (إيداع) Pill */
.form-selectgroup.type-selectgroup .form-selectgroup-item input.type-debit-input+.form-selectgroup-label {
    border-color: #2fb344 !important;
    color: #2fb344 !important;
    transition: all 0.2s ease-in-out;
}

.form-selectgroup.type-selectgroup .form-selectgroup-item input.type-debit-input:checked+.form-selectgroup-label {
    background-color: rgba(47, 179, 68, 0.12) !important;
    border-color: #2fb344 !important;
    color: #217a2e !important;
    box-shadow: 0 0 0 0.2rem rgba(47, 179, 68, 0.25) !important;
}

.form-selectgroup.type-selectgroup .form-selectgroup-item input.type-debit-input:focus+.form-selectgroup-label,
.form-selectgroup.type-selectgroup .form-selectgroup-item input.type-debit-input:checked:focus+.form-selectgroup-label {
    border-color: #2fb344 !important;
    color: #217a2e !important;
    box-shadow: 0 0 0 0.2rem rgba(47, 179, 68, 0.3) !important;
}

/* Credit (مسحوبات) Pill */
.form-selectgroup.type-selectgroup .form-selectgroup-item input.type-credit-input+.form-selectgroup-label {
    border-color: #d63939 !important;
    color: #d63939 !important;
    transition: all 0.2s ease-in-out;
}

.form-selectgroup.type-selectgroup .form-selectgroup-item input.type-credit-input:checked+.form-selectgroup-label {
    background-color: rgba(214, 57, 57, 0.12) !important;
    border-color: #d63939 !important;
    color: #a82323 !important;
    box-shadow: 0 0 0 0.2rem rgba(214, 57, 57, 0.25) !important;
}

.form-selectgroup.type-selectgroup .form-selectgroup-item input.type-credit-input:focus+.form-selectgroup-label,
.form-selectgroup.type-selectgroup .form-selectgroup-item input.type-credit-input:checked:focus+.form-selectgroup-label {
    border-color: #d63939 !important;
    color: #a82323 !important;
    box-shadow: 0 0 0 0.2rem rgba(214, 57, 57, 0.3) !important;
}

/* ─────────────────────────────────────────────────────────────
   Auto-Generated Document Number Dynamic Update Animations
   ───────────────────────────────────────────────────────────── */
.autogen-updating {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.4) !important;
    transition: all 0.3s ease-in-out !important;
    animation: autogenPulse 0.8s infinite alternate ease-in-out !important;
}

@keyframes autogenPulse {
    from {
        box-shadow: 0 0 0 0.15rem rgba(32, 107, 196, 0.3);
        border-color: #206bc4;
    }

    to {
        box-shadow: 0 0 0 0.35rem rgba(32, 107, 196, 0.7);
        border-color: #4299e1;
    }
}

.autogen-updated {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.35) !important;
    transition: all 0.3s ease-in-out !important;
}

/* ── Override Tabler's rule that hides required asterisk when a readonly
      sibling exists — Flatpickr altInput is always readonly ── */
label.required:has(~ .flatpickr-input[readonly])::after,
.form-label.required:has(~ .flatpickr-input[readonly])::after {
    display: inline-block !important;
    content: " *" !important;
}

/* ── Required Asterisk for Table Headers ── */
.table th.required::after,
th.required::after {
    content: " *" !important;
    color: var(--tblr-danger, #d63939) !important;
}

/* ── Ensure TomSelect single select dropdowns always render the dropdown arrow icon ── */
.ts-wrapper.single .ts-control::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0.8rem !important;
    height: 0.8rem !important;
    z-index: 9 !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border: none !important;
}

html[dir="rtl"] .ts-wrapper.single .ts-control::after,
body[dir="rtl"] .ts-wrapper.single .ts-control::after,
body.rtl .ts-wrapper.single .ts-control::after {
    right: 0.85rem !important;
    left: auto !important;
}

html[dir="rtl"] .ts-wrapper.single .ts-control,
body[dir="rtl"] .ts-wrapper.single .ts-control,
body.rtl .ts-wrapper.single .ts-control {
    padding-right: 2.25rem !important;
    padding-left: 0.75rem !important;
}

html:not([dir="rtl"]) .ts-wrapper.single .ts-control::after,
body:not([dir="rtl"]) .ts-wrapper.single .ts-control::after {
    right: 0.75rem !important;
    left: auto !important;
}

html:not([dir="rtl"]) .ts-wrapper.single .ts-control,
body:not([dir="rtl"]) .ts-wrapper.single .ts-control {
    padding-right: 2rem !important;
    padding-left: 0.75rem !important;
}

/* ── TomSelect Layout Containment & Dynamic Dropdown Expansion ── */
.d-flex > div:has(.ts-wrapper),
.d-flex > .flex-grow-1 {
    min-width: 0 !important;
    max-width: 100% !important;
}

.ts-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative !important;
}

.ts-wrapper .ts-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.ts-wrapper.single .ts-control {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* Force selected item text to truncate inside closed select box; auto-scroll via JS transform on hover */
.ts-wrapper.single .ts-control > .item {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: calc(100% - 1.5rem) !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: block !important;
    transition: text-overflow 0.15s ease !important;
}

/* Collapse search input width in single select when item is already selected */
.ts-wrapper.single.has-items .ts-control > input {
    min-width: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    flex: 0 0 0 !important;
    opacity: 0 !important;
}

.ts-wrapper.single:not(.has-items) .ts-control > input,
.ts-wrapper.single.input-active .ts-control > input {
    min-width: 2rem !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    opacity: 1 !important;
}

/* Allow opened dropdown menu to expand wider than the input to show full text */
.ts-dropdown {
    width: max-content !important;
    min-width: 100% !important;
    max-width: min(650px, 90vw) !important;
    z-index: 1055 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

html[dir="rtl"] .ts-dropdown,
body[dir="rtl"] .ts-dropdown,
body.rtl .ts-dropdown {
    right: 0 !important;
    left: auto !important;
}

html:not([dir="rtl"]) .ts-dropdown,
body:not([dir="rtl"]) .ts-dropdown {
    left: 0 !important;
    right: auto !important;
}

.ts-dropdown .option {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 8px 12px !important;
}

/* ─────────────────────────────────────────────────────────────
   Global Disabled / Readonly Controls & TomSelect Caret / Asterisk Fixes
   ───────────────────────────────────────────────────────────── */

/* Hide dropdown caret arrows & pseudo-elements on disabled/readonly selects & TomSelect controls */
select:disabled,
select[readonly],
.form-select:disabled,
.form-select[readonly] {
    background-image: none !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Ensure disabled TomSelects match standard disabled/readonly form-control styling perfectly */
.ts-wrapper.disabled,
.ts-wrapper.disabled .ts-control,
.ts-wrapper.disabled.single .ts-control,
html[dir="rtl"] .ts-wrapper.disabled .ts-control,
html[dir="rtl"] .ts-wrapper.disabled.single .ts-control,
body[dir="rtl"] .ts-wrapper.disabled .ts-control,
body[dir="rtl"] .ts-wrapper.disabled.single .ts-control,
body.rtl .ts-wrapper.disabled .ts-control,
body.rtl .ts-wrapper.disabled.single .ts-control,
html:not([dir="rtl"]) .ts-wrapper.disabled .ts-control,
html:not([dir="rtl"]) .ts-wrapper.disabled.single .ts-control {
    background-color: #f4f6fa !important;
    background-image: none !important;
    border: 1px solid #dce1e7 !important;
    border-radius: var(--tblr-border-radius, 4px) !important;
    box-shadow: none !important;
    padding: 0.5625rem 0.75rem !important;
    min-height: 38px !important;
    height: 38px !important;
    color: #1e293b !important;
    font-size: 0.875rem !important;
    line-height: 1.4285714286 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.ts-wrapper.disabled .ts-control > .item {
    color: #1e293b !important;
    opacity: 1 !important;
    font-size: 0.875rem !important;
    line-height: 1.4285714286 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ts-wrapper.disabled .ts-control input {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.ts-wrapper.disabled .ts-control::after,
.ts-wrapper.disabled::after {
    display: none !important;
    content: none !important;
}

/* Globally remove red required asterisk (*) for any disabled or readonly fields */
label.required:has(+ select:disabled)::after,
label.required:has(+ input:disabled)::after,
label.required:has(+ input[readonly])::after,
label.required:has(+ .ts-wrapper.disabled)::after,
label.required:has(+ div > select:disabled)::after,
label.required:has(+ div > input:disabled)::after,
label.required:has(+ div > input[readonly])::after,
label.required:has(+ div > .ts-wrapper.disabled)::after {
    content: "" !important;
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   Globally Suppress Clear Buttons (✕) on Disabled & Readonly Inputs
   ───────────────────────────────────────────────────────────── */

.input-clear-wrapper:has(input:disabled) .btn-input-clear,
.input-clear-wrapper:has(input.flatpickr-input) .btn-input-clear,
.input-clear-wrapper:has(input[type="date"]) .btn-input-clear,
.input-clear-wrapper:has(input[type="datetime"]) .btn-input-clear,
.input-clear-wrapper:has(input[type="datetime-local"]) .btn-input-clear,
.input-clear-wrapper:has(input[type="time"]) .btn-input-clear,
.input-clear-wrapper:has(input[type="month"]) .btn-input-clear,
.input-clear-wrapper:has(input[readonly]) .btn-input-clear,
.input-clear-wrapper:has(input[style*="pointer-events: none"]) .btn-input-clear,
.input-clear-wrapper:has(input[style*="pointer-events:none"]) .btn-input-clear,
.input-clear-wrapper:has(select:disabled) .btn-input-clear,
.input-clear-wrapper:has(textarea:disabled) .btn-input-clear,
.input-clear-wrapper:has(textarea[readonly]) .btn-input-clear,
.ts-wrapper.disabled .btn-input-clear,
input:disabled + .btn-input-clear,
input:disabled ~ .btn-input-clear,
input.flatpickr-input + .btn-input-clear,
input.flatpickr-input ~ .btn-input-clear,
input[type="date"] + .btn-input-clear,
input[type="date"] ~ .btn-input-clear,
input[type="datetime"] + .btn-input-clear,
input[type="datetime"] ~ .btn-input-clear,
input[type="datetime-local"] + .btn-input-clear,
input[type="datetime-local"] ~ .btn-input-clear,
input[type="time"] + .btn-input-clear,
input[type="time"] ~ .btn-input-clear,
input[type="month"] + .btn-input-clear,
input[type="month"] ~ .btn-input-clear,
input[readonly] + .btn-input-clear,
input[readonly] ~ .btn-input-clear,
input[style*="pointer-events: none"] + .btn-input-clear,
input[style*="pointer-events: none"] ~ .btn-input-clear,
input[style*="pointer-events:none"] + .btn-input-clear,
input[style*="pointer-events:none"] ~ .btn-input-clear,
select:disabled + .btn-input-clear,
select:disabled ~ .btn-input-clear {
    display: none !important;
}

/* Globally Suppress Red Asterisk (*) on Disabled & Readonly Input Labels */
label.required:has(+ input:disabled)::after,
label.required:has(+ input[readonly])::after,
label.required:has(+ select:disabled)::after,
label.required:has(+ textarea:disabled)::after,
.input:has(input:disabled) label::after,
.input:has(input[readonly]) label::after,
.input:has(select:disabled) label::after,
.input:has(textarea:disabled) label::after,
.form-group:has(input:disabled) label::after,
.form-group:has(input[readonly]) label::after,
div:has(input:disabled) > label::after,
div:has(input[readonly]) > label::after,
div:has(select:disabled) > label::after {
    content: none !important;
    display: none !important;
}

/* Form Validation Error Message Highlight Rules */
.error-message,
.field-error,
.invalid-feedback {
    display: block !important;
    width: 100% !important;
    color: #dc3545 !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    margin-top: 0.375rem !important;
    text-align: inherit;
}

.input.error input,
.input.error select,
.input.error textarea,
.is-invalid {
    border-color: #dc3545 !important;
}

/* ── Flatpickr Time Picker Centering & Spin Button Suppression ── */
.flatpickr-calendar {
    direction: ltr !important;
}

.flatpickr-calendar .flatpickr-time,
.flatpickr-time {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    direction: ltr !important;
    text-align: center !important;
    padding: 10px 14px !important;
    height: auto !important;
    min-height: 48px !important;
    border-top: 1px solid #e6e8eb !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.flatpickr-time .numInputWrapper {
    flex: 0 0 60px !important;
    width: 60px !important;
    max-width: 60px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    float: none !important;
    margin: 0 !important;
}

.flatpickr-time .numInputWrapper input,
.flatpickr-time input.numInput,
.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: #1e293b !important;
    height: 38px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #f8fafc !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    display: block !important;
    float: none !important;
}

.flatpickr-time input::-webkit-outer-spin-button,
.flatpickr-time input::-webkit-inner-spin-button,
.flatpickr-calendar input::-webkit-outer-spin-button,
.flatpickr-calendar input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.flatpickr-time .numInputWrapper input:hover,
.flatpickr-time input.numInput:hover {
    background-color: #ffffff !important;
    border-color: #94a3b8 !important;
}

.flatpickr-time .numInputWrapper input:focus,
.flatpickr-time input.numInput:focus {
    background-color: #ffffff !important;
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 2px rgba(32, 107, 196, 0.2) !important;
    outline: none !important;
}

.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
    display: none !important;
}

.flatpickr-time .flatpickr-time-separator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: #1e293b !important;
    width: 12px !important;
    min-width: 12px !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    user-select: none !important;
}

.flatpickr-time .flatpickr-am-pm {
    display: none !important;
}

/* Flatpickr calendar overlay — always above page content */
.flatpickr-calendar {
    z-index: 999999 !important;
}