/* ============================================================
   positivus.css — system-wide theme
   Loads LAST, after every other stylesheet.

   Section 1 is the important one: this app already maps a business
   theme colour onto ~21 CSS variables that pos-material, modern-theme,
   modern-minimal, backend-material and apex-overrides all consume.
   Redefining those variables re-themes the whole app at once, instead
   of fighting !important across five files.

   Sections 2+ add the shape layer the variables don't carry — borders,
   radii, and the hard offset shadow — plus the three dropdown widgets.

   Surface colours are scoped to body:not(.dark-mode) so the app's own
   dark mode keeps working.
   ============================================================ */

/* ------------------------------------------------------------
   0. Brand tokens
   ------------------------------------------------------------ */

:root {
    --pv-lime:        #b9ff66;
    --pv-lime-soft:   #e8ffcc;
    --pv-lime-tint:   #f4ffe6;
    --pv-lime-line:   #d4f79e;
    --pv-ink:         #191a23;
    --pv-ink-hover:   #2b2c3b;
    --pv-ink-deep:    #0e0f16;
    --pv-grey:        #f3f3f3;
    --pv-grey-line:   #e4e4e8;
    --pv-white:       #ffffff;
    --pv-muted:       #6b6c78;

    --pv-danger:      #ff5c5c;
    --pv-danger-soft: #ffe9e9;
    --pv-ok:          #1f9254;
    --pv-ok-soft:     #e7f7ee;
    --pv-warn:        #9a6206;
    --pv-warn-soft:   #fdf3e0;

    --pv-r-sm:  10px;
    --pv-r-md:  14px;
    --pv-r-lg:  20px;

    --pv-border: 1.5px solid var(--pv-ink);
    --pv-press:  0 3px 0 var(--pv-ink);
    --pv-drop-shadow: 0 6px 0 -2px rgba(25, 26, 35, .18), 0 14px 34px rgba(25, 26, 35, .16);

    --pv-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------
   0b. Typography.

   26 `font-family: … !important` declarations live across the other
   stylesheets — 19 of them in pos-redesign.css alone, all forcing
   'Inter'. Setting the business font in settings can never win against
   those, which is why the font never changed. This rule carries enough
   specificity (0,7,2) to beat them, while the :not() list keeps the
   icon fonts intact — without it every Font Awesome glyph turns into
   a letter.
   ------------------------------------------------------------ */

html body *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.material-icons):not(.glyphicon) {
    font-family: var(--pv-font) !important;
}

/* Re-assert the icon faces (class specificity beats the rule above) */
.fa, .fas, .far, .fab, .fal,
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 6 Free", FontAwesome !important;
}

/* Material Icons were never declared anywhere in this app — the woff2
   sits at fonts/material-icons/ but no @font-face pointed at it, so every
   <i class="material-icons">schedule</i> rendered the literal word
   "schedule". Declaring it here fixes those app-wide. */
@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/material-icons/MaterialIcons-Regular.woff2") format("woff2");
}

.material-icons {
    font-family: "Material Icons" !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

.glyphicon { font-family: "Glyphicons Halflings" !important; }

/* Numbers line up in every table and total */
.table td, .table th,
.tot .v, .kpi-card, td.text-right {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   1. THE SYSTEM LEVER — remap the app's own theme variables.

   The app's palettes assume a saturated mid-dark hue carrying white
   text. Positivus inverts that: lime is a background for BLACK text.
   So "main" becomes ink (white text stays legible everywhere it is
   already used) and lime takes the accent/highlight slots.
   ------------------------------------------------------------ */

:root {
    /* pos-material / backend-material */
    --pos-primary:        var(--pv-ink);
    --pos-primary-light:  var(--pv-lime);
    --pos-primary-dark:   var(--pv-ink-deep);
    --pos-primary-subtle: var(--pv-lime-tint);

    /* modern-theme */
    --primary:            var(--pv-ink);
    --primary-hover:      var(--pv-ink-hover);
    --primary-light:      var(--pv-lime-tint);

    /* modern-minimal */
    --primary-modern:       var(--pv-ink);
    --primary-modern-hover: var(--pv-ink-hover);

    /* shared accent helpers */
    --theme-main:   var(--pv-ink);
    --theme-hover:  var(--pv-ink-hover);
    --theme-light:  var(--pv-lime);
    --theme-dark:   var(--pv-ink-deep);
    --theme-subtle: var(--pv-lime-tint);
    --theme-border: var(--pv-lime-line);
    --theme-ring:   var(--pv-lime);
    --theme-deeper: #08090d;

    /* bootstrap + shorthand aliases */
    --bs-primary:  var(--pv-ink);
    --p:           var(--pv-ink);
    --pf:          var(--pv-ink-hover);
    --fallback-p:  var(--pv-ink);
}

/* ------------------------------------------------------------
   2. App chrome — sidebar and header bar
   ------------------------------------------------------------ */

/* The sidebar is #app-sidebar.side-bar. Its nav links are emitted by the
   Menu package with INLINE styles, so they're matched here by attribute,
   not by a class — .sidebar-nav-link / .active-item are not in this markup. */

#app-sidebar.side-bar,
body:not(.dark-mode) .side-bar {
    background: var(--pv-ink) !important;
    border-right: 1.5px solid #000 !important;
}

#app-sidebar a {
    color: rgba(255, 255, 255, .74) !important;
    border-radius: var(--pv-r-sm);
    transition: background .12s ease, color .12s ease;
}

#app-sidebar a:hover {
    background: rgba(185, 255, 102, .14) !important;
    color: #fff !important;
}

