/* ============================================================
 *  Classic Gents Salon POS — brand theme
 *  v2025-05-29-8  (CGS_DEPLOY_MARKER_ADVANCE_TAB)
 *  Premium UAE barber-shop visual identity
 * ============================================================ */

:root {
    /* Palette order: Primary, Secondary, Tertiary, Neutral */
    --cg-primary:   #2986B7;   /* Primary  — accent / active / CTAs */
    --cg-primary-2: #1F6D96;   /* Primary hover */
    --cg-secondary: #111111;   /* Secondary — high-contrast dark */
    --cg-secondary-2: #2A2A2E; /* Secondary hover */
    --cg-tertiary:  #E8F4F9;   /* Tertiary — soft surface wash */
    --cg-neutral:   #666666;   /* Neutral  — muted text */

    /* Legacy aliases preserved so existing rules keep working */
    --cg-navy:    var(--cg-primary);
    --cg-navy-2:  var(--cg-primary-2);
    --cg-red:     var(--cg-secondary);
    --cg-red-2:   var(--cg-secondary-2);
    --cg-text:    var(--cg-secondary);
    --cg-muted:   var(--cg-neutral);
    --cg-border:  #D5DDE3;
    --cg-bg:      #FFFFFF;
    --cg-card:    #FFFFFF;
    --cg-shadow:  0 10px 30px rgba(17, 17, 17, 0.08);

    --cg-radius:  14px;
    --cg-radius-sm: 8px;

    /* Button radius tokens — never hardcode border-radius on a button.
       --radius-pill: fully rounded (filter / category chips)
       --radius-md:   default action buttons (Submit Sale, Clear, Cash, Card, mode tabs)
       --radius-sm:   small utility buttons (Lock, icon-only like fullscreen)
       --radius-xs:   tiny controls (qty steppers, remove/close buttons) */
    --radius-pill: 10px;
    --radius-md:   10px;
    --radius-sm:   10px;
    --radius-xs:   10px;

    --cg-font-ui:     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cg-font-ledger: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Brand tokens — mirror admin-theme.css so receipt / POS rules that
       reference --brand* resolve outside the .cg-admin-body scope (the
       receipt page is .cg-pos-body, so the admin definitions don't
       cascade in). Without these, the dark master-section strip on
       multi-master receipts renders with no background, hiding the
       white master name. */
    --brand:      #1d6b8c;
    --brand-deep: #155570;
    --brand-tint: #E4F0F5;
}

* { box-sizing: border-box; }

/* ---------- iPad / touch hygiene ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}
a, button, [role="button"], input[type="submit"], input[type="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* Disable hover-based transforms on touch-only devices so taps don't latch */
@media (hover: none) {
    *:hover { transform: none !important; }
}
/* Prevent iOS auto-zoom on focused inputs by floor-ing font-size at 16px on
   pointer:coarse devices (admin pages don't have user-scalable=no). */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]),
    select, textarea { font-size: 16px; }
}
html, body {
    margin: 0;
    padding: 0;
    background: var(--cg-bg);
    color: var(--cg-text);
    font-family: var(--cg-font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--cg-navy); text-decoration: none; }
a:hover { color: var(--cg-red); }

/* ---------- Brand wordmark ---------- */
.cg-brand {
    font-family: var(--cg-font-ledger);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.cg-brand .cg-brand-red   { color: var(--cg-red); }
.cg-brand .cg-brand-navy  { color: var(--cg-navy); }
.cg-brand-tagline {
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 11px;
    color: var(--cg-muted);
    font-weight: 500;
}

/* ---------- Reusable decorative stripes ---------- */
.cg-barber-stripe {
    height: 8px;
    background: repeating-linear-gradient(
        135deg,
        var(--cg-red)     0 14px,
        #ffffff           14px 28px,
        var(--cg-navy)    28px 42px,
        #ffffff           42px 56px
    );
    border-radius: 4px 4px 0 0;
}
.cg-barber-stripe-thin {
    height: 4px;
    background: repeating-linear-gradient(
        135deg,
        var(--cg-red)     0 10px,
        #ffffff           10px 20px,
        var(--cg-navy)    20px 30px,
        #ffffff           30px 40px
    );
}
.cg-airmail-top {
    height: 18px;
    background: repeating-linear-gradient(
        135deg,
        var(--cg-red) 0 12px,
        #ffffff 12px 24px,
        var(--cg-navy) 24px 36px,
        #ffffff 36px 48px
    );
    border-radius: var(--cg-radius) var(--cg-radius) 0 0;
}

/* ---------- Panels / cards ---------- */
.cg-panel {
    background: var(--cg-card);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    box-shadow: var(--cg-shadow);
    overflow: hidden;
}
.cg-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--cg-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cg-panel-title {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cg-navy);
    margin: 0;
}
/* Modifier for panel-headers that no longer carry a title (chrome
 * already owns the page identity) but still need to show actions
 * (Add button, count badge, etc.). Without this the default
 * justify-content: space-between pulls the only remaining child to
 * the left edge; this restores the expected right alignment. */
.cg-panel-header.is-actions-end { justify-content: flex-end; }

/* ---------- POS top tabs / nav cards (live in the header) ---------- */
.cg-pos-tabs {
    display: flex;
    gap: 18px;
    margin: 0;
}
.cg-pos-tab {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 30px;
    min-width: 300px;
    min-height: 48px;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: var(--radius-md);
    color: var(--cg-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.18s ease;
    cursor: pointer;
    text-decoration: none;
}
.cg-pos-tab:hover {
    border-color: var(--cg-navy);
    color: var(--cg-navy);
    transform: translateY(-1px);
}
.cg-pos-tab.active {
    background: var(--cg-navy);
    color: #fff;
    border-color: var(--cg-navy);
}
.cg-pos-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--cg-red);
}
.cg-pos-tab .cg-pos-tab-icon {
    /* No background tile — the SVG sits flush in the button. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-navy);
    flex-shrink: 0;
}
.cg-pos-tab .cg-pos-tab-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}
.cg-pos-tab.active .cg-pos-tab-icon { color: #fff; }

/* ---------- Buttons ---------- */
.cg-btn,
.cg-btn-primary,
.cg-btn-danger,
.cg-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    min-height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    font-family: var(--cg-font-ui);
}
.cg-btn-primary {
    background: var(--cg-navy);
    color: #fff;
}
.cg-btn-primary:hover {
    background: var(--cg-navy-2);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(41, 134, 183,0.25);
}
.cg-btn-danger {
    background: var(--cg-red);
    color: #fff;
}
.cg-btn-danger:hover {
    background: var(--cg-red-2);
    color: #fff;
}
.cg-btn-ghost {
    background: transparent;
    color: var(--cg-navy);
    border-color: var(--cg-border);
}
.cg-btn-ghost:hover {
    border-color: var(--cg-navy);
    background: #fff;
}
.cg-btn:disabled,
.cg-btn-primary:disabled,
.cg-btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---------- Forms ---------- */
.cg-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cg-muted);
    margin-bottom: 6px;
}
.cg-input, .cg-select, .cg-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    font-family: var(--cg-font-ui);
    font-size: 14px;
    background: #fff;
    color: var(--cg-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cg-input:focus, .cg-select:focus, .cg-textarea:focus {
    outline: none;
    border-color: var(--cg-navy);
    box-shadow: 0 0 0 3px rgba(41, 134, 183,0.10);
}

/* ---------- Ledger table ---------- */
.cg-ledger-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.cg-ledger-table thead th {
    background: var(--cg-navy);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 11px;
    font-weight: 700;
    padding: 12px 14px;
    text-align: left;
}
.cg-ledger-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--cg-border);
    font-size: 13px;
    vertical-align: middle;
}
.cg-ledger-table tbody tr:last-child td { border-bottom: 0; }
.cg-ledger-table tbody tr:hover { background: #FBF8F4; }
.cg-money {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--cg-navy);
}
.cg-money.cg-money-out { color: var(--cg-red); }

/* ---------- New UAE Dirham symbol (inline SVG) ----------
 * Sized so the silhouette matches digit cap-height visually. Loaded
 * here (the base POS stylesheet, included by every POS page) so the
 * receipt page — which doesn't include pos-side-panel.css — still
 * renders the icon at em-scaled size instead of its intrinsic viewBox
 * dimensions.
 *
 * IMPORTANT: width is set explicitly (not 'auto') because iPadOS
 * Safari doesn't reliably derive width from the SVG viewBox when only
 * height is set — it renders the SVG at its intrinsic 344.84-unit
 * width, which gets clipped by the height-constrained box and the
 * bowl's curve disappears off the right and top/bottom edges. The
 * aspect ratio is 344.84 / 299.91 ≈ 1.15, so width = height * 1.15
 * (rounded up slightly for a sub-pixel safety buffer). */
.cg-aed-icon {
    display: inline-block;
    width: 0.85em;
    height: 0.7em;
    vertical-align: 0;
    flex-shrink: 0;
    margin-right: 0.1em;
}

/* ---------- Category badges ---------- */
.cg-category-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--cg-muted);
}
.cg-category-badge.supplies    { background: var(--cg-red); }
.cg-category-badge.utilities   { background: #7B4B1E; }
.cg-category-badge.rent        { background: var(--cg-navy); }
.cg-category-badge.maintenance { background: var(--cg-neutral); }
.cg-category-badge.other       { background: #4B5563; }

/* ---------- POS header ---------- */
.cg-pos-header {
    background: #fff;
    border-bottom: 1px solid var(--cg-border);
    padding: 10px 22px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.cg-pos-header .cg-brand { font-size: 20px; }
.cg-pos-header .cg-pos-tabs { justify-self: start; }

.cg-pos-shell {
    /* Touch-kiosk friendly: fluid width, tighter side padding,
       no max-width cap so the cart can fill the screen. */
    padding: 18px 22px;
    width: 100%;
    margin: 0 auto;
}

/* ---------- Login / PIN-pad ---------- */
.cg-login-bg {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--cg-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}
body:has(.cg-login-bg) { overflow: hidden; margin: 0; }
.cg-login-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(15, 30, 50, 0.12);
    overflow: hidden;
    border: 1px solid #e6ebf0;
}
.cg-login-card .cg-airmail-top {
    height: 6px;
    background: linear-gradient(135deg, #1d6b8c 0%, #134a61 100%);
}
.cg-login-body { padding: 28px 32px 30px; text-align: center; }
.cg-login-icon {
    width: 56px;
    height: 56px;
    margin: 4px auto 14px;
    border-radius: 15px;
    background: linear-gradient(135deg, #1d6b8c 0%, #134a61 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(19, 74, 97, 0.22);
}
.cg-login-icon svg { width: 26px; height: 26px; display: block; }
.cg-login-brand {
    font-family: var(--cg-font-ledger);
    margin: 0 0 18px;
    letter-spacing: -0.2px;
    line-height: 1.15;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cg-login-brand-name {
    font-size: 22px;
    font-weight: 700;
    color: #16202b;
}
.cg-login-brand-tag {
    font-size: 13px;
    font-weight: 500;
    color: #1d6b8c;
    letter-spacing: 0.2px;
}
.cg-login-subtitle {
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: #7d8a98;
    font-size: 11px;
    font-weight: 600;
    margin: 8px 0 14px;
}

.cg-pin-display {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 4px 0 20px;
}
.cg-pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 0;
    background: #d9e1e8;
    transition: background 0.15s ease, transform 0.15s ease;
    color: transparent;
    font-size: 0;
}
.cg-pin-dot.filled {
    background: #1d6b8c;
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(29, 107, 140, 0.32);
}
.cg-pin-dot.filled::after { content: ''; }
.cg-pin-error {
    color: #b91c1c;
    font-size: 12.5px;
    min-height: 16px;
    margin: 0 0 10px;
    font-weight: 500;
}
.cg-pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}

/* Invalid-PIN shake — triggered once on page load when the server
 * rejected the previous attempt. The class is removed on animationend
 * so the next failure can replay it. Respects prefers-reduced-motion. */
@keyframes cg-pin-shake {
      0% { transform: translateX(0); }
     15% { transform: translateX(-8px); }
     30% { transform: translateX(7px); }
     45% { transform: translateX(-5px); }
     60% { transform: translateX(4px); }
     75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.cg-pin-pad-shake { animation: cg-pin-shake 0.42s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
    .cg-pin-pad-shake { animation: none; }
}
.cg-pin-key {
    background: #fff;
    color: #16202b;
    border: 1px solid #e6ebf0;
    border-radius: 14px;
    padding: 14px 0;
    min-height: 62px;
    font-size: 26px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
    font-family: var(--cg-font-ui);
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cg-pin-key:hover {
    background: #f7f9fb;
    border-color: #cdd6df;
}
.cg-pin-key:active {
    transform: scale(0.96);
    background: #eef2f6;
    border-color: #1d6b8c;
}
.cg-pin-key.cg-pin-key-clear,
.cg-pin-key.cg-pin-key-back {
    background: #fff;
    color: #7d8a98;
    border: 1px solid #e6ebf0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.cg-pin-key.cg-pin-key-clear:hover,
.cg-pin-key.cg-pin-key-back:hover {
    border-color: #cdd6df;
    color: #16202b;
    background: #f7f9fb;
}
.cg-pin-key.cg-pin-key-back svg {
    width: 22px;
    height: 22px;
    display: block;
}

.cg-login-footer {
    background: #fff;
    border-top: 1px solid #e6ebf0;
    padding: 10px 18px;
    text-align: center;
    font-size: 9.5px;
    color: #7d8a98;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 500;
}

/* ---------- Utilities ---------- */
.cg-row     { display: flex; gap: 16px; }
.cg-stack   { display: flex; flex-direction: column; gap: 16px; }
.cg-flex-1  { flex: 1; }
.cg-text-center { text-align: center; }
.cg-text-muted  { color: var(--cg-muted); }
.cg-uppercase   { text-transform: uppercase; letter-spacing: 1.5px; }

@media (max-width: 1180px) {
    /* Stack header as: brand+actions row, then tabs row centered below */
    .cg-pos-header {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "brand actions"
            "tabs  tabs";
        row-gap: 10px;
    }
    .cg-pos-header .cg-brand       { grid-area: brand; }
    .cg-pos-header .cg-topbar-actions { grid-area: actions; justify-self: end; }
    .cg-pos-header .cg-pos-tabs    { grid-area: tabs; justify-self: stretch; }
    .cg-pos-tabs { width: 100%; gap: 12px; }
    .cg-pos-tab  {
        flex: 1 1 0;
        min-width: 0;                /* allow shrink — was 300px and overflowed iPad portrait */
        padding: 12px 16px;
        min-height: 48px;
        font-size: 15px;
        letter-spacing: 1.2px;
    }
}
@media (max-width: 600px) {
    .cg-pos-tab span:not(.cg-pos-tab-icon) { display: none; } /* icon-only */
    .cg-pos-tab { justify-content: center; padding: 10px; min-height: 48px; }
    .cg-pos-shell { padding: 14px; }
    .cg-pos-header { padding: 10px 14px; }
}

/* ============================================================
 *  Admin layout (sidebar + main column) — NO nav cards here.
 * ============================================================ */
.cg-admin-body { background: var(--cg-bg); }
.cg-admin-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

.cg-sidebar {
    background: #fff;
    border-right: 1px solid var(--cg-border);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.cg-sidebar-brand {
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--cg-border);
}
.cg-sidebar-wordmark {
    font-family: var(--cg-font-ledger);
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 6px;
}
.cg-sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cg-sidebar-group {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--cg-muted);
    padding: 14px 10px 6px;
}
.cg-sidebar-link {
    display: block;
    padding: 10px 12px;
    border-radius: var(--cg-radius-sm);
    color: var(--cg-text);
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
}
.cg-sidebar-link:hover {
    background: var(--cg-bg);
    color: var(--cg-navy);
}
.cg-sidebar-link.active {
    background: var(--cg-navy);
    color: #fff;
    font-weight: 600;
}
.cg-sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 4px;
    background: var(--cg-red);
    border-radius: 0 4px 4px 0;
}
.cg-sidebar-foot {
    padding-top: 14px;
    border-top: 1px dashed var(--cg-border);
}

.cg-admin-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cg-admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--cg-border);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cg-admin-title {
    font-family: var(--cg-font-ledger);
    font-size: 24px;
    margin: 0 0 2px;
    color: var(--cg-navy);
}
.cg-admin-crumb {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    color: var(--cg-muted);
}
.cg-admin-userbox {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cg-admin-userlabel { text-align: right; font-size: 13px; }
.cg-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-left: 6px;
    color: #fff;
}
.cg-pill-admin   { background: var(--cg-red); }
.cg-pill-manager { background: var(--cg-navy); }
.cg-pill-viewer  { background: var(--cg-neutral); }

/* ---------- User chip (admin + POS chrome) ---------- */
.cg-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-right: 4px;
}
.cg-user-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: #EEF1FC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-navy);
}
.cg-user-meta { line-height: 1.15; min-width: 0; }
.cg-user-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--cg-text);
    white-space: nowrap;
}
.cg-user-role {
    margin-top: 3px;
    font-size: 11px;
    color: var(--cg-muted);
    letter-spacing: 1.8px;
    font-weight: 600;
}

/* ---------- Button with leading icon (Lock etc.) ---------- */
.cg-btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.cg-btn-with-icon svg { display: block; flex-shrink: 0; }

/* ============================================================
 *  Topbar action cluster (admin + POS chrome share this)
 * ============================================================ */
.cg-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.cg-topbar-divider {
    width: 1px;
    height: 28px;
    background: var(--cg-border);
    margin: 0 2px;
}

/* Filled "topbar" button — same look as cg-btn-primary but denser */
.cg-tbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    min-height: 44px;
    background: var(--cg-navy);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.4px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.14s ease;
    font-family: var(--cg-font-ui);
}
.cg-tbtn:hover {
    background: var(--cg-navy-2);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(41, 134, 183,0.20);
}
.cg-tbtn svg { display: block; flex-shrink: 0; }
.cg-tbtn-primary { /* base style already set */ }
.cg-tbtn-danger {
    background: var(--cg-red);
}
.cg-tbtn-danger:hover {
    background: var(--cg-red-2);
    box-shadow: 0 6px 14px rgba(17, 17, 17,0.20);
}

/* Square icon-only button (fullscreen / settings shortcut) */
.cg-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--cg-border);
    color: var(--cg-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.14s ease;
    text-decoration: none;
}
.cg-icon-btn:hover {
    border-color: var(--cg-navy);
    color: var(--cg-navy);
    background: var(--cg-bg);
    transform: translateY(-1px);
}
.cg-icon-btn.cg-fs-on { background: var(--cg-bg); border-color: var(--cg-navy); }
.cg-icon-btn svg { display: block; }

/* Avatar trigger + popover */
.cg-user-popover-wrap { position: relative; }
.cg-user-avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--cg-border);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.14s ease;
}
.cg-user-avatar-btn:hover {
    border-color: var(--cg-navy);
    transform: translateY(-1px);
}
.cg-user-popover-wrap.open .cg-user-avatar-btn {
    border-color: var(--cg-navy);
    box-shadow: 0 0 0 3px rgba(41, 134, 183,0.15);
}
.cg-user-avatar-btn .cg-user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    flex: 0 0 auto;
}

