/* ==========================================================================
   List pages — mobile-first pass ("lp2")
   --------------------------------------------------------------------------
   Sales, Purchases, Expenses, Orders and Receivables. Loaded after app.css and
   dashboard-m2.css. Every rule is scoped to .lp2 (the page wrapper each render
   adds), so the shared .sx-* kit keeps its old look everywhere else — the POS
   recent-sales list, the wallet, admin lists.

   What changed on these pages, and why:
   - The headline card follows the dashboard's card, and carries the period
     button; the floating filter button that sat over amounts is hidden here.
   - Breakdown cards become a row you swipe on phones instead of a tall grid,
     so the transactions start near the top of the screen.
   - The list is one card with rows grouped under day headings; the name is
     the title and the reference sits underneath.
   - Two columns (list + side panel) only from 1100px, where there is room
     beside the app's sidebar for both.

   Primary text stays true black; secondary text no lighter than #475569.
   Removing this file's <link> in index.php leaves the pages working, unstyled
   by it.
   ========================================================================== */

/* ---- Page colours ------------------------------------------------------- */

.lp2 {
    /* The page banner green: the app's card greens (assets/css/brand-green.css). */
    --lp2-h1: var(--pu-card1, #047857); --lp2-h2: var(--pu-card3, #036148); --lp2-h3: var(--pu-card2, #059669);
    --lp2-glow: rgba(7, 92, 59, .55);
    --lp2-deep: var(--pu-card4, #065f46);
    --lp2-line: #e7ebf1;
    --lp2-soft: #f6f8fb;
}
.lp2-purchases { --lp2-h1: #4338ca; --lp2-h2: #312e81; --lp2-h3: #4f46e5; --lp2-glow: rgba(49, 46, 129, .5); --lp2-deep: #3730a3; }
.lp2-expenses  { --lp2-h1: #be123c; --lp2-h2: #9f1239; --lp2-h3: #e11d48; --lp2-glow: rgba(159, 18, 57, .5); --lp2-deep: #9f1239; }
.lp2-orders    { --lp2-h1: #1d4ed8; --lp2-h2: #1e3a8a; --lp2-h3: #2563eb; --lp2-glow: rgba(30, 58, 138, .5); --lp2-deep: #1e40af; }
.lp2-rcv       { --lp2-h1: #0f766e; --lp2-h2: #115e59; --lp2-h3: #0d9488; --lp2-glow: rgba(17, 94, 89, .5); --lp2-deep: #115e59; }

/* The period button on the card replaces the floating filter button. */
.lp2 .filter-fab { display: none !important; }

/* ---- Header -------------------------------------------------------------- */

.lp2 .page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: nowrap;
    padding: 2px 0 0; margin: 0 0 14px; min-height: 0;
}
.lp2 .page-header > .flex-between { width: 100%; gap: 10px; }
.lp2 .page-title {
    font-size: 1.45rem; font-weight: 800; color: #000;
    letter-spacing: -.02em; line-height: 1.15; min-width: 0;
}
.lp2 .lp2-title-sub,
.lp2 .page-sub {
    display: block; margin-top: 2px;
    font-size: .76rem; font-weight: 650; letter-spacing: 0; color: #475569;
}
/* the actions group is inline-styled to wrap; on this layer it stays on one line */
.lp2 .page-header > div:last-child { flex-wrap: nowrap !important; gap: 6px !important; flex-shrink: 0; }
.lp2 .page-header .btn-sm,
.lp2 .page-header .ai-btn,
.lp2 .page-header .help-trigger,
.lp2 .page-header .branch-select { height: 38px; min-height: 38px; border-radius: 12px; }
.lp2 .page-header .btn-outline.btn-sm {
    width: 38px; padding: 0; justify-content: center;
    background: #fff; border: 1px solid var(--lp2-line); color: #1e293b;
}
.lp2 .page-header .btn-outline.btn-sm:hover { border-color: #94a3b8; }
.lp2 .page-header .btn-primary { padding: 0 14px; border-radius: 12px; }
@media (max-width: 520px) {
    .lp2 .page-title { font-size: 1.3rem; }
    /* icon-only AI button so the header stays on one line */
    .lp2 .page-header .ai-btn { width: 38px; min-width: 38px; padding: 0; font-size: 0; gap: 0; }
    .lp2 .page-header .ai-btn i { font-size: 1rem; }
    .lp2 .page-header .btn-primary { padding: 0 12px; }
}
@media (max-width: 360px) {
    /* the title never gives way: the add button becomes its icon (the + button
       at the bottom of the screen does the same thing) */
    .lp2 .page-title { flex-shrink: 0; }
    .lp2 .page-header .btn-primary { width: 38px; min-width: 38px; padding: 0; font-size: 0; gap: 0; }
    .lp2 .page-header .btn-primary i { font-size: 1.1rem; }
}

/* ---- Headline card -------------------------------------------------------- */

.lp2 .sx-hero,
.lp2 .rcv-hero {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: 22px; padding: 16px 18px 15px; margin: 0 0 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--lp2-h1) 0%, var(--lp2-h2) 52%, var(--lp2-h3) 100%);
    box-shadow: 0 22px 44px -26px var(--lp2-glow), inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* facets, like the dashboard card: a light band and a glow in the corner */
.lp2 .sx-hero::before,
.lp2 .rcv-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(112deg, transparent 0 57%, rgba(255, 255, 255, .07) 57% 71%, transparent 71%),
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .15), transparent 55%);
}
.lp2 .sx-hero::after { opacity: .7; }
.lp2 .sx-hero-top { gap: 8px; }
.lp2 .sx-hero-eyebrow,
.lp2 .rcv-hero-lbl {
    font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: rgba(255, 255, 255, .88); min-width: 0;
}
.lp2 .rcv-hero-val {
    font-size: clamp(1.5rem, 5.4vw, 2rem); font-weight: 800; letter-spacing: -.03em;
    line-height: 1.05; margin-top: 9px; color: #fff;
}
.lp2 .rcv-hero-sub { font-size: .74rem; font-weight: 650; color: rgba(255, 255, 255, .8); margin-top: 3px; }

/* the period button */
.lp2 .lp2-range {
    font: inherit; font-size: .72rem; font-weight: 750; color: #fff;
    cursor: pointer; flex-shrink: 0; max-width: 62%;
    transition: background .15s ease, transform .12s ease;
}
.lp2 .lp2-range span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lp2 .lp2-range .bi-chevron-down { font-size: .62rem; opacity: .85; }
.lp2 .lp2-range:hover { background: rgba(255, 255, 255, .26); }
.lp2 .lp2-range:active { transform: scale(.97); }
.lp2 .lp2-range:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* figures along the foot of the card */
.lp2 .lp2-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; margin-top: 12px; flex-wrap: nowrap;
}
.lp2 .lp2-stat {
    min-width: 0; padding: 7px 10px; border-radius: 12px;
    background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .15);
}
.lp2 .lp2-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lp2 .lp2-stat b {
    display: block; font-size: .9rem; font-weight: 800; color: #fff; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.lp2 .lp2-stat b small { font-size: .8em; opacity: .7; font-weight: 700; }
.lp2 .lp2-stat span {
    display: block; margin-top: 1px; font-size: .68rem; font-weight: 650; color: rgba(255, 255, 255, .8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* one row where the card is wide: phones held sideways, and desktops (from
   768px to about 1000px the app's sidebar leaves the card too narrow) */
@media (min-width: 600px) and (max-width: 767px), (min-width: 1000px) {
    .lp2 .lp2-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .lp2 .lp2-stat:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---- Captions ------------------------------------------------------------- */

.lp2 .lp2-cap,
.lp2 .lp2-lbl {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 2px 0 8px;
    font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #334155;
}
.lp2 .lp2-cap em {
    font-style: normal; font-size: .7rem; font-weight: 750; letter-spacing: 0; text-transform: none;
    color: var(--lp2-deep);
}
.lp2 .lp2-lbl { margin-bottom: 6px; }

/* ---- Breakdown cards ------------------------------------------------------ */

.lp2 .sx-pm-grid { gap: 10px; margin-bottom: 16px; }
.lp2 .sx-pm-card {
    padding: 11px 12px; border-radius: 16px;
    border: 1px solid var(--lp2-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.lp2 .sx-pm-card:hover { transform: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.lp2 .sx-pm-dot { width: 30px; height: 30px; border-radius: 10px; font-size: .9rem; }
.lp2 .sx-pm-label { font-size: .76rem; font-weight: 800; color: #000; text-transform: none; letter-spacing: 0; }
.lp2 .sx-pm-count { font-size: .68rem; font-weight: 650; color: #475569; }
.lp2 .sx-pm-val { font-size: 1.06rem; color: #000; margin: 8px 0 7px; font-variant-numeric: tabular-nums; }
.lp2 .sx-pm-bar { height: 5px; }
.lp2 .sx-pm-share { font-size: .68rem; color: color-mix(in srgb, var(--sx-c, #059669) 78%, #000) !important; }
.lp2 .sx-pm-owed { font-size: .66rem; }

/* Billed vs collected (sales) */
.lp2 .sx-rcv-grid { gap: 10px; margin-bottom: 8px; }
/* /sales with an "Owed on orders" tile: six tiles as two even rows of three,
   or one row of six on wide screens, never five plus one */
@media (min-width: 720px) { .lp2 .sx-rcv-grid.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .lp2 .sx-rcv-grid.is-six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lp2 .sx-rcv-tile { border-radius: 16px; border: 1px solid var(--lp2-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); padding: 11px 12px; }
.lp2 .sx-rcv-label { color: #334155; font-size: .66rem; }
.lp2 .sx-rcv-val { font-size: 1.04rem; font-variant-numeric: tabular-nums; }
.lp2 .sx-rcv-sub { color: #475569; font-size: .68rem; }
.lp2 .sx-rcv-note { margin-bottom: 16px; border-radius: 14px; font-size: .74rem; }

/* On phones the cards form one row you swipe, running to the screen edges. */
@media (max-width: 719px) {
    .lp2 .sx-pm-grid,
    .lp2 .sx-rcv-grid,
    .lp2 .rcv-buckets {
        display: flex; overflow-x: auto; overflow-y: hidden;
        margin-left: -16px; margin-right: -16px; padding: 2px 16px 6px;
        scroll-snap-type: x proximity; scroll-padding: 0 16px;
        overscroll-behavior-x: contain; scrollbar-width: none;
    }
    .lp2 .sx-pm-grid::-webkit-scrollbar,
    .lp2 .sx-rcv-grid::-webkit-scrollbar,
    .lp2 .rcv-buckets::-webkit-scrollbar { display: none; }
    .lp2 .sx-pm-card,
    .lp2 .sx-rcv-tile { flex: 0 0 150px; scroll-snap-align: start; }
    .lp2 .rcv-bucket { flex: 0 0 128px; scroll-snap-align: start; }
    /* the one-card "nothing in this period" message spans the row */
    .lp2 .sx-pm-grid > .sx-pm-card[style*="grid-column"] { flex: 1 0 100%; }
}

/* ---- Sections -------------------------------------------------------------- */

.lp2 .sx-sec { flex-wrap: wrap; row-gap: 8px; margin: 4px 0 10px; }
.lp2 .sx-sec-title { font-size: .98rem; font-weight: 800; color: #000; }
.lp2 .sx-sec-title i { color: var(--lp2-h3); }
.lp2 .sx-sec-count {
    color: var(--lp2-deep);
    background: color-mix(in srgb, var(--lp2-h3) 9%, #fff);
    border-color: color-mix(in srgb, var(--lp2-h3) 24%, #fff);
}
.lp2 .sx-sec > div { flex-wrap: wrap; }

/* ---- Search and filters ------------------------------------------------ */

.lp2 .txn-toolbar { margin: 4px 0 12px; }
.lp2 .txn-search-input,
.lp2 .cmd-bar-search input {
    height: 44px; border-radius: 14px; border: 1px solid var(--lp2-line);
    background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); font-size: .9rem; color: #000;
}
/* the generic input[type=text] rule outranks .txn-search-input and left the
   search icon over the placeholder on /receivables */
.lp2 .txn-search-input { padding: 0 40px; }
.lp2 .cmd-bar { margin-bottom: 12px; }
.lp2 .cmd-bar-search input { padding-left: 38px; }
.lp2 .cmd-bar-search i { left: 14px; }
.lp2 .txn-search-input::placeholder,
.lp2 .cmd-bar-search input::placeholder { color: #64748b; }
.lp2 .txn-search-input:focus,
.lp2 .cmd-bar-search input:focus { border-color: var(--lp2-h3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp2-h3) 18%, transparent); }
.lp2 .txn-filter-select { height: 44px; border-radius: 14px; border: 1px solid var(--lp2-line); font-size: .84rem; color: #000; }
.lp2 .txn-filter-select:focus { border-color: var(--lp2-h3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp2-h3) 18%, transparent); }

/* Orders: status and payment tabs, with their counts */
.lp2 .pill-tabs { gap: 6px; }
.lp2 .pill-tab {
    padding: 6px 13px; border: 1px solid var(--lp2-line); border-radius: 999px;
    font-size: .8rem; font-weight: 750; color: #1e293b; background: #fff;
}
.lp2 .pill-tab:hover { border-color: #94a3b8; color: #000; }
.lp2 .pill-tab.active { background: var(--lp2-deep); border-color: var(--lp2-deep); color: #fff; }
.lp2 .pill-tab-n { color: #334155; background: #eef2f7; }
.lp2 .pill-tab.active .pill-tab-n { color: #fff; background: rgba(255, 255, 255, .2); }
/* the tabs carry the status counts, so the status cards are not repeated */
.lp2-orders .sx-pm-grid { display: none; }

/* notes */
.lp2 .lp2-note {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 14px; padding: 10px 12px; border-radius: 14px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    font-size: .78rem; line-height: 1.45; color: #334155;
}
.lp2 .lp2-note > i { color: #475569; font-size: .95rem; line-height: 1.35; }
.lp2 .lp2-note b { color: #000; }
/* a note that opens: the count in view, the explanation a tap away */
.lp2 details.lp2-note { display: block; }
.lp2 details.lp2-note > summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
}
.lp2 details.lp2-note > summary::-webkit-details-marker { display: none; }
.lp2 details.lp2-note > summary > i { color: #475569; font-size: .95rem; }
.lp2 details.lp2-note > summary u {
    margin-left: 4px; text-decoration: none; font-weight: 750; white-space: nowrap;
    color: var(--lp2-deep);
}
.lp2 details.lp2-note[open] > summary u { display: none; }
.lp2 .lp2-note-body { margin: 6px 0 0 26px; }

/* ---- The list ------------------------------------------------------------- */

.lp2 .sx-list,
.lp2 .rcv-list {
    display: flex; flex-direction: column; gap: 0;
    background: #fff; border: 1px solid var(--lp2-line); border-radius: 18px;
    overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.lp2 .sx-list:empty { display: none; }

.lp2 .lp2-day {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 14px 7px;
    background: var(--lp2-soft); border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6;
    font-size: .69rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #334155;
}
.lp2 .lp2-day:first-child { border-top: 0; }
.lp2 .lp2-day em {
    font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: 0; color: #475569;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0 8px; line-height: 1.6;
}

.lp2 .sx-item {
    align-items: center; gap: 12px;
    padding: 12px 14px; margin: 0;
    background: transparent; border: 0; border-top: 1px solid #eef1f5; border-radius: 0; box-shadow: none;
}
.lp2 .sx-list > .sx-item:first-child,
.lp2 .lp2-day + .sx-item { border-top: 0; }
.lp2 .sx-item:hover { transform: none; box-shadow: none; background: #fafbfd; border-color: #eef1f5; }
.lp2 .lp2-day + .sx-item:hover { border-color: transparent; }
.lp2 .sx-item:active { transform: none; background: #f4f6fa; }
.lp2 .sx-item.sx-open { background: #fafbfd; }
.lp2 .lp2-dim { opacity: .72; }

.lp2 .sx-ico { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
.lp2 .lp2-ini { font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
/* letter avatars read better filled */
.lp2 .sx-ico:has(.lp2-ini) { background: var(--sx-c, #059669); border-color: transparent; color: #fff; }

.lp2 .sx-ref {
    font-size: .9rem; font-weight: 750; color: #000; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
}
/* one line of facts: time first, reference last, so a narrow phone trims the reference */
.lp2 .sx-meta {
    display: block; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .74rem; font-weight: 600; color: #475569; line-height: 1.4;
}
.lp2 .sx-meta .sx-tag { gap: 4px; }
.lp2 .sx-meta .sx-tag i { font-size: .7rem; }
.lp2 .sx-meta .sx-method { font-weight: 750; color: color-mix(in srgb, var(--sx-c, #059669) 72%, #000); }
.lp2 .sx-meta .sx-time { font-size: inherit; font-weight: 600; color: #475569; margin: 0; }
.lp2 .lp2-sep {
    display: inline-block; width: 3px; height: 3px; margin: 0 6px; border-radius: 50%;
    background: #94a3b8; vertical-align: middle; font-style: normal;
}
.lp2 .lp2-ref { font-family: var(--font-body); font-size: .74rem; font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.lp2 .lp2-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px; border-radius: 6px;
    font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; vertical-align: 1px;
    color: var(--t, #334155);
    background: color-mix(in srgb, var(--t, #334155) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--t, #334155) 22%, #fff);
}
.lp2 .lp2-tag i { font-size: .62rem; }

.lp2 .sx-end {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    max-width: 48%; flex-shrink: 0;
}
.lp2 .sx-amt { font-size: .96rem; font-weight: 800; color: #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp2 .lp2-neg { color: #be123c; }
/* stacked, so two badges (an order's status and payment) never squeeze the name */
.lp2 .lp2-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.lp2 .lp2-badges .badge {
    font-size: .62rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; line-height: 1.4;
    text-transform: capitalize; letter-spacing: 0; white-space: nowrap;
}

/* a tap opens the row; the arrow's width goes to the name instead */
.lp2 .sx-chev { display: none; }

/* actions a tap reveals on phones */
.lp2 .sx-item-actions { gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.lp2 .sx-act { font-size: .76rem; padding: 8px 12px; border-radius: 10px; color: #1e293b; background: #fff; border-color: var(--lp2-line); }
.lp2 .sx-act.sx-act-solid {
    color: #fff; border-color: transparent;
    background: color-mix(in srgb, var(--sx-c, #059669) 80%, #000);
}
.lp2 .sx-act.sx-act-solid:hover { color: #fff; background: color-mix(in srgb, var(--sx-c, #059669) 68%, #000); }
.lp2 .sx-pay-chip { font-size: .72rem; padding: 7px 10px; border-radius: 10px; color: color-mix(in srgb, var(--sx-c, #64748b) 72%, #000); }

/* empty and error states inside the list card */
.lp2 .sx-list > .sx-empty,
.lp2 .rcv-list > .sx-empty { border: 0; border-radius: 0; background: transparent; padding: 44px 18px; }
.lp2 .sx-empty i { color: var(--lp2-h3); opacity: .6; }
.lp2 .sx-empty h4 { color: #000; }
.lp2 .sx-empty p { color: #475569; }

/* ---- Receivables ------------------------------------------------------------ */

.lp2 .rcv-row {
    padding: 12px 14px; border: 0; border-top: 1px solid #eef1f5; border-radius: 0; background: transparent;
}
.lp2 .rcv-row:first-child { border-top: 0; }
.lp2 .rcv-row:hover { transform: none; background: #fafbfd; border-color: #eef1f5; }
.lp2 .rcv-row-top { align-items: center; }
.lp2 .lp2-av {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--sx-c, #0d9488); color: #fff; font-size: .78rem; font-weight: 800;
}
.lp2 .rcv-who { flex: 1; min-width: 0; }
.lp2 .rcv-name { color: #000; font-size: .9rem; overflow-wrap: anywhere; }
.lp2 .rcv-sub { color: #475569; }
.lp2 .rcv-amt b { font-variant-numeric: tabular-nums; }
.lp2 .rcv-bar { margin-left: 50px; height: 5px; }

/* age tiles: coloured from not-due green to 90-day red, like the row bars */
.lp2 .rcv-buckets { gap: 8px; margin-bottom: 14px; }
.lp2 .rcv-bucket {
    --bk: #059669;
    position: relative; padding: 10px 12px 10px 15px; border-radius: 14px;
    background: color-mix(in srgb, var(--bk) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--bk) 22%, #fff);
}
.lp2 .rcv-bucket::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--bk);
}
.lp2 .rcv-bucket.ok    { --bk: #059669; }
.lp2 .rcv-bucket.warn  { --bk: #0891b2; }
.lp2 .rcv-bucket.warn2 { --bk: #d97706; }
.lp2 .rcv-bucket.bad   { --bk: #ea580c; }
.lp2 .rcv-bucket.worst { --bk: #b91c1c; }
.lp2 .rcv-bucket:hover { border-color: var(--bk); transform: none; }
.lp2 .rcv-bucket-lbl { color: color-mix(in srgb, var(--bk) 72%, #000); }
.lp2 .rcv-bucket-n { background: #fff; color: #334155; border: 1px solid color-mix(in srgb, var(--bk) 22%, #fff); }
.lp2 .rcv-bucket-val { font-variant-numeric: tabular-nums; }
.lp2 .rcv-bucket.active { background: var(--bk); border-color: var(--bk); box-shadow: 0 10px 20px -14px var(--bk); }
.lp2 .rcv-bucket.active::before { background: rgba(255, 255, 255, .6); }
.lp2 .rcv-bucket.active .rcv-bucket-lbl,
.lp2 .rcv-bucket.active .rcv-bucket-val { color: #fff; }
.lp2 .rcv-bucket.active .rcv-bucket-n { background: rgba(255, 255, 255, .22); border-color: transparent; color: #fff; }
.lp2 .rcv-active-filter { border-radius: 14px; }

/* ---- Pager ---------------------------------------------------------------------- */

.lp2 [id$="-pager"] { justify-content: center; gap: 12px; margin-top: 14px !important; }
.lp2 [id$="-pager"] .btn { height: 36px; border-radius: 999px; padding: 0 14px; background: #fff; border-color: var(--lp2-line); color: #1e293b; }
.lp2 [id$="-pager"] .btn:disabled { opacity: .45; }
.lp2 [id$="-pager"] .text-muted { color: #334155 !important; font-size: .8rem !important; }

/* ---- Wider screens --------------------------------------------------------- */

@media (min-width: 720px) {
    /* rows open their details directly here; the quick actions sit inline,
       before the amount, and the chevron is not needed */
    .lp2 .sx-item-actions { order: 2; margin: 0 0 0 4px; padding: 0; border: 0; }
    .lp2 .sx-end { order: 3; min-width: 110px; }
    .lp2 .sx-chev { display: none; }
    .lp2 .sx-item { padding: 12px 16px; }
    .lp2 .lp2-day { padding-left: 16px; padding-right: 16px; }
}
/* With a mouse, a click opens the row's details, so the quick actions wait
   for hover (or keyboard focus) and float over the amount instead of taking
   width from the name. Touch screens keep them in view. */
@media (min-width: 720px) and (hover: hover) {
    .lp2 .sx-item { position: relative; }
    .lp2 .sx-item-actions {
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        margin: 0; padding: 6px 0 6px 28px;
        background: linear-gradient(90deg, rgba(250, 251, 253, 0), #fafbfd 24px);
        opacity: 0; pointer-events: none; transition: opacity .14s ease;
    }
    .lp2 .sx-item:hover .sx-item-actions,
    .lp2 .sx-item:focus-within .sx-item-actions { opacity: 1; pointer-events: auto; }
}

/* The inline page styles switch to list + side panel at 720px, which beside
   the app's own sidebar leaves the list a sliver. Here: from 1100px only. */
.lp2 .sales-layout, .lp2 .pur-layout, .lp2 .exp-layout, .lp2 .page-layout { display: block; }
.lp2 .sales-side, .lp2 .pur-side, .lp2 .exp-side, .lp2 .page-layout-side { display: none !important; }
@media (min-width: 1100px) {
    .lp2 .sales-layout, .lp2 .pur-layout, .lp2 .exp-layout, .lp2 .page-layout {
        display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start;
    }
    .lp2 .sales-side, .lp2 .pur-side, .lp2 .exp-side, .lp2 .page-layout-side { display: block !important; }
    .lp2 .sales-side > .card, .lp2 .pur-side > .card, .lp2 .exp-side > .card, .lp2 .page-layout-side > .card {
        border: 1px solid var(--lp2-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp2 .lp2-range, .lp2 .sx-chev { transition: none; }
}

/* ==========================================================================
   Page tones for the .lp2 kit
   --------------------------------------------------------------------------
   Any page can wrap its content in  <div class="sx-wrap lp2 lp2-tone-X">
   to get the kit above (headline card, swipe rows, list card, day headings,
   tabs, notes) in its own colour.
   ========================================================================== */

.lp2-tone-emerald { --lp2-h1: var(--pu-card1, #047857); --lp2-h2: var(--pu-card3, #036148); --lp2-h3: var(--pu-card2, #059669); --lp2-glow: rgba(7, 92, 59, .55); --lp2-deep: var(--pu-card4, #065f46); }
.lp2-tone-indigo  { --lp2-h1: #4338ca; --lp2-h2: #312e81; --lp2-h3: #4f46e5; --lp2-glow: rgba(49, 46, 129, .5); --lp2-deep: #3730a3; }
.lp2-tone-rose    { --lp2-h1: #be123c; --lp2-h2: #9f1239; --lp2-h3: #e11d48; --lp2-glow: rgba(159, 18, 57, .5); --lp2-deep: #9f1239; }
.lp2-tone-blue    { --lp2-h1: #1d4ed8; --lp2-h2: #1e3a8a; --lp2-h3: #2563eb; --lp2-glow: rgba(30, 58, 138, .5); --lp2-deep: #1e40af; }
.lp2-tone-teal    { --lp2-h1: #0f766e; --lp2-h2: #115e59; --lp2-h3: #0d9488; --lp2-glow: rgba(17, 94, 89, .5); --lp2-deep: #115e59; }
.lp2-tone-violet  { --lp2-h1: #6d28d9; --lp2-h2: #4c1d95; --lp2-h3: #7c3aed; --lp2-glow: rgba(76, 29, 149, .5); --lp2-deep: #5b21b6; }
.lp2-tone-pink    { --lp2-h1: #be185d; --lp2-h2: #831843; --lp2-h3: #db2777; --lp2-glow: rgba(131, 24, 67, .5); --lp2-deep: #9d174d; }
.lp2-tone-amber   { --lp2-h1: #b45309; --lp2-h2: #7c2d12; --lp2-h3: #d97706; --lp2-glow: rgba(124, 45, 18, .5); --lp2-deep: #92400e; }
.lp2-tone-cyan    { --lp2-h1: #0e7490; --lp2-h2: #164e63; --lp2-h3: #0891b2; --lp2-glow: rgba(22, 78, 99, .5); --lp2-deep: #155e75; }
.lp2-tone-slate   { --lp2-h1: #334155; --lp2-h2: #0f172a; --lp2-h3: #475569; --lp2-glow: rgba(15, 23, 42, .5); --lp2-deep: #1e293b; }

/* a headline figure that is not money (counts, scores) */
.lp2 .lp2-hero-val {
    position: relative; z-index: 1; margin: 9px 0 2px;
    font-family: var(--font-display); font-size: clamp(1.45rem, 5vw, 1.95rem); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.05; color: #fff;
}
.lp2 .lp2-hero-val small { font-size: .5em; font-weight: 700; opacity: .8; letter-spacing: 0; margin-left: 4px; }
.lp2 .lp2-hero-note { position: relative; z-index: 1; font-size: .74rem; font-weight: 650; color: rgba(255, 255, 255, .82); margin-top: 3px; }

/* ==========================================================================
   App skin — body.lp2-app
   --------------------------------------------------------------------------
   The shared pieces every Business, Finances, CRM and HR page is built from:
   page header, tabs, cards, stat tiles, lists, tables, empty states, notes,
   buttons, form fields and pop-ups. navigateSilent() (app.js) puts the
   class on <body> for those pages only, so settings, admin and marketing
   pages keep their look. Pop-ups are inside <body>, so they follow too.
   ========================================================================== */

body.lp2-app { --sk-line: #e7ebf1; --sk-line-2: #eef1f5; --sk-soft: #f6f8fb; --sk-ink-2: #334155; --sk-ink-3: #475569; }

/* ---- Page header -------------------------------------------------------- */

body.lp2-app #page-content .page-title { font-size: 1.45rem; font-weight: 800; color: #000; letter-spacing: -.02em; line-height: 1.15; }
body.lp2-app #page-content .page-sub,
body.lp2-app #page-content .page-subtitle { font-size: .78rem; font-weight: 650; color: var(--sk-ink-3); }
body.lp2-app #page-content .page-header .btn-sm,
body.lp2-app #page-content .page-header .help-trigger,
body.lp2-app #page-content .page-header .ai-btn { min-height: 38px; border-radius: 12px; }
@media (max-width: 520px) {
    body.lp2-app #page-content .page-title { font-size: 1.3rem; }
}

/* ---- Tabs: the page switchers (doc-tabs) --------------------------------- */

body.lp2-app .doc-tabs {
    display: inline-flex; gap: 3px; padding: 4px; margin-bottom: 16px;
    background: #eef2f6; border: 1px solid var(--sk-line); border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
}
body.lp2-app .doc-tab {
    min-height: 36px; padding: 7px 14px; border-radius: 10px;
    font-size: .82rem; font-weight: 750; color: var(--sk-ink-2);
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
body.lp2-app .doc-tab i { opacity: .8; }
body.lp2-app .doc-tab:hover:not(.active) { background: rgba(255, 255, 255, .7); color: #000; }
body.lp2-app .doc-tab.active {
    background: #fff !important; color: #000 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 14px -8px rgba(15, 23, 42, .35) !important;
}
body.lp2-app .doc-tab.active i { opacity: 1; color: #059669; }
@media (max-width: 560px) {
    body.lp2-app .doc-tabs { display: flex; width: 100%; }
    body.lp2-app .doc-tab { flex: 1 1 0; justify-content: center; padding: 7px 8px; }
}

/* ---- Tabs: filters inside a page (pill-tabs) ------------------------------ */

body.lp2-app .pill-tabs { gap: 6px; }
body.lp2-app .pill-tab {
    padding: 6px 13px; border: 1px solid var(--sk-line); border-radius: 999px;
    background: #fff; color: #1e293b; font-size: .8rem; font-weight: 750;
}
body.lp2-app .pill-tab:hover { border-color: #94a3b8; color: #000; }
body.lp2-app .pill-tab.active { background: var(--lp2-deep, #065f46); border-color: var(--lp2-deep, #065f46); color: #fff; }
body.lp2-app .pill-tab-n { color: var(--sk-ink-2); background: #eef2f7; }
body.lp2-app .pill-tab.active .pill-tab-n { color: #fff; background: rgba(255, 255, 255, .2); }

/* ---- Cards --------------------------------------------------------------------- */

body.lp2-app #page-content .card {
    border-radius: 18px !important; border: 1px solid var(--sk-line) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}
body.lp2-app #page-content .card:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important; }
body.lp2-app #page-content .card-title,
body.lp2-app #page-content .section-label,
body.lp2-app .modal .section-label {
    font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sk-ink-2);
}
body.lp2-app #page-content .card-value { font-weight: 800; color: #000; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.lp2-app #page-content .card-sub { color: var(--sk-ink-3); font-weight: 600; }

/* ---- Stat tiles: each takes the colour of its icon ------------------------------- */

body.lp2-app #page-content .stat-card {
    --st: #059669;
    min-height: 0; padding: 14px 14px 13px;
    border-radius: 18px !important; border: 1px solid color-mix(in srgb, var(--st) 18%, #fff) !important;
    background: linear-gradient(155deg, color-mix(in srgb, var(--st) 8%, #fff) 0%, #fff 58%) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}
body.lp2-app #page-content .stat-card:hover { transform: none; }
body.lp2-app #page-content .stat-card::after { display: none; }
body.lp2-app #page-content .stat-card:has(.stat-icon.amber)  { --st: #d97706; }
body.lp2-app #page-content .stat-card:has(.stat-icon.red)    { --st: #dc2626; }
body.lp2-app #page-content .stat-card:has(.stat-icon.blue)   { --st: #2563eb; }
body.lp2-app #page-content .stat-card:has(.stat-icon.violet) { --st: #7c3aed; }
body.lp2-app #page-content .stat-card:has(.stat-icon.indigo) { --st: #4f46e5; }
body.lp2-app #page-content .stat-card:has(.stat-icon.green)  { --st: #059669; }
body.lp2-app #page-content .stat-icon {
    top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 12px; font-size: .95rem;
    color: #fff !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--st) 88%, #fff), color-mix(in srgb, var(--st) 80%, #000)) !important;
    box-shadow: 0 8px 16px -10px var(--st);
}
body.lp2-app #page-content .stat-card .card-title { padding-right: 42px; }
body.lp2-app #page-content .stat-card .card-value { font-size: 1.28rem; }

/* ---- Lists: one card, rows split by hairlines ------------------------------------ */

body.lp2-app #page-content .data-list:not(.settings-grid) {
    gap: 0; padding: 0; background: #fff;
    border: 1px solid var(--sk-line) !important; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important; overflow: hidden;
}
body.lp2-app #page-content .data-list:not(.settings-grid) > .data-item {
    min-height: 0; margin: 0; padding: 13px 16px !important;
    border: 0 !important; border-top: 1px solid var(--sk-line-2) !important; border-radius: 0 !important;
    box-shadow: none !important; background: transparent;
}
body.lp2-app #page-content .data-list:not(.settings-grid) > .data-item:first-child { border-top: 0 !important; }
body.lp2-app #page-content .data-list:not(.settings-grid) > .data-item:hover { transform: none; background: #fafbfd !important; box-shadow: none !important; }
body.lp2-app .data-item-title { color: #000; font-weight: 750; }
body.lp2-app .data-item-sub { color: var(--sk-ink-3); font-weight: 600; }
body.lp2-app .data-item-amount { color: #000; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Tables ------------------------------------------------------------------------- */

body.lp2-app #page-content .table-wrap,
body.lp2-app #page-content .table-card { border-radius: 18px !important; border: 1px solid var(--sk-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
body.lp2-app #page-content table th {
    background: var(--sk-soft); color: var(--sk-ink-2);
    font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--sk-line);
}
body.lp2-app #page-content table td { color: #0f172a; border-color: var(--sk-line-2); }
body.lp2-app #page-content table tbody tr:hover td { background: #fafbfd; }

/* ---- Badges, notes, empty states ------------------------------------------------ */

body.lp2-app .badge { font-weight: 800; letter-spacing: 0; }
body.lp2-app .badge-green { background: #dcfce7; color: #166534; }
body.lp2-app .badge-amber { background: #fef3c7; color: #92400e; }
body.lp2-app .badge-red { background: #fee2e2; color: #991b1b; }
body.lp2-app .badge-blue { background: #dbeafe; color: #1e40af; }
body.lp2-app .badge-violet { background: #ede9fe; color: #5b21b6; }
body.lp2-app .badge-gray { background: #f1f5f9; color: #334155; }

body.lp2-app #page-content .info-banner { border-radius: 16px; }
body.lp2-app #page-content .info-banner-title { color: #000; font-weight: 800; }
body.lp2-app #page-content .info-banner-sub { color: var(--sk-ink-2); }

body.lp2-app #page-content .empty-state {
    border-radius: 20px; border: 1px dashed #d5dde8 !important; background: #fff;
    box-shadow: none !important; padding: 40px 20px;
}
body.lp2-app #page-content .empty-state > i:first-child {
    display: inline-grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px;
    border-radius: 20px; font-size: 1.7rem; opacity: 1;
    color: #059669; background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}
body.lp2-app #page-content .empty-state h3,
body.lp2-app #page-content .empty-state h4 { color: #000; font-weight: 800; }
body.lp2-app #page-content .empty-state p { color: var(--sk-ink-3); }

/* ---- Buttons --------------------------------------------------------------------------- */

body.lp2-app #page-content .btn,
body.lp2-app .modal .btn { border-radius: 12px; font-weight: 750; }
body.lp2-app #page-content .btn-primary,
body.lp2-app .modal .btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
    border-color: #059669; color: #fff;
    box-shadow: 0 10px 20px -12px rgba(5, 150, 105, .9), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body.lp2-app #page-content .btn-primary:hover:not(:disabled),
body.lp2-app .modal .btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
body.lp2-app #page-content .btn-outline,
body.lp2-app .modal .btn-outline { background: #fff; border-color: #dbe2ea; color: #0f172a; }
body.lp2-app #page-content .btn-outline:hover:not(:disabled),
body.lp2-app .modal .btn-outline:hover:not(:disabled) { border-color: #94a3b8; background: #f8fafc; color: #000; }

/* ---- Form fields (pages and pop-ups) ------------------------------------------------ */

body.lp2-app #page-content .input-group label,
body.lp2-app .modal .input-group label,
body.lp2-app .modal label.form-label { font-size: .76rem; font-weight: 750; color: var(--sk-ink-2); }
body.lp2-app .modal input[type="text"], body.lp2-app .modal input[type="number"], body.lp2-app .modal input[type="email"],
body.lp2-app .modal input[type="tel"], body.lp2-app .modal input[type="date"], body.lp2-app .modal input[type="time"],
body.lp2-app .modal input[type="search"], body.lp2-app .modal input[type="password"], body.lp2-app .modal input[type="url"],
body.lp2-app .modal select, body.lp2-app .modal textarea {
    border: 1px solid #dbe2ea; border-radius: 12px; background: #fff; color: #000;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.lp2-app .modal input:focus, body.lp2-app .modal select:focus, body.lp2-app .modal textarea:focus {
    border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); outline: none;
}
body.lp2-app .modal input::placeholder, body.lp2-app .modal textarea::placeholder { color: #64748b; }

/* ---- Pop-ups: bottom sheet on phones, card on larger screens ---------------------- */

body.lp2-app .modal-overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body.lp2-app .modal {
    border-radius: 26px 26px 0 0 !important; background: #fff;
    box-shadow: 0 -24px 60px -20px rgba(15, 23, 42, .45);
}
body.lp2-app .modal-handle { width: 44px; height: 5px; background: #d5dde8; border-radius: 999px; }
body.lp2-app .modal-header {
    padding: 14px 58px 14px 20px;
    background: linear-gradient(120deg, #ecfdf5 0%, #f0f9ff 55%, #fff 100%);
    border-bottom: 1px solid var(--sk-line);
}
body.lp2-app .modal-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.06rem; font-weight: 800; color: #000; letter-spacing: -.01em;
}
/* a small brand bar before the title */
body.lp2-app .modal-title::before {
    content: ""; flex: none; width: 4px; height: 1.05em; border-radius: 4px;
    background: linear-gradient(180deg, #34d399, #059669);
}
body.lp2-app .modal-close {
    width: 34px; height: 34px; border-radius: 12px;
    background: #fff; border: 1px solid #dbe2ea; color: #334155;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.lp2-app .modal-close:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
body.lp2-app .modal-body { padding-top: 16px; }
body.lp2-app .modal .data-list { gap: 0; padding: 0; border: 1px solid var(--sk-line); border-radius: 16px; overflow: hidden; background: #fff; }
body.lp2-app .modal .data-list > .data-item {
    border: 0 !important; border-top: 1px solid var(--sk-line-2) !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 11px 14px !important; min-height: 0;
}
body.lp2-app .modal .data-list > .data-item:first-child { border-top: 0 !important; }
body.lp2-app .modal .data-list > .data-item:hover { transform: none; }
@media (max-width: 767px) {
    body.lp2-app .modal-actions { background: rgba(255, 255, 255, .97); }
}
@media (min-width: 768px) {
    body.lp2-app .modal { border-radius: 22px !important; box-shadow: 0 30px 80px -24px rgba(15, 23, 42, .5); }
}

/* ==========================================================================
   Search (/search) — one field over sales, purchases, orders, expenses,
   products, suppliers and customers. Everything scoped to .lp2-search.
   ========================================================================== */
.lp2-search .page-subtitle { margin-top: 2px; font-size: .84rem; color: #475569; }
.lp2-search .lp2-srch-box {
    position: sticky; top: 0; z-index: 5;
    margin: 4px 0 16px; padding: 12px;
    background: #fff; border: 1px solid #e8ebf0; border-radius: 18px;
    box-shadow: 0 6px 20px -14px rgba(15, 23, 42, .25);
}
.lp2-search .lp2-srch-field { position: relative; display: flex; align-items: center; }
.lp2-search .lp2-srch-field > .bi-search { position: absolute; left: 15px; font-size: 1.05rem; color: var(--lp2-h3, #4f46e5); pointer-events: none; }
.lp2-search #biz-search-input {
    width: 100%; height: 50px; margin: 0;
    padding: 0 46px 0 44px !important;
    border: 1.5px solid #e2e6ec; border-radius: 14px;
    background: #f7f8fb; color: #000;
    font-size: 16px; font-weight: 600;
    outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
}
.lp2-search #biz-search-input::placeholder { color: #8a93a0; font-weight: 500; }
.lp2-search #biz-search-input:focus { border-color: var(--lp2-h3, #4f46e5); background: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); }
.lp2-search #biz-search-input::-webkit-search-cancel-button { display: none; }
.lp2-search .lp2-srch-clear {
    position: absolute; right: 7px; width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; border-radius: 10px; background: #eef0f4; color: #334155; cursor: pointer;
}
.lp2-search .lp2-srch-clear:hover { background: #e2e6ec; }
.lp2-search .lp2-srch-chips {
    display: flex; gap: 6px; margin-top: 10px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lp2-search .lp2-srch-chips::-webkit-scrollbar { display: none; }
.lp2-search .lp2-srch-chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px;
    border: 1px solid #e2e6ec; border-radius: 999px; background: #fff;
    font-size: .8rem; font-weight: 700; color: #1f2937; cursor: pointer; white-space: nowrap;
}
.lp2-search .lp2-srch-chip i { color: var(--c); font-size: .88rem; }
.lp2-search .lp2-srch-chip span {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center;
    background: #f1f3f6; color: #475569; font-size: .7rem; font-weight: 800;
}
.lp2-search .lp2-srch-chip.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); color: #000; }
.lp2-search .lp2-srch-chip.on span { background: var(--c); color: #fff; }

/* starter: recent searches, jump-to tiles, tip */
.lp2-search .lp2-srch-sec { margin-bottom: 18px; }
.lp2-search .lp2-srch-sec-h { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 9px; }
.lp2-search .lp2-srch-sec-h span { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
.lp2-search .lp2-srch-link { border: 0; background: none; padding: 4px 2px; font-size: .8rem; font-weight: 700; color: var(--lp2-deep, #3730a3); cursor: pointer; }
.lp2-search .lp2-srch-recent { display: flex; flex-wrap: wrap; gap: 8px; }
.lp2-search .lp2-srch-recent button {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    height: 36px; padding: 0 13px;
    border: 1px solid #e2e6ec; border-radius: 999px; background: #fff;
    font-size: .84rem; font-weight: 600; color: #000; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp2-search .lp2-srch-recent i { color: #64748b; }
.lp2-search .lp2-srch-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lp2-search .lp2-srch-tile {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    min-height: 54px; padding: 9px 10px 9px 9px;
    border: 1px solid #e8ebf0; border-radius: 14px; background: #fff;
    text-align: left; cursor: pointer; color: #000;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lp2-search .lp2-srch-tile .ic {
    flex: none; width: 36px; height: 36px; border-radius: 11px;
    display: grid; place-items: center; font-size: 1.02rem;
    background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
}
.lp2-search .lp2-srch-tile .tx { flex: 1; min-width: 0; font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp2-search .lp2-srch-tile .go { flex: none; font-size: .72rem; color: #9aa1aa; }
.lp2-search .lp2-srch-tile:hover { border-color: color-mix(in srgb, var(--c) 45%, #e8ebf0); box-shadow: 0 8px 18px -14px rgba(15, 23, 42, .45); transform: translateY(-1px); }
.lp2-search .lp2-srch-tip {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: 14px;
    background: #f5f6ff; border: 1px solid #e4e6fb;
    font-size: .82rem; line-height: 1.55; color: #334155;
}
.lp2-search .lp2-srch-tip > i { color: var(--lp2-h3, #4f46e5); font-size: 1rem; margin-top: 1px; }
.lp2-search .lp2-srch-tip b { color: #000; }

/* results */
.lp2-search .lp2-srch-count { margin: 0 2px 12px; font-size: .8rem; font-weight: 600; color: #475569; }
.lp2-search .lp2-srch-group { margin-bottom: 16px; }
.lp2-search .lp2-srch-group-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; }
.lp2-search .lp2-srch-group-h .ic {
    width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: .86rem;
    background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
}
.lp2-search .lp2-srch-group-h .nm { font-size: .92rem; font-weight: 800; color: #000; }
.lp2-search .lp2-srch-group-h em {
    font-style: normal; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
    display: inline-grid; place-items: center; background: var(--c); color: #fff; font-size: .7rem; font-weight: 800;
}
.lp2-search .lp2-srch-group-h .lp2-srch-link { margin-left: auto; font-size: .78rem; }
.lp2-search .lp2-srch-list { background: #fff; border: 1px solid #e8ebf0; border-radius: 16px; overflow: hidden; }
.lp2-search .lp2-srch-list .lp2-row { border-radius: 0; margin: 0; border: 0; border-bottom: 1px solid #f0f2f5; box-shadow: none; }
.lp2-search .lp2-srch-list .lp2-row:last-child { border-bottom: 0; }
.lp2-search mark { background: #fff3b0; color: #000; border-radius: 3px; padding: 0 1px; }
.lp2-search .lp2-srch-pill {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    background: #f1f3f6; color: #334155; font-size: .68rem; font-weight: 700; text-transform: capitalize;
}
.lp2-search .lp2-srch-pill.bad { background: #fee2e2; color: #991b1b; }

/* states */
.lp2-search .lp2-srch-empty { padding: 34px 18px; text-align: center; background: #fff; border: 1px solid #e8ebf0; border-radius: 18px; }
.lp2-search .lp2-srch-empty .ic {
    width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 16px;
    display: grid; place-items: center; font-size: 1.4rem;
    background: #f1f2fe; color: var(--lp2-h3, #4f46e5);
}
.lp2-search .lp2-srch-empty h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: #000; }
.lp2-search .lp2-srch-empty p { margin: 0 auto; max-width: 380px; font-size: .84rem; line-height: 1.5; color: #475569; }
.lp2-search .lp2-srch-skel { background: #fff; border: 1px solid #e8ebf0; border-radius: 16px; overflow: hidden; }
.lp2-search .lp2-srch-skel > div { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid #f0f2f5; }
.lp2-search .lp2-srch-skel > div:last-child { border-bottom: 0; }
.lp2-search .lp2-srch-skel span, .lp2-search .lp2-srch-skel b, .lp2-search .lp2-srch-skel i {
    display: block; border-radius: 8px;
    background: linear-gradient(90deg, #f0f2f5 25%, #e6e9ee 50%, #f0f2f5 75%); background-size: 200% 100%;
    animation: lp2SrchShimmer 1.2s ease-in-out infinite;
}
.lp2-search .lp2-srch-skel span { width: 38px; height: 38px; border-radius: 12px; flex: none; }
.lp2-search .lp2-srch-skel b { flex: 1; height: 12px; max-width: 60%; }
.lp2-search .lp2-srch-skel i { width: 70px; height: 12px; margin-left: auto; }
@keyframes lp2SrchShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .lp2-search .lp2-srch-skel span, .lp2-search .lp2-srch-skel b, .lp2-search .lp2-srch-skel i { animation: none; } }

@media (min-width: 700px) {
    .lp2-search .lp2-srch-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .lp2-search { max-width: 980px; }
    .lp2-search .lp2-srch-box { padding: 14px; }
    .lp2-search #biz-search-input { height: 54px; font-size: 1.02rem; }
    .lp2-search .lp2-srch-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- List tables (.lt) ----------------------------------------------------
   Sales, purchases, expenses, orders, invoices and inventory as real tables
   (App._ltHtml in sales.js). The name column stays in view while the figures
   scroll sideways on a phone; the amount comes right after it; money is bare
   numbers with the currency in the header. "#page-content" in the selectors
   outranks the app-wide "body.lp2-app #page-content table th" header look,
   which must not reach the name cells (row headers) or the totals row. */
.lp2 .lt-tbl { background: #fff; border: 1px solid var(--lp2-line); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.lp2 .lt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.lp2 .lt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; font-variant-numeric: tabular-nums; color: #000; }
#page-content .lp2 .lt-table th,
#page-content .lp2 .lt-table td {
    padding: 11px 12px; border-bottom: 1px solid #eef1f5; background: #fff; color: #000;
    text-align: left; vertical-align: middle; white-space: nowrap;
    font-size: inherit; font-weight: 500; letter-spacing: normal; text-transform: none;
}
#page-content .lp2 .lt-table thead th {
    padding-top: 10px; padding-bottom: 10px; background: #f8fafc; border-bottom: 1px solid #e6eaf0;
    font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #334155;
}
#page-content .lp2 .lt-table .num { text-align: right; }
.lp2 .lt-table thead th small { font-size: .62rem; font-weight: 700; letter-spacing: .02em; color: #64748b; text-transform: none; }
.lp2 .lt-th { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.lp2 .lt-th i { font-size: .74rem; color: #94a3b8; }
.lp2 .lt-th.is-on, .lp2 .lt-th:hover { color: #000; }
.lp2 .lt-th.is-on i { color: var(--lp2-deep, #065f46); }

/* the name column */
#page-content .lp2 .lt-table .lt-main { position: sticky; left: 0; z-index: 1; min-width: 180px; max-width: 260px; white-space: normal; box-shadow: 1px 0 0 #eef1f5; }
#page-content .lp2 .lt-table thead .lt-main { z-index: 2; }
#page-content .lp2 .lt-table tbody .lt-main { font-weight: 700; }
.lp2 .lt-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp2 .lt-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, #64748b) 13%, #fff); color: var(--c, #64748b); font-size: .92rem; }
.lp2 .lt-ic b { font-size: .68rem; font-weight: 800; }
.lp2 .lt-nmw { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.lp2 .lt-nm { font-weight: 700; color: #000; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp2 .lt-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .72rem; font-weight: 600; color: #64748b; }
.lp2 .lt-sub .tier-chip { font-size: .62rem; padding: 1px 7px; }

/* cells */
.lp2 .lt-amt { font-weight: 800; color: #000; }
.lp2 .lt-nil { color: #cbd5e1; }
.lp2 .lt-when { display: inline-flex; flex-direction: column; line-height: 1.25; }
.lp2 .lt-when b { font-weight: 700; color: #000; }
.lp2 .lt-when small { font-size: .72rem; font-weight: 600; color: #64748b; }
.lp2 .lt-pay { font-weight: 650; color: #1e293b; }
.lp2 .lt-pay i { color: var(--sx-c, #64748b); }
.lp2 .lt-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lp2 .lt-table .badge { white-space: nowrap; }

/* rows: hover, open, dimmed */
#page-content .lp2 .lt-table tbody tr:hover > * { background: #fff; }
#page-content .lp2 .lt-table tbody tr.lt-row.is-click { cursor: pointer; }
#page-content .lp2 .lt-table tbody tr.lt-row.is-click:hover > *,
#page-content .lp2 .lt-table tbody tr.lt-row.sx-open > * { background: #f8fafc; }
#page-content .lp2 .lt-table tbody tr.lt-row.sx-open > * { border-bottom-color: transparent; }
#page-content .lp2 .lt-table tbody tr.lt-dim > * { color: #64748b; }
.lp2 .lt-dim .lt-ic, .lp2 .lt-dim .lt-amt { opacity: .75; }
#page-content .lp2 .lt-table tbody tr:last-child > *,
#page-content .lp2 .lt-table tbody tr.lt-row:has(+ tr.lt-acts:last-child) > * { border-bottom: 0; }

/* the chevron column, and the actions: under the row on a phone (tap),
   floating in at the row's end on hover with a mouse */
/* the chevron column stays at the card's right edge, so the hover actions
   anchored in it show in full even when the figures scroll sideways */
#page-content .lp2 .lt-table .lt-go { position: sticky; right: 0; z-index: 1; width: 28px; padding-left: 0; padding-right: 10px; color: #94a3b8; text-align: right; }
#page-content .lp2 .lt-table tbody tr.lt-row.is-click:hover .lt-go { color: var(--lp2-deep, #065f46); }
.lp2 .lt-table tr.lt-acts { display: none; }
.lp2 .lt-table tr.lt-row.sx-open + tr.lt-acts { display: table-row; }
#page-content .lp2 .lt-table tr.lt-acts > td { padding: 0; background: #f8fafc; }
.lp2 .lt-acts-in { position: sticky; left: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 12px; max-width: calc(100vw - 48px); box-sizing: border-box; }
.lp2 .lt-hov { display: none; }
@media (min-width: 720px) and (hover: hover) {
    .lp2 .lt-hov {
        display: flex; gap: 6px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 3;
        padding: 6px 0 6px 28px; white-space: nowrap;
        background: linear-gradient(90deg, rgba(248, 250, 252, 0), #f8fafc 24px);
        opacity: 0; pointer-events: none; transition: opacity .14s ease;
    }
    .lp2 .lt-row:hover .lt-hov, .lp2 .lt-row:focus-within .lt-hov { opacity: 1; pointer-events: auto; }
}

/* totals */
#page-content .lp2 .lt-table tfoot th,
#page-content .lp2 .lt-table tfoot td { background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 0; font-weight: 800; }
.lp2 .lt-table tfoot th small { margin-left: 4px; font-size: .72rem; font-weight: 600; color: #64748b; }

@media (max-width: 560px) {
    .lp2 .lt-table { font-size: .8rem; }
    #page-content .lp2 .lt-table th,
    #page-content .lp2 .lt-table td { padding: 10px 11px; }
    #page-content .lp2 .lt-table .lt-main { min-width: 146px; max-width: 156px; }
    #page-content .lp2 .lt-table .lt-go { padding-right: 8px; }
    .lp2 .lt-ic { display: none; }
    /* currency under the label keeps the money columns narrow */
    .lp2 .lt-thl { display: inline-block; text-align: inherit; }
    .lp2 .lt-thl small { display: block; margin-top: 1px; }
}
/* a picture in the table's icon spot (admin users and businesses) */
.lp2 .lt-ic .lt-av { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; overflow: hidden; font-size: .68rem; font-weight: 800; }
.lp2 .lt-ic .lt-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp2 .lt-name .ad2-check { flex: none; display: inline-flex; }

/* ---- Paged tables: rows a page above the table, Prev / Next under it ---- */
.lp2 .lt-top {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
    margin: 0 0 8px; padding: 0 2px; font-size: .8rem; font-weight: 650; color: #334155;
}
.lp2 .lt-top .lt-range { margin-left: 0; }
.lp2 .lt-foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
    width: 100%; margin-top: 10px; padding: 8px 10px 8px 14px; box-sizing: border-box;
    background: #fff; border: 1px solid var(--lp2-line, #e6eaf0); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    font-size: .8rem; font-weight: 650; color: #334155;
}
.flex-between > .lt-foot:only-child { margin-top: 0; }
.lp2 .lt-per { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.lp2 .lt-per > span { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #475569; }
.lp2 .lt-per select {
    height: 34px; min-width: 78px; padding: 0 30px 0 12px; margin: 0;
    border: 1px solid #d5dde8; border-radius: 10px; background-color: #f8fafc;
    font: inherit; font-size: .84rem; font-weight: 800; color: #000; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lp2 .lt-per select:hover { border-color: var(--lp2-h3, #059669); }
.lp2 .lt-per select:focus-visible { outline: none; border-color: var(--lp2-h3, #059669); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp2-h3, #059669) 22%, transparent); }
.lp2 .lt-range { margin-left: auto; font-variant-numeric: tabular-nums; color: #475569; }
.lp2 .lt-range b { color: #000; font-weight: 800; }
.lp2 .lt-nav { display: inline-flex; align-items: center; gap: 6px; }
.lp2 .lt-nav-btn {
    width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    border: 1px solid #d5dde8; border-radius: 10px; background: #fff; color: #000; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.lp2 .lt-nav-btn:not(:disabled):hover { border-color: var(--lp2-h3, #059669); color: var(--lp2-deep, #065f46); background: color-mix(in srgb, var(--lp2-h3, #059669) 7%, #fff); }
.lp2 .lt-nav-btn:disabled { opacity: .38; cursor: default; }
.lp2 .lt-pg { min-width: 46px; text-align: center; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
.lp2 .lt-foot .lt-range { margin-left: 0; }
.lp2 .lt-foot .lt-nav { margin-left: auto; }

/* A table placed where a list card was: the table is the card. */
.lp2 .sx-list:has(> .ad2-lt .lt-tbl), .lp2 .sx-list:has(> .lt-tbl) { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; gap: 0; }
/* a picture in the icon spot (promotions, opportunities): over the icon */
.lp2 .lt-ic { position: relative; overflow: hidden; }
.lp2 .lt-ic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a message or description under a row's name */
.lp2 .lt-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 260px; font-weight: 500; color: #475569; white-space: normal; }

/* a category as a tag in its own colour (expenses) */
.lp2 .lt-cat {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px;
    border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c, #64748b) 24%, #fff);
    background: color-mix(in srgb, var(--c, #64748b) 11%, #fff);
    color: color-mix(in srgb, var(--c, #64748b) 62%, #000);
    font-size: .76rem; font-weight: 750; white-space: nowrap;
}
.lp2 .lt-cat i { font-size: .82rem; color: var(--c, #64748b); }