/* Active item — the Menu package marks it with an inline left border */
#app-sidebar a[style*="border-left:3px solid"],
#app-sidebar a[style*="border-left: 3px solid"] {
    background: rgba(185, 255, 102, .16) !important;
    color: var(--pv-lime) !important;
    border-left-color: var(--pv-lime) !important;
}

#app-sidebar .side-bar-heading {
    color: rgba(255, 255, 255, .42) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Header bar. It was a dark gradient carrying WHITE text — painting it
   white made the text invisible. It stays dark; the tokens above already
   push the gradient to near-black. */
#app-header {
    background: linear-gradient(90deg, var(--pv-ink), #08090d) !important;
    border-bottom: 1.5px solid #000 !important;
}

#app-header,
#app-header a,
#app-header .hb,
#app-header .hb-label,
#app-header svg { color: #fff !important; }

#app-header .hb {
    border-radius: var(--pv-r-sm) !important;
    background: transparent !important;
    border: 1.5px solid transparent !important;
}

#app-header .hb:hover {
    background: rgba(185, 255, 102, .16) !important;
    border-color: rgba(185, 255, 102, .4) !important;
}

#app-header .hb-primary {
    background: var(--pv-lime) !important;
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: var(--pv-r-sm) !important;
    color: var(--pv-ink) !important;
    font-weight: 600;
}

#app-header .hb-primary:hover {
    box-shadow: var(--pv-press);
    transform: translateY(-1px);
}

#app-header .hb-primary svg { color: var(--pv-ink) !important; }

#app-header .hb-sep { background: var(--pv-grey-line) !important; }

#app-header .hb-bell-dot {
    background: var(--pv-danger) !important;
    border: 1.5px solid var(--pv-white);
}

/* Dropdown panels that render INSIDE #app-header.
   #hb-user-menu and #smart-notif-panel are both background:#fff, so the
   bar's white-text rule above turned their contents white-on-white —
   that is why Sign out disappeared. Two ids beat one, so these win.
   (#global-search-overlay is a dark scrim and correctly keeps white.) */

#app-header #hb-user-menu,
#app-header #smart-notif-panel {
    background: var(--pv-white) !important;
    color: var(--pv-ink) !important;
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: var(--pv-r-md) !important;
    box-shadow: var(--pv-drop-shadow) !important;
}

#app-header #hb-user-menu *,
#app-header #smart-notif-panel * { color: var(--pv-ink) !important; }

#app-header #hb-user-menu a,
#app-header #smart-notif-panel a {
    color: var(--pv-ink) !important;
    text-decoration: none !important;
}

#app-header #hb-user-menu a:hover,
#app-header #smart-notif-panel a:hover { background: var(--pv-lime) !important; }

/* muted secondary lines keep their hierarchy */
#app-header #hb-user-menu div[style*="#6b7280"],
#app-header #hb-user-menu svg,
#app-header #smart-notif-panel svg { color: var(--pv-muted) !important; }

/* Sign out stays the one red item */
#app-header #hb-user-menu a[onclick*="logout"] { color: #b3261e !important; }
#app-header #hb-user-menu a[onclick*="logout"]:hover { background: var(--pv-danger-soft) !important; }

/* the avatar square keeps its own gradient and white initial */
#app-header #hb-user-menu div[style*="linear-gradient"] { color: #fff !important; }

/* ------------------------------------------------------------
   3. Boxes, panels, modals, tabs
   ------------------------------------------------------------ */

.box,
.panel,
.info-box,
.small-box {
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-lg) !important;
    box-shadow: none !important;
}

/* AdminLTE paints a coloured 3px rail on top of every box; drop it so
   the accent stays scarce, and let the header carry the identity. */
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-solid {
    border-top-width: 1.5px !important;
    border-top-color: var(--pv-ink) !important;
}

.box-header {
    border-bottom: 1.5px solid var(--pv-grey-line) !important;
    padding: 14px 16px !important;
}

.box-header .box-title {
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

body:not(.dark-mode) .box,
body:not(.dark-mode) .panel {
    background: var(--pv-white) !important;
}

.modal-content {
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-lg) !important;
    box-shadow: var(--pv-drop-shadow) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1.5px solid var(--pv-grey-line) !important;
    padding: 15px 18px !important;
}

.modal-header .modal-title { font-weight: 700 !important; }

.modal-footer {
    border-top: 1.5px solid var(--pv-grey-line) !important;
    padding: 13px 18px !important;
}

.nav-tabs {
    border-bottom: 1.5px solid var(--pv-ink) !important;
    gap: 4px;
}

.nav-tabs > li > a {
    border: none !important;
    border-radius: var(--pv-r-sm) var(--pv-r-sm) 0 0 !important;
    color: var(--pv-muted) !important;
    font-weight: 600;
    margin-right: 0 !important;
}

.nav-tabs > li > a:hover { background: var(--pv-grey) !important; color: var(--pv-ink) !important; }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: var(--pv-lime) !important;
    border: none !important;
    color: var(--pv-ink) !important;
}

/* ------------------------------------------------------------
   3b. Home dashboard cards.
   .kpi-card / .qa-tile are defined in a <style> block inside
   home/index.blade.php, which renders AFTER this file — !important
   is what carries these, not source order.
   ------------------------------------------------------------ */

/* Each .kpi-card carries an INLINE background and all of its text is
   inline white (38 `color:white` declarations in that view). Their eight
   hues carry category identity — sells, purchases, due, expense — so the
   background is deliberately NOT overridden here; patch_kpi.sh darkens
   the colours in the view instead, where white text can stay legible.
   This rule only supplies the shape. */

.kpi-card {
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-lg) !important;
    box-shadow: none !important;
    transition: transform .1s ease, box-shadow .1s ease !important;
}

.kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 3px 0 var(--pv-lime) !important;
}