.cg-user-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    box-shadow: 0 14px 40px rgba(41, 134, 183,0.18);
    padding: 6px 0;
    z-index: 90;
}
.cg-user-popover[hidden] { display: none; }
.cg-user-popover-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cg-bg);
    border-radius: calc(var(--cg-radius) - 2px) calc(var(--cg-radius) - 2px) 0 0;
    margin: -6px 0 0;
}
.cg-user-avatar-md {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
}
.cg-user-popover-divider {
    height: 1px;
    background: var(--cg-border);
    margin: 4px 0;
}
.cg-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--cg-text);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.12s ease;
}
.cg-popover-item:hover {
    background: var(--cg-bg);
    color: var(--cg-navy);
}
.cg-popover-item svg { color: var(--cg-muted); flex-shrink: 0; }
.cg-popover-item:hover svg { color: var(--cg-navy); }
.cg-popover-item-danger { color: var(--cg-red); }
.cg-popover-item-danger:hover { background: #FEF2F2; color: var(--cg-red); }
.cg-popover-item-danger svg { color: var(--cg-red); }

@media (max-width: 720px) {
    .cg-tbtn span { display: none; }   /* icon-only on small screens */
    .cg-tbtn { padding: 9px 12px; }
}

.cg-admin-content {
    padding: 28px 32px 16px;
    flex: 1;
}
.cg-admin-foot {
    border-top: 1px solid var(--cg-border);
    background: #fff;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--cg-muted);
}

.cg-flash {
    border-radius: var(--cg-radius-sm);
    padding: 12px 16px;
    margin: 0 32px 16px;
    font-size: 13.5px;
    border: 1px solid transparent;
}
.cg-flash-ok  { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.cg-flash-err { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }

/* ---------- KPI cards (admin dashboard) ---------- */
.cg-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.cg-kpi {
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}
.cg-kpi::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--cg-navy);
}
.cg-kpi.cg-kpi-red::before  { background: var(--cg-red); }
.cg-kpi.cg-kpi-gold::before { background: #B68B2D; }
.cg-kpi.cg-kpi-grey::before { background: var(--cg-neutral); }
.cg-kpi-label {
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cg-muted);
    margin-bottom: 6px;
}
.cg-kpi-value {
    font-family: var(--cg-font-ledger);
    font-size: 26px;
    color: var(--cg-navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cg-kpi-sub {
    color: var(--cg-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* ---------- Section grid for admin pages ---------- */
.cg-grid-2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}
.cg-grid-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cg-grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.cg-panel-body { padding: 18px 20px; }

.cg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cg-form-row .cg-form-field { min-width: 0; }
.cg-form-field { margin-bottom: 14px; }

@media (max-width: 1100px) {
    .cg-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .cg-grid-2   { grid-template-columns: 1fr; }
    .cg-grid-cols-3 { grid-template-columns: 1fr; }
}

/* ---------- Inline toggle (checkbox + label) ---------- */
.cg-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.cg-toggle input { accent-color: var(--cg-navy); width: 16px; height: 16px; }
.cg-toggle:hover { border-color: var(--cg-navy); }

/* ---------- Service preview card (admin edit page) ---------- */
.cg-svc-card {
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    padding: 22px 18px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(41, 134, 183,0.06);
    position: relative;
    overflow: hidden;
}
.cg-svc-card::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: repeating-linear-gradient(135deg,
        var(--cg-red) 0 8px, #fff 8px 16px, var(--cg-navy) 16px 24px, #fff 24px 32px);
}
.cg-svc-icon {
    width: 44px; height: 44px;
    background: var(--cg-bg);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-red);
    font-size: 22px;
    margin: 6px auto 10px;
}
.cg-svc-name {
    font-weight: 700;
    color: var(--cg-navy);
    letter-spacing: 0.4px;
    font-size: 15px;
}
.cg-svc-cat {
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-size: 10px;
    color: var(--cg-muted);
    margin: 4px 0 12px;
    font-weight: 600;
}
.cg-svc-price {
    font-family: var(--cg-font-ledger);
    font-size: 22px;
    color: var(--cg-text);
}

/* ---------- Avatars (barbers) ---------- */
.cg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cg-bg);
    color: var(--cg-navy);
    border: 1.5px solid var(--cg-border);
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 14px;
    text-transform: uppercase;
    overflow: hidden;
    vertical-align: middle;
}
.cg-avatar-fallback {
    background: linear-gradient(135deg, #FFFFFF 0%, #F1EEEA 100%);
    color: var(--cg-navy);
}
.cg-avatar-lg { width: 96px;  height: 96px;  font-size: 28px; border-width: 2px; }
.cg-avatar-xl { width: 132px; height: 132px; font-size: 36px; border-width: 2.5px; }

/* ============================================================
 *  POS hero screen — new-sale.php
 * ============================================================ */
.cg-pos-body { background: var(--cg-bg); min-height: 100vh; display: flex; flex-direction: column; }
.cg-pos-headerright { display: flex; align-items: center; gap: 14px; }
.cg-pos-headerinfo  { font-size: 13px; text-align: right; }
.cg-pos-headerinfo strong { display: inline-block; margin: 0 6px; }

.cg-pos-tab-disabled {
    cursor: not-allowed;
    opacity: 0.45;
    background: #fff;
    color: var(--cg-muted);
}
.cg-pos-tab-disabled:hover { transform: none; border-color: var(--cg-border); color: var(--cg-muted); }

/* ============================================================
   POS new-sale: 3-column layout (barbers · services · cart)
   ============================================================ */
.cg-pos-grid-3 {
    display: grid;
    grid-template-columns: 240px 1fr clamp(340px, 28vw, 460px);
    gap: 16px;
    align-items: stretch;
}
/* 2-column variant for panes that only need form + summary
   (e.g. Expense — no left-side list). Drops the 240px barber/list
   column and lets the form fill the freed space. */
.cg-pos-grid-2 {
    display: grid;
    grid-template-columns: 1fr clamp(340px, 28vw, 460px);
    gap: 16px;
    align-items: stretch;
}
/* Expense pane: 30% form / 70% summary+list. The right column is
 * itself a vertical stack of two boxes (summary on top, list below). */
.cg-pos-grid-expense {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 16px;
    align-items: stretch;
}
/* Advance pane: barber rail | 30% form | rest for summary+accordion. */
.cg-pos-grid-advance {
    display: grid;
    grid-template-columns: 240px 30% 1fr;
    gap: 16px;
    align-items: stretch;
}
/* Payout pane: barber rail | rest for per-barber breakdown. */
.cg-pos-grid-payout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    align-items: stretch;
}
.cg-pos-payout-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cg-pos-payout-side .cg-pos-payout-box {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    height: auto !important;
}

/* Period header with prev/next month buttons. */
.cg-pay-period-head { align-items: center; }
.cg-pay-period-nav { display: inline-flex; gap: 6px; }
.cg-pay-period-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.cg-pay-period-btn:hover {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
}
.cg-pay-period-btn svg { width: 14px; height: 14px; }

/* Headline net + month selector — one row, three cells. */
.cg-pay-headline {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    background: linear-gradient(135deg, #1d6b8c 0%, #134a61 100%);
    color: #fff;
    border-radius: 10px;
    margin: 12px;
}
.cg-pay-headline-id { min-width: 0; }
.cg-pay-headline-name { font-size: 16px; font-weight: 700; }
.cg-pay-headline-meta { font-size: 11px; opacity: 0.78; margin-top: 3px; font-variant-numeric: tabular-nums; }
.cg-pay-headline-period {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.cg-pay-period-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    opacity: 0.78;
    font-weight: 700;
    margin-bottom: 4px;
}
.cg-pay-month-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    border-radius: 8px;
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
}
.cg-pay-month-select:focus { outline: 0; border-color: #fff; }
.cg-pay-month-select option { color: #16202b; background: #fff; }
/* Defensive: the admin shell's .cg-admin-body select rules would
 * otherwise re-tint this dropdown dark grey on the dark headline.
 * Pin the foreground to white so the period stays legible. */
.cg-admin-body .cg-pay-month-select { color: #fff; }
.cg-pay-headline-net  { text-align: right; line-height: 1.15; }
.cg-pay-headline-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    opacity: 0.78;
    margin-bottom: 4px;
    font-weight: 700;
}
.cg-pay-headline-amt {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
}
.cg-pay-headline-amt.cg-money-out { color: #fca5a5; }

/* Tabbed panel for Commission breakdown / Open advances. */
.cg-pay-tabs-card .cg-pay-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    padding: 0 18px;
}
.cg-pay-tab {
    background: transparent;
    border: 0;
    padding: 12px 0 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.14s ease;
}
.cg-pay-tab:hover { color: var(--text); }
.cg-pay-tab.active {
    color: var(--primary);
    font-weight: 700;
}
.cg-pay-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2.5px;
    border-radius: 2px 2px 0 0;
    background: var(--primary);
}
.cg-pay-tab-count {
    background: var(--bg);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.cg-pay-tab.active .cg-pay-tab-count {
    background: #eef6fa;
    color: var(--primary);
}
.cg-pay-tab-panel[hidden] { display: none; }

/* Advance-return input — lives inside the Calculation table on the
 * Payout pane, used by the manager to type how much of the outstanding
 * advance balance to deduct from this payout. */
.cg-pay-deduct-input {
    width: 120px;
    text-align: right;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}
.cg-pay-deduct-input::-webkit-outer-spin-button,
.cg-pay-deduct-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.cg-pay-deduct-input:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29,107,140,0.12);
}
.cg-pay-deduct-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: #fafbfd;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.cg-pay-deduct-meta { display: inline-flex; align-items: center; gap: 10px; }
.cg-pay-deduct-meta-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 700;
}
.cg-pay-deduct-date {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
}
.cg-pay-deduct-bar .cg-cart-submit-btn {
    /* Pinned size so Confirm Payout and the green Paid replacement
     * read as one button shape across POS and admin. white-space:
     * nowrap keeps the label on one line at narrow viewports. */
    min-height: 44px;
    padding: 10px 22px;
    font-size: 13px;
    letter-spacing: 0.6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cg-pay-deduct-help {
    margin: 0;
    padding: 8px 18px 14px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
    font-style: italic;
}

/* Paid / Pending pill rendered beside the Net payout label. */
.cg-pay-status {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    vertical-align: middle;
}
.cg-pay-status-paid    { background: #dcfce7; color: #166534; }
.cg-pay-status-pending { background: #fef3c7; color: #92400e; }

/* Advance book — single combined ledger across every open advance
 * (Date | Particulars | Taken | Paid | Balance) with a running
 * balance per row and grand totals in the tfoot. */
.cg-pay-adv-ledger { margin: 0; }
.cg-pay-adv-ledger tfoot td { background: #fafbfd; font-weight: 700; }

/* Clickable service name in the commission breakdown — opens the
 * per-service drill-down side panel. */
.cg-pay-svc-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.14s ease;
}
.cg-pay-svc-link:hover,
.cg-pay-svc-link:focus {
    color: var(--primary-deep);
    border-bottom-color: var(--primary);
}

/* Drill-down panel partial (loaded via fetch into the side panel). */
.cg-pay-drill { display: flex; flex-direction: column; gap: 14px; }

/* "Back" link sent only when the drill-down was opened from inside
 * another side-panel partial (e.g. the P&L View). Re-fetches the
 * parent partial via the same data-side-panel-open handler. */
.cg-pay-drill-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 6px 12px 6px 8px;
    border-radius: var(--radius-sm);
    background: #f4f6f8;
    color: #1d6b8c;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}
.cg-pay-drill-back:hover {
    background: #e6edf2;
    color: #134a61;
}
.cg-pay-drill-back svg { width: 14px; height: 14px; }
.cg-pay-drill-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    /* Reserve space on the right so the Commission stat doesn't slide
     * under the floating .cg-side-panel-close (30px wide, sits at
     * right: 12px on the panel card). */
    padding-right: 44px;
}
.cg-pay-drill-meta {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #7d8a98;
    font-weight: 700;
    margin-bottom: 4px;
}
.cg-pay-drill-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #16202b;
    letter-spacing: -0.2px;
}
.cg-pay-drill-sub {
    margin-top: 4px;
    font-size: 11.5px;
    color: #7d8a98;
}
.cg-pay-drill-totals {
    display: inline-flex;
    gap: 28px;          /* breathing room so labels don't kiss the next amount */
    flex-shrink: 0;
}
.cg-pay-drill-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    white-space: nowrap;
}
.cg-pay-drill-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #7d8a98;
    font-weight: 700;
    margin-bottom: 3px;
}
.cg-pay-drill-stat-amt {
    font-size: 14px;
    font-weight: 700;
    color: #16202b;
    display: inline-flex;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}
.cg-pay-drill-stat-amt.cg-money-pos { color: #2f9e6e; }
.cg-pay-drill-table thead th { background: #fafbfd; }

/* Date column in the drill-down table: date on top, time muted below. */
.cg-pay-drill-table .cg-pay-drill-date {
    line-height: 1.2;
    white-space: nowrap;
}
.cg-pay-drill-table .cg-pay-drill-date-d {
    display: block;
    font-weight: 600;
    color: #16202b;
}
.cg-pay-drill-table .cg-pay-drill-date-t {
    display: block;
    font-size: 10px;
    color: #7d8a98;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Empty state when no barber selected. */
.cg-pay-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--muted);
}
.cg-pay-empty svg {
    width: 56px; height: 56px;
    color: var(--border);
    margin-bottom: 14px;
}
.cg-pay-empty h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--text);
    font-weight: 700;
}
.cg-pay-empty p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Calculation table — like the advance table but 3 cols. */
.cg-pay-calc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: #fff;
}
.cg-pay-calc-table td {
    padding: 11px 18px;
    border-bottom: 1px solid #f0f3f6;
    vertical-align: top;
    color: var(--text);
}
.cg-pay-calc-table tbody tr:last-child td { border-bottom: 0; }
.cg-pay-calc-table td.label { font-weight: 700; white-space: nowrap; }
.cg-pay-calc-table td.hint  { color: var(--muted); font-size: 11px; line-height: 1.35; }
.cg-pay-calc-table td.num   {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}
.cg-pay-calc-table .cg-money-pos  { color: #2f9e6e; }
.cg-pay-calc-table .cg-money-out  { color: #b91c1c; }
.cg-pay-calc-table .cg-money-zero { color: #b8c1cc; font-weight: 500; }
.cg-pay-calc-table tfoot td {
    padding: 12px 18px;
    background: #fafbfd;
    border-top: 1px solid var(--border);
    font-weight: 700;
}
.cg-pay-calc-table tfoot td.label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10.5px;
    color: var(--muted);
}
.cg-pay-net {
    font-size: 16px;
    color: var(--primary);
}
.cg-pos-advance-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    height: 100%;
}
.cg-pos-advance-side .cg-pos-advance-box {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    height: auto !important;
}
.cg-pos-advance-side .cg-pos-advance-box:last-child {
    flex: 1 1 auto;
    min-height: 240px;
}
.cg-pos-advance-side .cg-pos-advance-box:last-child .cg-cart-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Summary KPI row (Total taken / Paid back / Outstanding). */
.cg-adv-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px 16px 16px;
}
.cg-adv-summary-kpi {
    background: var(--bg);
    border-radius: 10px;
    padding: 10px 12px;
}
.cg-adv-summary-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.cg-adv-summary-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
}
.cg-money-pos { color: #2f9e6e; }

/* Per-barber accordion list. */
.cg-adv-barber-list {
    display: flex;
    flex-direction: column;
    gap: 6px;          /* breathing room between barbers */
}
.cg-adv-barber {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.cg-adv-barber[open] > .cg-adv-barber-summary {
    border-bottom: 1px solid var(--border);
}
.cg-adv-barber-summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr auto 14px;
    gap: 18px;
    align-items: center;
    user-select: none;
    background: #fff;
    transition: background 0.14s ease;
}
.cg-adv-barber[open] > .cg-adv-barber-summary { background: #eef6fa; }
.cg-adv-barber-summary::-webkit-details-marker { display: none; }
.cg-adv-barber-id { min-width: 0; }
.cg-adv-barber-name {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text);
}
.cg-adv-barber-meta {
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.cg-adv-barber-totals {
    display: inline-flex;
    align-items: flex-end;
    gap: 22px;
    font-variant-numeric: tabular-nums;
}
/* When the accordion is open the table foot already shows the totals,
 * so hide the summary balance to avoid duplication. */
.cg-adv-barber[open] > .cg-adv-barber-summary .cg-adv-barber-totals { display: none; }
.cg-adv-barber-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}
.cg-adv-barber-stat-label {
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.cg-adv-barber-stat-amt {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    display: inline-flex;
    align-items: baseline;
}
.cg-adv-barber-chevron {
    width: 13px;
    height: 13px;
    color: var(--muted);
    transition: transform 0.18s ease;
}
.cg-adv-barber[open] .cg-adv-barber-chevron { transform: rotate(180deg); }
.cg-adv-barber-body {
    padding: 0;
}

/* 5-col advance history table. */
.cg-adv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}
.cg-adv-table thead th {
    text-align: left;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--primary);
    font-weight: 700;
    white-space: nowrap;
}
.cg-adv-table thead th.num { text-align: right; }
.cg-adv-table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid #f0f3f6;
    vertical-align: middle;
    color: var(--text);
}
.cg-adv-table tbody tr:last-child td { border-bottom: 0; }
.cg-adv-table tbody td.num,
.cg-adv-table tfoot td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}
.cg-adv-table tbody td:first-child { white-space: nowrap; color: var(--muted); }
.cg-adv-table tfoot td {
    padding: 11px 16px;
    background: #fafbfd;
    border-top: 1px solid var(--border);
    font-weight: 700;
    color: var(--text);
}
.cg-adv-table tfoot td:first-child {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    color: var(--muted);
}
/* Explicit money colours — scoped so the cg-money-out helper class
 * actually paints red here (the base .cg-money.cg-money-out rule
 * requires both classes). */
.cg-adv-table .cg-money-out  { color: #b91c1c; }
.cg-adv-table .cg-money-pos  { color: #2f9e6e; }
.cg-adv-table .cg-money-zero { color: #b8c1cc; font-weight: 500; }

/* Same money colour helpers for the Balance / Paid pills in the
 * closed accordion summary. */
.cg-adv-barber-stat-amt.cg-money-out  { color: #b91c1c; }
.cg-adv-barber-stat-amt.cg-money-pos  { color: #2f9e6e; }
.cg-adv-barber-stat-amt.cg-money-zero { color: #b8c1cc; font-weight: 500; }

/* Reason radio group in the advance entry form. */
.cg-adv-reason-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.cg-adv-reason-opt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text);
    transition: border-color 0.14s ease, background 0.14s ease;
}
.cg-adv-reason-opt input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    background: #fff;
    cursor: pointer;
}
.cg-adv-reason-opt input[type="radio"]:checked {
    border-color: var(--primary);
}
.cg-adv-reason-opt input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--primary);
}
.cg-adv-reason-opt:has(input:checked) {
    border-color: var(--primary);
    background: #eef6fa;
    font-weight: 600;
}

/* Free-text reason input shown only when "Other" radio is selected. */
.cg-adv-other-input {
    margin-top: 6px;
}
.cg-adv-other-input[hidden] { display: none !important; }

/* Compact form column for the Advance pane (mirrors the expense form). */
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form-col {
    overflow: hidden;
    min-width: 0;
}
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form {
    padding: 14px 16px;
    gap: 10px;
    border-radius: 12px;
    min-width: 0;
}
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form .cg-form-field {
    gap: 4px;
    min-width: 0;
}
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form .cg-label {
    font-size: 10px;
    letter-spacing: 1px;
}
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form .cg-input,
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form textarea.cg-input {
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form input[type="date"].cg-input {
    padding-right: 4px;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form textarea.cg-input { min-height: 60px; }
.cg-pos-fit .cg-pos-grid-advance #cg-adv-submit {
    margin-top: 6px;
    padding: 10px 14px;
    min-height: 42px;
    font-size: 13px;
    letter-spacing: 1px;
}

/* Form starts locked — the cashier must pick a barber in col 1 first.
 * Disabled inputs are dimmed; the form gets a "Pick a barber first"
 * hint pinned to its top edge. */
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form.cg-advance-form-locked {
    position: relative;
}
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form.cg-advance-form-locked::before {
    content: 'Select a master barber on the left to start.';
    display: block;
    margin: -2px 0 6px;
    padding: 8px 12px;
    background: #eef6fa;
    border: 1px dashed #b9d2dd;
    border-radius: 8px;
    color: #1d6b8c;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.2px;
}
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form.cg-advance-form-locked .cg-form-field {
    opacity: 0.5;
    pointer-events: none;
}
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form input:disabled,
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form select:disabled,
.cg-pos-fit .cg-pos-grid-advance .cg-pos-form textarea:disabled {
    background: #f4f6f8;
    color: var(--muted);
    cursor: not-allowed;
}
.cg-pos-expense-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    height: 100%;
}
.cg-pos-expense-side .cg-pos-expense-box {
    flex: 0 0 auto;
    /* .cg-pos-cart sets overflow:hidden globally — keep that so the
     * rounded corners clip cleanly, but make sure the box still has
     * an explicit display flex column for the inner header + list
     * to layout vertically.
     * Also override the .cg-pos-fit .cg-pos-cart { height:100% } rule
     * — with that on, BOTH boxes try to be full-height and the second
     * one gets pushed off-screen. */
    display: flex;
    flex-direction: column;
    height: auto !important;
}
.cg-pos-expense-side .cg-pos-expense-box:last-child {
    flex: 1 1 auto;
    min-height: 220px;     /* always show some of the list even if it's empty */
}
.cg-pos-expense-side .cg-pos-expense-box:last-child .cg-cart-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* MTD expense list — 7-col table:
 *   Date | Amount | Detail | Expense Account | Payment | Receipt | Actions
 * Date / Receipt / Actions are fixed-width; the four middle columns
 * (Amount, Detail, Expense Account, Payment) share the remaining
 * width equally via table-layout: fixed + auto-width cells. */
.cg-pos-expense-side .cg-expense-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12.5px;
}
.cg-pos-expense-side .cg-expense-table thead th {
    text-align: left;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 700;
    padding: 10px 18px 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}
