/* ==========================================================================
   UltimatePOS — App Modern (Phase 2)
   Theme-neutral component layer for the whole admin app (everything except
   the POS operator screen, which is excluded via body:not(.lockscreen) and
   styled by pos-modern.css).
   All colors read var(--upos-*) from tokens.css; dark-theme.css redefines
   the tokens in dark mode, so this one file serves both themes.
   Loaded AFTER pos-modern.css so it wins ties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cards / boxes
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .box {
    background: var(--upos-surface) !important;
    border: 1px solid var(--upos-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--upos-shadow-card) !important;
}
/* Default (non-solid) box headers: modern bar with tokenized border.
   box-solid keeps its identity color (higher-specificity vendor rules). */
body:not(.lockscreen) .box:not(.box-solid) > .box-header {
    background: transparent !important;
    color: var(--upos-text) !important;
    border-bottom: 1px solid var(--upos-border) !important;
    border-radius: 13px 13px 0 0;
    padding: 13px 16px !important;
    min-height: auto !important;
}
body:not(.lockscreen) .box:not(.box-solid) > .box-header .box-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--upos-text) !important;
    letter-spacing: -0.1px;
    margin: 0 !important;
}
body:not(.lockscreen) .box > .box-body {
    padding: 16px;
    border-radius: 0 0 13px 13px;
}
body:not(.lockscreen) .box > .box-footer {
    border-top: 1px solid var(--upos-border) !important;
    padding: 12px 16px !important;
}

/* Dashboard KPI cards */
body:not(.lockscreen) .small-box {
    background: var(--upos-surface) !important;
    border: 1px solid var(--upos-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--upos-shadow-card) !important;
    overflow: hidden;
    transition: border-color var(--upos-dur) var(--upos-ease), transform var(--upos-dur) var(--upos-ease);
}
body:not(.lockscreen) .small-box:hover {
    border-color: var(--upos-border-2) !important;
    transform: translateY(-2px);
}
body:not(.lockscreen) .small-box .small-box-text {
    font-size: 13px !important;
    font-weight: 500;
    color: var(--upos-text-muted) !important;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
}
body:not(.lockscreen) .small-box .small-box-value {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--upos-text) !important;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    white-space: normal;
}

/* --------------------------------------------------------------------------
   Tables (app-wide; POS table excluded via body:not(.lockscreen))
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .table { margin-bottom: 0; }
body:not(.lockscreen) .table:not(.table-condensed):not(.table-slim) > thead > tr > th {
    background: var(--upos-surface-2) !important;
    /* text-2 (not muted): reads crisply on both themes — on dark the muted
       slate (#8291ad on #101a2e) looked dim and washed out (All Sales header). */
    color: var(--upos-text-2) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--upos-border-2) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}
/* DataTables sort arrows: vendor.css anchors them at the cell bottom with
   low opacity, so on dark they read as faint smudges colliding with the
   label. Vertically center them on the label line instead. */
body:not(.lockscreen) .table thead th.sorting::after,
body:not(.lockscreen) .table thead th.sorting_asc::after,
body:not(.lockscreen) .table thead th.sorting_desc::after,
body:not(.lockscreen) .table thead th.sorting_asc_disabled::after,
body:not(.lockscreen) .table thead th.sorting_desc_disabled::after {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}
/* Reserve room for the sort arrow so it never paints over the label.
   When a column is sized tight to its header text (real-data widths),
   the arrow (right:8px) used to sit on the last character. Padding
   counts toward auto-layout min width, so the arrow lands in clear
   space even at the tightest column widths. */
body:not(.lockscreen) .table:not(.table-condensed):not(.table-slim) > thead > tr > th.sorting,
body:not(.lockscreen) .table:not(.table-condensed):not(.table-slim) > thead > tr > th.sorting_asc,
body:not(.lockscreen) .table:not(.table-condensed):not(.table-slim) > thead > tr > th.sorting_desc,
body:not(.lockscreen) .table:not(.table-condensed):not(.table-slim) > thead > tr > th.sorting_asc_disabled,
body:not(.lockscreen) .table:not(.table-condensed):not(.table-slim) > thead > tr > th.sorting_desc_disabled {
    padding-right: 30px !important;
}

