/* ==========================================================================
   FORM UI STANDARD — global Add/Edit form design system
   --------------------------------------------------------------------------
   One layout + control standard for every form in every module.
   Loads after alurooj.css (module dialects) and unifies them:

     1. Design tokens (reuses the --ui-field-* tokens from alurooj.css)
     2. Flex form grid — rows align, fill before wrapping, no float snags
     3. Form-group rhythm (uniform vertical spacing)
     4. Labels + inline tooltips (icon never drops to its own line)
     5. Field normalization — one height / padding / border / radius / font
     6. Input groups + quick-add "+" buttons (identical everywhere)
     7. Checkbox / radio grid
     8. Global upload control (.au-upload-group, built by form-ui-standard.js)
     9. Section internal padding (inputs never touch container borders)
    10. Escape hatch

   Scope: `body.sidebar-mini` = every backoffice page. POS / lockscreen
   layouts do not get the grid rules (their body has no .sidebar-mini).
   DataTables-generated rows are explicitly restored to float layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — single source for every form control dimension
   -------------------------------------------------------------------------- */
:root {
    --au-field-h: var(--ui-field-height, 2.625rem);      /* 42px */
    --au-field-border: var(--ui-field-border, #cdd5df);
    --au-field-radius: var(--ui-field-radius, 0.5rem);
    --au-field-text: var(--ui-field-text, #121926);
    --au-field-font: 0.875rem;
    --au-field-pad-x: 0.75rem;
    --au-field-pad-y: 0.55rem;
    --au-label-color: #374151;
    --au-muted: #697586;
    --au-group-gap: 1.125rem;   /* vertical rhythm between form-groups */
}

/* --------------------------------------------------------------------------
   2. Form grid — flex rows inside form widgets / boxes / modals.
      Floated columns snag on unequal heights and leave holes; flex rows
      top-align every column, fill each row before wrapping, and the last
      column absorbs leftover space so rows never end in dead whitespace.
   -------------------------------------------------------------------------- */
body.sidebar-mini form .module-shared-widget .row:not([class*="tw-flex"]),
body.sidebar-mini .module-shared-widget form .row:not([class*="tw-flex"]),
body.sidebar-mini form .box .row:not([class*="tw-flex"]),
body.sidebar-mini .box form .row:not([class*="tw-flex"]),
body.sidebar-mini .modal-dialog form .row:not([class*="tw-flex"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Bootstrap's .row::before/::after clearfix becomes a phantom flex item —
   remove it inside flex rows. */
body.sidebar-mini form .module-shared-widget .row:not([class*="tw-flex"])::before,
body.sidebar-mini form .module-shared-widget .row:not([class*="tw-flex"])::after,
body.sidebar-mini .module-shared-widget form .row:not([class*="tw-flex"])::before,
body.sidebar-mini .module-shared-widget form .row:not([class*="tw-flex"])::after,
body.sidebar-mini form .box .row:not([class*="tw-flex"])::before,
body.sidebar-mini form .box .row:not([class*="tw-flex"])::after,
body.sidebar-mini .box form .row:not([class*="tw-flex"])::before,
body.sidebar-mini .box form .row:not([class*="tw-flex"])::after,
body.sidebar-mini .modal-dialog form .row:not([class*="tw-flex"])::before,
body.sidebar-mini .modal-dialog form .row:not([class*="tw-flex"])::after {
    content: none;
    display: none;
}

/* Columns keep their Bootstrap width; never shrink — wrap instead
   (fills each row before wrapping). */
body.sidebar-mini form .module-shared-widget .row:not([class*="tw-flex"]) > [class*="col-"],
body.sidebar-mini .module-shared-widget form .row:not([class*="tw-flex"]) > [class*="col-"],
body.sidebar-mini form .box .row:not([class*="tw-flex"]) > [class*="col-"],
body.sidebar-mini .box form .row:not([class*="tw-flex"]) > [class*="col-"],
body.sidebar-mini .modal-dialog form .row:not([class*="tw-flex"]) > [class*="col-"] {
    flex: 0 0 auto;
    float: none;
}

/* Last column absorbs leftover width — no dead whitespace at row end. */
body.sidebar-mini form .module-shared-widget .row:not([class*="tw-flex"]) > [class*="col-"]:last-child,
body.sidebar-mini .module-shared-widget form .row:not([class*="tw-flex"]) > [class*="col-"]:last-child,
body.sidebar-mini form .box .row:not([class*="tw-flex"]) > [class*="col-"]:last-child,
body.sidebar-mini .box form .row:not([class*="tw-flex"]) > [class*="col-"]:last-child,
body.sidebar-mini .modal-dialog form .row:not([class*="tw-flex"]) > [class*="col-"]:last-child {
    flex-grow: 1;
    max-width: 100%;
}

/* Explicit <div class="clearfix"> markers keep their meaning: force the
   next column onto a new line. */
body.sidebar-mini form .module-shared-widget .row:not([class*="tw-flex"]) > .clearfix,
body.sidebar-mini .module-shared-widget form .row:not([class*="tw-flex"]) > .clearfix,
body.sidebar-mini form .box .row:not([class*="tw-flex"]) > .clearfix,
body.sidebar-mini .box form .row:not([class*="tw-flex"]) > .clearfix,
body.sidebar-mini .modal-dialog form .row:not([class*="tw-flex"]) > .clearfix {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Below a column's breakpoint Bootstrap gives it no width (block = full
   width under floats). Flex items would shrink-to-fit instead, so pin
   them to full width until their breakpoint kicks in. */
@media (max-width: 767.98px) {
    body.sidebar-mini form .module-shared-widget .row:not([class*="tw-flex"]) > [class*="col-sm-"]:not([class*="col-xs-"]),
    body.sidebar-mini .module-shared-widget form .row:not([class*="tw-flex"]) > [class*="col-sm-"]:not([class*="col-xs-"]),
    body.sidebar-mini form .box .row:not([class*="tw-flex"]) > [class*="col-sm-"]:not([class*="col-xs-"]),
    body.sidebar-mini .box form .row:not([class*="tw-flex"]) > [class*="col-sm-"]:not([class*="col-xs-"]),
    body.sidebar-mini .modal-dialog form .row:not([class*="tw-flex"]) > [class*="col-sm-"]:not([class*="col-xs-"]) {
        width: 100%;
    }
}
@media (max-width: 991.98px) {
    body.sidebar-mini form .module-shared-widget .row:not([class*="tw-flex"]) > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]),
    body.sidebar-mini .module-shared-widget form .row:not([class*="tw-flex"]) > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]),
    body.sidebar-mini form .box .row:not([class*="tw-flex"]) > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]),
    body.sidebar-mini .box form .row:not([class*="tw-flex"]) > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]),
    body.sidebar-mini .modal-dialog form .row:not([class*="tw-flex"]) > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]) {
        width: 100%;
    }
}
@media (max-width: 1199.98px) {
    body.sidebar-mini form .module-shared-widget .row:not([class*="tw-flex"]) > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]),
    body.sidebar-mini .module-shared-widget form .row:not([class*="tw-flex"]) > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]),
    body.sidebar-mini form .box .row:not([class*="tw-flex"]) > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]),
    body.sidebar-mini .box form .row:not([class*="tw-flex"]) > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]),
    body.sidebar-mini .modal-dialog form .row:not([class*="tw-flex"]) > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]) {
        width: 100%;
    }
}