.cg-pos-expense-side .cg-expense-table thead th.num { text-align: left; }
.cg-pos-expense-side .cg-expense-table tbody td {
    padding: 9px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
}
.cg-pos-expense-side .cg-expense-table tbody tr:last-child td { border-bottom: 0; }
.cg-pos-expense-side .cg-expense-table tbody td.num {
    /* Amount column reads left-aligned in this view (per user spec).
     * Tabular-nums + bold + nowrap stay so the number block lines up
     * cleanly with the Date cell to its left. */
    text-align: left;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}
.cg-pos-expense-side .cg-expense-table tbody td.cg-money-out { color: #b91c1c; }
/* Column sizing: date / payment / receipt narrow, detail flexes, amount fits */
/* Date column — fixed width that fits "01 Jun 2026" without wrapping. */
.cg-pos-expense-side .cg-expense-table thead th:nth-child(1),
.cg-pos-expense-side .cg-expense-table tbody td:nth-child(1) {
    width: 96px;
    white-space: nowrap;
    color: var(--muted);
}
/* Detail (col 3) — the descriptive cell stays bold so the row scans
 * around it. The other three middle cols (Amount, Expense Account,
 * Payment) keep the default weight. */
.cg-pos-expense-side .cg-expense-table tbody td:nth-child(3) {
    font-weight: 600;
}
/* Receipt — fixed-width centered cell. Width bumped from 76 → 96
 * so the View pill doesn't crowd the column edges. */
.cg-pos-expense-side .cg-expense-table thead th.receipt,
.cg-pos-expense-side .cg-expense-table tbody td.receipt {
    width: 96px;
    text-align: center;
}

/* View Receipt button — small pill, opens the attachment in a new tab. */
.cg-pos-expense-side .cg-expense-receipt-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    white-space: nowrap;
}
.cg-pos-expense-side .cg-expense-receipt-btn:hover {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary-deep);
}
.cg-pos-expense-side .cg-expense-receipt-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.cg-pos-expense-side .cg-expense-receipt-empty {
    color: var(--muted);
    font-weight: 600;
}

/* Row-level Edit / Delete actions in the MTD expense table. */
.cg-pos-expense-side .cg-expense-table thead th.actions,
.cg-pos-expense-side .cg-expense-table tbody td.actions {
    /* Bumped from 78 → 104 so the edit + delete icon pair has
     * breathing room and doesn't press against the column edge. */
    width: 104px;
    text-align: right;
    white-space: nowrap;
}
.cg-pos-expense-side .cg-expense-action {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.cg-pos-expense-side .cg-expense-action svg { width: 13px; height: 13px; }
.cg-pos-expense-side .cg-expense-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #eef6fa;
}
.cg-pos-expense-side .cg-expense-action-del:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

/* Edit-expense modal (POS-page-local, not the toast). */
.cg-exp-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2400;
    background: rgba(15, 30, 50, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cg-exp-edit-fade 0.16s ease-out;
}
.cg-exp-edit-backdrop[hidden] { display: none; }
@keyframes cg-exp-edit-fade { from { opacity: 0; } to { opacity: 1; } }
.cg-exp-edit-modal {
    width: min(94vw, 420px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 30, 50, 0.32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cg-exp-edit-pop 0.22s cubic-bezier(0.32, 0.72, 0.16, 1);
}
@keyframes cg-exp-edit-pop {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.cg-exp-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.cg-exp-edit-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.cg-exp-edit-close {
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0 4px;
}
.cg-exp-edit-close:hover { color: var(--text); }
.cg-exp-edit-form {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cg-exp-edit-form .cg-form-field { display: flex; flex-direction: column; gap: 4px; }
.cg-exp-edit-form .cg-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 700;
}
.cg-exp-edit-form .cg-input,
.cg-exp-edit-form select.cg-input,
.cg-exp-edit-form textarea.cg-input {
    background: #fff;
    border: 1px solid #d5dde3;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--text);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.cg-exp-edit-form .cg-input:focus,
.cg-exp-edit-form select.cg-input:focus,
.cg-exp-edit-form textarea.cg-input:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29,107,140,0.14);
}
.cg-exp-edit-form input[type="date"].cg-input {
    padding-right: 4px;
    -webkit-appearance: none;
}
.cg-exp-edit-form textarea.cg-input { min-height: 56px; resize: vertical; }
.cg-exp-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}
.cg-exp-edit-actions .cg-btn {
    min-height: 38px;
    padding: 8px 18px;
    font-size: 12.5px;
    border-radius: var(--radius-md);
    text-transform: none;
    letter-spacing: 0.3px;
}

/* ---------- Fullscreen receipt popup (after a sale) ----------
 * Opened by pos-sale.js after a successful save. The receipt page
 * (pos/receipt.php) loads inside an iframe filling the modal body,
 * and the Print button triggers iframe.contentWindow.print() so the
 * print stylesheet applies cleanly. Close dismisses + resets the
 * cart for the next sale. */
.cg-receipt-fs-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 50, 0.55);
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: cg-receipt-fs-fade 0.18s ease-out;
}
@keyframes cg-receipt-fs-fade { from { opacity: 0; } to { opacity: 1; } }
.cg-receipt-fs {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(15, 30, 50, 0.34);
    /* Slimmer / shorter — receipts don't need 760×1000 of canvas. */
    width: min(90vw, 520px);
    height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cg-receipt-fs-pop 0.24s cubic-bezier(0.32, 0.72, 0.16, 1);
}
@keyframes cg-receipt-fs-pop {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.cg-receipt-fs-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e6ebf0;
    background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 100%);
}
.cg-receipt-fs-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #2f9e6e;
}
.cg-receipt-fs-title svg {
    width: 18px;
    height: 18px;
    background: #ecfdf5;
    border-radius: 50%;
    padding: 3px;
    box-sizing: content-box;
}
.cg-receipt-fs-actions {
    display: inline-flex;
    gap: 8px;
}
.cg-receipt-fs-actions .cg-btn {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: none;
}
.cg-receipt-fs-actions .cg-btn svg { width: 15px; height: 15px; }
.cg-receipt-fs-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #fff;
}

/* ---------- Receipt page: brand block ----------
 * Mirrors the pos-header.php brand widget: gradient teal scissors
 * tile + "Classic Gents Salon" + "Point of Sale" tag. */
.cg-receipt-brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cg-receipt-brand-block .cg-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1d6b8c 0%, #134a61 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(19, 74, 97, 0.20);
    flex-shrink: 0;
}
.cg-receipt-brand-block .cg-brand-icon svg { width: 20px; height: 20px; display: block; }
.cg-receipt-brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.cg-receipt-brand-name {
    font-size: 17px;
    font-weight: 700;
    color: #16202b;
    letter-spacing: -0.2px;
}
.cg-receipt-brand-tag {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #1d6b8c;
    font-weight: 600;
    margin-top: 3px;
}

/* ---------- Receipt viewer modal ----------
 * Triggered by the View pill in the expense MTD table. Image receipts
 * render as <img>, PDFs as <iframe>. Click backdrop / X / Esc to close. */
.cg-receipt-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 50, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 24px;
    animation: cg-receipt-modal-in 0.18s ease-out;
}
.cg-receipt-modal-backdrop.cg-receipt-modal-out { animation: cg-receipt-modal-out 0.18s ease-in forwards; }
@keyframes cg-receipt-modal-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-receipt-modal-out { from { opacity: 1; } to { opacity: 0; } }
.cg-receipt-modal {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(15, 30, 50, 0.32);
    width: min(90vw, 880px);
    height: min(90vh, 980px);
    display: flex;
    overflow: hidden;
    animation: cg-receipt-modal-pop 0.22s cubic-bezier(0.32, 0.72, 0.16, 1);
}
@keyframes cg-receipt-modal-pop {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.cg-receipt-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    background: rgba(255, 255, 255, 0.94);
    color: #16202b;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    transition: background 0.14s ease, transform 0.14s ease;
}
.cg-receipt-modal-close:hover { background: #fff; transform: scale(1.06); }
.cg-receipt-modal-close svg { width: 18px; height: 18px; }
.cg-receipt-modal-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6f8;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.cg-receipt-modal-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.cg-receipt-modal-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
/* Compact form just for the Expense pane — tighter than the default
 * .cg-pos-form spacing on Sale / Advance. */
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form-col {
    overflow: hidden;
    min-width: 0;
}
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form {
    padding: 12px 14px;
    gap: 8px;
    border-radius: 12px;
    min-width: 0;
}
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form .cg-form-field {
    gap: 3px;
    min-width: 0;
}
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form .cg-label {
    font-size: 9.5px;
    letter-spacing: 1px;
}
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form .cg-input,
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form select.cg-input,
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form textarea.cg-input {
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 8px;
    /* iPadOS Safari's native date control has an intrinsic min-width
     * around 130px and can overflow narrow columns, causing the page
     * to scroll horizontally. Forcing min-width:0 + max-width:100% +
     * box-sizing:border-box keeps it within the column. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* iPadOS Safari's input[type=date] inner display + dropdown chevron
 * uses ~28px on the right. With our 10px padding, the date text gets
 * cropped. Reduce right padding and lock the input to a left-aligned
 * date display so "29 May 2026" + chevron fit in the field. */
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form input[type="date"].cg-input {
    padding-right: 4px;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form input[type="date"].cg-input::-webkit-date-and-time-value {
    text-align: left;
}
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form textarea.cg-input { min-height: 44px; }
.cg-pos-fit .cg-pos-grid-expense .cg-pos-form input[type="file"].cg-input {
    padding: 5px 8px;
    font-size: 11.5px;
}
.cg-pos-fit .cg-pos-grid-expense #cg-exp-submit {
    margin-top: 4px;
    padding: 10px 14px;
    min-height: 40px;
    font-size: 12.5px;
    letter-spacing: 1px;
}

.cg-expense-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 18px 18px;
}

/* ---------- Flash toast popup ----------
 * Shown after a redirect-after-save to confirm a successful write or
 * surface an error. Injected by the inline IIFE in pos-header.php
 * reading window.CG_FLASH. Success auto-dismisses; errors require a
 * click on the X or backdrop. */
.cg-toast-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 50, 0.32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    animation: cg-toast-fade-in 0.18s ease-out;
}
.cg-toast-backdrop.cg-toast-out { animation: cg-toast-fade-out 0.2s ease-in forwards; }
@keyframes cg-toast-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-toast-fade-out { from { opacity: 1; } to { opacity: 0; } }
.cg-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 16px 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 22px 50px rgba(15, 30, 50, 0.22);
    min-width: 280px;
    max-width: 420px;
    border-left: 4px solid #2f9e6e;
    animation: cg-toast-pop 0.26s cubic-bezier(0.32, 0.72, 0.16, 1);
}
.cg-toast-err { border-left-color: #b91c1c; }
@keyframes cg-toast-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.cg-toast-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #2f9e6e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cg-toast-err .cg-toast-icon { background: #fef2f2; color: #b91c1c; }
.cg-toast-icon svg { width: 20px; height: 20px; }
.cg-toast-body { flex: 1 1 auto; min-width: 0; }
.cg-toast-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cg-text, #16202b);
    margin-bottom: 2px;
}
.cg-toast-message {
    font-size: 12.5px;
    color: var(--cg-muted, #7d8a98);
    line-height: 1.4;
    word-wrap: break-word;
}
.cg-toast-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--cg-muted, #7d8a98);
    padding: 0 4px;
}
.cg-toast-close:hover { color: var(--cg-text, #16202b); }
.cg-expense-summary-kpi {
    background: var(--bg);
    border-radius: 10px;
    padding: 12px 14px;
}
.cg-expense-summary-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.cg-expense-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Vertical barber list (left) */
.cg-pos-barbers {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.cg-pos-section-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cg-muted);
    padding: 2px 4px 4px;
}
.cg-barber-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 2px 2px 8px;
}

/* Services column (middle) */
.cg-pos-services {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.cg-svc-search-wrap {
    position: relative;
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: 999px;
    padding: 4px 4px 4px 44px;
    box-shadow: 0 2px 6px rgba(41, 134, 183,0.04);
}
.cg-svc-search-icon {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--cg-muted);
}
.cg-svc-search {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 13px 14px;
    min-height: 44px;
    font-family: inherit;
    font-size: 16px;
    color: var(--cg-text);
    outline: none;
}
.cg-pos-cat-row {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    /* Vertical padding + align-items: center keep the chips fully
     * visible — without enough top/bottom slack the chip's rounded
     * edges + box-shadow get clipped by overflow-y: hidden. */
    align-items: center;
    padding: 8px 0;
}
.cg-pos-cat-row::-webkit-scrollbar { display: none; }
.cg-pos-cat-row > .cg-pos-cat-pill {
    flex: 0 0 auto;
    align-self: center;
}

/* Cart column (right) */
.cg-pos-cart {
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(41, 134, 183,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.cg-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cg-border);
}
.cg-cart-head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--cg-navy);
}
#cg-cart-meta { font-size: 11px; color: var(--cg-muted); letter-spacing: 1px; }

.cg-cart-master {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 16px 0;
    padding: 10px 14px;
    background: var(--cg-bg);
    border-radius: 12px;
}
.cg-cart-master[hidden] { display: none; }
.cg-cart-master-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: 0 !important;
    flex: 0 0 44px;
    overflow: hidden;
}
.cg-cart-master-avatar .cg-barber-img {
    filter: none !important;        /* always in colour in the cart */
    border-radius: 10px !important;
    width: 100%; height: 100%; object-fit: cover;
}
.cg-cart-master-avatar .cg-barber-initials { opacity: 1 !important; font-size: 16px; }
.cg-cart-master-meta { min-width: 0; line-height: 1.2; }
.cg-cart-master-label {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 10px;
    color: var(--cg-muted);
    font-weight: 600;
}
.cg-cart-master-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--cg-text);
    margin-top: 2px;
}

/* Empty-cart placeholder (cash register icon centered) */
.cg-cart-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cg-muted);
    text-align: center;
    padding: 24px;
}
.cg-cart-empty svg { width: 96px; height: 96px; opacity: 0.22; margin-bottom: 14px; }
.cg-cart-empty p   { margin: 0; font-size: 13.5px; }