/* Dark theme: lift the sort arrows off the background (accent on the
   active column so the current sort is obvious at a glance). */
html[data-theme="dark"] .table thead th.sorting::after {
    color: var(--upos-text-2) !important;
    opacity: .8 !important;
}
html[data-theme="dark"] .table thead th.sorting_asc::after,
html[data-theme="dark"] .table thead th.sorting_desc::after {
    color: var(--upos-accent) !important;
    opacity: .95 !important;
}

body:not(.lockscreen) .table:not(.table-condensed):not(.table-slim) > tbody > tr > td {
    border-top: 1px solid var(--upos-border) !important;
    border-bottom: 1px solid var(--upos-border) !important;
    color: var(--upos-text);
    font-size: 13.5px;
    padding: 10px 12px;
    vertical-align: middle;
}
body:not(.lockscreen) .table.table-bordered {
    border: 1px solid var(--upos-border) !important;
    border-radius: 10px;
}
body:not(.lockscreen) .table.table-bordered > thead > tr > th:first-child,
body:not(.lockscreen) .table.table-bordered > tbody > tr > td:first-child { border-left: none !important; }
body:not(.lockscreen) .table.table-bordered > thead > tr > th:last-child,
body:not(.lockscreen) .table.table-bordered > tbody > tr > td:last-child { border-right: none !important; }

/* Remove zebra striping; use a soft accent hover instead */
body:not(.lockscreen) .table.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; }
body:not(.lockscreen) .table.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent; }
body:not(.lockscreen) .table > tbody > tr:hover > * { background-color: var(--upos-accent-soft); }

