/* ==========================================================================
   BillTime — Aquiry-pattern theme (phase 1: shell, buttons, boxes, status)
   Loads LAST (after brand-system.css). Brand-only rules from the concept:
   - purple accent darkened for text/button contrast (WCAG AA)
   - status uses purple tints + icons + labels, not extra hues
   Phase 2 will remove the older overrides this file supersedes.
   ========================================================================== */

:root {
    --bt-accent: #7b5c96;          /* solid buttons, links, active nav. 5.51:1 with white */
    --bt-accent-hover: #6b5082;    /* hover/pressed. 6.79:1 with white */
    --bt-accent-soft: #a47bc8;     /* decorative only: focus rings, chart bars, KPI top border */
    --bt-accent-tint: rgba(164, 123, 200, .14);
    --bt-accent-tint-strong: rgba(164, 123, 200, .24);
    --bt-canvas: #f2f2f4;
    --bt-surface: #ffffff;
    --bt-border: #e9ecef;
    --bt-border-strong: #dee2e6;
    --bt-text: #343a40;            /* 11.51:1 on white */
    --bt-text-strong: #1f2233;
    --bt-muted: #646a80;           /* 5.36:1 on white, 4.80:1 on canvas */
    --bt-radius: 4.8px;
    --bt-sidebar-item: #5f6a7a;    /* inactive menu item on white sidebar, 5.9:1 */
}

/* ---------- Page ---------- */
body,
.content-wrapper,
.right-side {
    background: var(--bt-canvas) !important;
    color: var(--bt-text);
}

/* ---------- Header (white, thin border) ---------- */
.main-header .navbar,
.navbar-default.navbar-static-top,
.main-header {
    background: var(--bt-surface) !important;
    border-color: var(--bt-border) !important;
    box-shadow: none !important;
}

/* ---------- Sidebar (white by default, purple active) ---------- */
.main-sidebar,
.left-side,
.sidebar {
    background: var(--bt-surface) !important;
    border-right: 1px solid var(--bt-border) !important;
}
.sidebar-menu > li > a {
    color: var(--bt-sidebar-item) !important;
    border-radius: var(--bt-radius);
    margin: 2px 8px;
}
.sidebar-menu > li > a:hover,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    background: var(--bt-accent-tint) !important;
    color: var(--bt-accent) !important;
    border-left-color: transparent !important;
}
.sidebar-menu > li.active > a > i,
.sidebar-menu > li > a:hover > i {
    color: var(--bt-accent) !important;
}
.sidebar-menu .treeview-menu > li > a {
    color: var(--bt-muted) !important;
}
.sidebar-menu .treeview-menu > li.active > a {
    color: var(--bt-accent) !important;
}

/* ---------- Boxes / cards ---------- */
.box {
    background: var(--bt-surface) !important;
    border: 1px solid var(--bt-border) !important;
    border-top: 1px solid var(--bt-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
    border-top: 3px solid var(--bt-accent-soft) !important;
}
.box-header {
    border-bottom: 1px solid var(--bt-border) !important;
}
.box-header .box-title,
.box-title {
    color: var(--bt-text-strong) !important;
    font-weight: 600;
}

/* ---------- Buttons: one accent colour, three levels ---------- */
.btn {
    border-radius: var(--bt-radius) !important;
    box-shadow: none !important;
    font-weight: 600;
}
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-brand,
.tw-dw-btn-primary,
.tw-dw-btn-success,
.tw-dw-btn-info {
    background: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
.btn-info:hover, .btn-info:focus,
.btn-warning:hover, .btn-warning:focus,
.btn-brand:hover, .btn-brand:focus,
.tw-dw-btn-primary:hover, .tw-dw-btn-success:hover, .tw-dw-btn-info:hover {
    background: var(--bt-accent-hover) !important;
    border-color: var(--bt-accent-hover) !important;
    color: #fff !important;
}
.btn-default,
.btn-danger,
.tw-dw-btn-neutral,
.tw-dw-btn-error,
.tw-dw-btn-outline {
    background: var(--bt-surface) !important;
    border: 1px solid var(--bt-accent) !important;
    color: var(--bt-accent) !important;
}
.btn-default:hover, .btn-default:focus,
.btn-danger:hover, .btn-danger:focus,
.tw-dw-btn-neutral:hover, .tw-dw-btn-error:hover, .tw-dw-btn-outline:hover {
    background: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
}
.btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--bt-accent-tint-strong) !important;
}
.btn[disabled], .btn.disabled, fieldset[disabled] .btn {
    opacity: .45 !important;
}

/* ---------- Status text and tints (brand-only, labelled) ---------- */
.text-success, .text-info, .text-warning, .text-danger,
.text-green, .text-red, .text-yellow, .text-blue {
    color: var(--bt-accent) !important;
}
.bg-green, .bg-red, .bg-yellow, .bg-blue, .bg-aqua,
.label-success, .label-danger, .label-warning, .label-info {
    background: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
    border: 1px solid var(--bt-accent-tint-strong);
}

/* ---------- Text colours ---------- */
.text-muted, .text-gray {
    color: var(--bt-muted) !important;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--bt-text-strong);
}
a {
    color: var(--bt-accent);
}
a:hover, a:focus {
    color: var(--bt-accent-hover);
}

/* ---------- Form focus ---------- */
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--bt-accent) !important;
    box-shadow: 0 0 0 3px var(--bt-accent-tint-strong) !important;
}

/* ---------- Tabs and pagination ---------- */
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--bt-accent) !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--bt-accent) !important;
}
.pagination > .active > a, .pagination > .active > span {
    background: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}
.pagination > li > a {
    color: var(--bt-accent) !important;
}

/* ==========================================================================
   Phase 2 · batch 1 — Sell, Purchases, POS
   AdminLTE colour utilities (status labels, small boxes, table rows) and the
   Sell KPI tiles all use the accent family. Text stays dark on the tint.
   ========================================================================== */
.bg-green, .bg-red, .bg-yellow, .bg-blue, .bg-aqua, .bg-orange, .bg-purple,
.bg-maroon, .bg-navy, .bg-teal, .bg-light-green, .bg-light-blue,
.label-success, .label-danger, .label-warning, .label-info, .label-primary,
.label-default.bg-green {
    background-color: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
    border: 1px solid var(--bt-accent-tint-strong) !important;
}
/* small-box KPI blocks: dark text on the tint, not white */
.small-box[class*="bg-"]:not(.bg-gray):not(.bg-light-gray) {
    background: var(--bt-accent-tint) !important;
    color: var(--bt-text-strong) !important;
    border: 1px solid var(--bt-accent-tint-strong);
}
.small-box[class*="bg-"] h3, .small-box[class*="bg-"] p { color: var(--bt-text-strong) !important; }
.small-box .icon { color: var(--bt-accent) !important; opacity: .5; }
/* table rows with a status colour (purchase and POS detail tables) */
tr.bg-green, tr.bg-red, tr.bg-yellow, tr.bg-blue, tr.bg-aqua, tr.bg-orange,
tr.bg-light-green, tr.bg-light-blue {
    background-color: var(--bt-accent-tint) !important;
}


/* ==========================================================================
   Phase 2 · batch 3 — Tailwind status utilities used in views
   (tw-bg-red-*, tw-bg-green-*, …) → accent tint with dark text.
   ========================================================================== */
[class*="tw-bg-red-"], [class*="tw-bg-green-"], [class*="tw-bg-emerald-"],
[class*="tw-bg-amber-"], [class*="tw-bg-orange-"], [class*="tw-bg-yellow-"],
[class*="tw-bg-sky-"], [class*="tw-bg-rose-"], [class*="tw-bg-blue-"],
[class*="tw-bg-indigo-"], [class*="tw-bg-violet-"], [class*="tw-bg-pink-"] {
    background-color: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
}
[class*="tw-text-red-"], [class*="tw-text-green-"], [class*="tw-text-emerald-"],
[class*="tw-text-amber-"], [class*="tw-text-orange-"], [class*="tw-text-yellow-"],
[class*="tw-text-sky-"], [class*="tw-text-rose-"], [class*="tw-text-blue-"],
[class*="tw-text-indigo-"], [class*="tw-text-violet-"], [class*="tw-text-pink-"] {
    color: var(--bt-accent) !important;
}

/* ==========================================================================
   Phase 2 · batch 5 — AdminLTE primary boxes and primary backgrounds
   ========================================================================== */
.box-primary > .box-header,
.box.box-solid.box-primary > .box-header {
    background: var(--bt-accent) !important;
    background-color: var(--bt-accent) !important;
    color: #fff !important;
}
.box-primary > .box-header .btn, .box.box-solid.box-primary > .box-header a { color: #fff !important; }
.box-primary > .box-header .box-title, .box-primary > .box-header h1, .box-primary > .box-header h2, .box-primary > .box-header h3, .box-primary > .box-header h4 { color: #fff !important; }
.bg-primary, .modal-header.bg-primary {
    background-color: var(--bt-accent) !important;
    color: #fff !important;
}

/* Phase 2 · batch 6 — info/light status backgrounds used as headers and banners */
.bg-info, .bg-light-blue, .bg-light-green, .bg-light-red, .bg-light-yellow {
    background-color: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
}

/* Phase 2 · batch 9 — remaining Tailwind colour families used in views */
[class*="tw-bg-cyan-"], [class*="tw-bg-teal-"], [class*="tw-bg-lime-"],
[class*="tw-bg-fuchsia-"], [class*="tw-bg-purple-"] {
    background-color: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
}
[class*="tw-text-cyan-"], [class*="tw-text-teal-"], [class*="tw-text-lime-"],
[class*="tw-text-fuchsia-"], [class*="tw-text-purple-"] {
    color: var(--bt-accent) !important;
}

/* Phase 2 · batch 11 — Tailwind gradient buttons (for example the Sell "Add" button) use the accent */
[class*="tw-bg-gradient-"] {
    background-image: linear-gradient(135deg, var(--bt-accent), var(--bt-accent-hover)) !important;
    color: #fff !important;
}

/* ==========================================================================
   Component: KPI tiles (.stock_transfer_card). Migrated from app.css, one accent,
   no per-card hues. Used on the Sell, stock and report pages.
   ========================================================================== */
.stock_transfer_cards {
    display: flex !important;
    gap: 14px;
    padding: 0 !important;
    width: 100% !important;
    flex-wrap: wrap;
}
.stock_transfer_card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    flex: 1 1 220px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 140px !important;
    height: auto !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--bt-radius-tile, 12px) !important;
    background: var(--bt-surface) !important;
    border: 1px solid var(--bt-border) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    overflow: hidden;
    box-sizing: border-box;
}
.stock_transfer_card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}
.stock_transfer_card > .top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 14px 14px 8px !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-left: 5px solid var(--bt-accent) !important;
}
.stock_transfer_card > .top > .money {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    min-width: 0;
}
.stock_transfer_card > .top > .money > h1 {
    color: var(--bt-text-strong) !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    word-break: break-word;
    letter-spacing: -0.03em;
}
.stock_transfer_card > .top > .money > span {
    color: var(--bt-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
}
.stock_transfer_card > .top > .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
    margin-left: 10px;
    background: var(--bt-accent-tint) !important;
    color: var(--bt-accent) !important;
}
.stock_transfer_card > .top > .icon svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}
.stock_transfer_card > .bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 14px 12px !important;
    background: var(--bt-surface-2) !important;
    border-top: 1px dashed var(--bt-border-strong) !important;
    margin-top: auto !important;
}
.stock_transfer_card > .bottom > .text {
    flex: 1;
    min-width: 0;
}
.stock_transfer_card > .bottom > div > h3 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--bt-text-strong) !important;
    white-space: normal;
    overflow-wrap: break-word;
}
.stock_transfer_card > .bottom > .arrow {
    display: none !important;
}
@media (max-width: 768px) {
    .stock_transfer_cards {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .stock_transfer_card {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .stock_transfer_card > .top > .money > h1 {
        font-size: 24px !important;
    }
    .stock_transfer_card > .top > .icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    .stock_transfer_card > .bottom {
        padding: 0.5rem;
    }
}

/* ==========================================================================
   Component: page header (.content-header). Migrated from app.css.
   ========================================================================== */
.content-header {
    background: var(--bt-surface);
    padding: 1rem 1.5rem;
    margin: 15px 15px 1rem 15px;
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
}
.content-header h1 {
    color: var(--bt-text-strong) !important;
    text-shadow: none;
    font-weight: 700;
    margin: 0;
}

/* ==========================================================================
   Component: collapsible filter panel (.brand-filter-*). Migrated from
   brand-system.css, with the accent in place of the brand colour.
   ========================================================================== */
.brand-filter-card {
    background: var(--bt-surface);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--bt-border);
    border-left: 3px solid var(--bt-accent);
    margin-bottom: 16px;
    transition: all .25s ease;
    overflow: hidden;
}
.brand-filter-card:hover {
    box-shadow: var(--shadow-md);
}
.brand-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease;
}
.brand-filter-header:hover {
    background: var(--bt-accent-tint);
}
.brand-filter-header h3,
.brand-filter-header .box-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--bt-text-strong);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.brand-filter-header h3 i,
.brand-filter-header .box-title i,
.brand-filter-header h3 svg,
.brand-filter-header .box-title svg {
    color: var(--bt-accent);
    font-size: 14px;
}
.brand-filter-header .caret {
    transition: transform .2s ease;
    color: var(--bt-muted);
}
.brand-filter-body {
    padding: 0 20px 16px;
}
@media (max-width: 767px) {
    .brand-filter-card {
        border-left-width: 3px !important;
    }
}


/* ==========================================================================
   BUTTON SYSTEM (Aquiry pattern). One design for every button in the app.
   Levels: solid (primary actions), outline (neutral, secondary, delete), soft
   (icon and utility buttons). Sizes: xs, sm, default, lg, block.
   Values follow the Aquiry template: radius 4.8px, 13px text, medium weight,
   inset highlight shadow, focus ring, disabled at 65% opacity.
   Legacy classes (btn-*, tw-dw-btn-*) all map onto these three levels.
   ========================================================================== */

/* --- base: every button --- */
.btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger,
.btn-brand, .btn-flat, .btn-modal, .btn-box-tool, .btn-round, .btn-link, .btn-outline,
.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light, .btn-white,
.btn-plus, .btn-minus, .btn-remove, .btn-view, .btn-reset, .btn-big, .btn-ai,
.btn-ai-generate, .btn-suggest, .btn-add-schedule, .btn-export-download,
.btn-modal-coupon, .btn--primary, .btn--secondary, .btn--success, .btn--info,
.btn--warning, .btn--danger, .btn--sm, .btn--icon,
[class*="tw-dw-btn-"], .tw-dw-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 7.5px 14px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    border: 1px solid transparent !important;
    border-radius: 4.8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075) !important;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}