.qa-tile {
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-md) !important;
    background: var(--pv-white) !important;
    box-shadow: none !important;
    transition: transform .1s ease, box-shadow .1s ease, background .1s ease !important;
}

.qa-tile:hover {
    background: var(--pv-lime) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--pv-press) !important;
}

.qa-icon {
    border-radius: var(--pv-r-sm) !important;
    border: 1.5px solid var(--pv-ink) !important;
}

.qa-label {
    font-weight: 600 !important;
    color: var(--pv-ink) !important;
}

/* ------------------------------------------------------------
   3c. Report panels.

   24 report views wrap their content in <x-widget>, whose root is
   pure Tailwind — tw-bg-white tw-shadow-sm tw-rounded-xl tw-ring-1
   tw-ring-gray-200. None of the .box / .panel rules above touch it,
   which is why the reports still looked untouched. Matched here by
   the class combination instead.
   ------------------------------------------------------------ */

.tw-bg-white.tw-rounded-xl.tw-ring-1 {
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-lg) !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* widget header rule */
.tw-bg-white.tw-rounded-xl.tw-ring-1 .tw-border-gray-100,
.tw-bg-white.tw-rounded-xl.tw-ring-1 .tw-border-b {
    border-color: var(--pv-grey-line) !important;
}

.tw-bg-white.tw-rounded-xl.tw-ring-1 h3 {
    color: var(--pv-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

/* Tailwind greys used for secondary text across those panels */
.tw-text-gray-800 { color: var(--pv-ink) !important; }
.tw-text-gray-500,
.tw-text-gray-400 { color: var(--pv-muted) !important; }

/* ------------------------------------------------------------
   4. Tables + DataTables chrome
   ------------------------------------------------------------ */

.table > thead > tr > th {
    border-bottom: 1.5px solid var(--pv-ink) !important;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pv-muted) !important;
    padding: 10px 10px !important;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--pv-grey-line) !important;
    padding: 9px 10px !important;
    vertical-align: middle;
}

/* Numbers in a column should line up */
.table td.text-right,
.table th.text-right,
.table .numeric { font-variant-numeric: tabular-nums; }

/* Column separators.
   A hairline between cells is what actually makes columns distinct on a
   wide list — column striping fights row striping and makes both harder
   to read. The first cell has no left rule so the row still starts clean. */
.table > thead > tr > th + th,
.table > tbody > tr > td + td {
    border-left: 1px solid var(--pv-grey-line) !important;
}

/* Row zebra, restored.
   A warm off-white biased toward the brand neutral rather than a grey —
   it separates rows without turning the table into a ladder. */
body:not(.dark-mode) .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #fafbf5 !important;
}

/* Column banding, layered ON TOP of the row zebra.
   Two backgrounds can't both be background-color on one cell, so the
   column tint is drawn as a background-image — it composites over
   whichever zebra colour the row supplied, and the intersections stay
   readable because the tint is translucent, not opaque. */
body:not(.dark-mode) .table > tbody > tr > td:nth-child(even),
body:not(.dark-mode) .table > thead > tr > th:nth-child(even) {
    background-image: linear-gradient(rgba(25, 26, 35, .028), rgba(25, 26, 35, .028)) !important;
}

/* Hover beats both: same specificity as the zebra, so it comes after,
   and it clears the column tint so the active row reads as one band. */
body:not(.dark-mode) .table > tbody > tr:hover > td,
body:not(.dark-mode) .table-striped > tbody > tr:nth-of-type(odd):hover > td,
body:not(.dark-mode) .table > tbody > tr:hover > td:nth-child(even) {
    background-color: var(--pv-lime-tint) !important;
    background-image: none !important;
}

/* Numeric columns read down the column, not across */
.table td.text-right,
.table th.text-right,
.table .numeric,
.table td[class*="price"],
.table td[class*="qty"],
.table td[class*="total"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: var(--pv-r-sm) !important;
    padding: 5px 10px !important;
    background: var(--pv-white);
    color: var(--pv-ink);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    box-shadow: var(--pv-press) !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--pv-muted) !important; }

.dataTables_wrapper .dt-buttons .dt-button {
    background: var(--pv-white) !important;
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: var(--pv-r-sm) !important;
    color: var(--pv-ink) !important;
    font-weight: 600;
    padding: 6px 12px !important;
    margin-right: 5px;
}

.dataTables_wrapper .dt-buttons .dt-button:hover {
    background: var(--pv-lime) !important;
    box-shadow: var(--pv-press);
}

/* ------------------------------------------------------------
   4b. Date range filter.
   Like .select2-dropdown, daterangepicker appends itself to <body>,
   so it escaped every scoped theme in the app.
   ------------------------------------------------------------ */

.daterangepicker {
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-lg) !important;
    box-shadow: var(--pv-drop-shadow) !important;
    background: var(--pv-white) !important;
    padding: 6px !important;
    font-family: inherit !important;
}

/* the little pointer arrows */
.daterangepicker:before { border-bottom-color: var(--pv-ink) !important; }
.daterangepicker:after  { border-bottom-color: var(--pv-white) !important; }
.daterangepicker.drop-up:before { border-top-color: var(--pv-ink) !important; }
.daterangepicker.drop-up:after  { border-top-color: var(--pv-white) !important; }

/* preset list — Today, Last 30 days, This FY … */
.daterangepicker .ranges { margin-top: 0 !important; }

.daterangepicker .ranges li {
    border-radius: var(--pv-r-sm) !important;
    padding: 9px 12px !important;
    font-weight: 500;
    color: var(--pv-ink) !important;
    margin-bottom: 2px;
}

.daterangepicker .ranges li:hover {
    background: var(--pv-grey) !important;
    color: var(--pv-ink) !important;
}