/* ----- cg-pos-fit: lock the whole page to viewport ----- */
.cg-pos-fit { height: 100vh; height: 100dvh; overflow: hidden; }
.cg-pos-fit .cg-pos-shell {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 14px max(18px, env(safe-area-inset-right))
             max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.cg-pos-fit .cg-pos-grid-3,
.cg-pos-fit .cg-pos-grid-2,
.cg-pos-fit .cg-pos-grid-expense,
.cg-pos-fit .cg-pos-grid-advance,
.cg-pos-fit .cg-pos-grid-payout { height: 100%; min-height: 0; }
.cg-pos-fit .cg-pos-barbers,
.cg-pos-fit .cg-pos-services,
.cg-pos-fit .cg-pos-cart { height: 100%; min-height: 0; }
.cg-pos-fit .cg-barber-list {
    flex: 1 1 auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.cg-pos-fit .cg-svc-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.cg-pos-fit .cg-cart-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 14px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* Honor the home-indicator inset on the POS header too */
.cg-pos-fit .cg-pos-header {
    padding-left:  max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    /* Slightly more top padding than bottom — the brand's cap-height
     * eats into the visible top whitespace, so equal numeric padding
     * looks asymmetric. 14px / 10px reads as balanced. */
    padding-top: 14px;
    padding-bottom: 10px;
    align-items: center;
}

/* Compact topbar controls on the POS chrome: Lock pill, icon buttons,
 * avatar trigger — all slimmer than the admin sizes. */
.cg-pos-fit .cg-pos-header .cg-tbtn {
    min-height: 28px;
    padding: 4px 12px;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    border-radius: var(--radius-sm);
    gap: 6px;
}
.cg-pos-fit .cg-pos-header .cg-tbtn svg { width: 13px; height: 13px; }
.cg-pos-fit .cg-pos-header .cg-icon-btn { width: 28px; height: 28px; }
.cg-pos-fit .cg-pos-header .cg-icon-btn svg { width: 15px; height: 15px; }
.cg-pos-fit .cg-pos-header .cg-user-avatar-btn { width: 28px; height: 28px; border-width: 1px; }
.cg-pos-fit .cg-pos-header .cg-user-avatar-btn .cg-user-avatar svg { width: 16px; height: 16px; }
.cg-pos-fit .cg-pos-header .cg-topbar-divider { height: 16px; }
.cg-pos-fit .cg-pos-header .cg-topbar-actions { gap: 6px; }

/* Close Day pill in the topbar — sits between the divider and the
 * avatar group. Red while the day is still open; greys out + relabels
 * once the closing record exists. */
.cg-topbar-close-day {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dc2626;
    color: #fff;
    border: 1px solid #dc2626;
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    min-height: 28px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.22);
    transition: background 0.14s ease, border-color 0.14s ease,
                color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.cg-topbar-close-day:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.32);
    transform: translateY(-1px);
}
.cg-topbar-close-day svg { width: 13px; height: 13px; flex-shrink: 0; }
.cg-topbar-close-day.is-closed {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #6b7280;
    box-shadow: none;
    cursor: default;
}
.cg-topbar-close-day.is-closed:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #6b7280;
    box-shadow: none;
    transform: none;
}
.cg-topbar-close-day.is-closed svg { color: #9ca3af; }

/* ---------- Close Day workspace (pos/close-day.php) ----------
 * Scrolling page (NOT cg-pos-fit) — spans the full POS shell width
 * and grows with its content so the form's notes + submit button are
 * always reachable on iPad portrait too.
 *
 * Mirrors the .cg-pos-fit palette tokens so child rules that
 * reference --primary / --border / --muted etc. resolve to the same
 * colors without dragging in the viewport-locked layout. */
.cg-close-day-body {
    background: #f7f9fb;
    min-height: 100dvh;
    --bg:           #f7f9fb;
    --card:         #ffffff;
    --primary:      #1d6b8c;
    --primary-deep: #134a61;
    --text:         #16202b;
    --muted:        #7d8a98;
    --border:       #e6ebf0;
    --green:        #2f9e6e;
    --shadow-card:  0 1px 2px rgba(22,32,43,0.04), 0 6px 18px rgba(22,32,43,0.06);
}
.cg-close-day-body .cg-pos-shell {
    padding: 14px max(18px, env(safe-area-inset-right))
             max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
/* Compact topbar — match the Sale-screen Lock pill (28px) so the
 * Lock + Close Day pills have identical heights. */
.cg-close-day-body .cg-pos-header .cg-tbtn,
.cg-close-day-body .cg-pos-header .cg-icon-btn,
.cg-close-day-body .cg-pos-header .cg-user-avatar-btn { min-height: 28px; }
.cg-close-day-body .cg-pos-header .cg-tbtn {
    padding: 4px 12px;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    border-radius: var(--radius-sm);
    gap: 6px;
}
.cg-close-day-body .cg-pos-header .cg-tbtn svg { width: 13px; height: 13px; }
.cg-close-day-body .cg-pos-header .cg-icon-btn { width: 28px; height: 28px; }
.cg-close-day-body .cg-pos-header .cg-icon-btn svg { width: 15px; height: 15px; }
.cg-close-day-body .cg-pos-header .cg-user-avatar-btn { width: 28px; height: 28px; border-width: 1px; }
.cg-close-day-body .cg-pos-header .cg-user-avatar-btn .cg-user-avatar svg { width: 16px; height: 16px; }
.cg-close-day-body .cg-pos-header .cg-topbar-divider { height: 16px; }
.cg-close-day-body .cg-pos-header .cg-topbar-actions { gap: 6px; }
.cg-close-page {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cg-close-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.cg-close-page-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.cg-close-page-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
}
.cg-close-page-sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    max-width: 540px;
}
.cg-close-page-back {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.14s ease, color 0.14s ease;
}
.cg-close-page-back:hover { border-color: var(--primary); color: var(--primary); }
.cg-close-page-back svg { width: 14px; height: 14px; }

.cg-close-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 760px) {
    .cg-close-grid { grid-template-columns: 1fr; }
}
.cg-close-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    /* Flex column so the table can grow and pin its footer (Total /
     * Expected) to the bottom — keeps the two side-by-side cards
     * visually equal-height even when they have different row counts. */
    display: flex;
    flex-direction: column;
}
.cg-close-card-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.cg-close-card-head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.1px;
}
.cg-close-card-sub { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.cg-close-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    /* Grow to fill the card so the tfoot sits at the bottom edge,
     * aligning the two cards' footer rows. */
    flex: 1 1 auto;
}
.cg-close-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f3f6;
    color: var(--text);
}
.cg-close-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.cg-close-table td.cg-money-out { color: #b91c1c; }
.cg-close-table td.cg-money-pos { color: #2f9e6e; }
.cg-close-table tbody tr:last-child td { border-bottom: 0; }
.cg-close-table tfoot td {
    padding: 12px 16px;
    background: #fafbfd;
    border-top: 1px solid var(--border);
    font-weight: 700;
}
.cg-close-expected { font-size: 14px; color: var(--primary); }

/* Close-day form */
.cg-close-form { padding: 16px; }
.cg-close-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 760px) {
    .cg-close-form-row { grid-template-columns: 1fr; }
}
.cg-close-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cg-close-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 700;
}
.cg-close-input {
    background: #fff;
    /* Direct color (not the var) so the border still draws even if
     * --border isn't resolved in this context. */
    border: 1px solid #d5dde3;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 13.5px;
    color: #16202b;
    font-family: inherit;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
    width: 100%;
    box-sizing: border-box;
}
.cg-close-input:hover { border-color: #b9c2cc; }
.cg-close-input:focus {
    outline: 0;
    border-color: #1d6b8c;
    box-shadow: 0 0 0 3px rgba(29,107,140,0.14);
}
.cg-close-input[readonly] {
    background: #f4f6f8;
    color: #16202b;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-color: #e6ebf0;
}
.cg-close-input-amount {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cg-close-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}
/* Cancel + Close Day buttons render at the same height + brand
 * radius per CLAUDE.md token table (--radius-md). */
.cg-close-form-actions .cg-btn,
.cg-close-form-actions .cg-cart-submit-btn {
    min-height: 44px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: var(--radius-md);
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cg-close-form-actions .cg-cart-submit-btn {
    /* Brand teal (matches Submit Sale on .cg-pos-body) — drop the
     * red gradient that the .cg-pos-fit override paints on. */
    background: #1d6b8c !important;
    color: #fff !important;
    border: 0;
    box-shadow: 0 4px 12px rgba(29,107,140,0.22);
    transform: none !important;
}
.cg-close-form-actions .cg-cart-submit-btn:hover:not(:disabled) {
    background: #134a61 !important;
    box-shadow: 0 6px 18px rgba(29,107,140,0.32);
}
.cg-close-form-actions .cg-cart-submit-btn .cg-cart-submit-check { width: 16px; height: 16px; flex-shrink: 0; }

/* Closed snapshot card */
.cg-close-snapshot .cg-close-variance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}
.cg-close-variance-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.cg-close-variance-amt {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cg-close-variance-amt.ok  { color: #065F46; }
.cg-close-variance-amt.neg { color: #b91c1c; }
.cg-close-variance-meta {
    text-align: right;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
}
.cg-close-notes {
    padding: 12px 16px 18px;
    border-top: 1px dashed var(--border);
    font-size: 12.5px;
    color: var(--text);
}
.cg-close-notes-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
}

@media (max-width: 1100px) {
    .cg-pos-grid-3       { grid-template-columns: 200px 1fr clamp(320px, 32vw, 420px); }
    .cg-pos-grid-2       { grid-template-columns: 1fr clamp(320px, 32vw, 420px); }
    .cg-pos-grid-expense { grid-template-columns: 30% 1fr; }
    .cg-pos-grid-advance { grid-template-columns: 200px 30% 1fr; }
    .cg-pos-grid-payout  { grid-template-columns: 200px 1fr; }
}

/* ============================================================
 *  iPad 11" (A16) — dense kiosk layout for new-sale.
 *  Two distinct layouts: landscape and portrait. Both target
 *  .cg-pos-fit so receipt / admin pages stay untouched.
 * ============================================================ */

/* ---------- LANDSCAPE (iPad 11" ≈ 1194 × 834) ---------- */
@media (min-width: 1024px) and (orientation: landscape) {
    /* Header: compact single row, tabs slim */
    .cg-pos-fit .cg-pos-header { padding: 10px 22px; gap: 10px; }
    .cg-pos-fit .cg-brand { font-size: 18px; }
    .cg-pos-fit .cg-pos-tabs { gap: 10px; }
    .cg-pos-fit .cg-pos-tab {
        min-width: 0;
        min-height: 40px;
        padding: 8px 18px;
        font-size: 13px;
        letter-spacing: 1.2px;
        gap: 10px;
    }
    .cg-pos-fit .cg-pos-tab .cg-pos-tab-icon svg { width: 20px; height: 20px; }

    /* Shell: tight vertical padding to reclaim height */
    .cg-pos-fit .cg-pos-shell { padding-top: 10px; padding-bottom: 10px; }

    /* Slim side panels, give the middle column more width */
    .cg-pos-fit .cg-pos-grid-3 {
        grid-template-columns: 104px minmax(0, 1fr) 320px;
        gap: 12px;
    }
    .cg-pos-fit .cg-pos-grid-2 {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 12px;
    }
    .cg-pos-fit .cg-pos-grid-expense {
        grid-template-columns: 30% 1fr;
        gap: 12px;
    }
    .cg-pos-fit .cg-pos-grid-advance {
        grid-template-columns: 104px 30% 1fr;
        gap: 12px;
    }
    .cg-pos-fit .cg-pos-grid-payout {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 12px;
    }

    /* Master Barber column: photo-only thumbnails, no chip box */
    .cg-pos-fit .cg-pos-barbers { padding: 10px 6px; }
    .cg-pos-fit .cg-pos-section-label { display: none; }
    .cg-pos-fit .cg-barber-chip,
    .cg-pos-fit .cg-barber-chip.active,
    .cg-pos-fit .cg-barber-chip:hover {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 4px;
        gap: 0;
        background: transparent !important;
        border: 0 !important;
        border-radius: 14px;
        width: 100%;
        transform: none !important;
        box-shadow: none !important;
    }
    .cg-pos-fit .cg-barber-tile {
        width: 76px; height: 76px; flex-basis: 76px;
        border-radius: 14px;
    }
    .cg-pos-fit .cg-barber-img { border-radius: 12px; }
    .cg-pos-fit .cg-barber-label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-align: center;
        color: var(--text);
        line-height: 1.2;
        margin-top: 5px;
        max-width: 88px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cg-pos-fit .cg-barber-chip:not(.active) .cg-barber-label { color: var(--muted); }
    /* Active label override: pos-fit forces the active chip's
     * background to transparent (the selected state is shown by
     * the tile's blue ring instead). Without this rule, the
     * label inherits color:#fff from .cg-barber-chip.active and
     * disappears against the white page. */
    .cg-pos-fit .cg-barber-chip.active .cg-barber-label { color: var(--text); }

    /* Search + category chips: lower visual weight */
    .cg-pos-fit .cg-pos-services { gap: 8px; }
    .cg-pos-fit .cg-svc-search-wrap { padding: 2px 2px 2px 36px; }
    .cg-pos-fit .cg-svc-search { min-height: 36px; padding: 7px 10px; font-size: 13px; }
    .cg-pos-fit .cg-svc-search-icon { width: 14px; height: 14px; left: 12px; }
    .cg-pos-fit .cg-pos-cat-row { gap: 6px; }
    .cg-pos-fit .cg-pos-cat-pill {
        padding: 5px 11px;
        min-height: 28px;
        font-size: 9.5px;
        letter-spacing: 0.8px;
    }

    /* Service grid: 5 cols (was 6) — wider tiles to fit longer service
     * names without truncation. Height stays the same as before by
     * dropping aspect-ratio: 1/1 and using a fixed row height. */
    .cg-pos-fit .cg-svc-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 10px;
        margin-top: 8px;
    }
    .cg-pos-fit .cg-svc-tile {
        height: auto;
        aspect-ratio: auto;
        /* Equal top/bottom padding so the price sits the same
         * distance from the bottom as the icon is from the top. */
        padding: 8px;
        gap: 1px;
        border-radius: 10px;
        box-shadow: none;
        /* Override the global justify-content: flex-start so the
         * content fills the tile evenly rather than stacking at
         * the top with a big empty band underneath the price. */
        justify-content: space-between;
    }
    .cg-pos-fit .cg-svc-tile-icon { width: 38px; height: 38px; margin-bottom: 6px; }
    .cg-pos-fit .cg-svc-tile-name {
        font-size: 9.5px;
        white-space: normal;
        -webkit-line-clamp: 2;
    }
    .cg-pos-fit .cg-svc-tile-price {
        font-size: 9.5px;
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }

    /* Cart column: tighter padding, smaller type for more breathing room */
    .cg-pos-fit .cg-cart-head { padding: 8px 12px; }
    .cg-pos-fit .cg-cart-head h2 { font-size: 11px; letter-spacing: 1.6px; }
    .cg-pos-fit #cg-cart-meta { font-size: 10px; }
    .cg-pos-fit .cg-cart-master { margin: 8px 10px 0; padding: 6px 10px; gap: 8px; }
    .cg-pos-fit .cg-cart-master-avatar {
        width: 32px !important; height: 32px !important; flex-basis: 32px;
    }
    .cg-pos-fit .cg-cart-master-label { font-size: 9px; }
    .cg-pos-fit .cg-cart-master-name { font-size: 12px; }
    .cg-pos-fit .cg-cart-items { padding: 6px 12px; }
    .cg-pos-fit .cg-cart-empty svg { width: 56px; height: 56px; }
    .cg-pos-fit .cg-cart-empty p { font-size: 12px; }
    .cg-pos-fit .cg-cart-totals { padding: 10px 14px; }
    .cg-pos-fit .cg-cart-row { font-size: 11px; padding: 2px 0; }
    .cg-pos-fit .cg-cart-row-total { font-size: 15px; padding-top: 6px; margin-top: 3px; }
    .cg-pos-fit .cg-cart-row-total span:last-child { font-size: 19px; }
    .cg-pos-fit .cg-cart-pay { padding: 8px 12px 0; gap: 6px; }
    .cg-pos-fit .cg-pay-btn {
        min-height: 40px; padding: 8px 6px;
        font-size: 11px; letter-spacing: 1px;
    }
    .cg-pos-fit .cg-pay-btn svg { width: 16px; height: 16px; }
    .cg-pos-fit .cg-cart-actions {
        /* Bottom padding equals the side padding so the Complete
         * Sale button doesn't sit on a wider bottom margin than
         * left/right margins. Safe-area inset is handled at the
         * body level via .cg-pos-fit height calc in PWA mode. */
        padding: 8px 12px 12px;
        gap: 6px;
    }
    .cg-pos-fit .cg-cart-submit-btn {
        min-height: 44px; padding: 10px 12px;
        font-size: 12px; letter-spacing: 1.3px;
    }
    .cg-pos-fit .cg-cart-clear-btn { padding: 8px 8px; font-size: 11px; }
}

/* ---------- PORTRAIT (iPad 11" ≈ 834 × 1194) ----------
 * Rethink: Master Barber becomes a horizontal scrollable row at the
 * top (full width). Below it, services + slim cart live side-by-side.
 * Tiles stay 4-wide and names wrap to 2 lines (no truncation).
 */
@media (min-width: 760px) and (max-width: 1024px) and (orientation: portrait) {
    /* Header: keep two-row layout (brand row + tabs row) but shrink tabs */
    .cg-pos-fit .cg-pos-header { padding: 10px 18px; row-gap: 6px; }
    .cg-pos-fit .cg-brand { font-size: 17px; }
    .cg-pos-fit .cg-pos-tabs { gap: 8px; }
    .cg-pos-fit .cg-pos-tab {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 12px;
        letter-spacing: 1.1px;
        gap: 8px;
    }
    .cg-pos-fit .cg-pos-tab .cg-pos-tab-icon svg { width: 18px; height: 18px; }

    /* Shell: tight side padding */
    .cg-pos-fit .cg-pos-shell {
        padding: 10px max(12px, env(safe-area-inset-right))
                 max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    /* Two-row, two-column grid: barbers on top, services + cart below */
    .cg-pos-fit .cg-pos-grid-3 {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "barbers barbers"
            "services cart";
        gap: 10px;
    }
    /* Expense pane stays 2-column at portrait too (no barber list) */
    .cg-pos-fit .cg-pos-grid-2 {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 10px;
    }
    .cg-pos-fit .cg-pos-grid-expense {
        grid-template-columns: 30% 1fr;
        gap: 10px;
    }
    /* Payout in portrait: barber rail on top, breakdown below. */
    .cg-pos-fit .cg-pos-grid-payout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
    }
    .cg-pos-fit .cg-pos-grid-payout > .cg-pos-barbers { height: auto !important; }
    /* Advance in portrait: stack barber rail above form+accordion. */
    .cg-pos-fit .cg-pos-grid-advance {
        grid-template-columns: 30% 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "barbers barbers"
            "form    side";
        gap: 10px;
    }
    .cg-pos-fit .cg-pos-grid-advance > .cg-pos-barbers   { grid-area: barbers; height: auto !important; }
    .cg-pos-fit .cg-pos-grid-advance > .cg-pos-form-col  { grid-area: form; }
    .cg-pos-fit .cg-pos-grid-advance > .cg-pos-advance-side { grid-area: side; }
    /* Sale grid named areas — scoped so they don't bleed into Expense /
     * Advance / Payout grids (which don't define matching area names
     * and would otherwise auto-place items in unpredictable slots on
     * Safari iPadOS). */
    .cg-pos-fit .cg-pos-grid-3 > .cg-pos-barbers  { grid-area: barbers; height: auto !important; }
    .cg-pos-fit .cg-pos-grid-3 > .cg-pos-services { grid-area: services; }
    .cg-pos-fit .cg-pos-grid-3 > .cg-pos-cart     { grid-area: cart; }
    /* Barber rail height auto in all panes' portrait layout */
    .cg-pos-fit .cg-pos-barbers { height: auto !important; }

    /* Master Barber row: horizontal scrollable pill list */
    .cg-pos-fit .cg-pos-barbers {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 14px;
    }
    .cg-pos-fit .cg-pos-section-label {
        flex: 0 0 auto;
        padding: 0;
        font-size: 10px;
        letter-spacing: 1.6px;
        white-space: nowrap;
    }
    .cg-pos-fit .cg-pos-barbers .cg-barber-list {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding: 2px;
        min-height: 0;
    }
    .cg-pos-fit .cg-barber-chip {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        width: auto;
        padding: 4px 14px 4px 4px;
        gap: 8px;
        border-radius: 999px;
        min-height: 44px;
    }
    .cg-pos-fit .cg-barber-tile {
        width: 36px; height: 36px; flex-basis: 36px;
        border-radius: 999px;
    }
    .cg-pos-fit .cg-barber-img,
    .cg-pos-fit .cg-barber-tile { border-radius: 999px !important; }
    .cg-pos-fit .cg-barber-label {
        font-size: 13px;
        max-width: none;
        white-space: nowrap;
        text-align: left;
    }
    .cg-pos-fit .cg-barber-chip:hover { transform: none; }

    /* Compact tools in services column */
    .cg-pos-fit .cg-pos-services { gap: 8px; }
    .cg-pos-fit .cg-svc-search-wrap { padding: 2px 2px 2px 36px; }
    .cg-pos-fit .cg-svc-search { min-height: 36px; padding: 7px 10px; font-size: 13px; }
    .cg-pos-fit .cg-svc-search-icon { width: 14px; height: 14px; left: 12px; }
    .cg-pos-fit .cg-pos-cat-row { gap: 6px; }
    .cg-pos-fit .cg-pos-cat-pill {
        padding: 5px 11px;
        min-height: 28px;
        font-size: 9.5px;
        letter-spacing: 0.8px;
    }

    /* Service grid: 4 cols, content-sized tiles (square removed so
     * the tile shrinks to fit its content with even top/bottom
     * padding, no dead space below the price). */
    .cg-pos-fit .cg-svc-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 10px;
        margin-top: 8px;
    }
    .cg-pos-fit .cg-svc-tile {
        height: auto;
        aspect-ratio: auto;
        padding: 8px;
        gap: 1px;
        border-radius: 10px;
        box-shadow: none;
        justify-content: space-between;
    }
    .cg-pos-fit .cg-svc-tile-icon { width: 34px; height: 34px; margin-bottom: 6px; }
    .cg-pos-fit .cg-svc-tile-name {
        font-size: 9.5px;
        white-space: normal;
        -webkit-line-clamp: 2;
    }
    .cg-pos-fit .cg-svc-tile-price {
        font-size: 9.5px;
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }

    /* Cart: trim padding/type to fit a 300px column with breathing room */
    .cg-pos-fit .cg-cart-head { padding: 8px 12px; }
    .cg-pos-fit .cg-cart-head h2 { font-size: 11px; letter-spacing: 1.6px; }
    .cg-pos-fit #cg-cart-meta { font-size: 10px; }
    .cg-pos-fit .cg-cart-master { margin: 8px 10px 0; padding: 6px 10px; gap: 8px; }
    .cg-pos-fit .cg-cart-master-avatar {
        width: 32px !important; height: 32px !important; flex-basis: 32px;
    }
    .cg-pos-fit .cg-cart-master-label { font-size: 9px; }
    .cg-pos-fit .cg-cart-master-name { font-size: 12px; }
    .cg-pos-fit .cg-cart-items { padding: 6px 10px; }
    .cg-pos-fit .cg-cart-empty svg { width: 48px; height: 48px; }
    .cg-pos-fit .cg-cart-empty p { font-size: 11.5px; }
    .cg-pos-fit .cg-cart-totals { padding: 10px 12px; }
    .cg-pos-fit .cg-cart-row { font-size: 11px; padding: 2px 0; }
    .cg-pos-fit .cg-cart-row-total { font-size: 14px; padding-top: 6px; margin-top: 3px; }
    .cg-pos-fit .cg-cart-row-total span:last-child { font-size: 18px; }
    .cg-pos-fit .cg-cart-pay { padding: 8px 10px 0; gap: 6px; }
    .cg-pos-fit .cg-pay-btn {
        min-height: 40px; padding: 8px 4px;
        font-size: 10.5px; letter-spacing: 0.9px;
    }
    .cg-pos-fit .cg-pay-btn svg { width: 16px; height: 16px; }
    .cg-pos-fit .cg-cart-actions {
        /* Bottom padding equals the side padding so the Complete
         * Sale button has even margin all around. */
        padding: 8px 10px 10px;
        gap: 6px;
    }
    .cg-pos-fit .cg-cart-submit-btn {
        min-height: 44px; padding: 10px 8px;
        font-size: 11.5px; letter-spacing: 1.1px;
    }
    .cg-pos-fit .cg-cart-clear-btn { padding: 8px 6px; font-size: 10.5px; }
}

/* ---------- Tile name/price spacing + compact cart lines (both orientations) ---------- */
/* Spacing pattern (from the user's reference):
 *   icon ─── generous gap ─── name ── tight gap ── price ─── space below
 * Icon and font sizes are left to the responsive blocks above. The
 * "generous gap" comes from the icon's margin-bottom; the "tight gap"
 * is the tile's natural flex gap (2px). */
.cg-pos-fit .cg-svc-tile {
    /* space-between (was flex-start) keeps the price flush with the
     * bottom padding instead of leaving a dead strip below it. */
    justify-content: space-between;
    overflow: visible;
    gap: 2px;
}
.cg-pos-fit .cg-svc-tile-icon { margin-bottom: 14px; }
.cg-pos-fit .cg-svc-tile-name {
    line-height: 1.25;
    padding-bottom: 0;
}

/* Order Summary "Assigned Master": hide the avatar, show the name only */
.cg-pos-fit .cg-cart-master-avatar { display: none !important; }
.cg-pos-fit .cg-cart-master        { padding: 8px 12px; }

/* Cart head: "Order Summary" + "Barber: …" subtitle + "N items" pill */
.cg-pos-fit .cg-cart-head {
    align-items: flex-start;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}
.cg-pos-fit .cg-cart-head-text   { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cg-pos-fit .cg-cart-head h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
    text-transform: none;
    margin: 0;
}
.cg-pos-fit .cg-cart-head-barber {
    font-size: 11.5px;
    color: var(--muted);
    display: inline-flex;
    gap: 5px;
    align-items: baseline;
    min-width: 0;
}
.cg-pos-fit .cg-cart-head-barber[hidden] { display: none; }
.cg-pos-fit .cg-cart-head-barber strong { color: var(--text); font-weight: 700; }
.cg-pos-fit .cg-cart-pill {
    align-self: center;
    background: #dbeafe;
    color: #1e4a72;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
/* Sibling pill: Clear order. Same pill geometry, danger tone — mirrors
 * the trash button colours in each cart line so the action reads as
 * destructive. Hidden via the standard [hidden] attribute when the
 * cart is empty (toggled in renderCart). */
.cg-pos-fit .cg-cart-pill-clear {
    background: #fee2e2;
    color: #b91c1c;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}
.cg-pos-fit .cg-cart-pill-clear:hover {
    background: #fecaca;
    color: #991b1b;
}
.cg-pos-fit .cg-cart-pill-clear[hidden] { display: none; }
/* Submit Sale is now the only child of cart-actions, so let it span full width. */
.cg-pos-fit .cg-cart-actions { grid-template-columns: 1fr; }

/* Cart line: name + total on top, qty / × / unit / trash row below.
 * Compact sizing so >=4 lines stay visible without scrolling. */
.cg-pos-fit .cg-cart-line          { padding: 6px 14px 7px; border-bottom: 1px solid var(--border); }
.cg-pos-fit .cg-cart-line:last-child { border-bottom: 0; }
.cg-pos-fit .cg-cart-line-head     { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cg-pos-fit .cg-cart-line-name,
.cg-pos-fit .cg-cart-line-master,
.cg-pos-fit .cg-cart-line-master-sep { font-size: 10.5px; font-weight: 700; color: var(--text); }
.cg-pos-fit .cg-cart-line-total    {
    font-size: 10.5px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; min-width: 0;
    display: inline-flex; align-items: baseline; gap: 3px;
}

.cg-pos-fit .cg-cart-line-controls {
    margin-top: 3px;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 4px;
}
.cg-pos-fit .cg-qty-stepper {
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    background: #fff;
}
.cg-pos-fit .cg-qty-stepper button {
    width: 20px; height: 20px; font-size: 11px; font-weight: 600;
    color: var(--text);
}
.cg-pos-fit .cg-qty-stepper .cg-qty-val {
    min-width: 18px; line-height: 20px; font-size: 10.5px;
    padding: 0 2px; font-weight: 700; color: var(--text);
}
.cg-pos-fit .cg-cart-line-mult {
    font-size: 10px; color: var(--muted); margin: 0 1px;
}
.cg-pos-fit .cg-cart-line-pricewrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--muted);
}
.cg-pos-fit .cg-cart-line-price {
    width: 50px;
    /* Explicit properties (NOT the `font` shorthand) — the shorthand
     * interacts badly with var()-based font-family in some browsers and
     * the font-size silently falls back to the UA default (≈16px),
     * making the unit-price field look noticeably bigger than the qty
     * next to it. */
    font-family: var(--cg-font-ui) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    padding: 2px 5px !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text);
    background: #fff;
}
.cg-pos-fit .cg-cart-line-price::-webkit-outer-spin-button,
.cg-pos-fit .cg-cart-line-price::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cg-pos-fit .cg-cart-line-trash {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    background: #fee2e2;
    color: #dc2626;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.14s ease;
}
.cg-pos-fit .cg-cart-line-trash:hover { background: #fecaca; }
.cg-pos-fit .cg-cart-line-trash svg   { width: 12px; height: 12px; }

/* ---------- Phones / very narrow ---------- */
@media (max-width: 759px) {
    .cg-pos-grid-3,
    .cg-pos-grid-2,
    .cg-pos-grid-expense,
    .cg-pos-grid-advance,
    .cg-pos-grid-payout { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .cg-pos-fit { height: auto; overflow: visible; }
    .cg-pos-fit .cg-pos-shell,
    .cg-pos-fit .cg-pos-grid-3,
    .cg-pos-fit .cg-pos-grid-2,
    .cg-pos-fit .cg-pos-grid-expense,
    .cg-pos-fit .cg-pos-grid-advance,
    .cg-pos-fit .cg-pos-grid-payout,
    .cg-pos-fit .cg-pos-barbers,
    .cg-pos-fit .cg-pos-services,
    .cg-pos-fit .cg-pos-cart,
    .cg-pos-fit .cg-barber-list,
    .cg-pos-fit .cg-svc-grid,
    .cg-pos-fit .cg-cart-items { height: auto; overflow: visible; min-height: 0; }
}

.cg-pos-foot {
    margin-top: auto;
    border-top: 1px solid var(--cg-border);
    background: #fff;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--cg-muted);
}

/* ---------- Barber row (vertical list in left column) ---------- */
.cg-barber-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: 14px;
    color: var(--cg-text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
    transition: all 0.15s ease;
}
.cg-barber-chip:hover {
    border-color: var(--cg-navy);
    transform: translateX(2px);
}
.cg-barber-chip.active {
    background: var(--cg-navy);
    border-color: var(--cg-navy);
    color: #fff;
}
.cg-barber-tile {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #1B1B22;
    overflow: visible;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    transition: border-color 0.14s ease;
    box-sizing: border-box;
    flex: 0 0 44px;
}
.cg-barber-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    filter: grayscale(100%);
    transition: filter 0.18s ease;
}
.cg-barber-initials {
    font-family: inherit;
    opacity: 0.65;
    transition: opacity 0.18s ease;
}
.cg-barber-chip.active .cg-barber-img      { filter: grayscale(0%); }
.cg-barber-chip.active .cg-barber-initials { opacity: 1; }
.cg-barber-chip.active .cg-barber-tile     { border-color: rgba(255,255,255,0.18); }

/* Green check badge on the selected tile's bottom-right corner */
.cg-barber-check {
    display: none;
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    background: #16A34A;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.cg-barber-check svg { width: 9px; height: 9px; display: block; }
.cg-barber-chip.active .cg-barber-check { display: flex; }
.cg-barber-chip:hover .cg-barber-tile {
    transform: translateY(-2px);
    border-color: var(--cg-border);
}
.cg-barber-chip.active .cg-barber-tile {
    border-color: var(--cg-navy);
    box-shadow: 0 0 0 3px rgba(41, 134, 183,0.10);
    transform: translateY(-1px);
}
.cg-barber-label {
    margin-top: 0;
    font-weight: 600;
    font-size: 14px;
    color: inherit;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cg-barber-chip.active .cg-barber-label {
    /* Inherit #fff from active chip — explicit navy here rendered the
     * name invisible on the navy active background. */
    color: inherit;
    font-weight: 700;
}
.cg-barber-sub {
    margin-top: 2px;
    color: var(--cg-muted);
    font-size: 9.5px;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Service search/filter toolbar ---------- */
.cg-pos-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cg-pos-cat-row {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    align-items: center;
    padding: 8px 0;
}
.cg-pos-cat-pill {
    background: #fff;
    border: 1px solid var(--cg-border);
    color: var(--cg-text);
    padding: 12px 20px;
    min-height: 44px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.14s ease;
    box-shadow: 0 1px 2px rgba(41, 134, 183,0.04);
}
.cg-pos-cat-pill:hover { border-color: var(--cg-navy); color: var(--cg-navy); }
.cg-pos-cat-pill.active {
    background: #0E1B47;
    border-color: #0E1B47;
    color: #fff;
    box-shadow: 0 4px 10px rgba(14,27,71,0.20);
}

/* ---------- Service grid ---------- */
.cg-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 195px;
    align-content: start;
    gap: 14px;
}
@media (max-width: 1180px) { .cg-svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cg-svc-grid { grid-template-columns: repeat(2, 1fr); } }
.cg-svc-tile {
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: 16px;
    padding: 26px 16px 22px;
    cursor: pointer;
    text-align: center;
    transition: all 0.14s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    color: var(--cg-text);
    box-shadow: 0 2px 6px rgba(41, 134, 183,0.04);
    height: 195px;
    justify-content: space-between;
}
.cg-svc-tile:hover {
    border-color: var(--cg-navy);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(41, 134, 183,0.10);
}
.cg-svc-tile-icon {
    width: 68px; height: 68px;
    color: #3B82F6;       /* light blue — like the reference shot */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cg-svc-tile-icon svg { width: 100%; height: 100%; }
.cg-svc-tile-icon img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.cg-svc-tile-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--cg-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 100%;
}
.cg-svc-tile-price {
    font-weight: 700;
    font-size: 16px;
    color: #1E3A8A;
    letter-spacing: 0.3px;
}
.cg-svc-tile-vatchip {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--cg-bg);
    color: var(--cg-muted);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid var(--cg-border);
    font-weight: 700;
}

/* Per-service qty badge — small green circle in the top-right of the
 * tile that mirrors the quantity in the cart. Toggled via the [hidden]
 * attribute from renderSvcBadges() so it disappears at qty 0. */
.cg-svc-tile-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #2f9e6e;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(47,158,110,0.35);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.cg-svc-tile-badge[hidden] { display: none; }
.cg-svc-tile-flash {
    animation: cgTileFlash 0.22s ease;
    border-color: var(--cg-red) !important;
}
@keyframes cgTileFlash {
    0%   { box-shadow: 0 0 0 0 rgba(17, 17, 17,0.35); }
    100% { box-shadow: 0 0 0 12px rgba(17, 17, 17,0); }
}

/* ---------- Cart panel ----------
   Fills its sticky parent column (.cg-pos-right). Flex column so the
   items list grows while totals / payment / actions stay anchored at
   the bottom. */
.cg-cart-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cg-cart-barber-line {
    flex: 0 0 auto;
    padding: 12px 18px;
    border-bottom: 1px dashed var(--cg-border);
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 13.5px;
}
.cg-cart-items {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    padding: 8px 14px;
}
.cg-cart-empty {
    padding: 32px 16px;
    font-size: 13px;
}
.cg-cart-line {
    padding: 12px 6px;
    border-bottom: 1px dashed var(--cg-border);
}
.cg-cart-line:last-child { border-bottom: 0; }
.cg-cart-line-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.cg-cart-line-name { font-weight: 600; font-size: 13.5px; flex: 1; }
.cg-cart-line-del {
    background: transparent;
    border: 0;
    color: var(--cg-red);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.cg-cart-line-controls {
    margin-top: 8px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
}
.cg-qty-stepper {
    display: inline-flex;
    border: 1px solid var(--cg-border);
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: #fff;
}
.cg-qty-stepper button {
    background: #fff;
    border: 0;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    color: var(--cg-navy);
    font-weight: 700;
}
.cg-qty-stepper button:hover { background: var(--cg-bg); }
.cg-qty-stepper .cg-qty-val {
    min-width: 32px;
    text-align: center;
    line-height: 32px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    border-left: 1px solid var(--cg-border);
    border-right: 1px solid var(--cg-border);
    padding: 0 4px;
}
.cg-cart-line-price {
    text-align: right;
    padding: 6px 8px !important;
    font-variant-numeric: tabular-nums;
    width: 100%;
}
.cg-cart-line-total {
    min-width: 90px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ---------- Receipt: multi-master section header ----------
 * Renders above each per-master mini-table on receipts where the
 * sale's items span multiple masters. Clean two-line layout: the
 * master's name reads as the section heading (left, bold) and the
 * personal subtotal sits on the right as a labelled stat. */
.cg-receipt-master-section { margin-top: 18px; }
.cg-receipt-master-section:first-of-type { margin-top: 0; }
.cg-receipt-master-header {
    /* Rounded top so the dark strip caps the items table cleanly;
     * bottom edge stays square so it sits flush against the table
     * thead (which is intentionally square — see rule below). */
    padding: 10px 14px;
    background: var(--brand-deep);
    color: #fff;
    border: 0;
    border-radius: 10px 10px 0 0;
}
.cg-receipt-master-header-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.cg-receipt-master-section .cg-receipt-table {
    /* Square edges + no top border so the grey thead row reads as
     * a continuation of the dark master strip above it. */
    margin-top: 0;
    border-radius: 0;
    border-top: 0;
}

/* ---------- Receipt: final totals table ----------
 * Replaces the legacy .cg-cart-row stack so labels always render in
 * the slip card (the dark-cart cascade was hiding the left column).
 * "Total" row is emphasised for the bottom-line read. */
.cg-receipt-final-totals {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 0;
}
.cg-receipt-final-totals th,
.cg-receipt-final-totals td {
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid #e6ebf0;
}
.cg-receipt-final-totals th {
    text-align: left;
    font-weight: 600;
    color: #3d4853;
}
.cg-receipt-final-totals td {
    text-align: right;
    font-family: var(--cg-font-ledger);
    font-weight: 700;
    color: #16202b;
    font-variant-numeric: tabular-nums;
}
.cg-receipt-final-totals tr:last-child th,
.cg-receipt-final-totals tr:last-child td {
    border-bottom: 0;
}
.cg-receipt-final-totals .cg-receipt-final-totals-grand th,
.cg-receipt-final-totals .cg-receipt-final-totals-grand td {
    font-size: 16px;
    padding-top: 12px;
    border-top: 2px solid var(--line);
    color: var(--brand-deep);
}

/* ---------- Per-line master chip (multi-master sales only) ----------
 * Hidden by default; the cart-line renderer only emits the chip when
 * the cart contains ≥2 unique master ids. Each chip is a small
 * coloured pill anchoring the line to a specific barber + acts as
 * the trigger for the reassign popover. */
/* Multi-master master attribution — plain text, same weight + size
 * as the service name; reads as "<Master> > <Service>" in the head
 * row. Still a <button> under the hood so the reassign popover
 * trigger works; visual treatment is text-only with a subtle hover
 * cue (brand-coloured underline). */
.cg-cart-line-master {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 13.5px;   /* match .cg-cart-line-name */
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-cart-line-master:hover {
    color: var(--brand);
    text-decoration: underline dashed;
    text-underline-offset: 2px;
}
.cg-cart-line-master-sep {
    margin: 0 6px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.3;
}

/* ---------- Reassign-master popover ---------- */
.cg-cart-line-reassign {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(15,23,42,0.18);
    padding: 8px;
    min-width: 200px;
    max-width: 260px;
}
.cg-cart-line-reassign-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 700;
    padding: 4px 8px 8px;
}
.cg-cart-line-reassign-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cg-cart-line-reassign-opt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink);
    text-align: left;
    font-family: inherit;
}
.cg-cart-line-reassign-opt:hover { background: var(--fill); }
.cg-cart-line-reassign-opt.is-sel { background: var(--brand-tint); }
.cg-cart-line-reassign-pip {
    width: 22px; height: 22px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ---------- Per-master commission rollup (cart footer) ----------
 * Inline format: one row of "Commission" + pip + amount · pip + amount.
 * Much denser than the legacy vertical list — same data, ~1/3 the
 * vertical real-estate. */
.cg-cart-commission-rollup {
    padding: 8px 14px;
    background: #fafbfd;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
}
.cg-cart-commission-rollup--inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
}
.cg-cart-commission-rollup-inline-label {
    text-transform: uppercase;
    font-size: 9.5px;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 700;
    margin-right: 4px;
}
.cg-cart-commission-rollup-inline-pip {
    width: 18px; height: 18px;
    border-radius: 999px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cg-cart-commission-rollup-inline-amt {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ink);
}
.cg-cart-commission-rollup-inline-sep {
    color: var(--muted);
    margin: 0 2px;
    opacity: 0.6;
}

/* ---------- Cart totals (dark navy block) + payment + actions ---------- */
.cg-cart-totals {
    flex: 0 0 auto;
    padding: 18px 22px;
    background: #0E1B47;     /* deep navy block */
    color: #fff;
}
.cg-cart-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}
/* Author display:flex above outranks the UA's [hidden] {display:none},
 * so the card-fee row stays visible after switching back to Cash unless
 * we re-assert hiding here. */
.cg-cart-row[hidden] { display: none; }
.cg-cart-row span:first-child { font-weight: 500; }
.cg-cart-row-total {
    color: #fff !important;
    font-weight: 700;
    font-size: 22px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.18);
    letter-spacing: 0.5px;
}
.cg-cart-row-total span:last-child { font-size: 26px; }

.cg-cart-pay {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 18px 0;
}
.cg-pay-btn {
    background: #fff;
    color: var(--cg-text);
    border: 1px solid var(--cg-border);
    border-radius: var(--radius-md);
    padding: 14px 8px;
    min-height: 48px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 0;
    transition: all 0.14s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}
.cg-pay-btn svg { width: 20px; height: 20px; color: var(--cg-muted); }
.cg-pay-btn:hover { border-color: var(--cg-navy); }
.cg-pay-btn:hover svg { color: var(--cg-navy); }
.cg-pay-btn.active {
    background: var(--cg-navy);
    color: #fff;
    border-color: var(--cg-navy);
}
.cg-pay-btn.active svg { color: #fff; }
.cg-pay-summary { font-size: 11.5px; color: var(--cg-muted); padding: 4px 18px 0; min-height: 14px; text-align: center; }

.cg-cart-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 12px 18px max(18px, env(safe-area-inset-bottom));
    align-items: center;
}
.cg-cart-clear-btn {
    background: transparent;
    border: 0;
    padding: 12px 16px;
    min-height: 44px;
    color: var(--cg-muted);
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.cg-cart-clear-btn:hover { color: var(--cg-red); }
.cg-cart-submit-btn {
    /* Confirm-action button used by Sale, Advance, Expense and Payout
     * forms. Base styling pinned to the brand-red gradient so the
     * button looks the same everywhere — including admin contexts
     * that don't have the .cg-pos-fit shell. The previous
     * `var(--cg-red)` fallback was resolving to #111 (black) because
     * --cg-red aliases the dark secondary on this app; the explicit
     * gradient fixes that. */
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: 0;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    min-height: 52px;
    font-weight: 700;
    letter-spacing: 0;
    font-size: 15px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.14s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.cg-cart-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    transform: translateY(-1px);
}
.cg-cart-submit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
/* SVG check icon inside the submit button. The .cg-pos-fit /
 * .cg-close-form-actions scopes override the size for those specific
 * containers; this base rule makes the icon visible everywhere else
 * (notably admin payout preview which doesn't sit inside .cg-pos-fit). */
.cg-cart-submit-btn .cg-cart-submit-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Locked-paid variant — same size and weight as the red Confirm
 * Payout button, but rendered in the success-green gradient. Used in
 * place of the Confirm button when a payout period is already
 * confirmed so the visual status reads at a glance. !important on
 * the gradient + opacity so that .cg-pos-fit .cg-cart-submit-btn:disabled
 * (defined later in this file as the salmon dimmed state for the
 * red Confirm button) doesn't repaint this back to pink. */
.cg-cart-submit-btn.cg-cart-submit-btn--paid,
.cg-cart-submit-btn.cg-cart-submit-btn--paid:hover,
.cg-cart-submit-btn.cg-cart-submit-btn--paid:disabled {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #fff !important;
    opacity: 1 !important;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* ---------- Modal (split tender) ---------- */
.cg-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(41, 134, 183, 0.42);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    padding: 16px;
}
/* The HTML `hidden` attribute must beat `display: flex` above. */
.cg-modal-backdrop[hidden] { display: none; }
.cg-modal {
    background: #fff;
    width: 100%; max-width: 460px;
    border-radius: var(--cg-radius);
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0,0,0,0.28);
    border-top: 4px solid var(--cg-red);
}
.cg-modal-header, .cg-modal-footer {
    padding: 14px 20px;
    border-bottom: 1px solid var(--cg-border);
    display: flex; align-items: center; justify-content: space-between;
}
.cg-modal-footer {
    border-bottom: 0;
    border-top: 1px solid var(--cg-border);
    background: #FBF8F4;
}
.cg-modal-header h3 { margin: 0; font-family: var(--cg-font-ledger); color: var(--cg-navy); font-size: 18px; }
.cg-modal-close {
    background: transparent; border: 0; cursor: pointer;
    font-size: 26px; color: var(--cg-muted); line-height: 1;
}
.cg-modal-body { padding: 18px 20px; }
.cg-pay-totals {
    border-top: 1px dashed var(--cg-border);
    margin-top: 10px;
    padding-top: 10px;
    font-size: 13px;
}
.cg-pay-totals strong { color: var(--cg-navy); }
.cg-pay-totals div { padding: 4px 0; }

/* ============================================================
 *  Receipt
 * ============================================================ */
.cg-receipt-shell { max-width: 720px; margin: 0 auto; }
.cg-receipt {
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(41, 134, 183,0.10);
}
.cg-receipt-body { padding: 28px 28px 16px; }
.cg-receipt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cg-receipt-brand {
    margin: 0;
    font-family: var(--cg-font-ledger);
    font-size: 22px;
    line-height: 1.1;
}
.cg-receipt-meta { text-align: right; font-size: 12px; color: var(--cg-muted); }
.cg-receipt-status { text-align: right; margin-bottom: 8px; }
.cg-receipt-info { margin-bottom: 16px; }
.cg-receipt-table { margin-bottom: 0; border: 1px solid var(--cg-border); border-radius: var(--cg-radius-sm); overflow: hidden; }
.cg-receipt-table thead th { background: var(--cg-bg); color: var(--cg-navy); }
.cg-receipt-totals {
    border-top: 2px dashed var(--cg-border);
    margin-top: 14px;
    padding-top: 10px;
}
.cg-receipt-payments {
    border-top: 1px dashed var(--cg-border);
    margin-top: 12px;
    padding-top: 10px;
}
.cg-receipt-void {
    margin-top: 14px;
    padding: 10px 12px;
    background: #FEF2F2;
    border-radius: var(--cg-radius-sm);
}
.cg-receipt-foot {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--cg-border);
    color: var(--cg-text);
    font-size: 13px;
}
.cg-receipt-actions { margin-top: 18px; }