/* DataTables generates its own .row scaffolding — keep it on the original
   float layout regardless of the rules above. */
body.sidebar-mini .dataTables_wrapper .row {
    display: block;
}
body.sidebar-mini .dataTables_wrapper .row::before,
body.sidebar-mini .dataTables_wrapper .row::after {
    content: " ";
    display: table;
}
body.sidebar-mini .dataTables_wrapper .row::after {
    clear: both;
}
body.sidebar-mini .dataTables_wrapper .row > [class*="col-"] {
    float: left;
}

/* --------------------------------------------------------------------------
   3. Form-group rhythm — identical vertical spacing everywhere
   -------------------------------------------------------------------------- */
body.sidebar-mini form .form-group {
    margin-bottom: var(--au-group-gap);
}

body.sidebar-mini form .form-group .help-block {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: var(--au-muted);
}

/* --------------------------------------------------------------------------
   4. Labels + inline tooltips.
      alurooj.css makes .form-group > label display:block, which pushes the
      @show_tooltip icon (rendered as a sibling <i class="hover-q">) onto its
      own line. inline-flex keeps the label inline-level so the icon sits
      right beside it, while single-line ellipsis keeps rows aligned.
   -------------------------------------------------------------------------- */
body.sidebar-mini form .form-group > label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--au-label-color);
    vertical-align: middle;
}