/* DataTables chrome */
body:not(.lockscreen) .dataTables_wrapper .dataTables_length,
body:not(.lockscreen) .dataTables_wrapper .dataTables_filter,
body:not(.lockscreen) .dataTables_wrapper .dataTables_info {
    color: var(--upos-text-2);
    font-size: 13px;
}
body:not(.lockscreen) .dataTables_wrapper .dataTables_length select,
body:not(.lockscreen) .dataTables_wrapper .dataTables_filter input {
    border-radius: 8px;
    border-color: var(--upos-border-2);
}
body:not(.lockscreen) .dataTables_paginate .pagination { margin: 14px 0 4px !important; }
body:not(.lockscreen) .dataTables_paginate .pagination > li > span,
body:not(.lockscreen) .dataTables_paginate .pagination > li > a {
    border-radius: 8px !important;
    margin: 0 2px;
    border-color: var(--upos-border-2) !important;
    color: var(--upos-text-2) !important;
    background: var(--upos-surface) !important;
    min-width: 34px;
    text-align: center;
    box-shadow: none !important;
}
body:not(.lockscreen) .dataTables_paginate .pagination > li > a:hover {
    background: var(--upos-surface-2) !important;
    color: var(--upos-text) !important;
}
body:not(.lockscreen) .dataTables_paginate .pagination > li.active > span {
    background: var(--upos-accent) !important;
    border-color: var(--upos-accent) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .btn {
    border-radius: 9px;
    font-weight: 600;
    transition: background-color var(--upos-dur) var(--upos-ease),
                color var(--upos-dur) var(--upos-ease),
                border-color var(--upos-dur) var(--upos-ease),
                box-shadow var(--upos-dur) var(--upos-ease),
                transform 100ms ease;
}
body:not(.lockscreen) .btn:active { transform: scale(0.985); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .form-control {
    border-radius: 10px;
    border-color: var(--upos-border-2);
    background-color: var(--upos-surface);
    color: var(--upos-text);
    box-shadow: none;
}
body:not(.lockscreen) .form-control:focus {
    border-color: var(--upos-accent);
    box-shadow: 0 0 0 3px var(--upos-accent-soft);
}
/* Hover affordance — controls visibly react before focus, so it is
   obvious exactly what is interactive (theme-aware via tokens) */
body:not(.lockscreen) .form-control {
    transition: border-color var(--upos-dur) var(--upos-ease),
                background-color var(--upos-dur) var(--upos-ease),
                box-shadow var(--upos-dur) var(--upos-ease);
}
body:not(.lockscreen) .form-control:hover:not(:focus):not(:disabled):not([readonly]) {
    background-color: var(--upos-surface-hover);
    border-color: var(--upos-border-hover);
}
body:not(.lockscreen) select.form-control {
    cursor: pointer;
}
/* Text caret always visible — the browser defaults caret-color to the
   element's text color, which in dark mode was black-on-dark (invisible)
   on inputs styled with tw-text-black. */
body:not(.lockscreen) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
body:not(.lockscreen) textarea,
body:not(.lockscreen) [contenteditable="true"] {
    caret-color: var(--upos-accent, #646EE4);
}
body:not(.lockscreen) .form-group > label,
body:not(.lockscreen) label.control-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--upos-text-2);
    margin-bottom: 6px;
}
/* Select2 rendered controls match the input shape */
body:not(.lockscreen) .select2-container--default .select2-selection--single,
body:not(.lockscreen) .select2-container--default .select2-selection--multiple {
    border-radius: 10px !important;
    border-color: var(--upos-border-2) !important;
    background-color: var(--upos-surface) !important;
    box-shadow: none !important;
}
body:not(.lockscreen) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--upos-text);
    line-height: 2.2;
}
body:not(.lockscreen) .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--upos-text-muted);
}
body:not(.lockscreen) .select2-dropdown {
    border-radius: 10px !important;
    border-color: var(--upos-border-2) !important;
    box-shadow: var(--upos-shadow-pop) !important;
}
/* Select2: same hover affordance as native controls (light) */
body:not(.lockscreen) .select2-container--default .select2-selection--single,
body:not(.lockscreen) .select2-container--default .select2-selection--multiple {
    transition: border-color var(--upos-dur) var(--upos-ease),
                background-color var(--upos-dur) var(--upos-ease);
}
body:not(.lockscreen) .select2-container:not(.select2-container--focus) .select2-selection--single:hover,
body:not(.lockscreen) .select2-container:not(.select2-container--focus) .select2-selection--multiple:hover {
    background-color: var(--upos-surface-hover) !important;
    border-color: var(--upos-border-hover) !important;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Tabs (nav-tabs-custom: products, stock report, settings sections, ...)
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .nav-tabs-custom {
    background: var(--upos-surface) !important;
    border: 1px solid var(--upos-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--upos-shadow-card) !important;
}
body:not(.lockscreen) .nav-tabs-custom > .nav-tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--upos-border) !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}
body:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li {
    border-top: none !important;
    margin-bottom: 0 !important;
}
body:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li > a {
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--upos-text-2);
    background: transparent !important;
}
body:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li > a:hover {
    color: var(--upos-text) !important;
    background: transparent !important;
}
body:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--upos-accent) !important;
    background: transparent !important;
    position: relative;
}
body:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li.active > a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2.5px;
    background: var(--upos-accent);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Labels / badges
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .label {
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600;
    padding: 3px 10px !important;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .modal-content {
    border-radius: 16px !important;
    border: 1px solid var(--upos-border) !important;
    box-shadow: var(--upos-shadow-pop) !important;
}
body:not(.lockscreen) .modal-header {
    border-bottom: 1px solid var(--upos-border);
    padding: 14px 18px;
    border-radius: 15px 15px 0 0;
}
body:not(.lockscreen) .modal-footer {
    border-top: 1px solid var(--upos-border);
    padding: 12px 18px;
    border-radius: 0 0 15px 15px;
}

/* --------------------------------------------------------------------------
   Dropdown menus
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .dw-dropdown-content,
body:not(.lockscreen) .dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid var(--upos-border-2) !important;
    box-shadow: var(--upos-shadow-pop) !important;
    padding: 6px !important;
    background: var(--upos-surface) !important;
}
body:not(.lockscreen) .dw-dropdown-content a,
body:not(.lockscreen) .tw-dw-menu a {
    border-radius: 8px !important;
    color: var(--upos-text);
    padding: 8px 12px !important;
    font-size: 13px;
    line-height: 1.35;
}
body:not(.lockscreen) .dw-dropdown-content a:hover,
body:not(.lockscreen) .tw-dw-menu a:hover {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-accent) !important;
}

/* Table Actions dropdowns (Quotations / Sales / Purchases / Products ...):
   the .table-responsive wrapper (overflow:auto from vendor.css) clips any
   menu that extends past the table box — on short tables the Actions menu
   always spills over the pagination row and its bottom items vanish.
   While the menu is open, app.js unlocks the wrapper (.upi-dd-open) so the
   menu can spill over the box edges, and lifts it above the pagination
   controls. When there is no room below in the viewport, app.js flips the
   menu above the button (.upi-dd-up). */
body:not(.lockscreen) .table-responsive.upi-dd-open {
    overflow: visible !important;
}
body:not(.lockscreen) .table .dropdown-menu {
    z-index: 1100 !important;
}
body:not(.lockscreen) .dropdown-menu.upi-dd-up {
    top: auto !important;
    bottom: 100% !important;
    margin: 0 0 2px 0 !important;
}

/* --------------------------------------------------------------------------
   Toolbars above tables (Filters, export buttons rows)
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .filter-row .form-control,
body:not(.lockscreen) .tw-dw-btn {
    transition: background-color var(--upos-dur) var(--upos-ease),
                color var(--upos-dur) var(--upos-ease),
                border-color var(--upos-dur) var(--upos-ease),
                box-shadow var(--upos-dur) var(--upos-ease),
                transform 100ms ease;
}
body:not(.lockscreen) .tw-dw-btn:active { transform: scale(0.985); }

/* --------------------------------------------------------------------------
   Sidebar (left nav) — slightly roomier than the default 256px column
   -------------------------------------------------------------------------- */
body:not(.lockscreen) aside.side-bar {
    width: 280px;
}

/* --------------------------------------------------------------------------
   Primary "Add" pill (gradient indigo, 37+ index pages) — give it breathing
   room: wider, a touch taller, larger label
   -------------------------------------------------------------------------- */
body:not(.lockscreen) a.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-rounded-full,
body:not(.lockscreen) button.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600.tw-rounded-full {
    min-width: 8.25rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    height: 3.25rem;
    min-height: 3.25rem;
    font-size: 1rem;
}

/* ==========================================================================
   Phase 3 — Polish
   Eased micro-interactions, proper empty states, reduced-motion guard.
   POS operator screen (body.lockscreen) gets its own rules in pos-modern.css.
   ========================================================================== */

/* Phase 2 introduced these hover states without easing; give them motion */
body:not(.lockscreen) .table > tbody > tr > *,
body:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li > a,
body:not(.lockscreen) .dataTables_paginate .pagination > li > span,
body:not(.lockscreen) .dataTables_paginate .pagination > li > a,
body:not(.lockscreen) .dw-dropdown-content a,
body:not(.lockscreen) .tw-dw-menu a,
body:not(.lockscreen) .label {
    transition: background-color var(--upos-dur) var(--upos-ease),
                color var(--upos-dur) var(--upos-ease),
                border-color var(--upos-dur) var(--upos-ease);
}

/* Modal: softer pop-in than AdminLTE's -25% slide (transform already
   transitioned by AdminLTE; we only soften the starting position) */
.modal.fade .modal-dialog {
    transform: translateY(-14px) scale(0.985);
}

/* DataTables "No matching records found" -> a real empty state */
body:not(.lockscreen) .dataTables_empty {
    text-align: center !important;
    padding: 44px 16px !important;
    color: var(--upos-text-muted) !important;
    font-size: 14px !important;
    font-weight: 500;
    background: transparent !important;
}
body:not(.lockscreen) .dataTables_empty::before {
    content: "\f002"; /* fa-search */
    font-family: 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    font-size: 20px;
    display: block;
    width: 52px;
    height: 52px;
    line-height: 50px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--upos-surface-2);
    border: 1px solid var(--upos-border);
    color: var(--upos-text-muted);
}