/* daisyUI button with no variant class (for example the Sell and Products "Add"): solid accent */
.tw-dw-btn:not([class*="tw-dw-btn-"]):not([class*="tw-bg-gradient-"]) {
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}
.btn:focus-visible, .btn-default:focus-visible, .btn-primary:focus-visible,
.btn-success:focus-visible, .btn-info:focus-visible, .btn-warning:focus-visible,
.btn-danger:focus-visible, .btn-flat:focus-visible, .btn-modal:focus-visible,
[class*="tw-dw-btn-"]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--bt-accent-tint-strong) !important;
}
.btn[disabled], .btn.disabled, .btn:disabled,
[class*="tw-dw-btn-"][disabled], [class*="tw-dw-btn-"].btn-disabled,
fieldset[disabled] .btn {
    opacity: .65 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* --- SOLID: primary actions (one per screen is the aim) --- */
.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-brand, .btn-secondary,
.btn--primary, .btn--secondary, .btn--success, .btn--info, .btn--warning,
.tw-dw-btn-primary, .tw-dw-btn-success, .tw-dw-btn-info, .tw-dw-btn-warning,
.tw-dw-btn-accent, .tw-dw-btn-secondary {
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover,
.btn-brand:hover, .btn-secondary:hover, .btn--primary:hover, .btn--success:hover,
.btn--info:hover, .btn--warning:hover, .tw-dw-btn-primary:hover,
.tw-dw-btn-success:hover, .tw-dw-btn-info:hover, .tw-dw-btn-warning:hover,
.tw-dw-btn-accent:hover, .tw-dw-btn-secondary:hover,
.btn-primary:focus, .btn-success:focus, .btn-info:focus, .btn-warning:focus,
.btn-primary.active, .btn-success.active, .btn-info.active, .btn-warning.active,
.btn-primary.show, .btn-success.show, .btn-info.show, .btn-warning.show {
    background-color: var(--bt-accent-hover) !important;
    border-color: var(--bt-accent-hover) !important;
    color: #fff !important;
}

/* --- OUTLINE: neutral, secondary and destructive actions --- */
.btn-default, .btn-danger, .btn-outline, .btn-outline-primary, .btn-outline-secondary,
.btn-light, .btn-white, .btn--danger,
.tw-dw-btn-outline, .tw-dw-btn-neutral, .tw-dw-btn-error, .tw-dw-btn-default,
.tw-dw-btn-danger {
    background-color: var(--bt-surface) !important;
    border-color: var(--bt-accent) !important;
    color: var(--bt-accent) !important;
}
.btn-default:hover, .btn-danger:hover, .btn-outline:hover, .btn-outline-primary:hover,
.btn-outline-secondary:hover, .btn-light:hover, .btn-white:hover, .btn--danger:hover,
.tw-dw-btn-outline:hover, .tw-dw-btn-neutral:hover, .tw-dw-btn-error:hover,
.tw-dw-btn-default:hover, .tw-dw-btn-danger:hover,
.btn-default:focus, .btn-danger:focus, .btn-outline:focus,
.btn-default.active, .btn-danger.active, .btn-default.show, .btn-danger.show,
.tw-dw-btn-outline.active, .tw-dw-btn-neutral.active, .tw-dw-btn-error.active {
    background-color: var(--bt-accent-tint) !important;
    border-color: var(--bt-accent-hover) !important;
    color: var(--bt-accent-hover) !important;
}

/* --- SOFT: icon and utility buttons (tinted, no border) --- */
.btn-flat, .btn-modal, .btn-box-tool, .btn-round, .btn-link, .btn-plus, .btn-minus,
.btn-remove, .btn-view, .btn-reset, .btn-big, .btn-ai, .btn-ai-generate,
.btn-suggest, .btn-add-schedule, .btn-export-download, .btn-modal-coupon,
.btn--icon {
    background-color: var(--bt-accent-tint) !important;
    border-color: transparent !important;
    color: var(--bt-accent-hover) !important;
}
.btn-flat:hover, .btn-modal:hover, .btn-box-tool:hover, .btn-round:hover, .btn-link:hover,
.btn-plus:hover, .btn-minus:hover, .btn-remove:hover, .btn-view:hover, .btn-reset:hover,
.btn-big:hover, .btn-ai:hover, .btn-ai-generate:hover, .btn-suggest:hover,
.btn-add-schedule:hover, .btn-export-download:hover, .btn-modal-coupon:hover,
.btn--icon:hover {
    background-color: var(--bt-accent-tint-strong) !important;
    color: var(--bt-accent-hover) !important;
}

/* --- sizes --- */
.btn-xs, .tw-dw-btn-xs {
    min-height: 26px !important;
    padding: 3px 9px !important;
    font-size: 11.5px !important;
    border-radius: 4px !important;
}
.btn-sm, .tw-dw-btn-sm, .btn--sm {
    min-height: 30px !important;
    padding: 5.5px 10px !important;
    font-size: 12px !important;
}
.btn-lg, .tw-dw-btn-lg {
    min-height: 40px !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
}
.btn-block, .btn-wide, .tw-dw-btn-wide {
    display: flex !important;
    width: 100% !important;
}
.tw-dw-btn-wide { width: auto !important; min-width: 120px !important; }
.btn-group > .btn { border-radius: 0 !important; }
.btn-group > .btn:first-child { border-radius: 4.8px 0 0 4.8px !important; }
.btn-group > .btn:last-child { border-radius: 0 4.8px 4.8px 0 !important; }

/* --- daisyUI-style buttons: compound selectors so the design beats the older gradient rules --- */
.tw-dw-btn.tw-dw-btn-outline, .tw-dw-btn.tw-dw-btn-neutral, .tw-dw-btn.tw-dw-btn-error,
.tw-dw-btn.tw-dw-btn-default, .tw-dw-btn.tw-dw-btn-danger {
    background-image: none !important;
    background-color: var(--bt-surface) !important;
    border-color: var(--bt-accent) !important;
    color: var(--bt-accent) !important;
}
.tw-dw-btn.tw-dw-btn-primary:not(.tw-dw-btn-outline), .tw-dw-btn.tw-dw-btn-info:not(.tw-dw-btn-outline),
.tw-dw-btn.tw-dw-btn-success:not(.tw-dw-btn-outline), .tw-dw-btn.tw-dw-btn-warning:not(.tw-dw-btn-outline),
.tw-dw-btn.tw-dw-btn-accent:not(.tw-dw-btn-outline), .tw-dw-btn.tw-dw-btn-secondary:not(.tw-dw-btn-outline) {
    background-image: none !important;
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}
.tw-dw-btn.tw-dw-btn-outline:hover, .tw-dw-btn.tw-dw-btn-neutral:hover,
.tw-dw-btn.tw-dw-btn-error:hover, .tw-dw-btn.tw-dw-btn-default:hover,
.tw-dw-btn.tw-dw-btn-danger:hover {
    background-color: var(--bt-accent-tint) !important;
    border-color: var(--bt-accent-hover) !important;
    color: var(--bt-accent-hover) !important;
}
.tw-dw-btn.tw-dw-btn-primary:hover:not(.tw-dw-btn-outline), .tw-dw-btn.tw-dw-btn-info:hover:not(.tw-dw-btn-outline),
.tw-dw-btn.tw-dw-btn-success:hover:not(.tw-dw-btn-outline), .tw-dw-btn.tw-dw-btn-warning:hover:not(.tw-dw-btn-outline) {
    background-color: var(--bt-accent-hover) !important;
    border-color: var(--bt-accent-hover) !important;
    color: #fff !important;
}

/* Header icon buttons keep their dark-header design (they are icon-only and sit on a dark bar). */
.btn.header-icon-btn, a.header-icon-btn, button.header-icon-btn {
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, .08) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    color: rgba(255, 255, 255, .85) !important;
    border-radius: 8px !important;
}
.btn.header-icon-btn:hover, a.header-icon-btn:hover, button.header-icon-btn:hover {
    background-color: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}

/* ==========================================================================
   UNIFIED SIZE. Every button in the modules has the same size. The xs, sm and
   lg classes are kept for compatibility, but they render at the standard size.
   ========================================================================== */
.btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger,
.btn-brand, .btn-flat, .btn-modal, .btn-box-tool, .btn-round, .btn-link, .btn-outline,
.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light, .btn-white,
.btn-plus, .btn-minus, .btn-remove, .btn-view, .btn-reset, .btn-big, .btn-ai,
.btn-ai-generate, .btn-suggest, .btn-add-schedule, .btn-export-download,
.btn-modal-coupon, .btn--primary, .btn--secondary, .btn--success, .btn--info,
.btn--warning, .btn--danger, .btn--sm, .btn--icon, .btn-xs, .btn-sm, .btn-lg, .btn-xl,
[class*="tw-dw-btn-"], .tw-dw-btn {
    min-height: 34px !important;
    height: auto !important;
    padding: 7.5px 14px !important;
    font-size: 13px !important;
    border-radius: 4.8px !important;
    line-height: 1.4 !important;
}
.btn-icon, .btn-icon.btn-sm, .btn-icon.btn-lg {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
}

/* ==========================================================================
   Standard button height. All buttons are 35px tall, including the gradient
   "Add" buttons and the flat/export buttons that were 34px or 41px.
   ========================================================================== */
.btn, [class*="tw-dw-btn-"], .tw-dw-btn, .btn-flat, .btn-default, .btn-primary,
.btn-success, .btn-info, .btn-warning, .btn-danger {
    min-height: 35px !important;
}
.tw-dw-btn[class*="tw-bg-gradient-"], .tw-dw-btn.tw-bg-gradient-to-r {
    height: 35px !important;
    min-height: 35px !important;
    padding: 7.5px 14px !important;
    font-size: 13px !important;
    border-radius: 4.8px !important;
}
/* Home dashboard and form toggles that are buttons: same size and radius */
.so-toggle-btn, .dash-btn, .mp-toggle-btn, .so-view-btn {
    min-height: 35px !important;
    height: auto !important;
    padding: 7.5px 14px !important;
    font-size: 13px !important;
    border-radius: 4.8px !important;
}

/* ==========================================================================
   Bootstrap 3 primary blue (#337ab7, #428bca, #3c8dbc) in menus, pills and
   labels becomes the accent (settings menu, nav pills, primary labels).
   ========================================================================== */
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus,
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus,
.label-primary, .badge-primary, .panel-primary > .panel-heading {
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}
.list-group-item.active > .badge, .nav-pills > li.active > a > .badge {
    color: var(--bt-accent) !important;
    background-color: #fff !important;
}

/* ==========================================================================
   Remaining old colours found in the page scan (phase 2 final pass).
   ========================================================================== */
/* shell: top bar, sidebar brand and avatar use the deep accent, not the old slate */
.app-header, .sidebar-brand, .sidebar-user-avatar {
    background-image: linear-gradient(135deg, var(--bt-accent-hover), #4f3f63) !important;
}
/* module title text and small labels that used the old brand slate */
.tw-truncate {
    color: var(--bt-text-strong) !important;
}
/* home summary column accents (Tailwind blue and indigo) */
[class*="sc-col-line"] {
    background-color: var(--bt-accent) !important;
}
[class*="sc-col-title"] {
    color: var(--bt-accent) !important;
}
/* "More" toggles that used the old slate */
.mp-toggle-btn.active {
    background-color: var(--bt-accent) !important;
    color: #fff !important;
}
/* AdminLTE grey total rows */
.bg-gray, .bg-light-gray {
    background-color: var(--bt-surface-2) !important;
    color: var(--bt-text-strong) !important;
}
.dash-btn { height: 35px !important; }

/* Back-to-top control: hidden until the script fades it in; accent circle when shown. */
.scrolltop { display: none; position: fixed !important; right: 20px !important; bottom: 20px !important; margin: 0 !important; width: auto !important; z-index: 1030; }
.scrolltop .scroll {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; padding: 0; margin: 0;
    background: var(--bt-accent) !important; color: #fff; box-shadow: var(--shadow-md);
}
.scrolltop .scroll .fas { font-size: 16px; margin: 0; }

/* Print-only receipt section stays hidden on screen and prints normally. */
.print_section { display: none !important; }
@media print { .print_section { display: block !important; } }

/* Plan badge in the purple top bar: a light fill so it stays visible. */
.app-header .header-badge.warn {
    background-color: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .45) !important;
    color: #fff !important;
}
.so-view-btn.active {
    background-color: var(--bt-accent) !important;
    color: #fff !important;
}

/* ==========================================================================
   STATUS PALETTE (pastel, Aquiry values). Used for status badges, labels and
   feedback. Green = success, red = danger, yellow = warning, teal = info.
   Text on these tints stays dark for contrast; the pastel colours carry the
   status on the tint and icon.
   ========================================================================== */
:root {
    --st-green: #4ec5ad;   --st-green-tint: rgba(78, 197, 173, .18);   --st-green-text: #0f6b58;
    --st-red: #fd6161;     --st-red-tint: rgba(253, 97, 97, .16);      --st-red-text: #a52a2a;
    --st-yellow: #f4d078;  --st-yellow-tint: rgba(244, 208, 120, .30); --st-yellow-text: #7a5a00;
    --st-teal: #41c3a9;    --st-teal-tint: rgba(65, 195, 169, .18);    --st-teal-text: #0f6b58;
}
/* status badges and labels */
.label-success, .bg-green, .bg-light-green, .tw-bg-green-, .tw-bg-emerald-,
[class*="tw-bg-green-"], [class*="tw-bg-emerald-"] {
    background-color: var(--st-green-tint) !important;
    color: var(--st-green-text) !important;
    border: 1px solid rgba(78, 197, 173, .35) !important;
}
.label-danger, .bg-red, .bg-maroon, .tw-bg-red-, .tw-bg-rose-, [class*="tw-bg-red-"], [class*="tw-bg-rose-"] {
    background-color: var(--st-red-tint) !important;
    color: var(--st-red-text) !important;
    border: 1px solid rgba(253, 97, 97, .35) !important;
}
.label-warning, .bg-yellow, .bg-orange, .tw-bg-yellow-, .tw-bg-amber-, .tw-bg-orange-,
[class*="tw-bg-yellow-"], [class*="tw-bg-amber-"], [class*="tw-bg-orange-"] {
    background-color: var(--st-yellow-tint) !important;
    color: var(--st-yellow-text) !important;
    border: 1px solid rgba(244, 208, 120, .6) !important;
}
.label-info, .bg-aqua, .bg-teal, .bg-cyan, .tw-bg-teal-, .tw-bg-cyan-, .bg-info,
[class*="tw-bg-teal-"], [class*="tw-bg-cyan-"] {
    background-color: var(--st-teal-tint) !important;
    color: var(--st-teal-text) !important;
    border: 1px solid rgba(65, 195, 169, .35) !important;
}
/* status text */
.text-success, .text-green, [class*="tw-text-green-"], [class*="tw-text-emerald-"] { color: var(--st-green-text) !important; }
.text-danger, .text-red, [class*="tw-text-red-"], [class*="tw-text-rose-"] { color: var(--st-red-text) !important; }
.text-warning, .text-yellow, [class*="tw-text-yellow-"], [class*="tw-text-amber-"] { color: var(--st-yellow-text) !important; }
.text-info, [class*="tw-text-teal-"], [class*="tw-text-cyan-"], [class*="tw-text-sky-"] { color: var(--st-teal-text) !important; }
/* feedback alerts */
.alert-success { background: var(--st-green-tint) !important; border-color: rgba(78, 197, 173, .45) !important; color: var(--st-green-text) !important; }
.alert-danger, .alert-error { background: var(--st-red-tint) !important; border-color: rgba(253, 97, 97, .45) !important; color: var(--st-red-text) !important; }
.alert-warning { background: var(--st-yellow-tint) !important; border-color: rgba(244, 208, 120, .7) !important; color: var(--st-yellow-text) !important; }
.alert-info { background: var(--st-teal-tint) !important; border-color: rgba(65, 195, 169, .45) !important; color: var(--st-teal-text) !important; }

/* ==========================================================================
   TOP BAR: full dark mode.
   ========================================================================== */
.main-header .navbar-brand, .main-header a, .main-header .navbar-nav > li > a, .app-header a,
.app-header .navbar-brand, .app-header .text-muted { color: #e8eaf3 !important; }
.main-header .btn, .app-header .btn, .header-icon-btn {
    background-color: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: #e8eaf3 !important;
}
.main-header .btn:hover, .app-header .btn:hover, .header-icon-btn:hover {
    background-color: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}

/* ==========================================================================
   SIDEBAR: each module has its own palette colour, at 30% opacity behind its name.
   ========================================================================== */
#app-sidebar a[href*="/accounting"]:not([href*="indian"]) { background-color: rgb(117, 136, 222) !important; }
#app-sidebar a[href*="/indian-accounting"], #app-sidebar a[href*="indianaccounting"] { background-color: rgb(65, 195, 169) !important; }
#app-sidebar a[href*="/repair"] { background-color: rgb(244, 208, 120) !important; }
#app-sidebar a[href*="/crm"] { background-color: rgb(221, 113, 162) !important; }
#app-sidebar a[href*="/whatsapp"] { background-color: rgb(78, 197, 173) !important; }
#app-sidebar a[href*="/business-intelligence"] { background-color: rgb(82, 136, 175) !important; }
#app-sidebar a[href*="/advanced-reports"] { background-color: rgb(164, 123, 200) !important; }
#app-sidebar a[href*="/affiliate"] { background-color: rgb(253, 97, 97) !important; }
#app-sidebar a[href*="/promotion"], #app-sidebar a[href*="/offerandpromotion"] { background-color: rgb(241, 115, 79) !important; }
#app-sidebar a[href*="/essentials"] { background-color: rgb(181, 214, 107) !important; }
#app-sidebar a[href*="/hms"] { background-color: rgb(127, 168, 201) !important; }
#app-sidebar a[href*="/buyback"] { background-color: rgb(224, 169, 109) !important; }
#app-sidebar a[href*="/manufacturing"] { background-color: rgb(102, 187, 106) !important; }
#app-sidebar a[href*="/superadmin"] { background-color: rgb(143, 146, 170) !important; }
#app-sidebar a[href*="/marketing-studio"] { background-color: rgb(255, 183, 77) !important; }
#app-sidebar a[href*="/ai-connect"] { background-color: rgb(120, 144, 156) !important; }
#app-sidebar a[href*="/asset"] { background-color: rgb(149, 117, 205) !important; }
#app-sidebar a[href*="/connector"] { background-color: rgb(38, 166, 154) !important; }
#app-sidebar a[class*="drop_down"], #app-sidebar a[href*="/stock-"] { background-color: transparent !important; }
#app-sidebar a[href*="/"] { color: #1f2233 !important; }

/* Top bar (.app-header) is painted with a gradient in the header partial. Full dark mode here. */
.app-header {
    background: #1e2233 !important;
    background-image: none !important;
    color: #e8eaf3 !important;
    border-bottom: 1px solid #2b3046 !important;
}

/* ==========================================================================
   WhatsApp module buttons (wa-btn, fmt-btn, media-filter-btn) use the unified
   button design: same size, radius and type as every other button. Solid for
   primary actions, outline for secondary and destructive, icon buttons square.
   The purple hero keeps white and translucent colours (same size).
   ========================================================================== */
.wa-btn, .fmt-btn, .media-filter-btn, .wa-btn--sm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 35px !important;
    padding: 7.5px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border: 1px solid transparent !important;
    border-radius: 4.8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075) !important;
    background-image: none !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.wa-btn--primary, .wa-btn--success, .wa-btn--info, .wa-btn--warning {
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}
.wa-btn--primary:hover, .wa-btn--success:hover, .wa-btn--info:hover, .wa-btn--warning:hover {
    background-color: var(--bt-accent-hover) !important;
    border-color: var(--bt-accent-hover) !important;
}
.wa-btn--secondary, .wa-btn--danger {
    background-color: var(--bt-surface) !important;
    border-color: var(--bt-accent) !important;
    color: var(--bt-accent) !important;
}
.wa-btn--secondary:hover, .wa-btn--danger:hover {
    background-color: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
}
.wa-btn--icon { width: 35px !important; min-width: 35px !important; padding: 0 !important; }
.wa-btn[disabled], .wa-btn.is-disabled { opacity: .65 !important; pointer-events: none !important; }
/* purple hero: white and translucent buttons, same size */
.wa-hero .wa-btn--primary, .wa-hero .wa-btn--secondary, .wa-hero .wa-btn--success,
.wa-hero .wa-btn--info, .wa-hero .wa-btn--warning, .wa-hero .wa-btn--danger,
.wa-hero .wa-btn {
    background-color: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    color: #fff !important;
}
.wa-hero .wa-btn--primary { background-color: #fff !important; color: var(--bt-accent) !important; border-color: #fff !important; }
.wa-hero .wa-btn--primary:hover { background-color: #f2f2f4 !important; }

/* ==========================================================================
   Sidebar header (logo and business name): dark.
   ========================================================================== */
#app-sidebar .sidebar-brand, .sidebar-brand {
    background: #1e2233 !important;
    background-image: none !important;
    color: #fff !important;
}
#app-sidebar .sidebar-brand .sidebar-brand-name, .sidebar-brand-name { color: #fff !important; }

/* ==========================================================================
   Settings menu (business settings and similar): icon and label are separate.
   ========================================================================== */
.pos-tab-menu .list-group-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.pos-tab-menu .list-group-item > i,
.pos-tab-menu .list-group-item > svg {
    width: 18px !important;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
    margin: 0 !important;
}

/* ==========================================================================
   Checkboxes and radio buttons: accent, one style. Native controls use
   accent-color. iCheck skins (blue square and flat) are restyled with a
   white check or dot drawn in CSS.
   ========================================================================== */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--bt-accent);
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
}
.icheckbox_square-blue, .icheckbox_flat-blue, .iradio_square-blue, .iradio_flat-blue {
    position: relative !important;
    display: inline-block;
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px;
    vertical-align: middle;
    background: var(--bt-surface) !important;
    background-image: none !important;
    border: 1px solid var(--bt-border-strong) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.iradio_square-blue, .iradio_flat-blue { border-radius: 50% !important; }
.icheckbox_square-blue.checked, .icheckbox_flat-blue.checked,
.iradio_square-blue.checked, .iradio_flat-blue.checked {
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    background-image: none !important;
}
.icheckbox_square-blue.checked::after, .icheckbox_flat-blue.checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.iradio_square-blue.checked::after, .iradio_flat-blue.checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
.icheckbox_square-blue.disabled, .iradio_square-blue.disabled,
.icheckbox_flat-blue.disabled, .iradio_flat-blue.disabled { opacity: .5 !important; cursor: not-allowed; }
.icheckbox_square-blue > input, .iradio_square-blue > input,
.icheckbox_flat-blue > input, .iradio_flat-blue > input,
.iCheck-helper { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; margin: 0 !important; opacity: 0; }

/* ==========================================================================
   Quick-add "+" controls: accent, same as the buttons.
   ========================================================================== */
.fa-plus-circle, .fa-plus-circle.text-primary, .text-primary { color: var(--bt-accent) !important; }
.size-btn-plus, .size-btn {
    color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
}

/* ==========================================================================
   POS layout: restored from the original app.css (the action bar is fixed to
   the bottom, the cart and product list have their own heights, which the POS
   script measures). Without these the product table collapsed to a few rows.
   ========================================================================== */
.pos-form-actions {
    height: auto;
    padding-top: 12px;
    padding-bottom: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}
.pos_product_div {
    height: 40vh !important;
    overflow-y: auto;
}
#product_list_body {
    max-height: calc(100vh - 260px);
    overflow-y: scroll;
    overflow-x: hidden;
}
@media only screen and (max-width: 600px) {
    .pos-form-actions { position: absolute; }
}
@media (max-width: 1024px) {
    .pos_form_totals { margin-bottom: 40px; }
}