.daterangepicker .ranges li.active {
    background: var(--pv-ink) !important;
    color: var(--pv-white) !important;
}

.daterangepicker .drp-calendar { max-width: none !important; }

.daterangepicker .calendar-table {
    border: none !important;
    background: transparent !important;
    border-radius: var(--pv-r-md) !important;
}

.daterangepicker .calendar-table th {
    color: var(--pv-muted) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.daterangepicker td,
.daterangepicker th {
    border-radius: 8px !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background: var(--pv-lime) !important;
    color: var(--pv-ink) !important;
}

/* selection: ends are ink, the span between is lime-tinted */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: var(--pv-ink) !important;
    color: var(--pv-white) !important;
}

.daterangepicker td.in-range {
    background: var(--pv-lime-tint) !important;
    color: var(--pv-ink) !important;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background: var(--pv-ink) !important;
    color: var(--pv-white) !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range {
    background: transparent !important;
    color: var(--pv-grey-line) !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.ampmselect {
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: 8px !important;
    background: var(--pv-white) !important;
    color: var(--pv-ink) !important;
    padding: 3px 6px !important;
    font-weight: 600;
}

.daterangepicker .drp-buttons {
    border-top: 1.5px solid var(--pv-grey-line) !important;
    padding: 11px 8px 6px !important;
}

.daterangepicker .drp-selected {
    color: var(--pv-muted) !important;
    font-family: inherit;
    font-size: 12px;
}

.daterangepicker .drp-buttons .btn {
    border-radius: var(--pv-r-sm) !important;
    border: 1.5px solid var(--pv-ink) !important;
    font-weight: 600;
    padding: 6px 14px !important;
}

.daterangepicker .drp-buttons .applyBtn {
    background: var(--pv-lime) !important;
    color: var(--pv-ink) !important;
}

.daterangepicker .drp-buttons .cancelBtn {
    background: var(--pv-white) !important;
    color: var(--pv-ink) !important;
}

/* ------------------------------------------------------------
   5. Pagination
   ------------------------------------------------------------ */

.pagination > li > a,
.pagination > li > span,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: var(--pv-r-sm) !important;
    margin: 0 3px !important;
    color: var(--pv-ink) !important;
    background: var(--pv-white) !important;
    font-weight: 600;
}

.pagination > li > a:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--pv-lime) !important;
    color: var(--pv-ink) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--pv-ink) !important;
    border-color: var(--pv-ink) !important;
    color: var(--pv-white) !important;
}

.pagination > .disabled > a,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    border-color: var(--pv-grey-line) !important;
}

/* ------------------------------------------------------------
   6. Alerts, labels, badges — status stays reserved
   ------------------------------------------------------------ */

.alert {
    border: 1.5px solid currentColor !important;
    border-radius: var(--pv-r-md) !important;
    font-weight: 500;
}

.alert-success { background: var(--pv-ok-soft) !important;     color: var(--pv-ok) !important; }
.alert-info    { background: var(--pv-lime-tint) !important;   color: var(--pv-ink) !important; }
.alert-warning { background: var(--pv-warn-soft) !important;   color: var(--pv-warn) !important; }
.alert-danger  { background: var(--pv-danger-soft) !important; color: #b3261e !important; }

.label, .badge {
    border-radius: 999px !important;
    font-weight: 600;
    padding: 3px 9px !important;
    letter-spacing: .02em;
}

.label-primary, .badge { background: var(--pv-ink) !important; color: var(--pv-white) !important; }
.label-success { background: var(--pv-ok-soft) !important;     color: var(--pv-ok) !important; }
.label-warning { background: var(--pv-warn-soft) !important;   color: var(--pv-warn) !important; }
.label-danger  { background: var(--pv-danger-soft) !important; color: #b3261e !important; }
.label-info    { background: var(--pv-lime) !important;        color: var(--pv-ink) !important; }

/* ------------------------------------------------------------
   7. Inputs + buttons
   ------------------------------------------------------------ */

.form-control:not(.select2-search__field) {
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-md) !important;
    box-shadow: none !important;
    color: var(--pv-ink);
}

.form-control:not(.select2-search__field):focus {
    border-color: var(--pv-ink) !important;
    box-shadow: var(--pv-press) !important;
}

.input-group-addon {
    border: var(--pv-border) !important;
    background: var(--pv-grey) !important;
    color: var(--pv-ink) !important;
}

/* Plain <select> elements — the discount-type dropdown and many others
   are Form::select with class="form-control" and no select2, so they
   render the browser's native control. The closed control is themed to
   match select2; the open list is drawn by the OS and cannot be styled
   by any stylesheet. */
select.form-control,
select.input-sm,
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 42px !important;
    background-color: var(--pv-white) !important;
    color: var(--pv-ink) !important;
    font-weight: 500;
    /* rounded lime chip + chevron, drawn as one SVG so the chip can
       have a radius — a linear-gradient can't. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect width='30' height='30' rx='8' fill='%23b9ff66'/%3E%3Cpath d='M11 13l4 4 4-4' fill='none' stroke='%23191a23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 30px 30px !important;
}

select.form-control { height: 42px !important; }

select.form-control:focus,
select.input-sm:focus {
    box-shadow: var(--pv-press) !important;
    border-color: var(--pv-ink) !important;
    outline: none !important;
}

/* the picker's month/year selects are smaller */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    padding-right: 28px !important;
    background-size: 22px 22px !important;
    background-position: right 3px center !important;
}

/* The POS header centre repeats the business name that the location chip
   already shows — hidden so the bar reads once, not twice. */
.pos-header-title { display: none !important; }

/* Location chip is now the only place the branch is named, so it carries
   the weight the hidden title used to. */
