/*
 * Bootstrap 4 -> 5 compatibility shim.
 *
 * The theme ships Bootstrap 5.2 but the views are written against Bootstrap 4,
 * whose utility classes v5 renamed or dropped. None of them were doing anything:
 * 182 `text-right`, 200 `mr-*`, 84 `ml-*`, 34 `btn-block`, 24 `float-right` and
 * 197 modal `.close` buttons across roughly 150 files were all inert, which is
 * why totals sat left-aligned, badges printed grey and modal close buttons had
 * no icon.
 *
 * Restoring the handful of rules here fixes every one of those at once. The
 * alternative was editing 150 view files by hand and re-testing all of them.
 *
 * Load AFTER bootstrap.min.css. Delete a block only once its class is genuinely
 * gone from the views - `grep -rn "text-right" ci/application` before you do.
 *
 * New markup should use the Bootstrap 5 names (text-end, me-*, ms-*, w-100,
 * btn-close, text-bg-*); this file is for the existing views, not a licence to
 * keep writing v4.
 */

/* --- text alignment ---------------------------------------------------- */
.text-right { text-align: right !important; }
.text-left  { text-align: left  !important; }

/* --- floats ------------------------------------------------------------ */
.float-right { float: right !important; }
.float-left  { float: left  !important; }

/* --- font weight ------------------------------------------------------- */
.font-weight-bold   { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light  { font-weight: 300 !important; }

/* --- margin / padding start-end (v4 l/r) ------------------------------- */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: .25rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* --- block buttons ----------------------------------------------------- */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }

/* --- compact form grid ------------------------------------------------- */
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }

/* --- badges (v5 moved the colours to .text-bg-*) ----------------------- */
.badge-primary   { background-color: #727cf5 !important; color: #fff !important; }
.badge-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge-success   { background-color: #0acf97 !important; color: #fff !important; }
.badge-danger    { background-color: #fa5c7c !important; color: #fff !important; }
.badge-warning   { background-color: #ffbc00 !important; color: #212529 !important; }
.badge-info      { background-color: #39afd1 !important; color: #fff !important; }
.badge-light     { background-color: #eef2f7 !important; color: #212529 !important; }
.badge-dark      { background-color: #313a46 !important; color: #fff !important; }

/* --- input group wrappers (v5 drops them; children are styled directly) - */
.input-group-append,
.input-group-prepend { display: flex; }
.input-group-append  { margin-left: -1px; }
.input-group-prepend { margin-right: -1px; }
.input-group-append .btn,
.input-group-prepend .btn,
.input-group-append .input-group-text,
.input-group-prepend .input-group-text { border-radius: 0; }
.input-group > .input-group-prepend:first-child .btn,
.input-group > .input-group-prepend:first-child .input-group-text {
    border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;
}
.input-group > .input-group-append:last-child .btn,
.input-group > .input-group-append:last-child .input-group-text {
    border-top-right-radius: .25rem; border-bottom-right-radius: .25rem;
}

/* --- modal close button (v5 renamed .close to .btn-close) -------------- */
.modal-header .close,
.close {
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #98a6ad;
    opacity: .8;
    cursor: pointer;
}
.close:hover { color: #313a46; opacity: 1; }
.modal-header .close { margin: -.5rem -.5rem -.5rem auto; }

/* --- wide tables ------------------------------------------------------- *
 * A grid with more columns than the screen has room for still has to be
 * usable: the row's action buttons are always the last column, so pin that
 * column to the right edge instead of leaving Delete off-screen behind a
 * sideways scroll. Opt in with .table-actions-sticky on the table.
 */
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-actions-sticky th:last-child,
.table-actions-sticky td:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .25);
    z-index: 2;
}
/* The pinned cell has to carry an opaque background of its own - the drop shadow
   above replaces the inset shadow Bootstrap 5 paints table backgrounds with - so
   the header variant has to be restated here. Restating dark for every table is
   what turned the Actions cell of a light header into a black slab with black
   text inside it. Headers with no variant keep the #fff set above. */
.table-actions-sticky thead.thead-dark th:last-child,
.table-actions-sticky thead.table-dark th:last-child  { background: #313a46; color: #fff; }
.table-actions-sticky thead.thead-light th:last-child,
.table-actions-sticky thead.table-light th:last-child { background: #f1f3fa; color: #6c757d; }
.table-actions-sticky tbody tr:nth-of-type(odd) td:last-child { background: #f9fafd; }

/* --- entry screens: item search dropdown -------------------------------- *
 * Purchase Entry and the POS both pick a line item by typing into the grid's
 * last row, and both drop the matches straight under the box being typed in -
 * the list is read and picked in one place, with no separate results panel to
 * look away to. Wrap the input in .search-anchor and put a .dropdown-menu
 * carrying .search-item entries inside it.
 *
 * The anchor is required: the theme sets `top: 100%` on every .dropdown-menu,
 * so without a positioned parent the menu measures against a distant ancestor
 * and lands off-screen.
 */
.search-anchor { position: relative; }
.search-anchor > .dropdown-menu {
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
}
.search-anchor .search-item { white-space: normal; }
/* A row inside .table-responsive clips anything absolutely positioned in it, so
   the container spills only while the list is open - sideways scroll is
   suspended for exactly as long as there is a menu hanging out of it. */
.table-responsive.dropdown-open { overflow: visible; }
/* Arrow-key highlight, same weight as hover: pointing at a match and arrowing
   to it should look like the same act. */
.search-item.active,
.search-item:hover { background: #e8f0fe; color: inherit; }

/* --- entry screens: totals bar ----------------------------------------- *
 * Purchase Entry and the pharmacy POS end in the same thing: a strip of
 * figures and the buttons that commit the document. As a card under the grid
 * the Grand Total scrolled off the bottom as soon as a few lines were added,
 * so it is a sticky strip - inside normal flow, so it also comes to rest above
 * the page footer instead of floating over it. Opt in with .entry-totalbar.
 */
.entry-totalbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 4px;
    box-shadow: 0 -4px 14px -8px rgba(0, 0, 0, .35);
}
.entry-totalbar .tb-figures {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 22px;
}
.entry-totalbar .tb-cell { display: flex; flex-direction: column; gap: 2px; }
.entry-totalbar .tb-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a94a6;
    white-space: nowrap;
}
.entry-totalbar .tb-value {
    font-size: 14px;
    font-weight: 600;
    color: #313a46;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.entry-totalbar .tb-cell .form-control,
.entry-totalbar .tb-cell select { height: 30px; }
.entry-totalbar .tb-discount { min-width: 150px; }
.entry-totalbar .tb-discount .input-group { flex-wrap: nowrap; }
.entry-totalbar .tb-grand {
    padding-left: 18px;
    border-left: 2px solid #e3e8ef;
}
.entry-totalbar .tb-grand .tb-value { font-size: 22px; color: #0acf97; }
/* What is owed, or handed back, is a figure on the bill - it belongs beside the
   total it is worked out from, not up in the document header. */
.entry-totalbar .tb-paystatus { padding-left: 18px; border-left: 1px solid #e3e8ef; }
.entry-totalbar .tb-balance .tb-value { font-size: 18px; color: #fa5c7c; }
.entry-totalbar .tb-actions { display: flex; gap: 8px; }

@media (max-width: 767px) {
    .entry-totalbar { position: static; }
    .entry-totalbar .tb-actions { width: 100%; }
    .entry-totalbar .tb-actions .btn { flex: 1; }
}

/* --- table head variants (v5 replaced them with .table-dark/.table-light) - */
.thead-dark  th { background-color: #313a46 !important; border-color: #3d4653 !important; color: #fff !important; }
.thead-light th { background-color: #f1f3fa !important; border-color: #eef2f7 !important; color: #6c757d !important; }