/* ==========================================================================
   Search suggestions (jQuery UI autocomplete): the highlighted item uses the
   accent, not the default jQuery UI blue (#007fff).
   ========================================================================== */
.ui-autocomplete .ui-state-active, .ui-autocomplete .ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active, .ui-menu .ui-state-focus,
.ui-menu-item-wrapper.ui-state-active, .ui-state-hover, .ui-state-active {
    background: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}

/* ==========================================================================
   AdminLTE status colours not covered earlier (shipping statuses such as
   "shipped" = bg-navy, and other label colours). Same pastel status palette.
   ========================================================================== */
.bg-navy, .bg-blue, .bg-light-blue, .bg-teal, .bg-info, .bg-aqua, .bg-cyan {
    background-color: var(--st-teal-tint) !important;
    color: var(--st-teal-text) !important;
    border: 1px solid rgba(65, 195, 169, .35) !important;
}
.bg-olive, .bg-lime, .bg-light-green {
    background-color: var(--st-green-tint) !important;
    color: var(--st-green-text) !important;
    border: 1px solid rgba(78, 197, 173, .35) !important;
}
.bg-orange, .bg-yellow, .bg-amber {
    background-color: var(--st-yellow-tint) !important;
    color: var(--st-yellow-text) !important;
    border: 1px solid rgba(244, 208, 120, .6) !important;
}
.bg-maroon, .bg-red, .bg-danger {
    background-color: var(--st-red-tint) !important;
    color: var(--st-red-text) !important;
    border: 1px solid rgba(253, 97, 97, .35) !important;
}
.bg-purple, .bg-fuchsia, .bg-violet {
    background-color: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
    border: 1px solid var(--bt-accent-tint-strong) !important;
}

/* ==========================================================================
   POS top toolbar: buttons sit together on the right, with a small gap.
   The old wide spacing came from justify-between, gap-4 and the m-5/m-6 margins.
   ========================================================================== */
.pos-header .tw-justify-between { justify-content: flex-end !important; }
.pos-header .tw-gap-4 { gap: 6px !important; }
.pos-header .md\:tw-w-2\/3 { flex: 1 1 auto !important; width: auto !important; }
.pos-header .pull-right { float: none !important; margin: 0 !important; }
.pos-header .m-5, .pos-header .m-6, .pos-header .mt-10, .pos-header .btn-xs.m-5,
.pos-header .m-8 { margin: 0 !important; }
.pos-header .tw-dw-btn { min-height: 35px !important; }
.pos-header [class*="tw-w-"] { flex-shrink: 0; }
.pos-header button.tw-rounded-md, .pos-header a.tw-rounded-md {
    align-self: center !important;
    height: 35px !important;
    min-height: 35px !important;
    width: auto !important;
    min-width: 35px !important;
    padding: 0 8px !important;
    border-width: 1px !important;
}

/* Buttons that carry an AdminLTE colour class (for example bg-maroon on Save)
   are buttons, so they use the unified accent button, not a status tint. */
.btn.bg-red, .btn.bg-green, .btn.bg-yellow, .btn.bg-maroon, .btn.bg-aqua, .btn.bg-navy,
.btn.bg-blue, .btn.bg-orange, .btn.bg-teal, .btn.bg-info, .btn.bg-purple, .btn.bg-olive,
.btn.bg-lime, .btn.bg-light-green, .btn.bg-light-blue,
.tw-dw-btn.bg-red, .tw-dw-btn.bg-green, .tw-dw-btn.bg-yellow, .tw-dw-btn.bg-maroon,
.tw-dw-btn.bg-aqua, .tw-dw-btn.bg-navy, .tw-dw-btn.bg-blue, .tw-dw-btn.bg-orange,
.tw-dw-btn.bg-teal, .tw-dw-btn.bg-info, .tw-dw-btn.bg-purple {
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}

/* ==========================================================================
   SELECT2 dropdowns (POS location, customer, price group, service staff, and
   all other select2 fields): accent for focus, highlight and selected options.
   ========================================================================== */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--bt-border-strong) !important;
    border-radius: 4.8px !important;
    background-color: var(--bt-surface) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--bt-accent) !important;
    box-shadow: 0 0 0 3px var(--bt-accent-tint-strong) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bt-text-strong) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--bt-muted) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--bt-accent) transparent !important;
}
.select2-dropdown {
    border: 1px solid var(--bt-accent) !important;
    border-radius: 6px !important;
    box-shadow: var(--shadow-md) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bt-border-strong) !important;
    border-radius: 4.8px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--bt-accent) !important;
    outline: none !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"]:hover,
.select2-results__option--highlighted {
    background-color: var(--bt-accent) !important;
    color: #fff !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bt-accent-tint) !important;
    border: 1px solid var(--bt-accent-tint-strong) !important;
    color: var(--bt-accent-hover) !important;
    border-radius: 4px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--bt-accent-hover) !important;
}

/* ==========================================================================
   DATE PICKERS (bootstrap-datepicker, datetimepicker, daterangepicker): accent
   for the selected, today and hovered days, instead of the default blue.
   ========================================================================== */
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled, .datepicker table tr td.selected,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover,
.datepicker-days td.active, .datepicker-days td.active:hover,
.bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td.active:hover,
.bootstrap-datetimepicker-widget td span.active,
.daterangepicker td.active, .daterangepicker td.active:hover,
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover,
.daterangepicker .btn-primary, .daterangepicker .applyBtn,
.datepicker table tr td.day:hover, .datepicker-days td:hover {
    background-color: var(--bt-accent) !important;
    background-image: none !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
    text-shadow: none !important;
}
.datepicker table tr td.today, .datepicker-days td.today,
.bootstrap-datetimepicker-widget td.today, .daterangepicker td.today {
    border-color: var(--bt-accent) !important;
    color: var(--bt-accent-hover) !important;
}
.daterangepicker td.in-range, .daterangepicker td.in-range:hover {
    background-color: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
}
.daterangepicker .cancelBtn, .daterangepicker .btn-default {
    background: var(--bt-surface) !important;
    border: 1px solid var(--bt-accent) !important;
    color: var(--bt-accent) !important;
}

/* ==========================================================================
   Dropdown, menu and picker states from vendor.css (Bootstrap 3, jQuery UI,
   datepicker, daterangepicker, DataTables). They used the default blues
   (#337ab7, #007fff, #0044cc, #0088cc). They use the accent now.
   ========================================================================== */
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover,
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    background-color: var(--bt-accent) !important;
    background-image: none !important;
    color: #fff !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: var(--bt-accent-tint) !important;
    color: var(--bt-accent-hover) !important;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    background-color: var(--bt-accent) !important;
    color: #fff !important;
}
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover,
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled:hover,
.datepicker-days td.active, .datepicker-days td.active:hover,
.daterangepicker .ranges li.active, .daterangepicker .ranges li.active:hover,
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active, .bootstrap-datetimepicker-widget table td span.active:hover,
div.dt-autofill-select,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before,
table.dataTable.dtr-column > tbody > tr > td.control::before,
table.dataTable.dtr-column > tbody > tr > th.control::before {
    background-color: var(--bt-accent) !important;
    background-image: none !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}
.daterangepicker .ranges li:hover { background-color: var(--bt-accent-tint) !important; color: var(--bt-accent-hover) !important; }
.btn-primary.disabled, .btn-primary[disabled], .btn-primary.disabled:hover, .btn-primary.disabled:focus {
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
}

/* ==========================================================================
   Row action buttons: one colour per action, from the Aquiry palette, in darker
   tones so the text and borders pass contrast on white.
     view   = Aquiry blue     (#3d6a8c)
     edit   = Aquiry purple   (accent #7b5c96)
     print  = Aquiry indigo   (#4b5fc4)
     delete = Aquiry red      (#b83b3b)
     pdf    = Aquiry orange   (#c2612e)
   Dark fill with light text at rest, darker fill on hover. The tag is set by the script in
   layouts/partials/css.blade.php (data-bt-act).
   ========================================================================== */