.pos-header-left .md-chip {
    background: rgba(255, 255, 255, .12) !important;
    border: 1.5px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--pv-r-sm) !important;
    padding: 5px 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    color: #fff !important;
}

.pos-header-left .md-chip select,
.pos-header-left .md-chip .form-control {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    height: auto !important;
    padding: 0 !important;
}

.pos-header-left .md-chip i { color: var(--pv-lime) !important; }

/* Move the clock off the centre and set it beside the location, so the
   middle of the bar isn't carrying a stray timestamp. Reordering the
   flex children avoids touching the markup. */
.pos-header.app-bar .pos-header-left   { order: 1 !important; }
.pos-header.app-bar .pos-header-center { order: 2 !important; margin-right: auto !important; text-align: left !important; }
.pos-header.app-bar .pos-header-right  { order: 3 !important; }

.pos-header-time {
    font-size: 12px !important;
    padding-left: 12px;
    margin-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

label { font-weight: 600; }

.btn {
    border-radius: var(--pv-r-md) !important;
    font-weight: 600;
    border-width: 1.5px !important;
    border-style: solid !important;
    transition: transform .08s ease, box-shadow .08s ease;
}

.btn-primary,
.btn-success {
    background: var(--pv-lime) !important;
    border-color: var(--pv-ink) !important;
    color: var(--pv-ink) !important;
}

.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
    background: var(--pv-lime) !important;
    color: var(--pv-ink) !important;
    box-shadow: var(--pv-press);
    transform: translateY(-1px);
}

.btn-default,
.btn-info {
    background: var(--pv-white) !important;
    border-color: var(--pv-ink) !important;
    color: var(--pv-ink) !important;
}

.btn-default:hover, .btn-info:hover {
    background: var(--pv-grey) !important;
    box-shadow: var(--pv-press);
}

.btn-danger {
    background: var(--pv-danger) !important;
    border-color: var(--pv-ink) !important;
    color: var(--pv-white) !important;
}

.btn-warning {
    background: var(--pv-warn-soft) !important;
    border-color: var(--pv-ink) !important;
    color: var(--pv-warn) !important;
}

.btn-link { border-color: transparent !important; color: var(--pv-ink) !important; }

.btn:active { transform: translateY(1px); box-shadow: none !important; }

/* Hover contrast guard.
   Several sheets set a button's hover background from var(--primary-hover),
   which this theme remaps to a near-black ink — landing ink text on an ink
   ground. These rules pin the hover ground to lime for every light button
   and force descendants (icons, <span> labels) to inherit, so text can
   never end up the same colour as the button under it. */

html body .btn:hover,
html body .btn:focus,
html body a.btn:hover,
html body button.btn:hover {
    background-image: none !important;
    background-color: var(--pv-lime) !important;
    color: var(--pv-ink) !important;
    border-color: var(--pv-ink) !important;
}

html body .btn:hover *,
html body .btn:focus * { color: inherit !important; }

/* The dark and destructive variants keep their own ground + light text */
html body .btn-danger:hover,
html body .btn-danger:focus {
    background-color: var(--pv-danger) !important;
    color: var(--pv-white) !important;
}

html body .btn-danger:hover *,
html body .btn-danger:focus * { color: inherit !important; }

/* Open dropdown toggles keep the hover treatment rather than reverting
   to Bootstrap's dark blue */
html body .open > .dropdown-toggle.btn-primary,
html body .open > .dropdown-toggle.btn-primary:hover,
html body .open > .dropdown-toggle.btn-primary:focus {
    background-color: var(--pv-lime) !important;
    background-image: none !important;
    color: var(--pv-ink) !important;
    border-color: var(--pv-ink) !important;
}

.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible {
    outline: 3px solid var(--pv-lime) !important;
    outline-offset: 2px;
}

/* Bootstrap dropdown menus (the button kind, not select2) */
.dropdown-menu {
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-md) !important;
    box-shadow: var(--pv-drop-shadow) !important;
    padding: 6px !important;
}

.dropdown-menu > li > a {
    border-radius: var(--pv-r-sm) !important;
    padding: 8px 11px !important;
    font-weight: 500;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--pv-lime) !important;
    color: var(--pv-ink) !important;
}

/* ------------------------------------------------------------
   8. select2 — closed control
   ------------------------------------------------------------ */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 4px !important;
    background: var(--pv-white) !important;
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-md) !important;
    box-shadow: none !important;
    transition: box-shadow .12s ease, border-color .12s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    padding-left: 12px !important;
    color: var(--pv-ink) !important;
    font-weight: 500;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--pv-muted) !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--pv-ink) !important;
    box-shadow: var(--pv-press) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
    width: 30px !important;
    top: 5px !important;
    right: 5px !important;
    background: var(--pv-lime);
    border-radius: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none !important;
    width: 9px !important;
    height: 9px !important;
    margin: -5px 0 0 -5px !important;
    border-right: 2px solid var(--pv-ink) !important;
    border-bottom: 2px solid var(--pv-ink) !important;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.select2-container--default.select2-container--open
.select2-selection--single .select2-selection__arrow b {
    transform: rotate(-135deg);
    margin-top: -2px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--pv-lime) !important;
    border: 1px solid var(--pv-ink) !important;
    border-radius: 8px !important;
    color: var(--pv-ink) !important;
    font-weight: 500;
    padding: 2px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--pv-ink) !important;
    margin-right: 6px !important;
}

/* ------------------------------------------------------------
   9. select2 — the open panel.
   select2 appends this to <body>, outside every scoped rule, which
   is why it escaped the earlier themes.
   ------------------------------------------------------------ */

.select2-dropdown {
    background: var(--pv-white) !important;
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-lg) !important;
    box-shadow: var(--pv-drop-shadow) !important;
    overflow: hidden !important;
    padding: 6px !important;
    margin-top: 6px;
}