/* Respect users who opt out of motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   DateRangePicker (dashboard "Filter by date" + report filters)
   The smalot bootstrap-daterangepicker bundle hardcodes a white menu with
   dark-gray text, which is unreadable in dark mode. Tokenize the whole
   widget so it follows the active theme. This file loads after vendor.css,
   so equal-or-higher specificity wins.
   -------------------------------------------------------------------------- */
body:not(.lockscreen) .daterangepicker {
    background: var(--upos-surface) !important;
    color: var(--upos-text) !important;
    border: 1px solid var(--upos-border-2) !important;
    border-radius: 12px !important;
    box-shadow: var(--upos-shadow-pop) !important;
    font-family: inherit;
}
body:not(.lockscreen) .daterangepicker:before { border-bottom-color: var(--upos-border-2); }
body:not(.lockscreen) .daterangepicker:after  { border-bottom-color: var(--upos-surface); }
body:not(.lockscreen) .daterangepicker.drop-up:before { border-top-color: var(--upos-border-2); }
body:not(.lockscreen) .daterangepicker.drop-up:after  { border-top-color: var(--upos-surface); }

body:not(.lockscreen) .daterangepicker .ranges li {
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--upos-text) !important;
    transition: background-color var(--upos-dur) var(--upos-ease), color var(--upos-dur) var(--upos-ease);
}
body:not(.lockscreen) .daterangepicker .ranges li:hover {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-accent) !important;
}
body:not(.lockscreen) .daterangepicker .ranges li.active {
    background: var(--upos-accent) !important;
    color: #fff !important;
}