@media print {
    .cg-no-print { display: none !important; }
    body, .cg-pos-body { background: #fff; }
    .cg-receipt { box-shadow: none; border: 0; }
    .cg-receipt-shell { max-width: none; }
    .cg-pos-shell { padding: 0; }
    @page { size: A4; margin: 14mm; }
}

/* ============================================================
 *  Ledger hero (expenses/create.php + purchases/create.php)
 * ============================================================ */
.cg-ledger-hero {
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius);
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 8px 20px rgba(41, 134, 183,0.06);
}
.cg-ledger-hero-body {
    padding: 22px 28px 24px;
    text-align: center;
}
.cg-ledger-hero-title {
    margin: 0;
    font-family: var(--cg-font-ledger);
    font-size: 30px;
    letter-spacing: 6px;
    color: var(--cg-navy);
}
.cg-ledger-hero-sub {
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--cg-muted);
    font-size: 11px;
}

.cg-ledger-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 22px;
    align-items: flex-start;
}
@media (max-width: 980px) { .cg-ledger-grid { grid-template-columns: 1fr; } }

/* Offset navy shadow as seen on the spec mockups */
.cg-panel-offset {
    box-shadow:
        6px 6px 0 0 var(--cg-navy),
        0 12px 24px rgba(41, 134, 183,0.10);
}