.select2-container--open .select2-dropdown--above { margin-top: 0; margin-bottom: 6px; }

.select2-search--dropdown { padding: 6px 6px 8px !important; }

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 38px;
    padding: 0 12px !important;
    background: var(--pv-grey) !important;
    border: 1.5px solid transparent !important;
    border-radius: var(--pv-r-sm) !important;
    color: var(--pv-ink);
    outline: none !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    background: var(--pv-white) !important;
    border-color: var(--pv-ink) !important;
}

.select2-results__options { max-height: 320px !important; }

.select2-container--default .select2-results__option {
    padding: 9px 12px !important;
    border-radius: var(--pv-r-sm) !important;
    color: var(--pv-ink) !important;
    font-weight: 500;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--pv-lime) !important;
    color: var(--pv-ink) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--pv-ink) !important;
    color: var(--pv-white) !important;
}

.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: var(--pv-muted) !important;
    opacity: .6;
}

/* ------------------------------------------------------------
   10. jQuery UI autocomplete — stock adjustment, purchase,
       stock transfer, labels, purchase return, reports.
       Previously inherited raw jQuery UI defaults.
   ------------------------------------------------------------ */

.ui-autocomplete.ui-menu {
    background: var(--pv-white) !important;
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-lg) !important;
    box-shadow: var(--pv-drop-shadow) !important;
    padding: 6px !important;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100001 !important;
}

.ui-autocomplete .ui-menu-item { list-style: none; }

.ui-autocomplete .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item > a,
.ui-autocomplete .ui-menu-item > div {
    display: block;
    padding: 9px 12px !important;
    border: none !important;
    border-radius: var(--pv-r-sm) !important;
    background: transparent !important;
    color: var(--pv-ink) !important;
    font-weight: 500;
    line-height: 1.35;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item > a.ui-state-focus,
.ui-autocomplete .ui-menu-item:hover > .ui-menu-item-wrapper {
    background: var(--pv-lime) !important;
    color: var(--pv-ink) !important;
    border: none !important;
    margin: 0 !important;
}

.ui-autocomplete .ui-state-disabled,
.ui-autocomplete .ui-menu-item.ui-state-disabled {
    opacity: .5 !important;
    cursor: not-allowed;
    background: var(--pv-danger-soft) !important;
    border-radius: var(--pv-r-sm);
}

.ui-autocomplete::-webkit-scrollbar { width: 6px; }
.ui-autocomplete::-webkit-scrollbar-track { background: var(--pv-grey); border-radius: 10px; }
.ui-autocomplete::-webkit-scrollbar-thumb { background: var(--pv-ink); border-radius: 10px; }

/* ------------------------------------------------------------
   11. POS product search panel
   ------------------------------------------------------------ */

#pos_search_dropdown {
    background: var(--pv-white) !important;
    border: var(--pv-border) !important;
    border-radius: var(--pv-r-lg) !important;
    box-shadow: var(--pv-drop-shadow) !important;
    padding: 6px !important;
    margin-top: 6px !important;
}

#pos_search_dropdown::-webkit-scrollbar { width: 6px !important; }
#pos_search_dropdown::-webkit-scrollbar-track { background: var(--pv-grey) !important; }
#pos_search_dropdown::-webkit-scrollbar-thumb { background: var(--pv-ink) !important; }

#pos_search_dropdown .pos-search-row {
    gap: 10px !important;
    padding: 9px 12px !important;
    border-bottom: none !important;
    border-radius: var(--pv-r-sm) !important;
    background: transparent !important;
    transition: background .1s ease;
}

#pos_search_dropdown .pos-search-row + .pos-search-row { margin-top: 2px; }

#pos_search_dropdown .pos-search-row:not(.is-out):hover {
    background: var(--pv-lime) !important;
}

#pos_search_dropdown .pos-search-row.is-out {
    background: var(--pv-danger-soft) !important;
    opacity: .6 !important;
}

#pos_search_dropdown .pos-search-name { color: var(--pv-ink) !important; }
#pos_search_dropdown .pos-search-sku  { color: var(--pv-muted) !important; }

#pos_search_dropdown .pos-search-col {
    border-radius: 8px !important;
    background: var(--pv-grey) !important;
}

#pos_search_dropdown .pos-search-col-label,
#pos_search_dropdown .pos-search-col-value {
    color: var(--pv-ink) !important;
}

/* buildPosRow() writes the chip colours inline; re-map them by matching
   that inline background. Author !important beats an inline style. */
#pos_search_dropdown .pos-search-col[style*="240, 253, 244"],
#pos_search_dropdown .pos-search-col[style*="#f0fdf4"] {
    background: var(--pv-ok-soft) !important;
}

#pos_search_dropdown .pos-search-col[style*="239, 246, 255"],
#pos_search_dropdown .pos-search-col[style*="#eff6ff"] {
    background: var(--pv-lime-soft) !important;
}

#pos_search_dropdown .pos-search-col[style*="254, 242, 242"],
#pos_search_dropdown .pos-search-col[style*="#fef2f2"] {
    background: var(--pv-danger-soft) !important;
}

#pos_search_dropdown .pos-search-col[style*="254, 242, 242"] .pos-search-col-value,
#pos_search_dropdown .pos-search-col[style*="#fef2f2"] .pos-search-col-value {
    color: var(--pv-danger) !important;
}

#pos_search_dropdown .pos-search-row:hover .pos-search-col {
    background: rgba(255, 255, 255, .75) !important;
}