body:not(.lockscreen) .daterangepicker .calendar-table {
    background: var(--upos-surface) !important;
    border: 1px solid var(--upos-border) !important;
    border-radius: 10px !important;
}
body:not(.lockscreen) .daterangepicker .calendar-table th {
    color: var(--upos-text-muted) !important;
    font-weight: 700;
}
body:not(.lockscreen) .daterangepicker .calendar-table td {
    color: var(--upos-text-2);
    transition: background-color var(--upos-dur) var(--upos-ease), color var(--upos-dur) var(--upos-ease);
}
body:not(.lockscreen) .daterangepicker .calendar-table td:hover {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-text) !important;
}
body:not(.lockscreen) .daterangepicker .calendar-table td.off,
body:not(.lockscreen) .daterangepicker .calendar-table td.off.in-range {
    color: var(--upos-text-muted);
}
body:not(.lockscreen) .daterangepicker .calendar-table td.in-range {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-text) !important;
}
body:not(.lockscreen) .daterangepicker .calendar-table td.active,
body:not(.lockscreen) .daterangepicker .calendar-table td.active:hover {
    background: var(--upos-accent) !important;
    color: #fff !important;
}

body:not(.lockscreen) .daterangepicker select.monthselect,
body:not(.lockscreen) .daterangepicker select.yearselect {
    background: var(--upos-surface-2);
    border: 1px solid var(--upos-border-2);
    border-radius: 6px;
    color: var(--upos-text);
}

body:not(.lockscreen) .daterangepicker .drp-buttons {
    border-top: 1px solid var(--upos-border) !important;
    padding: 10px 12px;
}
body:not(.lockscreen) .daterangepicker .drp-buttons .btn {
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
    transition: background-color var(--upos-dur) var(--upos-ease), color var(--upos-dur) var(--upos-ease);
}
body:not(.lockscreen) .daterangepicker .drp-buttons .btn.cancelBtn {
    background: var(--upos-surface-2);
    border: 1px solid var(--upos-border-2);
    color: var(--upos-text-2);
}
body:not(.lockscreen) .daterangepicker .drp-buttons .btn.cancelBtn:hover {
    background: var(--upos-surface-3);
    color: var(--upos-text);
}
body:not(.lockscreen) .daterangepicker .drp-buttons .btn.applyBtn {
    background: var(--upos-accent);
    border: 1px solid var(--upos-accent);
    color: #fff;
}
body:not(.lockscreen) .daterangepicker .drp-buttons .btn.applyBtn:hover {
    background: var(--upos-accent-hover);
    border-color: var(--upos-accent-hover);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Settings > Email Settings — grouped card
   Replaces the flat 3-column field grid with a titled card: header +
   three labelled sections (SMTP server / credentials / sender) + footer
   with a contextual hint and the indigo test button.
   Token-based, so it themes automatically in dark mode.
   -------------------------------------------------------------------------- */

/* Super-admin opt-in row (only rendered when the superadmin flag exists) */
body:not(.lockscreen) .upos-mail-superadmin {
    background: var(--upos-surface-3) !important;
    border: 1px solid var(--upos-border) !important;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
body:not(.lockscreen) .upos-mail-superadmin-label {
    color: var(--upos-text-2) !important;
    font-size: 13px;
    font-weight: 500;
    margin-left: 2px;
}

/* Card shell */
body:not(.lockscreen) .upos-mail-card {
    background: var(--upos-surface-2) !important;
    border: 1px solid var(--upos-border) !important;
    border-radius: var(--upos-radius-lg) !important;
    box-shadow: var(--upos-shadow-card);
    overflow: hidden;
}

/* Header */
body:not(.lockscreen) .upos-mail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--upos-surface) !important;
    border-bottom: 1px solid var(--upos-border) !important;
}
body:not(.lockscreen) .upos-mail-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--upos-accent-soft) !important;
    color: var(--upos-accent) !important;
}
body:not(.lockscreen) .upos-mail-title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.1px;
    color: var(--upos-text) !important;
    line-height: 1.3;
}
body:not(.lockscreen) .upos-mail-desc {
    margin: 2px 0 0 !important;
    font-size: 12.5px !important;
    color: var(--upos-text-2) !important;
}