/* Labels that wrap a checkbox/radio may run long — let them wrap. */
body.sidebar-mini form .form-group > label:has(input) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

body.sidebar-mini form .form-group .hover-q {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
    margin-inline-start: 0.25rem;
    line-height: 1;
    cursor: help;
}

/* --------------------------------------------------------------------------
   5. Field normalization — one height, padding, border, radius and font for
      every direct-child control (input-group internals keep border:0; the
      group shell owns the border, see section 6).
   -------------------------------------------------------------------------- */
body.sidebar-mini form .form-group > .form-control,
body.sidebar-mini form .form-group > .select2-container .select2-selection--single,
body.sidebar-mini form .form-group > .select2-container .select2-selection--multiple {
    min-height: var(--au-field-h) !important;
    border: 1px solid var(--au-field-border) !important;
    border-radius: var(--au-field-radius) !important;
    background-color: #fff;
    color: var(--au-field-text) !important;
    font-size: var(--au-field-font) !important;
    box-shadow: none !important;
    width: 100%;
}

body.sidebar-mini form .form-group > input.form-control:not([type="file"]),
body.sidebar-mini form .form-group > select.form-control {
    height: var(--au-field-h);
    padding: var(--au-field-pad-y) var(--au-field-pad-x);
}

/* Textareas share the border/radius/font standard but keep their own
   height so multi-line content stays comfortable. */
body.sidebar-mini form .form-group > textarea.form-control {
    height: auto;
    min-height: 5rem !important;
    padding: var(--au-field-pad-y) var(--au-field-pad-x);
}

body.sidebar-mini form .form-group > .form-control:focus,
body.sidebar-mini form .form-group > .select2-container--open .select2-selection--single,
body.sidebar-mini form .form-group > .select2-container--open .select2-selection--multiple {
    border-color: var(--brand-500, #2f80ed) !important;
    box-shadow: 0 0 0 3px var(--ui-focus-ring, rgba(47, 128, 237, 0.15)) !important;
    outline: none;
}

body.sidebar-mini form .form-group > .select2-container {
    width: 100% !important;
}

/* --------------------------------------------------------------------------
   6. Input groups + quick-add "+" buttons.
      The shell owns the border/radius; children are flat segments. Every
      quick-add button is the same square: field-height, centered icon,
      white background, hairline separator.
   -------------------------------------------------------------------------- */
body.sidebar-mini form .form-group .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid var(--au-field-border);
    border-radius: var(--au-field-radius);
}

body.sidebar-mini form .form-group .input-group > .form-control,
body.sidebar-mini form .form-group .input-group > .select2-container {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    min-height: calc(var(--au-field-h) - 2px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: var(--au-field-font) !important;
}

body.sidebar-mini form .form-group .input-group > .form-control:focus {
    box-shadow: none !important;
}

body.sidebar-mini form .form-group .input-group:focus-within {
    border-color: var(--brand-500, #2f80ed);
    box-shadow: 0 0 0 3px var(--ui-focus-ring, rgba(47, 128, 237, 0.15));
}

body.sidebar-mini form .form-group .input-group .input-group-addon {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--au-field-h) - 2px);
    padding: 0 var(--au-field-pad-x);
    background: #f8fafc;
    border: 0;
    color: var(--au-muted);
    font-size: 0.8125rem;
    border-radius: 0;
}
body.sidebar-mini form .form-group .input-group .input-group-addon:first-child {
    border-inline-end: 1px solid var(--au-field-border);
}
body.sidebar-mini form .form-group .input-group .input-group-addon:last-child {
    border-inline-start: 1px solid var(--au-field-border);
}

body.sidebar-mini form .form-group .input-group .input-group-btn {
    display: flex;
    align-items: stretch;
    width: auto;
    flex: 0 0 auto;
}