.cg-ledger-foot {
    border-top: 1px solid var(--cg-border);
    background: #FBF8F4;
}
.cg-ledger-foot-link {
    display: block;
    padding: 14px 20px 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cg-navy);
}
.cg-ledger-foot-link:hover { color: var(--cg-red); }

/* ---------- Filter grid (full-ledger pages) ---------- */
.cg-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}
.cg-filter-grid .cg-form-field { margin: 0; }
@media (max-width: 1100px) {
    .cg-filter-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Stat strip ---------- */
.cg-stat-strip {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--cg-bg);
    border-radius: var(--cg-radius-sm);
    margin: 10px 0 18px;
}
.cg-stat-strip > div { min-width: 110px; }

/* ---------- Recent advances list (mockup style) ---------- */
.cg-advance-list { list-style: none; margin: 0; padding: 6px 0; }
.cg-advance-item {
    padding: 14px 18px;
    border-bottom: 1px dashed var(--cg-border);
}
.cg-advance-item:last-child { border-bottom: 0; }
.cg-advance-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.cg-advance-item-name {
    font-weight: 700;
    color: var(--cg-navy);
    font-size: 14px;
}
.cg-advance-item-code {
    color: var(--cg-muted);
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.cg-advance-amt {
    font-family: var(--cg-font-ledger);
    font-size: 18px;
}
.cg-advance-item-note {
    margin-top: 8px;
    color: var(--cg-text);
    font-style: italic;
    font-size: 13px;
    padding-left: 8px;
    border-left: 2px solid var(--cg-red);
}
.cg-advance-item-balance {
    margin-top: 8px;
    font-size: 12px;
}
.cg-advance-foot-totals {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px 16px;
    gap: 16px;
}

/* Big amount inputs (ledger forms) */
.cg-amount-input {
    font-family: var(--cg-font-ledger);
    font-size: 22px !important;
    font-weight: 700;
    color: var(--cg-navy);
}

/* ---------- VAT report ---------- */
.cg-vat-section {
    margin: 24px 0 10px;
    font-family: var(--cg-font-ledger);
    color: var(--cg-navy);
    font-size: 18px;
    border-bottom: 2px solid var(--cg-border);
    padding-bottom: 8px;
}
.cg-vat-payable {
    margin-top: 22px;
    padding: 22px 26px;
    border-radius: var(--cg-radius);
    background: linear-gradient(135deg, #FFFFFF 0%, var(--cg-tertiary) 100%);
    border: 1px dashed var(--cg-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}
.cg-vat-payable-value {
    font-family: var(--cg-font-ledger);
    font-size: 34px;
    color: var(--cg-red);
    font-weight: 700;
    margin-top: 6px;
    line-height: 1.05;
}
.cg-vat-disclaimer {
    margin-top: 22px;
    padding: 12px 14px;
    background: #FEFCE8;
    border-left: 4px solid #B68B2D;
    color: #7C4A03;
    font-size: 12.5px;
    border-radius: 4px;
}

/* ---------- Audit log diff blocks + pager ---------- */
.cg-audit-pre {
    background: #F8FAFC;
    border: 1px solid var(--cg-border);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 4px 0 0;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--cg-text);
    white-space: pre-wrap;
    max-width: 520px;
    max-height: 200px;
    overflow: auto;
}
.cg-audit-pre-old { border-left: 3px solid var(--cg-red); }
.cg-audit-pre-new { border-left: 3px solid #065F46; }
.cg-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

/* Payout final total row */
.cg-payout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 22px;
    background: var(--cg-bg);
    border-radius: var(--cg-radius-sm);
    border: 1px dashed var(--cg-border);
}
.cg-payout-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Definition list (profile pages) ---------- */
.cg-defs {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 13.5px;
}
.cg-defs dt {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--cg-muted);
    padding-top: 3px;
}
.cg-defs dd { margin: 0; color: var(--cg-text); }
@media (max-width: 600px) {
    .cg-defs { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .cg-admin-shell { grid-template-columns: 1fr; }
    .cg-sidebar { position: relative; height: auto; }
    .cg-admin-topbar { padding: 14px 18px; }
    .cg-admin-content { padding: 16px; }
    .cg-form-row { grid-template-columns: 1fr; }
    .cg-grid-cols-2 { grid-template-columns: 1fr; }
}
/* Admin shell: honor safe-area on the bottom + sides (notch / home-indicator) */
.cg-admin-content {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.cg-admin-topbar {
    padding-right: max(20px, env(safe-area-inset-right));
}


/* ============================================================
 *  Heritage Grooming POS — design system overrides
 *  Sourced from DESIGN.md (Material 3 inspired tokens).
 *  Scoped to .cg-pos-body so admin pages keep their current
 *  navy + red brand. Applies to: new-sale, expense/create,
 *  advance/create, receipt, payout slip.
 * ============================================================ */
.cg-pos-body {
    /* ---- tokens (aligned to brand palette: Primary/Secondary/Tertiary/Neutral) ---- */
    --hg-surface:        #FFFFFF;
    --hg-card:           #FFFFFF;
    --hg-card-tint:      #F4F8FB;
    --hg-card-deeper:    #E8F4F9;
    --hg-text:           #111111;       /* Secondary */
    --hg-text-variant:   #666666;       /* Neutral */
    --hg-outline:        #666666;
    --hg-outline-soft:   #D5DDE3;
    --hg-primary:        #1d6b8c;       /* Brand */
    --hg-primary-hover:  #155570;
    --hg-primary-deep:   #10455c;
    --hg-ice:            #E8F4F9;       /* Tertiary */
    --hg-error:          #111111;       /* mapped to Secondary per palette */

    --hg-font:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hg-font-mono: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    background: var(--hg-surface);
    color: var(--hg-text);
    font-family: var(--hg-font);
}

/* ---- Header / brand ---- */
.cg-pos-body .cg-pos-header {
    background: var(--hg-card);
    border-bottom: 1px solid var(--hg-outline-soft);
    box-shadow: none;
}
.cg-pos-body .cg-brand,
.cg-pos-body .cg-brand .cg-brand-red,
.cg-pos-body .cg-brand .cg-brand-navy { font-family: var(--hg-font); font-weight: 700; }
.cg-pos-body .cg-brand .cg-brand-red  { color: var(--hg-text); }   /* "Classic Gents Salon" */
.cg-pos-body .cg-brand .cg-brand-navy { color: var(--hg-primary); }/* "POS" */

/* ---- POS tabs (Sale / Expense / Advance) ---- */
.cg-pos-body .cg-pos-tabs { gap: 16px; }
.cg-pos-body .cg-pos-tab {
    background: var(--hg-card);
    border: 1px solid var(--hg-outline-soft);
    border-radius: var(--radius-md);
    color: var(--hg-text);
    font-family: var(--hg-font);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.cg-pos-body .cg-pos-tab:hover {
    border-color: var(--hg-primary);
    color: var(--hg-primary);
    transform: none;
}
.cg-pos-body .cg-pos-tab.active {
    background: var(--hg-primary);
    border-color: var(--hg-primary);
    color: #fff;
}
.cg-pos-body .cg-pos-tab.active::after { display: none; }   /* drop the red bottom accent */
.cg-pos-body .cg-pos-tab-icon { color: var(--hg-primary); background: transparent; }
.cg-pos-body .cg-pos-tab.active .cg-pos-tab-icon { color: #fff; }

/* ---- Topbar action cluster ---- */
.cg-pos-body .cg-tbtn {
    background: var(--hg-primary);
    border-radius: var(--radius-sm);
    font-family: var(--hg-font);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.cg-pos-body .cg-tbtn:hover {
    background: var(--hg-primary-hover);
    box-shadow: 0 4px 12px rgba(0,98,140,0.18);
}
.cg-pos-body .cg-tbtn-danger { background: var(--hg-error); }
.cg-pos-body .cg-tbtn-danger:hover { background: #d32f2f; box-shadow: 0 4px 12px rgba(186,26,26,0.20); }
.cg-pos-body .cg-icon-btn {
    border-radius: var(--radius-sm);
    background: var(--hg-card);
    border-color: var(--hg-outline-soft);
    color: var(--hg-text);
}
.cg-pos-body .cg-icon-btn:hover {
    color: var(--hg-primary);
    border-color: var(--hg-primary);
    background: var(--hg-ice);
}
.cg-pos-body .cg-user-avatar-btn { border-color: var(--hg-outline-soft); }
.cg-pos-body .cg-user-avatar { background: var(--hg-ice); color: var(--hg-primary); }

/* ---- 3-column grid backgrounds ---- */
.cg-pos-body .cg-pos-section-label {
    font-family: var(--hg-font-mono);
    color: var(--hg-text-variant);
    font-size: 12px;
    letter-spacing: 0.05em;
}

/* ---- Barber rows ---- */
.cg-pos-body .cg-barber-chip {
    background: var(--hg-card);
    border: 1px solid var(--hg-outline-soft);
    border-radius: 8px;
    color: var(--hg-text);
    font-family: var(--hg-font);
}
.cg-pos-body .cg-barber-chip:hover { border-color: var(--hg-primary); transform: none; }
.cg-pos-body .cg-barber-chip.active {
    background: var(--hg-primary);
    border-color: var(--hg-primary);
    color: #fff;
}
.cg-pos-body .cg-barber-check { background: var(--hg-primary); }   /* teal check */

/* ---- Search bar ---- */
.cg-pos-body .cg-svc-search-wrap {
    background: var(--hg-card);
    border: 1px solid var(--hg-outline-soft);
    border-radius: 9999px;
    box-shadow: none;
}
.cg-pos-body .cg-svc-search-wrap:focus-within { border-color: var(--hg-primary); }
.cg-pos-body .cg-svc-search-icon { color: var(--hg-text-variant); }
.cg-pos-body .cg-svc-search { font-family: var(--hg-font); color: var(--hg-text); }

/* ---- Category chips: Ice Tint background per spec ---- */
.cg-pos-body .cg-pos-cat-pill {
    background: var(--hg-ice);
    border: 1px solid transparent;
    color: var(--hg-text);
    font-family: var(--hg-font);
    font-weight: 600;
    letter-spacing: 0.05em;
    box-shadow: none;
}
.cg-pos-body .cg-pos-cat-pill:hover { background: #d4eaf2; border-color: transparent; }
.cg-pos-body .cg-pos-cat-pill.active {
    background: var(--hg-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,98,140,0.18);
}

/* ---- Service tiles: 8px radius, 2px teal border when selected ---- */
.cg-pos-body .cg-svc-tile {
    background: var(--hg-card);
    border: 1px solid var(--hg-outline-soft);
    border-radius: 8px;
    color: var(--hg-text);
    font-family: var(--hg-font);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.cg-pos-body .cg-svc-tile:hover {
    border-color: var(--hg-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.cg-pos-body .cg-svc-tile.cg-svc-tile-selected {
    border: 2px solid var(--hg-primary);
    padding: 25px 15px 21px;
}
.cg-pos-body .cg-svc-tile-icon { color: var(--hg-primary); }
.cg-pos-body .cg-svc-tile-name {
    color: var(--hg-text);
    font-family: var(--hg-font);
    font-weight: 600;
}
.cg-pos-body .cg-svc-tile-price {
    color: var(--hg-primary);
    font-family: var(--hg-font-mono);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---- Cart panel ---- */
.cg-pos-body .cg-pos-cart {
    background: var(--hg-card);
    border: 1px solid var(--hg-outline-soft);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.cg-pos-body .cg-cart-head {
    border-bottom: 1px solid var(--hg-outline-soft);
}
.cg-pos-body .cg-cart-head h2 {
    color: var(--hg-text);
    font-family: var(--hg-font);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.cg-pos-body #cg-cart-meta {
    font-family: var(--hg-font-mono);
    color: var(--hg-text-variant);
    letter-spacing: 0.05em;
}
.cg-pos-body .cg-cart-master {
    background: var(--hg-ice);
    border-radius: 8px;
}
.cg-pos-body .cg-cart-master-label {
    font-family: var(--hg-font-mono);
    color: var(--hg-text-variant);
    letter-spacing: 0.05em;
}
.cg-pos-body .cg-cart-master-name {
    color: var(--hg-text);
    font-family: var(--hg-font);
}

/* ---- Cart items: alternating row shades ---- */
.cg-pos-body .cg-cart-line { border-bottom-color: var(--hg-outline-soft); border-radius: 0; }
.cg-pos-body .cg-cart-line:nth-child(even) { background: var(--hg-card-tint); }
.cg-pos-body .cg-cart-line-total { font-family: var(--hg-font-mono); }
.cg-pos-body .cg-cart-line-price { border-color: var(--hg-outline-soft); border-radius: 4px; }
.cg-pos-body .cg-qty-stepper {
    border-color: var(--hg-outline-soft);
    border-radius: var(--radius-xs);
}
.cg-pos-body .cg-qty-stepper button { color: var(--hg-primary); }

/* ---- Cart totals block: deep teal ---- */
.cg-pos-body .cg-cart-totals {
    background: var(--hg-primary-deep);
    color: #fff;
}
.cg-pos-body .cg-cart-row { color: rgba(255,255,255,0.85); font-family: var(--hg-font); }
.cg-pos-body .cg-cart-row span:last-child { font-family: var(--hg-font-mono); }
.cg-pos-body .cg-cart-row-total { border-top-color: rgba(255,255,255,0.18); }
.cg-pos-body .cg-cart-row-total span:first-child { letter-spacing: 0.05em; }
.cg-pos-body #cg-cart-net,
.cg-pos-body #cg-cart-vat,
.cg-pos-body #cg-cart-total { font-family: var(--hg-font-mono); }

/* ---- Payment buttons ---- */
.cg-pos-body .cg-pay-btn {
    background: var(--hg-card);
    border: 1px solid var(--hg-outline-soft);
    border-radius: var(--radius-md);
    color: var(--hg-text);
    font-family: var(--hg-font);
    font-weight: 600;
    letter-spacing: 0.06em;
}
.cg-pos-body .cg-pay-btn svg { color: var(--hg-text-variant); }
.cg-pos-body .cg-pay-btn:hover {
    border-color: var(--hg-primary);
    color: var(--hg-primary);
}
.cg-pos-body .cg-pay-btn:hover svg { color: var(--hg-primary); }
.cg-pos-body .cg-pay-btn.active {
    background: var(--hg-primary);
    border-color: var(--hg-primary);
    color: #fff;
}
.cg-pos-body .cg-pay-btn.active svg { color: #fff; }
.cg-pos-body .cg-pay-summary { font-family: var(--hg-font-mono); color: var(--hg-text-variant); }

/* ---- Cart actions: teal Submit, text-only Clear ---- */
.cg-pos-body .cg-cart-clear-btn {
    color: var(--hg-text-variant);
    font-family: var(--hg-font);
    letter-spacing: 0.06em;
}
.cg-pos-body .cg-cart-clear-btn:hover { color: var(--hg-error); }
.cg-pos-body .cg-cart-submit-btn {
    background: var(--hg-primary);
    border-radius: var(--radius-md);
    font-family: var(--hg-font);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.cg-pos-body .cg-cart-submit-btn:hover:not(:disabled) {
    background: var(--hg-primary-hover);
    box-shadow: 0 6px 18px rgba(0,98,140,0.22);
}
.cg-pos-body .cg-cart-submit-btn:disabled {
    /* Keep the brand-teal fill; just dim the whole button instead of
     * switching to a different colour. Matches .btn:disabled. */
    background: var(--hg-primary);
    opacity: 0.45;
    color: #fff;
    box-shadow: none;
    transform: none;
}

/* ---- Empty cart placeholder ---- */
.cg-pos-body .cg-cart-empty   { color: var(--hg-text-variant); }
.cg-pos-body .cg-cart-empty p { font-family: var(--hg-font); }

/* ---- Receipt page (read-only invoice) ---- */
.cg-pos-body .cg-receipt {
    background: var(--hg-card);
    border-color: var(--hg-outline-soft);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.cg-pos-body .cg-receipt-brand .cg-brand-red  { color: var(--hg-text); }
.cg-pos-body .cg-receipt-brand .cg-brand-navy { color: var(--hg-primary); }
.cg-pos-body .cg-receipt-meta,
.cg-pos-body .cg-receipt-table th,
.cg-pos-body .cg-receipt-table td { font-family: var(--hg-font); }
.cg-pos-body .cg-receipt-table th { background: var(--hg-card-tint); color: var(--hg-text); }
.cg-pos-body .cg-receipt-totals .cg-cart-row-total {
    color: var(--hg-primary);
    font-family: var(--hg-font);
}

/* Receipt page lives outside the totals-block context — restore neutral
   styling for the unbordered .cg-cart-totals used inside .cg-receipt */
.cg-pos-body .cg-receipt .cg-cart-totals {
    background: transparent;
    color: var(--hg-text);
}
.cg-pos-body .cg-receipt .cg-cart-row { color: var(--hg-text); }

/* Invoice numbers / IDs in mono per spec */
.cg-pos-body .cg-receipt strong,
.cg-pos-body .cg-defs dd strong { font-family: var(--hg-font-mono); }

/* Pose POS empty/info text size + line-height */
.cg-pos-body .cg-text-muted { color: var(--hg-text-variant); }

/* ============================================================
 *  POS new-sale: "calm cards on a soft background" design system.
 *  Soft grey page; white cards (~20px radius, subtle shadow) for
 *  every functional area; teal-blue primary, brass accent reserved
 *  for the Submit Sale CTA. Scoped to .cg-pos-fit so receipts /
 *  slips remain neutral.
 * ============================================================ */
.cg-pos-fit {
    --bg:           #f7f9fb;
    --card:         #ffffff;
    --primary:      #1d6b8c;
    --primary-deep: #134a61;
    --accent:       #c9942f;
    --accent-hover: #b3831f;
    --text:         #16202b;
    --muted:        #7d8a98;
    --border:       #e6ebf0;
    /* Payment toggle + Submit Sale colour tokens (per spec). */
    --sel:          #2c6f9c;
    --seg-bg:       #f4f6f8;
    --seg-border:   var(--border);
    --seg-text:     var(--muted);
    --green:        #2f9e6e;
    --green-deep:   #268a5f;
    --r-card:       20px;
    --r-inner:      14px;
    --shadow-card:  0 1px 2px rgba(22,32,43,0.04), 0 6px 18px rgba(22,32,43,0.06);
    --shadow-tile:  0 1px 2px rgba(22,32,43,0.04);
    --shadow-hover: 0 4px 8px rgba(22,32,43,0.06), 0 14px 28px rgba(22,32,43,0.10);
    background: var(--bg);
}

/* Page chrome blends with the soft grey background */
.cg-pos-fit .cg-pos-shell,
.cg-pos-fit .cg-pos-header,
.cg-pos-fit .cg-pos-foot {
    background: var(--bg);
    border-color: transparent;
    box-shadow: none;
}
.cg-pos-fit .cg-pos-shell { padding: 10px 22px 8px; }
.cg-pos-fit .cg-pos-foot {
    /* Bottom safe-area inset is already subtracted from .cg-pos-fit's
     * height, so the footer doesn't need to re-account for it here — a
     * flat 14px is enough breathing room. */
    padding: 8px 22px 14px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg);
    min-height: 36px;
    flex-wrap: wrap;
    row-gap: 2px;
}
.cg-pos-fit .cg-pos-foot .cg-aed-icon { vertical-align: -0.08em; }

/* ---- Mode tabs: slim underline (no card, shared bottom border) ----
 * Inactive = muted grey + brand hover, active = brand text with a 3px
 * brand underline sitting on the container's shared bottom border. */
.cg-pos-fit .cg-pos-tabs {
    border-bottom: 1.5px solid var(--border);
    gap: 28px;
    /* Right padding intentionally 0 so the P&L View button (last item
     * in .cg-pos-tabs-info) lands at the same x as the profile avatar
     * one row above. The 4px left padding stays for a slight inset
     * away from the brand block. */
    padding: 0 0 0 4px;
    margin: 0;
    align-items: center;
}
/* Right-aligned info cluster on the tabs row: live clock + today's
 * sales + Close Day button. Floated right via margin-left:auto so the
 * tabs stay flush-left. */
.cg-pos-fit .cg-pos-tabs-info {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 6px 4px;
}
.cg-pos-fit .cg-pos-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cg-pos-fit .cg-pos-clock-date {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.1px;
}
.cg-pos-fit .cg-pos-clock-time {
    font-size: 14px;
    color: var(--text);
    font-weight: 700;
    margin-top: 2px;
}
.cg-pos-fit .cg-pos-todays {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}
.cg-pos-fit .cg-pos-todays-label {
    font-size: 9.5px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.cg-pos-fit .cg-pos-todays-amount {
    font-size: 14px;
    color: var(--green);
    font-weight: 700;
    margin-top: 2px;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}
/* Dirham symbol here inherits --green from the amount via currentColor — no
 * explicit colour override (per the CBUAE guideline, colour matches the figure). */

/* Header-row action pills: "View" (today's sales report) and "Close Day".
 * Identical sizing and chrome so they read as a matched pair. */
.cg-pos-fit .cg-pos-todays-view,
.cg-pos-fit .cg-pos-close-day {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    align-self: center;
}
.cg-pos-fit .cg-pos-todays-view:hover,
.cg-pos-fit .cg-pos-close-day:hover {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
}
.cg-pos-fit .cg-pos-todays-view svg,
.cg-pos-fit .cg-pos-close-day svg {
    width: 16px; height: 16px;
    color: var(--green);
    flex-shrink: 0;
}
.cg-pos-fit .cg-pos-tab {
    background: transparent;
    color: var(--muted);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 2px;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 14px;
    gap: 9px;
    position: relative;
    justify-content: flex-start;
    transform: none;
    overflow: visible;
}
.cg-pos-fit .cg-pos-tab:hover {
    background: transparent;
    color: var(--text);
    border-color: transparent;
    transform: none;
}
.cg-pos-fit .cg-pos-tab.active {
    background: transparent;
    color: var(--text);
    border-color: transparent;
    box-shadow: none;
    font-weight: 700;
}
.cg-pos-fit .cg-pos-tab.active::after {
    content: '';
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: -1.5px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--text);
}
.cg-pos-fit .cg-pos-tab .cg-pos-tab-icon { color: inherit; display: grid; place-items: center; }
.cg-pos-fit .cg-pos-tab .cg-pos-tab-icon svg { width: 17px; height: 17px; }
.cg-pos-fit .cg-pos-tab.active .cg-pos-tab-icon { color: var(--text); }

/* ---- Master Barber rail: white card ---- */
.cg-pos-fit .cg-pos-barbers {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
}
.cg-pos-fit .cg-barber-tile {
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(22,32,43,0.08);
}
.cg-pos-fit .cg-barber-chip.active .cg-barber-tile {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29,107,140,0.18);
}
.cg-pos-fit .cg-barber-check { background: var(--primary); }

/* ---- Services catalog: white card ---- */
.cg-pos-fit .cg-pos-services {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    padding: 18px;
}

/* Search bar inside services card: light-grey pill */
.cg-pos-fit .cg-svc-search-wrap {
    background: #eef1f4;
    border: 1px solid transparent;
    border-radius: 999px;
    box-shadow: none;
}
.cg-pos-fit .cg-svc-search-wrap:focus-within { border-color: var(--primary); background: #e5eaef; }
.cg-pos-fit .cg-svc-search      { background: transparent; color: var(--text); }
.cg-pos-fit .cg-svc-search-icon { color: var(--muted); }

/* Category pills: white with hairline border, teal-blue when active */
.cg-pos-fit .cg-pos-cat-pill {
    background: var(--card);
    color: var(--muted);
    border: 1px solid var(--border);
    box-shadow: none;
    font-weight: 600;
}
.cg-pos-fit .cg-pos-cat-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--card);
}
.cg-pos-fit .cg-pos-cat-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: none;
}

/* Service tiles: white card, hairline border, flat — shadow / lift
 * removed to keep buttons truly flat per design feedback. */
.cg-pos-fit .cg-svc-tile {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-inner);
    box-shadow: none;
    transition: border-color 0.15s ease;
}
.cg-pos-fit .cg-svc-tile:hover {
    border-color: var(--primary);
    box-shadow: none;
}
.cg-pos-fit .cg-svc-tile.cg-svc-tile-selected {
    border: 2px solid var(--primary);
}
.cg-pos-fit .cg-svc-tile-icon  { color: var(--primary); }
.cg-pos-fit .cg-svc-tile-name  { color: var(--text); }
.cg-pos-fit .cg-svc-tile-price { color: var(--primary); }

/* ---- Order Summary card ---- */
.cg-pos-fit .cg-pos-cart {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.cg-pos-fit .cg-cart-head        { border-bottom: 1px solid var(--border); }
.cg-pos-fit .cg-cart-head h2     { color: var(--text); }
.cg-pos-fit #cg-cart-meta        { color: var(--muted); }
.cg-pos-fit .cg-cart-master      { background: var(--bg); border-radius: var(--r-inner); }
.cg-pos-fit .cg-cart-master-label{ color: var(--muted); }
.cg-pos-fit .cg-cart-master-name { color: var(--text); }

/* Cart line items */
.cg-pos-fit .cg-cart-line                  { border-bottom: 1px solid var(--border); }
.cg-pos-fit .cg-cart-line:nth-child(even)  { background: transparent; }
.cg-pos-fit .cg-cart-line-name             { color: var(--text); }
.cg-pos-fit .cg-cart-line-total            { color: var(--text); }
.cg-pos-fit .cg-cart-line-price            { border-color: var(--border); color: var(--text); }
.cg-pos-fit .cg-qty-stepper                { border-color: var(--border); border-radius: var(--radius-xs); }
.cg-pos-fit .cg-qty-stepper button         { color: var(--primary); }
.cg-pos-fit .cg-cart-empty                 { color: var(--muted); }

/* ---- Totals block: dark teal gradient card, golden Dirham accent ---- */
.cg-pos-fit .cg-cart-totals {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    color: #fff;
    padding: 14px 18px 16px;
    margin: 12px 14px 0;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(14, 27, 71, 0.18);
}
.cg-pos-fit .cg-cart-row                       { color: rgba(255,255,255,0.78); padding: 2px 0; font-size: 12px; }
.cg-pos-fit .cg-cart-row span:last-child       { color: #fff; font-weight: 600; }
.cg-pos-fit .cg-cart-row-total                 { color: #fff; border-top-color: rgba(255,255,255,0.18); padding-top: 10px; margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600; }
.cg-pos-fit .cg-cart-row-total span:first-child { color: rgba(255,255,255,0.7); }
.cg-pos-fit .cg-cart-row-total span:last-child { font-size: 28px; font-weight: 700; letter-spacing: 0; text-transform: none; }
/* Dirham symbol on the dark totals card inherits the surrounding white via
 * currentColor — no decorative gold override (CBUAE guideline says brand
 * colour variations are only allowed in marketing contexts; pricing /
 * totals are transactional and must read as plain black or white). */

/* ---- Payment: two separate Cash / Card pills.
 * Active = dark teal gradient pill, inactive = light cream/grey pill.
 * (The legacy segmented-knob span is left in markup but hidden here.) */
.cg-pos-fit .cg-pay-seg {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 12px 14px 0;
}
.cg-pos-fit .cg-pay-seg-knob { display: none; }

.cg-pos-fit .cg-pay-btn {
    position: relative;
    z-index: 1;
    background: var(--seg-bg);
    color: var(--seg-text);
    border: 1px solid var(--seg-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    padding: 13px 8px;
    min-height: 0;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
}
.cg-pos-fit .cg-pay-btn svg        { color: inherit; }
.cg-pos-fit .cg-pay-btn:hover      { background: var(--seg-bg); color: var(--sel); border-color: var(--sel); box-shadow: none; transform: none; }
.cg-pos-fit .cg-pay-btn:hover svg  { color: var(--sel); }
.cg-pos-fit .cg-pay-btn.active     {
    background: var(--sel);
    color: #fff;
    border-color: var(--sel);
    box-shadow: 0 4px 12px rgba(44, 111, 156, 0.3);
}
.cg-pos-fit .cg-pay-btn.active svg { color: #fff; }
.cg-pos-fit .cg-pay-summary        { display: none; }

/* ---- Cart actions: brass Submit (the one warm accent) ---- */
.cg-pos-fit .cg-cart-clear-btn         { color: var(--muted); }
.cg-pos-fit .cg-cart-clear-btn:hover   { color: #b3293a; }
.cg-pos-fit .cg-cart-submit-btn {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    font-size: 15px;
    letter-spacing: 0.4px;
    text-transform: none;
}
.cg-pos-fit .cg-cart-submit-btn .cg-cart-submit-check  { width: 18px; height: 18px; flex-shrink: 0; }
.cg-pos-fit .cg-cart-submit-btn .cg-cart-submit-label  { font-weight: 700; }
.cg-pos-fit .cg-cart-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    box-shadow: none;
}
.cg-pos-fit .cg-cart-submit-btn:disabled {
    background: #f4c5c5;
    color: rgba(255,255,255,0.92);
    box-shadow: none;
}

/* ---------- Topbar action variants: Lock = dark slate, Admin/POS switch = black ----------
 * Universal across POS pages (and admin layouts that share the topbar). Uses
 * direct colors so it works regardless of which body scope is active. */
.cg-tbtn-danger,
.cg-pos-body .cg-tbtn-danger {
    background: #3a4a5a !important;
    color: #fff;
}
.cg-tbtn-danger:hover,
.cg-pos-body .cg-tbtn-danger:hover {
    background: #2c3a47 !important;
    box-shadow: 0 4px 12px rgba(58, 74, 90, 0.28);
}
.cg-tbtn-primary,
.cg-pos-body .cg-tbtn-primary {
    background: #16202b !important;
    color: #fff;
}
.cg-tbtn-primary:hover,
.cg-pos-body .cg-tbtn-primary:hover {
    background: #0d1318 !important;
    box-shadow: 0 4px 12px rgba(22,32,43,0.25);
}

/* ---------- Flow: services locked until a barber is selected ----------
 * The grid starts with .is-locked (toggled by JS in renderBarberLine).
 * Tiles dim and ignore clicks so the user is led to pick a barber first. */
.cg-svc-grid.is-locked .cg-svc-tile {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Brief attention pulse on the barber column when the user taps a
 * locked service tile — drawn from the grid click handler. */
@keyframes cg-flash-attention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    40%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.25); }
}
.cg-flash-attention {
    animation: cg-flash-attention 0.6s ease-out;
    border-radius: 12px;
}

/* ============================================================
 *  Modernised admin chrome
 *  ------------------------------------------------------------
 *  Adopts the POS palette (light grey bg, white cards with soft
 *  shadow, teal accent) across every admin / operations page
 *  (expenses, advances, closing, services, barbers, payouts,
 *  visa, reports, settings, audit, cash deposits, ...). Old
 *  class names are preserved so individual page markup doesn't
 *  need touching. Striped 'airmail' candy bar replaced with the
 *  same 5px teal ribbon used on the PIN pad + side panel.
 * ============================================================ */
.cg-admin-body {
    /* Modern palette tokens (mirror .cg-pos-fit) */
    --bg:           #f7f9fb;
    --card:         #ffffff;
    --primary:      #1d6b8c;
    --primary-deep: #134a61;
    --text:         #16202b;
    --muted:        #7d8a98;
    --border:       #e6ebf0;
    --accent:       #c9942f;
    --green:        #2f9e6e;

    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Sidebar */
.cg-admin-body .cg-admin-shell { grid-template-columns: 240px 1fr; }
.cg-admin-body .cg-sidebar {
    background: #fff;
    border-right: 1px solid var(--border);
    padding: 18px 14px;
    gap: 16px;
}
.cg-admin-body .cg-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 16px;
    border-bottom: 1px solid var(--border);
}
.cg-admin-body .cg-sidebar-brand-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(19, 74, 97, 0.18);
}
.cg-admin-body .cg-sidebar-brand-icon svg { width: 18px; height: 18px; }
.cg-admin-body .cg-sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.cg-admin-body .cg-sidebar-brand-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.cg-admin-body .cg-sidebar-brand-tag  { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600; margin-top: 2px; }

.cg-admin-body .cg-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.cg-admin-body .cg-sidebar-group {
    padding: 14px 10px 6px;
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
}
.cg-admin-body .cg-sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 6px 0;
}
.cg-admin-body .cg-sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.cg-admin-body .cg-sidebar-link-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}
.cg-admin-body .cg-sidebar-link-icon svg { width: 100%; height: 100%; }
.cg-admin-body .cg-sidebar-link-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-admin-body .cg-sidebar-link:hover {
    background: var(--bg);
    color: var(--primary);
}
.cg-admin-body .cg-sidebar-link.active {
    background: rgba(29, 107, 140, 0.08);
    color: var(--primary);
    font-weight: 500;
    box-shadow: none;
}
.cg-admin-body .cg-sidebar-link.active:hover {
    background: rgba(29, 107, 140, 0.12);
    color: var(--primary);
}
.cg-admin-body .cg-sidebar-link.active::before { display: none; }

/* ---------- Service-list row icon + icon-only action buttons ---------- */
.cg-svc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.cg-svc-row-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    overflow: hidden;
}
.cg-svc-row-icon svg { width: 20px; height: 20px; }
.cg-svc-row-icon img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.cg-action-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
.cg-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cg-icon-action svg { width: 16px; height: 16px; }
.cg-icon-action:hover {
    background: var(--bg);
    color: var(--primary);
    border-color: var(--border);
}
.cg-icon-action-danger:hover {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.06);
}

/* Service edit: Active toggle inside Section 1's head (right-aligned via
 * the section-head flex layout). Plain checkbox + label, no box. */
.cg-svc-active-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--cg-text);
    cursor: pointer;
    padding-top: 2px;
}
.cg-svc-active-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ---------- Service Edit / Add — redesigned layout ----------
 * Two-column grid: a flexible edit form on the left, a fixed-width
 * Live Preview rail on the right. Preview is sized to fit a single
 * POS service tile snugly (~180px) so the form gets the breathing
 * room. */
.cg-svc-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .cg-svc-edit-grid { grid-template-columns: 1fr; }
}
.cg-svc-form-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.cg-svc-form-card form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.cg-svc-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cg-border);
}
.cg-svc-form-header .cg-panel-title { margin: 0; flex: 0 0 auto; }
.cg-svc-form-body { padding: 22px; display: flex; flex-direction: column; gap: 26px; }

.cg-svc-section {
    border-top: 1px solid var(--cg-border);
    padding-top: 22px;
}
.cg-svc-section:first-child { border-top: 0; padding-top: 0; }
.cg-svc-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.cg-svc-section-titles { flex: 1 1 auto; min-width: 0; }
.cg-svc-section-head h3 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--cg-text);
    text-transform: none;
}
.cg-svc-section-head p {
    margin: 0;
    font-size: 11.5px;
    color: var(--cg-muted);
    line-height: 1.45;
}

/* Currency-prefixed input (price field) */
.cg-input-currency { position: relative; }
.cg-input-currency-symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--cg-muted);
    pointer-events: none;
}
.cg-input-currency-symbol svg { width: 100%; height: 100%; display: block; }
.cg-input-currency-input { padding-left: 38px; }

