/* =========================================================================
   Shared application styles - loaded for every locale.
   =========================================================================
   Direction-specific rules belong in rtl.css, which is loaded on top of this
   file only when the active locale is right-to-left. Anything written here
   must render correctly in both directions, so prefer the logical properties
   (margin-inline-start, padding-inline-end, text-align: start) over the
   physical left/right ones.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Bootstrap 4 Reboot pins the page to physical left alignment
   -------------------------------------------------------------------------
   Reboot sets `body { text-align: left }` (and the same on `caption`). That
   is an inherited property, so every heading, paragraph, label and table cell
   in the panel picks it up and stays left-aligned no matter what `dir` says -
   `direction: rtl` reorders the text but alignment is a separate property.

   `start` resolves against each element's own direction, so this is correct
   in both languages and needs no RTL counterpart. Bootstrap 5 made the same
   change for the same reason.
   ------------------------------------------------------------------------- */

body,
caption {
    text-align: start;
}

.logo-container {
    width: 100px;
}

.logo-container > img {
    width: 100%;
}

.main-container {
    margin-top: 65px;
}

.form-container {
    max-width: 600px;
    margin: 10px auto;
}

.form-container h1 {
    font-weight: 300;
    font-size: 2.5rem;
}

.dropzone {
    border: 1px dashed #ced4da;
    border-radius: 5px;
    background: white;
}

#imageUpload {
    margin-bottom: 20px;
    min-height: 80px;
}

div.has-error > input {
    border: 1px solid #dc3545;
}

div.has-error > .form-text {
    color: #dc3545;
}

#successModal .fa-thumbs-up {
    font-size: 7.5rem;
    color: #2ebf2e;
}

#successModal .fa-thumbs-down {
    font-size: 7.5rem;
    color: #e13535;
}

#success-text {
    margin-top: 20px;
    font-size: 1.2rem;
}

/* The DataTables search box sits next to its label; the gap goes on whichever
   side the text starts from. */
input.form-control.form-control-sm {
    margin-inline-start: 8px;
}

/* -------------------------------------------------------------------------
   Bidi isolation
   -------------------------------------------------------------------------
   Latin-script content embedded in Arabic text - amounts, phone numbers,
   barcodes, SKUs, invoice references, emails, URLs - gets reordered by the
   bidi algorithm when it is left to inherit the paragraph direction. A
   trailing "#" or "-" ends up on the wrong end, and "SKU-1234" reads as
   "1234-SKU". Isolating the run keeps it intact without forcing the whole
   line to LTR.
   ------------------------------------------------------------------------- */

.ltr-value,
.ltr-number {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* Same, for inputs the user types Latin data into. `plaintext` keeps the
   caret and alignment on the reading side while the stored value stays LTR. */
input.ltr-input,
textarea.ltr-input {
    direction: ltr;
    text-align: start;
}

/* Table cells holding numbers stay LTR and end-aligned in both directions. */
.numeric-cell {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: end;
}

/* A label/value row. Reads in the page direction; the value is isolated so a
   code or id is not reordered against the label. */
.rtl-text {
    display: flex;
    gap: .35rem;
    align-items: baseline;
}

/* -------------------------------------------------------------------------
   Logical utility aliases
   -------------------------------------------------------------------------
   Bootstrap 4 only ships physical -left/-right utilities, which rtl.css has
   to mirror one by one. These aliases follow the writing direction on their
   own, so markup using them needs no RTL override. Prefer them in new views.
   Names match Bootstrap 5 so the eventual upgrade is a no-op.
   ------------------------------------------------------------------------- */

/* `float: inline-start` is only in browsers from late 2023 on, so these two
   resolve the side explicitly rather than relying on it. */
.float-start { float: left !important; }
.float-end { float: right !important; }
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end { float: left !important; }

.text-start { text-align: start !important; }
.text-end { text-align: end !important; }

.border-start { border-inline-start: 1px solid #e9e8ef !important; }
.border-end { border-inline-end: 1px solid #e9e8ef !important; }
.border-start-0 { border-inline-start: 0 !important; }
.border-end-0 { border-inline-end: 0 !important; }

.ms-0 { margin-inline-start: 0 !important; }
.ms-1 { margin-inline-start: .25rem !important; }
.ms-2 { margin-inline-start: .5rem !important; }
.ms-3 { margin-inline-start: 1rem !important; }
.ms-4 { margin-inline-start: 1.5rem !important; }
.ms-5 { margin-inline-start: 3rem !important; }
.ms-auto { margin-inline-start: auto !important; }

.me-0 { margin-inline-end: 0 !important; }
.me-1 { margin-inline-end: .25rem !important; }
.me-2 { margin-inline-end: .5rem !important; }
.me-3 { margin-inline-end: 1rem !important; }
.me-4 { margin-inline-end: 1.5rem !important; }
.me-5 { margin-inline-end: 3rem !important; }
.me-auto { margin-inline-end: auto !important; }

.ps-0 { padding-inline-start: 0 !important; }
.ps-1 { padding-inline-start: .25rem !important; }
.ps-2 { padding-inline-start: .5rem !important; }
.ps-3 { padding-inline-start: 1rem !important; }
.ps-4 { padding-inline-start: 1.5rem !important; }
.ps-5 { padding-inline-start: 3rem !important; }

.pe-0 { padding-inline-end: 0 !important; }
.pe-1 { padding-inline-end: .25rem !important; }
.pe-2 { padding-inline-end: .5rem !important; }
.pe-3 { padding-inline-end: 1rem !important; }
.pe-4 { padding-inline-end: 1.5rem !important; }
.pe-5 { padding-inline-end: 3rem !important; }