/* ------------------------------------------------------------
   11b. POS screen.
   The sale screen has its own chrome: .pos-header.app-bar (not
   #app-header), .md-icon-btn in that bar, #pos_table for the cart,
   and .pos-action-btn for the action row — none of which the
   generic .btn / .box rules reach.
   ------------------------------------------------------------ */

/* Header carries inline `color: white`, so it stays dark. */
.pos-header.app-bar {
    background: linear-gradient(90deg, var(--pv-ink), #08090d) !important;
    border-bottom: 1.5px solid #000 !important;
    box-shadow: none !important;
}

.pos-header-title { color: #fff !important; font-weight: 700 !important; }
.pos-header-time  { color: rgba(255, 255, 255, .66) !important; }

.md-icon-btn {
    border-radius: var(--pv-r-sm) !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1.5px solid transparent !important;
    color: #fff !important;
}

.md-icon-btn:hover {
    background: rgba(185, 255, 102, .18) !important;
    border-color: rgba(185, 255, 102, .45) !important;
    color: #fff !important;
}

/* Cart — header sticks so columns stay named on a long sale */
#pos_table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--pv-white) !important;
}

#pos_table > tbody > tr > td { vertical-align: middle !important; }

#pos_table .col-price,
#pos_table .col-discount,
#pos_table .col-total {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Action sidebar.
   Every variant ships its own gradient with white text — #00C6FB→#005BEA,
   #FF416C→#FF4B2B, #EC4899→#DB2777 and so on. All twelve must be reset,
   or the ones left out keep their gradient and look untouched. */

.pos-action-btn,
.pos-action-primary,
.pos-action-cash,
.pos-action-mpesa,
.pos-action-megapay,
.pos-action-credit,
.pos-action-suspend,
.pos-action-recent,
.pos-action-orders,
.pos-action-followup,
.pos-action-quote,
.pos-action-draft {
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: var(--pv-r-md) !important;
    background: var(--pv-white) !important;
    background-image: none !important;
    color: var(--pv-ink) !important;
    text-transform: none !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: transform .08s ease, box-shadow .08s ease !important;
}

/* Icons inherit the button's colour instead of carrying their own */
.pos-action-btn i,
.pos-action-btn .btn-text,
.pos-sidebar-buttons i { color: inherit !important; }

.pos-action-btn:hover {
    background: var(--pv-lime) !important;
    background-image: none !important;
    color: var(--pv-ink) !important;
    box-shadow: var(--pv-press) !important;
    transform: translateY(-1px);
}

/* Take payment + Cash are the commit actions — the only filled ones */
.pos-action-primary,
.pos-action-cash {
    background: var(--pv-ink) !important;
    background-image: none !important;
    color: var(--pv-white) !important;
}

.pos-action-primary:hover,
.pos-action-cash:hover {
    background: var(--pv-ink) !important;
    background-image: none !important;
    color: var(--pv-white) !important;
    box-shadow: 0 3px 0 var(--pv-lime) !important;
}

/* The two STK rails read as one group — "takes money now" */
.pos-action-mpesa,
.pos-action-megapay {
    background: var(--pv-lime) !important;
    background-image: none !important;
    color: var(--pv-ink) !important;
}

.pos-action-mpesa:hover,
.pos-action-megapay:hover {
    background: var(--pv-lime) !important;
    background-image: none !important;
    box-shadow: var(--pv-press) !important;
}

/* Lost sale records a sale you could NOT complete, so it must not read
   like the buttons beside it that take money. Overrides its inline
   gradient — author !important beats an inline style. */
.pos-action-lost-sale {
    background: var(--pv-danger-soft) !important;
    background-image: none !important;
    color: #b3261e !important;
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: var(--pv-r-md) !important;
}

.pos-action-lost-sale:hover {
    background: var(--pv-danger-soft) !important;
    background-image: none !important;
    color: #b3261e !important;
    box-shadow: 0 3px 0 #b3261e !important;
}

/* Pharmacy: no product warranty. Both the header cell and the body
   cell carry .col-warranty, so the whole column collapses.
   (The app also has a business setting for this —
   common_settings.enable_product_warranty — this works regardless.) */
#pos_table .col-warranty,
th.col-warranty,
td.col-warranty { display: none !important; }

/* ---- Cart panel header: "This sale (cart)" + item badge ---- */

/* The bar was a gradient built from var(--pos-primary) — the indigo
   #4F46E5 that three stylesheets each declare in :root. Rather than
   depend on that variable resolving, it is painted directly. */
.current-sale-header {
    background: var(--pv-lime) !important;
    background-image: none !important;
    color: var(--pv-ink) !important;
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: var(--pv-r-md) var(--pv-r-md) 0 0 !important;
    padding: 10px 14px !important;
    margin-bottom: 0 !important;
}

.current-sale-header *,
.current-sale-header .header-left,
.current-sale-header .header-right { color: var(--pv-ink) !important; }

/* Cashier chip in the POS header bar (added by patch_pos_cashier.sh) */
.pos-cashier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    margin-right: 6px;
    border-radius: var(--pv-r-sm);
    background: rgba(185, 255, 102, .16);
    border: 1.5px solid rgba(185, 255, 102, .45);
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pos-cashier-chip i { color: var(--pv-lime) !important; }

@media (max-width: 768px) {
    .pos-cashier-chip span { display: none; }
    .pos-cashier-chip { padding: 0 9px; }
}

.current-sale-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: var(--pv-ink) !important;
    margin: 0 !important;
}

.current-sale-header .header-left i { color: var(--pv-ink) !important; }

.item-count-badge {
    background: var(--pv-lime) !important;
    color: var(--pv-ink) !important;
    border: 1.5px solid var(--pv-ink) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}

/* ---- Cart column headers ---- */

#pos_table thead th {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--pv-muted) !important;
    border-bottom: 1.5px solid var(--pv-ink) !important;
    padding: 9px 10px !important;
}