/* Icon uploader: current thumbnail + click/drop label */
.cg-svc-icon-uploader {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    border: 1px dashed var(--cg-border);
    border-radius: 12px;
    background: var(--bg);
    transition: border-color 0.14s ease, background 0.14s ease;
}
.cg-svc-icon-uploader.is-dragover {
    border-color: var(--primary);
    background: rgba(29, 107, 140, 0.06);
}
.cg-svc-icon-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--cg-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    overflow: hidden;
}
.cg-svc-icon-thumb svg { width: 28px; height: 28px; }
.cg-svc-icon-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; display: block; }
/* Avatar / photo mode — fill the thumb edge-to-edge, no inner padding,
 * crop to centre via object-fit: cover. Used by the barber avatar uploader. */
.cg-svc-icon-thumb--cover img { object-fit: cover; padding: 0; }
.cg-svc-icon-drop {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.14s ease;
}
.cg-svc-icon-drop:hover { background: rgba(29, 107, 140, 0.04); }
.cg-svc-icon-drop-primary {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
}
.cg-svc-icon-drop-secondary {
    font-size: 11px;
    color: var(--cg-muted);
    line-height: 1.45;
}

/* Sticky action bar at the bottom of the form card */
.cg-svc-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: #fff;
    border-top: 1px solid var(--cg-border);
    border-radius: 0 0 var(--r-card, 18px) var(--r-card, 18px);
    box-shadow: 0 -6px 14px rgba(15, 30, 50, 0.04);
}
.cg-svc-edited {
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--cg-muted);
}
.cg-svc-edited-sep { margin: 0 6px; opacity: 0.6; }
.cg-svc-edited-status.is-saved { color: #2f9e6e; font-weight: 600; }
.cg-svc-edited-status.is-dirty { color: #b45309; font-weight: 600; }
.cg-svc-action-buttons { display: inline-flex; gap: 10px; }
.cg-svc-action-buttons .cg-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Right column live preview — sticky so it follows the user while scrolling. */
.cg-svc-preview-col {
    position: sticky;
    /* Topbar + subnav strip both sit above this column — 100px clears them. */
    top: 100px;
}
@media (max-width: 1024px) {
    .cg-svc-preview-col { position: static; }
}

/* ---------- Collapse button (replaces the old Open POS / Lock buttons) ---------- */
.cg-admin-body .cg-sidebar-foot {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: auto;
}
.cg-admin-body .cg-sidebar-collapse {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 9px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cg-admin-body .cg-sidebar-collapse:hover {
    background: var(--bg);
    color: var(--primary);
    border-color: var(--primary);
}
.cg-admin-body .cg-sidebar-collapse-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease;
}
.cg-admin-body .cg-sidebar-collapse-icon svg { width: 100%; height: 100%; }

/* ---------- Collapsed state (toggled on <html>) ---------- */
.cg-sidebar-collapsed .cg-admin-body .cg-admin-shell { grid-template-columns: 72px 1fr; }
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar { padding: 18px 8px; }
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-brand {
    justify-content: center;
    padding: 4px 0 16px;
}
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-brand-text { display: none; }
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-group     { display: none; }
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-divider   { margin: 8px 4px; }
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-link {
    justify-content: center;
    padding: 10px 0;
}
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-link-label,
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-collapse .cg-sidebar-link-label {
    display: none;
}
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-collapse {
    justify-content: center;
    padding: 10px 0;
}
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-collapse-icon { transform: rotate(180deg); }

/* Hover tooltip when collapsed — shows the label as a floating chip. */
.cg-sidebar-collapsed .cg-admin-body .cg-sidebar-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(8px, -50%);
    background: var(--text);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 6px 14px rgba(15, 30, 50, 0.18);
}

/* ---------- Admin sub-tab strip ----------
 * Rendered by render_admin_subnav() at the top of any page that lives
 * inside an Operations / Catalog / Finance container. Pill row, brand
 * underline on the active tab. */
.cg-admin-subnav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1.5px solid var(--cg-border);
    margin: 0 0 18px;
    padding: 0;
}
.cg-admin-subnav-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cg-muted);
    text-decoration: none;
    letter-spacing: 0.3px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1.5px;
    transition: color 0.14s ease, border-color 0.14s ease;
}
.cg-admin-subnav-tab:hover { color: var(--cg-navy); }
.cg-admin-subnav-tab.active {
    color: var(--cg-navy);
    border-bottom-color: var(--cg-navy);
}
.cg-admin-body .cg-sidebar-foot {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.cg-admin-body .cg-sidebar-foot .cg-btn {
    font-size: 12px;
    padding: 8px 12px;
    min-height: 0;
}

/* Topbar */
.cg-admin-body .cg-admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 12px 22px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.cg-admin-body .cg-admin-topbar-brand { display: flex; align-items: center; gap: 12px; }
.cg-admin-body .cg-admin-brand-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(19, 74, 97, 0.18);
}
.cg-admin-body .cg-admin-brand-icon svg { width: 17px; height: 17px; }
.cg-admin-body .cg-admin-topbar-text { display: flex; flex-direction: column; line-height: 1.1; }
.cg-admin-body .cg-admin-title {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
    margin: 0;
    text-transform: none;
}
.cg-admin-body .cg-admin-crumb {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 600;
    margin-top: 2px;
}
.cg-admin-body .cg-admin-topbar .cg-tbtn {
    min-height: 32px; padding: 6px 12px; font-size: 12px; border-radius: var(--radius-sm);
}
.cg-admin-body .cg-admin-topbar .cg-icon-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.cg-admin-body .cg-admin-topbar .cg-icon-btn svg { width: 16px; height: 16px; }
.cg-admin-body .cg-admin-topbar .cg-user-avatar-btn { width: 32px; height: 32px; border-width: 1px; }
.cg-admin-body .cg-admin-topbar .cg-user-avatar-btn .cg-user-avatar svg { width: 16px; height: 16px; }
.cg-admin-body .cg-admin-topbar .cg-topbar-divider { height: 18px; }