/* The quick-add button itself — identical size, position and style. */
body.sidebar-mini form .form-group .input-group .input-group-btn > .btn,
body.sidebar-mini form .form-group .input-group .input-group-btn > .btn-modal,
body.sidebar-mini form .form-group .input-group .input-group-btn > button,
body.sidebar-mini form .form-group .input-group .input-group-btn > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(var(--au-field-h) - 2px);
    min-width: calc(var(--au-field-h) - 2px);
    height: auto !important;
    min-height: calc(var(--au-field-h) - 2px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-inline-start: 1px solid var(--au-field-border) !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

body.sidebar-mini form .form-group .input-group .input-group-btn > .btn i.fa,
body.sidebar-mini form .form-group .input-group .input-group-btn > .btn-modal i.fa,
body.sidebar-mini form .form-group .input-group .input-group-btn > button i.fa,
body.sidebar-mini form .form-group .input-group .input-group-btn > a i.fa {
    font-size: 1rem;
    line-height: 1;
}

body.sidebar-mini form .form-group .input-group .input-group-btn > .btn:hover:not([disabled]),
body.sidebar-mini form .form-group .input-group .input-group-btn > button:hover:not([disabled]) {
    background: #f8fafc !important;
}

body.sidebar-mini form .form-group .input-group .input-group-btn > .btn[disabled],
body.sidebar-mini form .form-group .input-group .input-group-btn > button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   7. Checkboxes / radios — aligned to the same grid as other fields.
   -------------------------------------------------------------------------- */
body.sidebar-mini form .form-group label input[type="checkbox"],
body.sidebar-mini form .form-group label input[type="radio"] {
    margin: 0;
    flex: 0 0 auto;
}

body.sidebar-mini form .checkbox label,
body.sidebar-mini form .radio label,
body.sidebar-mini form label.checkbox-inline,
body.sidebar-mini form label.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.25rem;
    padding-left: 0;
    font-size: var(--au-field-font);
    color: var(--au-field-text);
}

/* Raw (non-iCheck) checkboxes: Bootstrap absolutely positions the input
   into the label's 20px padding; with flex labels + gap that overlaps the
   text, so let the input flow as a normal flex item instead. iCheck
   replaces its inputs with spans, so it is unaffected. */
body.sidebar-mini form .checkbox label input[type="checkbox"],
body.sidebar-mini form .radio label input[type="radio"],
body.sidebar-mini form label.checkbox-inline input[type="checkbox"],
body.sidebar-mini form label.radio-inline input[type="radio"] {
    position: static;
    margin: 0;
    flex: 0 0 auto;
}

/* iCheck replaces inputs with styled spans — keep them from stretching. */
body.sidebar-mini form .form-group [class*="icheckbox_"],
body.sidebar-mini form .form-group [class*="iradio_"] {
    flex: 0 0 auto;
    vertical-align: middle;
}

/* Checkbox-only columns vertically center against their flex row instead
   of hanging at the top beside taller labeled fields; the legacy <br>
   spacer hack is dropped there (float layouts outside flex rows keep it,
   since centering is a no-op when the column height equals its content). */
body.sidebar-mini form .row:not([class*="tw-flex"]):not(.au-row-legacy) > [class*="col-"]:is(:has(> .form-group > .checkbox), :has(> .form-group > label input[type="checkbox"])):not(:has(.form-control)):not(:has(select)) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.sidebar-mini form .row:not([class*="tw-flex"]):not(.au-row-legacy) > [class*="col-"]:is(:has(> .form-group > .checkbox), :has(> .form-group > label input[type="checkbox"])):not(:has(.form-control)):not(:has(select)) .form-group br,
body.sidebar-mini form .row:not([class*="tw-flex"]):not(.au-row-legacy) > [class*="col-"]:is(:has(> .form-group > .checkbox), :has(> .form-group > label input[type="checkbox"])):not(:has(.form-control)):not(:has(select)) .checkbox > br {
    display: none;
}

/* Opt-in utility: center a column's content on both axes of its row. */
body.sidebar-mini form .row > .au-col-center {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
body.sidebar-mini form .row > .au-col-center > .form-group {
    margin-bottom: 0;
}
body.sidebar-mini form .row > .au-col-center .form-group br {
    display: none;
}
body.sidebar-mini form .row > .au-col-center .checkbox {
    margin: 0;
}

/* --------------------------------------------------------------------------
   8. Global upload control. form-ui-standard.js wraps every visible file
      input in .au-upload-group: full-width, "choose file" segment on the
      left, filename beside it, remove button on the right.
   -------------------------------------------------------------------------- */
.au-upload-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid var(--au-field-border);
    border-radius: var(--au-field-radius);
    overflow: hidden;
}