/* ---- Totals strip ----
   pos_form_totals.blade.php writes every colour and size inline, mixing
   var(--pos-text-secondary), #94a3b8 and #dc2626 across 11/12/13/14px.
   These rules put all of it on one scale; author !important beats the
   inline styles. */

.summary-row {
    padding: 5px 0 !important;
    border-bottom: 1px solid var(--pv-grey-line) !important;
}

.summary-row span,
.summary-row i { font-size: 12px !important; }

/* labels */
.summary-row > div > span:first-child,
.summary-row > span:first-child { color: var(--pv-muted) !important; }

/* values — one size, one weight, aligned digits */
.total_quantity,
.price_total,
#product_discounts_amount,
#tax_amount_display,
#round_off_text,
#discount_amount_display {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--pv-ink) !important;
    font-variant-numeric: tabular-nums;
}

/* discount keeps a semantic colour, but the palette's, not #dc2626 */
#discount_amount_display,
.pos-discount-row span[style*="#dc2626"] { color: #b3261e !important; }

.pos-discount-row:hover { background: var(--pv-danger-soft) !important; }
.pos-tax-row:hover      { background: var(--pv-grey) !important; }

/* the little type/percent hints, previously #94a3b8 */
#discount_type_display,
#tax_percent_display,
.summary-row .fa-pencil-alt { color: var(--pv-muted) !important; }

/* Total payable — the one lime figure on the screen */
.total-row.final {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1.5px solid var(--pv-ink) !important;
    border-bottom: none !important;
}

.total-row.final > span:first-child {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--pv-muted) !important;
}

.total-row.final #total_payable {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--pv-ink) !important;
    background: var(--pv-lime) !important;
    border-radius: 10px !important;
    padding: 2px 12px !important;
    font-variant-numeric: tabular-nums;
}

/* the other on-screen total uses Bootstrap's green .text-success */
#pos_details #total_payable,
#total_payable.text-success {
    color: var(--pv-ink) !important;
    background: var(--pv-lime) !important;
    border-radius: 10px !important;
    padding: 2px 10px !important;
}

/* Draft and Quotation hidden, freeing the row for the rest */
#pos-draft,
#pos-finalize-quotation,
.pos-action-draft,
.pos-action-quote { display: none !important; }

/* ------------------------------------------------------------
   11c. Owner insights reports — shared shell for targets,
   reorder, cash flow, refills and margin guard.
   ------------------------------------------------------------ */

.oi { padding: 0 4px 28px; }

.oi-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    border-bottom: 2px solid var(--pv-ink);
    padding-bottom: 14px; margin-bottom: 18px;
}

.oi-head h1 {
    margin: 0; font-size: 28px; font-weight: 700;
    letter-spacing: -.025em; line-height: 1;
}

.oi-head p { margin: 6px 0 0; font-size: 13px; color: var(--pv-muted); max-width: 74ch; }

.oi-kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px) { .oi-kpi { grid-template-columns: repeat(4, 1fr); } }

.oi-k {
    background: var(--pv-white); border: 1.5px solid var(--pv-ink);
    border-radius: 18px; padding: 15px 16px 13px;
    display: flex; flex-direction: column; gap: 2px;
}
.oi-k.lead { background: var(--pv-lime); }
.oi-k.bad  { background: var(--pv-danger-soft); }
.oi-k.good { background: var(--pv-ok-soft); }

.oi-k .l {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--pv-muted);
}
.oi-k .v {
    font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
    font-variant-numeric: tabular-nums; color: var(--pv-ink); overflow-wrap: anywhere;
}
.oi-k .s { font-size: 12px; color: var(--pv-ink); opacity: .72; }

.oi-filter { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.oi-filter label {
    display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--pv-muted); margin-bottom: 5px;
}

.oi-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; font-weight: 700; white-space: nowrap;
}
.oi-pill.met    { background: var(--pv-ok-soft);     color: var(--pv-ok); }
.oi-pill.missed { background: var(--pv-danger-soft); color: #b3261e; }
.oi-pill.warn   { background: var(--pv-warn-soft);   color: var(--pv-warn); }
.oi-pill.info   { background: var(--pv-lime-soft);   color: var(--pv-ink); }
.oi-pill.none   { background: var(--pv-grey);        color: var(--pv-muted); }

/* progress bar for target vs actual */
.oi-bar {
    position: relative; height: 22px; border-radius: 7px;
    background: var(--pv-grey); overflow: hidden;
    border: 1.5px solid var(--pv-ink);
}
.oi-bar span {
    position: absolute; inset: 0 auto 0 0; display: block;
    background: var(--pv-lime);
}
.oi-bar span.over  { background: var(--pv-ok); }
.oi-bar span.under { background: var(--pv-warn-soft); }
.oi-bar b {
    position: relative; z-index: 1; display: block; text-align: right;
    padding: 1px 9px; font-size: 12px; font-variant-numeric: tabular-nums;
}
/* pace marker: where you should be by now */
.oi-bar i {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: var(--pv-ink); z-index: 2;
}

.oi-num { text-align: right; font-variant-numeric: tabular-nums; }

.oi-empty {
    border: 1.5px dashed var(--pv-grey-line); border-radius: 16px;
    padding: 32px 18px; text-align: center; color: var(--pv-muted);
}
.oi-empty strong { display: block; font-size: 17px; color: var(--pv-ok); margin-bottom: 5px; }

/* ------------------------------------------------------------
   12. Print — strip the theme so invoices stay plain
   ------------------------------------------------------------ */

@media print {
    .btn, .box, .panel, .modal-content, .table > thead > tr > th {
        border: 1px solid #000 !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
    }
}