/* Content area + foot */
.cg-admin-body .cg-admin-content { padding: 22px 22px 12px; }
.cg-admin-body .cg-admin-foot {
    background: transparent;
    border-top: 1px solid var(--border);
    padding: 12px 22px;
    color: var(--muted);
    font-size: 11px;
}

/* Panels (cards) — kill the candy ribbon and use soft shadow chrome */
.cg-admin-body .cg-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(22,32,43,0.04), 0 6px 18px rgba(22,32,43,0.05);
    overflow: hidden;
    margin-bottom: 16px;
}
.cg-admin-body .cg-panel .cg-airmail-top {
    height: 5px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    border-radius: 0;
}
.cg-admin-body .cg-barber-stripe,
.cg-admin-body .cg-barber-stripe-thin {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    border-radius: 0;
    height: 4px;
}
.cg-admin-body .cg-panel-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}
.cg-admin-body .cg-panel-title {
    font-family: inherit;
    text-transform: none;
    letter-spacing: -0.2px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.cg-admin-body .cg-panel-body { padding: 16px 20px; }

/* Buttons */
.cg-admin-body .cg-btn,
.cg-admin-body .cg-btn-primary,
.cg-admin-body .cg-btn-ghost,
.cg-admin-body .cg-btn-danger {
    font-family: inherit;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    min-height: 36px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.05s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cg-admin-body .cg-btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.cg-admin-body .cg-btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); transform: translateY(-1px); }
.cg-admin-body .cg-btn-ghost {
    background: #fff;
    color: var(--text);
    border-color: var(--border);
}
.cg-admin-body .cg-btn-ghost:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }
.cg-admin-body .cg-btn-danger {
    background: #dc2626; color: #fff; border-color: #dc2626;
}
.cg-admin-body .cg-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Form inputs */
.cg-admin-body .cg-input,
.cg-admin-body input[type="text"]:not(.cg-input),
.cg-admin-body input[type="email"]:not(.cg-input),
.cg-admin-body input[type="number"]:not(.cg-input),
.cg-admin-body input[type="date"]:not(.cg-input),
.cg-admin-body input[type="month"]:not(.cg-input),
.cg-admin-body input[type="search"]:not(.cg-input),
.cg-admin-body input[type="password"]:not(.cg-input),
.cg-admin-body textarea:not(.cg-input),
.cg-admin-body select:not(.cg-input) {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.cg-admin-body .cg-input:focus,
.cg-admin-body input:not(.cg-input):focus,
.cg-admin-body textarea:not(.cg-input):focus,
.cg-admin-body select:not(.cg-input):focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29, 107, 140, 0.12);
}
.cg-admin-body .cg-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 600;
    margin: 12px 0 5px;
}

/* Tables — clean lines, modern header */
.cg-admin-body .cg-ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cg-admin-body .cg-ledger-table th,
.cg-admin-body .cg-ledger-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #f0f3f6;
}
.cg-admin-body .cg-ledger-table thead th {
    background: #fafbfd;
    border-bottom: 1px solid var(--border);
    border-top: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 700;
    text-align: left;
}
.cg-admin-body .cg-ledger-table tbody tr:hover { background: #fafbfd; }
.cg-admin-body .cg-ledger-table tfoot td,
.cg-admin-body .cg-ledger-table tfoot th {
    background: #fafbfd;
    font-weight: 700;
    border-top: 1px solid var(--border);
}

/* Flash banners */
.cg-admin-body .cg-flash {
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
    border: 1px solid transparent;
}
.cg-admin-body .cg-flash-ok  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.cg-admin-body .cg-flash-err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* KPI cards — used on the dashboard */
.cg-admin-body .cg-kpi-card,
.cg-admin-body .cg-kpi {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(22,32,43,0.04);
    padding: 14px 16px;
}
.cg-admin-body .cg-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.cg-admin-body .cg-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Category badges - softer modern pills */
.cg-admin-body .cg-category-badge {
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--bg);
    color: var(--muted);
    display: inline-block;
}
.cg-admin-body .cg-category-badge.utilities { background: #ecfdf5; color: #065f46; }
.cg-admin-body .cg-category-badge.rent      { background: #fef2f2; color: #991b1b; }
.cg-admin-body .cg-category-badge.other     { background: #eff6ff; color: #1e4a72; }
.cg-admin-body .cg-category-badge.maintenance { background: #fff8eb; color: #92590f; }

/* Admin login (PIN pad) — already restyled separately; keep the
 * teal ribbon consistent if any other page uses cg-airmail-top
 * outside an admin body. */
.cg-airmail-top {
    /* Override the legacy red/navy candy bar everywhere. */
    height: 5px;
    background: linear-gradient(135deg, #1d6b8c 0%, #134a61 100%);
    border-radius: 0;
}


/* ============================================================
 * REPORTS — shared building blocks per REPORTS.md
 * Toolbar, period segment, hero summary card, mix bar,
 * trend cell, empty state. Tokens come from BRANDING.md.
 * ============================================================ */

/* ---- Page-head description (just below chrome title) ---- */
.cg-rpt-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--cg-muted);
    line-height: 1.4;
}

/* ---- Toolbar: filters left, exports right ---- */
.cg-rpt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0 16px;
    flex-wrap: wrap;
}
.cg-rpt-toolbar-left  {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.cg-rpt-toolbar-right {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.cg-rpt-overline {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    color: var(--cg-muted);
}

/* ---- Period segmented control ---- */
.cg-rpt-segment {
    display: inline-flex;
    align-items: stretch;
    background: #dde1e4;       /* darker than --fill-2 so the pill reads as a real container */
    border-radius: 9px;
    padding: 3px;
    gap: 0;
    height: 36px;
    box-sizing: border-box;
}
.cg-rpt-seg-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12px; font-weight: 600;
    color: var(--cg-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}
.cg-rpt-seg-btn:hover { color: var(--brand); }
.cg-rpt-seg-btn.is-active {
    background: var(--card, #fff);
    color: var(--brand);
    box-shadow: 0 1px 2px rgba(20,30,45,0.08);
}

/* ---- Range label (when a preset is active) ---- */
.cg-rpt-range-label {
    font-size: 12.5px;
    color: var(--ink-soft, #3d4853);
    font-family: ui-monospace, Menlo, Monaco, monospace;
    padding-left: 6px;
}

/* ---- Inline custom date inputs ---- */
.cg-rpt-custom-form {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.cg-rpt-toolbar.is-custom .cg-rpt-range-label { display: none; }
.cg-rpt-toolbar.is-custom .cg-rpt-custom-form { display: inline-flex; }
.cg-rpt-date-input {
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--line, #e3e7ea);
    border-radius: 10px;
    background: var(--card, #fff);
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
}
.cg-rpt-date-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29,107,140,0.12);
}
.cg-rpt-date-sep { font-size: 12px; color: var(--cg-muted); }
.cg-rpt-apply-btn {
    height: 36px;
    box-sizing: border-box;
    padding: 0 16px;
    border: 0;
    background: var(--brand, #1d6b8c);
    color: #fff;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.cg-rpt-apply-btn:hover { background: var(--brand-deep, #155570); }

/* ---- Year selector (used by Monthly Sales) ---- */
.cg-rpt-year-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    height: 36px;
    box-sizing: border-box;
    padding: 0 30px 0 12px;
    border: 1px solid var(--line, #e3e7ea);
    border-radius: 10px;
    background: var(--card, #fff)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7680' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 13px; font-weight: 600;
    color: var(--ink, #1a2530);
    cursor: pointer;
    min-width: 90px;
}
.cg-rpt-year-select:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29,107,140,0.12);
}

/* ---- Ghost export buttons (right side) ---- */
.cg-rpt-export-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line, #e3e7ea);
    background: var(--card, #fff);
    border-radius: 10px;
    color: var(--ink-soft, #3d4853);
    font-size: 12px; font-weight: 600;
    text-decoration: none;
    transition: border-color 120ms ease, color 120ms ease;
}
.cg-rpt-export-btn:hover {
    border-color: var(--line-strong, #cdd4da);
    color: var(--brand);
}
.cg-rpt-export-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- Hero summary card ---- */
.cg-rpt-hero {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr);
    gap: 22px;
    padding: 22px 24px;
    background: var(--card, #fff);
    border: 1px solid var(--line, #e3e7ea);
    border-radius: 18px;
    margin-bottom: 18px;
}
@media (max-width: 760px) {
    .cg-rpt-hero { grid-template-columns: 1fr; gap: 14px; }
}
.cg-rpt-hero-main { min-width: 0; }
.cg-rpt-hero-value {
    margin: 6px 0 4px;
    font-family: var(--cg-font-ledger);
    font-size: 40px; font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink, #1a2530);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.cg-rpt-hero-value .cg-money-symbol {
    font-size: 22px; color: var(--cg-muted); font-weight: 600;
    margin-right: 6px;
    vertical-align: top; line-height: 1.4;
}
.cg-rpt-hero-context {
    font-size: 12.5px;
    color: var(--cg-muted);
    margin-top: 4px;
    line-height: 1.5;
}

/* Stat row across the full card width — flat, NOT cards-per-stat */
.cg-rpt-hero-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 18px 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line, #e3e7ea);
}
.cg-rpt-hero-stats .cg-rpt-overline { display: block; margin-bottom: 4px; }
.cg-rpt-stat {
    font-family: var(--cg-font-ledger);
    font-size: 18px; font-weight: 700;
    color: var(--ink, #1a2530);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}
.cg-rpt-stat-sub { font-size: 11px; color: var(--cg-muted); font-weight: 500; margin-top: 2px; }

/* ---- Mix bar (lives in the right column of the hero) ----
 * Layout: bar on top, legend below as a single horizontal row.
 * Each legend item is a small inline pill: dot + 'Label · Amount
 * (pct%)' as one continuous text string. */
.cg-rpt-mix { display: flex; flex-direction: column; gap: 12px; }
.cg-rpt-mix-bar {
    display: flex; height: 14px; width: 100%;
    border-radius: 999px; overflow: hidden;
    background: var(--fill, #f3f5f6);
}
.cg-rpt-mix-seg { height: 100%; transition: width 240ms ease; }
.cg-rpt-mix-legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.cg-rpt-mix-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}
.cg-rpt-mix-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cg-rpt-mix-text {
    color: var(--ink-soft, #3d4853);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Trend cell ---- */
.cg-rpt-trend {
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: inline-flex; align-items: baseline; gap: 3px;
}
.cg-rpt-trend.up   { color: var(--green,  #2f9e6e); }
.cg-rpt-trend.down { color: var(--danger, #b1483b); }
.cg-rpt-trend.flat { color: var(--cg-muted); }
.cg-rpt-trend.none { color: var(--cg-muted); font-weight: 400; }
.cg-rpt-trend.new  {
    background: rgba(47,158,110,0.12);
    color: var(--green, #2f9e6e);
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 1px;
    font-weight: 700;
}

/* ---- Data table wrap (mobile scroll) ---- */
.cg-rpt-table-wrap { overflow-x: auto; }

/* ---- Empty state ---- */
.cg-rpt-empty {
    padding: 48px 24px;
    text-align: center;
    background: var(--card, #fff);
    border: 1px dashed var(--line, #e3e7ea);
    border-radius: 14px;
    margin-top: 8px;
}
.cg-rpt-empty h3 {
    margin: 0 0 6px;
    font-size: 14.5px; font-weight: 700;
    color: var(--ink, #1a2530);
}
.cg-rpt-empty p {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: var(--cg-muted);
}
.cg-rpt-empty-actions {
    display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.cg-rpt-empty-actions a {
    padding: 7px 14px;
    border: 1px solid var(--line, #e3e7ea);
    border-radius: 10px;
    font-size: 12px; font-weight: 600;
    color: var(--brand, #1d6b8c);
    text-decoration: none;
    background: var(--card, #fff);
}
.cg-rpt-empty-actions a:hover {
    border-color: var(--brand);
    background: var(--brand-tint, #E4F0F5);
}

/* ============================================================
 * REPORTS — page layout (block-level cards with breathing room)
 * Each report stacks: page-head card → toolbar (flat) → hero card
 * → table card. Each gets ~16px vertical spacing between them.
 * Matches the design shown in the user's reference screenshot.
 * ============================================================ */

.cg-rpt-page-head {
    background: var(--card, #fff);
    border: 1px solid var(--line, #e3e7ea);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.cg-rpt-page-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink, #1a2530);
    letter-spacing: -0.2px;
}
.cg-rpt-page-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--cg-muted);
    line-height: 1.5;
}

/* When the toolbar lives outside a panel-body wrapper, it needs
 * its own bottom margin (it had none before because cg-panel-body
 * supplied the padding around it). */
.cg-rpt-toolbar { margin-bottom: 16px; padding: 0; }

/* Hero now sits as its own block, not inside cg-panel-body. */
.cg-rpt-hero { margin-bottom: 0; }

/* Table block — same card treatment as the page head, but the
 * table fills it edge-to-edge (the table has its own padding via
 * .cg-ledger-table). */
.cg-rpt-table-card {
    margin-top: 16px;
    background: var(--card, #fff);
    border: 1px solid var(--line, #e3e7ea);
    border-radius: 14px;
    overflow: hidden;
}
.cg-rpt-table-card .cg-rpt-table-wrap { overflow-x: auto; }
.cg-rpt-table-card table { width: 100%; margin: 0; }
/* Trim the table's first/last row corners so they round with the
 * outer card rather than poking past it. */
.cg-rpt-table-card thead tr:first-child th:first-child { border-top-left-radius:  14px; }
.cg-rpt-table-card thead tr:first-child th:last-child  { border-top-right-radius: 14px; }
.cg-rpt-table-card tfoot tr:last-child  th:first-child { border-bottom-left-radius:  14px; }
.cg-rpt-table-card tfoot tr:last-child  th:last-child  { border-bottom-right-radius: 14px; }
.cg-rpt-table-card tbody tr:last-child:not(:has(+ tfoot)) td:first-child { border-bottom-left-radius: 14px; }
.cg-rpt-table-card tbody tr:last-child:not(:has(+ tfoot)) td:last-child  { border-bottom-right-radius: 14px; }

/* ---- Left-align every cell in every report table ----
 * Per user request: all report-table columns read left-aligned,
 * including the numerics. The inline 'text-align:right' on
 * individual <th>/<td>s is overridden with !important here so
 * we don't have to edit every report file. */
.cg-rpt-table-card .cg-ledger-table th,
.cg-rpt-table-card .cg-ledger-table td {
    text-align: left !important;
}

/* ---- Numeric report columns center-aligned ----
 * Original markup tagged numeric cells with inline
 * 'text-align:right'. Target those specifically to flip them to
 * center, while the identifier columns (Month / Date / Account)
 * fall back to the broad left-align rule above.
 *
 * Attribute selector outranks the plain element+class rule, so
 * this wins despite both using !important. Substring match covers
 * 'text-align:right' both with and without a space after the colon. */
.cg-rpt-table-card .cg-ledger-table th[style*="text-align:right"],
.cg-rpt-table-card .cg-ledger-table td[style*="text-align:right"],
.cg-rpt-table-card .cg-ledger-table th[style*="text-align: right"],
.cg-rpt-table-card .cg-ledger-table td[style*="text-align: right"] {
    text-align: center !important;
}