/* Body + sections */
body:not(.lockscreen) .upos-mail-body {
    padding: 18px;
}
body:not(.lockscreen) .upos-mail-section {
    margin-bottom: 20px;
}
body:not(.lockscreen) .upos-mail-section:last-child {
    margin-bottom: 4px;
}
body:not(.lockscreen) .upos-mail-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--upos-text-muted) !important;
    margin-bottom: 10px;
}
body:not(.lockscreen) .upos-mail-section-title::before {
    content: "";
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--upos-accent);
}

/* Field helper text (port) */
body:not(.lockscreen) .upos-mail-help {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--upos-text-muted);
}

/* Footer: hint + test button */
body:not(.lockscreen) .upos-mail-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 18px;
    background: var(--upos-surface-3) !important;
    border-top: 1px solid var(--upos-border) !important;
}
body:not(.lockscreen) .upos-mail-foot-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--upos-text-2);
}
body:not(.lockscreen) .upos-mail-foot-hint svg {
    flex: 0 0 auto;
    color: var(--upos-text-muted);
}

/* Test button — app accent (indigo) instead of the raw green daisy btn */
body:not(.lockscreen) .upos-mail-test-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--upos-accent) !important;
    border-radius: 10px;
    background: var(--upos-accent) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color var(--upos-dur) var(--upos-ease),
                border-color var(--upos-dur) var(--upos-ease),
                transform var(--upos-dur) var(--upos-ease);
}
body:not(.lockscreen) .upos-mail-test-btn:hover,
body:not(.lockscreen) .upos-mail-test-btn:focus {
    background: var(--upos-accent-hover) !important;
    border-color: var(--upos-accent-hover) !important;
    color: #fff !important;
}
body:not(.lockscreen) .upos-mail-test-btn:active {
    transform: scale(0.985);
}
body:not(.lockscreen) .upos-mail-test-btn:focus-visible {
    outline: 2px solid var(--upos-accent);
    outline-offset: 2px;
}
body:not(.lockscreen) .upos-mail-test-btn svg {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Bundle (combo product) badge
   Violet pill used in the product list, POS product picker and anywhere a
   combo/bundle product is identified. Reads --upos-bundle tokens so it
   re-themes automatically in dark mode.
   -------------------------------------------------------------------------- */
.bundle-chip {
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px 0 2px;
    padding: 1px 8px;
    border: 1px solid var(--upos-bundle-border, rgba(107, 33, 168, 0.25));
    border-radius: 9999px;
    background: var(--upos-bundle-soft, #f3e8ff);
    color: var(--upos-bundle, #6b21a8);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout: keep pages full-width inside the sticky-footer flex container
   #scrollable-container is a flex column (layouts/app.blade.php) so the
   footer can pin to the bottom on short pages. vendor.css gives .content
   margin:auto — in a flex column, cross-axis auto margins disable stretch,
   so the page collapses to fit-content width and gets centered (visible on
   the Business Settings Purchases/Dashboard tabs, whose panes are small).
   Neutralize the cross-axis auto margins so pages keep full width.
   -------------------------------------------------------------------------- */
#scrollable-container > .content {
    margin-left: 0;
    margin-right: 0;
}