[data-bt-act] { --act: #7b5c96; --act-hover: #6b5082; }
/* One colour per action (white text on each): View blue, Edit purple, Print indigo,
   Delete red, PDF orange. The Actions toggle keeps the accent. */
[data-bt-act="view"]    { --act: #3d6a8c; --act-hover: #2f5573; }
[data-bt-act="edit"]    { --act: #7b5c96; --act-hover: #6b5082; }
[data-bt-act="print"]   { --act: #4b5fc4; --act-hover: #3d4fa8; }
[data-bt-act="delete"]  { --act: #b83b3b; --act-hover: #9a2f2f; }
[data-bt-act="pdf"]     { --act: #c2612e; --act-hover: #a84f23; }
[data-bt-act="actions"] { --act: #7b5c96; --act-hover: #6b5082; }

html body [data-bt-act][data-bt-act]:not(.dropdown-menu > li > a) {
    background-color: var(--act) !important;
    background-image: none !important;
    border-color: var(--act) !important;
    color: #fff !important;
    text-decoration: none !important;
}
html body [data-bt-act][data-bt-act]:not(.dropdown-menu > li > a):hover,
html body [data-bt-act][data-bt-act]:not(.dropdown-menu > li > a):focus {
    background-color: var(--act-hover) !important;
    border-color: var(--act-hover) !important;
    color: #fff !important;
}
.dropdown-menu > li > a[data-bt-act] { color: var(--act) !important; font-weight: 600; }
.dropdown-menu > li > a[data-bt-act]:hover, .dropdown-menu > li > a[data-bt-act]:focus {
    background-color: var(--act) !important;
    color: #fff !important;
}

/* ==========================================================================
   Index-page toolbar (Export All, Export CSV, Export Excel, Column visibility,
   Print, Export PDF): one style for all six. Dark purple at 20% opacity with
   dark text. Row action buttons keep their own colours.
   ========================================================================== */
html body .dt-buttons :is(a, button, .btn, .tw-dw-btn),
html body .dt-buttons [data-bt-act][data-bt-act][data-bt-act],
html body .btn-export-download {
    background-color: rgba(123, 92, 150, 0.2) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: var(--bt-text-strong) !important;
    box-shadow: none !important;
}
html body .dt-buttons :is(a, button, .btn, .tw-dw-btn):hover,
html body .dt-buttons [data-bt-act][data-bt-act][data-bt-act]:hover,
html body .btn-export-download:hover {
    background-color: rgba(123, 92, 150, 0.3) !important;
    color: var(--bt-text-strong) !important;
}

/* ==========================================================================
   Summary cards (reference: Aquiry dashboard "Total Sales" card).
   White card, 4.8px radius, light shadow. Icon in a tinted circle with a
   coloured ring. Title, value and label in dark text. A delta line (for example
   "+8.5% vs last week") shows only where the figures provide it.
   One Aquiry colour per card: the colour sets the icon and ring.
   ========================================================================== */
.sc-card, .stock_transfer_card {
    --kc: 123, 92, 150;
    --kh: #7b5c96;
    background: #fff !important;
    border: 1px solid var(--bt-border) !important;
    border-left: 1px solid var(--bt-border) !important;
    border-radius: 4.8px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
    color: var(--bt-text-strong) !important;
}
.sc-col-grid > .sc-card:nth-child(1), .stock_transfer_cards > .stock_transfer_card:nth-child(5n+1) { --kc: 123, 92, 150; --kh: #7b5c96; }
.sc-col-grid > .sc-card:nth-child(2), .stock_transfer_cards > .stock_transfer_card:nth-child(5n+2) { --kc: 65, 195, 169; --kh: #41c3a9; }
.sc-col-grid > .sc-card:nth-child(3), .stock_transfer_cards > .stock_transfer_card:nth-child(5n+3) { --kc: 253, 97, 97; --kh: #fd6161; }
.sc-col-grid > .sc-card:nth-child(4), .stock_transfer_cards > .stock_transfer_card:nth-child(5n+4) { --kc: 244, 208, 120; --kh: #f4d078; }
.sc-split > .sc-col:nth-child(2) .sc-col-grid > .sc-card:nth-child(1) { --kc: 75, 95, 196; --kh: #4b5fc4; }
.sc-split > .sc-col:nth-child(2) .sc-col-grid > .sc-card:nth-child(2) { --kc: 194, 97, 46; --kh: #c2612e; }
.sc-split > .sc-col:nth-child(2) .sc-col-grid > .sc-card:nth-child(3) { --kc: 65, 195, 169; --kh: #41c3a9; }
.sc-split > .sc-col:nth-child(2) .sc-col-grid > .sc-card:nth-child(4) { --kc: 253, 97, 97; --kh: #fd6161; }
.stock_transfer_cards > .stock_transfer_card:nth-child(5n+5) { --kc: 75, 95, 196; --kh: #4b5fc4; }

/* Home cards */
.sc-card { padding: 16px 18px !important; }
.sc-card .sc-top { gap: 12px !important; margin-bottom: 10px !important; align-items: center; }
.sc-card .sc-label { font-size: 13px !important; font-weight: 600 !important; color: var(--bt-text-strong) !important; opacity: 1; }
.sc-card .sc-value { font-size: 22px !important; font-weight: 700 !important; color: var(--bt-text-strong) !important; }
.sc-card .sc-info { color: var(--bt-muted) !important; }
.sc-chip {
    width: 40px !important; height: 40px !important; border-radius: 50% !important;
    background: rgba(var(--kc), 0.15) !important; color: var(--kh) !important;
    box-shadow: 0 0 0 3px rgba(var(--kc), 0.3);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.sc-chip i { font-size: 15px; }

/* Report summary cards */
.stock_transfer_card > .top { background: transparent !important; border-left: 0 !important; color: var(--bt-text-strong) !important; }
.stock_transfer_card > .top > .money h1 { color: var(--bt-text-strong) !important; font-weight: 700 !important; }
.stock_transfer_card > .top > .money span { color: var(--bt-muted) !important; font-weight: 600 !important; font-size: 13px !important; }
.stock_transfer_card > .top > .icon {
    background: rgba(var(--kc), 0.15) !important; color: var(--kh) !important;
    width: 40px !important; height: 40px !important; border-radius: 50% !important; padding: 9px !important; flex: none;
    box-shadow: 0 0 0 3px rgba(var(--kc), 0.3);
}
.stock_transfer_card > .bottom { background: transparent !important; border-top: 1px dashed var(--bt-border) !important; color: var(--bt-muted) !important; }

/* Delta line: teal for up, red for down. Only rendered when the view supplies it. */
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #0f6b58; }
.delta.down { color: #a52a2a; }

/* ==========================================================================
   Index and list pages (reference: Aquiry customer and invoice lists).
   - Boxes: white card, 8px radius, hairline border, light shadow.
   - Box header: title left, tools right, hairline divider beneath.
   - Tables: light grey header row, semibold muted text, hairline row dividers,
     soft row hover.
   - Status pills: pastel tint with coloured text.
   ========================================================================== */
.box {
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    border-top: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(31, 34, 51, 0.04) !important;
}
.box-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid #eef0f3 !important;
}
.box-header .box-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bt-text-strong) !important;
    margin: 0 !important;
}
.box-body { padding: 16px 20px !important; }

table.dataTable thead th,
table.dataTable thead td,
.table > thead > tr > th {
    background: #f6f8fb !important;
    color: #4a4f66 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
    padding: 12px 14px !important;
    white-space: nowrap;
}
table.dataTable tbody td,
.table > tbody > tr > td {
    font-size: 13px !important;
    color: var(--bt-text-strong) !important;
    padding: 12px 14px !important;
    border-top: 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
    vertical-align: middle !important;
}
table.dataTable tbody tr:hover > td { background: #fafbfd !important; }
table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable th, table.dataTable td,
.table > thead > tr > th, .table > tbody > tr > td {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* pastel pills for status labels (AdminLTE label/badge classes used by the views) */
.label, .badge, .payment-status-label, .stock_transfer_status, .payment-status {
    border-radius: 4.8px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
}
/* DataTables scroll layout: the body table keeps a hidden copy of the header row for column widths. Keep it zero-height. */
.dataTables_scrollBody > table > thead > tr > th,
.dataTables_scrollBody > table > thead > tr > td {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}

/* Report summary cards: icon chip in the card colour. */
.stock_transfer_card > .top > .icon i { font-size: 15px; }
/* Stock report: current stock column in bold accent. The column is the 10th in the table. */
#stock_report_table_container table thead th:nth-child(10),
#stock_report_table_container table tbody td:nth-child(10) {
    color: var(--bt-accent) !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   Sell view (sale detail modal, sale_pos/show.blade.php): modern layout.
   White card with a hairline border; header with divider; info blocks as light
   cards; tables in the list style; totals on a light accent tint; footer
   buttons in the uniform accent fill.
   ========================================================================== */
:is(.sell-view-modal, .bt-view-modal) .modal-content {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 34, 51, 0.12);
    overflow: hidden;
    color: var(--bt-text-strong);
}
:is(.sell-view-modal, .bt-view-modal) .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
}
:is(.sell-view-modal, .bt-view-modal) .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bt-text-strong);
}
:is(.sell-view-modal, .bt-view-modal) .modal-body {
    padding: 20px 22px;
    font-size: 13px;
    line-height: 1.55;
}
:is(.sell-view-modal, .bt-view-modal).modal-dialog {
    width: min(1140px, 94vw) !important;
    max-width: none !important;
}
:is(.sell-view-modal, .bt-view-modal) .modal-body > .row:nth-of-type(2) > [class*="col-sm-"] {
    background: #f6f8fb;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
:is(.sell-view-modal, .bt-view-modal) .modal-body table {
    width: 100%;
    margin-bottom: 14px;
    border: 0;
}
:is(.sell-view-modal, .bt-view-modal) .modal-body table th {
    background: #f6f8fb;
    color: #4a4f66;
    font-size: 12.5px;
    font-weight: 600;
    border: 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
    padding: 10px 12px;
}
:is(.sell-view-modal, .bt-view-modal) .modal-body table td {
    border: 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
    padding: 10px 12px;
}
:is(.sell-view-modal, .bt-view-modal) .modal-body table.bg-gray {
    background: rgba(123, 92, 150, 0.12) !important;
    border-radius: 8px;
}
:is(.sell-view-modal, .bt-view-modal) .modal-body table.bg-gray td,
:is(.sell-view-modal, .bt-view-modal) .modal-body table.bg-gray th {
    background: transparent !important;
    border-bottom: 0 !important;
}
:is(.sell-view-modal, .bt-view-modal) .modal-footer {
    padding: 14px 22px;
    border-top: 1px solid #eef0f3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
:is(.sell-view-modal, .bt-view-modal) .modal-footer a.tw-dw-btn,
:is(.sell-view-modal, .bt-view-modal) .modal-footer button.tw-dw-btn {
    background-color: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
    background-image: none !important;
}
:is(.sell-view-modal, .bt-view-modal) .modal-footer a.tw-dw-btn:hover,
:is(.sell-view-modal, .bt-view-modal) .modal-footer button.tw-dw-btn:hover {
    background-color: var(--bt-accent-hover) !important;
    border-color: var(--bt-accent-hover) !important;
}
:is(.sell-view-modal, .bt-view-modal) .close { color: var(--bt-muted); opacity: 1; }
:is(.sell-view-modal, .bt-view-modal) .modal-body > .row:nth-of-type(2) { display: flex; flex-wrap: wrap; align-items: stretch; }
:is(.sell-view-modal, .bt-view-modal) .modal-body > .row:nth-of-type(2) > [class*="col-sm-"] { float: none; display: flex; flex-direction: column; }

/* ==========================================================================
   Full-page record views (bt-view-page): expense, contact and product views.
   Same language as the sell view modal: info blocks as white cards, list-style
   tables, totals on the accent tint.
   ========================================================================== */
.bt-view-page > .row:first-of-type > [class*="col-"] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 13px;
    color: var(--bt-text-strong);
}
.bt-view-page table {
    width: 100%;
    border: 0;
    margin-bottom: 14px;
}
.bt-view-page table th {
    background: #f6f8fb;
    color: #4a4f66;
    font-size: 12.5px;
    font-weight: 600;
    border: 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
    padding: 10px 12px;
}
.bt-view-page table td {
    border: 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
    padding: 10px 12px;
    font-size: 13px;
}
.bt-view-page table.bg-gray {
    background: rgba(123, 92, 150, 0.12) !important;
    border-radius: 8px;
    overflow: hidden;
}
.bt-view-page table.bg-gray th, .bt-view-page table.bg-gray td {
    background: transparent !important;
    border-bottom: 0 !important;
}
.bt-view-page .box {
    box-shadow: none;
}
.content-header > h1 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--bt-text-strong) !important;
}
.content-header > h1 > small {
    font-size: 13px;
    font-weight: 500;
    color: var(--bt-muted);
    margin-top: 6px;
}
.bt-view-page > .row:first-of-type { display: flex; flex-wrap: wrap; align-items: stretch; }
.bt-view-page > .row:first-of-type > [class*="col-"] { float: none; display: flex; flex-direction: column; }

/* Sell list: dates stay on one line */
#sell_table td:nth-child(2), #sell_table th:nth-child(2) { white-space: nowrap; }
/* Index toolbar: page-size selector and export buttons sit side by side */
.dataTables_wrapper .dataTables_length { display: inline-block; margin-right: 24px; }
.dataTables_wrapper .dataTables_length label { white-space: nowrap; margin: 0; }
.dataTables_wrapper .dt-buttons { float: none !important; display: inline-block; margin: 0 0 0 8px !important; }

/* ==========================================================================
   Contact ledger (formats 1, 2 and 3). The layout of each format is unchanged;
   the look follows the Aquiry UI: white cards with hairline borders, one accent,
   pastel status colours, list-style tables.
   ========================================================================== */
.ledger-contact-header {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start;
    background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 16px 20px; margin-bottom: 14px;
}
.ledger-contact-info p { margin: 2px 0; font-size: 13px; color: var(--bt-muted); }
.ledger-contact-info p i { color: var(--bt-accent); }
.ledger-contact-header h3, .ledger-contact-header .ledger-contact-name {
    font-size: 17px; font-weight: 600; color: var(--bt-text-strong); margin: 0 0 4px;
}
.type-badge, .badge-type {
    display: inline-block; padding: 3px 10px; border-radius: 4.8px; font-size: 11.5px; font-weight: 600;
    background: rgba(123, 92, 150, 0.15); color: var(--bt-accent-hover);
}
.badge-type.supplier, .type-badge.supplier { background: rgba(65, 195, 169, 0.2); color: #0f6b58; }
.badge-type.both, .type-badge.both { background: rgba(244, 208, 120, 0.3); color: #7a5a00; }

.ledger-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px;
}
.ledger-stat-card {
    background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(31, 34, 51, 0.04);
}
.ledger-stat-card .stat-label { font-size: 12.5px; font-weight: 600; color: var(--bt-muted); margin-bottom: 6px; }
.ledger-stat-card .stat-value { font-size: 20px; font-weight: 700; color: var(--bt-text-strong); font-variant-numeric: tabular-nums; }
.ledger-stat-card .stat-date { font-size: 12px; color: var(--bt-muted); margin-top: 4px; }
.ledger-stat-card .stat-value.text-success { color: #0f6b58 !important; }
.ledger-stat-card .stat-value.text-brand { color: var(--bt-accent) !important; }

.ledger-statement-header {
    background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 14px 18px; margin-bottom: 14px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 13px; color: var(--bt-text-strong);
}
.ledger-statement-header .date-range { color: var(--bt-muted); }

.ledger-aging-bar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px;
}
.ledger-aging-item {
    background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px 14px; border-left: 4px solid var(--bt-border-strong);
}
.ledger-aging-item .aging-label { font-size: 12px; font-weight: 600; color: var(--bt-muted); }
.ledger-aging-item .aging-value { font-size: 17px; font-weight: 700; color: var(--bt-text-strong); font-variant-numeric: tabular-nums; }
.ledger-aging-item.aging-current { border-left-color: #b5bccb; }
.ledger-aging-item.aging-30 { border-left-color: #41c3a9; }
.ledger-aging-item.aging-60 { border-left-color: #f4d078; }
.ledger-aging-item.aging-90 { border-left-color: #c2612e; }
.ledger-aging-item.aging-over90 { border-left-color: #fd6161; }
.ledger-aging-item.aging-total { border-left-color: var(--bt-accent); background: rgba(123, 92, 150, 0.08); }
.ledger-aging-item.aging-30 .aging-value { color: #0f6b58; }
.ledger-aging-item.aging-over90 .aging-value { color: #a52a2a; }
.ledger-aging-item.aging-total .aging-value { color: var(--bt-accent-hover); }

.ledger-table-wrapper {
    background: #fff; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; margin-bottom: 14px;
}
.ledger-table-heading {
    padding: 14px 18px; border-bottom: 1px solid #eef0f3; font-size: 15px; font-weight: 600; color: var(--bt-text-strong);
}
.ledger-table { width: 100%; border: 0 !important; margin: 0 !important; }
.ledger-table th {
    background: #f6f8fb !important; color: #4a4f66 !important; font-size: 12.5px !important; font-weight: 600 !important;
    border: 0 !important; border-bottom: 1px solid #eef0f3 !important; padding: 10px 12px !important;
}
.ledger-table td {
    border: 0 !important; border-bottom: 1px solid #eef0f3 !important; padding: 10px 12px !important; font-size: 13px !important;
    color: var(--bt-text-strong) !important; vertical-align: middle !important;
}
.ledger-table tbody tr:hover > td { background: #fafbfd !important; }
.ledger-table tr.row-payment > td { background: rgba(78, 197, 173, 0.08) !important; }
.ledger-table tr.row-transaction > td { background: transparent !important; }
.ledger-table .col-debit { color: #a52a2a; font-variant-numeric: tabular-nums; }
.ledger-table .col-credit { color: #0f6b58; font-variant-numeric: tabular-nums; }
.ledger-table .col-balance { font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger-table .row-line-details td { background: #fafbfd !important; font-size: 12px !important; }
.status-badge {
    display: inline-block; padding: 3px 10px; border-radius: 4.8px; font-size: 11.5px; font-weight: 600;
    background: rgba(78, 197, 173, 0.2); color: #0f6b58;
}
.status-badge.due, .status-badge.partial { background: rgba(244, 208, 120, 0.35); color: #7a5a00; }
.status-badge.unpaid, .status-badge.overdue { background: rgba(253, 97, 97, 0.2); color: #a52a2a; }

.ledger-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
/* Child sizing for the filter bar. Previously lived in brand-system.css, which is no longer loaded;
   without these the date range input collapses to its content width. */
.ledger-filter-bar .form-group { margin-bottom: 0; flex: 1 1 180px; min-width: 150px; }
.ledger-filter-bar .form-group > label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; margin-bottom: 4px; display: block; }
.ledger-filter-bar .form-control { height: 36px; font-size: 13px; width: 100%; }
.ledger-filter-bar .form-control:focus { border-color: #7b5c96; box-shadow: 0 0 0 3px rgba(123, 92, 150, 0.15); }
.ledger-format-pills .btn { margin: 0; }
.ledger-format-pills .btn.active, .ledger-format-pills .btn:focus.active {
    background: var(--bt-accent) !important; border-color: var(--bt-accent) !important; color: #fff !important;
}
.ledger-actions .btn { margin-left: 6px; }

/* ==========================================================================
   Module dashboards (Buyback, Business Intelligence, and others): one shared
   look, the Marketing Studio one. Stat tiles, chart boxes and a filter row.
   Charts are ApexCharts only.
   ========================================================================== */
.bt-module-page { padding-top: 6px; }
.bt-page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.bt-page-head h1 { font-size: 20px; font-weight: 600; color: var(--bt-text-strong); margin: 0; }
.bt-page-head h1 i { color: var(--bt-accent); margin-right: 6px; }
.bt-head-btn { border-radius: 4.8px; }
.bt-filter-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.bt-filter-row .form-group { min-width: 220px; margin: 0; }
.bt-filter-row label { font-size: 12.5px; font-weight: 600; color: var(--bt-muted); }

.bt-stat-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px;
}
.bt-stat {
    --bs: var(--bt-accent); --bs-tint: rgba(123, 92, 150, 0.12);
    position: relative; display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 16px 18px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(31, 34, 51, 0.04);
}
.bt-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bs); }
.bt-stat-primary { --bs: #7b5c96; --bs-tint: rgba(123, 92, 150, 0.12); }
.bt-stat-success { --bs: #41c3a9; --bs-tint: rgba(65, 195, 169, 0.14); }
.bt-stat-warning { --bs: #e0b84f; --bs-tint: rgba(244, 208, 120, 0.25); }
.bt-stat-danger  { --bs: #fd6161; --bs-tint: rgba(253, 97, 97, 0.12); }
.bt-stat-info    { --bs: #4b5fc4; --bs-tint: rgba(75, 95, 196, 0.12); }
.bt-stat-icon {
    width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
    background: var(--bs-tint); color: var(--bs); font-size: 17px;
}
.bt-stat-data { min-width: 0; }
.bt-stat-value { font-size: 22px; font-weight: 700; color: var(--bt-text-strong); line-height: 1.15; font-variant-numeric: tabular-nums; }
.bt-stat-title { font-size: 11.5px; font-weight: 600; color: var(--bt-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.bt-stat-link { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--bs); }
.bt-stat:hover { box-shadow: 0 4px 12px rgba(31, 34, 51, 0.08); }

.bt-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.bt-bottom-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; }
.bt-box { margin-bottom: 0 !important; }
.bt-quick-btn { margin-bottom: 0; }
.bt-workflow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bt-workflow-step {
    font-size: 12.5px; font-weight: 600; color: var(--bt-accent-hover); background: rgba(123, 92, 150, 0.1);
    border-radius: 999px; padding: 5px 12px;
}
.bt-workflow-arrow { color: var(--bt-muted); font-size: 10px; }

@media (max-width: 1100px) {
    .bt-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bt-chart-grid, .bt-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .bt-stat-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Business Intelligence (dashboard, analytics, advanced KPI, insights,
   configuration): the shared look. The BI pages keep their own markup; these
   rules map their card families onto the same white cards, one accent and the
   status colours used elsewhere. Gradients become solid colours.
   ========================================================================== */
html:root {
    --bi-primary-gradient: #7b5c96;
    --bi-success-gradient: #41c3a9;
    --bi-warning-gradient: #f4d078;
    --bi-danger-gradient: #fd6161;
    --bi-info-gradient: #4b5fc4;
    --bi-card-radius: 8px;
    --bi-border-radius: 8px;
    --bi-card-shadow: 0 1px 2px rgba(31, 34, 51, 0.04);
    --bi-card-shadow-hover: 0 4px 12px rgba(31, 34, 51, 0.08);
    --bi-bg: var(--bt-canvas);
    --bi-card-bg: #ffffff;
    --bi-border: #e9ecef;
    --bi-text-primary: var(--bt-text-strong);
    --bi-text-secondary: var(--bt-muted);
    --bi-text-muted: var(--bt-muted);
}

/* KPI tiles */
html body .bi-kpi-item, html body .bi-kpi-card, html body .metric-card,
html body .akp-kpi-card {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(31, 34, 51, 0.04) !important;
    color: var(--bt-text-strong) !important;
    transform: none !important;
}
html body .bi-kpi-item:hover, html body .bi-kpi-card:hover, html body .metric-card:hover, html body .akp-kpi-card:hover {
    box-shadow: 0 4px 12px rgba(31, 34, 51, 0.08) !important;
}
html body .akp-kpi-card, html body .bi-kpi-item, html body .metric-card { position: relative; overflow: hidden; }
html body .akp-kpi-card::before, html body .metric-card::before, html body .bi-kpi-item::before, html body .bi-kpi-card::before {
    background: var(--bt-accent) !important; opacity: 1 !important; height: auto !important; width: 4px !important;
    top: 0 !important; bottom: 0 !important; right: auto !important;
}
html body .bi-kpi-value, html body .bi-kpi-value-big, html body .bi-kpi-value-full,
html body .metric-value, html body .metric-value-big, html body .metric-value-full,
html body .akp-kpi-value {
    color: var(--bt-text-strong) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}
html body .bi-kpi-label, html body .metric-label, html body .akp-kpi-label {
    color: var(--bt-muted) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
html body .bi-kpi-icon-box, html body .metric-icon, html body .akp-kpi-icon {
    background: rgba(123, 92, 150, 0.12) !important;
    color: var(--bt-accent) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
}
html body .bi-kpi-trend, html body .metric-change { font-size: 12px !important; font-weight: 600 !important; }

/* Chart and section cards */
html body .bi-chart-modern, html body .chart-card, html body .akp-chart-card,
html body .akp-section-card, html body .bi-expense-treemap-card, html body .ai-insight-card,
html body .bi-insight-item, html body .bi-insights-panel, html body .bi-filter-section {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(31, 34, 51, 0.04) !important;
    color: var(--bt-text-strong) !important;
}
html body .chart-header, html body .bi-expense-card-header, html body .akp-s-header {
    background: transparent !important;
    border-bottom: 1px solid #eef0f3 !important;
    padding: 14px 18px !important;
}
html body .bi-chart-title, html body .chart-title, html body .akp-chart-title,
html body .bi-expense-card-title, html body .akp-s-title, html body .bi-insight-title, html body .ai-insight-label {
    color: var(--bt-text-strong) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
html body .bi-chart-subtitle, html body .akp-s-subtitle, html body .bi-expense-card-subtitle, html body .bi-insight-text, html body .bi-insight-description, html body .ai-insight-sub {
    color: var(--bt-muted) !important;
}
html body .akp-s-icon, html body .akp-s-icon--primary, html body .bi-expense-legend-dot {
    background: rgba(123, 92, 150, 0.12) !important;
    color: var(--bt-accent) !important;
}
html body .bi-expense-period-badge {
    background: rgba(123, 92, 150, 0.12) !important;
    color: var(--bt-accent-hover) !important;
    border-radius: 999px !important;
}

/* Segment buttons and module action buttons */
html body .akp-seg-top, html body .akp-seg-grid > * {
    border-radius: 8px !important;
}
html body .akp-btn {
    background: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
    border-radius: 4.8px !important;
}
html body .akp-btn:hover { background: var(--bt-accent-hover) !important; border-color: var(--bt-accent-hover) !important; color: #fff !important; }

/* The BI dashboard's KPI wrapper (bi-kpi-bar) is a layout element, not a bar; it must not be fixed-height. */
html body .bi-kpi-bar { height: auto !important; }
/* Chart titles size to their content, so the subtitle does not overlap the title or the chart. */
html body .bi-chart-title { height: auto !important; min-height: 20px; display: block !important; }
html body .bi-chart-subtitle { margin-top: 2px !important; }
html body .akp-insight, html body .ai-insights-banner, html body .bi-insight-banner {
    background: var(--bt-accent) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* Index tables: date and time in one cell, date on the first line and time on the second, right aligned. */
td.dt-date-cell { text-align: right !important; white-space: nowrap; line-height: 1.35; font-variant-numeric: tabular-nums; }
td.dt-date-cell .dt-date-line { display: block; color: var(--bt-text-strong); }
td.dt-date-cell .dt-time-line { display: block; font-size: 11.5px; color: var(--bt-muted); }

/* ==========================================================================
   Module top navigation (Marketing Studio style): a row of tabs with an icon and
   a label, an accent underline on the active tab, a light tint on hover, and a
   2px divider under the row. On phones the row scrolls sideways.
   ========================================================================== */
html body .bt-module-nav { border-radius: 8px !important; margin-bottom: 15px; }
html body .bt-nav-tabs {
    display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0;
    border-bottom: 2px solid #e9ecef;
}
html body .bt-nav-tabs > li { float: none; }
html body .bt-nav-tabs > li > a {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; margin-bottom: -2px;
    color: var(--bt-muted) !important; font-size: 13px; font-weight: 600;
    background: transparent !important; border: 0; border-bottom: 2px solid transparent;
    white-space: nowrap; text-decoration: none;
}
html body .bt-nav-tabs > li > a i { font-size: 12px; }
html body .bt-nav-tabs > li > a:hover, html body .bt-nav-tabs > li > a:focus {
    color: var(--bt-accent) !important; background: rgba(123, 92, 150, 0.06) !important;
}
html body .bt-nav-tabs > li.active > a {
    color: var(--bt-accent) !important; border-bottom-color: var(--bt-accent) !important;
    background: transparent !important;
}
@media (max-width: 768px) {
    html body .bt-nav-tabs { overflow-x: auto; flex-wrap: nowrap; }
    html body .bt-nav-tabs > li > a { padding: 8px 10px; font-size: 12px; }
}

/* Home: View Details modal (dw-modal) opens as a full view: almost the whole
   window, with the table scrolling inside it. */
html body .dw-modal .modal-dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 2vh auto !important;
}
html body .dw-modal .modal-content {
    min-height: 92vh;
    border-radius: 8px !important;
}
html body .dw-modal .modal-body {
    max-height: calc(92vh - 70px);
    overflow: auto;
}
html body .dw-modal .modal-body table { width: 100% !important; }

/* ==========================================================================
   SIDEBAR (full dark, like the top bar): dark background, light menu names and
   icons, module entries in their full colour (no 30% tint). Dark text on the
   module colours keeps them readable; the normal items are light.
   ========================================================================== */
html body .main-sidebar, html body .left-side, html body .sidebar, html body #app-sidebar,
html body .main-sidebar .sidebar, html body .sidebar-menu {
    background: rgba(30, 34, 51, 0.05) !important;
    border-right: 0 !important;
}
html body .sidebar-menu > li > a,
html body #app-sidebar .sidebar-menu > li > a,
html body #app-sidebar a {
    color: #343a40 !important;
}
html body .sidebar-menu > li > a > i,
html body #app-sidebar a > i,
html body #app-sidebar a svg {
    color: #5f6a7a !important;
    stroke: currentColor;
}
html body .sidebar-menu > li > a:hover,
html body #app-sidebar a:hover {
    background-color: rgba(30, 34, 51, 0.08) !important;
    color: #1f2233 !important;
}
html body .sidebar-menu > li.active > a,
html body .sidebar-menu > li.menu-open > a {
    background-color: rgba(164, 123, 200, 0.22) !important;
    color: #7b5c96 !important;
}
html body .sidebar-menu .treeview-menu,
html body .sidebar-menu .treeview-menu > li > a {
    background-color: transparent !important;
    color: #4b5563 !important;
}
html body .sidebar-menu .treeview-menu > li.active > a {
    color: #7b5c96 !important;
}
/* module entries: full colour, dark text (readable on the colour) */
html body #app-sidebar a[href*="/accounting"],
html body #app-sidebar a[href*="/indian-accounting"], html body #app-sidebar a[href*="indianaccounting"],
html body #app-sidebar a[href*="/repair"], html body #app-sidebar a[href*="/crm"],
html body #app-sidebar a[href*="/whatsapp"], html body #app-sidebar a[href*="/business-intelligence"],
html body #app-sidebar a[href*="/advanced-reports"], html body #app-sidebar a[href*="/affiliate"],
html body #app-sidebar a[href*="/promotion"], html body #app-sidebar a[href*="/offerandpromotion"],
html body #app-sidebar a[href*="/essentials"], html body #app-sidebar a[href*="/hms"],
html body #app-sidebar a[href*="/buyback"], html body #app-sidebar a[href*="/manufacturing"],
html body #app-sidebar a[href*="/superadmin"], html body #app-sidebar a[href*="/marketing-studio"],
html body #app-sidebar a[href*="/ai-connect"], html body #app-sidebar a[href*="/asset"],
html body #app-sidebar a[href*="/connector"] {
    color: #1f2233 !important;
    font-weight: 600;
}
html body #app-sidebar a[href*="/accounting"]:hover, html body #app-sidebar a[href*="/repair"]:hover,
html body #app-sidebar a[href*="/crm"]:hover, html body #app-sidebar a[href*="/whatsapp"]:hover,
html body #app-sidebar a[href*="/business-intelligence"]:hover, html body #app-sidebar a[href*="/advanced-reports"]:hover,
html body #app-sidebar a[href*="/affiliate"]:hover, html body #app-sidebar a[href*="/promotion"]:hover,
html body #app-sidebar a[href*="/buyback"]:hover, html body #app-sidebar a[href*="/marketing-studio"]:hover {
    filter: brightness(1.06);
    color: #1f2233 !important;
}

/* Module entries (full colour, dark text): higher specificity than the sidebar partial's link rules. */
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/accounting"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/indian-accounting"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="indianaccounting"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/repair"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/crm"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/whatsapp"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/business-intelligence"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/advanced-reports"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/affiliate"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/promotion"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/offerandpromotion"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/essentials"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/hms"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/buyback"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/manufacturing"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/superadmin"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/marketing-studio"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/ai-connect"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/asset"],
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/connector"] {
    color: #1f2233 !important;
    font-weight: 600 !important;
}

/* Module entries: icons dark as well (on the full colour). */
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/accounting"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/indian-accounting"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="indianaccounting"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/repair"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/crm"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/whatsapp"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/business-intelligence"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/advanced-reports"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/affiliate"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/promotion"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/offerandpromotion"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/essentials"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/hms"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/buyback"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/manufacturing"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/superadmin"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/marketing-studio"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/ai-connect"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/asset"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/connector"] i,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/accounting"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/indian-accounting"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="indianaccounting"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/repair"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/crm"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/whatsapp"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/business-intelligence"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/advanced-reports"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/affiliate"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/promotion"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/offerandpromotion"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/essentials"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/hms"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/buyback"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/manufacturing"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/superadmin"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/marketing-studio"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/ai-connect"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/asset"] svg,
html body #app-sidebar .tw-flex-1 a.tw-flex.tw-items-center.tw-gap-3[href*="/connector"] svg {
    color: #1f2233 !important;
}

/* Sidebar brand (logo and business name): same 15% tint as the sidebar, dark text. */
html body #app-sidebar .sidebar-brand, html body .sidebar-brand {
    background: rgba(30, 34, 51, 0.80) !important;
    background-image: none !important;
    color: #ffffff !important;
}
html body #app-sidebar .sidebar-brand .sidebar-brand-name, html body .sidebar-brand-name {
    color: #ffffff !important;
}


/* ==========================================================================
   Repair dashboard (and other module pages) card variables. These were defined in
   brand-system.css, which is removed; the cards need them for white card
   backgrounds, borders, radii and shadows inside their boxes.
   ========================================================================== */
:root {
    --bg-card: #ffffff;
    --border-light: #e9ecef;
    --radius: 4.8px;
    --radius-lg: 8px;
    --shadow-sm: 0 1px 2px rgba(31, 34, 51, 0.05);
    --shadow-md: 0 4px 12px rgba(31, 34, 51, 0.08);
    --shadow-lg: 0 10px 24px rgba(31, 34, 51, 0.12);
    --text: #1f2233;
    --text-body: #343a40;
    --text-muted: #646a80;
    --brand: #7b5c96;
    --brand-light: #a47bc8;
    --brand-surface: rgba(123, 92, 150, 0.10);
}

/* Status and feedback badges: box type (small square corners), not pills. */
html body .badge, html body .label, html body .status-badge, html body .type-badge, html body .badge-type,
html body .payment-status-label, html body .payment-status, html body .stock_transfer_status {
    border-radius: 4.8px !important;
}

/* POS cart box: white (header row, totals and the bottom bar), not grey. */
html body #pos_table > thead > tr > th,
html body #pos_table thead th {
    background-color: #ffffff !important;
}
html body .pos-form-actions,
html body .pos_form_totals,
html body .pos_form_totals .pos_totals_cell {
    background-color: #ffffff !important;
}

/* POS product row: SKU, brand, stock and LPP as separate bold chips, each in its
   own colour at 15% opacity. */
html body .pos-meta-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
html body .pos-chip {
    display: inline-block; font-size: 11px !important; font-weight: 700 !important;
    line-height: 1.3; padding: 2px 7px; border-radius: 4.8px; white-space: nowrap;
}
html body .pos-chip-sku   { background: rgba(123, 92, 150, 0.15) !important; color: #5b3f80 !important; }
html body .pos-chip-brand { background: rgba(75, 95, 196, 0.15) !important;  color: #3d4fa8 !important; }
html body .pos-chip-stock { background: rgba(65, 195, 169, 0.15) !important; color: #0f6b58 !important; }
html body .pos-chip-lpp   { background: rgba(194, 97, 46, 0.15) !important;  color: #8a3f17 !important; }

/* POS cart table titles: larger, readable */
html body #pos_table > thead > tr > th,
html body #pos_table thead th {
    font-size: 13px !important;
}

/* ==========================================================================
   POS Service tab (service staff availability): a dark header band with the title,
   and a grid of staff cards, each with a dark top (avatar, name, status) and a
   light body (timer or status text, and the actions). Responsive: 4 across on wide
   screens, 2 on tablets, 1 on phones.
   ========================================================================== */
html body .svc-avail-content { border: 0 !important; border-radius: 8px !important; overflow: hidden; background: #f6f8fb !important; box-shadow: 0 12px 32px rgba(31,34,51,.18) !important; }
html body .svc-avail-header {
    position: relative; background: #1e2233; color: #fff; padding: 16px 52px 16px 20px;
}
html body .svc-avail-close { position: absolute; right: 16px; top: 14px; color: #fff; opacity: .85; text-shadow: none; }
html body .svc-avail-title-wrap { display: flex; align-items: center; gap: 12px; }
html body .svc-avail-icon { width: 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(164,123,200,.3); color: #fff; font-size: 16px; }
html body .svc-avail-title { margin: 0; font-size: 16px; font-weight: 600; color: #fff; }
html body .svc-avail-subtitle { font-size: 12px; color: #c9cfe0; }
html body .svc-avail-body { background: #f6f8fb !important; padding: 16px; max-height: 70vh; overflow-y: auto; }
html body .svc-avail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
html body .svc-card { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(31,34,51,.05); }
html body .svc-card-top { background: #1e2233; color: #fff; padding: 12px; display: flex; align-items: center; gap: 10px; min-height: 84px; }
html body .svc-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.25); flex: none; }
html body .svc-card-id { min-width: 0; flex: 1; }
html body .svc-card-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .svc-card-username { font-size: 11px; color: #b9c0d4; }
html body .svc-status-chip { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 3px 8px; border-radius: 4.8px; background: rgba(78,197,173,.25); color: #bdf3e6; white-space: nowrap; }
html body .svc-busy .svc-status-chip { background: rgba(244,208,120,.28); color: #ffe9a8; }
html body .svc-paused .svc-status-chip { background: rgba(255,255,255,.14); color: #e4e7f0; }
html body .svc-card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
html body .svc-timer { font-size: 24px; font-weight: 700; color: #1f2233; font-variant-numeric: tabular-nums; }
html body .svc-meta { font-size: 12px; color: #646a80; }
html body .svc-meta-ok { color: #0f6b58; font-weight: 600; }
html body .svc-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
html body .svc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 35px; padding: 0 12px; border-radius: 4.8px; font-size: 13px; font-weight: 600; border: 1px solid transparent; text-decoration: none !important; cursor: pointer; white-space: nowrap; }
html body .svc-btn-primary { background: #7b5c96; color: #fff; }
html body .svc-btn-primary:hover { background: #6b5082; color: #fff; }
html body .svc-btn-warning { background: rgba(244,208,120,.35); color: #7a5a00; border-color: rgba(244,208,120,.7); }
html body .svc-btn-success { background: rgba(78,197,173,.2); color: #0f6b58; border-color: rgba(78,197,173,.5); }
html body .svc-btn-dark { background: #1e2233; color: #fff; }
html body .svc-btn-dark:hover { background: #2b3046; color: #fff; }
html body .svc-btn-light { background: #fff; color: #1f2233; border-color: #dee2e6; }
html body .svc-avail-footer { background: #fff; border-top: 1px solid #e9ecef; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; }
@media (max-width: 1100px) { html body .svc-avail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { html body .svc-avail-grid { grid-template-columns: 1fr; } html body .svc-avail-footer { flex-wrap: wrap; } html body .svc-avail-footer .svc-btn { flex: 1 1 100%; } }

/* ==========================================================================
   Cash register screens: Close Register (register view), Register Details and the
   payment sections they include. Dark header band with the register details; a
   grid of summary cards; light section titles; list-style tables; sections stacked
   in one column (no zigzag). Responsive: 4 summary cards across on wide screens,
   2 on tablets, 1 on phones.
   ========================================================================== */
html body .cr-modal-content { border: 0 !important; border-radius: 8px !important; overflow: hidden; background: #f6f8fb !important; box-shadow: 0 12px 32px rgba(31,34,51,.18) !important; }
html body .cr-register-header { background: #1e2233 !important; color: #fff !important; padding: 16px 20px !important; border: 0 !important; margin: 0 !important; }
html body .cr-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
html body .cr-header-title { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; color: #fff !important; }
html body .cr-header-subtitle { font-size: 12px; color: #c9cfe0; }
html body .cr-close-btn { color: #fff !important; opacity: .85; text-shadow: none !important; }
html body .cr-header-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
html body .cr-meta-item { font-size: 12.5px; color: #e4e7f0; display: flex; align-items: center; gap: 6px; }
html body .cr-meta-item strong { color: #fff; font-weight: 600; }
html body .cr-meta-icon { width: 24px; height: 24px; border-radius: 4.8px; background: rgba(164,123,200,.3); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
html body .cr-modal-body { padding: 16px 20px !important; background: #f6f8fb !important; }
html body .cr-kpi-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; margin-bottom: 16px !important; }
html body .cr-kpi-card { background: #fff !important; border: 1px solid #e9ecef !important; border-top: 3px solid #7b5c96 !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(31,34,51,.05) !important; padding: 14px 16px !important; min-width: 0 !important; flex: none !important; }
html body .cr-kpi-card.cr-kpi-green { border-top-color: #41c3a9 !important; }
html body .cr-kpi-card.cr-kpi-red { border-top-color: #fd6161 !important; }
html body .cr-kpi-card.cr-kpi-dark { background: #1e2233 !important; border-top-color: #a47bc8 !important; }
html body .cr-kpi-label { font-size: 11px !important; font-weight: 600 !important; color: #646a80 !important; text-transform: uppercase; letter-spacing: .04em; }
html body .cr-kpi-card.cr-kpi-dark .cr-kpi-label { color: #c9cfe0 !important; }
html body .cr-kpi-value { font-size: 20px !important; font-weight: 700 !important; color: #1f2233 !important; font-family: inherit !important; font-variant-numeric: tabular-nums; margin-top: 4px; }
html body .cr-kpi-card.cr-kpi-dark .cr-kpi-value { color: #fff !important; }
html body .cr-kpi-green .cr-kpi-value { color: #0f6b58 !important; }
html body .cr-kpi-red .cr-kpi-value { color: #a52a2a !important; }
html body .cr-section { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px !important; overflow-x: auto; }
html body .cr-section-title { background: rgba(123,92,150,.10) !important; color: #5b3f80 !important; border-left: 3px solid #7b5c96 !important; border-radius: 4.8px !important; font-size: 12.5px !important; padding: 7px 10px !important; margin-bottom: 10px !important; }
html body .cr-section-title .cr-icon { background: #7b5c96 !important; }
html body .cr-table { width: 100%; font-size: 13px !important; }
html body .cr-table th { background: #f6f8fb !important; color: #4a4f66 !important; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; border-bottom: 1px solid #e9ecef !important; padding: 8px 10px !important; }
html body .cr-table td { border-bottom: 1px solid #f0f2f5 !important; color: #1f2233 !important; padding: 7px 10px !important; }
html body .cr-table .cr-amount { font-family: inherit !important; font-variant-numeric: tabular-nums; }
html body .cr-total-row td { background: rgba(123,92,150,.10) !important; color: #5b3f80 !important; border-color: #7b5c96 !important; }
html body .cr-calc-box { background: #fff !important; border: 1px solid #e9ecef !important; border-radius: 8px !important; }
html body .cr-calc-row.cr-calc-total { border-top-color: #1e2233 !important; color: #1f2233 !important; }
html body .cr-note-box { background: #fff !important; border: 1px solid #e9ecef !important; border-left: 3px solid #7b5c96 !important; border-radius: 4.8px !important; }
html body .cr-badge, html body .cr-badge-credit, html body .cr-badge-debit { border-radius: 4.8px !important; background: rgba(123,92,150,.14) !important; color: #5b3f80 !important; }
html body .cr-modal-footer { background: #fff !important; border-top: 1px solid #e9ecef !important; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px !important; }
html body .cr-modal-footer .tw-dw-btn { border-radius: 4.8px !important; }
/* sections stacked in one column (no side-by-side zigzag) */
html body .mini_print > [class*="col-"], html body .cr-modal-body > [class*="col-"] { float: none !important; width: 100% !important; }
html body .cr-modal-body .row { margin-left: 0; margin-right: 0; }
@media (max-width: 1100px) { html body .cr-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { html body .cr-kpi-row { grid-template-columns: 1fr !important; } html body .cr-header-top { flex-direction: column; } html body .cr-modal-footer .tw-dw-btn { flex: 1 1 100%; } }

/* POS Service tab availability modal: backdrop at half its usual darkness (about 25%). */
html body.svc-avail-backdrop .modal-backdrop.in { opacity: .25 !important; }
html body.svc-avail-backdrop .modal-backdrop { background-color: #000 !important; }
/* Business Settings: only the pane of the selected menu item is shown (the rule that
   hid the other panes was in the removed app.css). The panes stay in the same form,
   so the save submits every field as before. */
html body .pos-tab > .pos-tab-content { display: none; }
html body .pos-tab > .pos-tab-content.active { display: block; }

/* POS Quick Add Expense modal: the Add Payment block is a card like the other sections
   (same surface, border, padding), its rows stay inside the card, and on phones the
   payment fields stack. Scoped to the modal form; the regular Add Expense page is not
   affected. */
html body #add_expense_modal_form .payment_row {
    background: #f6f8fb;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 14px 0 0;
}
html body #add_expense_modal_form .payment_row > h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1f2233 !important;
    margin: 0 0 10px !important;
}
html body #add_expense_modal_form .payment_row hr { margin: 10px 0; border-top-color: #e9ecef; }
html body #add_expense_modal_form .payment_row .mp-row-c { margin: 0; padding: 0; }
html body #add_expense_modal_form .payment_row .row { margin-left: 0; margin-right: 0; }
html body #add_expense_modal_form .payment_row .mp-main { flex-wrap: wrap; }
html body #add_expense_modal_form .payment_row #expense_payment_due,
html body #add_expense_modal_form .payment_row strong { font-size: 13px; }
@media (max-width: 576px) {
    html body #add_expense_modal_form .payment_row .mp-main { flex-direction: column; align-items: stretch; }
    html body #add_expense_modal_form .payment_row .mp-col-amount,
    html body #add_expense_modal_form .payment_row .mp-col-method,
    html body #add_expense_modal_form .payment_row .mp-col-account { flex: 1 1 100% !important; min-width: 0; }
}

/* ==========================================================================
/* Business Settings submenu: every item has the same larger, bold text, with even
   spacing. The colours are unchanged. */
html body .pos-tab-menu .list-group-item {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    padding: 11px 14px !important;
    white-space: normal;
}
html body .pos-tab-menu .list-group-item > i,
html body .pos-tab-menu .list-group-item > svg {
    font-size: 14px;
}
@media (max-width: 767px) {
    html body .pos-tab-menu .list-group-item {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
}

/* ==========================================================================
   POS product suggestions (PWA): green theme. The list has a soft green surface; tiles
   are white with a green price band; filter labels are light with dark text (each
   section has its own light tint). The list scrolls, and every page loads.
   ========================================================================== */
html body #product_list_body {
    background: #fdf3d7 !important; border-radius: 8px; padding: 6px !important;
}
html body .pos-tile-col { padding: 3px !important; }
html body .pos-tile {
    position: relative; height: 100%; min-height: 118px; background: #ffffff !important;
    border: 1px solid #cfe9dc !important; border-radius: 8px !important; overflow: hidden;
    display: flex; flex-direction: column; cursor: pointer; margin: 0 !important; text-align: left;
    box-shadow: 0 1px 2px rgba(20,96,63,.06) !important; transition: box-shadow .15s ease, transform .15s ease;
}
html body .pos-tile:hover { box-shadow: 0 6px 16px rgba(20,96,63,.14) !important; transform: translateY(-1px); }
html body .pos-tile:active { transform: scale(.98); }
html body .pos-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 7px 8px 0; min-height: 22px; }
html body .pos-tile-sku { font-size: 10px; color: #5d6b64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html body .pos-tile-qty {
    flex: none; font-size: 12px; font-weight: 700; color: #14603f; background: rgba(31,138,91,.12);
    padding: 1px 6px; border-radius: 4.8px; white-space: nowrap;
}
html body .pos-tile-qty small { font-size: 10px; font-weight: 600; color: #1b6b47; }
html body .pos-tile-name {
    padding: 4px 8px 6px; font-size: 12.5px; font-weight: 600; color: #17302a; line-height: 1.3;
    height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body .pos-tile-price {
    margin-top: auto; background: rgba(29, 127, 86, 0.55); color: #0b2a1e; text-align: center;
    font-size: 15px; font-weight: 800; line-height: 1.2; padding: 8px 6px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; min-height: 34px;
}
@media (max-width: 767px) {
    html body .pos-tile-name { font-size: 12px; }
    html body .pos-tile-price { font-size: 14px; padding: 7px 4px; }
}

/* filter labels: light surfaces with dark text; one tint per section */
html body #product_category_div, html body #product_brand_div, html body #feature_product_div {
    background: transparent !important; padding: 0 !important;
}
html body #product_category_div label.tw-dw-btn,
html body #product_brand_div label.tw-dw-btn,
html body #show_featured_products {
    height: 38px !important; min-height: 38px !important; border-radius: 4.8px !important;
    font-size: 13px !important; font-weight: 700 !important; gap: 8px !important; padding: 0 12px !important;
    box-shadow: none !important; background-image: none !important; color: #1f2233 !important;
    justify-content: flex-start;
}
html body #product_category_div label.tw-dw-btn { background: #efe9f6 !important; border: 1px solid #d8c9e8 !important; }
html body #product_brand_div label.tw-dw-btn { background: #e3f5ee !important; border: 1px solid #bfe5d4 !important; }
html body #show_featured_products { background: #fdf3d7 !important; border: 1px solid #efd892 !important; }
html body #product_category_div label.tw-dw-btn:hover { background: #e4dbf0 !important; }
html body #product_brand_div label.tw-dw-btn:hover { background: #d5efe4 !important; }
html body #show_featured_products:hover { background: #fbe9bb !important; }
html body #product_category_div label.tw-dw-btn span,
html body #product_brand_div label.tw-dw-btn span,
html body #show_featured_products span { color: #1f2233 !important; }
html body #product_category_div .tw-dw-badge,
html body #product_brand_div .tw-dw-badge,
html body #feature_product_div .tw-dw-badge {
    background: #ffffff !important; border: 1px solid rgba(31,34,51,.12) !important; color: #1f2233 !important;
}
html body #product_category_div .pos-filter-chip-clear,
html body #product_brand_div .pos-filter-chip-clear { color: #5b3f80 !important; }

/* ==========================================================================
   POS cart summary: each box has its own light colour with dark text. Total Payable
   is a solid brand block with white text. Reward points is shown in the Discount box.
   Layout, calculations and payment are unchanged.
   ========================================================================== */
html body .pos_form_totals .pos_totals_left { background: transparent !important; gap: 5px !important; padding: 6px; }
html body .pos_form_totals .pos_totals_cell {
    border-radius: 8px !important; flex: 1 1 calc(25% - 5px) !important; min-width: calc(25% - 5px) !important;
    border: 1px solid rgba(31,34,51,.06) !important;
}
html body .pos_form_totals .pos_totals_cell .pos_totals_label,
html body .pos_form_totals .pos_totals_cell .pos_totals_value,
html body .pos_form_totals .pos_totals_cell .pos_totals_edit { color: var(--sum-ink) !important; }
html body .pos_form_totals .pos_totals_cell .pos_totals_label { opacity: .85; }
html body .pos_form_totals .pos_totals_cell .pos_totals_value { font-weight: 800; }

html body .pos_form_totals .pos_totals_cell--items    { --sum-bg: #e0f2fe; --sum-ink: #0c4a6e; }
html body .pos_form_totals .pos_totals_cell--subtotal { --sum-bg: #ede9fe; --sum-ink: #4c1d95; }
html body .pos_form_totals .pos_totals_cell--discount { --sum-bg: #ffe4e6; --sum-ink: #9f1239; }
html body .pos_form_totals .pos_totals_cell--tax      { --sum-bg: #fef3c7; --sum-ink: #78350f; }
html body .pos_form_totals .pos_totals_cell--shipping { --sum-bg: #dcfce7; --sum-ink: #14532d; }
html body .pos_form_totals .pos_totals_cell--packing  { --sum-bg: #e0e7ff; --sum-ink: #312e81; }
html body .pos_form_totals .pos_totals_cell--roundoff { --sum-bg: #f1f5f9; --sum-ink: #334155; }
html body .pos_form_totals .pos_totals_cell--tds,
html body .pos_form_totals .pos_totals_cell--tcs      { --sum-bg: #f5f3ff; --sum-ink: #4c1d95; }
html body .pos_form_totals .pos_totals_cell[class*="pos_totals_cell--"] { background: var(--sum-bg) !important; }

/* Total Payable: a solid brand block with white text, the most prominent box */
html body .pos_form_totals .pos_totals_right {
    background: var(--brand) !important; border-radius: 8px; border: 0 !important; margin: 6px 6px 6px 0;
    box-shadow: 0 4px 14px rgba(123,92,150,.28);
}
html body .pos_form_totals .pos_totals_right_label { color: #ffffff !important; opacity: .92; }
html body .pos_form_totals .pos_totals_right_value { color: #ffffff !important; font-size: 28px !important; font-weight: 800; }
@media (max-width: 767px) {
    html body .pos_form_totals .pos_totals_right { margin: 0 6px 22px; }
    html body .pos_form_totals .pos_totals_right_value { font-size: 24px !important; }
}

/* ==========================================================================
   POS Category / Brand panels: a 420px side panel (full width on phones), a header with
   title and count, white cards with an accent bar, and a clear selected state. Favourite
   has a header with a close button. Only the look changes; the handlers and classes stay.
   ========================================================================== */
html body .tw-dw-drawer-side .pos-drawer-panel {
    width: 420px !important; max-width: 100vw !important; height: 100vh; background: #ffffff !important;
    border-radius: 0 !important; box-shadow: -12px 0 32px rgba(17,17,26,.18); padding: 0 !important;
}
html body .pos-drawer-panel > div:first-child {
    padding: 18px 20px 14px !important; border-top: 4px solid var(--brand) !important; border-bottom: 1px solid #eef0f4 !important;
}
html body .pos-drawer-brand > div:first-child { border-top-color: #41c3a9 !important; }
html body .pos-drawer-panel h3 { font-size: 18px !important; font-weight: 800 !important; color: #1f2233 !important; }
html body .pos-drawer-panel .tw-font-mono {
    display: inline-block; font-family: inherit !important; font-size: 11px !important; font-weight: 700;
    letter-spacing: .04em !important; color: #5b3f80; background: rgba(123,92,150,.12); padding: 2px 9px;
    border-radius: 999px; margin-top: 6px !important;
}
html body .pos-drawer-brand .tw-font-mono { color: #14603f; background: rgba(65,195,169,.18); }
html body .pos-drawer-panel > div:first-child > button {
    background: #f3f4f8 !important; color: #1f2233 !important; border-radius: 10px !important;
}
html body .pos-drawer-panel .pos-drawer-body { background: #f7f8fb; padding: 14px 14px 22px !important; }
html body .pos-drawer-panel .pos-card-grid { margin: 0 !important; }
html body .pos-drawer-panel .pos-card-grid::after { content: ""; display: block; clear: both; }
html body .pos-drawer-panel .pos-card-grid > div {
    float: left; width: 50% !important; padding: 5px !important; margin: 0 !important;
}
@media (min-width: 768px) {
    html body .pos-drawer-panel .pos-card-grid > div { width: 33.333% !important; }
}
html body .pos-drawer-panel .pos-card-grid > .all-sub-category { float: none; width: 100% !important; padding: 0 !important; }
html body .pos-drawer-panel .all-sub-category::after { content: ""; display: block; clear: both; }
html body .pos-drawer-panel .all-sub-category > div { float: left; width: 50% !important; padding: 5px !important; }
@media (min-width: 768px) {
    html body .pos-drawer-panel .all-sub-category > div { width: 33.333% !important; }
}

html body .pos-drawer-panel .pos-card-grid .pos-card {
    position: relative; background: #ffffff !important; border: 1px solid #e3e7ef !important; border-radius: 10px !important;
    padding: 12px 26px 12px 16px !important; min-height: 62px; justify-content: flex-start !important; text-align: left !important;
    box-shadow: 0 1px 2px rgba(31,34,51,.05); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
html body .pos-drawer-panel .pos-card-grid .pos-card::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}
html body .pos-drawer-brand .pos-card-grid .pos-card::before { background: #41c3a9; }
html body .pos-drawer-panel .pos-card-grid .pos-card:hover {
    background: #fcfbfe !important; border-color: #cbb9dd !important; box-shadow: 0 6px 16px rgba(31,34,51,.10); transform: translateY(-1px);
}
html body .pos-drawer-panel .pos-card-name {
    font-size: 13px !important; font-weight: 700 !important; color: #1f2233 !important; line-height: 1.3 !important; margin: 0 !important;
}
html body .pos-drawer-panel .pos-card-subcat-dot { background: var(--brand); margin-top: 6px; }

/* selected: the current category or brand */
html body .pos-drawer-panel .is-selected .pos-card {
    background: #f3eef8 !important; border-color: var(--brand) !important; box-shadow: 0 0 0 1px var(--brand) inset;
}
html body .pos-drawer-brand .is-selected .pos-card { background: #e8f7f3 !important; border-color: #41c3a9 !important; box-shadow: 0 0 0 1px #41c3a9 inset; }
html body .pos-drawer-panel .is-selected .pos-card::after {
    content: "\2713"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
html body .pos-drawer-brand .is-selected .pos-card::after { background: #1d7f56; }

/* Favourite header inside the product list */
html body .pos-fav-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #ffffff; border-radius: 8px; padding: 9px 12px; margin: 0 0 8px;
    box-shadow: 0 1px 2px rgba(31,34,51,.06);
}
html body .pos-fav-title { font-size: 14px; font-weight: 800; color: #1f2233; line-height: 1.2; }
html body .pos-fav-sub { font-size: 11px; font-weight: 600; color: #646a80; }
html body .pos-fav-close {
    width: 30px; height: 30px; border-radius: 8px; border: 0; background: #f3f4f8; color: #1f2233;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
html body .pos-fav-close:hover { background: #e6e9f0; }

/* ==========================================================================
   POS create page layout (pos-layout-v2): the payment methods sit in the cart card
   under Total Payable; WhatsApp and Recent Transactions are a bar below the product
   suggestions. Scoped to the create page; the edit page is unchanged.
   ========================================================================== */
html body .pos-layout-v2 .pos-form-actions {
    position: static !important; width: 100% !important; left: auto !important; right: auto !important; bottom: auto !important;
    box-shadow: none !important; border: 0 !important; border-top: 1px solid #eef0f4 !important; border-radius: 0 0 8px 8px;
    padding: 10px 12px 12px !important; background: #ffffff !important; flex-shrink: 0; z-index: auto !important;
}
html body .pos-layout-v2 .pos-form-actions > div {
    min-height: 0 !important; overflow: visible !important; flex-wrap: wrap !important; row-gap: 8px !important;
    justify-content: space-between; padding: 0 !important; gap: 8px !important;
}
html body .pos-layout-v2 .pos-form-actions [style*="flex-wrap"] { flex-wrap: wrap !important; overflow: visible !important; }
html body .pos-layout-v2 .pos-form-actions div[style*="flex:1"] { display: none !important; }
html body .pos-layout-v2 .pos-form-actions button { font-size: 12px !important; }

html body .pos-notify-bar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    margin: 8px 0 4px; padding: 10px 14px; background: #ffffff; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(17,17,26,.08);
}
html body .pos-notify-wa {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px;
    background: #e7f8ef; color: #14532d; font-size: 13px; font-weight: 700; cursor: pointer;
}
html body .pos-notify-wa input { margin: 0; }
html body .pos-notify-recent {
    display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 18px;
    background: #7b5c96; color: #ffffff; font-size: 13px; font-weight: 700; cursor: pointer;
}
html body .pos-notify-recent:hover { background: #6b5082; }

/* POS action bar styles (moved from the sale_pos.partials.pos_form_actions partial). */
/* POS form validation error labels — red, visible */
#edit_pos_sell_form label.error,
#add_pos_sell_form label.error,
form[id*="pos_sell"] label.error,
.box-body label.error {
    color: #7b5c96 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: block !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px;
}

/* Mobile / Desktop visibility */
@media (min-width: 768px) {
    .pos-mobile-ctas { display: none !important; }
    .pos-desktop-cancel { display: flex !important; }
    .pos-desktop-pay { display: flex !important; }
    .pos-desktop-recent { display: flex !important; }
}
@media (max-width: 767px) {
    .pos-mobile-ctas { display: flex !important; }
    .pos-desktop-cancel { display: none !important; }
    .pos-desktop-pay { display: none !important; }
    .pos-desktop-recent { display: none !important; }
}

/* Payment section: its own card directly below the cart summary card; the notify bar sits
   below the product suggestions with space between the sections. */
html body .pos-layout-v2 .pos-form-actions {
    margin: 10px 0 0 !important; border-radius: 12px !important; box-shadow: 0 2px 10px rgba(17,17,26,.08) !important;
    border: 1px solid #eef0f4 !important; position: relative !important; clear: both;
}
html body .pos-notify-bar { margin-top: 12px; position: relative; clear: both; }
html body .pos-layout-v2 .pos-cart-card { height: auto !important; }
/* the phone's copy of the WhatsApp option overflowed the payment card; the notify bar below has it */
html body .pos-layout-v2 .pos-mobile-ctas label { display: none !important; }

/* ==========================================================================
   POS bottom row: payment (same width as the cart) and notifications (same width as the
   suggestions) in one row; payment buttons left to right with a distinct colour per method;
   notifications right-aligned. Phones stack the two. Scoped to the create page.
   ========================================================================== */
html body .pos-layout-v2 .pos-bottom-row { gap: 8px; margin-top: 10px; align-items: stretch; }
html body .pos-layout-v2 .pos-bottom-payment,
html body .pos-layout-v2 .pos-bottom-notify { min-width: 0; }
html body .pos-layout-v2 .pos-bottom-payment .pos-form-actions {
    position: static !important; width: 100% !important; height: 100%; box-sizing: border-box;
    margin: 0 !important; padding: 10px 12px !important; border-radius: 12px; border: 1px solid #eef0f4 !important;
    box-shadow: 0 2px 10px rgba(17,17,26,.08) !important; background: #ffffff !important; z-index: auto !important;
}
html body .pos-layout-v2 .pos-form-actions > div {
    min-height: 0 !important; overflow: visible !important; flex-wrap: wrap !important; gap: 6px !important;
    row-gap: 6px !important; justify-content: flex-start !important; padding: 0 !important;
}
html body .pos-layout-v2 .pos-form-actions div[style*="flex-wrap"] { flex-wrap: wrap !important; overflow: visible !important; }
html body .pos-layout-v2 .pos-form-actions div[style*="flex:1"],
html body .pos-layout-v2 .pos-form-actions span[style*="width:1px"] { display: none !important; }

/* payment buttons: consistent size; one colour per payment method */
html body .pos-layout-v2 .pos-form-actions button {
    min-height: 34px; padding: 6px 10px !important; border-radius: 8px !important; border: 0 !important;
    font-size: 12px !important; font-weight: 700 !important; color: #ffffff !important; background-image: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; white-space: nowrap; line-height: 1.2;
}
html body .pos-layout-v2 .pos-form-actions button i { color: inherit !important; }
html body .pos-layout-v2 .pos-form-actions button.js-pos-cancel {
    background: #ffffff !important; color: #7b5c96 !important; border: 2px solid #7b5c96 !important;
}
html body .pos-layout-v2 .pos-form-actions .pos-finalize,
html body .pos-layout-v2 .pos-form-actions .pos-delete { background: #7b5c96 !important; }
html body .pos-layout-v2 .pos-form-actions [data-pay_method="cash"] { background: #1d7f56 !important; }
html body .pos-layout-v2 .pos-form-actions [data-pay_method="card"] { background: #3b5bdb !important; }
html body .pos-layout-v2 .pos-form-actions [data-pay_method="credit_sale"] { background: #b45309 !important; }
html body .pos-layout-v2 .pos-form-actions [data-pay_method="suspend"] { background: #64748b !important; }
html body .pos-layout-v2 .pos-form-actions #pos-quotation { background: #0e7490 !important; }
html body .pos-layout-v2 .pos-form-actions #pos-draft { background: #475569 !important; }
html body .pos-layout-v2 .pos-form-actions .custom-payment-fast-checkout { background: #be185d !important; }
html body .pos-layout-v2 .pos-form-actions button:disabled { opacity: .5; }

/* notifications: right-aligned, compact */
html body .pos-layout-v2 .pos-bottom-notify .pos-notify-bar {
    margin: 0 !important; height: 100%; box-sizing: border-box; justify-content: flex-end; padding: 10px 12px;
}

/* phones: payment and notifications stack; nothing overflows horizontally */
@media (max-width: 1023px) {
    html body .pos-layout-v2 .pos-bottom-row { flex-direction: column; }
    html body .pos-layout-v2 .pos-bottom-payment, html body .pos-layout-v2 .pos-bottom-notify { width: 100% !important; }
    html body .pos-layout-v2 .pos-form-actions button { font-size: 11px !important; padding: 6px 8px !important; }
}
html body .pos-layout-v2 .pos-bottom-row, html body .pos-layout-v2 .pos-bottom-row * { max-width: 100%; box-sizing: border-box; }

/* ==========================================================================
   POS main row: the product selection and the cart are the same height. On desktop the row
   has a fixed height and each column fills it; the cart table and the product list scroll
   inside their own column. On phones the columns stack and each scrolls within a set height.
   ========================================================================== */
@media (min-width: 1024px) {
    html body .pos-layout-v2 .pos-main-row {
        height: calc(100vh - 120px); min-height: 560px; align-items: stretch !important;
    }
    html body .pos-layout-v2 .pos-main-row > div { min-height: 0; display: flex; flex-direction: column; }
    html body .pos-layout-v2 .pos-main-row > div > .pos-cart-card,
    html body .pos-layout-v2 .pos-main-row #pos_sidebar_wrap { height: 100% !important; min-height: 0; }
    html body .pos-layout-v2 .pos-main-row .pos-cart-card { display: flex; flex-direction: column; }
    html body .pos-layout-v2 .pos-main-row .pos-cart-card > .box-body {
        flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; height: 100%;
    }
    html body .pos-layout-v2 .pos-main-row .pos-cart-card .pos_product_div {
        flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important;
        overflow-y: auto !important;
    }
    html body .pos-layout-v2 .pos-main-row .pos-cart-card > .box-body > .pos_form_totals { flex: none; }
    html body .pos-layout-v2 .pos-main-row #pos_sidebar_wrap > div { height: 100%; }
    html body .pos-layout-v2 .pos-main-row .pos-sidebar-root { height: 100% !important; display: flex; flex-direction: column; }
    html body .pos-layout-v2 .pos-main-row #product_list_body {
        flex: 1 1 0 !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important;
    }
}
@media (max-width: 1023px) {
    html body .pos-layout-v2 .pos-main-row .pos-cart-card .pos_product_div { max-height: 52vh; overflow-y: auto; }
    html body .pos-layout-v2 .pos-main-row #product_list_body { max-height: 60vh !important; overflow-y: auto !important; }
}
/* the row that holds the cart table takes the free height, so the Cart Summary stays at the bottom */
@media (min-width: 1024px) {
    html body .pos-layout-v2 .pos-main-row .pos-cart-card > .box-body > .row:has(.pos_product_div) {
        flex: 1 1 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important;
    }
}

/* notifications bar: Suspend, Draft and No Reward Point (moved from the payment section) */
html body .pos-notify-bar button[data-pay_method="suspend"],
html body .pos-notify-bar #pos-draft {
    display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px;
    min-height: 34px; padding: 6px 12px !important; border: 0 !important; border-radius: 8px !important;
    font-size: 12px !important; font-weight: 700 !important; color: #ffffff !important; white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
}
html body .pos-notify-bar button[data-pay_method="suspend"] { background: #64748b !important; }
html body .pos-notify-bar #pos-draft { background: #475569 !important; }
html body .pos-notify-bar button[data-pay_method="suspend"] i,
html body .pos-notify-bar #pos-draft i { color: #ffffff !important; }
html body .pos-notify-bar .pos-desktop-no-rp label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
html body .pos-notify-bar { flex-wrap: wrap; gap: 8px; }

/* POS screen height: the product cart and product suggestions are a little shorter, so the
   payment and notifications row stays in view without scrolling on common desktop heights. */
@media (min-width: 1024px) {
    html body .pos-layout-v2 .pos-main-row { height: calc(100vh - 200px); min-height: 440px; }
    html body .pos-layout-v2 .pos-bottom-row { margin-top: 8px; }
}
@media (max-width: 1023px) {
    html body .pos-layout-v2 .pos-main-row .pos-cart-card .pos_product_div { max-height: 42vh; }
    html body .pos-layout-v2 .pos-main-row #product_list_body { max-height: 48vh !important; }
}

/* Service staff dropdown: hover and selected options use the brand purple (#545775) */
html body .bt-staff-dropdown .select2-results__option--highlighted,
html body .bt-staff-dropdown .select2-results__option--highlighted[aria-selected],
html body .bt-staff-dropdown .select2-results__option[aria-selected="true"]:hover {
    background-color: #545775 !important; color: #ffffff !important;
}
html body .bt-staff-dropdown .select2-results__option[aria-selected="true"] {
    background-color: rgba(84, 87, 117, 0.14) !important; color: #2b2d42 !important;
}

/* notifications bar: left group (No Reward Point, Draft, Suspend) and right group (Send WhatsApp,
   Recent Transactions), with space between them. Stacks on narrow screens. */
html body .pos-notify-bar { justify-content: space-between !important; align-items: center; }
html body .pos-notify-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
html body .pos-notify-group--left { justify-content: flex-start; }
html body .pos-notify-group--right { justify-content: flex-end; margin-left: auto; }
@media (max-width: 767px) {
    html body .pos-notify-group--right { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* Service staff dropdown: the open and focused selector uses the brand purple (#545775) */
select.order_line_service_staff + .select2-container--open .select2-selection--single,
select.order_line_service_staff + .select2-container--focus .select2-selection--single,
#change_service_staff select.select2 + .select2-container--open .select2-selection--single,
#change_service_staff select.select2 + .select2-container--focus .select2-selection--single {
    border-color: #545775 !important; box-shadow: 0 0 0 3px rgba(84, 87, 117, 0.22) !important; outline: 0 !important;
}
select.order_line_service_staff + .select2-container .select2-search__field:focus,
#change_service_staff select.select2 + .select2-container .select2-search__field:focus {
    border-color: #545775 !important; outline: 0 !important;
}
html body .bt-staff-dropdown .select2-search__field:focus { border-color: #545775 !important; }

/* native (non-select2) service staff and location selects: option highlight uses the brand purple */
select.order_line_service_staff option:checked, select.order_line_service_staff option:hover,
select#select_location_id option:checked, select#select_location_id option:hover {
    background-color: #545775 !important; color: #ffffff !important;
}

/* Service staff replacement dialog: its selects are select2 now; the open list and hover use the purple */
html body #change_service_staff select + .select2-container .select2-selection--single { border-color: #545775 !important; }
html body #change_service_staff select + .select2-container--open .select2-selection--single,
html body #change_service_staff select + .select2-container--focus .select2-selection--single {
    border-color: #545775 !important; box-shadow: 0 0 0 3px rgba(84, 87, 117, 0.22) !important;
}

/* Repair job sheet: the Assign Operator/Technician selects (open and focused states) use the brand purple */
select#service_staff + .select2-container--open .select2-selection--single,
select#service_staff + .select2-container--focus .select2-selection--single,
select.assignment-tech-select + .select2-container--open .select2-selection--single,
select.assignment-tech-select + .select2-container--focus .select2-selection--single {
    border-color: #545775 !important; box-shadow: 0 0 0 3px rgba(84, 87, 117, 0.22) !important; outline: 0 !important;
}

/* POS top-right actions (Go Back, Service Staff Availability, Close Register, Register Details,
   Calculator, Full Screen, View Suspended): one background-free style. Purple (#545775) icons;
   a light purple tint on hover and a deeper one on press. Positions, IDs and actions are unchanged. */
html body #show_service_staff_availability,
html body #close_register,
html body #register_details,
html body #btnCalculator,
html body #view_suspended_sales,
html body #full_screen,
html body a:has(> strong > .fa-backward) {
    background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
    color: #545775 !important; border-radius: 8px !important; min-width: 0 !important; width: auto !important;
    height: 32px !important; min-height: 32px !important; padding: 0 8px !important; margin: 0 2px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; transition: background-color .15s ease, transform .1s ease !important;
}
html body #show_service_staff_availability i, html body #close_register i, html body #register_details i,
html body #btnCalculator i, html body #view_suspended_sales i, html body #full_screen i,
html body a:has(> strong > .fa-backward) i,
html body #show_service_staff_availability strong, html body #close_register strong, html body #register_details strong,
html body #btnCalculator strong, html body #view_suspended_sales strong, html body #full_screen strong,
html body a:has(> strong > .fa-backward) strong {
    color: #545775 !important; font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; padding: 0 !important;
}
html body #show_service_staff_availability:hover, html body #close_register:hover, html body #register_details:hover,
html body #btnCalculator:hover, html body #view_suspended_sales:hover, html body #full_screen:hover,
html body a:has(> strong > .fa-backward):hover {
    background: rgba(84, 87, 117, 0.10) !important; color: #545775 !important;
}
html body #show_service_staff_availability:active, html body #close_register:active, html body #register_details:active,
html body #btnCalculator:active, html body #view_suspended_sales:active, html body #full_screen:active,
html body a:has(> strong > .fa-backward):active {
    background: rgba(84, 87, 117, 0.20) !important; transform: scale(.96);
}
html body #show_service_staff_availability:focus-visible, html body #close_register:focus-visible, html body #register_details:focus-visible,
html body #btnCalculator:focus-visible, html body #view_suspended_sales:focus-visible, html body #full_screen:focus-visible,
html body a:has(> strong > .fa-backward):focus-visible {
    outline: 2px solid rgba(84, 87, 117, 0.45) !important; outline-offset: 1px;
}

/* Print / print preview / browser PDF: the on-screen toast notifications (for example "Sale Added
   Successfully") are not part of the invoice. They stay on screen; print output excludes them. */
@media print {
    #toast-container, .toast-container, .toast-top-right, .toast-bottom-right, .toast-top-left,
    .toast-bottom-left, .toast-top-center, .toast-bottom-center, .toast-top-full-width,
    .toast-bottom-full-width, .toast-success, .toast-error, .toast-info, .toast-warning {
        display: none !important;
    }
}

/* User profile dropdown (top bar): the panel is white, so its text is dark for contrast.
   The name on the dark top bar stays white. Layout and actions are unchanged. */
html body details.tw-relative > ul { color: #1f2233; }
html body details.tw-relative > ul p.tw-text-xs { color: #4b5263 !important; font-weight: 600; }
html body details.tw-relative > ul p.tw-text-sm { color: #1f2233 !important; font-weight: 700 !important; }
html body details.tw-relative > ul a,
html body details.tw-relative > ul a span { color: #1f2233 !important; }
html body details.tw-relative > ul a:hover { color: #545775 !important; background: rgba(84, 87, 117, 0.08) !important; }
html body details.tw-relative > ul a svg { color: #545775; }

/* Sidebar premium module entries: background reduced by 20% (80% opacity of the module colour). */
#app-sidebar a[href*="/indian-accounting"], #app-sidebar a[href*="indianaccounting"] { background-color: rgba(65, 195, 169, 0.8) !important; }
#app-sidebar a[href*="/repair"] { background-color: rgba(244, 208, 120, 0.8) !important; }
#app-sidebar a[href*="/crm"] { background-color: rgba(221, 113, 162, 0.8) !important; }
#app-sidebar a[href*="/whatsapp"] { background-color: rgba(78, 197, 173, 0.8) !important; }
#app-sidebar a[href*="/business-intelligence"] { background-color: rgba(82, 136, 175, 0.8) !important; }
#app-sidebar a[href*="/advanced-reports"] { background-color: rgba(164, 123, 200, 0.8) !important; }
#app-sidebar a[href*="/affiliate"] { background-color: rgba(253, 97, 97, 0.8) !important; }
#app-sidebar a[href*="/promotion"], #app-sidebar a[href*="/offerandpromotion"] { background-color: rgba(241, 115, 79, 0.8) !important; }
#app-sidebar a[href*="/essentials"] { background-color: rgba(181, 214, 107, 0.8) !important; }
#app-sidebar a[href*="/hms"] { background-color: rgba(127, 168, 201, 0.8) !important; }
#app-sidebar a[href*="/buyback"] { background-color: rgba(224, 169, 109, 0.8) !important; }
#app-sidebar a[href*="/manufacturing"] { background-color: rgba(102, 187, 106, 0.8) !important; }
#app-sidebar a[href*="/superadmin"] { background-color: rgba(143, 146, 170, 0.8) !important; }
#app-sidebar a[href*="/marketing-studio"] { background-color: rgba(255, 183, 77, 0.8) !important; }
#app-sidebar a[href*="/ai-connect"] { background-color: rgba(120, 144, 156, 0.8) !important; }
#app-sidebar a[href*="/asset"] { background-color: rgba(149, 117, 205, 0.8) !important; }
#app-sidebar a[href*="/connector"] { background-color: rgba(38, 166, 154, 0.8) !important; }
#app-sidebar a[href*="/accounting"]:not([href*="indian"]) { background-color: rgba(117, 136, 222, 0.8) !important; }

/* User avatars (assignee images in CRM/lead tables and cards).
   Previously in app.css, which phase 2 removed; restored so they don't render at full image size. */
.user_avatar {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 1px;
}

/* Index-page table footers (DataTables totals rows): bold and slightly larger.
   Scoped to .dataTables_wrapper so POS, receipts and other non-DataTables tfoot are unaffected.
   The wrapper also covers the separate footer table DataTables creates when scrollY is on. */
.dataTables_wrapper tfoot td,
.dataTables_wrapper tfoot th {
  font-weight: 700 !important;
  font-size: 15px !important;
}
.dataTables_wrapper tfoot td strong {
  white-space: nowrap;
}

/* ==========================================================================
   GRADIENT "ADD" BUTTONS (tw-dw-btn tw-bg-gradient-*): the Tailwind gradient
   stops are not compiled, so the label could sit on a white background and
   disappear (for example "Add Location"). Force the accent fill and white text.
   ========================================================================== */
html body .tw-dw-btn[class*="tw-bg-gradient-"] {
  background-color: var(--bt-accent) !important;
  background-image: linear-gradient(135deg, var(--bt-accent), var(--bt-accent-hover)) !important;
  border-color: var(--bt-accent) !important;
  color: #fff !important;
}
html body .tw-dw-btn[class*="tw-bg-gradient-"] svg,
html body .tw-dw-btn[class*="tw-bg-gradient-"] i,
html body .tw-dw-btn[class*="tw-bg-gradient-"] span {
  color: #fff !important;
  stroke: currentColor;
}
html body .tw-dw-btn[class*="tw-bg-gradient-"]:hover,
html body .tw-dw-btn[class*="tw-bg-gradient-"]:focus {
  background-color: var(--bt-accent-hover) !important;
  background-image: linear-gradient(135deg, var(--bt-accent-hover), #4f3f63) !important;
  border-color: var(--bt-accent-hover) !important;
  color: #fff !important;
}
/* Inside a primary box header the header is already the accent colour, so the
   button becomes a translucent white pill with a white outline to stay visible. */
html body .box-primary > .box-header .tw-dw-btn[class*="tw-bg-gradient-"] {
  background-color: rgba(255, 255, 255, .18) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  color: #fff !important;
}
html body .box-primary > .box-header .tw-dw-btn[class*="tw-bg-gradient-"]:hover,
html body .box-primary > .box-header .tw-dw-btn[class*="tw-bg-gradient-"]:focus {
  background-color: rgba(255, 255, 255, .30) !important;
  background-image: none !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ==========================================================================
   NATIVE SELECT DROPDOWNS (Invoice Layout, Invoice Scheme, POS, Default
   Account, Add Location State and every other form-control select): white
   field, brand border, custom chevron and the accent focus ring, matching
   the select2 fields. Multi-selects and select2's hidden originals are skipped.
   ========================================================================== */
html body select.form-control:not([multiple]):not([size]),
html body select.form-control-sm:not([multiple]):not([size]),
html body select.input-sm:not([multiple]):not([size]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--bt-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23646a80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 12px 8px !important;
  border: 1px solid var(--bt-border-strong) !important;
  border-radius: 4.8px !important;
  color: var(--bt-text-strong) !important;
  padding-right: 32px !important;
  box-shadow: none !important;
  text-overflow: ellipsis;
}
html body select.form-control:not([multiple]):not([size]):focus,
html body select.form-control-sm:not([multiple]):not([size]):focus,
html body select.input-sm:not([multiple]):not([size]):focus {
  border-color: var(--bt-accent) !important;
  box-shadow: 0 0 0 3px var(--bt-accent-tint-strong) !important;
  outline: none !important;
}
html body select.form-control:not([multiple]):disabled,
html body select.form-control:not([multiple])[readonly] {
  background-color: #f6f8fb !important;
  color: var(--bt-muted) !important;
  cursor: not-allowed;
}
html body select.form-control option,
html body select.form-control-sm option,
html body select.input-sm option {
  background-color: var(--bt-surface);
  color: var(--bt-text-strong);
}
html body select.form-control option:checked,
html body select.form-control-sm option:checked,
html body select.input-sm option:checked {
  background-color: var(--bt-accent-tint);
  color: var(--bt-accent-hover);
}

/* ==========================================================================
   BUTTON COLOUR CONCEPT (view pages and everywhere else)
   Each solid action keeps its own colour; they were all forced to the one
   accent. Primary stays the brand purple. Success, warning, info and accent
   get distinct colours with white text (all above 4.5:1 contrast).
   Outline and neutral buttons are unchanged.
   ========================================================================== */
html body .btn-success:not(.btn-outline):not([data-bt-act]),
html body .tw-dw-btn-success:not(.tw-dw-btn-outline):not([data-bt-act]),
html body .tw-dw-btn.tw-dw-btn-success:not(.tw-dw-btn-outline):not([data-bt-act]) {
  background-color: #1d7f56 !important;
  background-image: none !important;
  border-color: #1d7f56 !important;
  color: #fff !important;
}
html body .btn-success:not([data-bt-act]):hover, html body .btn-success:not([data-bt-act]):focus,
html body .tw-dw-btn-success:not([data-bt-act]):hover, html body .tw-dw-btn.tw-dw-btn-success:not(.tw-dw-btn-outline):not([data-bt-act]):hover {
  background-color: #166a46 !important;
  border-color: #166a46 !important;
  color: #fff !important;
}

html body .btn-info:not(.btn-outline):not([data-bt-act]),
html body .tw-dw-btn-info:not(.tw-dw-btn-outline):not([data-bt-act]),
html body .tw-dw-btn.tw-dw-btn-info:not(.tw-dw-btn-outline):not([data-bt-act]) {
  background-color: #0f766e !important;
  background-image: none !important;
  border-color: #0f766e !important;
  color: #fff !important;
}
html body .btn-info:not([data-bt-act]):hover, html body .btn-info:not([data-bt-act]):focus,
html body .tw-dw-btn-info:not([data-bt-act]):hover, html body .tw-dw-btn.tw-dw-btn-info:not(.tw-dw-btn-outline):not([data-bt-act]):hover {
  background-color: #0c5f58 !important;
  border-color: #0c5f58 !important;
  color: #fff !important;
}

html body .btn-warning:not(.btn-outline):not([data-bt-act]),
html body .tw-dw-btn-warning:not(.tw-dw-btn-outline):not([data-bt-act]),
html body .tw-dw-btn.tw-dw-btn-warning:not(.tw-dw-btn-outline):not([data-bt-act]) {
  background-color: #b45309 !important;
  background-image: none !important;
  border-color: #b45309 !important;
  color: #fff !important;
}
html body .btn-warning:not([data-bt-act]):hover, html body .btn-warning:not([data-bt-act]):focus,
html body .tw-dw-btn-warning:not([data-bt-act]):hover, html body .tw-dw-btn.tw-dw-btn-warning:not(.tw-dw-btn-outline):not([data-bt-act]):hover {
  background-color: #92400e !important;
  border-color: #92400e !important;
  color: #fff !important;
}

html body .tw-dw-btn-accent:not(.tw-dw-btn-outline):not([data-bt-act]),
html body .tw-dw-btn.tw-dw-btn-accent:not(.tw-dw-btn-outline):not([data-bt-act]) {
  background-color: #9f1d5c !important;
  background-image: none !important;
  border-color: #9f1d5c !important;
  color: #fff !important;
}
html body .tw-dw-btn-accent:not(.tw-dw-btn-outline):not([data-bt-act]):hover,
html body .tw-dw-btn.tw-dw-btn-accent:not(.tw-dw-btn-outline):not([data-bt-act]):hover {
  background-color: #831843 !important;
  border-color: #831843 !important;
  color: #fff !important;
}

/* Print and packing-slip buttons print their colour (receipts and invoices). */
html body a.print-invoice,
html body a.print-invoice.tw-dw-btn {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---- Data table headers: plain theme header (light background, dark text) ---- */
/* Room for the sort arrows so they do not sit on the header text */
html body table.dataTable > thead > tr > th.sorting,
html body table.dataTable > thead > tr > th.sorting_asc,
html body table.dataTable > thead > tr > th.sorting_desc {
  padding-right: 24px !important;
}

/* ==========================================================================
   POPOVERS: Bootstrap inserts a popover next to its trigger, so the plan
   badge popover in the top bar inherits the bar's light text on a white box.
   Popovers are white cards with dark text, wherever they are inserted.
   ========================================================================== */
html body .popover,
html body .app-header .popover,
html body .main-header .popover {
    color: var(--bt-text-strong) !important;
    background-color: #fff !important;
}
html body .popover .popover-title,
html body .popover .popover-content,
html body .popover .popover-content * {
    color: var(--bt-text-strong);
}

/* Data table header text is bold */
html body table.dataTable > thead > tr > th,
html body .dataTables_scrollHead table.dataTable > thead > tr > th,
html body .dataTables_scrollHeadInner table > thead > tr > th {
  font-weight: 700 !important;
}

/* ==========================================================================
   APPLIED MODE (Aquiry pattern): top bar dark #18181a, sidebar light.
   Source: Aquiry template data-topbar-colors=dark, data-sidebar-colors=light.
   ========================================================================== */
html body .app-header, html body header.main-header, html body .main-header,
html body .main-header .navbar, html body .skin-blue-light .main-header,
html body .skin-blue-light .main-header .navbar, html body .navbar.navbar-static-top {
    background: #18181a !important;
    background-image: none !important;
    border-bottom: 1px solid #2a2a2e !important;
    color: #e5e7f0 !important;
}
html body .app-header a, html body .main-header a, html body .app-header .text-muted {
    color: #e5e7f0 !important;
}
html body #app-sidebar,
html body #app-sidebar #side-bar {
    background-color: #ffffff !important;
    background-image: none !important;
    border-right: 1px solid #e9e9e9 !important;
}
html body #app-sidebar #side-bar a,
html body #app-sidebar #side-bar a:focus,
html body #app-sidebar #side-bar a[class*="bg-gray"],
html body #app-sidebar #side-bar .chiled a {
    background-color: transparent !important;
    background-image: none !important;
    color: #5f6a7a !important;
    box-shadow: none !important;
}
html body #app-sidebar #side-bar a:hover {
    background-color: #f3f4f6 !important;
    background-image: none !important;
    color: #1f2233 !important;
}
html body #app-sidebar #side-bar a svg,
html body #app-sidebar #side-bar a i,
html body #app-sidebar #side-bar a .tw-truncate,
html body #app-sidebar #side-bar a span {
    color: inherit !important;
    fill: none;
}
html body #app-sidebar #side-bar a.tw-bg-gray-200,
html body #app-sidebar #side-bar a.tw-bg-gray-200 .tw-truncate,
html body #app-sidebar #side-bar a.tw-bg-gray-200 span {
    background-color: rgba(123, 92, 150, .12) !important;
    color: #7b5c96 !important;
    font-weight: 700 !important;
}
/* Group names (Reports, etc.): dark background, white text */
html body #app-sidebar #side-bar .tw-rounded-md,
html body #app-sidebar #side-bar div.tw-rounded-md.tw-uppercase {
    background-color: #18181a !important;
    color: #ffffff !important;
}
html body #app-sidebar #side-bar .tw-px-3.tw-py-2.tw-text-xs:not(.tw-rounded-md),
html body #app-sidebar #side-bar .tw-uppercase:not(.tw-rounded-md) {
    color: #6b7280 !important;
}
/* Top bar badges and buttons are light on the dark top bar (applied mode). */
html body .app-header .header-badge.danger,
html body .app-header .header-badge.success {
    color: #e5e7f0 !important;
    border-color: rgba(255, 255, 255, .25) !important;
}
html body .app-header .header-badge.success:hover {
    background: rgba(255, 255, 255, .1) !important;
}

/* AI Connect menu item on the light sidebar: its own rules set white text and
   icon, which vanish on white. Dark text and icon; the active page keeps the
   purple tint. Three ids so these beat the module-specific rules. */
html body #app-sidebar #side-bar a#menu-ai-connect,
html body #app-sidebar #side-bar a#menu-ai-connect:hover,
html body #app-sidebar #side-bar a#menu-ai-connect:focus {
    background-color: transparent !important;
    background-image: none !important;
    color: #1f2233 !important;
    font-weight: 600 !important;
}
html body #app-sidebar #side-bar a#menu-ai-connect:hover {
    background-color: #f3f4f6 !important;
}
html body #app-sidebar #side-bar a#menu-ai-connect svg,
html body #app-sidebar #side-bar a#menu-ai-connect svg.tw-size-5,
html body #app-sidebar #side-bar a#menu-ai-connect:hover svg,
html body #app-sidebar #side-bar a#menu-ai-connect:hover svg.tw-size-5,
html body #app-sidebar #side-bar a#menu-ai-connect i,
html body #app-sidebar #side-bar a#menu-ai-connect span,
html body #app-sidebar #side-bar a#menu-ai-connect .tw-truncate {
    color: #1f2233 !important;
    stroke: currentColor;
}
html body #app-sidebar #side-bar a#menu-ai-connect.tw-bg-gray-200,
html body #app-sidebar #side-bar a#menu-ai-connect.tw-bg-gray-200 svg,
html body #app-sidebar #side-bar a#menu-ai-connect.tw-bg-gray-200 span,
html body #app-sidebar #side-bar a#menu-ai-connect.tw-bg-gray-200 .tw-truncate {
    background-color: rgba(123, 92, 150, .12) !important;
    background-image: none !important;
    color: #7b5c96 !important;
}

/* ==========================================================================
   INDEX PAGE TAB NAVIGATION: dark bar with light text (same dark as the top
   bar). Applies to page tabs, not to tabs inside modals.
   ========================================================================== */
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs),
html body section.content > .nav-tabs:not(.modal .nav-tabs),
html body section.content .nav.nav-tabs:not(.modal .nav-tabs),
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) {
    background-color: #18181a !important;
    background-image: none !important;
    border-bottom: 1px solid #2a2a2e !important;
    border-radius: 6px 6px 0 0;
}
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li > a,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li > a,
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) > li > a {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #d6d9e4 !important;
}
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li > a:hover,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li > a:hover,
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) > li > a:hover {
    background-color: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
}
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li.active > a,
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li.active > a:hover,
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li.active > a:focus,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li.active > a,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li.active > a:hover,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li.active > a:focus,
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) > li.active > a {
    background-color: rgba(255, 255, 255, .14) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Index page tab bars: the dark bar is only as wide as its menu items. */
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs),
html body section.content > .nav-tabs:not(.modal .nav-tabs),
html body section.content .nav.nav-tabs:not(.modal .nav-tabs),
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) {
    display: inline-flex !important;
    flex-wrap: wrap;
    width: auto !important;
    max-width: 100%;
}
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li,
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) > li {
    float: none !important;
}

/* Index page tabs: each tab is white with dark text; only the selected tab is dark
   with light text. The bar itself has no background. */
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs),
html body section.content > .nav-tabs:not(.modal .nav-tabs),
html body section.content .nav.nav-tabs:not(.modal .nav-tabs),
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) {
    background-color: transparent !important;
    border-bottom: 1px solid #e5e7eb !important;
    gap: 6px;
}
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li > a,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li > a,
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) > li > a {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-bottom-color: transparent !important;
    border-radius: 6px 6px 0 0 !important;
    color: #1f2233 !important;
    font-weight: 600 !important;
}
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li > a:hover,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li > a:hover,
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) > li > a:hover {
    background-color: #f3f4f6 !important;
    color: #1f2233 !important;
}
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li.active > a,
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li.active > a:hover,
html body .nav-tabs-custom > .nav-tabs:not(.modal .nav-tabs) > li.active > a:focus,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li.active > a,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li.active > a:hover,
html body section.content .nav.nav-tabs:not(.modal .nav-tabs) > li.active > a:focus,
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) > li.active > a,
html body .box > .box-header > .nav-tabs:not(.modal .nav-tabs) > li.active > a:hover {
    background-color: #18181a !important;
    border-color: #18181a !important;
    color: #ffffff !important;
}

/* Contact page tabs (Ledger, Purchases, Sells, Payments, Activities...). These are
   full-width justified tabs. The index-page rules above make .nav-tabs inline-flex with
   width:auto, which squeezed each tab to its longest word. Loaded last so it wins. */
html body .nav-tabs-custom > .nav-tabs.nav-justified:not(.modal .nav-tabs) {
    display: flex !important;
    flex-wrap: wrap;
    width: 100% !important;
    max-width: 100%;
}
html body .nav-tabs-custom > .nav-tabs.nav-justified:not(.modal .nav-tabs) > li {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}