.au-upload-group input[type="file"] {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: calc(var(--au-field-h) - 2px);
    min-height: calc(var(--au-field-h) - 2px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.8125rem;
    color: #364152;
    box-shadow: none;
}

.au-upload-group input[type="file"]::file-selector-button,
.au-upload-group input[type="file"]::-webkit-file-upload-button {
    height: calc(var(--au-field-h) - 2px);
    margin: 0 0.75rem 0 0;
    padding: 0 0.9rem;
    border: 0;
    border-right: 1px solid var(--au-field-border);
    border-radius: 0;
    background: #fff;
    color: #364152;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
}

.au-upload-group input[type="file"]:hover::file-selector-button {
    background: #f8fafc;
}

/* Hidden until a file is actually chosen (form-ui-standard.js toggles
   .au-upload-group--has-file on change) — an always-visible remove icon
   next to an empty "No file chosen" input has nothing to remove. */
.au-upload-clear {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: calc(var(--au-field-h) - 2px);
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-inline-start: 1px solid var(--au-field-border);
    border-radius: 0 !important;
    background: #fff;
    color: #9ca3af;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.au-upload-group--has-file .au-upload-clear {
    display: inline-flex;
}

.au-upload-clear:hover {
    background: #fff5f5;
    color: #dc2626;
}

/* Legacy wrapper divs become transparent containers; the group carries
   the visual treatment now. */
.product-image-upload {
    width: 100%;
}

/* --------------------------------------------------------------------------
   9. Section internal padding — form content never touches the container.
      The widget body slot has no horizontal padding below the sm breakpoint.
   -------------------------------------------------------------------------- */
body.sidebar-mini form .module-shared-widget-body > div > .tw-py-2,
body.sidebar-mini .module-shared-widget:has(> .module-shared-widget-shell form) .module-shared-widget-body > div > .tw-py-2 {
    padding: 1rem 1.25rem 1.25rem !important;
}

body.sidebar-mini form .box .box-body,
body.sidebar-mini .box form .box-body {
    padding: 1rem 1.25rem 1.25rem;
}

body.sidebar-mini .modal-dialog form .modal-body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Bootstrap .table width parity — plain tables (not DataTables-managed,
   which get an inline width) lost their width:100% when the legacy
   bootstrap layer was consolidated, so they shrink-wrap their content
   and headers squeeze together. */
body.sidebar-mini .module-shared-widget table.table,
body.sidebar-mini .box table.table,
body.sidebar-mini .modal-dialog table.table {
    width: 100%;
    max-width: 100%;
}

/* Trailing centered action row (Preview / Save at the end of a form)
   keeps standard whitespace below the button. */
body.sidebar-mini form .module-shared-widget-body .row:last-child > [class*="col-"].text-center:last-child,
body.sidebar-mini form .box .box-body .row:last-child > [class*="col-"].text-center:last-child {
    padding-bottom: 1rem;
}

/* Buttons standing directly in a column (not inside a form-group or
   input-group) keep standard clearance from the section edges. */
body.sidebar-mini form .module-shared-widget-body [class*="col-"] > .btn,
body.sidebar-mini form .module-shared-widget-body [class*="col-"] > .tw-dw-btn,
body.sidebar-mini form .module-shared-widget-body [class*="col-"] > button,
body.sidebar-mini form .box .box-body [class*="col-"] > .btn,
body.sidebar-mini form .box .box-body [class*="col-"] > .tw-dw-btn,
body.sidebar-mini form .box .box-body [class*="col-"] > button {
    margin-block-end: 0.75rem;
    margin-inline-end: 0.75rem;
}

/* --------------------------------------------------------------------------
   10. Escape hatch — add .au-row-legacy to any .row that must keep the
       original float layout.
   -------------------------------------------------------------------------- */
body.sidebar-mini form .row.au-row-legacy,
body.sidebar-mini .modal-dialog form .row.au-row-legacy {
    display: block;
}
body.sidebar-mini form .row.au-row-legacy::before,
body.sidebar-mini form .row.au-row-legacy::after {
    content: " ";
    display: table;
}
body.sidebar-mini form .row.au-row-legacy::after {
    clear: both;
}
body.sidebar-mini form .row.au-row-legacy > [class*="col-"] {
    float: left;
}