/* =====================================================================
   XOVENT — contrast & fit corrections
   =====================================================================
   Loaded LAST, after modern-theme.css and pos-modern.css.

   Why this file exists: modern-theme.css is a light-only layer that sets
   colours with !important. pos-modern.css and the 2.0 dashboard added
   dark themes on top of it, so in dark mode the light layer's colours
   leaked through onto dark surfaces — in the worst case text and its
   background were the same colour (contrast 1.01:1).

   Presentation only. No markup, layout, id, name or handler is changed.
   ===================================================================== */


/* ---------------------------------------------------------------
   1. ALWAYS ON — wrong in both light and dark
   --------------------------------------------------------------- */

/* The sidebar brand sits in a fixed 60px box. A long business name
   ("CARQUIK AUTO SPARE PARTS TRADING LLC") wrapped to two 28px lines
   and filled the box edge to edge with no padding. Scale it down,
   tighten the leading, give it breathing room, and cap it at two
   lines — the full name is on the element's title attribute. */
.side-bar-heading{
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    padding: 0 12px;
    margin: 0;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* modern-theme.css forces EVERY form label to grey with !important.
   On the indigo "Brands" / drawer buttons the markup asks for white
   text, so the button rendered grey-on-indigo (1.2:1). A label that
   explicitly asks to be white must stay white. */
/* modern-theme.css uses `form label:not(.btn):not(.checkbox-inline)
   :not(.radio-inline)` — specificity (0,4,1) with !important — so the
   :not() chain has to be matched and then beaten. */
body form label.tw-text-white:not(.btn):not(.checkbox-inline):not(.radio-inline),
body form label.text-white:not(.btn):not(.checkbox-inline):not(.radio-inline),
body label.tw-text-white:not(.btn):not(.checkbox-inline):not(.radio-inline){
    color: #fff !important;
}

/* pos-modern.css repaints the small POS header chips (date/time, etc.)
   from indigo to the pale brand tint and sets the container's colour to
   --xp-brand. The inner <span>/<i> still carry .text-white from the
   blade, which beats that inherited colour — white on #E3EFEF, 1.18:1.
   Let those children take the chip's colour. */
.pos-header span[class*="tw-bg-"] .text-white,
.pos-header span[class*="tw-bg-"] .tw-text-white,
.pos-header small[class*="tw-bg-"] .text-white,
.pos-header small[class*="tw-bg-"] .tw-text-white,
.pos-header div[class*="tw-bg-"] .text-white,
.pos-header div[class*="tw-bg-"] .tw-text-white{
    color: var(--xp-brand) !important;
}

/* Footer branding was Bootstrap's .text-info cyan (#11CDEF) on the
   near-white page strip — 1.7:1. */
footer.text-info{ color: #5B6670 !important; }
footer.text-info b{ color: #3C464F !important; }


/* ---------------------------------------------------------------
   2. DARK MODE ONLY — light-layer colours on dark surfaces
   --------------------------------------------------------------- */
@media (prefers-color-scheme: dark){

    /* pos-modern.css repaints the POS header card to --xp-card (#161B1E)
       but the text kept the body colour (tw-text-gray-900, #121926).
       The business name / location rendered at 1.01:1 — invisible. */
    .pos-header > div{ color: var(--xp-ink) !important; }

    /* Labels inside the POS, still grey (#4B5565) from modern-theme.css. */
    body .pos-header label:not(.btn):not(.checkbox-inline):not(.radio-inline),
    body .xv-pos-topbar label:not(.btn):not(.checkbox-inline):not(.radio-inline),
    body .xv-pos-meta label:not(.btn):not(.checkbox-inline):not(.radio-inline),
    body .xv-pos-remarks-row label:not(.btn):not(.checkbox-inline):not(.radio-inline),
    body .pos_form_totals label:not(.btn):not(.checkbox-inline):not(.radio-inline),
    .pos-header b,
    .pos-header strong{ color: var(--xp-mut) !important; }

    /* "Total / Payable:" is hard-coded tw-text-black in the blade,
       which is black on #161B1E (1.21:1). */
    .pos-total .tw-text-black{ color: var(--xp-ink) !important; }

    /* In dark mode --xp-brand is a LIGHT teal (#5CC4CB), so white labels on
       brand-filled buttons fail. (#pos-finalize is no longer brand-filled —
       xv-ux-fixes.css restyles it as a secondary; see that file.) */
    .xv-help-close{ color: #08211F !important; }
}

/* ------------------------------------------------------------------
   Dark-mode form controls (software-wide)

   The app is a light-only UI, but it never declared color-scheme. On a
   machine set to dark mode the browser therefore rendered every control
   it was not explicitly told about using DARK system defaults, while the
   page kept forcing near-black text through `color: inherit`.

   The select2 search box was the visible casualty: no author rule sets
   its background, so it came out #3b3b3b with #121926 text - about 1.1:1,
   i.e. invisible. Ordinary .form-control inputs escaped only because the
   theme paints them white.

   Declaring the scheme fixes the root cause for every unstyled control at
   once - inputs, scrollbars, date and select popups - not just select2.
   ------------------------------------------------------------------ */
:root{ color-scheme:light; }

/* belt and braces: paint the select2 search box rather than leaving it to
   the UA, since this is the field that was actually unreadable */
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container .select2-search__field,
.select2-search__field{
    background-color:#fff !important;
    color:#121926 !important;
    -webkit-text-fill-color:#121926;
    border:1px solid #cbd5e1 !important;
    border-radius:6px;
}
.select2-search__field::placeholder{ color:#6b7280; opacity:1; }

/* modern-theme forces the highlighted row to the primary blue with
   !important but never sets a text colour, so it kept vendor's #444 on a
   saturated blue - about 2:1. Set the pair together. */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"]{
    color:#fff !important;
}
.select2-container--default .select2-results__option--highlighted *{
    color:#fff !important;
}
/* the currently-selected row when it is NOT hovered stays light, so keep
   its text dark or it turns white-on-near-white */
.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted){
    background-color:#eef2ff !important;
    color:#121926 !important;
}