/*
 * CakeERP Design System — "The Industrial Conductor"
 * Converted from Tailwind CSS config to vanilla CSS custom properties.
 *
 * @package CBG_Commi_Frontend
 */

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */

:root {
    /* ── Primary ──────────────────────────────────── */
    --primary: #a33e00;
    --primary-container: #ff6600;
    --on-primary: #ffffff;
    --on-primary-container: #561d00;
    --on-primary-fixed: #360f00;
    --on-primary-fixed-variant: #7c2e00;
    --primary-fixed: #ffdbcd;
    --primary-fixed-dim: #ffb596;
    --inverse-primary: #ffb596;

    /* ── Secondary ────────────────────────────────── */
    --secondary: #5f5e5e;
    --secondary-anchor: #343434;
    --secondary-container: #e4e2e1;
    --on-secondary: #ffffff;
    --on-secondary-container: #656464;
    --on-secondary-fixed: #1b1c1c;
    --on-secondary-fixed-variant: #474747;
    --secondary-fixed: #e4e2e1;
    --secondary-fixed-dim: #c8c6c6;

    /* ── Tertiary ─────────────────────────────────── */
    --tertiary: #0062a1;
    --tertiary-container: #009cfc;
    --on-tertiary: #ffffff;
    --on-tertiary-container: #003155;
    --on-tertiary-fixed: #001d35;
    --on-tertiary-fixed-variant: #00497b;
    --tertiary-fixed: #d0e4ff;
    --tertiary-fixed-dim: #9ccaff;

    /* ── Error ────────────────────────────────────── */
    --error: #ba1a1a;
    --error-container: #ffdad6;
    --on-error: #ffffff;
    --on-error-container: #93000a;

    /* ── Success ──────────────────────────────────── */
    --success: #16a34a;
    --success-container: #dcfce7;
    --on-success: #ffffff;
    --on-success-container: #14532d;

    /* ── Surface / Neutrals ───────────────────────── */
    --surface: #f9f9fb;
    --surface-dim: #d9dadc;
    --surface-bright: #f9f9fb;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f3f5;
    --surface-container: #eeeef0;
    --surface-container-high: #e8e8ea;
    --surface-container-highest: #e2e2e4;
    --surface-variant: #e2e2e4;
    --surface-tint: #a33e00;
    --background: #f9f9fb;

    /* ── On Surface ───────────────────────────────── */
    --on-surface: #1a1c1d;
    --on-surface-variant: #5a4136;
    --on-background: #1a1c1d;
    --inverse-surface: #2f3132;
    --inverse-on-surface: #f0f0f2;

    /* ── Outline ──────────────────────────────────── */
    --outline: #8e7164;
    --outline-variant: #e3bfb1;

    /* ── Border Radius ────────────────────────────── */
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;

    /* ── Sidebar ──────────────────────────────────── */
    --sidebar-width: 16rem;
    /* 256px */
    --header-height: 4rem;
    /* 64px */
}


/* =========================================================================
   2. RESET & BASE
   ========================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

input,
select,
textarea {
    font-family: inherit;
}


/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */

.font-headline {
    font-family: 'Montserrat', 'Arial', sans-serif;
}

.font-body {
    font-family: 'Inter', 'Arial', sans-serif;
}

.font-label {
    font-family: 'Inter', 'Arial', sans-serif;
}

/* Wide tracking for industrial aesthetic */
.tracking-wide {
    letter-spacing: 0.04em;
}

.tracking-wider {
    letter-spacing: 0.1em;
}

.tracking-widest {
    letter-spacing: 0.2em;
}

.tracking-tight {
    letter-spacing: -0.02em;
}

.tracking-tighter {
    letter-spacing: -0.04em;
}



/* =========================================================================
   5. COMPONENTS
   ========================================================================= */

/* ── Page title bar ───────────────────────────────── */

.cbg-fe-page-title {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.cbg-fe-page-title h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--on-surface);
}

.cbg-fe-page-title p {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #737373;
    margin-top: 0.25rem;
}


/* ── KPI / Summary Cards ─────────────────────────── */

.cbg-fe-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cbg-fe-kpi-card {
    background: var(--surface-container-lowest);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-xl);
    border-top: 2px solid var(--surface-container-highest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.cbg-fe-kpi-card--primary {
    border-top-color: var(--primary-container);
}

.cbg-fe-kpi-card--error {
    border-top-color: var(--error);
}

.cbg-fe-kpi-card--tertiary {
    border-top-color: var(--tertiary);
}

.cbg-fe-kpi-card--secondary {
    border-top-color: var(--secondary-anchor);
}

.cbg-fe-kpi-card__label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #a3a3a3;
    margin-bottom: 0.25rem;
}

.cbg-fe-kpi-card__value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--on-surface);
}

.cbg-fe-kpi-card__value--error {
    color: var(--error);
}

.cbg-fe-kpi-card__trend {
    margin-top: 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cbg-fe-kpi-card__trend .material-symbols-outlined {
    font-size: 0.875rem;
}


/* ── Breadcrumbs ──────────────────────────────────── */

.cbg-fe-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.cbg-fe-breadcrumb a {
    color: var(--secondary);
    transition: color 0.15s;
}

.cbg-fe-breadcrumb a:hover {
    color: var(--on-surface);
}

.cbg-fe-breadcrumb--active {
    color: var(--primary-container);
}

/* ── Summary Cards (new style used by sub-pages) ── */

.cbg-fe-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cbg-fe-summary-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.cbg-fe-summary-card {
    background: var(--surface-container-lowest);
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    border-top: 3px solid var(--surface-container-highest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.cbg-fe-summary-card--orange {
    border-top-color: var(--primary-container);
}

.cbg-fe-summary-card--red {
    border-top-color: var(--error);
}

.cbg-fe-summary-card--blue {
    border-top-color: var(--tertiary);
}

.cbg-fe-summary-card--green {
    border-top-color: #16a34a;
}

.cbg-fe-summary-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.cbg-fe-summary-card__label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a3a3a3;
}

.cbg-fe-summary-card__icon {
    font-size: 1.25rem;
}

.cbg-fe-summary-card__value {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--on-surface);
    line-height: 1.1;
}

.cbg-fe-summary-card__trend {
    margin-top: 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cbg-fe-summary-card__trend--up {
    color: #16a34a;
}

.cbg-fe-summary-card__trend--down {
    color: var(--error);
}

.cbg-fe-summary-card__meta {
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--secondary);
}

/* ── Status Badges ────────────────────────────────── */

.cbg-fe-status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--radius-sm, 0.125rem);
    background: #f0f0f0;
    color: #525252;
}

.cbg-fe-status-badge--completed {
    background: rgba(22, 163, 106, 0.1);
    color: #16a34a;
}

.cbg-fe-status-badge--processing {
    background: rgba(0, 98, 161, 0.08);
    color: #0062a1;
}

.cbg-fe-status-badge--pending {
    background: rgba(234, 88, 12, 0.08);
    color: #ea580c;
}

.cbg-fe-status-badge--draft {
    background: #f0f0f0;
    color: #737373;
}

/* ── Trip Ticket status badge variants ─────────── */
.cbg-fe-status-badge--dispatched {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.cbg-fe-status-badge--delivered {
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
}

.cbg-fe-status-badge--returned {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}



.cbg-fe-filter-bar {
    background: var(--surface-container-low);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 1rem;
}

.cbg-fe-filter-bar__inner {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.cbg-fe-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
}

.cbg-fe-search-box .material-symbols-outlined {
    font-size: 1.125rem;
    color: var(--secondary);
}

.cbg-fe-search-box input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 0.8125rem;
    color: var(--on-surface);
}

.cbg-fe-filter-select {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--surface);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.625rem;
}

.cbg-fe-filter-select select {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8125rem;
    color: var(--on-surface);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 0.5rem;
}

/* ── Table Enhancements ───────────────────────────── */

.cbg-fe-table__row--clickable {
    cursor: pointer;
    transition: background 0.15s;
}

.cbg-fe-table__row--clickable:hover {
    background: var(--surface-container-low);
}

.cbg-fe-table__row--bordered {
    border-left: 3px solid transparent;
}

.cbg-fe-table__row--bordered:nth-child(1) {
    border-left-color: var(--primary-container);
}

.cbg-fe-table__row--bordered:nth-child(3) {
    border-left-color: #16a34a;
}

.cbg-fe-order-id {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--on-surface);
}

/* ── Table Footer ─────────────────────────────────── */

.cbg-fe-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.75rem;
    color: var(--secondary);
}

.cbg-fe-table-footer__meta {
    display: flex;
    align-items: center;
}

/* ── Avatar ───────────────────────────────────────── */

.cbg-fe-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--surface-container-high);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--secondary);
    flex-shrink: 0;
}

.cbg-fe-avatar--sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.5rem;
}

/* ── Floating Action Button ───────────────────────── */

.cbg-fe-fab {
    position: fixed;
    bottom: 2rem;
    z-index: 50;
}

/* ── Stock Request: Top Products ──────────────────── */

.cbg-fe-sr-top-product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.cbg-fe-sr-top-product:last-child {
    border-bottom: none;
}

.cbg-fe-sr-top-product strong {
    font-weight: 800;
}

/* ── Filter Strip ─────────────────────────────────── */

.cbg-fe-filter-strip {
    background: var(--surface-container-low);
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
}

.cbg-fe-filter-strip__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    align-items: end;
}

.cbg-fe-filter-strip label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #737373;
    margin-bottom: 0.375rem;
    padding-left: 0.125rem;
}

.cbg-fe-filter-strip input,
.cbg-fe-filter-strip select {
    width: 100%;
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--on-surface);
    outline: none;
    transition: all 0.15s ease;
}

.cbg-fe-filter-strip input:focus,
.cbg-fe-filter-strip select:focus {
    box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.3);
    border-color: var(--primary-container);
}


/* ── Buttons ──────────────────────────────────────── */

.cbg-fe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
    letter-spacing: 0.02em;
}

.cbg-fe-btn--primary {
    background: var(--primary-container);
    color: var(--on-primary);
}

.cbg-fe-btn--primary:hover {
    background: var(--primary);
}

.cbg-fe-btn--success {
    background: var(--success);
    color: var(--on-success);
}

.cbg-fe-btn--success:hover {
    background: #15803d;
}

.cbg-fe-btn--disabled,
.cbg-fe-btn--disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.cbg-fe-btn--secondary {
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    border: 1px solid var(--surface-container-highest);
}

.cbg-fe-btn--secondary:hover {
    background: var(--surface-container-high);
}

.cbg-fe-btn--sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cbg-fe-btn .material-symbols-outlined {
    font-size: 1.125rem;
}

.cbg-rc-confirm-item-btn.cbg-fe-btn {
    border: 2px solid #ff6600;
    color: #ff6600;
    text-transform: uppercase;
}


/* ── Data Table ───────────────────────────────────── */

.cbg-fe-table-wrap {
    background: var(--surface-container-low);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border-top: 2px solid var(--primary-container);
}

.cbg-fe-table-header {
    display: grid;
    padding: 0.75rem 1.5rem;
    background: var(--surface-container-highest);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #525252;
}

.cbg-fe-table-body {
    padding: 0.5rem;
}

.cbg-fe-table-row {
    display: grid;
    align-items: center;
    padding: 1rem;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    margin-bottom: 0.5rem;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.cbg-fe-table-row:hover {
    background: #fff;
    border-color: var(--surface-container-high);
}

.cbg-fe-table-row:last-child {
    margin-bottom: 0;
}


/* ── Status Badges ────────────────────────────────── */

.cbg-fe-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cbg-fe-badge__dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.cbg-fe-badge--pending {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.cbg-fe-badge--pending .cbg-fe-badge__dot {
    background: #ea580c;
}

.cbg-fe-badge--processing {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.cbg-fe-badge--processing .cbg-fe-badge__dot {
    background: #2563eb;
}

.cbg-fe-badge--complete {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.cbg-fe-badge--complete .cbg-fe-badge__dot {
    background: #16a34a;
}

.cbg-fe-badge--cancelled {
    background: #fef2f2;
    color: var(--error);
    border: 1px solid #fecaca;
}

.cbg-fe-badge--cancelled .cbg-fe-badge__dot {
    background: var(--error);
}

.cbg-fe-badge--completed {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.cbg-fe-badge--completed .cbg-fe-badge__dot {
    background: #16a34a;
}

.cbg-fe-badge--on-hold {
    background: #f4f4f5;
    color: #52525b;
    border: 1px solid #e4e4e7;
}

.cbg-fe-badge--on-hold .cbg-fe-badge__dot {
    background: #a3a3a3;
}

.cbg-fe-badge--refunded {
    background: #f4f4f5;
    color: #71717a;
    border: 1px solid #e4e4e7;
}

.cbg-fe-badge--refunded .cbg-fe-badge__dot {
    background: #71717a;
}

.cbg-fe-badge--failed {
    background: #fef2f2;
    color: var(--error);
    border: 1px solid #fecaca;
}

.cbg-fe-badge--failed .cbg-fe-badge__dot {
    background: var(--error);
}

.cbg-fe-badge--ready {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.cbg-fe-badge--ready .cbg-fe-badge__dot {
    background: #047857;
}

/* At Pickup Location — orange, store icon */
.cbg-fe-badge--at-location {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.cbg-fe-badge--at-location .cbg-fe-badge__dot {
    background: #f97316;
}

/* In Transit — purple */
.cbg-fe-badge--in-transit {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.cbg-fe-badge--in-transit .cbg-fe-badge__dot {
    background: #8b5cf6;
}

/* ── Type Tags (small inline labels) ──────────────── */

.cbg-fe-type-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 2px;
    background: var(--surface-container-high);
    color: #525252;
}

.cbg-fe-type-tag--wholesale {
    background: rgba(255, 102, 0, 0.08);
    color: var(--primary-container);
}

.cbg-fe-type-tag--transfer {
    background: rgba(0, 98, 161, 0.08);
    color: var(--tertiary);
}

.cbg-fe-type-tag--link {
    background: rgba(0, 98, 161, 0.10);
    color: var(--tertiary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.cbg-fe-tt-chip-link:hover .cbg-fe-type-tag--link,
.cbg-fe-tt-chip-link:focus .cbg-fe-type-tag--link {
    background: var(--tertiary);
    color: #fff;
}


/* ── Sort Links (table headers) ──────────────────── */

.cbg-fe-sort-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.cbg-fe-sort-link:hover {
    color: var(--primary-container);
}


/* ── Ghost Button ─────────────────────────────────── */

.cbg-fe-btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: #737373;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.cbg-fe-btn--ghost:hover {
    background: var(--surface-container-high);
    color: var(--primary-container);
}

.cbg-fe-btn--icon {
    padding: 0.375rem !important;
    min-width: unset !important;
}

.cbg-fe-btn--lg {
    padding: 0.875rem 1.5rem;
    font-size: 0.8125rem;
}

/* ── Checkbox row fixes ──────────────────────────── */

.cbg-fe-checkbox-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--surface-container-high);
}

.cbg-fe-checkbox-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #525252;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.02em;
    margin: 0;
    padding: 0;
}

.cbg-fe-checkbox-row input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--primary-container);
    cursor: pointer;
}


/* ── Pagination ───────────────────────────────────── */

.cbg-fe-pagination {
    padding: 0.75rem 1.5rem;
    background: var(--surface-container-lowest);
    border-top: 1px solid var(--surface-container-high);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cbg-fe-pagination__info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.cbg-fe-pagination__stat-label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #a3a3a3;
}

.cbg-fe-pagination__stat-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--on-surface);
}

.cbg-fe-pagination__pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cbg-fe-pagination__page-btn,
a.cbg-fe-pagination__page-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #525252;
    transition: all 0.15s ease;
    text-decoration: none;
}

.cbg-fe-pagination__page-btn:hover,
a.cbg-fe-pagination__page-btn:hover {
    background: var(--surface-container-high);
}

.cbg-fe-pagination__page-btn--active {
    background: var(--primary-container);
    color: #fff;
    pointer-events: none;
}


/* ── View Toggle ──────────────────────────────────── */

.cbg-fe-view-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
}

.cbg-fe-view-toggle__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #737373;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.cbg-fe-view-toggle__btn:hover {
    color: var(--on-surface);
}

.cbg-fe-view-toggle__btn--active {
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cbg-fe-view-toggle__btn .material-symbols-outlined {
    font-size: 1.125rem;
}


/* ── FAB (Floating Action Button) ─────────────────── */

.cbg-fe-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--primary-container);
    color: #fff;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(255, 102, 0, 0.35);
    transition: all 0.3s ease;
    z-index: 50;
}

.cbg-fe-fab:hover {
    opacity: 0.9;
    transform: rotate(90deg);
}

.cbg-fe-fab .material-symbols-outlined {
    font-size: 1.5rem;
    font-variation-settings: 'wght' 600;
}

.cbg-fe-fab__tooltip {
    position: absolute;
    right: 4rem;
    background: var(--inverse-surface);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.cbg-fe-fab:hover .cbg-fe-fab__tooltip {
    opacity: 1;
}


/* ── Placeholder Page ─────────────────────────────── */

.cbg-fe-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.cbg-fe-placeholder__icon {
    font-size: 4rem;
    color: var(--surface-container-highest);
    margin-bottom: 1.5rem;
}

.cbg-fe-placeholder__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--on-surface);
    margin-bottom: 0.5rem;
}

.cbg-fe-placeholder__subtitle {
    font-size: 0.875rem;
    color: #a3a3a3;
    max-width: 400px;
    line-height: 1.6;
}

.cbg-fe-placeholder__badge {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #737373;
}


/* ── Calendar Grid ────────────────────────────────── */

.cbg-fe-calendar {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--surface-container-high);
}

.cbg-fe-calendar__header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--surface-container-highest);
    border-bottom: 1px solid var(--surface-container-high);
}

.cbg-fe-calendar__header div {
    padding: 1rem;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #737373;
}

.cbg-fe-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.cbg-fe-calendar__day {
    min-height: 140px;
    padding: 0.75rem;
    background: var(--surface-container-lowest);
    border-right: 1px solid var(--surface-container);
    border-bottom: 1px solid var(--surface-container);
    transition: background-color 0.15s ease;
}

.cbg-fe-calendar__day:nth-child(7n) {
    border-right: none;
}

.cbg-fe-calendar__day:hover {
    background: rgba(255, 102, 0, 0.01);
}

.cbg-fe-calendar__day--outside {
    background: var(--surface-container-low);
    opacity: 0.4;
}

.cbg-fe-calendar__day--today {
    outline: 2px solid var(--primary-container);
    outline-offset: -2px;
}

.cbg-fe-calendar__day-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--on-surface);
    margin-bottom: 0.5rem;
}

.cbg-fe-calendar__day--today .cbg-fe-calendar__day-number {
    color: var(--primary-container);
    background: rgba(255, 102, 0, 0.08);
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
}

.cbg-fe-calendar__event {
    padding: 0.25rem 0.375rem;
    border-radius: 2px;
    border-left: 2px solid var(--tertiary);
    background: rgba(0, 98, 161, 0.06);
    margin-bottom: 0.25rem;
}

.cbg-fe-calendar__event--primary {
    border-left-color: var(--primary-container);
    background: rgba(255, 102, 0, 0.06);
}

.cbg-fe-calendar__event--primary-solid {
    border-left-color: var(--primary-container);
    background: var(--primary-container);
    color: #fff;
}

.cbg-fe-calendar__event--error {
    border-left-color: var(--error);
    background: rgba(186, 26, 26, 0.06);
}

.cbg-fe-calendar__event--neutral {
    border-left-color: #a3a3a3;
    background: var(--surface-container-high);
}

.cbg-fe-calendar__event-id {
    font-size: 0.5625rem;
    font-weight: 900;
}

.cbg-fe-calendar__event-name {
    font-size: 0.5rem;
    font-weight: 500;
}

.cbg-fe-calendar__more {
    font-size: 0.5rem;
    font-weight: 700;
    text-align: center;
    color: #a3a3a3;
    padding-top: 0.125rem;
}


/* ── Calendar Footer Legend ───────────────────────── */

.cbg-fe-calendar-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--surface-container-high);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cbg-fe-legend {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.cbg-fe-legend__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #737373;
}

.cbg-fe-legend__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}


/* ── Scrollbar ────────────────────────────────────── */

.cbg-fe-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.cbg-fe-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.cbg-fe-scrollbar::-webkit-scrollbar-thumb {
    background: var(--surface-container-highest);
    border-radius: 10px;
}


/* ── Material Symbols ─────────────────────────────── */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
}


/* ── Checkbox Filters ─────────────────────────────── */

.cbg-fe-checkbox-row {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.cbg-fe-checkbox-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #525252;
    cursor: pointer;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
}

.cbg-fe-checkbox-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-container);
    cursor: pointer;
}


/* ── Divider ──────────────────────────────────────── */

.cbg-fe-divider {
    width: 1px;
    height: 1.5rem;
    background: var(--surface-container-high);
}


/* ── Utility: hidden views ────────────────────────── */

.cbg-fe-view {
    display: none;
}

.cbg-fe-view--active {
    display: block;
}


/* ── Spinner animation ───────────────────────────── */

@keyframes cbg-fe-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.cbg-fe-spin {
    animation: cbg-fe-spin 1s linear infinite;
}


/* ── Calendar Cells (Phase 2 — JS-rendered) ──────── */

.cbg-fe-calendar__cell {
    min-height: 130px;
    padding: 0.5rem;
    background: var(--surface-container-lowest);
    border-right: 1px solid var(--surface-container);
    border-bottom: 1px solid var(--surface-container);
    transition: background-color 0.15s ease;
}

.cbg-fe-calendar__cell:nth-child(7n) {
    border-right: none;
}

.cbg-fe-calendar__cell:hover {
    background: rgba(255, 102, 0, 0.015);
}

.cbg-fe-calendar__cell--empty {
    background: var(--surface-container-low);
    min-height: 60px;
}

.cbg-fe-calendar__cell--today {
    outline: 2px solid var(--primary-container);
    outline-offset: -2px;
}

.cbg-fe-calendar__cell--has-orders {
    background: rgba(255, 102, 0, 0.02);
}

.cbg-fe-calendar__day-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--on-surface);
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cbg-fe-calendar__cell--today .cbg-fe-calendar__day-num {
    color: var(--primary-container);
}

.cbg-fe-calendar__day-badge {
    background: var(--primary-container);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 800;
    padding: 0.0625rem 0.3125rem;
    border-radius: 99px;
    line-height: 1.4;
}

.cbg-fe-calendar__chips {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.cbg-fe-calendar__chip {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.375rem;
    border-radius: 2px;
    background: var(--surface-container-high);
    text-decoration: none;
    color: inherit;
    transition: all 0.1s ease;
}

.cbg-fe-calendar__chip:hover {
    background: var(--surface-container-highest);
}

.cbg-fe-calendar__chip--pickup {
    border-left: 2px solid var(--tertiary);
}

.cbg-fe-calendar__chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cbg-fe-calendar__chip-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cbg-fe-calendar__chip-type {
    font-size: 0.4375rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-container);
    background: rgba(255, 102, 0, 0.08);
    padding: 0 0.1875rem;
    border-radius: 1px;
    flex-shrink: 0;
}

.cbg-fe-calendar__chip-paid {
    font-size: 0.4375rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: #16a34a;
    padding: 0.0625rem 0.25rem;
    border-radius: 2px;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1.2;
}

.cbg-fe-calendar__more {
    font-size: 0.5rem;
    font-weight: 700;
    color: #a3a3a3;
    text-align: center;
    padding: 0.125rem 0;
}

/* =========================================================================
   CALENDAR — Mode Strip, Rich Cards, Weekly Grid, Today List
   ========================================================================= */

/* ── Drag & Drop visual feedback ────────────────── */
.cbg-fe-calendar__chip[draggable="true"],
.cbg-fe-cal-card[draggable="true"] {
    cursor: grab;
}

.cbg-fe-calendar__chip[draggable="true"]:active,
.cbg-fe-cal-card[draggable="true"]:active {
    cursor: grabbing;
}

.cbg-fe-dragging {
    opacity: 0.4 !important;
}

.cbg-fe-drop-over {
    background: rgba(37, 99, 235, 0.06) !important;
    outline: 2px dashed rgba(37, 99, 235, 0.4);
    outline-offset: -2px;
    border-radius: 8px;
    transition: background 0.15s, outline 0.15s;
}

/* ── Mode Selector Strip ────────────────────────── */
.cbg-fe-cal-mode-strip {
    display: flex;
    gap: 0.25rem;
    background: var(--surface-container-low, #f3f3f5);
    padding: 0.25rem;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.cbg-fe-cal-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: #71717a;
    cursor: pointer;
    transition: all 0.15s;
}

.cbg-fe-cal-mode-btn .material-symbols-outlined {
    font-size: 1rem;
}

.cbg-fe-cal-mode-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--on-surface);
}

.cbg-fe-cal-mode-btn--active {
    background: #fff;
    color: var(--primary-container);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Rich Order Card ────────────────────────────── */
.cbg-fe-cal-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.75rem;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.cbg-fe-cal-week-body .cbg-fe-cal-card {
    zoom: 0.75;
}

.cbg-fe-cal-card:hover {
    border-color: var(--primary-container);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.cbg-fe-cal-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    flex-wrap: wrap;
}

.cbg-fe-cal-card__id {
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: var(--on-surface);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cbg-fe-cal-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.cbg-fe-cal-card__badge {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
    border: 1px solid;
}

.cbg-fe-cal-card__badge--pending {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.cbg-fe-cal-card__badge--processing {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.cbg-fe-cal-card__badge--completed {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.cbg-fe-cal-card__badge--on-hold {
    background: #f4f4f5;
    color: #52525b;
    border-color: #e4e4e7;
}

.cbg-fe-cal-card__badge--cancelled {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.cbg-fe-cal-card__badge--refunded {
    background: #f4f4f5;
    color: #71717a;
    border-color: #e4e4e7;
}

.cbg-fe-cal-card__badge--failed {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.cbg-fe-cal-card__type {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a1a1aa;
    margin-left: auto;
}

.cbg-fe-cal-card__customer {
    font-weight: 700;
    color: var(--on-surface);
    font-size: 0.8125rem;
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbg-fe-cal-card__added-by {
    font-size: 0.5625rem;
    color: #a1a1aa;
    font-style: italic;
    margin-bottom: 0.375rem;
}

.cbg-fe-cal-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.6875rem;
    color: #71717a;
    margin-bottom: 0.375rem;
}

.cbg-fe-cal-card__meta .material-symbols-outlined {
    font-size: 0.875rem;
    vertical-align: -2px;
}

.cbg-fe-cal-card__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px solid #f4f4f5;
    padding-top: 0.375rem;
    margin-top: 0.125rem;
}

.cbg-fe-cal-card__total {
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: var(--on-surface);
}

.cbg-fe-cal-card__balance {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--error, #ba1a1a);
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.cbg-fe-cal-card__balance--paid {
    color: #16a34a;
}

.cbg-fe-cal-card__tt {
    font-size: 0.5625rem;
    font-weight: 700;
    color: #a1a1aa;
    margin-left: auto;
}

/* ── Weekly Grid ────────────────────────────────── */
.cbg-fe-cal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    min-height: 400px;
}

.cbg-fe-cal-week-col {
    background: var(--surface-container-lowest, #fff);
    border-radius: 0.5rem;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cbg-fe-cal-week-col--today {
    border-color: var(--primary-container);
    box-shadow: 0 0 0 1px var(--primary-container);
}

.cbg-fe-cal-week-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.cbg-fe-cal-week-col--today .cbg-fe-cal-week-header {
    background: rgba(255, 102, 0, 0.06);
}

.cbg-fe-cal-week-header__day {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #71717a;
}

.cbg-fe-cal-week-header__date {
    font-size: 0.875rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    color: var(--on-surface);
}

.cbg-fe-cal-week-col--today .cbg-fe-cal-week-header__date {
    color: var(--primary-container);
}

.cbg-fe-cal-week-header__count {
    font-size: 0.5rem;
    font-weight: 800;
    background: var(--primary-container);
    color: #fff;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    margin-left: auto;
}

.cbg-fe-cal-week-body {
    flex: 1;
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    overflow-y: auto;
    max-height: 600px;
}

.cbg-fe-cal-week-empty {
    text-align: center;
    padding: 1.5rem 0.5rem;
    color: #d4d4d8;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ── Today List ─────────────────────────────────── */
.cbg-fe-cal-today-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.625rem;
}

.cbg-fe-cal-today-empty {
    text-align: center;
    padding: 4rem 2rem;
}

/* ── Responsive: Weekly to horizontal scroll on mobile ── */
@media (max-width: 1024px) {
    .cbg-fe-cal-week-grid {
        grid-template-columns: repeat(7, minmax(180px, 1fr));
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .cbg-fe-cal-mode-strip {
        width: 100%;
    }

    .cbg-fe-cal-mode-btn {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.5rem;
        font-size: 0.5625rem;
    }

    .cbg-fe-cal-week-grid {
        grid-template-columns: repeat(7, 200px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cbg-fe-cal-today-list {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   STOCK REQUEST NOTIFICATION STRIP
   ========================================================================= */

.cbg-fe-sr-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    border: 1px solid #fed7aa;
    border-radius: 0.625rem;
    margin-bottom: 0.75rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cbg-fe-sr-notice:hover {
    background: linear-gradient(135deg, #ffedd5 0%, #fde68a 100%);
    border-color: #fdba74;
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.15);
    transform: translateY(-1px);
}

.cbg-fe-sr-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #f97316;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.cbg-fe-sr-notice__icon .material-symbols-outlined {
    font-size: 1.125rem;
    color: #fff;
}

.cbg-fe-sr-notice__body {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.cbg-fe-sr-notice__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    background: #f97316;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 999px;
    line-height: 1;
}

.cbg-fe-sr-notice__text {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #92400e;
    letter-spacing: -0.01em;
}

.cbg-fe-sr-notice__arrow {
    font-size: 1.25rem;
    color: #f97316;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.cbg-fe-sr-notice:hover .cbg-fe-sr-notice__arrow {
    transform: translateX(3px);
}

/* =========================================================================
   KANBAN BOARD VIEW
   ========================================================================= */

/* ── Board container — horizontally scrollable ─── */
.cbg-fe-kanban {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0.25rem 1rem;
    min-height: 500px;
    scroll-snap-type: x proximity;
}

/* ── Individual swimlane column ──────────────── */
.cbg-fe-kanban__col {
    flex: 0 0 280px;
    min-width: 260px;
    max-width: 320px;
    background: var(--surface-container-low, #f7f7f8);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
    scroll-snap-align: start;
    transition: border-color 0.2s;
}

/* Column header */
.cbg-fe-kanban__col-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
    border-radius: 0.75rem 0.75rem 0 0;
    border-top: 3px solid var(--kb-col-color, #a3a3a3);
}

.cbg-fe-kanban__col-icon {
    font-size: 1.125rem;
    color: var(--kb-col-color, #a3a3a3);
}

.cbg-fe-kanban__col-title {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface);
    flex: 1;
}

.cbg-fe-kanban__col-count {
    font-size: 0.5625rem;
    font-weight: 800;
    background: var(--kb-col-color, #a3a3a3);
    color: #fff;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    min-width: 1.25rem;
    text-align: center;
    line-height: 1.4;
}

/* Scrollable cards container */
.cbg-fe-kanban__cards {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    min-height: 200px;
}

/* Empty state */
.cbg-fe-kanban__empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #d4d4d8;
    font-size: 0.6875rem;
    font-weight: 600;
}

.cbg-fe-kanban__empty .material-symbols-outlined {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.375rem;
    opacity: 0.5;
}

/* Cards in kanban scale slightly smaller */
.cbg-fe-kanban__cards .cbg-fe-cal-card {
    zoom: 0.9;
}

/* ── Drag & Drop states ──────────────────────── */

/* Card being dragged */
.cbg-fe-kanban__cards .cbg-fe-cal-card[draggable="true"] {
    cursor: grab;
    user-select: none;
}

.cbg-fe-kanban__cards .cbg-fe-cal-card[draggable="true"]:active {
    cursor: grabbing;
}

.cbg-fe-kanban__cards .cbg-fe-cal-card.is-dragging {
    opacity: 0.35;
    transform: scale(0.96);
    box-shadow: none;
}

/* Column accepting a valid drop */
.cbg-fe-kanban__col.is-drag-over .cbg-fe-kanban__cards {
    background: rgba(37, 99, 235, 0.04);
    outline: 2px dashed rgba(37, 99, 235, 0.35);
    outline-offset: -4px;
    border-radius: 0.5rem;
    transition: all 0.15s;
}

/* Column rejecting an invalid drop */
.cbg-fe-kanban__col.is-invalid-drop .cbg-fe-kanban__cards {
    background: rgba(239, 68, 68, 0.04);
    outline: 2px dashed rgba(239, 68, 68, 0.3);
    outline-offset: -4px;
    border-radius: 0.5rem;
}

/* Drop placeholder (insertion guide) */
.cbg-fe-kanban__drop-placeholder {
    height: 3px;
    background: var(--primary-container, #ff6600);
    border-radius: 2px;
    margin: 0.25rem 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}

/* Bounce-back animation on invalid drop */
@keyframes cbg-fe-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

.cbg-fe-kanban__cards .cbg-fe-cal-card.is-rejected {
    animation: cbg-fe-shake 0.35s ease;
    border-color: var(--error, #ef4444) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 768px) {
    .cbg-fe-kanban__col {
        flex: 0 0 240px;
        min-width: 220px;
    }
}

/* ── Print Dropdown (Phase 3) ────────────────────── */

.cbg-fe-print-dropdown {
    position: relative;
}

.cbg-fe-print-dropdown__menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    min-width: 10rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.25rem;
    display: none;
    z-index: 60;
}

.cbg-fe-print-dropdown.is-open .cbg-fe-print-dropdown__menu {
    display: block;
}

.cbg-fe-print-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--on-surface);
    border-radius: var(--radius-md);
    transition: all 0.1s ease;
    text-align: left;
}

.cbg-fe-print-dropdown__item:hover {
    background: var(--surface-container-low);
    color: var(--primary-container);
}


/* ── Modal (Phase 3 — Print Preview) ─────────────── */

.cbg-fe-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;
    padding: 2rem;
}

.cbg-fe-modal {
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.cbg-fe-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--surface-container-high);
    flex-shrink: 0;
}

.cbg-fe-modal__header h3 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cbg-fe-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.cbg-fe-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--surface-container-high);
    flex-shrink: 0;
}


/* ── Print Table (inside print modal) ────────────── */

.cbg-fe-print-table {
    width: 100%;
    border-collapse: collapse;
}

.cbg-fe-print-table th {
    background: var(--surface-container-highest);
    padding: 0.625rem 0.75rem;
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #525252;
    text-align: left;
    border-bottom: 2px solid var(--surface-container-high);
}

.cbg-fe-print-table td {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    color: var(--on-surface);
    border-bottom: 1px solid var(--surface-container);
    vertical-align: top;
}

.cbg-fe-print-table tr:hover td {
    background: var(--surface-container-low);
}


/* ── Jobsheet Print Preview (A4 Page Simulation) ─── */

.cbg-fe-js-doc {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Each A4 "page" in the preview */
.cbg-fe-js-page {
    width: 210mm;
    min-height: 297mm;
    background: #fff;
    margin: 0 auto;
    padding: 15mm;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}

/* Each jobsheet row = one order (approx half-page) */
.cbg-fe-js-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 8mm;
    margin-bottom: 8mm;
}

.cbg-fe-js-row {
    height: 140mm;
    /* Approx half of A4 usable area */
    display: flex;
    flex-direction: column;
    padding: 10mm 0;
    overflow: hidden;
    page-break-inside: avoid;
}

.cbg-fe-js-row--divider {
    border-bottom: 2px dashed #d1d5db;
}

/* Branding Header */
.cbg-fe-js-brand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.cbg-fe-js-brand-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cbg-fe-js-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.cbg-fe-js-brand-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.65rem;
    color: #1a1c1d;
    line-height: 1;
}

.cbg-fe-js-brand-tagline {
    font-size: 0.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #a3a3a3;
    margin-top: 2px;
}

/* Row header: ORDER NUMBER + DATE NEEDED */
.cbg-fe-js-row-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1.5px solid #1a1c1d;
    padding-bottom: 0.3rem;
    margin-bottom: 0.6rem;
}

.cbg-fe-js-section-label {
    font-size: 0.45rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #5f5e5e;
    margin-bottom: 0.125rem;
}

.cbg-fe-js-order-id {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: -0.04em;
    color: #1a1c1d;
    line-height: 1;
}

.cbg-fe-js-date {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #ff6600;
    line-height: 1;
}

/* Two-column layout: Left 1/4 A4 vs Right 1/4 A4 */
.cbg-fe-js-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    flex: 1;
}

.cbg-fe-js-col-left,
.cbg-fe-js-col-right {
    display: flex;
    flex-direction: column;
}

.cbg-fe-js-field {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
    font-size: 0.55rem;
    line-height: 1.4;
}

div#cbg-fe-print-modal .cbg-fe-js-label {
    letter-spacing: 0;
}

div#cbg-fe-print-modal .cbg-fe-js-field {
    margin-bottom: 0;
}

div#cbg-fe-print-content .cbg-fe-js-row-header {
    border-bottom: 2px solid #ff6600;
}

div#cbg-fe-print-content .cbg-fe-js-row-header .cbg-fe-js-section-label {
    letter-spacing: 0;
    font-size: 10px;
    vertical-align: middle;
    color: #aaa;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 0;
}

div#cbg-fe-print-content .cbg-fe-js-row-header .cbg-fe-js-order-id,
#cbg-fe-print-modal .cbg-fe-js-row-header .cbg-fe-js-date {
    font-size: 14px;
    display: inline-block !important;
}


.cbg-fe-js-label {
    width: 65px;
    font-weight: 700;
    color: #737373;
    flex-shrink: 0;
}

.cbg-fe-js-val {
    color: #1a1c1d;
    font-weight: 500;
}

/* Items Table */
.cbg-fe-js-items-table {
    width: 100%;
    border-collapse: collapse;
}

.cbg-fe-js-items-table th {
    text-align: left;
    font-size: 0.45rem;
    font-weight: 800;
    color: #737373;
    padding: 0.2rem 0.4rem;
    border-bottom: 1px solid #e5e7eb;
}

.cbg-fe-js-items-table td {
    padding: 0.3rem 0.4rem;
    border-bottom: 0.5px solid #f3f4f6;
    vertical-align: top;
    font-size: 0.6rem;
}

.cbg-fe-js-item-meta {
    font-size: 0.5rem;
    color: #0369a1;
    font-style: italic;
    margin-top: 0.1rem;
}

/* Production Notes Card */
.cbg-fe-js-notes-card {
    background: #fffbeb;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid #fef3c7;
    border-left: 4px solid #f59e0b;
}

.cbg-fe-js-notes-text {
    font-size: 0.75rem;
    line-height: 1.6;
    color: #78350f;
    margin: 0;
    white-space: pre-wrap;
    font-weight: 600;
}

/* Attachments */
.cbg-fe-js-attach {
    margin-top: 1rem;
}

.cbg-fe-js-attach-grid {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.cbg-fe-js-attach-grid--1 {
    grid-template-columns: 1fr;
}

.cbg-fe-js-attach-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.cbg-fe-js-attach-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.cbg-fe-js-attach-img {
    aspect-ratio: 1/1;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: #f9fafb;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Deliveries Print List Document ──────────────── */

.cbg-fe-del-doc {
    font-family: 'Inter', sans-serif;
    color: #1a1c1d;
}

/* Document Header */
.cbg-fe-del-doc__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.cbg-fe-del-doc__brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cbg-fe-del-doc__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    height: 48px;
}

.cbg-fe-del-doc__logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.cbg-fe-del-doc__company {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    color: #1a1c1d;
    line-height: 1.1;
}

.cbg-fe-del-doc__subtitle {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #5f5e5e;
    font-weight: 500;
    margin-top: 0.125rem;
}

.cbg-fe-del-doc__title-block {
    text-align: right;
}

.cbg-fe-del-doc__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    color: #ff6600;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.cbg-fe-del-doc__badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    margin-top: 1rem;
}

.cbg-fe-del-badge {
    display: inline-block;
    background: #f4f4f5;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #6b7280;
}

/* Data Table */
.cbg-fe-del-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.cbg-fe-del-table thead tr {
    background: #f4f4f5;
    border-bottom: 2px solid #e5e7eb;
}

.cbg-fe-del-table th {
    padding: 0.5rem 0.375rem;
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #52525b;
}

.cbg-fe-del-row td {
    padding: 0.6rem 0.375rem;
    vertical-align: top;
    font-size: 0.65rem;
    border-bottom: none;
}

.cbg-fe-del-cell-id {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.75rem !important;
    color: #1a1c1d;
    white-space: nowrap;
}

.cbg-fe-del-customer {
    font-weight: 700;
    font-size: 0.75rem;
    color: #27272a;
}

.cbg-fe-del-customer-type {
    font-size: 0.55rem;
    text-transform: uppercase;
    font-weight: 500;
    color: #a1a1aa;
    margin-top: 0.125rem;
}

.cbg-fe-del-cell-addr {
    max-width: 140px;
    font-size: 0.65rem !important;
    color: #3f3f46;
    line-height: 1.4;
    font-weight: 500;
}

.cbg-fe-del-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cbg-fe-del-time-icon {
    font-size: 0.875rem !important;
    color: #a33e00;
}

.cbg-fe-del-time-val {
    font-size: 0.65rem;
    font-weight: 900;
    color: #1a1c1d;
}

.cbg-fe-del-cell-inv {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem !important;
    color: #71717a;
}

.cbg-fe-del-bal {
    font-size: 0.65rem;
    font-weight: 700;
}

.cbg-fe-del-bal--due {
    color: #dc2626;
}

.cbg-fe-del-bal--paid {
    color: #16a34a;
}

.cbg-fe-del-cell-total {
    text-align: right;
    font-size: 0.75rem !important;
    font-weight: 900;
    color: #1a1c1d;
}

/* Product Sub-row: Vertical Organization */
.cbg-fe-del-products-row td {
    padding: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: rgba(244, 244, 245, 0.4);
}

.cbg-fe-del-products {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.cbg-fe-del-products-label {
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a1a1aa;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.cbg-fe-del-products-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cbg-fe-del-product-item {
    font-size: 0.65rem;
    color: #3f3f46;
    line-height: 1.3;
}

.cbg-fe-del-product-meta {
    font-size: 0.55rem;
    color: #0c4a6e;
    font-style: italic;
    margin-left: 1.25rem;
    margin-top: 2px;
}

/* Summary Footer */
.cbg-fe-del-doc__footer {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 4px solid #1a1c1d;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.cbg-fe-del-doc__footer-notes {
    max-width: 360px;
}

.cbg-fe-del-doc__footer-notes-title {
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #a1a1aa;
    margin-bottom: 1rem;
}

.cbg-fe-del-doc__footer-notes-text {
    font-size: 0.625rem;
    color: #71717a;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

.cbg-fe-del-doc__footer-summary {
    background: #1a1c1d;
    color: #fff;
    padding: 1.25rem;
    min-width: 200px;
}

.cbg-fe-del-doc__footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.cbg-fe-del-doc__footer-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a1a1aa;
}

.cbg-fe-del-doc__footer-value {
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.cbg-fe-del-doc__footer-total {
    border-top: 1px solid #3f3f46;
    padding-top: 1rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cbg-fe-del-doc__footer-total-label {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ff6600;
}

.cbg-fe-del-doc__footer-total-value {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

@media print {
    .cbg-fe-del-doc__footer-summary {
        background: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cbg-fe-js-notes-card {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background: #fffbeb !important;
        border: 1px solid #fef3c7 !important;
        border-left: 4px solid #f59e0b !important;
    }

    .cbg-fe-js-row-header {
        border-bottom: 2.5px solid #000 !important;
    }

    .cbg-fe-js-page {
        height: 297mm !important;
        border: none !important;
    }
}


.cbg-fe-js-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cbg-fe-js-field {
    margin-bottom: 0.5rem;
}

.cbg-fe-js-label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a3a3a3;
    margin-bottom: 0.125rem;
}

.cbg-fe-js-notes {
    white-space: pre-wrap;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #525252;
    padding: 0.5rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-md);
    border-left: 2px solid var(--primary-container);
}

.cbg-fe-js-images {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.cbg-fe-js-images img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-container-high);
}

/* ======================================================================
   SLIDE-OUT DRAWER — shared styles for Detail & New Order
   ====================================================================== */

/* Backdrop */
.cbg-fe-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    z-index: 9000;
    pointer-events: none;
    transition: background 0.35s ease, backdrop-filter 0.35s ease;
}

.cbg-fe-drawer-backdrop.is-open {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

/* Drawer panel */
.cbg-fe-drawer {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 45%;
    max-width: 820px;
    min-width: 420px;
    background: var(--surface, #f9f9fb);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.cbg-fe-drawer--right {
    right: 0;
    transform: translateX(100%);
}

.cbg-fe-drawer--right.is-open {
    transform: translateX(0);
}

/* Drawer header */
.cbg-fe-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--surface-container-high);
    background: var(--surface-container-lowest, #fff);
    flex-shrink: 0;
}

.cbg-fe-drawer__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--on-surface);
    margin: 0;
}

/* Drawer body (scrollable) */
.cbg-fe-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Custom scrollbar inside drawers */
.cbg-fe-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.cbg-fe-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.cbg-fe-scrollbar::-webkit-scrollbar-thumb {
    background: var(--surface-container-high);
    border-radius: 10px;
}

/* Drawer footer */
.cbg-fe-drawer__footer {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--surface-container-high);
    background: var(--surface-container-lowest, #fff);
    flex-shrink: 0;
}

.cbg-fe-drawer--lg .cbg-fe-drawer__footer {
    flex-direction: column;
    gap: 0;
}

.cbg-fe-drawer__action {
    flex: 1;
    padding: 0.875rem 1rem;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

/* Drawer width variant for larger panels */
.cbg-fe-drawer--lg {
    right: 0;
    transform: translateX(100%);
    width: 55%;
    max-width: 620px;
}

.cbg-fe-drawer--lg.is-open {
    transform: translateX(0);
}

.cbg-fe-drawer__subtitle {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--secondary);
    margin-top: 0.25rem;
}

.cbg-fe-drawer__header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.cbg-fe-drawer__footer-actions {
    display: flex;
    gap: 0.75rem;
}

.cbg-fe-drawer__footer-actions .cbg-fe-btn {
    flex: 1;
}

/* ── State Progress Strip ─────────────────────────── */

.cbg-fe-state-strip {
    background: var(--surface-container-low, #f3f3f5);
    border-bottom: 1px solid var(--surface-container-high, #e8e8ea);
    padding: 0.875rem 1.5rem 0.75rem;
}

.cbg-fe-state-strip__steps {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.cbg-fe-state-strip__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Connector line between steps */
.cbg-fe-state-strip__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0.5625rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--surface-container-highest, #e2e2e4);
    z-index: 0;
    transition: background 0.3s ease;
}

.cbg-fe-state-strip__step--past:not(:last-child)::after {
    background: var(--success, #16a34a);
}

/* Step dot */
.cbg-fe-state-strip__dot {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--surface-container-highest, #e2e2e4);
    border: 2px solid var(--surface-container-highest, #e2e2e4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    z-index: 2;
}

.cbg-fe-state-strip__step--past .cbg-fe-state-strip__dot {
    background: var(--success, #16a34a);
    border-color: var(--success, #16a34a);
    color: #fff;
}

.cbg-fe-state-strip__step--current .cbg-fe-state-strip__dot {
    background: var(--primary-container, #ff6600);
    border-color: var(--primary-container, #ff6600);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2);
    animation: cbg-strip-pulse 2s ease-in-out infinite;
}

@keyframes cbg-strip-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(255, 102, 0, 0.05);
    }
}

.cbg-fe-state-strip__step--skipped .cbg-fe-state-strip__dot {
    background: transparent;
    border: 2px dashed #d4d4d4;
    opacity: 0.5;
}

.cbg-fe-state-strip__check {
    font-size: 0.6875rem !important;
    line-height: 1 !important;
    font-variation-settings: 'FILL' 1, 'wght' 700;
}

.cbg-fe-state-strip__inner-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #fff;
}

/* Step label */
.cbg-fe-state-strip__label {
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a3a3a3;
    margin-top: 0.3125rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 5rem;
    transition: color 0.25s ease;
}

.cbg-fe-state-strip__step--past .cbg-fe-state-strip__label {
    color: var(--success, #16a34a);
}

.cbg-fe-state-strip__step--current .cbg-fe-state-strip__label {
    color: var(--primary-container, #ff6600);
    font-weight: 800;
}

.cbg-fe-state-strip__step--skipped .cbg-fe-state-strip__label {
    opacity: 0.35;
    font-style: italic;
}

/* Hint line */
.cbg-fe-state-strip__hint {
    margin-top: 0.5625rem;
    font-size: 0.6875rem;
    color: var(--primary-container, #ff6600);
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    line-height: 1.4;
}

.cbg-fe-state-strip__hint .material-symbols-outlined {
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
    font-variation-settings: 'FILL' 0;
}

.cbg-fe-state-strip__hint--muted {
    color: #a3a3a3;
}

/* v1.0.73 — inline action button next to the FSM hint (e.g. Add Payment
   when the order is in Pending Payment). Pushes to the right edge so the
   hint text gets the full available row. */
.cbg-fe-state-strip__hint {
    align-items: center;
    flex-wrap: wrap;
}
.cbg-fe-state-strip__hint-text {
    flex: 1 1 auto;
}
.cbg-fe-state-strip__cta {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* Keep the button slim — it lives inside a tight strip. */
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1;
}
.cbg-fe-state-strip__cta .material-symbols-outlined {
    /* Reset inherited size from .cbg-fe-state-strip__hint .material-symbols-outlined */
    font-size: 0.9375rem !important;
    margin-top: 0 !important;
}

/* ── Stock Request Form ───────────────────────────── */


.cbg-fe-form-row {
    margin-bottom: 1.25rem;
}

.cbg-fe-form-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cbg-fe-form-label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.cbg-fe-form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--surface-container-lowest, #fff);
    color: var(--on-surface);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.cbg-fe-form-control:focus {
    border-color: var(--primary-container);
}

.cbg-fe-sr-products__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cbg-fe-sr-products__count {
    font-size: 0.6875rem;
    color: var(--primary-container);
    font-weight: 600;
}

/* Product list items inside SR drawer */
.cbg-fe-sr-product-list {
    margin-top: 0.5rem;
}

.cbg-fe-sr-product-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.cbg-fe-sr-product-row__img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--surface-container-high);
    flex-shrink: 0;
}

.cbg-fe-sr-product-row__info {
    flex: 1;
}

.cbg-fe-sr-product-row__name {
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    color: var(--on-surface);
}

.cbg-fe-sr-product-row__sku {
    font-size: 0.625rem;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.125rem;
}

.cbg-fe-sr-product-row__price {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--secondary);
    text-align: center;
    min-width: 4rem;
}

.cbg-fe-sr-product-row__price strong {
    display: block;
    font-size: 0.875rem;
    color: var(--on-surface);
}

.cbg-fe-sr-qty-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cbg-fe-sr-qty-control button {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    color: var(--secondary);
    transition: background 0.15s;
}

.cbg-fe-sr-qty-control button.cbg-fe-sr-qty-plus {
    color: var(--primary-container);
}

.cbg-fe-sr-qty-control button:hover {
    background: var(--surface-container-low);
}

.cbg-fe-sr-qty-control input {
    width: 2.8rem;
    text-align: center;
    border: none;
    border-left: 1px solid var(--surface-container-high);
    border-right: 1px solid var(--surface-container-high);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.375rem;
    outline: none;
    background: transparent;
}

.cbg-fe-sr-product-row__subtotal {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--secondary);
    text-align: right;
    min-width: 5rem;
}

.cbg-fe-sr-product-row__subtotal strong {
    display: block;
    font-size: 0.875rem;
    color: var(--on-surface);
}

/* Recommended Cards */
.cbg-fe-sr-rec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.cbg-fe-sr-rec-card {
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cbg-fe-sr-rec-card strong {
    font-size: 0.75rem;
    text-transform: uppercase;
}

.cbg-fe-sr-rec-reason {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tertiary);
}

.cbg-fe-sr-rec-add {
    border: none;
    background: none;
    color: var(--primary-container);
    font-weight: 700;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 0;
    text-align: left;
    transition: color 0.15s;
}

.cbg-fe-sr-rec-add:hover {
    color: var(--on-surface);
}

/* SR Summary footer */
.cbg-fe-sr-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 1rem;
}

.cbg-fe-sr-summary__label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--secondary);
    margin-bottom: 0.25rem;
}

.cbg-fe-sr-summary__value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--on-surface);
}

.cbg-fe-sr-summary__value--highlight {
    color: var(--primary-container);
    font-size: 2rem;
}

/* Spin animation */
@keyframes cbg-fe-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cbg-fe-spin {
    animation: cbg-fe-spin 1s linear infinite;
}

/* ── Order Detail: sections ─────────────────────────────────────── */

.cbg-fe-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.cbg-fe-detail-card {
    padding: 1.25rem;
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
    background: var(--surface-container-low);
}

.cbg-fe-detail-card__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.75rem;
    background: #999999;
    text-align: center;
    padding: 3px 0;
    border-radius: 5px 5px 0 0;
}

/* Financial strip */
.cbg-fe-fin-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cbg-fe-fin-strip__cell {
    padding: 0.875rem 1rem;
    background: var(--surface-container-low);
}

.cbg-fe-fin-strip__cell:not(:last-child) {
    border-right: 1px solid var(--surface-container-high);
}

.cbg-fe-fin-strip__cell--balance {
    background: rgba(255, 102, 0, 0.08);
}

.cbg-fe-fin-strip__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #a3a3a3;
    margin-bottom: 0.25rem;
}

.cbg-fe-fin-strip__value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.125rem;
}

@media (max-width:540px) {
    .cbg-fe-fin-strip {
        zoom: 0.8;
    }

    .cbg-fe-detail-card .cbg-fe-detail-card__label+div {
        display: block !important;
    }
}

/* Tags */
.cbg-fe-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--surface-container-high);
    background: var(--surface-container-low);
    border-radius: 4px;
    color: var(--on-surface-variant);
}

.cbg-fe-tag-chip .material-symbols-outlined {
    font-size: 0.75rem;
}

/* Items table inside detail */
.cbg-fe-detail-items-wrap {
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cbg-fe-detail-items-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.cbg-fe-detail-items-table thead {
    background: var(--surface-container-low);
}

.cbg-fe-detail-items-table th {
    padding: 0.75rem 1.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a3a3a3;
}

.cbg-fe-detail-items-table td {
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    border-top: 1px solid var(--surface-container-high);
}

.cbg-fe-detail-items-table tfoot td {
    background: var(--surface-container-low);
    font-weight: 800;
}

.cbg-fe-item-meta-chip {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-size: 0.5625rem;
    background: var(--surface-container-high);
    border-radius: 3px;
    color: #737373;
    margin-right: 0.25rem;
    margin-top: 0.375rem;
}

/* Payment history card */
.cbg-fe-payment-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
}

.cbg-fe-payment-icon {
    width: 2.25rem;
    height: 2.25rem;
    background: #dcfce7;
    color: #16a34a;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbg-fe-payment-icon .material-symbols-outlined {
    font-size: 1.125rem;
}

/* Invoice card */
.cbg-fe-invoice-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
}

.cbg-fe-invoice-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a3a3a3;
}

/* Timeline */
.cbg-fe-timeline {
    position: relative;
    padding-left: 1.5rem;
}

.cbg-fe-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--surface-container-high);
}

.cbg-fe-timeline__item {
    position: relative;
    margin-bottom: 1.25rem;
}

.cbg-fe-timeline__dot {
    position: absolute;
    left: -1.875rem;
    top: 0.25rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--surface-container-lowest, #fff);
    border: 2px solid #d4d4d4;
}

.cbg-fe-timeline__dot--primary {
    border-color: var(--primary-container);
}

.cbg-fe-timeline__bubble {
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.cbg-fe-timeline__bubble--system {
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.12);
}

@media (max-width:540px) {
    .cbg-fe-timeline__bubble--system {
        zoom: 0.8;
    }
}

.cbg-fe-timeline__bubble--note {
    background: var(--surface-container-low);
    border: 1px solid var(--surface-container-high);
}

.cbg-fe-timeline__meta {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #a3a3a3;
    margin-top: 0.375rem;
}

/* Add-note form */
.cbg-fe-note-textarea {
    width: 100%;
    background: transparent;
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    color: var(--on-surface);
}

.cbg-fe-note-textarea:focus {
    border-color: var(--primary-container);
}

/* Attachments grid */
.cbg-fe-attachments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.cbg-fe-attachment-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--surface-container-high);
    cursor: pointer;
}

.cbg-fe-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s;
}

.cbg-fe-attachment-thumb:hover img {
    transform: scale(1.05);
}

.cbg-fe-attachment-thumb__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    color: #fff;
}

.cbg-fe-attachment-thumb:hover .cbg-fe-attachment-thumb__overlay {
    opacity: 1;
}

.cbg-fe-attachment-thumb__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.25rem 0.5rem;
    font-size: 0.5625rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbg-fe-upload-btn {
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    border: 2px dashed var(--surface-container-high);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: transparent;
    cursor: pointer;
    color: #a3a3a3;
    transition: all 0.25s;
}

.cbg-fe-upload-btn:hover {
    border-color: var(--primary-container);
    color: var(--primary-container);
    background: rgba(255, 102, 0, 0.03);
}

.cbg-fe-upload-btn .material-symbols-outlined {
    font-size: 1.5rem;
}


/* ── New Order form elements ────────────────────────────────────── */

.cbg-fe-drawer-section {
    margin-bottom: 2rem;
}

.cbg-fe-drawer-section__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-bottom: 0.75rem;
}

.cbg-fe-drawer-section__bar {
    width: 3px;
    height: 14px;
    border-radius: 2px;
}

.cbg-fe-drawer-label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--on-surface-variant);
    margin-bottom: 0.375rem;
    padding-left: 0.125rem;
}

.cbg-fe-drawer-input {
    width: 100%;
    background: var(--surface-container-high);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-family: 'Inter', sans-serif;
    color: var(--on-surface);
    outline: none;
    transition: box-shadow 0.2s;
}

.cbg-fe-drawer-input:focus {
    box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.25);
}

.cbg-fe-drawer-input::placeholder {
    color: #c4c4c4;
}

/* Toggle buttons (Pickup / Delivery) */
.cbg-fe-toggle-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: #a3a3a3;
    cursor: pointer;
    transition: all 0.2s;
}

.cbg-fe-toggle-btn--active {
    background: #fff;
    color: var(--on-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Link-style buttons */
.cbg-fe-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-container);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: text-decoration 0.2s;
}

.cbg-fe-link-btn:hover {
    text-decoration: underline;
}

.cbg-fe-link-btn--muted {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #737373;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Drawer table (products) */
.cbg-fe-drawer-table-wrap {
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
    overflow: visible;
    position: relative;
}

/* Round tops of first header cells to keep rounded look without overflow:hidden */
.cbg-fe-drawer-table th:first-child {
    border-radius: var(--radius-lg) 0 0 0;
}

.cbg-fe-drawer-table th:last-child {
    border-radius: 0 var(--radius-lg) 0 0;
}

.cbg-fe-drawer-table {
    width: 100%;
    border-collapse: collapse;
}

.cbg-fe-drawer-table th {
    padding: 0.625rem 1rem;
    background: var(--surface-container-high);
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--on-surface-variant);
    text-align: left;
}

.cbg-fe-drawer-table td {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--surface-container);
}

/* Inline inputs */
.cbg-fe-inline-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    font-family: 'Inter', sans-serif;
    padding: 0;
    outline: none;
    color: var(--on-surface);
}

.cbg-fe-inline-input::placeholder {
    font-style: italic;
    color: #c4c4c4;
}

/* Subtle icon button */
.cbg-fe-icon-btn-subtle {
    background: transparent;
    border: none;
    padding: 0.25rem;
    color: #d4d4d4;
    cursor: pointer;
    transition: color 0.2s;
}

.cbg-fe-icon-btn-subtle:hover {
    color: var(--error);
}

/* Order row hover */
.cbg-fe-order-row {
    transition: background 0.15s;
}

.cbg-fe-order-row:hover {
    background: rgba(255, 102, 0, 0.03) !important;
}

/* ─── Autocomplete Dropdown ────────────────────────────────────────── */
.cbg-fe-autocomplete-wrap {
    position: relative;
}

.cbg-fe-autocomplete-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 9999;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--surface-container);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.cbg-fe-autocomplete-dropdown.is-open {
    display: block;
}

/* Product dropdown for stock request drawer (static position, not absolute) */
.cbg-fe-product-dropdown {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

.cbg-fe-product-dropdown.is-open {
    display: block;
}

/* Ensure product table cells don't clip the autocomplete dropdown */
.cbg-fe-product-row td {
    overflow: visible;
    position: relative;
}

.cbg-fe-drawer-table tbody {
    overflow: visible;
}

.cbg-fe-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--surface-container-low);
    font-size: 0.8125rem;
}

.cbg-fe-autocomplete-item:last-child {
    border-bottom: none;
}

.cbg-fe-autocomplete-item:hover,
.cbg-fe-autocomplete-item--focused {
    background: var(--surface-container-low);
}

.cbg-fe-autocomplete-item__name {
    font-weight: 700;
    margin: 0;
}

.cbg-fe-autocomplete-item__sub {
    font-size: 0.6875rem;
    color: #a3a3a3;
    margin: 0.125rem 0 0;
}

.cbg-fe-autocomplete-item__price {
    margin-left: auto;
    font-weight: 700;
    color: var(--primary-container);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.cbg-fe-autocomplete-item__icon {
    width: 2rem;
    height: 2rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cbg-fe-autocomplete-item__icon .material-symbols-outlined {
    font-size: 1rem;
    color: #a3a3a3;
}

.cbg-fe-autocomplete-loading {
    text-align: center;
    padding: 0.75rem;
    color: #a3a3a3;
    font-size: 0.75rem;
}

.cbg-fe-autocomplete-empty {
    text-align: center;
    padding: 0.75rem;
    color: #d4d4d4;
    font-size: 0.75rem;
    font-style: italic;
}

.cbg-fe-autocomplete-more {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.6875rem;
    color: var(--primary-container);
    cursor: pointer;
    font-weight: 600;
}

.cbg-fe-autocomplete-more:hover {
    background: var(--surface-container-low);
}

/* "Create New Customer" link at bottom of dropdown */
.cbg-fe-autocomplete-create {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-container);
    cursor: pointer;
    border-top: 1px solid var(--surface-container-high);
    transition: background 0.15s;
}

.cbg-fe-autocomplete-create:hover {
    background: rgba(255, 102, 0, 0.06);
}

/* Inline create-customer form */
.cbg-fe-create-customer-form {
    padding: 0.75rem;
}

.cbg-fe-create-customer-form__title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 700;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
    color: var(--on-surface);
}

.cbg-fe-create-customer-form__fields {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.cbg-fe-create-customer-form__fields label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--secondary);
}

.cbg-fe-create-customer-form__fields input {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    background: var(--surface);
    color: var(--on-surface);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.cbg-fe-create-customer-form__fields input:focus {
    border-color: var(--primary-container);
}

.cbg-fe-create-customer-form__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.cbg-fe-create-customer-form__error {
    font-size: 0.6875rem;
    color: var(--error);
    margin-top: 0.375rem;
    min-height: 1rem;
}

/* Spin animation for loading indicators */
@keyframes cbg-fe-spin {
    to {
        transform: rotate(360deg);
    }
}

.cbg-fe-spin {
    animation: cbg-fe-spin 1s linear infinite;
}

/* Toast notification */
.cbg-fe-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: #1a1c1d;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 10010;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cbg-fe-toast.is-visible {
    transform: translateX(-50%) translateY(0);
}

.cbg-fe-toast--success {
    background: #16a34a;
}

.cbg-fe-toast--error {
    background: #ef4444;
}

/* ─── Mini Checkbox ("Same as Customer") ──────────────────────────── */
.cbg-fe-mini-check {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a3a3a3;
    user-select: none;
}

.cbg-fe-mini-check input[type="checkbox"] {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 3px;
    accent-color: var(--primary-container);
    cursor: pointer;
    margin: 0;
}

.cbg-fe-mini-check input:checked+span {
    color: var(--primary-container);
}

/* ─── Flatpickr Theme Overrides (match CakeERP) ──────────────────── */
.flatpickr-calendar {
    font-family: 'Inter', sans-serif !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--surface-container-high) !important;
    z-index: 10000 !important;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    display: none;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--primary-container) !important;
    border-color: var(--primary-container) !important;
    color: #fff !important;
}

.flatpickr-day:hover {
    background: rgba(255, 102, 0, 0.15) !important;
    border-color: transparent !important;
}

.flatpickr-day.today {
    border-color: var(--primary-container) !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* Time picker inside Flatpickr */
.flatpickr-time input {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}

/* ─── Product Price Field — prevent clipping ─────────────────────── */
.cbg-fe-product-price {
    min-width: 4.5rem;
    padding-right: 0.5rem !important;
}

/* ─── Customer autocomplete — show ID badge ──────────────────────── */
.cbg-fe-autocomplete-item__id {
    font-size: 0.5625rem;
    font-weight: 700;
    background: var(--surface-container-high);
    color: #a3a3a3;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.cbg-fe-customer-id-badge {
    font-size: 0.5625rem;
    font-weight: 700;
    background: var(--primary-container);
    color: #fff;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-md);
    margin-left: 0.375rem;
    display: inline-block;
    vertical-align: middle;
}

/* ─── Payment Inline Form ────────────────────────────────────────── */
.cbg-fe-payment-inline {
    background: var(--surface-container-low);
    border: 1px solid rgba(22, 163, 74, 0.15);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

/* ─── Small Buttons (Add Payment, etc.) ──────────────────────────── */
.cbg-fe-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cbg-fe-btn-sm--success {
    background: #16a34a;
    color: #fff;
}

.cbg-fe-btn-sm--success:hover {
    background: #15803d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.cbg-fe-btn-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ─── Proof Upload Button ────────────────────────────────────────── */
.cbg-fe-proof-upload {
    position: relative;
}

.cbg-fe-proof-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--surface-container-high);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #a3a3a3;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.cbg-fe-proof-label:hover {
    border-color: var(--primary-container);
    background: var(--surface-container);
}

/* ─── Add Payment Popup Modal ───────────────────────────────────── */
.cbg-fe-payment-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10100;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 1rem;
}

.cbg-fe-payment-popup-overlay.is-open {
    opacity: 1;
}

.cbg-fe-payment-popup {
    background: var(--surface-container);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--outline-variant);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.cbg-fe-payment-popup-overlay.is-open .cbg-fe-payment-popup {
    transform: translateY(0) scale(1);
}

.cbg-fe-payment-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-container-high);
}

.cbg-fe-payment-popup__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
}

.cbg-fe-payment-popup__balance {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 500;
}

.cbg-fe-payment-popup__balance strong {
    font-size: 0.875rem;
    font-weight: 800;
}

.cbg-fe-payment-popup__body {
    padding: 1.25rem;
}

.cbg-fe-payment-popup__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cbg-fe-payment-popup__field {
    display: flex;
    flex-direction: column;
}

.cbg-fe-payment-popup__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-high);
}

@media (max-width: 480px) {
    .cbg-fe-payment-popup__row {
        grid-template-columns: 1fr;
    }

    .cbg-fe-payment-popup__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }
}

/* ─── File Upload Drop Zone ──────────────────────────────────────── */
.cbg-fe-upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
    background: var(--surface-container-low);
}

.cbg-fe-upload-zone:hover,
.cbg-fe-upload-zone.is-dragover {
    border-color: var(--primary-container);
    background: rgba(255, 102, 0, 0.04);
}

/* ─── File Preview Thumbnails ────────────────────────────────────── */
.cbg-fe-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cbg-fe-file-thumb {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--surface-container-high);
}

.cbg-fe-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbg-fe-file-thumb__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0;
    line-height: 1;
}

/* ─── Existing Attachments Grid (Edit Order) ─────────────────────── */

.cbg-fe-existing-attachments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cbg-fe-existing-attachments-grid:empty {
    display: none;
}

.cbg-fe-existing-att {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--surface-container-high);
    cursor: pointer;
    background: var(--surface-container-low);
}

.cbg-fe-existing-att img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cbg-fe-existing-att__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    color: #fff;
}

.cbg-fe-existing-att:hover .cbg-fe-existing-att__overlay {
    opacity: 1;
}

.cbg-fe-existing-att__name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.25rem 0.375rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ─── Payment History Records ────────────────────────────────────── */
.cbg-fe-pay-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--surface-container-high);
    border-radius: var(--radius-md);
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
}

.cbg-fe-pay-record__method {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.5625rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
}

.cbg-fe-pay-record__amount {
    font-weight: 800;
    color: #16a34a;
    font-family: 'Inter', sans-serif;
}

.cbg-fe-pay-record__date {
    color: #a3a3a3;
    font-size: 0.5625rem;
}

/* ─── Product Item Meta ──────────────────────────────────────────── */
.cbg-fe-meta-row td {
    padding: 0 0.5rem 0.5rem !important;
    border-top: none !important;
}

.cbg-fe-meta-area {
    background: var(--surface-container-low);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: 0.5rem;
}

.cbg-fe-meta-entry {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.cbg-fe-meta-entry input {
    flex: 1;
    background: var(--surface-container-high);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 0.3125rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--on-surface);
    font-family: 'Inter', sans-serif;
}

.cbg-fe-meta-entry input::placeholder {
    color: #737373;
}

.cbg-fe-meta-entry input.cbg-fe-meta-key {
    max-width: 7rem;
    font-weight: 600;
}

.cbg-fe-meta-entry .cbg-fe-meta-rm {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-size: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}

.cbg-fe-meta-entry .cbg-fe-meta-rm:hover {
    background: rgba(239, 68, 68, 0.3);
}

.cbg-fe-meta-add {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.625rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: #a3a3a3;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Montserrat', sans-serif;
}

.cbg-fe-meta-add:hover {
    border-color: var(--primary-container);
    color: var(--primary-container);
}

.cbg-fe-meta-toggle.has-meta {
    color: var(--primary-container);
}

/* ─── Form Validation Error Styles ───────────────────────────────── */
.cbg-fe-field-error {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--error, #ba1a1a);
    font-size: 0.6875rem;
    font-weight: 600;
    margin-top: 0.25rem;
    animation: cbg-fe-shake 0.4s ease;
}

.cbg-fe-drawer-section__heading .cbg-fe-field-error {
    margin-top: 0;
    margin-left: auto;
    font-size: 0.5625rem;
}

@keyframes cbg-fe-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    50%,
    90% {
        transform: translateX(-3px);
    }

    30%,
    70% {
        transform: translateX(3px);
    }
}

.cbg-fe-drawer-input--error {
    box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.35) !important;
    border-color: var(--error, #ba1a1a) !important;
}

.cbg-fe-inline-input--error {
    box-shadow: inset 0 -2px 0 0 var(--error, #ba1a1a);
}

.cbg-fe-drawer-section--error .cbg-fe-drawer-section__heading {
    color: var(--error, #ba1a1a);
}

.cbg-fe-drawer-section--error .cbg-fe-drawer-section__bar {
    background: var(--error, #ba1a1a) !important;
}

/* ─── WYSIWYG Editor (View Order — Add Note) ─────────────────────── */
.cbg-fe-wysiwyg {
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.2s;
}

.cbg-fe-wysiwyg:focus-within {
    border-color: var(--primary-container);
}

.cbg-fe-wysiwyg__toolbar {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--surface-container-high);
}

.cbg-fe-wysiwyg__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm, 4px);
    border: none;
    background: transparent;
    color: #a3a3a3;
    cursor: pointer;
    transition: all 0.15s;
}

.cbg-fe-wysiwyg__btn:hover {
    background: var(--surface-container-high);
    color: var(--on-surface);
}

.cbg-fe-wysiwyg__btn:active {
    background: var(--primary-container);
    color: #fff;
}

.cbg-fe-wysiwyg__sep {
    width: 1px;
    height: 1.125rem;
    background: var(--surface-container-high);
    margin: 0 0.25rem;
}

.cbg-fe-wysiwyg__editor {
    min-height: 3.5rem;
    max-height: 8rem;
    overflow-y: auto;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--on-surface);
    outline: none;
    background: transparent;
}

.cbg-fe-wysiwyg__editor:empty::before {
    content: attr(data-placeholder);
    color: #c4c4c4;
    font-style: italic;
    pointer-events: none;
}

/* Styles for note HTML content inside timeline bubbles */
.cbg-fe-note-html-content {
    font-size: 0.8125rem;
    line-height: 1.6;
    word-break: break-word;
}

.cbg-fe-note-html-content a {
    color: var(--primary-container);
    text-decoration: underline;
}

.cbg-fe-note-html-content ul,
.cbg-fe-note-html-content ol {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.cbg-fe-note-html-content li {
    margin-bottom: 0.125rem;
}

/* =========================================================================
   STYLEGUIDE ALIGNMENT — Stock Requests, Pickup List
   ========================================================================= */

/* ── Bento Grid (8:4 ratio) ──────────────────────── */

.cbg-fe-bento-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.cbg-fe-bento-grid__main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.cbg-fe-bento-grid__widget {
    display: flex;
}

.cbg-fe-bento-grid__widget>.cbg-fe-summary-card {
    flex: 1;
}

/* ── Dark Summary Card (Top Products Widget) ─────── */

.cbg-fe-summary-card--dark {
    background: var(--secondary-anchor);
    border-top-color: var(--secondary-anchor);
    color: #fff;
}

.cbg-fe-summary-card--grey {
    border-top-color: var(--secondary);
}

.cbg-fe-sr-top-products {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.cbg-fe-sr-top-products li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    padding: 0.375rem 0;
}

.cbg-fe-sr-top-products li span {
    color: #d4d4d8;
}

.cbg-fe-sr-top-products li strong {
    color: #fff;
    font-weight: 700;
}

.cbg-fe-sr-top-products__link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-size: 0.5625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary-container);
    text-decoration: none;
    transition: color 0.15s;
}

.cbg-fe-sr-top-products__link:hover {
    color: #fff;
}

/* ── Labeled Filter Zone (Stock Requests) ────────── */

.cbg-fe-filter-zone {
    background: var(--surface-container-lowest);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 1rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
}

.cbg-fe-filter-zone__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 160px;
}

.cbg-fe-filter-zone__field--search {
    flex: 1;
}

.cbg-fe-filter-zone__label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--secondary);
}

.cbg-fe-filter-zone__action {
    display: flex;
    align-items: flex-end;
    padding-bottom: 1px;
}

/* Search box inside filter zone — inherit bg */
.cbg-fe-filter-zone .cbg-fe-search-box {
    background: var(--surface-container-low);
    border: none;
}

.cbg-fe-filter-zone .cbg-fe-filter-select {
    background: var(--surface-container-low);
    border: none;
}

.cbg-fe-filter-zone .cbg-fe-filter-select select {
    min-width: 100px;
}

/* ── Dark Button ─────────────────────────────────── */

.cbg-fe-btn--dark {
    background: var(--secondary-anchor);
    color: #fff;
    border: none;
}

.cbg-fe-btn--dark:hover {
    background: #1c1c1c;
}

/* ── Styled Table Wrapper ────────────────────────── */

.cbg-fe-table-wrapper--styled {
    background: var(--surface-container-low);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 0;
    padding: 0 1.25rem 1.25rem;
}

.cbg-fe-table-wrapper--styled .cbg-fe-table {
    width: 100%;
    border-spacing: 0 0.375rem;
    border-collapse: separate;
}

/* ── Spaced Table ────────────────────────────────── */

.cbg-fe-table--spaced thead tr {
    background: var(--surface-container-low);
}

.cbg-fe-table--spaced thead th {
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--secondary);
    padding: 0.875rem 1rem;
}

/* ── Card-Style Table Rows ───────────────────────── */

.cbg-fe-table__row--card {
    background: var(--surface-container-lowest);
    transition: background 0.15s;
}

.cbg-fe-table__row--card:hover {
    background: #fafafa;
}

.cbg-fe-table__row--card td {
    padding: 1rem;
    vertical-align: middle;
    font-size: 0.8125rem;
}

/* ── Store Icon (small square box) ───────────────── */

.cbg-fe-store-icon {
    width: 1.5rem;
    height: 1.5rem;
    background: #f4f4f5;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Helper Classes ──────────────────────────────── */

.cbg-fe-text-secondary {
    color: var(--secondary);
}

.cbg-fe-link--mono {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
    text-decoration: none;
}

/* ── Sticky Table Footer ─────────────────────────── */

.cbg-fe-table-footer--sticky {
    position: sticky;
    bottom: 0;
    background: var(--surface-container-lowest);
    padding: 0.75rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    z-index: 5;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.cbg-fe-table-footer__stats {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.cbg-fe-table-footer__stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cbg-fe-table-footer__stat-label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--secondary);
}

.cbg-fe-table-footer__stat-value {
    font-size: 0.8125rem;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    color: var(--on-surface);
}

.cbg-fe-table-footer__small-label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--secondary);
}

.cbg-fe-table-footer__divider {
    width: 1px;
    height: 2rem;
    background: rgba(0, 0, 0, 0.08);
}

/* ── Summary Card: Icon Box ──────────────────────── */

.cbg-fe-summary-card__icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cbg-fe-summary-card__icon-box .material-symbols-outlined {
    font-size: 1.75rem;
}

.cbg-fe-summary-card__icon-box--orange {
    background: var(--primary-fixed);
    color: var(--primary);
}

.cbg-fe-summary-card__icon-box--red {
    background: var(--error-container);
    color: var(--error);
}

.cbg-fe-summary-card__icon-box--blue {
    background: var(--tertiary-fixed);
    color: var(--tertiary);
}

/* ── Summary Card: Sub-info ──────────────────────── */

.cbg-fe-summary-card__sub {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #a1a1aa;
}

.cbg-fe-summary-card__sub-highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-weight: 700;
}

.cbg-fe-summary-card__sub-highlight--green {
    color: #16a34a;
}

.cbg-fe-summary-card__sub-highlight--red {
    color: var(--error);
}

.cbg-fe-summary-card__sub-highlight--blue {
    color: var(--tertiary);
}

/* ── Trip Ticket Warning Badge ───────────────────── */

.cbg-fe-trip-ticket-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(186, 26, 26, 0.08);
    color: var(--error);
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ── White-background search/filter variants ─────── */

.cbg-fe-search-box--white {
    background: #fff;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.875rem;
}

.cbg-fe-filter-select--white {
    background: #fff;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.75rem;
}

/* ── Rounded filter bar variant ──────────────────── */

.cbg-fe-filter-bar--rounded {
    border-radius: var(--radius-xl);
}

.cbg-fe-filter-bar--rounded .cbg-fe-filter-bar__inner {
    flex-wrap: wrap;
}

/* ── Pickup List: Avatar sizing fix ──────────────── */
.cbg-fe-table--spaced .cbg-fe-avatar--sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.5625rem;
}

/* ── Status badge enhancements for pickup list ───── */
.cbg-fe-status-badge--fulfilled {
    background: rgba(22, 163, 106, 0.1);
    color: #16a34a;
}


/* =========================================================================
   LOGIN PAGE
   ========================================================================= */

.cbg-fe-login-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    background: var(--surface);
    color: var(--on-surface);
}

.cbg-fe-login-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* ── Left Panel: Signage ─────────────────────────────────────────── */

.cbg-fe-login-signage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: linear-gradient(135deg, #1a1c1d 0%, #2d1b0e 40%, #a33e00 100%);
    color: #fff;
    overflow: hidden;
}

.cbg-fe-login-signage__content {
    position: relative;
    z-index: 2;
    max-width: 480px;
    text-align: left;
}

.cbg-fe-login-signage__content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cbg-fe-login-signage__content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

.cbg-fe-login-signage__content p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.85;
    margin-top: 0.75rem;
}

.cbg-fe-login-signage__content a {
    color: var(--primary-fixed-dim);
}

/* Decorative background pattern */
.cbg-fe-login-signage__pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.06;
    background-image:
        radial-gradient(circle at 20% 80%, #ff6600 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, #ffb596 0%, transparent 50%),
        repeating-linear-gradient(45deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.03) 40px,
            rgba(255, 255, 255, 0.03) 80px);
}

/* ── Right Panel: Form ───────────────────────────────────────────── */

.cbg-fe-login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--surface-container-lowest);
}

.cbg-fe-login-form-wrap {
    width: 100%;
    max-width: 400px;
}

/* ── Form Heading ── */

.cbg-fe-login-form-heading {
    margin-bottom: 2rem;
}

.cbg-fe-login-form-heading h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: 0.25rem;
}

.cbg-fe-login-form-heading p {
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    line-height: 1.5;
}

/* ── Error Message ── */

.cbg-fe-login-error {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: #fff8f8;
    color: var(--on-error-container);
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    line-height: 1.6;
    border: 1px solid rgba(186, 26, 26, 0.15);
    box-shadow: 0 4px 12px rgba(186, 26, 26, 0.08);
    animation: cbgShake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

.cbg-fe-login-error .material-symbols-outlined {
    font-size: 1.25rem;
    flex-shrink: 0;
    color: var(--error);
    background: var(--error-container);
    padding: 4px;
    border-radius: 8px;
}

.cbg-fe-login-error__content {
    flex: 1;
}

.cbg-fe-login-error__content strong {
    font-weight: 700;
    color: #000;
}

.cbg-fe-login-error__content a {
    color: var(--error);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    margin-left: 0.25rem;
    transition: opacity 0.2s;
}

.cbg-fe-login-error__content a:hover {
    opacity: 0.8;
}

@keyframes cbgShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-3px);
    }
}

/* ── Form Fields ── */

.cbg-fe-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cbg-fe-login-field label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
    margin-bottom: 0.5rem;
}

.cbg-fe-login-field label .material-symbols-outlined {
    font-size: 0.875rem;
}

.cbg-fe-login-field input[type="text"],
.cbg-fe-login-field input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-family: 'Inter', sans-serif;
    border: 1.5px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.cbg-fe-login-field input:focus {
    border-color: var(--primary-container);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
}

/* Password wrapper with toggle */
.cbg-fe-login-pass-wrap {
    position: relative;
}

.cbg-fe-login-pass-wrap input {
    padding-right: 2.75rem;
}

.cbg-fe-login-pass-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--on-surface-variant);
    opacity: 0.6;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
}

.cbg-fe-login-pass-toggle:hover {
    opacity: 1;
}

.cbg-fe-login-pass-toggle .material-symbols-outlined {
    font-size: 1.125rem;
}

/* ── Options Row ── */

.cbg-fe-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -0.25rem;
}

.cbg-fe-login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    cursor: pointer;
}

.cbg-fe-login-remember input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-container);
    cursor: pointer;
}

.cbg-fe-login-forgot {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-container);
    text-decoration: none;
    transition: color 0.2s;
}

.cbg-fe-login-forgot:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* ── Submit Button ── */

.cbg-fe-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    margin-top: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--on-primary);
    background: linear-gradient(135deg, var(--primary-container) 0%, var(--primary) 100%);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
    box-shadow: 0 2px 8px rgba(163, 62, 0, 0.25);
}

.cbg-fe-login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(163, 62, 0, 0.35);
    filter: brightness(1.05);
}

.cbg-fe-login-submit:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(163, 62, 0, 0.2);
}

.cbg-fe-login-submit .material-symbols-outlined {
    font-size: 1.125rem;
    transition: transform 0.2s;
}

.cbg-fe-login-submit:hover .material-symbols-outlined {
    transform: translateX(4px);
}

/* ── Form Footer ── */

.cbg-fe-login-form-footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--surface-container-high);
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    text-align: center;
    line-height: 1.6;
}

.cbg-fe-login-form-footer a {
    color: var(--primary-container);
    text-decoration: none;
    font-weight: 600;
}

.cbg-fe-login-form-footer a:hover {
    text-decoration: underline;
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .cbg-fe-login-layout {
        grid-template-columns: 1fr;
    }

    .cbg-fe-login-signage {
        padding: 2rem 1.5rem;
        min-height: auto;
    }

    .cbg-fe-login-signage__content h1 {
        font-size: 1.75rem;
    }

    .cbg-fe-login-form-panel {
        padding: 2rem 1.5rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Invoice Preview Modal  (.cbg-fe-invp-*)
   Faithfully matching the "Invoice Details" styleguide design.
   ══════════════════════════════════════════════════════════════════════ */

/* Clickable invoice card in order detail drawer */
.cbg-fe-invoice-card--clickable {
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.cbg-fe-invoice-card--clickable:hover {
    border-color: var(--primary-container);
    box-shadow: 0 0 0 1px var(--primary-container);
    background: rgba(255, 102, 0, 0.03);
}

.cbg-fe-invoice-card--clickable .cbg-fe-invoice-icon {
    background: rgba(255, 102, 0, 0.08);
    color: var(--primary-container);
}

/* Container — scrollable, centered */
#cbg-fe-invoice-preview {
    z-index: 11000 !important;
}

.cbg-fe-invp-container {
    width: 100%;
    max-width: 210mm;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top control bar */
.cbg-fe-invp-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.cbg-fe-invp-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant, #5a4136);
    transition: color 0.15s;
    padding: 0;
}

.cbg-fe-invp-back:hover {
    color: var(--primary-container);
}

.cbg-fe-invp-back .material-symbols-outlined {
    font-size: 1.25rem;
}

.cbg-fe-invp-actions {
    display: flex;
    gap: 0.75rem;
}

.cbg-fe-invp-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.cbg-fe-invp-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cbg-fe-invp-btn--secondary {
    background: var(--surface-container-highest, #e2e2e4);
    color: var(--on-surface, #1a1c1d);
}

.cbg-fe-invp-btn--primary {
    background: var(--primary-container);
    color: #fff;
    box-shadow: 0 1px 4px rgba(163, 62, 0, 0.2);
}

.cbg-fe-invp-btn--primary:not(:disabled):hover {
    background: #e85d00;
}

/* A4 Canvas */
.cbg-fe-invp-canvas {
    background: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    border-top: 4px solid var(--primary-container);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
    position: relative;
}

/* Header */
.cbg-fe-invp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.cbg-fe-invp-company {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--on-surface, #1a1c1d);
    margin: 0 0 0.125rem 0;
}

.cbg-fe-invp-tagline {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: #5f5e5e;
    margin: 0;
}

.cbg-fe-invp-watermark {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: rgba(90, 65, 54, 0.1);
}

/* Reference Grid */
.cbg-fe-invp-ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface-container-low, #f3f3f5);
}

.cbg-fe-invp-ref-label {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--on-surface-variant, #5a4136);
    margin: 0 0 0.25rem 0;
}

.cbg-fe-invp-ref-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--on-surface, #1a1c1d);
    margin: 0;
}

/* Billed From / To */
.cbg-fe-invp-billed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 2.5rem;
}

.cbg-fe-invp-section-label {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--on-surface-variant, #5a4136);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(227, 191, 177, 0.3);
}

.cbg-fe-invp-billed-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--on-surface, #1a1c1d);
    margin: 0 0 0.25rem 0;
}

.cbg-fe-invp-billed-addr {
    font-size: 0.875rem;
    color: var(--on-surface-variant, #5a4136);
    line-height: 1.6;
    margin: 0 0 0.125rem 0;
}

.cbg-fe-invp-billed-contact {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--on-surface, #1a1c1d);
    margin: 0.5rem 0 0 0;
}

.cbg-fe-invp-billed-contact-sub {
    font-size: 0.875rem;
    color: var(--on-surface-variant, #5a4136);
    margin: 0.125rem 0 0 0;
}

/* Summary Bar */
.cbg-fe-invp-summary-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.cbg-fe-invp-summary-item {
    background: #fff;
    padding: 0.875rem 1rem;
    border-left: 2px solid #ccc;
}

.cbg-fe-invp-summary-label {
    font-size: 0.5625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--on-surface-variant, #5a4136);
    margin: 0 0 0.25rem 0;
}

.cbg-fe-invp-summary-value {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
}

/* Items Table */
.cbg-fe-invp-items {
    margin-bottom: 2.5rem;
}

.cbg-fe-invp-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.cbg-fe-invp-thead-row {
    background: var(--surface-container-highest, #e2e2e4);
}

.cbg-fe-invp-th {
    padding: 0.75rem 1rem;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--on-surface-variant, #5a4136);
}

.cbg-fe-invp-th--right {
    text-align: right;
}

.cbg-fe-invp-td {
    padding: 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--surface-container-highest, #e2e2e4);
    vertical-align: middle;
}

.cbg-fe-invp-td--right {
    text-align: right;
}

.cbg-fe-invp-td--bold {
    font-weight: 700;
}

.cbg-fe-invp-td--mono {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}

.cbg-fe-invp-item-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    margin: 0;
}

.cbg-fe-invp-item-meta {
    font-size: 0.625rem;
    color: var(--on-surface-variant, #5a4136);
    margin: 0.125rem 0 0 0;
}

/* Financial Totals */
.cbg-fe-invp-totals {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2.5rem;
}

.cbg-fe-invp-totals-inner {
    width: 18rem;
}

.cbg-fe-invp-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.cbg-fe-invp-total-label {
    color: var(--on-surface-variant, #5a4136);
    font-weight: 500;
}

.cbg-fe-invp-total-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.cbg-fe-invp-total-row--balance {
    padding-top: 0.5rem;
    margin-bottom: 0;
}

.cbg-fe-invp-balance-label {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--on-surface, #1a1c1d);
}

.cbg-fe-invp-balance-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary-container);
}

/* Footer */
.cbg-fe-invp-footer {
    margin-top: auto;
    border-top: 4px solid var(--surface-container, #eeeef0);
    padding-top: 2rem;
}

.cbg-fe-invp-footer-text {
    max-width: 28rem;
}

.cbg-fe-invp-footer-thanks {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--on-surface, #1a1c1d);
    margin: 0 0 0.5rem 0;
}

.cbg-fe-invp-footer-terms {
    font-size: 0.6875rem;
    color: var(--on-surface-variant, #5a4136);
    line-height: 1.6;
    margin: 0;
}

/* Design signature */
.cbg-fe-invp-signature {
    position: absolute;
    bottom: 0.5rem;
    left: 3rem;
    font-size: 0.5rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(90, 65, 54, 0.25);
}

/* Print media for invoice preview */
@media print {
    .cbg-fe-invp-controls {
        display: none !important;
    }

    .cbg-fe-invp-canvas {
        box-shadow: none !important;
        border-top: 4px solid #ff6600 !important;
    }

    .cbg-fe-modal-overlay#cbg-fe-invoice-preview {
        background: white !important;
        backdrop-filter: none !important;
        padding: 0 !important;
    }
}


/* ─────────────────────────────────────────────────────
   VIEW STOCK REQUEST DRAWER
   ───────────────────────────────────────────────────── */

/* Order Reference Banner */
.cbg-fe-sr-view-order-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(0, 98, 161, 0.06) 0%, rgba(0, 156, 252, 0.04) 100%);
    border: 1px solid rgba(0, 98, 161, 0.15);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
}

.cbg-fe-sr-view-order-banner__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(0, 98, 161, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cbg-fe-sr-view-order-banner__icon .material-symbols-outlined {
    font-size: 1.25rem;
    color: var(--tertiary);
}

.cbg-fe-sr-view-order-banner__info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cbg-fe-sr-view-order-banner__label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #737373;
}

.cbg-fe-sr-view-order-banner__value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--tertiary);
    letter-spacing: -0.01em;
}

/* ── Clickable Order ID Button ── */
.cbg-fe-sr-view-order-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0.1rem 0;
    margin: 0;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--tertiary);
    letter-spacing: -0.01em;
    transition: color 0.15s, transform 0.12s;
    text-decoration: none;
    line-height: 1;
}

.cbg-fe-sr-view-order-btn:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cbg-fe-sr-view-order-btn:active {
    transform: scale(0.96);
}

.cbg-fe-sr-view-order-btn .material-symbols-outlined {
    font-size: 1rem;
    opacity: 0.7;
    transition: transform 0.15s;
}

.cbg-fe-sr-view-order-btn:hover .material-symbols-outlined {
    transform: translateX(3px);
    opacity: 1;
}

.cbg-fe-sr-view-order-banner__hint {
    font-size: 0.625rem;
    color: #a3a3a3;
    margin-top: 0.1rem;
    letter-spacing: 0.03em;
}

/* Info Grid */
.cbg-fe-sr-view-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    border: 1px solid var(--surface-container-high);
    overflow: hidden;
}

.cbg-fe-sr-view-info__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.cbg-fe-sr-view-info__row:not(:last-child) {
    border-bottom: 1px solid var(--surface-container-high);
}

.cbg-fe-sr-view-info__field {
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cbg-fe-sr-view-info__field:first-child {
    border-right: 1px solid var(--surface-container-high);
}

.cbg-fe-sr-view-info__label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a3a3a3;
}

.cbg-fe-sr-view-info__value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--on-surface);
}

.cbg-fe-detail-add-payment {
    margin-bottom: 30px;
}

@media (max-width:768px) {

    #cbg-fe-detail-body .cbg-fe-sr-view-info,
    #cbg-fe-tt-view-body .cbg-fe-sr-view-info {
        zoom: 0.7;
    }

    /* .cbg-fe-sr-view-info__row {
        grid-template-columns: 1fr;
    } */
    #cbg-fe-detail-drawer .cbg-fe-drawer__header {
        zoom: 0.65;
    }

    .cbg-fe-detail-add-payment {
        margin-bottom: 20px;
    }
}

/* Requested Items */
.cbg-fe-sr-view-items {
    margin-bottom: 1.5rem;
}

.cbg-fe-sr-view-items__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cbg-fe-sr-view-items__count {
    font-size: 0.625rem;
    font-weight: 700;
    color: #a3a3a3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cbg-fe-sr-view-items__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Read-only item row */
.cbg-fe-sr-view-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s;
}

.cbg-fe-sr-view-item:hover {
    border-color: var(--outline-variant);
}

.cbg-fe-sr-view-item__img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--surface-container-high);
    flex-shrink: 0;
}

.cbg-fe-sr-view-item__info {
    flex: 1;
    min-width: 0;
}

.cbg-fe-sr-view-item__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbg-fe-sr-view-item__sku {
    font-size: 0.625rem;
    color: #a3a3a3;
    margin-top: 0.125rem;
}

.cbg-fe-sr-view-item__qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.75rem;
    flex-shrink: 0;
}

.cbg-fe-sr-view-item__qty-label {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a3a3a3;
}

.cbg-fe-sr-view-item__qty-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--on-surface);
}

.cbg-fe-sr-view-item__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 0.75rem;
    flex-shrink: 0;
}

.cbg-fe-sr-view-item__price-label {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a3a3a3;
}

.cbg-fe-sr-view-item__price-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--on-surface);
}

.cbg-fe-sr-view-item__subtotal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 5rem;
    flex-shrink: 0;
}

.cbg-fe-sr-view-item__subtotal-label {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a3a3a3;
}

.cbg-fe-sr-view-item__subtotal-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--primary-container);
}

/* Notes */
.cbg-fe-sr-view-notes {
    margin-bottom: 1.5rem;
}

.cbg-fe-sr-view-notes__content {
    padding: 0.875rem 1rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--on-surface);
    white-space: pre-wrap;
}

/* Danger button variant */
.cbg-fe-btn--danger {
    color: var(--error) !important;
    border-color: var(--error) !important;
}

.cbg-fe-btn--danger:hover {
    background: rgba(186, 26, 26, 0.08) !important;
}

/* Badge variants for the view drawer */
.cbg-fe-status-badge--approved {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
}

.cbg-fe-status-badge--cancelled {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}


/* =========================================================================
   RESPONSIVE — Mobile-First Breakpoints
   ========================================================================= */

/* ── Hamburger: hidden on desktop ─────────────────────────── */
.cbg-fe-hamburger {
    display: none;
}

.cbg-fe-header__mobile-left {
    display: none;
    align-items: center;
    gap: 0.625rem;
}

.cbg-fe-header__mobile-title {
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--on-surface);
}


/* ── Tablet (≤ 1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {

    :root {
        --sidebar-width: 13rem;
    }

    .cbg-fe-content {
        padding: 1.25rem 1.5rem;
    }

    /* KPI: 3 per row */
    .cbg-fe-kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Filter row: wrap earlier */
    .cbg-fe-filter-strip__row {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.625rem;
    }

    /* Table: allow horizontal scroll */
    .cbg-fe-table-wrap {
        overflow-x: auto;
    }

    /* Orders table: reduce columns */
    .cbg-fe-table-header[style*="1.8fr"],
    .cbg-fe-table-row[style*="1.8fr"] {
        grid-template-columns: 1.6fr 0.8fr 0.9fr 1.1fr 0.9fr 0.9fr !important;
    }

    /* Hide less-important columns on tablet */
    .cbg-fe-table-row[style*="1.8fr"]>div:nth-child(2),
    /* Added By */
    .cbg-fe-table-header[style*="1.8fr"]>*:nth-child(2),
    /* Added By */
    .cbg-fe-table-row[style*="1.8fr"]>div:nth-child(8),
    /* Trip Ticket */
    .cbg-fe-table-header[style*="1.8fr"]>*:nth-child(8)

    /* Trip Ticket */
        {
        display: none;
    }
}


/* ── Mobile (≤ 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {


    /* ── Header ── */
    .cbg-fe-header {
        padding: 0 1rem;
        position: sticky;
        top: 0;
        z-index: 30;
        justify-content: space-between;
    }

    .cbg-fe-hamburger {
        display: flex;
    }

    .cbg-fe-header__mobile-left {
        display: flex;
    }

    /* Hide global search on mobile (space-saver) */
    .cbg-fe-header__search {
        display: none;
    }

    /* ── Content Area ── */
    .cbg-fe-content {
        padding: 1rem;
        overflow-y: visible;
        flex: unset;
    }

    /* ── Page Title ── */
    .cbg-fe-page-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .cbg-fe-page-title h2 {
        font-size: 1.375rem;
    }

    .cbg-fe-page-title>div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    /* ── View Toggle (List/Calendar): full-width ── */
    .cbg-fe-view-toggle {
        width: 100%;
    }

    .cbg-fe-view-toggle__btn {
        flex: 1;
        justify-content: center;
    }

    /* Print dropdown takes remaining space */
    .cbg-fe-print-dropdown {
        flex: 1;
    }

    #cbg-fe-print-trigger {
        width: 100%;
        justify-content: center;
    }

    /* ── KPI Cards: 2 columns ── */
    .cbg-fe-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem;
        margin-bottom: 1rem;
    }

    .cbg-fe-kpi-card {
        padding: 0.75rem 1rem;
    }

    .cbg-fe-kpi-card__value {
        font-size: 1rem;
    }

    /* ── Filter Strip: stacked ── */
    .cbg-fe-filter-strip {
        padding: 0.875rem 1rem;
    }

    .cbg-fe-filter-strip__row {
        display: flex !important;
        flex-direction: column;
        gap: 0.625rem;
    }

    /* Full-width inputs and selects in filter strip on mobile */
    .cbg-fe-filter-strip__row>div {
        width: 100%;
    }

    .cbg-fe-filter-strip input,
    .cbg-fe-filter-strip select {
        width: 100% !important;
        box-sizing: border-box;
    }

    .cbg-fe-filter-strip__row>div:last-child {
        flex-direction: row;
    }

    .cbg-fe-filter-strip__row>div:last-child .cbg-fe-btn {
        flex: 1;
        justify-content: center;
    }

    /* Hide in-page page title on mobile (header already shows it) */
    .cbg-fe-page-title {
        display: none;
    }

    /* Order Type checkboxes: flex-wrap, natural widths */
    .cbg-fe-checkbox-row {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.375rem 0.75rem;
        align-items: center;
    }

    .cbg-fe-checkbox-row label {
        white-space: nowrap;
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    /* "ORDER TYPE" caption takes full row */
    .cbg-fe-checkbox-row>div:first-child {
        width: 100%;
    }

    /* ── Table: card layout ── */
    .cbg-fe-table-wrap {
        overflow-x: visible;
        border-radius: var(--radius-xl);
    }

    /* Hide desktop column header on mobile */
    .cbg-fe-table-header {
        display: none !important;
    }

    /* Each row becomes a card */
    .cbg-fe-table-body {
        padding: 0px;
        background: none;
        border: none;
        background: none;
    }

    .cbg-fe-order-row.cbg-fe-table-row {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow: hidden;
        margin-bottom: 0.625rem;
        border: 1px solid #e0e0e0;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }

    /* Mobile card: top bar (order ID + status) */
    .cbg-fe-order-row .cbg-fe-mobile-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        border-bottom: 1px solid var(--surface-container-high);
    }

    .cbg-fe-mobile-card-top .cbg-fe-badge {
        font-size: 7px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0 5px 0 0;
        border: none;
    }

    /* Mobile card: body */
    .cbg-fe-order-row .cbg-fe-mobile-card-body {
        padding: 0.5rem 0.875rem 0.625rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.375rem 0.75rem;
    }

    /* Mobile card: footer (amount) */
    .cbg-fe-order-row .cbg-fe-mobile-card-footer {
        background: var(--surface-container-low);
        padding: 0.625rem 0.875rem;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        font-size: 0.75rem;
        width: 100%;
        border-top: 1px solid var(--surface-container-high);
    }

    .cbg-fe-mobile-label {
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #a3a3a3;
    }

    .cbg-fe-mobile-value {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--on-surface);
        margin-top: 1px;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* Default: hide all grid children (we rebuild as flex card) */
    .cbg-fe-order-row>div {
        display: none !important;
    }

    /* Only the mobile card containers are shown */
    .cbg-fe-order-row .cbg-fe-mobile-card-top,
    .cbg-fe-order-row .cbg-fe-mobile-card-body,
    .cbg-fe-order-row .cbg-fe-mobile-card-footer {
        display: flex !important;
        width: 100%;
        position: relative;
    }


    /* .cbg-fe-order-row .cbg-fe-mobile-card-body — grid override removed */


    /* ── Pagination: stack vertically ── */
    .cbg-fe-pagination {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }

    .cbg-fe-pagination__info {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cbg-fe-pagination__pages {
        width: 100%;
        justify-content: center;
    }

    /* ── FAB: lower position on mobile ── */
    .cbg-fe-fab {
        bottom: 1.5rem;
        right: 1.25rem;
    }

    /* ── Calendar view: scrollable ── */
    #cbg-fe-view-calendar .cbg-fe-filter-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    #cbg-fe-view-calendar .cbg-fe-filter-strip>div:first-child {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cbg-fe-calendar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cbg-fe-calendar__grid {
        min-width: 560px;
    }

    /* ── Drawers: full-screen on mobile ── */
    .cbg-fe-drawer .cbg-fe-detail-grid {
        zoom: 0.7;
        display: block;
    }

    .cbg-fe-drawer .cbg-fe-detail-grid .cbg-fe-detail-card {
        border: none;
        background: none;
        padding: 0;
    }

    .cbg-fe-drawer .cbg-fe-detail-grid .cbg-fe-detail-card:first-child {
        margin-bottom: 15px;
    }

    .cbg-fe-detail-card__label {
        font-size: 12px;
        letter-spacing: 0;
        color: #fff;
        background: #b4622a;
        padding: 2px;
        text-align: center;
        border-radius: 5px 5px 0 0;
    }

    .cbg-fe-detail-items-table th {
        font-size: 8px !important;
        color: #000 !important;
    }

    .cbg-fe-detail-items-table td {
        padding: 0.5rem 0.5rem;
    }

    .cbg-fe-item-meta-chip {
        color: #000;
        background: none;
        padding: 0 0 3px 0;
        display: block;
        border-bottom: 1px dashed #e0e0e0;
    }

    .cbg-fe-drawer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .cbg-fe-drawer__header {
        padding: 0.875rem 1rem;
    }

    .cbg-fe-drawer__title {
        font-size: 1rem;
    }

    .cbg-fe-drawer__body {
        padding: 1rem;
    }

    .cbg-fe-drawer__footer {
        padding: 0.875rem 1rem;
    }

    .cbg-fe-drawer__footer-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cbg-fe-drawer__footer-actions .cbg-fe-btn {
        font-size: 0.6875rem;
        padding: 0.5rem 0.75rem;
    }

    .cbg-fe-drawer-section {
        padding: 0.75rem 0;
    }

    .cbg-fe-drawer-section__heading {
        font-size: 0.625rem;
    }

    .cbg-fe-drawer-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cbg-fe-drawer__header-actions {
        gap: 0.375rem;
    }

    .cbg-fe-drawer__header-actions .cbg-fe-btn {
        font-size: 0.625rem;
        padding: 0.375rem 0.5rem;
    }

    /* ── Modal: full-width ── */
    .cbg-fe-modal {
        width: calc(100vw - 2rem) !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* ── Dashboard widget grid ── */
    #cbg-dash-widget-grid {
        grid-template-columns: 1fr !important;
    }

    .cbg-dash-widget[data-widget-id="recently_accessed"] {
        grid-column: 1 !important;
    }

    /* -- Print Invoice Preview -- */
    #cbg-fe-invoice-preview {
        zoom: 0.75;
    }
}


/* ── Very small screens (≤ 400px) ─────────────────────────── */
@media (max-width: 400px) {
    .cbg-fe-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .cbg-fe-kpi-card__value {
        font-size: 0.9375rem;
    }

    .cbg-fe-btn {
        font-size: 0.6875rem;
        padding: 0.375rem 0.625rem;
    }
}


/* =========================================================================
   PICKUP LIST — Responsive
   ========================================================================= */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {

    /* Summary row: 3-col → but allow shrink */
    .cbg-fe-summary-row--3 {
        gap: 0.75rem;
    }

    .cbg-fe-summary-card {
        min-width: 0;
    }

    /* Filter bar: allow wrap */
    .cbg-fe-filter-bar__inner {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Table: hide less-important cols */
    #cbg-fe-pickup-table th:nth-child(5),
    #cbg-fe-pickup-table td:nth-child(5),
    #cbg-fe-pickup-table th:nth-child(6),
    #cbg-fe-pickup-table td:nth-child(6) {
        display: none;
    }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {

    /* Summary cards: 2-column grid on mobile */
    .cbg-fe-summary-row,
    .cbg-fe-summary-row--3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.625rem;
    }

    .cbg-fe-summary-card {
        width: 100% !important;
        padding: 0.875rem 1rem !important;
        min-width: 0;
    }

    .cbg-fe-summary-card__top {
        margin-bottom: 0.375rem;
    }

    .cbg-fe-summary-card__value {
        font-size: 1.5rem !important;
    }

    .cbg-fe-summary-card__sub {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Filter bar: stack vertically, full-width */
    .cbg-fe-filter-bar {
        padding: 0.875rem 1rem;
    }

    .cbg-fe-filter-bar__inner {
        flex-direction: column !important;
        gap: 0.625rem !important;
    }

    .cbg-fe-filter-bar__inner>* {
        width: 100% !important;
    }

    .cbg-fe-filter-bar__inner .cbg-fe-search-box {
        flex: unset !important;
        width: 100% !important;
    }

    .cbg-fe-filter-bar__inner .cbg-fe-filter-select {
        width: 100% !important;
    }

    .cbg-fe-filter-bar__inner select {
        width: 100% !important;
    }

    .cbg-fe-filter-bar__inner button[type="submit"] {
        width: 100% !important;
        justify-content: center;
    }

    /* Page title: hide in-page (header already has it) */
    .cbg-fe-page-title {
        display: none;
    }

    /* ── Table → Card transformation ── */
    .cbg-fe-table-wrapper {
        overflow-x: visible !important;
        border-radius: var(--radius-xl);
    }

    /* Hide table header on mobile */
    #cbg-fe-pickup-table thead {
        display: none !important;
    }

    /* Make tbody a block */
    #cbg-fe-pickup-table tbody {
        display: block;
        padding: 0.375rem;
    }

    /* Each row = a card */
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row {
        display: block !important;
        background: var(--surface-container);
        border-radius: var(--radius-lg);
        margin-bottom: 0.625rem;
        overflow: hidden;
        border: 1px solid var(--surface-container-high);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.15s ease;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row:hover {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    }

    /* Hide all td and rebuild with ::before labels */
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td {
        display: none !important;
    }

    /* Show only the important tds as card sections via ::before */
    /* We select tds by data-label and use flex layout */

    /* --- Card header: Order ID + Status (always shown) --- */
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Order ID"] {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0.875rem 0.375rem;
        border-bottom: 1px solid var(--surface-container-high);
    }

    /* Show status badge next to order id in mobile header */
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Status"] {
        display: flex !important;
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.625rem 0.875rem 0;
        background: transparent;
        border: none;
    }

    /* We need a different approach - use a wrapper card inside each row */
    /* Reset the above absolute position approach - use pure data-label blocks */
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Status"] {
        position: static;
        display: none !important;
    }

    /* Build card using JS-injected structure - 
       Instead, use a simpler approach: show all tds as stacked label-value pairs */
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row {
        position: relative;
        display: grid !important;
        grid-template-areas:
            "orderid status"
            "customer customer"
            "date time"
            "location location"
            "trip trip";
        grid-template-columns: 1fr auto;
        gap: 0;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Order ID"] {
        grid-area: orderid;
        display: flex !important;
        align-items: center;
        padding: 0.625rem 0.875rem 0.375rem 0.875rem;
        border-bottom: none;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Status"] {
        grid-area: status;
        display: flex !important;
        align-items: center;
        padding: 0.625rem 0.875rem 0.375rem 0;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Customer"] {
        grid-area: customer;
        display: flex !important;
        align-items: center;
        padding: 0 0.875rem 0.5rem;
        border-bottom: 1px solid var(--surface-container-high);
        font-size: 0.875rem;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Date Needed"] {
        grid-area: date;
        display: block !important;
        padding: 0.5rem 0.875rem 0.375rem;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Pickup Time"] {
        grid-area: time;
        display: block !important;
        padding: 0.5rem 0.875rem 0.375rem;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Location"] {
        grid-area: location;
        display: block !important;
        padding: 0.375rem 0.875rem;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Location"] div {
        max-width: 100% !important;
        white-space: normal !important;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Location"] span {
        white-space: normal !important;
        overflow: visible !important;
    }

    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Trip Ticket"] {
        grid-area: trip;
        display: block !important;
        padding: 0.375rem 0.875rem 0.625rem;
        border-top: 1px solid var(--surface-container-high);
        background: var(--surface-container-low);
        font-size: 0.75rem;
    }

    /* Add micro-labels before Date, Time, Location */
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Date Needed"]::before,
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Pickup Time"]::before,
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row td[data-label="Location"]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #a3a3a3;
        margin-bottom: 2px;
    }

    /* Order ID: larger font */
    #cbg-fe-pickup-table tbody tr.cbg-pickup-row .cbg-fe-order-id {
        font-size: 0.9375rem;
        font-weight: 800;
    }

    /* Footer: stack meta + pagination */
    .cbg-fe-table-footer,
    .cbg-fe-table-footer--sticky {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        position: static !important;
    }

    .cbg-fe-table-footer__meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cbg-fe-pagination {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================================
   STOCK REQUESTS — Responsive
   ========================================================================= */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {

    /* Bento grid: stack main + widget */
    .cbg-fe-bento-grid {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
    }

    .cbg-fe-bento-grid__main {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .cbg-fe-bento-grid__main .cbg-fe-summary-card {
        flex: 1 1 140px;
        min-width: 0;
    }

    /* Hide Trip Ticket + Order ID on tablet */
    #cbg-fe-sr-table th:nth-child(8),
    #cbg-fe-sr-table td:nth-child(8),
    #cbg-fe-sr-table th:nth-child(3),
    #cbg-fe-sr-table td:nth-child(3) {
        display: none;
    }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {

    /* Page title: hide in-page (header already shows it) */
    .cbg-fe-page-title {
        display: none;
    }

    /* ── Bento Grid: 2-column grid for the metric cards ── */
    .cbg-fe-bento-grid {
        display: flex !important;
        flex-direction: column;
        gap: 0.625rem;
    }

    .cbg-fe-bento-grid__main {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.625rem;
    }

    .cbg-fe-bento-grid__main .cbg-fe-summary-card,
    .cbg-fe-bento-grid__widget .cbg-fe-summary-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.875rem 1rem !important;
    }

    .cbg-fe-bento-grid__widget {
        width: 100% !important;
    }

    .cbg-fe-summary-card__value {
        font-size: 1.5rem !important;
    }

    /* Top products list: tighten up on mobile */
    .cbg-fe-sr-top-products li {
        padding: 0.375rem 0;
    }

    /* ── Filter Zone: stack vertically ── */
    .cbg-fe-filter-zone {
        display: flex !important;
        flex-direction: column;
        gap: 0.625rem;
        padding: 0.875rem 1rem;
    }

    .cbg-fe-filter-zone__field,
    .cbg-fe-filter-zone__field--search {
        width: 100% !important;
    }

    .cbg-fe-filter-zone__field .cbg-fe-search-box,
    .cbg-fe-filter-zone__field .cbg-fe-filter-select {
        width: 100% !important;
    }

    .cbg-fe-filter-zone__field input,
    .cbg-fe-filter-zone__field select {
        width: 100% !important;
        box-sizing: border-box;
    }

    .cbg-fe-filter-zone__action {
        width: 100%;
    }

    .cbg-fe-filter-zone__action .cbg-fe-btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Stock Request Table → Cards ── */
    .cbg-fe-table-wrapper {
        overflow-x: visible !important;
        border-radius: var(--radius-xl);
    }

    /* Hide table head */
    #cbg-fe-sr-table thead {
        display: none !important;
    }

    /* tbody as block container */
    #cbg-fe-sr-table tbody {
        display: block;
        padding: 0.375rem;
    }

    /* Each row = card */
    #cbg-fe-sr-table tbody tr.cbg-sr-row {
        display: grid !important;
        grid-template-areas:
            "reqid    status"
            "store    store"
            "dates    dates"
            "value    value"
            "linked   linked";
        grid-template-columns: 1fr auto;
        background: var(--surface-container);
        border-radius: var(--radius-lg);
        margin-bottom: 0.625rem;
        overflow: hidden;
        border: 1px solid var(--surface-container-high);
        /* preserve the left border colour accent from inline style */
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.15s ease;
    }

    #cbg-fe-sr-table tbody tr.cbg-sr-row:hover {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    }

    /* Hide all cells first */
    #cbg-fe-sr-table tbody tr.cbg-sr-row td {
        display: none !important;
    }

    /* Request ID — top-left */
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Request ID"] {
        grid-area: reqid;
        display: flex !important;
        align-items: center;
        padding: 0.625rem 0.75rem 0.375rem 0.875rem;
    }

    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Request ID"] .cbg-fe-order-id {
        font-size: 0.9375rem;
        font-weight: 800;
    }

    /* Status badge — top-right */
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Status"] {
        grid-area: status;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        padding: 0.625rem 0.875rem 0.375rem 0;
    }

    /* Store — second row, full width */
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Requesting Store"] {
        grid-area: store;
        display: flex !important;
        align-items: center;
        padding: 0 0.875rem 0.5rem;
        border-bottom: 1px solid var(--surface-container-high);
        font-size: 0.875rem;
        font-weight: 600;
    }

    /* Dates row — 2-col grid (Created + Date Needed) */
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Created Date"],
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Date Needed"] {
        grid-area: dates;
        display: block !important;
        padding: 0.5rem 0.875rem 0.375rem;
    }

    /* Workaround: place date needed inline beside created date using flex on the dates area */
    #cbg-fe-sr-table tbody tr.cbg-sr-row {
        grid-template-areas:
            "reqid    status"
            "store    store"
            "created  dateneeded"
            "value    value"
            "linked   linked";
        grid-template-columns: 1fr 1fr;
    }

    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Created Date"] {
        grid-area: created;
        display: block !important;
        padding: 0.5rem 0.5rem 0.375rem 0.875rem;
    }

    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Date Needed"] {
        grid-area: dateneeded;
        display: block !important;
        padding: 0.5rem 0.875rem 0.375rem 0.5rem;
    }

    /* Add micro labels */
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Created Date"]::before,
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Date Needed"]::before,
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Total Value"]::before,
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Order ID"]::before,
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Trip Ticket"]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #a3a3a3;
        margin-bottom: 2px;
    }

    /* Total value — full width, highlighted */
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Total Value"] {
        grid-area: value;
        display: block !important;
        padding: 0.375rem 0.875rem;
        font-weight: 700;
        font-size: 1rem;
        text-align: left !important;
        border-top: 1px solid var(--surface-container-high);
        color: var(--on-surface);
    }

    /* Order ID + Trip Ticket: footer row */
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Order ID"],
    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Trip Ticket"] {
        grid-area: linked;
        display: inline-flex !important;
        align-items: center;
        gap: 0.25rem;
        padding: 0.375rem 0.875rem 0.625rem;
        font-size: 0.75rem;
        background: var(--surface-container-low);
        border-top: 1px solid var(--surface-container-high);
    }

    /* Put both on same row: Order ID left, Trip Ticket after */
    #cbg-fe-sr-table tbody tr.cbg-sr-row {
        grid-template-areas:
            "reqid       status"
            "store       store"
            "created     dateneeded"
            "value       value"
            "orderid     tripticket";
        grid-template-columns: 1fr 1fr;
    }

    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Order ID"] {
        grid-area: orderid;
        display: block !important;
        padding: 0.375rem 0.5rem 0.625rem 0.875rem;
    }

    #cbg-fe-sr-table tbody tr.cbg-sr-row td[data-label="Trip Ticket"] {
        grid-area: tripticket;
        display: block !important;
        padding: 0.375rem 0.875rem 0.625rem 0.5rem;
    }

    /* Footer stats: stack */
    .cbg-fe-table-footer--sticky {
        flex-direction: column !important;
        align-items: flex-start !important;
        position: static !important;
        padding: 0.875rem 1rem;
    }

    .cbg-fe-table-footer__stats {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
}


/* =========================================================================
   CUSTOM DIALOG COMPONENT  (cbgConfirm / cbgAlert)
   ========================================================================= */

/* ── Overlay ── */
.cbg-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 0.2s ease, backdrop-filter 0.2s ease;
    pointer-events: none;
}

.cbg-dialog-overlay.is-open {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: all;
}

/* ── Dialog Card ── */
.cbg-dialog {
    background: var(--surface-container);
    border: 1px solid var(--surface-container-high);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    transform: scale(0.88) translateY(12px);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
}

.cbg-dialog-overlay.is-open .cbg-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── Icon Zone ── */
.cbg-dialog__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.5rem 0.75rem;
}

.cbg-dialog__icon .material-symbols-outlined {
    font-size: 2.5rem;
    border-radius: 50%;
    padding: 0.5rem;
    background: var(--surface-container-high);
}

/* type colours for icon */
.cbg-dialog--info .cbg-dialog__icon .material-symbols-outlined {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
}

.cbg-dialog--warning .cbg-dialog__icon .material-symbols-outlined {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

.cbg-dialog--danger .cbg-dialog__icon .material-symbols-outlined {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.cbg-dialog--success .cbg-dialog__icon .material-symbols-outlined {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

/* ── Body ── */
.cbg-dialog__body {
    padding: 0 1.5rem 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cbg-dialog__title {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
    line-height: 1.3;
}

.cbg-dialog__message {
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    line-height: 1.55;
    margin: 0;
}

/* ── Actions ── */
.cbg-dialog__actions {
    display: flex;
    gap: 0.625rem;
    padding: 0 1.25rem 1.25rem;
    justify-content: stretch;
}

.cbg-dialog__actions .cbg-fe-btn {
    flex: 1;
    justify-content: center;
    height: 2.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cbg-dialog__actions--single {
    justify-content: center;
}

.cbg-dialog__actions--single .cbg-fe-btn {
    flex: unset;
    min-width: 120px;
}

/* ── Confirm button colour variants ── */
.cbg-dialog__confirm--info {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

.cbg-dialog__confirm--info:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

.cbg-dialog__confirm--warning {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #fff !important;
}

.cbg-dialog__confirm--warning:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
}

.cbg-dialog__confirm--danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

.cbg-dialog__confirm--danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

.cbg-dialog__confirm--success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
}

.cbg-dialog__confirm--success:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .cbg-dialog {
        max-width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(40px);
        opacity: 0;
    }

    .cbg-dialog-overlay.is-open .cbg-dialog {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =========================================================================
   KANBAN BOARD — Trip Tickets
   ========================================================================= */

/* ── View Toggle ── */
.cbg-fe-tt-view-toggle {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f5f5f5;
}

.cbg-fe-tt-view-toggle__btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: transparent;
    border: none;
    color: #71717a;
    cursor: pointer;
    transition: all 0.15s;
}

.cbg-fe-tt-view-toggle__btn.is-active {
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cbg-fe-tt-view-toggle__btn .material-symbols-outlined {
    font-size: 1rem;
}

/* ── Board Container ── */
.cbg-fe-kanban {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    overflow-x: auto;
    min-height: calc(100vh - 320px);
    -webkit-overflow-scrolling: touch;
}

/* ── Swimlane Column ── */
.cbg-fe-kanban__col {
    flex: 1 0 0;
    min-width: 220px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 340px);
}

.cbg-fe-kanban__col--hidden {
    display: none;
}

.cbg-fe-kanban__col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    border-top: 3px solid #a3a3a3;
    border-radius: 12px 12px 0 0;
    background: #fff;
    flex-shrink: 0;
}

.cbg-fe-kanban__col--pending .cbg-fe-kanban__col-header {
    border-top-color: #f59e0b;
}

.cbg-fe-kanban__col--dispatched .cbg-fe-kanban__col-header {
    border-top-color: #3b82f6;
}

.cbg-fe-kanban__col--delivered .cbg-fe-kanban__col-header {
    border-top-color: #22c55e;
}

.cbg-fe-kanban__col--returned .cbg-fe-kanban__col-header {
    border-top-color: #ef4444;
}

.cbg-fe-kanban__col--completed .cbg-fe-kanban__col-header {
    border-top-color: #6f42c1;
}

.cbg-fe-kanban__col-title {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1a1a1a;
}

.cbg-fe-kanban__col-count {
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
    background: #a3a3a3;
    border-radius: 99px;
    padding: 0.125rem 0.5rem;
    min-width: 1.25rem;
    text-align: center;
}

.cbg-fe-kanban__col--pending .cbg-fe-kanban__col-count {
    background: #f59e0b;
}

.cbg-fe-kanban__col--dispatched .cbg-fe-kanban__col-count {
    background: #3b82f6;
}

.cbg-fe-kanban__col--delivered .cbg-fe-kanban__col-count {
    background: #22c55e;
}

.cbg-fe-kanban__col--returned .cbg-fe-kanban__col-count {
    background: #ef4444;
}

.cbg-fe-kanban__col--completed .cbg-fe-kanban__col-count {
    background: #6f42c1;
}

/* ── Column Body (scrollable) ── */
.cbg-fe-kanban__col-body {
    flex: 1;
    padding: 0.5rem;
    overflow-y: auto;
    min-height: 60px;
    transition: background 0.15s;
}

.cbg-fe-kanban__col-body.drag-over {
    background: rgba(255, 102, 0, 0.04);
    outline: 2px dashed var(--primary-container);
    outline-offset: -4px;
    border-radius: 0 0 12px 12px;
}

.cbg-fe-kanban__col-body:empty::after {
    content: 'No tickets';
    display: block;
    text-align: center;
    padding: 2rem 0.5rem;
    color: #c4c4c4;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── Kanban Card ── */
.cbg-fe-kanban__card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    transition: all 0.15s;
    position: relative;
}

.cbg-fe-kanban__card:hover {
    border-color: var(--primary-container);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.cbg-fe-kanban__card:active,
.cbg-fe-kanban__card.is-dragging {
    cursor: grabbing;
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.cbg-fe-kanban__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.cbg-fe-kanban__card-id {
    font-size: 0.75rem;
    font-weight: 800;
    font-family: var(--font-headline);
    color: var(--primary-container);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cbg-fe-kanban__card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cbg-fe-kanban__card-carrier {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #71717a;
    background: #f4f4f5;
    padding: 0.0625rem 0.375rem;
    border-radius: 2px;
}

.cbg-fe-kanban__card-address {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cbg-fe-kanban__card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.625rem;
    color: #71717a;
}

.cbg-fe-kanban__card-meta .material-symbols-outlined {
    font-size: 0.75rem;
    vertical-align: middle;
}

.cbg-fe-kanban__card-orders {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}

.cbg-fe-kanban__card-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cbg-fe-kanban__card-cost {
    margin-left: auto;
    font-weight: 700;
    color: #1a1a1a;
}

/* ── Settings Gear ── */
.cbg-fe-kanban-settings {
    position: relative;
    display: inline-flex;
}

.cbg-fe-kanban-settings__btn {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.375rem;
    cursor: pointer;
    color: #71717a;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}

.cbg-fe-kanban-settings__btn:hover {
    color: #1a1a1a;
    border-color: #d4d4d8;
    background: #fafafa;
}

.cbg-fe-kanban-settings__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    min-width: 200px;
    z-index: 100;
    display: none;
}

.cbg-fe-kanban-settings__dropdown.is-open {
    display: block;
}

.cbg-fe-kanban-settings__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #1a1a1a;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

.cbg-fe-kanban-settings__item:hover {
    background: #f4f4f5;
}

.cbg-fe-kanban-settings__item input[type="checkbox"] {
    accent-color: var(--primary-container);
}

/* ── Board Toolbar ── */
.cbg-fe-kanban-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    gap: 1rem;
}

.cbg-fe-kanban-toolbar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #71717a;
}

/* ── Mobile — horizontal scroll ── */
@media (max-width: 768px) {
    .cbg-fe-kanban {
        padding-bottom: 1rem;
    }

    .cbg-fe-kanban__col {
        flex: 0 0 260px;
        min-width: 260px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   RECEIVING CHECKLIST — Trigger Row
   ═══════════════════════════════════════════════════════════════════ */

.cbg-rc-trigger-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.cbg-rc-trigger-row:hover {
    background: var(--surface-container);
    border-color: var(--primary-container);
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.08);
}

.cbg-rc-trigger-row:active {
    transform: scale(0.99);
}

.cbg-rc-trigger-row__icon {
    font-size: 1.125rem;
    color: #f59e0b;
    flex-shrink: 0;
}

.cbg-rc-trigger-row__label {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--on-surface);
    letter-spacing: 0.01em;
}

.cbg-rc-trigger-row__badge {
    display: inline-block;
    padding: 0.15rem 0.625rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    background: var(--surface-container-high);
    color: #a3a3a3;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.cbg-rc-trigger-row__arrow {
    font-size: 1.125rem;
    color: #a3a3a3;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.cbg-rc-trigger-row:hover .cbg-rc-trigger-row__arrow {
    transform: translateX(2px);
    color: var(--primary-container);
}

/* ─── Receipt Popup — close button & scrollable body ─────────────── */
.cbg-fe-payment-popup__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--on-surface-variant, #a3a3a3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.cbg-fe-payment-popup__close:hover {
    background: var(--surface-container-high);
    color: var(--on-surface);
}

.cbg-rc-popup-body {
    max-height: 65vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cbg-rc-popup-body::-webkit-scrollbar {
    width: 4px;
}

.cbg-rc-popup-body::-webkit-scrollbar-track {
    background: transparent;
}

.cbg-rc-popup-body::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   RECEIVING CHECKLIST — cbg-rc-*
   ═══════════════════════════════════════════════════════════════════ */

.cbg-rc-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-container-high, #e5e7eb);
    overflow: hidden;
    margin: 0.5rem 0 0.75rem;
}

.cbg-rc-progress-bar__fill {
    height: 100%;
    border-radius: 3px;
    background: #22c55e;
    transition: width 0.4s ease;
}

.cbg-rc-progress-bar__fill--short {
    background: #f59e0b;
}

.cbg-rc-progress-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cbg-rc-badge--ok {
    background: #dcfce7;
    color: #166534;
}

.cbg-rc-badge--short {
    background: #fef9c3;
    color: #854d0e;
}

.cbg-rc-badge--pending {
    background: var(--surface-container-high, #f3f4f6);
    color: #6b7280;
}

.cbg-rc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--outline-variant, #e4e4e7);
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
    background: var(--surface, #1a1c1d);
}

.cbg-rc-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--outline-variant, #2a2c2d);
    transition: background 0.15s;
}

.cbg-rc-row:last-child {
    border-bottom: none;
}

.cbg-rc-row--confirmed {
    background: rgba(34, 197, 94, 0.04);
}

.cbg-rc-status-icon {
    margin-top: 0.1rem;
}

.cbg-rc-product {
    flex: 1;
    min-width: 0;
}

.cbg-rc-product__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--on-surface, #f4f4f5);
    line-height: 1.3;
}

.cbg-rc-product__meta {
    font-size: 0.6875rem;
    color: #a3a3a3;
    margin-top: 0.15rem;
}

.cbg-rc-controls {
    flex-shrink: 0;
    width: 160px;
}

@media (max-width: 640px) {
    .cbg-rc-row {
        flex-wrap: wrap;
    }

    .cbg-rc-controls {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   FSM Action Buttons — Order Detail Drawer
   State-aware action strip rendered below the financial summary.
   ───────────────────────────────────────────────────────────────────────── */

.cbg-fe-fsm-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cbg-fe-fsm-action-btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.75rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
    text-align: left;
}

.cbg-fe-fsm-action-btn .material-symbols-outlined {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.cbg-fe-fsm-action-btn:hover:not(:disabled) {
    opacity: 0.88;
    transform: translateY(-1px);
}

.cbg-fe-fsm-action-btn:active:not(:disabled) {
    transform: translateY(0);
    opacity: 0.75;
}

.cbg-fe-fsm-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Production Complete — blue */
.cbg-fe-fsm-btn--production {
    background-color: #2563eb;
    color: #fff;
}

.cbg-fe-fsm-btn--production:hover:not(:disabled) {
    background-color: #1d4ed8;
}

/* Confirm Pickup — amber */
.cbg-fe-fsm-btn--pickup {
    background-color: #d97706;
    color: #fff;
}

.cbg-fe-fsm-btn--pickup:hover:not(:disabled) {
    background-color: #b45309;
}

/* Assign Trip Ticket — purple */
.cbg-fe-fsm-btn--tt {
    background-color: #7c3aed;
    color: #fff;
}

.cbg-fe-fsm-btn--tt:hover:not(:disabled) {
    background-color: #6d28d9;
}

/* Arrived at Pickup Location — orange */
.cbg-fe-fsm-btn--location {
    background-color: #ea580c;
    color: #fff;
}

.cbg-fe-fsm-btn--location:hover:not(:disabled) {
    background-color: #c2410c;
}

/* Confirm Delivery — teal */
.cbg-fe-fsm-btn--delivery {
    background-color: #0d9488;
    color: #fff;
}

.cbg-fe-fsm-btn--delivery:hover:not(:disabled) {
    background-color: #0f766e;
}

/* Confirm Customer Pickup — green */
.cbg-fe-fsm-btn--customer-pickup {
    background-color: #16a34a;
    color: #fff;
}

.cbg-fe-fsm-btn--customer-pickup:hover:not(:disabled) {
    background-color: #15803d;
}

/* ═══════════════════════════════════════════════════════════════════
   TRIP TICKET ASSIGN PANEL — Inline order drawer panel
   ═══════════════════════════════════════════════════════════════════ */

.cbg-fe-tt-assign-panel {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: cbg-fade-in 0.18s ease;
}

.cbg-fe-tt-assign-panel__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--on-surface);
}

.cbg-fe-tt-assign-panel__close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    padding: 0.25rem;
    border-radius: 50%;
    transition: background 0.15s;
}

.cbg-fe-tt-assign-panel__close:hover {
    background: var(--surface-container-high);
}

/* Tabs */
.cbg-fe-tt-assign-panel__tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--surface-container);
    border-radius: var(--radius-md);
    padding: 0.25rem;
}

.cbg-fe-tt-tab {
    flex: 1;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: all 0.15s;
}

.cbg-fe-tt-tab--active {
    background: var(--surface);
    color: var(--on-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Tab content */
.cbg-fe-tt-tab-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cbg-fe-tt-tab-content label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--on-surface-variant);
}

.cbg-fe-tt-tab-content input[type="text"],
.cbg-fe-tt-tab-content input[type="number"],
.cbg-fe-tt-tab-content select,
.cbg-fe-tt-tab-content textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--on-surface);
    font-size: 0.8125rem;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.cbg-fe-tt-tab-content input:focus,
.cbg-fe-tt-tab-content select:focus,
.cbg-fe-tt-tab-content textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* Results list */
.cbg-fe-tt-results {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.cbg-fe-tt-result-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    color: var(--on-surface);
    cursor: pointer;
    border-bottom: 1px solid var(--outline-variant);
    transition: background 0.12s;
}

.cbg-fe-tt-result-item:last-child {
    border-bottom: none;
}

.cbg-fe-tt-result-item:hover {
    background: var(--surface-container);
}

/* Selected info row */
.cbg-fe-tt-selected-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
}

/* ── Payment popup close button (shared) ── */
.cbg-fe-payment-popup__close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.cbg-fe-payment-popup__close-btn:hover {
    background: var(--surface-container-high);
    color: var(--on-surface);
}

/* ── Trip Ticket popup — wider card + tabs ── */
.cbg-fe-tt-popup {
    max-width: 480px;
}

.cbg-fe-tt-popup__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--outline-variant);
    padding: 0 1.25rem;
    background: var(--surface-container-high);
}

.cbg-fe-tt-popup__tabs .cbg-fe-tt-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    padding: 0.75rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    border-radius: 0;
    justify-content: center;
}

.cbg-fe-tt-popup__tabs .cbg-fe-tt-tab--active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: transparent;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   3-ZONE ORDER DRAWER LAYOUT
   Modifier: .cbg-fe-drawer--3zone
   Zones: header (fixed) | body (scrollable) | footer (sticky)
   ═══════════════════════════════════════════════════════════════ */

/* The drawer already uses display:flex;flex-direction:column from base.
   --3zone ensures the footer is sticky and the body truly scrolls. */
.cbg-fe-drawer--3zone {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* prevent drawer itself from scrolling */
}

.cbg-fe-drawer--3zone .cbg-fe-drawer__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest, #fff);
    min-height: 4rem;
}

/* Header left: title + badge stacked */
.cbg-fe-drawer__header-left {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.cbg-fe-drawer__header-title-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.cbg-fe-drawer__header-subtitle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--on-surface-variant);
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* Header right: icon action buttons (from config, rendered by JS) */
.cbg-fe-drawer__header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.cbg-fe-drawer--3zone .cbg-fe-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    min-height: 0;
    /* required for flex children to scroll */
}

/* Dynamic footer — stacks state strip + action buttons + checklist */
.cbg-fe-drawer__footer--dynamic {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest, #fff);
    flex-shrink: 0;
}

/* State strip override inside dynamic footer (no standalone positioning needed) */
.cbg-fe-drawer__footer--dynamic .cbg-fe-state-strip {
    padding: 0.875rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--outline-variant);
    margin: 0;
}

/* FSM action buttons zone */
.cbg-fe-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    empty-cells: hide;
}

.cbg-fe-drawer-actions:empty {
    padding: 0;
}

/* Checklist button in footer */
.cbg-fe-drawer-checklist-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    border: none;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest, #fff);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--on-surface);
    transition: background 0.15s;
    text-align: left;
}

.cbg-fe-drawer-checklist-btn:hover {
    background: var(--surface-container-low);
}

.cbg-fe-drawer-checklist-btn .material-symbols-outlined {
    color: var(--primary);
    flex-shrink: 0;
}

.cbg-fe-drawer-checklist-btn__label {
    flex: 1;
}

.cbg-fe-drawer-checklist-btn__badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 99px;
    background: var(--surface-container-high);
    color: var(--on-surface-variant);
    min-width: 2.5rem;
    text-align: center;
}

.cbg-fe-drawer-checklist-btn__badge.cbg-rc-badge--ok {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
}

.cbg-fe-drawer-checklist-btn__badge.cbg-rc-badge--short {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
}

.cbg-fe-drawer-checklist-btn__badge.cbg-rc-badge--pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}
/* ═══════════════════════════════════════════════════════════════════
   Action Items (order drawer)
   ═══════════════════════════════════════════════════════════════════ */
.cbg-fe-action-items-section {
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md, 8px);
    padding: 0.875rem 1rem;
    background: #fafafa;
}
.cbg-fe-action-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.625rem 0;
}
.cbg-fe-ai-empty {
    font-size: 0.75rem;
    color: #a3a3a3;
    padding: 0.5rem 0;
    font-style: italic;
}
.cbg-fe-ai-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-sm, 6px);
    padding: 0.625rem 0.75rem;
}
.cbg-fe-ai-item--done {
    opacity: 0.7;
}
.cbg-fe-ai-item--done .cbg-fe-ai-item__title {
    text-decoration: line-through;
}
.cbg-fe-ai-item__main {
    flex: 1;
    min-width: 0;
}
.cbg-fe-ai-item__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #27272a;
    line-height: 1.3;
}
.cbg-fe-ai-item__desc {
    font-size: 0.75rem;
    color: #525252;
    margin-top: 0.25rem;
    white-space: pre-wrap;
}
.cbg-fe-ai-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
    align-items: center;
}
.cbg-fe-ai-item__meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #525252;
    background: #f4f4f5;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
}
.cbg-fe-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
}
.cbg-fe-ai-chip--open {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}
.cbg-fe-ai-chip--done {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}
.cbg-fe-ai-chip--cancelled {
    background: rgba(115, 115, 115, 0.12);
    color: #525252;
}
.cbg-fe-ai-chip--pending {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.cbg-fe-ai-item--pending {
    border-left: 2px dashed #f59e0b;
}
.cbg-fe-ai-item__actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.cbg-fe-ai-btn {
    background: transparent;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-sm, 6px);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #525252;
    transition: background 0.15s ease, color 0.15s ease;
}
.cbg-fe-ai-btn:hover {
    background: #f4f4f5;
}
.cbg-fe-ai-btn--complete:hover {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.3);
}
.cbg-fe-ai-btn--delete:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.3);
}
.cbg-fe-action-item-add {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: #1a1c1d;
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cbg-fe-action-item-add:hover {
    background: #343434;
}

/* Action Item dialog */
.cbg-ai-dialog {
    width: 480px;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem);
}
.cbg-ai-dialog .cbg-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e4e4e7;
}
.cbg-ai-dialog .cbg-dialog__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1c1d;
}
.cbg-ai-dialog .cbg-dialog__close {
    background: transparent;
    border: none;
    color: #525252;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
}
.cbg-ai-dialog .cbg-dialog__body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.cbg-ai-dialog .cbg-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #e4e4e7;
}
.cbg-ai-field {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}
.cbg-ai-field > label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #525252;
}
.cbg-ai-input {
    border: 1px solid #d4d4d8;
    border-radius: var(--radius-sm, 6px);
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    color: #1a1c1d;
    background: #fff;
    font-family: inherit;
}
.cbg-ai-input:focus {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
    border-color: #2563eb;
}
.cbg-ai-input[disabled] {
    background: #f4f4f5;
    color: #a3a3a3;
    cursor: not-allowed;
}
.cbg-ai-dialog__error {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-sm, 6px);
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
}
.cbg-ai-dialog__cancel {
    background: #f4f4f5;
    color: #27272a;
    border: none;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
}
.cbg-ai-dialog__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
}

/* ── Clickable affordance on action item rows ── */
.cbg-fe-ai-item[data-item-id] {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.cbg-fe-ai-item[data-item-id]:hover {
    background: rgba(99, 102, 241, 0.06);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.25);
}
.cbg-fe-ai-item--pending {
    cursor: default !important;
}
.cbg-fe-ai-item--pending:hover {
    background: transparent !important;
    box-shadow: none !important;
}

/* ── Action Item Detail Dialog ── */
.cbg-ai-detail-dialog {
    max-width: 480px;
    width: 100%;
}
.cbg-ai-detail-dialog .cbg-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--surface-container-high, #e5e7eb);
}
.cbg-ai-detail-dialog .cbg-dialog__title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cbg-ai-detail-dialog .cbg-dialog__close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}
.cbg-ai-detail-dialog .cbg-dialog__close:hover {
    background: rgba(0, 0, 0, 0.06);
}
.cbg-ai-detail-dialog .cbg-dialog__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.cbg-ai-detail-dialog .cbg-dialog__footer {
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--surface-container-high, #e5e7eb);
}
.cbg-ai-detail__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.cbg-ai-detail__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
}
.cbg-ai-detail__desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
    background: rgba(0, 0, 0, 0.03);
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
}
.cbg-ai-detail__desc--empty {
    color: #9ca3af;
    font-style: italic;
}
.cbg-ai-detail__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
}
.cbg-ai-detail__row {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.75rem;
    align-items: start;
}
.cbg-ai-detail__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.625rem;
}
.cbg-ai-detail__value {
    color: #111827;
    word-break: break-word;
}
.cbg-ai-detail__close-btn {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
}

/* ── v2 Design Tokens — --cmy-* namespace (M0) ──────────────────── */
:root {

  /* Colour — Primary (Terracotta / Burnt Orange) */
  --cmy-primary: #a33e00;
  --cmy-primary-container: #ff6600;
  --cmy-on-primary: #ffffff;
  --cmy-on-primary-container: #561d00;
  --cmy-primary-fixed: #ffdbcd;
  --cmy-primary-fixed-dim: #ffb596;

  /* Colour — Secondary (Graphite / Neutral Warm) */
  --cmy-secondary: #5f5e5e;
  --cmy-secondary-anchor: #343434;
  --cmy-secondary-container: #e4e2e1;
  --cmy-on-secondary-container: #656464;

  /* Colour — Tertiary (Azure / Info) */
  --cmy-tertiary: #0062a1;
  --cmy-tertiary-container: #009cfc;
  --cmy-tertiary-fixed: #d0e4ff;

  /* Colour — Error */
  --cmy-error: #ba1a1a;
  --cmy-error-container: #ffdad6;

  /* Colour — Success */
  --cmy-success: #16a34a;

  /* Colour — Surface / Neutrals (warm off-white stack) */
  --cmy-background: #f9f9fb;
  --cmy-surface-container-lowest: #ffffff;
  --cmy-surface-container-low: #f3f3f5;
  --cmy-surface-container: #eeeef0;
  --cmy-surface-container-high: #e8e8ea;
  --cmy-surface-container-highest: #e2e2e4;
  --cmy-surface-dim: #d9dadc;
  --cmy-on-surface: #1a1c1d;
  --cmy-on-surface-variant: #5a4136;
  --cmy-inverse-surface: #2f3132;
  --cmy-outline: #8e7164;
  --cmy-outline-variant: #e3bfb1;

  /* Radius */
  --cmy-radius-sm: 2px;
  --cmy-radius-md: 6px;
  --cmy-radius-lg: 8px;
  --cmy-radius-xl: 12px;
  --cmy-radius-pill: 9999px;

  /* Shadows */
  --cmy-shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
  --cmy-shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --cmy-shadow-lg: 0 10px 40px rgba(0,0,0,0.12);

  /* Tracking scale */
  --cmy-tracking-tight: -0.02em;
  --cmy-tracking-wide: 0.04em;
  --cmy-tracking-wider: 0.1em;
  --cmy-tracking-widest: 0.2em;

  /* Transition */
  --cmy-transition: all 0.15s ease;

  /* Layout */
  --cmy-sidebar-width: 256px;
  --cmy-header-height: 64px;

  /* Status semantic — Pending */
  --cmy-status-pending-bg: #fff7ed;
  --cmy-status-pending-fg: #ea580c;
  --cmy-status-pending-bd: #fed7aa;

  /* Status semantic — Processing */
  --cmy-status-processing-bg: #eff6ff;
  --cmy-status-processing-fg: #2563eb;
  --cmy-status-processing-bd: #bfdbfe;

  /* Status semantic — Complete (deeper green per business-owner request) */
  --cmy-status-complete-bg: #dcfce7;
  --cmy-status-complete-fg: #15803d;
  --cmy-status-complete-bd: #86efac;

  /* Status semantic — Cancelled */
  --cmy-status-cancelled-bg: #fef2f2;
  --cmy-status-cancelled-fg: #dc2626;
  --cmy-status-cancelled-bd: #fecaca;

  /* Status semantic — On Hold */
  --cmy-status-onhold-bg: #fefce8;
  --cmy-status-onhold-fg: #ca8a04;
  --cmy-status-onhold-bd: #fde68a;

  /* Status semantic — Ready (sky-blue per business-owner request) */
  --cmy-status-ready-bg: #e0f2fe;
  --cmy-status-ready-fg: #0369a1;
  --cmy-status-ready-bd: #7dd3fc;

  /* v2 chrome alias tokens — sidebar, surface, nav (task #21) */
  --cmy-sidebar-bg: var(--cmy-secondary-anchor);
  --cmy-surface: var(--cmy-background);
  --cmy-header-bg: var(--cmy-surface-container-lowest);
  --cmy-nav-text: #c4c4c4;
  --cmy-nav-group-text: #737373;
  --cmy-nav-hover-bg: rgba(255,255,255,0.05);
  --cmy-nav-active-bg: rgba(255,102,0,0.15);
  --cmy-nav-active-border: var(--cmy-primary-container);

  /* M8 D1 — keyboard-shortcut badge on primary CTA buttons (story #218) */
  --cmy-btn-kbd-bg: rgba(255,255,255,0.2);
}
/* ── end v2 Design Tokens ───────────────────────────────────────── */

/* ── v2 Chrome — Shell Layout ──────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   v1.0.64 — Global [hidden] safety rule.
   Many .cmy-* component selectors set explicit display: (flex / grid /
   inline-flex etc.) which silently outrank the browser default
   [hidden]{display:none}. Symptoms: panels visible-by-default, buttons
   that won't hide, empty states that won't dismiss. Three component-level
   patches landed before this (.cmy-empty-state[hidden], .cmy-notifications-panel[hidden],
   plus the implicit need on .cmy-btn). Adding one global rule with
   !important so the HTML5 hidden attribute always wins, regardless of
   which component declares display.
   ───────────────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

.cmy-app {
  display: flex;
  height: 100vh;    /* fallback for older browsers */
  height: 100dvh;   /* modern: excludes browser UI chrome */
  overflow: hidden;
  background: var(--cmy-surface);
}
.cmy-shell {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;    /* fallback for older browsers */
  height: 100dvh;   /* modern: excludes browser UI chrome */
  background: var(--cmy-surface);
}
.cmy-sidebar-slot {
  width: var(--cmy-sidebar-width);
  flex-shrink: 0;
  background: var(--cmy-sidebar-bg);
  height: 100vh;    /* fallback for older browsers */
  height: 100dvh;   /* modern: excludes browser UI chrome */
  position: sticky;
  top: 0;
  z-index: 40;
}
.cmy-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cmy-header-slot {
  height: var(--cmy-header-height);
  flex-shrink: 0;
  width: 100%;
  background: var(--cmy-header-bg);
}
.cmy-content {
  flex: 1;
  overflow-y: auto;
  background: var(--cmy-surface);
  padding: 1rem;
}
.cmy-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.75rem 2.5rem;
}
/* ── end v2 Chrome — Shell Layout ──────────────────────────────── */

/* ── v2 Chrome — Sidebar ──────────────────────────────────────── */

/* Extend :root with sidebar-specific tokens not covered by the M0 token block */
:root {
  /* Nav icon colour (inactive) and sidebar structural divider */
  --cmy-nav-icon-text:   #8a8a8a;
  --cmy-sidebar-divider: rgba(255,255,255,0.06);
}

/* ── Sidebar shell ──────────────────────────────────────────────── */
.cmy-sidebar {
  width: var(--cmy-sidebar-width);
  background: var(--cmy-sidebar-bg);
  color: var(--cmy-nav-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  z-index: 40;
}

/* ── Brand block ────────────────────────────────────────────────── */
.cmy-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--cmy-sidebar-divider);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cmy-brand-logo {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 6px;
}
.cmy-brand-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--cmy-on-primary);
  letter-spacing: var(--cmy-tracking-tight);
}
.cmy-brand-tagline {
  margin-top: 6px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--cmy-tracking-widest);
  color: var(--cmy-primary-container);
  text-transform: uppercase;
}

/* ── Nav wrapper ────────────────────────────────────────────────── */
.cmy-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0; /* v1.0.55 — flush left/right edges */
}

/* ── Nav groups ─────────────────────────────────────────────────── */
.cmy-nav-group {
  margin-bottom: 6px;
}
.cmy-nav-group-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--cmy-tracking-widest);
  color: var(--cmy-nav-group-text);
  padding: 12px 10px 8px 22px; /* v1.0.55 — left-indent matches nav items */
  text-transform: uppercase;
}

/* ── Nav items ──────────────────────────────────────────────────── */
.cmy-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px 8px 22px; /* v1.0.55 — left-indent for consistent visual rail */
  background: transparent;
  border: 0;
  border-radius: 0; /* v1.0.54 — square corners per UX feedback */
  color: var(--cmy-nav-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--cmy-transition);
  text-align: left;
}
.cmy-nav-item:hover {
  background: var(--cmy-nav-hover-bg);
  color: var(--cmy-on-primary);
}
.cmy-nav-item.is-active {
  background:  var(--cmy-nav-active-bg);
  box-shadow:  inset 2px 0 0 var(--cmy-nav-active-border);
  font-weight: bold;
  color:       #fff;
}
.cmy-nav-item.is-active .cmy-nav-icon {
  color: #fff;
}

/* ── Nav icon + label ───────────────────────────────────────────── */
.cmy-nav-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--cmy-nav-icon-text);
}
.cmy-nav-label {
  /* v1.0.69 — drop flex:1 so the badge sits inline beside the label
     instead of being pushed to the right edge. The chevron uses
     margin-left:auto below to stay right-aligned for parent items. */
  flex: 0 1 auto;
}
.cmy-nav-chevron {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--cmy-nav-icon-text);
  transition: var(--cmy-transition);
  margin-left: auto; /* v1.0.69 — keep chevron right-aligned now that label no longer fills */
}

/* ── Submenu (child items) ──────────────────────────────────────── */
.cmy-nav-submenu {
  display: none;
  flex-direction: column;
  padding-left: 16px;
}
.cmy-nav-submenu.is-open {
  display:    flex;
  background: var(--cmy-nav-active-bg);
  box-shadow: inset 2px 0 0 var(--cmy-nav-active-border);
}
.cmy-nav-item-sub {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.8125rem;
}

/* v1.0.54 — sub-menu active state: orange text only, no bg, no shadow */
.cmy-nav-item.cmy-nav-item-sub.is-active {
  background:  transparent;
  box-shadow:  none;
  color:       #ff6600;
}
.cmy-nav-item.cmy-nav-item-sub.is-active .cmy-nav-icon,
.cmy-nav-item.cmy-nav-item-sub.is-active .cmy-nav-label {
  color: #ff6600;
}

/* ── Sidebar footer — user chip ─────────────────────────────────── */
.cmy-sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--cmy-sidebar-divider);
}
.cmy-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--cmy-radius-md);
  cursor: pointer;
  transition: var(--cmy-transition);
}
.cmy-user:hover {
  background: var(--cmy-nav-hover-bg);
}
.cmy-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cmy-primary-container);
  color: var(--cmy-on-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: var(--cmy-tracking-wide);
  flex-shrink: 0;
}
.cmy-user-meta {
  flex: 1;
  min-width: 0;
}
.cmy-user-name {
  color: var(--cmy-on-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}
.cmy-user-role {
  color: var(--cmy-nav-icon-text);
  font-size: 0.6875rem;
}
.cmy-user-chevron {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--cmy-nav-icon-text);
}

/* User-chip native button reset (so it inherits .cmy-user layout cleanly) */
button.cmy-user {
  background: transparent;
  border: 0;
  width: 100%;
  font: inherit;
  text-align: left;
  color: inherit;
}

/* Popover wrapper — anchors the menu above the chip */
.cmy-user-wrap {
  position: relative;
}

/* User menu popover */
.cmy-user-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--cmy-surface);
  border: 1px solid var(--cmy-outline-variant);
  border-radius: var(--cmy-radius-md);
  padding: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 1000;
}
.cmy-user-menu[hidden] {
  display: none;
}

/* Menu item */
.cmy-user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cmy-on-surface);
  text-decoration: none;
  border-radius: var(--cmy-radius-sm);
  transition: var(--cmy-transition);
}
.cmy-user-menu-item:hover,
.cmy-user-menu-item:focus-visible {
  background: var(--cmy-nav-hover-bg);
  color: var(--cmy-on-surface);
  outline: none;
}
.cmy-user-menu-item .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

/* Open-state chevron rotation */
.cmy-user[aria-expanded="true"] .cmy-user-chevron {
  transform: rotate(180deg);
  transition: transform 0.15s ease;
}

/* ── end v2 Chrome — Sidebar ──────────────────────────────────── */

/* ── v2 Chrome — Header ──────────────────────────────────────── */

/* Extend :root with header-specific tokens not covered by the M0 token block */
:root {
  /* Display typeface (Montserrat) — used by .cmy-page-title */
  --cmy-font-display: 'Montserrat', sans-serif;
}

/* ── Header shell ───────────────────────────────────────────────── */
.cmy-header {
  height: var(--cmy-header-height);
  background: var(--cmy-header-bg);
  border-bottom: 1px solid var(--cmy-surface-container-highest);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  flex-shrink: 0;
  width:100%;
}

/* ── Header zones ───────────────────────────────────────────────── */
.cmy-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmy-header-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Breadcrumb row ─────────────────────────────────────────────── */
.cmy-crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--cmy-tracking-wider);
  text-transform: uppercase;
}

.cmy-crumb {
  color: var(--cmy-nav-icon-text);
}

.cmy-crumb-active {
  color: var(--cmy-primary-container);
}

.cmy-crumb-sep {
  color: var(--cmy-nav-text);
  font-size: 14px;
  line-height: 1;
}

/* ── Page title ─────────────────────────────────────────────────── */
.cmy-page-title {
  font-family: var(--cmy-font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: var(--cmy-tracking-tight);
  margin: 0;
  line-height: 1.1;
  color: var(--cmy-on-surface);
}

.cmy-page-subtitle {
  display: none;
}

/* v1.0.70 — render subtitle in shared header (was globally hidden).
   v1.0.71 — bump margin-top + reduce h1 line-height crowding so subtitle
   has breathing room below the title (Pickup List "improve spacing" fix). */
.cmy-header-left .cmy-page-subtitle {
  display: block;
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--cmy-on-surface-variant);
  line-height: 1.4;
}
.cmy-header-left .cmy-page-title {
  margin-bottom: 0;
}
/* v1.0.71 — link-style breadcrumb crumb (parent crumbs are now <a>). */
.cmy-crumb-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: var(--cmy-transition);
}
.cmy-crumb-link:hover,
.cmy-crumb-link:focus-visible {
  color: var(--cmy-primary-container);
  border-bottom-color: currentColor;
  outline: none;
}

/* ── Header action slot ─────────────────────────────────────────── */
.cmy-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Button primitives ──────────────────────────────────────────── */
.cmy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--cmy-tracking-wide);
  border-radius: var(--cmy-radius-md);
  border: 0;
  cursor: pointer;
  transition: var(--cmy-transition);
  white-space: nowrap;
  text-decoration: none;
}

.cmy-btn-ghost {
  background: transparent;
  color: var(--cmy-on-surface);
}

.cmy-btn-ghost:hover {
  background: var(--cmy-surface-container-high);
}

.cmy-btn-icon {
  padding: 0.5rem;
  position: relative;
}

/* ── User chip (right-zone placeholder) ────────────────────────── */
.cmy-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--cmy-radius-md);
  cursor: pointer;
  transition: var(--cmy-transition);
}

.cmy-user-chip:hover {
  background: var(--cmy-surface-container-high);
}

.cmy-user-chip-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cmy-on-surface);
}

.cmy-user-chip-chevron {
  font-size: 18px;
  line-height: 1;
  color: var(--cmy-on-surface-variant);
}

/* ── end v2 Chrome — Header ──────────────────────────────────────── */

/* ── v2 Orders — Page + Table + Badges ────────────────────────── */

/* ── Status & warning semantic tokens not covered by M0 ─────────── */
:root {
  /* In-transit status (tertiary family, mirrors ready) */
  --cmy-status-intransit-bg:  var(--cmy-tertiary-fixed);
  --cmy-status-intransit-fg:  var(--cmy-tertiary);
  --cmy-status-intransit-bd:  var(--cmy-tertiary-container);

  /* Warning (amber) — for High Priority chip */
  --cmy-warning:              #ca8a04;
  --cmy-warning-container:    #fefce8;
  --cmy-warning-border:       #fde68a;

  /* Muted label gray (used in table header) */
  --cmy-label-muted:          #525252;

  /* Monospace font stack */
  --cmy-font-mono:            'IBM Plex Mono', ui-monospace, monospace;

  /* Success hover (§6.1 — used by .cmy-btn-success:hover) */
  --cmy-success-hover:        #15803d;
}

/* ── Button variants (primary/secondary — referenced by task #67) ── */
.cmy-btn-primary {
  background: var(--cmy-primary-container);
  color:      var(--cmy-on-primary);
  border:     0;
}

.cmy-btn-primary:hover {
  background: var(--cmy-primary);
}

.cmy-btn-secondary {
  background: var(--cmy-surface-container-lowest);
  color:      var(--cmy-on-surface);
  border:     1px solid var(--cmy-surface-container-highest);
}

.cmy-btn-secondary:hover {
  background: var(--cmy-surface-container-high);
}

.cmy-btn-sm {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--cmy-radius-md);
}

.cmy-btn-success {
  background: var(--cmy-success);
  color:      var(--cmy-on-primary);
  border:     0;
}

.cmy-btn-success:hover {
  background: var(--cmy-success-hover);
}

.cmy-btn-outline {
  background: transparent;
  color:      var(--cmy-on-surface);
  border:     1px solid var(--cmy-outline);
}

.cmy-btn-outline:hover {
  background: var(--cmy-surface-container-high);
}

.cmy-btn[disabled],
.cmy-btn.is-disabled {
  opacity:        0.4;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ── Orders page wrapper ────────────────────────────────────────── */
.cmy-orders-wrap {
  padding: 20px 28px 40px;
}

/* ── Table conductor-rail wrapper ───────────────────────────────── */
.cmy-table-wrap {
  border-top:    2px solid var(--cmy-primary-container);
  border-radius: var(--cmy-radius-xl);
  background:    var(--cmy-surface-container-low);
  overflow:      hidden;
  box-shadow:    var(--cmy-shadow-sm);
  margin-bottom: 20px;
}

/* ── Inner table padding shell ──────────────────────────────────── */
.cmy-table-inner {
  padding: 8px;
}

/* ── <table> element ────────────────────────────────────────────── */
.cmy-table {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0 6px;
}

/* ── Table header row ───────────────────────────────────────────── */
.cmy-table-head-row th,
.cmy-th {
  background:     var(--cmy-surface-container-highest);
  padding:        10px 14px;
  font-size:      0.625rem;
  font-weight:    700;
  letter-spacing: var(--cmy-tracking-widest);
  color:          var(--cmy-label-muted);
  text-transform: uppercase;
  text-align:     left;
  white-space:    nowrap;
}

.cmy-table-head-row th:first-child,
.cmy-th:first-child {
  border-radius: var(--cmy-radius-md) 0 0 var(--cmy-radius-md);
}

.cmy-table-head-row th:last-child,
.cmy-th:last-child {
  border-radius: 0 var(--cmy-radius-md) var(--cmy-radius-md) 0;
}

/* right-align numeric header columns */
.cmy-th-total {
  text-align: right;
}

/* ── Data row ───────────────────────────────────────────────────── */
.cmy-table-row {
  cursor:     pointer;
  transition: var(--cmy-transition);
}

.cmy-table-row td,
.cmy-td {
  background:    var(--cmy-surface-container-lowest);
  padding:       12px 14px;
  font-size:     0.8125rem;
  vertical-align: middle;
  border-top:    1px solid transparent;
  border-bottom: 1px solid transparent;
  transition:    var(--cmy-transition);
}

.cmy-table-row td:first-child,
.cmy-td:first-child {
  border-radius:  var(--cmy-radius-lg) 0 0 var(--cmy-radius-lg);
  border-left:    1px solid transparent;
}

.cmy-table-row td:last-child,
.cmy-td:last-child {
  border-radius: 0 var(--cmy-radius-lg) var(--cmy-radius-lg) 0;
  border-right:  1px solid transparent;
}

.cmy-table-row:hover td,
.cmy-table-row:hover .cmy-td {
  background:   var(--cmy-surface-container-lowest);
  border-color: var(--cmy-surface-container-highest);
  box-shadow:   var(--cmy-shadow-sm);
}

.cmy-table-row:hover td:first-child,
.cmy-table-row:hover .cmy-td:first-child {
  border-left-color: var(--cmy-surface-container-highest);
}

.cmy-table-row:hover td:last-child,
.cmy-table-row:hover .cmy-td:last-child {
  border-right-color: var(--cmy-surface-container-highest);
}

/* ── Column-specific cell helpers ───────────────────────────────── */
.cmy-td-total {
  text-align:  right;
  font-family: var(--cmy-font-mono);
  font-weight: 700;
  font-size:   0.875rem;
  color:       var(--cmy-on-surface);
}

.cmy-td-id {
  font-family: var(--cmy-font-mono);
  font-weight: 700;
  font-size:   0.8125rem;
  color:       var(--cmy-on-surface);
}

.cmy-td-customer {
  font-weight: 600;
  color:       var(--cmy-on-surface);
}

.cmy-td-status {
  white-space: nowrap;
}

.cmy-td-priority {
  white-space: nowrap;
}

/* ── Order ID + customer name sub-line ──────────────────────────── */
.cmy-order-id {
  font-family: var(--cmy-font-mono);
  font-weight: 700;
  font-size:   0.8125rem;
  color:       var(--cmy-on-surface);
  line-height: 1.2;
}

.cmy-order-customer {
  font-size:  0.6875rem;
  color:      var(--cmy-on-surface-variant);
  margin-top: 2px;
}

/* ── Items preview cell ─────────────────────────────────────────── */
.cmy-item-preview {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.cmy-item-preview-row {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   6px;
  font-size:             0.75rem;
  align-items:           baseline;
}

.cmy-item-preview-qty {
  font-family: var(--cmy-font-mono);
  font-weight: 700;
  color:       var(--cmy-primary);
  min-width:   22px;
}

.cmy-item-preview-name {
  color:         var(--cmy-on-surface);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.cmy-item-overflow {
  /* button reset */
  -webkit-appearance: none;
  appearance:         none;
  background:         transparent;
  border:             none;
  padding:            0;
  /* visual */
  font-size:          0.6875rem;
  color:              var(--cmy-primary);
  margin-top:         2px;
  font-style:         italic;
  cursor:             pointer;
  text-align:         left;
}
.cmy-item-overflow:hover {
  text-decoration: underline;
}

/* Hidden items — concealed until parent gains .is-expanded */
.cmy-item-preview-row--hidden {
  display: none;
}
.cmy-item-preview.is-expanded .cmy-item-preview-row--hidden {
  display: grid;
}
/* Hide the chip once expanded; collapse label is handled by aria-expanded */
.cmy-item-preview.is-expanded .cmy-item-overflow {
  display: none;
}

/* ── Handler cell (avatar + name) ───────────────────────────────── */
.cmy-handler {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.cmy-handler-name {
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--cmy-on-surface);
}

.cmy-avatar-sm {
  width:       22px;
  height:      22px;
  border-radius: 50%;
  background:  var(--cmy-primary-container);
  color:       var(--cmy-on-primary);
  display:     grid;
  place-items: center;
  font-weight: 700;
  font-size:   0.625rem;
  letter-spacing: var(--cmy-tracking-wide);
  flex-shrink: 0;
}

/* ── Status badge ───────────────────────────────────────────────── */
.cmy-status-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       2px 8px;
  border:        1px solid transparent;
  border-radius: var(--cmy-radius-pill);
  font-size:     0.625rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-widest);
  white-space:   nowrap;
}

.cmy-badge-dot {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  flex-shrink:  0;
}

/* Status badge — Pending */
.cmy-status-badge--pending {
  background:   var(--cmy-status-pending-bg);
  color:        var(--cmy-status-pending-fg);
  border-color: var(--cmy-status-pending-bd);
}

.cmy-status-badge--pending .cmy-badge-dot {
  background: var(--cmy-status-pending-fg);
}

/* Status badge — Processing */
.cmy-status-badge--processing {
  background:   var(--cmy-status-processing-bg);
  color:        var(--cmy-status-processing-fg);
  border-color: var(--cmy-status-processing-bd);
}

.cmy-status-badge--processing .cmy-badge-dot {
  background: var(--cmy-status-processing-fg);
}

/* Status badge — Complete */
.cmy-status-badge--complete {
  background:   var(--cmy-status-complete-bg);
  color:        var(--cmy-status-complete-fg);
  border-color: var(--cmy-status-complete-bd);
}

.cmy-status-badge--complete .cmy-badge-dot {
  background: var(--cmy-status-complete-fg);
}

/* Status badge — Cancelled */
.cmy-status-badge--cancelled {
  background:   var(--cmy-status-cancelled-bg);
  color:        var(--cmy-status-cancelled-fg);
  border-color: var(--cmy-status-cancelled-bd);
}

.cmy-status-badge--cancelled .cmy-badge-dot {
  background: var(--cmy-status-cancelled-fg);
}

/* Status badge — On Hold */
.cmy-status-badge--on-hold {
  background:   var(--cmy-status-onhold-bg);
  color:        var(--cmy-status-onhold-fg);
  border-color: var(--cmy-status-onhold-bd);
}

.cmy-status-badge--on-hold .cmy-badge-dot {
  background: var(--cmy-status-onhold-fg);
}

/* Status badge — Ready */
.cmy-status-badge--ready {
  background:   var(--cmy-status-ready-bg);
  color:        var(--cmy-status-ready-fg);
  border-color: var(--cmy-status-ready-bd);
}

.cmy-status-badge--ready .cmy-badge-dot {
  background: var(--cmy-status-ready-fg);
}

/* Status badge — In Transit */
.cmy-status-badge--in-transit {
  background:   var(--cmy-status-intransit-bg);
  color:        var(--cmy-status-intransit-fg);
  border-color: var(--cmy-status-intransit-bd);
}

.cmy-status-badge--in-transit .cmy-badge-dot {
  background: var(--cmy-status-intransit-fg);
}

/* Status badge — At Location (purple/tertiary — same family as in-transit ready) */
.cmy-status-badge--at-location {
  background:   var(--cmy-tertiary-fixed, #f3e8ff);
  color:        var(--cmy-on-tertiary-fixed, #6b21a8);
  border-color: var(--cmy-tertiary-fixed-dim, #e9d5ff);
}

.cmy-status-badge--at-location .cmy-badge-dot {
  background: var(--cmy-on-tertiary-fixed, #6b21a8);
}

/* Status badge — Refunded (rose/red, distinct from cancelled) */
.cmy-status-badge--refunded {
  background:   var(--cmy-status-cancelled-bg, #fef2f2);
  color:        var(--cmy-status-cancelled-fg, #dc2626);
  border-color: var(--cmy-status-cancelled-bd, #fecaca);
  text-decoration: line-through;
}

.cmy-status-badge--refunded .cmy-badge-dot {
  background: var(--cmy-status-cancelled-fg, #dc2626);
}

/* Status badge — Default (graceful fallback for unmapped statuses) */
.cmy-status-badge--default {
  background:   var(--cmy-surface-container-low, #f8fafc);
  color:        var(--cmy-on-surface-variant, #64748b);
  border-color: var(--cmy-outline-variant, #e2e8f0);
}

.cmy-status-badge--default .cmy-badge-dot {
  background: var(--cmy-on-surface-variant, #64748b);
}

/* ── Time-slot chip (story #174) ───────────────────────────────────
   Tokens:
     bg    → --cmy-surface-container-low  (surface-2 tier — lighter than table rows)
     fg    → --cmy-on-surface-variant     (text-2 tier — muted, distinct from primary label)
     bd    → --cmy-outline-variant        (hairline border from palette, no hex)
   Visually distinct from .cmy-status-badge: no dot icon, softer bg, smaller text, clock icon optional.
───────────────────────────────────────────────────────────────────── */
body.commy-v2 .cmy-slot-chip {
  display:       inline-flex;
  align-items:   center;
  padding:       4px 8px;
  border-radius: var(--cmy-radius-pill);
  border:        1px solid var(--cmy-outline-variant);
  background:    var(--cmy-surface-container-low);
  color:         var(--cmy-on-surface-variant);
  font-size:     0.75rem;
  font-weight:   500;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     100%;
}

/* ── Priority chip ──────────────────────────────────────────────── */
.cmy-prio-chip {
  display:        inline-flex;
  align-items:    center;
  padding:        1px 6px;
  border-radius:  var(--cmy-radius-pill);
  border:         1px solid;
  font-size:      0.5625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-widest);
  white-space:    nowrap;
}

/* Rush — terracotta error tone */
.cmy-prio-chip--rush {
  color:        var(--cmy-error);
  border-color: var(--cmy-error);
  background:   var(--cmy-error-container);
}

/* High Priority — warning amber tone */
.cmy-prio-chip--high {
  color:        var(--cmy-warning);
  border-color: var(--cmy-warning-border);
  background:   var(--cmy-warning-container);
}

/* ── Empty state ────────────────────────────────────────────────── */
.cmy-empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         48px 24px;
  gap:             12px;
  color:           var(--cmy-on-surface-variant);
  text-align:      center;
}
/* v1.0.61 — honor [hidden] attr (display:flex above overrode browser default) */
.cmy-empty-state[hidden] { display: none; }

.cmy-empty-state-icon {
  font-size:   40px;
  line-height: 1;
  color:       var(--cmy-surface-container-high);
}

.cmy-empty-state-msg {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--cmy-on-surface-variant);
}

/* ── Pagination ─────────────────────────────────────────────────── */
.cmy-pagination {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-wrap:        wrap;
  gap:              0.375rem;
  padding:          1rem 0;
  border-top:       1px solid var(--cmy-surface-container-highest);
  font-size:        0.8125rem;
}

.cmy-pagination-info {
  color:       var(--cmy-on-surface-variant);
  font-size:   0.75rem;
  font-weight: 600;
}

.cmy-pagination-links {
  display: flex;
  gap:     4px;
}

.cmy-page-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       30px;
  height:          30px;
  padding:         0 8px;
  border-radius:   var(--cmy-radius-md);
  border:          1px solid var(--cmy-surface-container-highest);
  background:      var(--cmy-surface-container-lowest);
  color:           var(--cmy-on-surface);
  font-size:       0.8125rem;
  font-weight:     600;
  cursor:          pointer;
  transition:      var(--cmy-transition);
  text-decoration: none;
}

.cmy-page-link:hover {
  background:   var(--cmy-surface-container-high);
  border-color: var(--cmy-surface-container-high);
}

.cmy-page-link.is-current,
.cmy-page-link.is-active {
  background:   var(--cmy-primary);
  color:        var(--cmy-on-primary);
  border-color: var(--cmy-primary);
}

.cmy-page-link[disabled],
.cmy-page-link.is-disabled,
.cmy-page-link[aria-disabled="true"] {
  opacity: 0.4;
  cursor:  not-allowed;
  pointer-events: none;
}

/* First / Prev / Next / Last arrow links */
.cmy-page-link--first,
.cmy-page-link--prev,
.cmy-page-link--next,
.cmy-page-link--last {
  padding: 0 6px;
}

/* Ellipsis separator — inert, no border */
.cmy-page-ellipsis {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       24px;
  height:          30px;
  color:           var(--cmy-on-surface-variant);
  font-size:       0.8125rem;
  letter-spacing:  0.05em;
  user-select:     none;
}

/* ── end v2 Orders — Page + Table + Badges ───────────────────── */

/* ── v2 Orders — Filter Bar ─────────────────────────────────── */

/* Filter toolbar — outer form wrapper */
.cmy-toolbar {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
  padding:     12px 0 16px;
  background:  transparent;
}

/* Search wrapper — icon + input in relative container */
.cmy-search {
  position:    relative;
  display:     flex;
  align-items: center;
}

/* Leading search icon — absolute, non-interactive */
.cmy-search-icon {
  position:      absolute;
  left:          8px;
  font-size:     18px;
  line-height:   1;
  color:         var(--cmy-on-surface-variant);
  pointer-events: none;
  user-select:   none;
}

/* Search text input — left-padded to clear the icon */
.cmy-search-input {
  padding:       6px 12px 6px 34px;
  border:        1px solid var(--cmy-outline-variant);
  border-radius: var(--cmy-radius-md);
  background:    var(--cmy-surface-container-lowest);
  color:         var(--cmy-on-surface);
  font-family:   inherit;
  font-size:     0.8125rem;
  height:        2.25rem;
  box-sizing:    border-box;
  min-width:     220px;
  transition:    var(--cmy-transition);
}

.cmy-search-input:focus {
  outline:        2px solid var(--cmy-primary-container);
  outline-offset: 1px;
  border-color:   var(--cmy-primary-container);
}

/* Select dropdowns — native <select> with reset styling */
.cmy-select-chip {
  padding:       0.5rem 0.75rem;
  border:        1px solid var(--cmy-outline-variant);
  border-radius: var(--cmy-radius-md);
  background:    var(--cmy-surface-container-lowest);
  color:         var(--cmy-on-surface);
  font-family:   inherit;
  font-size:     0.8125rem;
  height:        2.25rem;
  box-sizing:    border-box;
  cursor:        pointer;
  transition:    var(--cmy-transition);
  appearance:    none;
  -webkit-appearance: none;
}

.cmy-select-chip:focus {
  outline:        2px solid var(--cmy-primary-container);
  outline-offset: 1px;
  border-color:   var(--cmy-primary-container);
}

.cmy-select-chip:hover {
  border-color: var(--cmy-on-surface-variant);
}

/* Date inputs — match .cmy-select-chip visual weight; .flatpickr-input aliased for parity */
.cmy-date-input,
.flatpickr-input {
  padding:       6px 10px;
  border:        1px solid var(--cmy-outline-variant);
  border-radius: var(--cmy-radius-md);
  background:    var(--cmy-surface-container-lowest);
  color:         var(--cmy-on-surface);
  font-family:   inherit;
  font-size:     0.8125rem;
  height:        2.25rem;
  box-sizing:    border-box;
  cursor:        pointer;
  transition:    var(--cmy-transition);
}

.cmy-date-input:focus,
.flatpickr-input:focus {
  outline:        2px solid var(--cmy-primary-container);
  outline-offset: 1px;
  border-color:   var(--cmy-primary-container);
}

/* Reset link — extends .cmy-btn.cmy-btn-ghost; slight muted tint */
.cmy-reset-btn {
  color:       var(--cmy-on-surface-variant);
  font-size:   0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.cmy-reset-btn:hover {
  color:      var(--cmy-on-surface);
  background: var(--cmy-surface-container-high);
}

/* ── end v2 Orders — Filter Bar ────────────────────────────── */

/* ── v2 Orders — KPI Strip ─────────────────────────────────── */

:root {
  --cmy-kpi-orange:      #ea580c;
  --cmy-kpi-orange-bg:   #fff7ed;
  --cmy-kpi-blue:        #2563eb;
  --cmy-kpi-blue-bg:     #eff6ff;
  --cmy-kpi-blue-dark:   #0062a1;
  --cmy-kpi-blue-dark-bg:#e6f0f9;
  --cmy-kpi-red:         #dc2626;
  --cmy-kpi-red-bg:      #fef2f2;
  --cmy-kpi-green:       #16a34a;
  --cmy-kpi-green-bg:    #f0fdf4;
}

.cmy-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cmy-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: var(--cmy-surface-container-lowest);
  border: 1px solid var(--cmy-surface-container-high);
  border-radius: var(--cmy-radius-lg);
  box-shadow: var(--cmy-shadow-sm);
}

.cmy-kpi-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.cmy-kpi[data-accent="orange"] .cmy-kpi-icon    { color: var(--cmy-kpi-orange); }
.cmy-kpi[data-accent="blue"] .cmy-kpi-icon      { color: var(--cmy-kpi-blue); }
.cmy-kpi[data-accent="blue-dark"] .cmy-kpi-icon { color: var(--cmy-kpi-blue-dark); }
.cmy-kpi[data-accent="red"] .cmy-kpi-icon       { color: var(--cmy-kpi-red); }
.cmy-kpi[data-accent="green"] .cmy-kpi-icon     { color: var(--cmy-kpi-green); }

.cmy-kpi-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-wider);
  color: var(--cmy-label-muted);
}

.cmy-kpi-value {
  font-family: var(--cmy-font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cmy-on-surface);
  line-height: 1.2;
}

.cmy-kpi-sub {
  font-size: 0.75rem;
  color: var(--cmy-on-surface-variant);
}

@media (max-width: 900px) {
  .cmy-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── end v2 Orders — KPI Strip ─────────────────────────────── */

/* ── v2 Orders — Tabs + Toggles ─────────────────────────────── */

/* Status tabs (Family B) */
.cmy-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cmy-surface-container-highest);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cmy-tabs::-webkit-scrollbar { display: none; }

.cmy-tab {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cmy-on-secondary-container);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  transition: var(--cmy-transition);
  white-space: nowrap;
  letter-spacing: var(--cmy-tracking-wide);
}

.cmy-tab:hover {
  color: var(--cmy-on-surface);
}

.cmy-tab.is-active {
  color: var(--cmy-primary-container);
  border-bottom-color: var(--cmy-primary-container);
}

.cmy-tab-count {
  background: var(--cmy-surface-container);
  padding: 1px 8px;
  border-radius: var(--cmy-radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--cmy-on-secondary-container);
}

.cmy-tab.is-active .cmy-tab-count {
  background: var(--cmy-primary-fixed);
  color: var(--cmy-on-primary-container);
}

/* View mode toggle (Family C) */
.cmy-view-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.cmy-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cmy-surface-container-lowest);
  border: 1px solid var(--cmy-surface-container-highest);
  border-radius: var(--cmy-radius-md);
  padding: 6px 12px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--cmy-tracking-wide);
  text-transform: uppercase;
  color: var(--cmy-on-secondary-container);
  cursor: pointer;
  text-decoration: none;
  transition: var(--cmy-transition);
}

.cmy-view-btn:hover {
  background: var(--cmy-surface-container-low);
}

.cmy-view-btn.is-active {
  background: var(--cmy-primary-container);
  color: var(--cmy-on-primary);
  border-color: var(--cmy-primary-container);
}

/* Row style toggle (Family C) */
.cmy-rowstyle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.cmy-rowstyle-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--cmy-tracking-widest);
  color: var(--cmy-on-surface-variant);
  text-transform: uppercase;
}

.cmy-seg {
  display: inline-flex;
  background: var(--cmy-surface-container-lowest);
  border: 1px solid var(--cmy-surface-container-highest);
  border-radius: var(--cmy-radius-md);
  padding: 2px;
  gap: 2px;
}

.cmy-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cmy-on-secondary-container);
  cursor: pointer;
  border-radius: var(--cmy-radius-sm);
  text-decoration: none;
  transition: var(--cmy-transition);
}

.cmy-seg-btn:hover {
  background: var(--cmy-surface-container-low);
}

.cmy-seg-btn.is-active {
  background: var(--cmy-on-surface);
  color: var(--cmy-on-primary);
}

.cmy-seg-btn.is-active .material-symbols-outlined {
  color: var(--cmy-primary-container);
}

.cmy-seg-btn .material-symbols-outlined {
  font-size: 16px;
}

/* Coming-soon placeholder (non-list views) */
.cmy-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--cmy-on-secondary-container);
}

.cmy-coming-soon .material-symbols-outlined {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--cmy-outline);
}

.cmy-coming-soon-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cmy-on-surface);
  margin-bottom: 0.375rem;
}

.cmy-coming-soon-sub {
  font-size: 0.8125rem;
  color: var(--cmy-on-secondary-container);
  max-width: 28rem;
}

/* Responsive: tabs scroll horizontally on narrow viewports */
@media (max-width: 900px) {
  .cmy-tabs { overflow-x: auto; }
  .cmy-view-toggle { flex-wrap: wrap; }
}

/* ── end v2 Orders — Tabs + Toggles ─────────────────────────── */

/* ── v2 Orders — Nav Badge + Row Detail Refinements ────────── */

/* D: Sidebar nav count badge */
.cmy-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: var(--cmy-surface-container-high);
  color: var(--cmy-on-surface-variant);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--cmy-radius-pill);
  flex: 0 0 auto; /* v1.0.69 — never grow; sits immediately after the label */
}

.cmy-nav-item.is-active .cmy-nav-badge {
  background: var(--cmy-primary-container);
  color: var(--cmy-on-primary);
}

/* E: Payment sublabel under total amount */
.cmy-td-total-sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-wider);
  margin-top: 0.125rem;
}

.cmy-td-total-sub.cmy-pay-unpaid {
  color: var(--cmy-error);
}

.cmy-td-total-sub.cmy-pay-partial {
  color: var(--cmy-warning);
}

/* E: Due date sublabel with overdue indicator */
.cmy-due-sub {
  display: block;
  font-size: 0.6875rem;
  color: var(--cmy-on-surface-variant);
  margin-top: 0.125rem;
}

.cmy-due.is-overdue {
  color: var(--cmy-error);
  font-weight: 600;
}

.cmy-due.is-overdue + .cmy-due-sub,
.cmy-due.is-overdue ~ .cmy-due-sub {
  color: var(--cmy-error);
}

/* ── end v2 Orders — Nav Badge + Row Detail Refinements ─────── */

/* ── v2 Orders — Row Styling Polish (M2.5) ─────────────────── */

/* Utility — bold text weight (gap A + B: bold order-ID and customer name) */
.cmy-bold {
  font-weight: 700;
}

/* Order ID cell — primary line (template emits .cmy-id; .cmy-td-id unused — safe to remove post-M2.5) */
.cmy-id {
  font-family: var(--cmy-font-mono);
  font-weight: 700;
  font-size:   0.8125rem;
  color:       var(--cmy-on-surface);
  line-height: 1.2;
}

/* Order date subline + items overflow + channel subline — shared muted-xs treatment */
.cmy-muted-xs {
  display:    block;
  font-size:  0.6875rem;
  color:      var(--cmy-on-surface-variant);
  margin-top: 0.125rem;
  line-height: 1.3;
}

/* Customer name strong top-line (gap B: bold weight) */
.cmy-cust {
  font-weight: 600;
  color:       var(--cmy-on-surface);
  line-height: 1.2;
}

/* Items preview — template-emitted class names (.cmy-item-row/.cmy-item-qty/.cmy-item-name)
   mirror the existing .cmy-item-preview-* rules so both naming conventions render correctly */
.cmy-item-row {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   6px;
  font-size:             0.75rem;
  align-items:           baseline;
}

.cmy-item-qty {
  font-family: var(--cmy-font-mono);
  font-weight: 700;
  color:       var(--cmy-primary);
  min-width:   22px;
}

.cmy-item-name {
  color:         var(--cmy-on-surface);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* +N more indicator (uses .cmy-muted-xs — rules above already cover it; alias kept for clarity) */
/* gap C: .cmy-item-row/.cmy-item-qty/.cmy-item-name selectors verified present above */
/* gap C: .cmy-item-preview-row/.cmy-item-preview-qty/.cmy-item-preview-name still present at ~10515 */

/* ── end v2 Orders — Row Styling Polish (M2.5) ────────────── */

/* ── v2 Orders — KPI Compact Layout (M2.5 task #119) ─────── */
/* User-provided compaction: icon floats inline-left of label, smaller value. */

.cmy-kpi-icon span.material-symbols-outlined {
    font-size: 16px;
}

.cmy-kpi-strip .cmy-kpi {
    display: block;
    flex: unset;
}

.cmy-kpi-strip .cmy-kpi .cmy-kpi-icon {
    float: left;
    line-height: 16px;
    padding-right: 5px;
}

.cmy-kpi-strip .cmy-kpi .cmy-kpi-label {
    line-height: 20px;
    padding-bottom: 0;
}

.cmy-kpi-strip .cmy-kpi .cmy-kpi-value {
    font-size: 26px;
}

/* ── end v2 Orders — KPI Compact Layout (M2.5 task #119) ── */

/* ── v2 Card — KPI Hero (M4 §6.6) ─────────────────────────────────────────
   New standalone card component for Dashboard KPIs and Reports summary panels.
   Distinct from .cmy-kpi (compact horizontal strip — Orders page, M2.5).
   All colour values use --cmy-* design-system tokens — zero hex literals.
   Story #148.
   ────────────────────────────────────────────────────────────────────────── */

/* Base card */
.cmy-card {
  background:    var(--cmy-surface-container-lowest);
  border-radius: var(--cmy-radius-xl);
  box-shadow:    0 1px 2px rgba(0, 0, 0, 0.03);
  padding:       1.25rem 1.5rem;
  border:        none;
  box-sizing:    border-box;
}

/* Hero modifier — 2px orange top accent rail */
.cmy-card--hero {
  border-top: 2px solid var(--cmy-primary-container);
}

/* Eyebrow label — uppercase, wide tracking, small */
.cmy-card-label {
  font-size:      0.625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-wider);
  color:          var(--cmy-on-surface-variant);
  margin:         0 0 0.375rem;
  line-height:    1;
}

/* Hero number — large Montserrat 800 */
.cmy-card-value {
  font-family:    'Montserrat', sans-serif;
  font-size:      1.75rem;
  font-weight:    800;
  letter-spacing: var(--cmy-tracking-tight);
  color:          var(--cmy-on-surface);
  margin:         0 0 0.25rem;
  line-height:    1.1;
}

/* Supporting / sub text */
.cmy-card-sub {
  font-size:   0.75rem;
  font-weight: 400;
  color:       var(--cmy-on-surface-variant);
  margin:      0;
  line-height: 1.4;
}

/* ── end v2 Card — KPI Hero (M4 §6.6) ──────────────────────────────────── */

/* ── v2 Stock Requests — Page action button row ──────────────────────────────
   .cmy-sr-actions holds the Export + Create buttons above the KPI strip.
   flex-end alignment mirrors .cmy-page-title-row__actions; margin-bottom
   provides the gap between the button row and the KPI card grid.
   ─────────────────────────────────────────────────────────────────────────── */
.cmy-sr-actions {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             0.5rem;
  margin-bottom:   1.5rem;
}
/* ── end v2 Stock Requests — Page action button row ─────────────────────── */

/* ── v2 Stock Requests — KPI card grid wrapper ──────────────────────────────
   .cmy-sr-cards is the 4-column grid that holds the .cmy-card KPI tiles on
   the Stock Requests page. Mirrors the pattern of .cmy-dash-kpi-row
   (Dashboard) and .cmy-kpi-strip (Orders). All values use --cmy-* tokens.
   ─────────────────────────────────────────────────────────────────────────── */
.cmy-sr-cards {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0.75rem;
  margin-bottom:         1rem;
}

@media (max-width: 900px) {
  .cmy-sr-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .cmy-sr-cards { grid-template-columns: 1fr; }
}
/* ── end v2 Stock Requests — KPI card grid wrapper ──────────────────────── */

/* ── v2 Stock Requests — Top Products KPI card list ─────────────────────────
   .cmy-sr-cards__top-products holds a compact ranked list of most-requested
   products. The legacy rule was scoped to .cbg-fe-sr-top-products and never
   matched the v2 BEM class names, leaving the card completely unstyled.
   All values use --cmy-* tokens; zero hex literals.
   ─────────────────────────────────────────────────────────────────────────── */

/* Card-level: content packs from the top (default block flow — no override
   needed if .cmy-card already does this, but make explicit for safety) */
.cmy-sr-cards__top-products {
  align-content: start;
}

/* Icon inside the eyebrow label — align with the text without rewriting
   the base .cmy-card-label layout (other cards may rely on current display) */
.cmy-card-label .material-symbols-outlined {
  font-size:      0.875rem;
  line-height:    1;
  vertical-align: middle;
  margin-right:   0.25rem;
}

/* List reset */
.cmy-sr-top-products-list {
  list-style: none;
  margin:     0.5rem 0 0;
  padding:    0;
}

/* Each ranked row */
.cmy-sr-top-products-list li {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.75rem;
  line-height:     1.4;
  padding-top:     0.3125rem;
  padding-bottom:  0.3125rem;
  white-space:     nowrap;
  border-bottom:   1px solid var(--cmy-outline-variant);
}

.cmy-sr-top-products-list li:last-child {
  border-bottom: none;
}

/* Product name — truncates with ellipsis on overflow */
.cmy-sr-top-products-list__name {
  flex:          1 1 auto;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  padding-right: 0.5rem;
  color:         var(--cmy-on-surface-variant);
  font-weight:   500;
}

/* Quantity badge — right-aligned, digits stay fixed-width */
.cmy-sr-top-products-list__qty {
  flex:                0 0 auto;
  color:               var(--cmy-on-surface);
  font-weight:         700;
  font-variant-numeric: tabular-nums;
}

/* ── end v2 Stock Requests — Top Products KPI card list ──────────────────── */

/* ── v2 Invoices — Status Badge Modifiers (M3 task #129) ─────────────────── */
/* Invoice-specific payment status badge colors.
   Follows the exact pattern of the order badge modifiers at lines 10593–10668.
   All values use existing --cmy-status-* / --cmy-* tokens — zero hex literals. */

:root {
  /* Invoice status — Paid (success / green family) */
  --cmy-status-paid-bg: var(--cmy-status-complete-bg);
  --cmy-status-paid-fg: var(--cmy-status-complete-fg);
  --cmy-status-paid-bd: var(--cmy-status-complete-bd);

  /* Invoice status — Unpaid (surface / muted — low visual weight) */
  --cmy-status-unpaid-bg: var(--cmy-surface-container-low);
  --cmy-status-unpaid-fg: var(--cmy-on-surface-variant);
  --cmy-status-unpaid-bd: var(--cmy-outline-variant);

  /* Invoice status — Partial (warning / amber family) */
  --cmy-status-partial-bg: var(--cmy-status-onhold-bg);
  --cmy-status-partial-fg: var(--cmy-status-onhold-fg);
  --cmy-status-partial-bd: var(--cmy-status-onhold-bd);

  /* Invoice status — Overdue (error / red family) */
  --cmy-status-overdue-bg: var(--cmy-status-cancelled-bg);
  --cmy-status-overdue-fg: var(--cmy-status-cancelled-fg);
  --cmy-status-overdue-bd: var(--cmy-status-cancelled-bd);

  /* Invoice status — Void (muted / secondary — visually retired) */
  --cmy-status-void-bg: var(--cmy-surface-container);
  --cmy-status-void-fg: var(--cmy-outline);
  --cmy-status-void-bd: var(--cmy-surface-dim);

  /* Invoice popup overlay scrim */
  --cmy-scrim: rgba(0, 0, 0, 0.5);
}

/* Status badge — Paid */
.cmy-status-badge--paid {
  background:   var(--cmy-status-paid-bg);
  color:        var(--cmy-status-paid-fg);
  border-color: var(--cmy-status-paid-bd);
}

.cmy-status-badge--paid .cmy-badge-dot {
  background: var(--cmy-status-paid-fg);
}

/* Status badge — Unpaid */
.cmy-status-badge--unpaid {
  background:   var(--cmy-status-unpaid-bg);
  color:        var(--cmy-status-unpaid-fg);
  border-color: var(--cmy-status-unpaid-bd);
}

.cmy-status-badge--unpaid .cmy-badge-dot {
  background: var(--cmy-status-unpaid-fg);
}

/* Status badge — Partial */
.cmy-status-badge--partial {
  background:   var(--cmy-status-partial-bg);
  color:        var(--cmy-status-partial-fg);
  border-color: var(--cmy-status-partial-bd);
}

.cmy-status-badge--partial .cmy-badge-dot {
  background: var(--cmy-status-partial-fg);
}

/* Status badge — Overdue */
.cmy-status-badge--overdue {
  background:   var(--cmy-status-overdue-bg);
  color:        var(--cmy-status-overdue-fg);
  border-color: var(--cmy-status-overdue-bd);
}

.cmy-status-badge--overdue .cmy-badge-dot {
  background: var(--cmy-status-overdue-fg);
}

/* Status badge — Void */
.cmy-status-badge--void {
  background:   var(--cmy-status-void-bg);
  color:        var(--cmy-status-void-fg);
  border-color: var(--cmy-status-void-bd);
}

.cmy-status-badge--void .cmy-badge-dot {
  background: var(--cmy-status-void-fg);
}

/* Status badge — Draft (neutral gray) */
.cmy-status-badge--draft {
  background:   var(--cmy-surface-container-low, #f8fafc);
  color:        var(--cmy-on-surface-variant, #64748b);
  border-color: var(--cmy-outline-variant, #e2e8f0);
}

.cmy-status-badge--draft .cmy-badge-dot {
  background: var(--cmy-on-surface-variant, #64748b);
}

/* Status badge — Transferred (M15: stock-transfer marker on orders) */
.cmy-status-badge--transferred {
  background:   var(--cmy-status-processing-bg, #eff6ff);
  color:        var(--cmy-status-processing-fg, #2563eb);
  border-color: var(--cmy-status-processing-bd, #bfdbfe);
}

.cmy-status-badge--transferred .cmy-badge-dot {
  background: var(--cmy-status-processing-fg, #2563eb);
}

/* Status badge — Unknown / fallback (matches draft so unknown statuses degrade gracefully) */
.cmy-status-badge--unknown {
  background:   var(--cmy-surface-container-low, #f8fafc);
  color:        var(--cmy-on-surface-variant, #64748b);
  border-color: var(--cmy-outline-variant, #e2e8f0);
}

.cmy-status-badge--unknown .cmy-badge-dot {
  background: var(--cmy-on-surface-variant, #64748b);
}

/* Invoices page wrapper (mirrors .cmy-orders-wrap) */
.cmy-invoices-wrap {
  padding: 20px 28px 40px;
}

/* Column widths */
.cmy-th-select { width: 2.5rem; }

/* Floating selection bar (batch payment) */
.cmy-inv-select-bar {
  display:         none;
  position:        fixed;
  bottom:          24px;
  left:            50%;
  transform:       translateX(-50%);
  background:      var(--cmy-inverse-surface);
  color:           var(--cmy-surface-container-lowest);
  border-radius:   var(--cmy-radius-xl);
  padding:         12px 20px;
  align-items:     center;
  gap:             16px;
  box-shadow:      var(--cmy-shadow-lg);
  z-index:         9000;
  white-space:     nowrap;
}

.cmy-inv-select-bar.is-visible {
  display: flex;
}

.cmy-inv-select-bar__count,
.cmy-inv-select-bar__balance {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   0.875rem;
}

.cmy-inv-select-bar__actions {
  display: flex;
  gap:     8px;
}

/* Invoice preview popup overlay */
.cmy-inv-popup-overlay {
  display:          none;
  position:         fixed;
  inset:            0;
  background:       var(--cmy-scrim);
  z-index:          9999;
  align-items:      center;
  justify-content:  center;
}

.cmy-inv-popup-overlay.active {
  display: flex;
}

.cmy-inv-popup {
  background:    var(--cmy-surface-container-lowest);
  border-radius: var(--cmy-radius-xl);
  box-shadow:    var(--cmy-shadow-lg);
  width:         min(900px, 95vw);
  height:        85vh;
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
}

.cmy-inv-popup__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  border-bottom:   1px solid var(--cmy-outline-variant);
  flex-shrink:     0;
}

.cmy-inv-popup__title {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-weight: 600;
  font-size:   0.9375rem;
}

.cmy-inv-popup__actions {
  display: flex;
  gap:     8px;
}

.cmy-inv-popup__body {
  flex:     1;
  position: relative;
  overflow: hidden;
}

.cmy-inv-popup__body iframe {
  width:  100%;
  height: 100%;
  border: none;
}

.cmy-inv-popup__loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  height:          100%;
  color:           var(--cmy-outline);
  font-size:       0.875rem;
}

/* ── end v2 Invoices — Status Badge Modifiers (M3 task #129) ─────────────── */

/* ── v2 Payments — Method Chips (M3 task #130) ─────────────────────────── */

.cmy-method-chips {
  display:         flex;
  flex-wrap:       nowrap;
  overflow-x:      auto;
  gap:             0.5rem;
  margin-bottom:   1.25rem;
  padding-bottom:  0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cmy-method-chips::-webkit-scrollbar {
  display: none;
}

.cmy-method-chip {
  display:          inline-flex;
  align-items:      center;
  gap:              0.375rem;
  flex-shrink:      0;
  border-radius:    var(--cmy-radius-pill, 9999px);
  background:       var(--cmy-surface-container-lowest);
  border:           1px solid var(--cmy-outline-variant);
  color:            var(--cmy-on-surface);
  padding:          0.375rem 0.875rem 0.375rem 0.5rem;
  font-size:        0.8125rem;
  font-weight:      600;
  text-decoration:  none;
  transition:       border-color 0.15s, background 0.15s, color 0.15s;
  white-space:      nowrap;
  cursor:           pointer;
}

.cmy-method-chip:hover {
  border-color: var(--cmy-primary-container);
  background:   var(--cmy-surface-container-low);
}

.cmy-method-chip.is-active {
  border-color: var(--cmy-primary-container);
  background:   var(--cmy-primary-fixed);
  color:        var(--cmy-on-primary-container);
}

.cmy-method-chip__logo {
  width:         1.5rem;
  height:        1.5rem;
  object-fit:    contain;
  border-radius: 0.25rem;
  flex-shrink:   0;
}

.cmy-method-chip__icon {
  width:           1.5rem;
  height:          1.5rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--cmy-surface-container);
  border-radius:   0.25rem;
  flex-shrink:     0;
  font-size:       0.875rem;
  color:           var(--cmy-outline);
}

.cmy-method-chip__label {
  font-size:   0.8125rem;
  font-weight: 700;
}

.cmy-method-chip__count {
  font-size:   0.6875rem;
  font-weight: 500;
  color:       var(--cmy-outline);
}

.cmy-method-chip.is-active .cmy-method-chip__count {
  color:   var(--cmy-on-primary-container);
  opacity: 0.75;
}

/* ── end v2 Payments — Method Chips (M3 task #130) ──────────────────────── */

/* ── v2 Payments — Quick Filters + IT KPI Bar (M14 task #324) ───────────── */

/* Quick filters row — same flex convention as .cmy-method-chips */
.cmy-quick-filters {
  display:        flex;
  flex-wrap:      nowrap;
  overflow-x:     auto;
  gap:            0.5rem;
  margin-bottom:  0.75rem;
  scrollbar-width: none;
}
.cmy-quick-filters::-webkit-scrollbar { display: none; }

/* Internal-Transfers pill overrides — accent colour to distinguish from dynamic chips */
.cmy-method-chip--it {
  border-color: var(--cmy-outline-variant);
}
.cmy-method-chip--it .cmy-method-chip__icon {
  color: var(--cmy-primary);
}
.cmy-method-chip--it.is-active {
  border-color: var(--cmy-primary);
  background:   var(--cmy-primary-fixed);
  color:        var(--cmy-on-primary-container);
}
.cmy-method-chip--it.is-active .cmy-method-chip__icon {
  color: var(--cmy-on-primary-container);
}
.cmy-method-chip--it.is-active .cmy-method-chip__count {
  color:   var(--cmy-on-primary-container);
  opacity: 0.75;
}

/* IT active-filter KPI banner */
.cmy-it-kpi-bar {
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.625rem 1rem;
  margin-bottom:   0.75rem;
  background:      var(--cmy-primary-fixed, #dde3ea);
  border:          1px solid var(--cmy-primary-container, #b6c9e2);
  border-radius:   var(--cmy-radius, 0.5rem);
  font-size:       0.8125rem;
  color:           var(--cmy-on-primary-container, #0d2543);
  flex-wrap:       wrap;
}
.cmy-it-kpi-bar__icon {
  display:    flex;
  align-items: center;
  color:       var(--cmy-primary);
  font-size:   1.125rem;
}
.cmy-it-kpi-bar__label {
  font-weight: 700;
}
.cmy-it-kpi-bar__sep {
  color:   var(--cmy-outline);
  opacity: 0.5;
}
.cmy-it-kpi-bar__total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cmy-it-kpi-bar__count {
  color:       var(--cmy-on-surface-variant);
  font-weight: 500;
}

/* ── end v2 Payments — Quick Filters + IT KPI Bar (M14 task #324) ─────────── */

/* ── v2 Drawers — Re-skin (M3 task #131) ────────────────── */
/*
 * All rules are prefixed with body.commy-v2 so that v1 drawer
 * rendering is byte-identical.  body.commy-v2 is added exclusively
 * by shell-v2.php; shell.php (v1) does not carry the class.
 *
 * Target markup is in frontend/templates/partials/:
 *   order-detail-drawer.php   → .cbg-fe-drawer, .cbg-fe-drawer__*
 *   tt-detail-drawer.php      → .cbg-fe-drawer, .cbg-fe-drawer__*
 * payment-detail-drawer.php and batch-payment-drawer.php use .cbg-bp-*
 *   selectors; body.commy-v2 overrides below provide matching v2 chrome
 *   (fixes bug #142). Their inline <style> blocks remain for v1 fallback.
 *
 * Token additions below:
 *   --cmy-font-headline  alias for Montserrat 800 (matches §3 "Headline");
 *                        --cmy-scrim already defined (rgba(0,0,0,0.5)) in
 *                        M3 task #129 :root block — reused here as-is.
 */

:root {
  --cmy-font-headline:  'Montserrat', sans-serif;
  --cmy-shadow-drawer:  -8px 0 40px rgba(0, 0, 0, 0.14);
}

/* ── Backdrop overlay (only when drawer is open — v1 parity) ── */
body.commy-v2 .cbg-fe-drawer-backdrop.is-open {
  background: var(--cmy-scrim);
  backdrop-filter: blur(2px);
}

/* ── Panel surface ── */
body.commy-v2 .cbg-fe-drawer {
  background: var(--cmy-surface-container-lowest);
  box-shadow: var(--cmy-shadow-drawer);
}

/* ── Header — surface, top accent rail, border ── */
body.commy-v2 .cbg-fe-drawer__header {
  background:   var(--cmy-surface-container-low);
  border-top:   3px solid var(--cmy-primary-container);
  border-bottom: 1px solid var(--cmy-outline-variant);
  padding:      1rem 1.5rem;
}

/* ── Header left sub-layout ── */
body.commy-v2 .cbg-fe-drawer__header-left {
  display:        flex;
  flex-direction: column;
  gap:            0.125rem;
}

/* ── Title — Montserrat 800 headline via token ── */
body.commy-v2 .cbg-fe-drawer__title {
  font-family:    var(--cmy-font-headline);
  font-weight:    800;
  font-size:      1.125rem;
  letter-spacing: var(--cmy-tracking-tight);
  text-transform: uppercase;
  color:          var(--cmy-on-surface);
}

/* ── Sub-title / meta row ── */
body.commy-v2 .cbg-fe-drawer__subtitle,
body.commy-v2 .cbg-fe-drawer__header-subtitle {
  font-size:      0.6875rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-wider);
  color:          var(--cmy-on-surface-variant);
  display:        flex;
  align-items:    center;
  gap:            0.25rem;
}

/* ── Header action icons ── */
body.commy-v2 .cbg-fe-drawer__header-actions {
  gap: 0.375rem;
}

/* ── Scrollable body ── */
body.commy-v2 .cbg-fe-drawer__body {
  background: var(--cmy-surface-container-lowest);
  color:      var(--cmy-on-surface);
  padding:    1.5rem;
}

/* ── Footer — surface + border ── */
body.commy-v2 .cbg-fe-drawer__footer {
  background:  var(--cmy-surface-container-low);
  border-top:  1px solid var(--cmy-outline-variant);
  padding:     0.875rem 1.5rem;
  gap:         0.625rem;
}

/* ── Footer action buttons row ── */
body.commy-v2 .cbg-fe-drawer__footer-actions {
  gap: 0.625rem;
}

/* ── Scrollbar thumb — match surface stack ── */
body.commy-v2 .cbg-fe-drawer .cbg-fe-scrollbar::-webkit-scrollbar-thumb {
  background: var(--cmy-surface-container-high);
}

/* ──────────────────────────────────────────────────────────────────────────
 * .cbg-bp-* drawer v2 surface overrides
 * Covers: payment-detail-drawer.php (.cbg-bp-overlay, .cbg-bp-backdrop,
 *   .cbg-bp-drawer, .cbg-bp-header, .cbg-bp-header__*, .cbg-bp-close,
 *   .cbg-bp-body, .cbg-bp-section, .cbg-bp-section-label)
 * and batch-payment-drawer.php (same classes + .cbg-bp-footer).
 * Markup + inline <style> blocks are byte-identical (bug #142).
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Backdrop overlay (only when parent overlay is open — v1 parity) ── */
body.commy-v2 .cbg-bp-overlay.is-open .cbg-bp-backdrop {
  background:      var(--cmy-scrim);
  backdrop-filter: blur(2px);
}

/* ── Panel surface ── */
body.commy-v2 .cbg-bp-drawer {
  background: var(--cmy-surface-container-lowest);
  box-shadow: var(--cmy-shadow-drawer);
}

/* ── Header — surface, top accent rail, border ── */
body.commy-v2 .cbg-bp-header {
  background:    var(--cmy-surface-container-low);
  border-top:    3px solid var(--cmy-primary-container);
  border-bottom: 1px solid var(--cmy-outline-variant);
  padding:       1rem 1.5rem;
}

/* ── Header left sub-layout ── */
body.commy-v2 .cbg-bp-header__left {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  gap:            0.75rem;
}

/* ── Header icon ── */
body.commy-v2 .cbg-bp-header__icon {
  color:         var(--cmy-primary-container);
  background:    var(--cmy-primary-container-dim, transparent);
  border-radius: 0.5rem;
  padding:       0.375rem;
}

/* ── Title — Montserrat 800 headline via token ── */
body.commy-v2 .cbg-bp-header__title {
  font-family:    var(--cmy-font-headline);
  font-weight:    800;
  font-size:      0.9375rem;
  letter-spacing: var(--cmy-tracking-tight);
  color:          var(--cmy-on-surface);
}

/* ── Sub-line / meta row ── */
body.commy-v2 .cbg-bp-header__sub {
  font-size:   0.6875rem;
  font-weight: 600;
  color:       var(--cmy-on-surface-variant);
  margin-top:  0.125rem;
}

/* ── Close button ── */
body.commy-v2 .cbg-bp-close {
  border-color: var(--cmy-outline-variant);
  color:        var(--cmy-on-surface-variant);
  background:   var(--cmy-surface-container-lowest);
}
body.commy-v2 .cbg-bp-close:hover {
  border-color: var(--cmy-primary-container);
  color:        var(--cmy-primary-container);
  background:   var(--cmy-surface-container-low);
}

/* ── Scrollable body ── */
body.commy-v2 .cbg-bp-body {
  background: var(--cmy-surface-container-lowest);
  color:      var(--cmy-on-surface);
  padding:    1.25rem 1.5rem;
}
body.commy-v2 .cbg-bp-body::-webkit-scrollbar-thumb {
  background:    var(--cmy-surface-container-high);
  border-radius: 2px;
}

/* ── Sections ── */
body.commy-v2 .cbg-bp-section {
  background:    var(--cmy-surface-container-low);
  border:        1px solid var(--cmy-outline-variant);
  border-radius: 0.75rem;
}
body.commy-v2 .cbg-bp-section-label {
  color: var(--cmy-on-surface-variant);
}
body.commy-v2 .cbg-bp-section-label .material-symbols-outlined {
  color: var(--cmy-primary-container);
}

/* ── Footer — surface + border ── */
body.commy-v2 .cbg-bp-footer {
  background:  var(--cmy-surface-container-low);
  border-top:  1px solid var(--cmy-outline-variant);
  padding:     0.875rem 1.5rem;
  gap:         0.625rem;
}

/* ── end v2 Drawers — Re-skin (M3) ──────────────────────── */

/* ── M5 — TT Detail Drawer v2 re-skin (task #168) ───────────────────────────
 * All rules are prefixed with body.commy-v2 — v1 rendering is byte-identical.
 * Targets the TT-specific IDs so overrides are additive and surgical.
 * Selectors mirror the M3 order-drawer block directly above.
 * Token-only: no hex literals.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Panel surface (TT drawer ID specificity boost) ── */
body.commy-v2 #cbg-fe-tt-view-drawer {
  background: var(--cmy-surface-container-lowest);
  box-shadow: var(--cmy-shadow-drawer);
}

/* ── Title — Montserrat 800 headline via token ── */
body.commy-v2 #cbg-fe-tt-view-title {
  font-family:    var(--cmy-font-headline);
  font-weight:    800;
  font-size:      1.125rem;
  letter-spacing: var(--cmy-tracking-tight);
  text-transform: uppercase;
  color:          var(--cmy-on-surface);
}

/* ── Subtitle / meta row ── */
body.commy-v2 #cbg-fe-tt-view-subtitle {
  font-size:      0.6875rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-wider);
  color:          var(--cmy-on-surface-variant);
  display:        flex;
  align-items:    center;
  gap:            0.25rem;
}

/* ── Header action icons container ── */
body.commy-v2 #cbg-fe-tt-view-drawer .cbg-fe-drawer__header-actions {
  gap: 0.375rem;
}

/* ── Footer actions row ── */
body.commy-v2 #cbg-fe-tt-view-actions {
  gap: 0.625rem;
}

/* ── end M5 — TT Detail Drawer v2 re-skin ─────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   Logistics v2 page — story #167 (M5)
   .cmy-logistics-wrap and column-width helpers
   ═══════════════════════════════════════════════════════════ */

.cmy-logistics-wrap {
  padding: 20px 28px 40px;
}

/* Column widths */
.cmy-th-tt-num     { width: 6rem; }
.cmy-th-carrier    { width: 9rem; }
.cmy-th-deliver-to { min-width: 12rem; }
.cmy-th-cost       { width: 8rem; }
.cmy-th-paid-by    { width: 7rem; }
.cmy-th-dispatch   { width: 7rem; }

/* Carrier / Type cell — icon + label inline */
.cmy-carrier-text {
  display:     inline-flex;
  align-items: center;
  gap:         0.25rem;
  font-size:   0.8125rem;
  font-weight: 500;
}

/* Empty state — centred within the table cell */
.cmy-empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            0.5rem;
  padding:        3rem 1rem;
  color:          var(--cmy-on-surface-variant);
  text-align:     center;
}

.cmy-empty-state .material-symbols-outlined {
  font-size: 2.5rem;
  opacity:   0.5;
}

.cmy-empty-state__title,
.cmy-empty-state-title {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--cmy-on-surface);
}

.cmy-empty-state__sub,
.cmy-empty-state-sub {
  font-size: 0.8125rem;
  max-width: 28rem;
  color:     var(--cmy-on-surface-variant);
}

/* Logistics rows — pointer cursor for drawer open */
.cmy-logistics-row {
  cursor: pointer;
}

/* ── Logistics cell fixes — story #253 (M10) ────────────────
   .cmy-muted-xs must NOT be applied directly to <td> because
   its display:block overrides display:table-cell and breaks
   vertical-align. These scoped helpers keep the td as a proper
   table-cell and style inner content via child selectors.     */
.cmy-td-paid-by,
.cmy-td-dispatch {
  vertical-align: middle;
  white-space:    nowrap;
}

.cmy-td-dispatch .cmy-muted-xs {
  font-variant-numeric: tabular-nums;
  letter-spacing:       var(--cmy-tracking-tight);
}
/* ── end Logistics cell fixes (story #253) ─────────────── */

/* ── end Logistics v2 (M5) ──────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Trip Tickets v2 page — story #166
   New .cmy-tt-* wrapper rules and missing status-badge modifier rules.
   All values use --cmy-status-* / --cmy-* tokens — zero hex literals.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Trip Tickets page wrapper ─────────────────────────────────────────── */
.cmy-tt-wrap {
  display:        flex;
  flex-direction: column;
  gap:            var(--cmy-space-4, 1rem);
}

/* ── TT table column widths ────────────────────────────────────────────── */
.cmy-th-tt-carrier  { width: 18%; }
.cmy-th-tt-dispatch { width: 14%; }
.cmy-th-tt-orders   { width: 8%;  text-align: center; }
.cmy-th-tt-status   { width: 14%; }
.cmy-th-tt-deliver  { width: 26%; }
.cmy-th-tt-actions  { width: 8%;  text-align: right; }

/* ── TT # cell ─────────────────────────────────────────────────────────── */
.cmy-tt-id {
  font-weight:    600;
  font-size:      0.8125rem;
  color:          var(--cmy-on-surface);
  letter-spacing: var(--cmy-tracking-tight);
}

/* ── Carrier cell ──────────────────────────────────────────────────────── */
.cmy-tt-carrier {
  font-size:   0.8125rem;
  font-weight: 500;
  color:       var(--cmy-on-surface);
}

/* ── Dispatch time cell ────────────────────────────────────────────────── */
.cmy-tt-dispatch-time {
  font-size:      0.8125rem;
  font-weight:    600;
  font-variant:   tabular-nums;
  color:          var(--cmy-on-surface);
  letter-spacing: var(--cmy-tracking-tight);
}

/* ── Order count cell ──────────────────────────────────────────────────── */
.cmy-td-tt-orders {
  text-align: center;
}

.cmy-tt-order-count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       1.5rem;
  height:          1.5rem;
  padding:         0 0.375rem;
  border-radius:   var(--cmy-radius-pill);
  background:      var(--cmy-surface-container-high);
  color:           var(--cmy-on-surface);
  font-size:       0.6875rem;
  font-weight:     700;
  letter-spacing:  var(--cmy-tracking-wide);
}

/* ── Deliver To cell ───────────────────────────────────────────────────── */
.cmy-tt-deliver-to {
  font-size:     0.8125rem;
  color:         var(--cmy-on-surface-variant);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width:     18rem;
}

/* ── Actions cell (right-align) ────────────────────────────────────────── */
.cmy-td-tt-actions {
  text-align: right;
}

/* ── Status badge — Dispatched (trip ticket) ───────────────────────────── */
.cmy-status-badge--dispatched {
  background:   var(--cmy-status-processing-bg);
  color:        var(--cmy-status-processing-fg);
  border-color: var(--cmy-status-processing-bd);
}

.cmy-status-badge--dispatched .cmy-badge-dot {
  background: var(--cmy-status-processing-fg);
}

/* ── Status badge — Delivered (trip ticket) ────────────────────────────── */
.cmy-status-badge--delivered {
  background:   var(--cmy-status-complete-bg);
  color:        var(--cmy-status-complete-fg);
  border-color: var(--cmy-status-complete-bd);
}

.cmy-status-badge--delivered .cmy-badge-dot {
  background: var(--cmy-status-complete-fg);
}

/* ── Status badge — Returned (trip ticket) ─────────────────────────────── */
.cmy-status-badge--returned {
  background:   var(--cmy-status-cancelled-bg);
  color:        var(--cmy-status-cancelled-fg);
  border-color: var(--cmy-status-cancelled-bd);
}

.cmy-status-badge--returned .cmy-badge-dot {
  background: var(--cmy-status-cancelled-fg);
}

/* ── Status badge — Completed (trip ticket) ────────────────────────────── */
.cmy-status-badge--completed {
  background:   var(--cmy-status-complete-bg);
  color:        var(--cmy-status-complete-fg);
  border-color: var(--cmy-status-complete-bd);
}

.cmy-status-badge--completed .cmy-badge-dot {
  background: var(--cmy-status-complete-fg);
}

/* ── end Trip Tickets v2 (story #166) ────────────────────────────────── */

/* ── Delivery-type and carrier chips (story #169) ───────────────────────── */
/* Scoped to body.commy-v2 — does not affect v1 pages.                       */

body.commy-v2 .cmy-delivery-chip {
  display:        inline-flex;
  align-items:    center;
  padding:        1px 6px;
  border-radius:  var(--cmy-radius-pill);
  border:         1px solid;
  font-size:      0.5625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space:    nowrap;
}

/* Pickup — tertiary azure/info token family */
body.commy-v2 .cmy-delivery-chip--pickup {
  background:   var(--cmy-tertiary-fixed);
  color:        var(--cmy-tertiary);
  border-color: var(--cmy-tertiary-container);
}

/* Delivery — neutral secondary-container family */
body.commy-v2 .cmy-delivery-chip--delivery {
  background:   var(--cmy-secondary-container);
  color:        var(--cmy-on-secondary-container);
  border-color: var(--cmy-outline-variant);
}

/* Carrier chip — neutral secondary-container family */
body.commy-v2 .cmy-carrier-chip {
  display:        inline-flex;
  align-items:    center;
  padding:        1px 6px;
  border-radius:  var(--cmy-radius-pill);
  border:         1px solid var(--cmy-outline-variant);
  font-size:      0.5625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space:    nowrap;
  background:     var(--cmy-secondary-container);
  color:          var(--cmy-on-secondary-container);
}
/* ── end carrier/delivery chips (story #169) ────────────────────────────── */

/* ── Time-slot chip pill atom (story #174) — included here so pickup-list-v2
   works when story #174 has not yet been merged into main.
   When #174 merges this rule becomes a no-op duplicate (same selector).    */
body.commy-v2 .cmy-slot-chip {
  display:       inline-flex;
  align-items:   center;
  padding:       4px 8px;
  border-radius: var(--cmy-radius-pill);
  border:        1px solid var(--cmy-outline-variant);
  background:    var(--cmy-surface-container-low);
  color:         var(--cmy-on-surface-variant);
  font-size:     0.75rem;
  font-weight:   500;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pickup List v2 (story #175)
   Scoped to .cmy-pickup-v2-wrap — does not affect v1 pages.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrap ──────────────────────────────────────────────────────────── */
.cmy-pickup-v2-wrap {
  display:        flex;
  flex-direction: column;
  gap:            var(--cmy-space-4);
  padding:        var(--cmy-space-4);
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.cmy-pickup-filter-bar {
  display:     flex;
  align-items: center;
  gap:         var(--cmy-space-3);
  flex-wrap:   wrap;
}

.cmy-pickup-filter-form {
  display:     flex;
  align-items: center;
  gap:         var(--cmy-space-2);
  flex-wrap:   wrap;
}

/* ── Pickup table ───────────────────────────────────────────────────────── */
.cmy-pickup-table {
  width: 100%;
}

/* ── Time-slot group header row ─────────────────────────────────────────── */
.cmy-pickup-slot-row {
  background: var(--cmy-surface-container-low);
}

.cmy-pickup-slot-cell {
  padding:     var(--cmy-space-2) var(--cmy-space-3);
  display:     table-cell;
  border-top:  2px solid var(--cmy-outline-variant);
}

.cmy-pickup-slot-count {
  margin-left:  var(--cmy-space-2);
  font-size:    0.75rem;
  color:        var(--cmy-on-surface-variant);
  font-weight:  500;
}

/* ── Cell modifiers ─────────────────────────────────────────────────────── */
.cmy-cell-customer {
  display:     flex;
  align-items: center;
  gap:         var(--cmy-space-2);
}

.cmy-customer-name {
  font-weight: 600;
}

.cmy-location-label {
  display:       block;
  max-width:     180px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  color:         var(--cmy-on-surface-variant);
}

/* ── Column widths ──────────────────────────────────────────────────────── */
.cmy-th-pickup-id       { width: 10%; }
.cmy-th-pickup-customer { width: 25%; }
.cmy-th-pickup-location { width: 22%; }
.cmy-th-pickup-status   { width: 18%; }
.cmy-th-pickup-time     { width: 15%; }
.cmy-th-pickup-actions  { width:  6%; text-align: center; }

/* ── Footer bar ─────────────────────────────────────────────────────────── */
.cmy-pickup-footer-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--cmy-space-2) var(--cmy-space-3);
  background:      var(--cmy-surface-container-low);
  border-radius:   var(--cmy-radius-md);
  font-size:       0.8125rem;
  color:           var(--cmy-on-surface-variant);
  flex-wrap:       wrap;
  gap:             var(--cmy-space-2);
}

.cmy-pickup-footer-total {
  font-weight: 600;
  color:       var(--cmy-on-surface);
}

/* ── end Pickup List v2 (story #175) ────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   === CMY CALENDAR GRID === (task 180 / story 177)
   Shared week + month calendar primitive. Zero hex literals.
   All colours reference --cmy-* custom properties.
   Scoped to .cmy-cal — does not affect v1 pages.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ──────────────────────────────────────────────────────── */
.cmy-cal {
  display:        flex;
  flex-direction: column;
  gap:            var(--cmy-space-3, 0.75rem);
  width:          100%;
}

/* ── Nav bar (prev chevron | title | next chevron) ──────────────────────── */
.cmy-cal-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--cmy-space-2, 0.5rem) 0;
}

/* ── Month/range heading ────────────────────────────────────────────────── */
.cmy-cal-title {
  font-family:    'Montserrat', 'Arial', sans-serif;
  font-size:      1rem;
  font-weight:    700;
  letter-spacing: var(--cmy-tracking-wide);
  color:          var(--cmy-on-surface);
  flex:           1;
  text-align:     center;
}

/* ── Nav chevron buttons — reuses .cmy-btn-icon sizing ──────────────────── */
.cmy-cal-prev,
.cmy-cal-next {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.5rem;
  border-radius:   var(--cmy-radius-md);
  color:           var(--cmy-on-surface-variant);
  text-decoration: none;
  transition:      var(--cmy-transition);
}

.cmy-cal-prev:hover,
.cmy-cal-next:hover {
  background: var(--cmy-surface-container-high);
  color:      var(--cmy-on-surface);
}

/* ── 7-column CSS grid (shared week + month) ────────────────────────────── */
.cmy-cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  border-left:           1px solid var(--cmy-surface-container-highest);
  border-top:            1px solid var(--cmy-surface-container-highest);
}

/* ── SUN/MON…SAT column headers ────────────────────────────────────────── */
.cmy-cal-col-header {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             2px;
  padding:         var(--cmy-space-2, 0.5rem) var(--cmy-space-1, 0.25rem);
  font-size:       0.625rem;
  font-weight:     700;
  letter-spacing:  var(--cmy-tracking-widest);
  text-transform:  uppercase;
  color:           var(--cmy-on-surface-variant);
  background:      var(--cmy-surface-container-low);
  border-right:    1px solid var(--cmy-surface-container-highest);
  border-bottom:   1px solid var(--cmy-surface-container-highest);
}

/* Day abbreviation (SUN, MON…) inside col header */
.cmy-cal-day-abbr {
  color: var(--cmy-on-surface-variant);
}

/* Day number inside col header (week view) */
.cmy-cal-col-header .cmy-cal-day-num {
  font-size:   0.875rem;
  font-weight: 700;
  color:       var(--cmy-on-surface);
}

/* ── Date cell (month view) or day column (week view) ──────────────────── */
.cmy-cal-cell {
  display:        flex;
  flex-direction: column;
  gap:            var(--cmy-space-1, 0.25rem);
  padding:        var(--cmy-space-2, 0.5rem);
  border-right:   1px solid var(--cmy-surface-container-highest);
  border-bottom:  1px solid var(--cmy-surface-container-highest);
  min-height:     5.5rem;
  background:     var(--cmy-surface-container-lowest);
  transition:     background var(--cmy-transition);
}

/* Day number label inside a cell (month view) */
.cmy-cal-cell .cmy-cal-day-num {
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--cmy-on-surface-variant);
  align-self:  flex-end;
}

/* ── Today highlight ────────────────────────────────────────────────────── */
.cmy-cal-cell.is-today {
  background: var(--cmy-primary-fixed);
}

.cmy-cal-cell.is-today .cmy-cal-day-num {
  color:            var(--cmy-on-primary-container);
  font-weight:      800;
}

/* ── Days from prior/next month (month view only) ───────────────────────── */
.cmy-cal-cell.is-other-month {
  background: var(--cmy-surface-container-low);
}

.cmy-cal-cell.is-other-month .cmy-cal-day-num {
  color: var(--cmy-surface-dim);
}

/* ── Order card inside a cell ───────────────────────────────────────────── */
.cmy-cal-order-card {
  display:          flex;
  flex-direction:   column;
  gap:              2px;
  padding:          var(--cmy-space-1, 0.25rem) var(--cmy-space-2, 0.5rem);
  border-radius:    var(--cmy-radius-sm);
  border:           1px solid var(--cmy-outline-variant);
  background:       var(--cmy-surface-container-lowest);
  cursor:           pointer;
  text-align:       left;
  font:             inherit;
  font-size:        0.6875rem;
  color:            var(--cmy-on-surface);
  width:            100%;
  transition:       background var(--cmy-transition), box-shadow var(--cmy-transition);
  box-shadow:       var(--cmy-shadow-sm);
}

.cmy-cal-order-card:hover {
  background:  var(--cmy-surface-container-high);
  box-shadow:  var(--cmy-shadow-md);
}

/* Card — order ID line */
.cmy-cal-card-id {
  font-weight:    700;
  letter-spacing: var(--cmy-tracking-wide);
  color:          var(--cmy-primary);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* Card — customer name line */
.cmy-cal-card-name {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  color:         var(--cmy-on-surface-variant);
}

/* Card — status pill: reuses .cmy-status-badge but smaller */
.cmy-cal-order-card .cmy-status-badge {
  font-size:     0.5625rem;
  padding:       1px 5px;
  align-self:    flex-start;
}

/* ── Count badge (month cells) ──────────────────────────────────────────── */
.cmy-cal-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       1.125rem;
  height:          1.125rem;
  border-radius:   var(--cmy-radius-pill);
  background:      var(--cmy-primary);
  color:           var(--cmy-on-primary);
  font-size:       0.5625rem;
  font-weight:     700;
  padding:         0 4px;
  align-self:      flex-start;
}

/* ── Empty cell placeholder (keeps layout when no orders) ───────────────── */
.cmy-cal-empty {
  flex:       1;
  min-height: 1rem;
}

/* ── Month-view tiny order strips (story: business-owner request post-M15) ──
   Format: "#NUM - Customer Name". Background = status color (no separate label).
   Click → opens existing Order Detail Drawer via JS handler in app.js. */
.cmy-cal-strip-list {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  margin-top:     4px;
  width:          100%;
  overflow:       hidden;
}

.cmy-cal-strip {
  appearance:      none;
  border:          1px solid transparent;
  border-radius:   3px;
  padding:         2px 5px;
  font:            inherit;
  font-size:       0.6875rem; /* 11px — tiny, fits in narrow month cells */
  line-height:     1.25;
  text-align:      left;
  cursor:          pointer;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  display:         block;
  width:           100%;
  transition:      filter 0.12s, transform 0.12s;
  /* Default fallback colors (match --default badge) */
  background:      var(--cmy-surface-container-low, #f8fafc);
  color:           var(--cmy-on-surface-variant, #64748b);
  border-color:    var(--cmy-outline-variant, #e2e8f0);
}

.cmy-cal-strip:hover {
  filter:    brightness(0.96);
  transform: translateX(1px);
}

.cmy-cal-strip:focus-visible {
  outline:        2px solid var(--cmy-primary, #ea580c);
  outline-offset: 1px;
}

/* Status-color modifiers (mirror .cmy-status-badge--* token usage) */
.cmy-cal-strip--pending {
  background:   var(--cmy-status-pending-bg);
  color:        var(--cmy-status-pending-fg);
  border-color: var(--cmy-status-pending-bd);
}
.cmy-cal-strip--processing {
  background:   var(--cmy-status-processing-bg);
  color:        var(--cmy-status-processing-fg);
  border-color: var(--cmy-status-processing-bd);
}
.cmy-cal-strip--complete {
  background:   var(--cmy-status-complete-bg);
  color:        var(--cmy-status-complete-fg);
  border-color: var(--cmy-status-complete-bd);
}
.cmy-cal-strip--cancelled {
  background:   var(--cmy-status-cancelled-bg);
  color:        var(--cmy-status-cancelled-fg);
  border-color: var(--cmy-status-cancelled-bd);
}
.cmy-cal-strip--on-hold {
  background:   var(--cmy-status-onhold-bg);
  color:        var(--cmy-status-onhold-fg);
  border-color: var(--cmy-status-onhold-bd);
}
.cmy-cal-strip--ready {
  background:   var(--cmy-status-ready-bg);
  color:        var(--cmy-status-ready-fg);
  border-color: var(--cmy-status-ready-bd);
}
.cmy-cal-strip--in-transit {
  background:   var(--cmy-status-intransit-bg, var(--cmy-status-ready-bg));
  color:        var(--cmy-status-intransit-fg, var(--cmy-status-ready-fg));
  border-color: var(--cmy-status-intransit-bd, var(--cmy-status-ready-bd));
}
.cmy-cal-strip--at-location {
  background:   var(--cmy-tertiary-fixed, #f3e8ff);
  color:        var(--cmy-on-tertiary-fixed, #6b21a8);
  border-color: var(--cmy-tertiary-fixed-dim, #e9d5ff);
}

.cmy-cal-strip-more {
  font-size:    0.6875rem;
  color:        var(--cmy-on-surface-variant, #64748b);
  padding:      0 4px;
  font-style:   italic;
}

/* ── Responsive: collapse to horizontally scrollable rail below 640px ───── */
@media (max-width: 640px) {
  .cmy-cal-grid {
    display:    grid;
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(6rem, 1fr));
    min-width:  42rem;
  }

  .cmy-cal {
    overflow-x: auto;
  }
}

/* ── end CMY CALENDAR GRID (task 180) ───────────────────────────────────── */

/* ── begin CMY DRAWER SCAFFOLD (story #218 D1, task #223) ───────────────── */

/* ── Backdrop / scrim ───────────────────────────────────────────────────── */
.cmy-drawer-scrim,
#cbg-fe-detail-backdrop.cbg-fe-drawer-backdrop {
  /* Existing .cbg-fe-drawer-backdrop handles open/close animation.
     This alias keeps the new semantic name available for D2 consumers. */
}

/* ── Drawer panel ───────────────────────────────────────────────────────── */
.cmy-drawer {
  position:        fixed;
  top:             0;
  right:           0;
  height:          100vh;
  height:          100dvh;
  width:           45%;
  max-width:       820px;
  min-width:       420px;
  background:      var(--cmy-surface-container-lowest);
  box-shadow:      var(--cmy-shadow-lg);
  z-index:         9001;
  display:         flex;
  flex-direction:  column;
  transform:       translateX(100%);
  transition:      transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  will-change:     transform;
}

.cmy-drawer.is-open {
  transform: translateX(0);
}

/* ── Zone 1: Head ────────────────────────────────────────────────────────── */
.cmy-drawer-head {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.25rem 1.5rem 1rem;
  border-bottom:   1px solid var(--cmy-outline-variant);
  background:      var(--cmy-surface-container-lowest);
  flex-shrink:     0;
}

.cmy-drawer-head-left {
  display:        flex;
  flex-direction: column;
  gap:            0.125rem;
  min-width:      0;
}

.cmy-drawer-head-right {
  display:     flex;
  align-items: center;
  gap:         0.25rem;
  flex-shrink: 0;
}

/* Eyebrow label (e.g. "ORDER DETAIL") */
.cmy-eyebrow {
  font-size:      0.5625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-widest);
  color:          var(--cmy-on-surface-variant);
  line-height:    1;
}

/* Re-usable muted text utilities (scoped to cmy- context) */
.cmy-muted-xs {
  font-size:   0.625rem;
  color:       var(--cmy-on-surface-variant);
  line-height: 1.4;
}

.cmy-muted-sm {
  font-size:   0.75rem;
  color:       var(--cmy-on-surface-variant);
  line-height: 1.4;
}

/* Drawer title */
.cmy-drawer-title {
  font-family:     'Montserrat', sans-serif;
  font-weight:     800;
  font-size:       1.125rem;
  letter-spacing:  var(--cmy-tracking-tight);
  color:           var(--cmy-on-surface);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

/* Meta row (status badge + store label) */
.cmy-drawer-meta {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  margin-top:  0.25rem;
}

/* ── Zone 2: FSM progress strip ──────────────────────────────────────────── */
.cmy-drawer-fsm {
  flex-shrink:   0;
  padding:       0.5rem 1.5rem;
  border-bottom: 1px solid var(--cmy-outline-variant);
  background:    var(--cmy-surface-container-low);
  min-height:    2.5rem;
}

/* ── Zone 3: Tab bar ─────────────────────────────────────────────────────── */
.cmy-drawer-tabs {
  display:       flex;
  align-items:   stretch;
  gap:           0;
  border-bottom: 1px solid var(--cmy-outline-variant);
  background:    var(--cmy-surface-container-lowest);
  flex-shrink:   0;
  overflow-x:    auto;
}

.cmy-drawer-tab {
  flex:           0 0 auto;
  padding:        0.625rem 1rem;
  font-size:      0.75rem;
  font-weight:    600;
  color:          var(--cmy-on-surface-variant);
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     color 0.15s ease, border-color 0.15s ease;
  letter-spacing: var(--cmy-tracking-wide);
}

.cmy-drawer-tab:hover {
  color: var(--cmy-on-surface);
}

.cmy-drawer-tab.is-active {
  color:        var(--cmy-primary);
  border-color: var(--cmy-primary);
  font-weight:  700;
}

/* ── Zone 4: Body ────────────────────────────────────────────────────────── */
.cmy-drawer-body {
  flex:       1;
  overflow-y: auto;
  padding:    1.25rem 1.5rem;
  background: var(--cmy-surface);
}

/* Loading spinner placeholder */
.cmy-drawer-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         4rem 2rem;
  color:           var(--cmy-on-surface-variant);
}

.cmy-drawer-loading .material-symbols-outlined {
  font-size:    2rem;
  display:      block;
  margin-bottom: 0.75rem;
}

/* ── Zone 4 inner: section / kv primitives ───────────────────────────────── */
.cmy-drawer-sections {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.cmy-section {
  background:    var(--cmy-surface-container-lowest);
  border:        1px solid var(--cmy-outline-variant);
  border-radius: var(--cmy-radius-lg);
  overflow:      hidden;
}

.cmy-section-title {
  padding:        0.5rem 1rem;
  font-size:      0.625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-wider);
  color:          var(--cmy-on-surface-variant);
  background:     var(--cmy-surface-container-low);
  border-bottom:  1px solid var(--cmy-outline-variant);
}

.cmy-section-body {
  padding: 0.25rem 0;
}

.cmy-kv {
  display:     flex;
  align-items: baseline;
  gap:         0.5rem;
  padding:     0.375rem 1rem;
  font-size:   0.8125rem;
  line-height: 1.5;
}

.cmy-kv-k {
  flex:        0 0 7rem;
  font-size:   0.75rem;
  font-weight: 500;
  color:       var(--cmy-on-surface-variant);
}

.cmy-kv-v {
  flex:     1;
  min-width: 0;
  color:    var(--cmy-on-surface);
}

.cmy-kv-strong {
  font-weight: 700;
  color:       var(--cmy-on-surface);
}

/* ── Zone 4 inner: items table ───────────────────────────────────────────── */
.cmy-items-table {
  display: flex;
  flex-direction: column;
}

.cmy-items-head,
.cmy-items-body {
  display:               grid;
  grid-template-columns: 5rem 1fr 3rem 5rem 5rem;
  gap:                   0.5rem;
  padding:               0.375rem 1rem;
  font-size:             0.75rem;
  align-items:           center;
}

.cmy-items-head {
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  var(--cmy-tracking-wide);
  color:           var(--cmy-on-surface-variant);
  background:      var(--cmy-surface-container-low);
  border-bottom:   1px solid var(--cmy-outline-variant);
}

.cmy-items-body {
  border-bottom: 1px solid var(--cmy-surface-container);
  color:         var(--cmy-on-surface);
}

.cmy-items-body:last-child {
  border-bottom: none;
}

.cmy-items-totals {
  padding:       0.5rem 1rem;
  border-top:    1px solid var(--cmy-outline-variant);
  display:       flex;
  flex-direction: column;
  gap:           0.25rem;
}

.cmy-items-totals > div {
  display:         flex;
  justify-content: space-between;
  font-size:       0.8125rem;
  color:           var(--cmy-on-surface-variant);
}

.cmy-items-totals-grand {
  font-weight: 700;
  color:       var(--cmy-on-surface);
  margin-top:  0.25rem;
  padding-top: 0.25rem;
  border-top:  1px solid var(--cmy-outline-variant);
}

/* ── Zone 4 inner: checklist ─────────────────────────────────────────────── */
.cmy-checklist {
  list-style: none;
  margin:     0;
  padding:    0.25rem 0;
}

.cmy-checklist li {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  padding:     0.375rem 1rem;
  font-size:   0.8125rem;
  color:       var(--cmy-on-surface);
}

.cmy-checklist li.is-done {
  color:           var(--cmy-on-surface-variant);
  text-decoration: line-through;
}

.cmy-checklist li .material-symbols-outlined {
  font-size: 1.125rem;
}

/* ── Zone 4 inner: activity feed ─────────────────────────────────────────── */
.cmy-activity {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.cmy-activity-row {
  display:       flex;
  align-items:   flex-start;
  gap:           0.75rem;
  padding:       0.75rem 0;
  border-bottom: 1px solid var(--cmy-surface-container);
}

.cmy-activity-row:last-child {
  border-bottom: none;
}

.cmy-activity-row.is-future {
  opacity: 0.45;
}

.cmy-activity-icon {
  font-size:      1.25rem;
  color:          var(--cmy-primary);
  flex-shrink:    0;
  margin-top:     0.0625rem;
}

.cmy-activity-row.is-future .cmy-activity-icon {
  color: var(--cmy-on-surface-variant);
}

.cmy-activity-main {
  display:        flex;
  flex-direction: column;
  gap:            0.125rem;
  min-width:      0;
}

.cmy-activity-what {
  font-size:   0.8125rem;
  font-weight: 600;
  color:       var(--cmy-on-surface);
  line-height: 1.4;
}

/* ── Zone 5: Footer ──────────────────────────────────────────────────────── */
.cmy-drawer-foot {
  display:        flex;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            0.5rem;
  padding:        1rem 1.5rem;
  border-top:     1px solid var(--cmy-outline-variant);
  background:     var(--cmy-surface-container-lowest);
  flex-shrink:    0;
}

.cmy-drawer-foot-left {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex:        0 0 auto;
}

.cmy-drawer-foot-right {
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
  flex:            1;
  justify-content: flex-end;
}

/* Done/state pills (complete / cancelled / hold) */
.cmy-done-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           0.375rem;
  padding:       0.5rem 0.875rem;
  border-radius: var(--cmy-radius-pill);
  font-size:     0.75rem;
  font-weight:   700;
  background:    var(--cmy-surface-container);
  color:         var(--cmy-on-surface-variant);
}

.cmy-done-pill .material-symbols-outlined {
  font-size: 1rem;
}

.cmy-done-pill.is-danger {
  background: var(--cmy-error-container);
  color:      var(--cmy-error);
}

.cmy-done-pill.is-hold {
  background: var(--cmy-status-onhold-bg);
  color:      var(--cmy-status-onhold-fg);
}

/* Keyboard shortcut badge on primary CTA buttons */
.cmy-btn-kbd {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  height:        1.125rem;
  min-width:     1.125rem;
  padding:       0 0.25rem;
  border-radius: var(--cmy-radius-sm);
  background:    var(--cmy-btn-kbd-bg);
  font-size:     0.6875rem;
  font-weight:   700;
  letter-spacing: 0;
  margin-left:   0.25rem;
}

/* ── end CMY DRAWER SCAFFOLD (story #218 D1) ─────────────────────────────── */

/* ── begin CMY CARD VIEW (story #215) ───────────────────────────────────── */

/* Container */
.cmy-cards {
  padding: 8px;
}

/* Header row (column labels) */
.cmy-cards-header {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 2fr;
  gap: 16px;
  padding: 10px 16px;
  background: var(--surface-container-highest);
  border-radius: var(--radius-md);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--on-secondary-container);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Card row — 4-column grid */
.cmy-card-row {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 2fr;
  gap: 16px;
  padding: 16px;
  background: var(--surface-container-lowest);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin-bottom: 8px;
  box-shadow: var(--cmy-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cmy-card-row:hover {
  border-color: var(--surface-container-highest);
  box-shadow: var(--cmy-shadow-md);
}
.cmy-card-row:focus {
  outline: 2px solid var(--primary-container);
  outline-offset: -2px;
}

/* Card columns */
.cmy-card-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cmy-card-col-right {
  align-items: flex-end;
  text-align: right;
}

/* Order ID — large variant */
.cmy-id-lg {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--on-surface);
}

/* Handler — card layout (avatar + full name, below channel) */
.cmy-handler-card {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--on-surface);
}

/* Line items block (col 2) */
.cmy-items-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cmy-item-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  color: var(--on-secondary-container);
  margin-left: auto;
}

/* Note block (customer note beneath line items) */
.cmy-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--primary-fixed);
  border-left: 2px solid var(--primary-container);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--on-primary-container);
}
.cmy-note .material-symbols-outlined {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Timeline (col 3) */
.cmy-timeline {
  font-size: 0.75rem;
}
.cmy-timeline-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}
.cmy-timeline-label {
  color: var(--on-secondary-container);
  font-weight: 600;
}
.cmy-timeline-value {
  color: var(--on-surface);
  font-weight: 600;
}
.cmy-timeline-value.is-overdue {
  color: var(--error);
}
.cmy-timeline-rel {
  margin-top: 4px;
  font-size: 0.6875rem;
  color: var(--on-secondary-container);
  font-style: italic;
}

/* Total — large variant (col 4) */
.cmy-total-cell-lg {
  font-size: 1.25rem;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--on-surface);
}

/* Status stack — right-aligned (col 4) */
.cmy-status-stack-right {
  align-items: flex-end;
  margin-top: auto;
}

/* ── end CMY CARD VIEW (story #215) ─────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   === CMY TODAY VIEW === (story #217)
   Hourly timeline for ?view=today. Zero hex literals.
   All colours reference --cmy-* custom properties.
   Scoped to .cmy-calendar-today — no impact on week/month.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ──────────────────────────────────────────────────────── */
.cmy-calendar-today {
  display:        flex;
  flex-direction: column;
  gap:            var(--cmy-space-3, 0.75rem);
  width:          100%;
}

/* ── Head section: date + summary line ─────────────────────────────────── */
.cmy-today-head {
  display:        flex;
  flex-direction: column;
  gap:            var(--cmy-space-1, 0.25rem);
  padding:        var(--cmy-space-3, 0.75rem) var(--cmy-space-4, 1rem);
  background:     var(--cmy-surface-container-low);
  border-radius:  var(--cmy-radius-md);
  border:         1px solid var(--cmy-surface-container-highest);
}

/* Date heading e.g. "Mon, Apr 28 — TODAY" */
.cmy-today-date {
  font-family:    'Montserrat', 'Arial', sans-serif;
  font-size:      1rem;
  font-weight:    700;
  letter-spacing: var(--cmy-tracking-wide);
  color:          var(--cmy-on-surface);
}

/* "— TODAY" inline accent within the date heading */
.cmy-today-label {
  color:       var(--cmy-primary);
  font-weight: 800;
}

/* "N orders due today" summary */
.cmy-today-summary {
  font-size:  0.8125rem;
  color:      var(--cmy-on-surface-variant);
}

/* ── 24-slot timeline container ─────────────────────────────────────────── */
.cmy-today-timeline {
  display:        flex;
  flex-direction: column;
  border:         1px solid var(--cmy-surface-container-highest);
  border-radius:  var(--cmy-radius-md);
  overflow:       hidden;
}

/* ── Single hour slot ───────────────────────────────────────────────────── */
.cmy-today-slot {
  display:     grid;
  grid-template-columns: 4.5rem 1fr;
  min-height:  2.75rem;
  border-bottom: 1px solid var(--cmy-surface-container-highest);
  transition:  background var(--cmy-transition);
}

/* Remove bottom border on last slot */
.cmy-today-slot:last-child {
  border-bottom: none;
}

/* Slot with orders: slightly elevated background */
.cmy-today-slot.has-items {
  background: var(--cmy-surface-container-low);
}

/* ── Hour label (left column) ───────────────────────────────────────────── */
.cmy-today-slot-time {
  display:         flex;
  align-items:     flex-start;
  justify-content: flex-end;
  padding:         var(--cmy-space-2, 0.5rem) var(--cmy-space-2, 0.5rem) var(--cmy-space-2, 0.5rem) var(--cmy-space-3, 0.75rem);
  font-size:       0.625rem;
  font-weight:     600;
  letter-spacing:  var(--cmy-tracking-widest);
  text-transform:  uppercase;
  color:           var(--cmy-on-surface-variant);
  border-right:    1px solid var(--cmy-surface-container-highest);
  white-space:     nowrap;
}

/* ── Order cards container (right column) ───────────────────────────────── */
.cmy-today-slot-items {
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--cmy-space-1, 0.25rem);
  padding:        var(--cmy-space-1, 0.25rem) var(--cmy-space-2, 0.5rem);
  align-content:  flex-start;
}

/* ── Order card ─────────────────────────────────────────────────────────── */
.cmy-today-item {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding:        var(--cmy-space-1, 0.25rem) var(--cmy-space-2, 0.5rem);
  border-radius:  var(--cmy-radius-sm);
  border:         1px solid var(--cmy-outline-variant);
  background:     var(--cmy-surface-container-lowest);
  cursor:         pointer;
  text-align:     left;
  font:           inherit;
  font-size:      0.6875rem;
  color:          var(--cmy-on-surface);
  min-width:      10rem;
  max-width:      16rem;
  transition:     background var(--cmy-transition), box-shadow var(--cmy-transition);
  box-shadow:     var(--cmy-shadow-sm);
}

.cmy-today-item:hover {
  background:  var(--cmy-surface-container-high);
  box-shadow:  var(--cmy-shadow-md);
}

/* Card — row containing ID + status badge */
.cmy-today-item-head {
  display:     flex;
  align-items: center;
  gap:         var(--cmy-space-1, 0.25rem);
  flex-wrap:   wrap;
}

/* Card — order ID */
.cmy-today-item .cmy-id {
  font-weight:    700;
  letter-spacing: var(--cmy-tracking-wide);
  color:          var(--cmy-primary);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* Status badge inside today card: inherits .cmy-status-badge but smaller */
.cmy-today-item .cmy-status-badge {
  font-size:  0.5625rem;
  padding:    1px 5px;
  flex-shrink: 0;
}

/* Card — customer name */
.cmy-today-item-cust {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  color:         var(--cmy-on-surface-variant);
}

/* Card — formatted total */
.cmy-today-item-total {
  font-weight: 600;
  color:       var(--cmy-on-surface);
}

/* ── Responsive: timeline collapses gracefully below 480px ─────────────── */
@media (max-width: 480px) {
  .cmy-today-slot {
    grid-template-columns: 3rem 1fr;
  }

  .cmy-today-item {
    min-width: 7rem;
  }
}

/* ── end CMY TODAY VIEW (story #217) ────────────────────────────────────── */

/* ── begin CMY KANBAN VIEW (story #216) ─────────────────────────────────── */

/* Per-status dot colour tokens + kanban layout tokens (bug #238 fix) */
:root {
  --cmy-status-atlocation-fg: var(--cmy-status-onhold-fg);
  --cmy-status-atlocation-bg: var(--cmy-status-onhold-bg);
  --cmy-status-atlocation-bd: var(--cmy-status-onhold-bd);
  /* Explicit column width token — fallback was the only definition before */
  --cmy-kan-col-width:        16rem;
}

/* ── Outer kanban board — horizontal flex, scrolls when narrow ─────────── */
.cmy-kanban {
  display:        flex;
  flex-direction: row;
  gap:            var(--cmy-space-3, 0.75rem);
  overflow-x:     auto;
  padding:        var(--cmy-space-3, 0.75rem) 0;
  align-items:    flex-start;
}

/* ── Column ────────────────────────────────────────────────────────────── */
.cmy-kan-col {
  flex:           0 0 var(--cmy-kan-col-width, 16rem);
  min-width:      var(--cmy-kan-col-width, 16rem);
  min-height:     12rem; /* ensure empty columns are always visible */
  display:        flex;
  flex-direction: column;
  gap:            var(--cmy-space-2, 0.5rem);
  background:     var(--cmy-surface-container-low);
  border-radius:  var(--cmy-radius-lg);
  overflow:       hidden;
  /* explicit border so column stands out regardless of background similarity */
  border:         1px solid var(--cmy-surface-container-highest);
}

/* ── Column header ─────────────────────────────────────────────────────── */
.cmy-kan-head {
  display:        flex;
  align-items:    center;
  gap:            var(--cmy-space-2, 0.5rem);
  padding:        var(--cmy-space-2, 0.5rem) var(--cmy-space-3, 0.75rem);
  border-top:     3px solid transparent;
  background:     var(--cmy-surface-container-low);
}

/* ── Column dot — filled circle matching status colour ─────────────────── */
.cmy-kan-dot {
  width:         8px;
  height:        8px;
  border-radius: var(--cmy-radius-pill);
  flex-shrink:   0;
  background:    var(--cmy-on-surface-variant);
}

/* ── Column title ──────────────────────────────────────────────────────── */
.cmy-kan-title {
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: var(--cmy-tracking-wider, 0.1em);
  text-transform: uppercase;
  color:          var(--cmy-on-surface-variant);
  flex:           1;
  min-width:      0;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* ── Card count badge ──────────────────────────────────────────────────── */
.cmy-kan-count {
  font-size:     0.625rem;
  font-weight:   700;
  padding:       1px 5px;
  border-radius: var(--cmy-radius-pill);
  background:    var(--cmy-surface-container-highest);
  color:         var(--cmy-on-surface-variant);
  flex-shrink:   0;
}

/* ── Column body — scrollable card stack ───────────────────────────────── */
.cmy-kan-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--cmy-space-2, 0.5rem);
  padding:        0 var(--cmy-space-2, 0.5rem) var(--cmy-space-2, 0.5rem);
  max-height:     calc(100vh - 220px);
  overflow-y:     auto;
}

/* ── Empty column placeholder ──────────────────────────────────────────── */
.cmy-kan-empty {
  text-align:  center;
  padding:     var(--cmy-space-3, 0.75rem);
  color:       var(--cmy-on-surface-variant);
  font-size:   0.75rem;
  opacity:     0.5;
}

/* ── Kanban card ───────────────────────────────────────────────────────── */
.cmy-kan-card {
  background:    var(--cmy-surface-container-lowest);
  border:        1px solid var(--cmy-surface-container-high);
  border-radius: var(--cmy-radius-md);
  padding:       var(--cmy-space-2, 0.5rem) var(--cmy-space-3, 0.75rem);
  cursor:        pointer;
  display:       flex;
  flex-direction: column;
  gap:           var(--cmy-space-1, 0.25rem);
  transition:    border-color var(--cmy-transition, 0.15s ease), box-shadow var(--cmy-transition, 0.15s ease);
}
.cmy-kan-card:hover {
  border-color: var(--cmy-surface-container-highest);
  box-shadow:   var(--cmy-shadow-sm);
}
.cmy-kan-card:focus {
  outline:        2px solid var(--cmy-primary-container);
  outline-offset: -2px;
}

/* ── Card top row: ID + priority chip ─────────────────────────────────── */
.cmy-kan-card-top {
  display:     flex;
  align-items: center;
  gap:         var(--cmy-space-2, 0.5rem);
  flex-wrap:   wrap;
}
.cmy-kan-card-top .cmy-id {
  font-size:      0.75rem;
  font-weight:    700;
  color:          var(--cmy-primary);
  letter-spacing: var(--cmy-tracking-wide, 0.04em);
}

/* ── Customer name — small variant ────────────────────────────────────── */
.cmy-cust-sm {
  font-size:     0.8125rem;
  font-weight:   600;
  color:         var(--cmy-on-surface);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ── Kanban items list (max 2 shown) ───────────────────────────────────── */
.cmy-kan-items {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  margin-top:     var(--cmy-space-1, 0.25rem);
}
.cmy-kan-items .cmy-item-row {
  display:   flex;
  gap:       4px;
  font-size: 0.6875rem;
  color:     var(--cmy-on-surface-variant);
}
.cmy-kan-items .cmy-item-qty {
  flex-shrink:   0;
  font-weight:   600;
}
.cmy-kan-items .cmy-item-name {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ── Card footer: total + relative due ─────────────────────────────────── */
.cmy-kan-foot {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--cmy-space-2, 0.5rem);
  margin-top:      var(--cmy-space-1, 0.25rem);
  padding-top:     var(--cmy-space-1, 0.25rem);
  border-top:      1px solid var(--cmy-surface-container-high);
}
.cmy-kan-foot .cmy-total-cell {
  font-size:      0.8125rem;
  font-weight:    700;
  font-family:    'IBM Plex Mono', monospace;
  color:          var(--cmy-on-surface);
}
.cmy-kan-foot .cmy-muted-xs.is-overdue {
  color: var(--cmy-status-cancelled-fg);
}

/* ── Per-status dot + head border-top colour ───────────────────────────── */
[data-status="pending"] .cmy-kan-dot        { background:         var(--cmy-status-pending-fg); }
[data-status="pending"] .cmy-kan-head       { border-top-color:   var(--cmy-status-pending-fg); }

[data-status="processing"] .cmy-kan-dot     { background:         var(--cmy-status-processing-fg); }
[data-status="processing"] .cmy-kan-head    { border-top-color:   var(--cmy-status-processing-fg); }

[data-status="ready"] .cmy-kan-dot          { background:         var(--cmy-status-ready-fg); }
[data-status="ready"] .cmy-kan-head         { border-top-color:   var(--cmy-status-ready-fg); }

[data-status="in-transit"] .cmy-kan-dot     { background:         var(--cmy-status-intransit-fg); }
[data-status="in-transit"] .cmy-kan-head    { border-top-color:   var(--cmy-status-intransit-fg); }

[data-status="at-location"] .cmy-kan-dot    { background:         var(--cmy-status-atlocation-fg); }
[data-status="at-location"] .cmy-kan-head   { border-top-color:   var(--cmy-status-atlocation-fg); }

[data-status="complete"] .cmy-kan-dot       { background:         var(--cmy-status-complete-fg); }
[data-status="complete"] .cmy-kan-head      { border-top-color:   var(--cmy-status-complete-fg); }

[data-status="on-hold"] .cmy-kan-dot        { background:         var(--cmy-status-onhold-fg); }
[data-status="on-hold"] .cmy-kan-head       { border-top-color:   var(--cmy-status-onhold-fg); }

[data-status="cancelled"] .cmy-kan-dot      { background:         var(--cmy-status-cancelled-fg); }
[data-status="cancelled"] .cmy-kan-head     { border-top-color:   var(--cmy-status-cancelled-fg); }

/* ── Responsive: stack columns below 640px ─────────────────────────────── */
@media (max-width: 640px) {
  .cmy-kanban {
    flex-direction: column;
    overflow-x:     visible;
  }
  .cmy-kan-col {
    flex:      0 0 auto;
    min-width: 0;
    width:     100%;
  }
}

/* ── end CMY KANBAN VIEW (story #216) ───────────────────────────────────── */

/* =========================================================================
   GLOBAL SEARCH OVERLAY + NOTIFICATIONS PANEL — task #266 (story #258)
   All tokens use --cmy-* variables. Zero hex literals.
   ========================================================================= */

/* ── Additional design tokens (z-index layers + missing aliases) ──────── */
:root {
    --cmy-z-overlay:    9100;
    --cmy-z-dropdown:   9000;
    --cmy-on-error:     var(--cmy-on-primary);   /* white — same as on-primary */
}

/* ── Global search overlay ──────────────────────────────────────────────── */
.cmy-search-overlay {
    position:        fixed;
    inset:           0;
    z-index:         var(--cmy-z-overlay);
    display:         flex;
    align-items:     flex-start;
    justify-content: center;
    padding-top:     clamp(4rem, 10vh, 8rem);
}

/* Author display:flex overrides the UA [hidden] rule — re-assert it here (bug #284) */
.cmy-search-overlay[hidden] { display: none; }

.cmy-search-overlay-backdrop {
    position:   fixed;
    inset:      0;
    background: var(--cmy-scrim);
    z-index:    -1;
}

.cmy-search-overlay-dialog {
    position:      relative;
    width:         min(640px, 90vw);
    background:    var(--cmy-surface-container);
    border-radius: var(--cmy-radius-lg);
    box-shadow:    var(--cmy-shadow-lg);
    overflow:      hidden;
}

.cmy-search-overlay-input-wrap {
    position:      relative;
    display:       flex;
    align-items:   center;
    padding:       12px 16px;
    border-bottom: 1px solid var(--cmy-outline-variant);
}

.cmy-search-overlay-input-wrap .cmy-search-icon {
    position:       absolute;
    left:           1rem;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      1.25rem;
    color:          var(--cmy-on-surface-variant);
    pointer-events: none;
    flex-shrink:    0;
}

.cmy-search-overlay-input-wrap .cmy-search-input {
    flex:         1;
    border:       none;
    outline:      none;
    background:   transparent;
    font-size:    1rem;
    color:        var(--cmy-on-surface);
    font-family:  inherit;
    line-height:  1.5;
    padding-left: 2.25rem;
}

.cmy-search-input::placeholder {
    color: var(--cmy-on-surface-variant);
}

.cmy-search-kbd {
    background:    var(--cmy-surface-container-high);
    border:        1px solid var(--cmy-outline-variant);
    border-radius: var(--cmy-radius-sm);
    padding:       2px 6px;
    font-size:     0.6875rem;
    font-family:   monospace;
    color:         var(--cmy-on-surface-variant);
    flex-shrink:   0;
    line-height:   1.4;
}

.cmy-search-results {
    max-height: 400px;
    overflow-y: auto;
}

.cmy-search-results-group {
    padding: 0;
}

.cmy-search-results-group-label {
    font-size:      0.75rem;
    font-weight:    600;
    color:          var(--cmy-on-surface-variant);
    padding:        8px 16px 4px;
    letter-spacing: var(--cmy-tracking-wider);
    text-transform: uppercase;
}

.cmy-search-result-item {
    display:        flex;
    flex-direction: column;
    padding:        10px 16px;
    cursor:         pointer;
    border-radius:  var(--cmy-radius-sm);
    transition:     background var(--cmy-transition);
}

.cmy-search-result-item:hover {
    background: var(--cmy-surface-container-high);
}

.cmy-search-result-item.is-focused {
    background: var(--cmy-primary-fixed);
}

.cmy-search-result-label {
    font-size:   0.875rem;
    font-weight: 500;
    color:       var(--cmy-on-surface);
}

.cmy-search-result-sub {
    font-size: 0.75rem;
    color:     var(--cmy-on-surface-variant);
}

/* .cmy-search-result-badge rules removed — badge letters dropped (task #286) */

/* ── Notification badge on bell button ──────────────────────────────────── */
.cmy-notif-badge {
    position:       absolute;
    top:            2px;
    right:          2px;
    min-width:      16px;
    height:         16px;
    padding:        0 4px;
    background:     var(--cmy-error);
    color:          var(--cmy-on-error);
    border-radius:  var(--cmy-radius-pill);
    font-size:      0.625rem;
    font-weight:    700;
    line-height:    16px;
    text-align:     center;
    pointer-events: none;
}

/* ── Notifications panel ────────────────────────────────────────────────── */

/* Positioning context for .cmy-notifications-panel (bug #277 fix). */
.cmy-header-right {
    position: relative;
}

.cmy-notifications-panel {
    /* v1.0.59 — switched from position:absolute (broken because the panel
       is a body-level sibling, not inside .cmy-header-right) to fixed
       positioning anchored by JS at open-time. top/right set inline. */
    position:       fixed;
    width:          min(380px, 92vw);
    max-height:     480px;
    background:     var(--cmy-surface-container);
    border-radius:  var(--cmy-radius-lg);
    box-shadow:     var(--cmy-shadow-lg);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    z-index:        var(--cmy-z-dropdown);
}
/* v1.0.62 — honor [hidden] attr (display:flex above overrode browser default,
   so the panel was visible by default at top-left on every page load) */
.cmy-notifications-panel[hidden] { display: none; }

.cmy-notifications-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
    border-bottom:   1px solid var(--cmy-outline-variant);
    flex-shrink:     0;
}

.cmy-notifications-title {
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--cmy-on-surface);
}

.cmy-notifications-list {
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
    max-height:     360px;
}

.cmy-notifications-item {
    display:        flex;
    flex-direction: column;
    padding:        12px 16px;
    border-bottom:  1px solid var(--cmy-outline-variant);
    cursor:         pointer;
    transition:     background var(--cmy-transition);
}

.cmy-notifications-item:last-child {
    border-bottom: none;
}

.cmy-notifications-item:hover {
    background: var(--cmy-surface-container-high);
}

.cmy-notifications-item.is-read {
    opacity: 0.55;
}

.cmy-notifications-item-msg {
    font-size: 0.8125rem;
    color:     var(--cmy-on-surface);
}

.cmy-notifications-item-time {
    font-size:  0.6875rem;
    color:      var(--cmy-on-surface-variant);
    margin-top: 4px;
}

/* ── end GLOBAL SEARCH + NOTIFICATIONS (task #266) ──────────────────────── */

/* =========================================================================
   MARKET LIST PAGE  (story #257, task #262)
   All values via --cmy-* tokens — zero hex literals.
   ========================================================================= */

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.cmy-ml-wrap {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* ── Drawer: form grid (2-col) ───────────────────────────────────────────── */
.cmy-ml-form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  padding:               1.25rem 1.5rem;
  border-bottom:         1px solid var(--cmy-outline-variant);
}

.cmy-ml-form-field {
  display:        flex;
  flex-direction: column;
  gap:            0.375rem;
}

.cmy-ml-form-field--full {
  grid-column: 1 / -1;
}

.cmy-ml-form-label {
  font-size:      0.6875rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-wider);
  color:          var(--cmy-label-muted);
}

.cmy-ml-form-input,
.cmy-ml-form-select {
  padding:       0.5rem 0.75rem;
  border:        1px solid var(--cmy-outline-variant);
  border-radius: var(--cmy-radius-md);
  background:    var(--cmy-surface-container-lowest);
  color:         var(--cmy-on-surface);
  font-size:     0.875rem;
  font-family:   inherit;
  width:         100%;
  transition:    border-color 0.15s;
}

.cmy-ml-form-input:focus,
.cmy-ml-form-select:focus {
  outline:       none;
  border-color:  var(--cmy-primary);
  box-shadow:    0 0 0 2px var(--cmy-primary-fixed);
}

/* ── Drawer: item repeater section ──────────────────────────────────────── */
.cmy-ml-items-section {
  padding:        1.25rem 1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
}

.cmy-ml-items-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   0.25rem;
}

.cmy-ml-items-heading {
  font-size:   0.8125rem;
  font-weight: 700;
  color:       var(--cmy-on-surface);
}

/* ── Item row (header + data rows) ──────────────────────────────────────── */
.cmy-ml-item-row {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 2fr auto;
  gap:                   0.5rem;
  align-items:           center;
  padding:               0.375rem 0;
  border-bottom:         1px solid var(--cmy-surface-container-high);
}

.cmy-ml-item-row:last-child {
  border-bottom: none;
}

.cmy-ml-item-row--head {
  font-size:      0.625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-wider);
  color:          var(--cmy-label-muted);
  padding-bottom: 0.5rem;
  border-bottom:  2px solid var(--cmy-outline-variant);
}

.cmy-ml-item-col {
  display:     flex;
  align-items: center;
}

.cmy-ml-item-input {
  padding:       0.375rem 0.5rem;
  border:        1px solid var(--cmy-outline-variant);
  border-radius: var(--cmy-radius-sm);
  background:    var(--cmy-surface-container-lowest);
  color:         var(--cmy-on-surface);
  font-size:     0.8125rem;
  font-family:   inherit;
  width:         100%;
  transition:    border-color 0.15s;
}

.cmy-ml-item-input:focus {
  outline:      none;
  border-color: var(--cmy-primary);
}

/* ── Item remove button ──────────────────────────────────────────────────── */
.cmy-ml-item-row-remove {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.75rem;
  height:          1.75rem;
  border:          none;
  background:      transparent;
  border-radius:   var(--cmy-radius-sm);
  color:           var(--cmy-on-surface-variant);
  cursor:          pointer;
  transition:      color 0.15s, background 0.15s;
}

.cmy-ml-item-row-remove:hover {
  color:      var(--cmy-error);
  background: var(--cmy-error-container);
}

.cmy-ml-item-row-remove .material-symbols-outlined {
  font-size: 1rem;
}

/* ── Add item button ─────────────────────────────────────────────────────── */
.cmy-ml-add-item-btn {
  align-self:      flex-start;
  margin-top:      0.25rem;
  gap:             0.25rem;
  font-size:       0.8125rem;
  font-weight:     600;
  color:           var(--cmy-primary);
  border:          1px dashed var(--cmy-outline-variant);
  width:           100%;
  justify-content: center;
  padding:         0.5rem;
}

.cmy-ml-add-item-btn:hover {
  border-color: var(--cmy-primary);
  background:   var(--cmy-primary-fixed);
}

.cmy-ml-add-item-btn .material-symbols-outlined {
  font-size: 1rem;
}

/* ── Status badges for market list statuses ──────────────────────────────── */
/* draft → pending colour (orange)  */
.cmy-status-badge--draft {
  background:   var(--cmy-status-pending-bg);
  color:        var(--cmy-status-pending-fg);
  border-color: var(--cmy-status-pending-bd);
}
.cmy-status-badge--draft .cmy-badge-dot {
  background: var(--cmy-status-pending-fg);
}

/* submitted → processing colour (blue)  */
.cmy-status-badge--submitted {
  background:   var(--cmy-status-processing-bg);
  color:        var(--cmy-status-processing-fg);
  border-color: var(--cmy-status-processing-bd);
}
.cmy-status-badge--submitted .cmy-badge-dot {
  background: var(--cmy-status-processing-fg);
}

/* purchased → complete colour (green)  */
.cmy-status-badge--purchased {
  background:   var(--cmy-status-complete-bg);
  color:        var(--cmy-status-complete-fg);
  border-color: var(--cmy-status-complete-bd);
}
.cmy-status-badge--purchased .cmy-badge-dot {
  background: var(--cmy-status-complete-fg);
}

/* closed → cancelled colour (muted red)  */
.cmy-status-badge--closed {
  background:   var(--cmy-status-cancelled-bg);
  color:        var(--cmy-status-cancelled-fg);
  border-color: var(--cmy-status-cancelled-bd);
}
.cmy-status-badge--closed .cmy-badge-dot {
  background: var(--cmy-status-cancelled-fg);
}

/* ── Responsive: collapse item repeater columns below 600 px ─────────────── */
@media (max-width: 600px) {
  .cmy-ml-item-row {
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows:    auto auto;
  }
  .cmy-ml-item-col--name  { grid-column: 1 / -1; }
  .cmy-ml-item-col--notes { grid-column: 1 / 3; }
  .cmy-ml-form-grid       { grid-template-columns: 1fr; }
  .cmy-ml-form-field--full { grid-column: 1; }
}

/* ── v2 Dashboard — Layout, KPI row, Widget grid (M4 story #149 / hotfix) ──
   Root cause: dashboard-v2.php was shipped without corresponding CSS block.
   All values use --cmy-* tokens only — zero hex literals.
   SHARED FIX: .cmy-table-wrap--* modifiers benefit all pages using those
   classes; dashboard grid selectors are dashboard-specific.
   ──────────────────────────────────────────────────────────────────────────── */

/* Outer page wrapper */
.cmy-dashboard-wrap {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  padding-bottom: 2rem;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.cmy-dash-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             0.75rem;
}

.cmy-dash-header-left {
  display:        flex;
  flex-direction: column;
  gap:            0.125rem;
}

.cmy-dash-subtitle {
  font-size:  0.8125rem;
  color:      var(--cmy-on-surface-variant);
  margin:     0;
}

/* ── KPI card row — 4-column horizontal grid ─────────────────────────────── */
.cmy-dash-kpi-row {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1rem;
}

@media (max-width: 1024px) {
  .cmy-dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .cmy-dash-kpi-row { grid-template-columns: 1fr; }
}

/* ── Widget grid — 2-column grid ─────────────────────────────────────────── */
.cmy-dash-widget-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1rem;
  align-items:           start;
}

/* Full-width widget span (e.g. Recently Accessed) */
.cmy-dash-widget--full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .cmy-dash-widget-grid  { grid-template-columns: 1fr; }
  .cmy-dash-widget--full { grid-column: 1; }
}

/* ── Widget card — internal layout ──────────────────────────────────────── */
/* Widgets use .cmy-table-wrap as outer shell — suppress margin-bottom inside grid */
.cmy-dash-widget-grid .cmy-table-wrap {
  margin-bottom: 0;
}

.cmy-dash-widget-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             0.5rem;
  padding:         1rem 1.25rem 0.75rem;
  border-bottom:   1px solid var(--cmy-outline-variant);
}

.cmy-dash-widget-title-group {
  display:        flex;
  flex-direction: column;
  gap:            0.125rem;
  min-width:      0;
}

.cmy-dash-widget-title {
  font-size:     0.875rem;
  font-weight:   700;
  color:         var(--cmy-on-surface);
  margin:        0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.cmy-dash-widget-sub {
  font-size: 0.6875rem;
  color:     var(--cmy-on-surface-variant);
  margin:    0;
}

.cmy-dash-widget-actions {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         0.5rem;
}

.cmy-dash-widget-body {
  padding: 0.75rem 1.25rem;
}

.cmy-dash-widget-body--min {
  min-height: 10rem;
}

.cmy-dash-widget-body--scroll {
  max-height: 20rem;
  overflow-y: auto;
  padding:    0;
}

.cmy-dash-widget-body--products {
  padding: 0.75rem 1.25rem;
}

.cmy-dash-widget-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.625rem 1.25rem;
  border-top:      1px solid var(--cmy-outline-variant);
  background:      var(--cmy-surface-container-low);
}

.cmy-dash-pager-info {
  font-size: 0.75rem;
  color:     var(--cmy-on-surface-variant);
}

.cmy-dash-pager-btns {
  display: flex;
  gap:     0.375rem;
}

/* ── Widget content atoms ────────────────────────────────────────────────── */
.cmy-dash-row {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             0.5rem;
  padding:         0.625rem 0;
  border-bottom:   1px solid var(--cmy-surface-container-high);
}

.cmy-dash-row:last-child {
  border-bottom: none;
}

.cmy-dash-row-left {
  display:        flex;
  flex-direction: column;
  gap:            0.125rem;
  min-width:      0;
}

.cmy-dash-row-right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            0.25rem;
  flex-shrink:    0;
}

.cmy-dash-order-id {
  font-family: var(--cmy-font-mono);
  font-size:   0.8125rem;
  font-weight: 700;
  color:       var(--cmy-on-surface);
}

.cmy-dash-row-meta {
  font-size:     0.75rem;
  color:         var(--cmy-on-surface-variant);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     16rem;
}

.cmy-dash-amount {
  font-family: var(--cmy-font-mono);
  font-size:   0.8125rem;
  font-weight: 600;
  color:       var(--cmy-on-surface);
}

.cmy-dash-due-date {
  font-size:  0.75rem;
  color:      var(--cmy-on-surface-variant);
  text-align: right;
}

/* ── Bar chart (Top Products widget) ─────────────────────────────────────── */
.cmy-dash-bar-row {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  padding:     0.375rem 0;
}

.cmy-dash-bar-rank {
  font-family: var(--cmy-font-mono);
  font-size:   0.625rem;
  font-weight: 700;
  color:       var(--cmy-on-surface-variant);
  width:       1rem;
  flex-shrink: 0;
  text-align:  right;
}

.cmy-dash-bar-label {
  font-size:     0.75rem;
  color:         var(--cmy-on-surface);
  width:         8rem;
  flex-shrink:   0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.cmy-dash-bar-track {
  flex:          1;
  height:        0.375rem;
  background:    var(--cmy-surface-container-highest);
  border-radius: var(--cmy-radius-full, 9999px);
  overflow:      hidden;
}

.cmy-dash-bar-fill {
  height:        100%;
  background:    var(--cmy-primary-container);
  border-radius: var(--cmy-radius-full, 9999px);
  min-width:     2px;
  transition:    width 0.3s ease;
}

.cmy-dash-bar-qty {
  font-family: var(--cmy-font-mono);
  font-size:   0.6875rem;
  font-weight: 600;
  color:       var(--cmy-on-surface-variant);
  width:       2.5rem;
  flex-shrink: 0;
  text-align:  right;
}

/* ── Recently Accessed chips ─────────────────────────────────────────────── */
.cmy-dash-recent-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
  padding:   0.75rem 1.25rem;
}

.cmy-dash-recent-chip {
  display:         inline-flex;
  align-items:     center;
  gap:             0.375rem;
  padding:         0.375rem 0.75rem;
  background:      var(--cmy-surface-container-low);
  border:          1px solid var(--cmy-outline-variant);
  border-radius:   var(--cmy-radius-full, 9999px);
  font-size:       0.75rem;
  color:           var(--cmy-on-surface);
  text-decoration: none;
  transition:      background 0.15s, border-color 0.15s;
}

.cmy-dash-recent-chip:hover {
  background:   var(--cmy-surface-container);
  border-color: var(--cmy-outline);
}

.cmy-dash-recent-icon {
  font-size:   1rem;
  color:       var(--cmy-on-surface-variant);
  flex-shrink: 0;
}

.cmy-dash-recent-label {
  font-weight: 500;
}

.cmy-dash-recent-time {
  color:     var(--cmy-on-surface-variant);
  font-size: 0.6875rem;
}

/* ── Loading / empty states ──────────────────────────────────────────────── */
.cmy-dash-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  padding:         2rem 1rem;
  color:           var(--cmy-on-surface-variant);
  font-size:       0.8125rem;
}

.cmy-dash-loading-text {
  font-size: 0.8125rem;
  color:     var(--cmy-on-surface-variant);
}

.cmy-dash-empty {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         2rem 1rem;
  font-size:       0.8125rem;
  color:           var(--cmy-on-surface-variant);
  text-align:      center;
}

.cmy-dash-empty--full {
  width: 100%;
}

.cmy-dash-empty--error {
  color: var(--cmy-error);
}

/* ── Shared: .cmy-table-wrap colour modifiers ────────────────────────────────
   Overrides the default orange (primary-container) top accent rail.
   Used by dashboard widgets and potentially other pages.
   ──────────────────────────────────────────────────────────────────────────── */
.cmy-table-wrap--tertiary {
  border-top-color: var(--cmy-tertiary-container);
}

.cmy-table-wrap--info {
  border-top-color: var(--cmy-tertiary);
}

.cmy-table-wrap--success {
  border-top-color: var(--cmy-success);
}

.cmy-table-wrap--accent {
  border-top-color: var(--cmy-outline);
}

/* ── Internal Balance widget (task #327 / story #319) ───────────────────── */
.cmy-table-wrap--internal-balance {
  border-top-color: var(--cmy-primary);
  padding: 0;
}

.cmy-balance-widget-link {
  display:          block;
  text-decoration:  none;
  color:            inherit;
  border-radius:    inherit;
  transition:       background-color 0.15s ease;
}

.cmy-balance-widget-link:hover {
  background-color: var(--cmy-surface-container-low, #f5f5f5);
}

.cmy-balance-widget-inner {
  display:       flex;
  align-items:   center;
  gap:           var(--cmy-space-4, 1rem);
  padding:       var(--cmy-space-4, 1rem) var(--cmy-space-5, 1.25rem);
}

.cmy-balance-widget-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            2.5rem;
  height:           2.5rem;
  border-radius:    50%;
  background:       var(--cmy-primary-container, #e8f4fd);
  color:            var(--cmy-primary, #1976d2);
  flex-shrink:      0;
}

.cmy-balance-widget-icon .material-symbols-outlined {
  font-size: 1.375rem;
}

.cmy-balance-widget-body {
  flex: 1;
  min-width: 0;
}

.cmy-balance-widget-label {
  font-size:     0.6875rem;
  font-weight:   600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:         var(--cmy-on-surface-variant, #666);
  margin:        0 0 0.25rem;
}

.cmy-balance-widget-amount {
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--cmy-primary, #1976d2);
  margin:      0 0 0.125rem;
  line-height: 1.15;
}

.cmy-balance-widget-sub {
  font-size: 0.75rem;
  color:     var(--cmy-on-surface-variant, #888);
  margin:    0;
}

.cmy-balance-widget-arrow {
  color:       var(--cmy-on-surface-variant, #aaa);
  font-size:   1.5rem;
  flex-shrink: 0;
}

/* ── Inline select inside widget header ──────────────────────────────────── */
.cmy-select-wrap--inline {
  display:     inline-flex;
  align-items: center;
}

/* ── Dashboard clear button (Recently Accessed) ──────────────────────────── */
.cmy-dash-clear-btn {
  flex-shrink: 0;
}

/* ── end v2 Dashboard layout (hotfix-dashboard-kpi-widgets) ─────────────── */

/* ── end MARKET LIST PAGE (story #257, task #262) ────────────────────────── */

/* ── Trip Tickets page polish (hotfix/trip-tickets-page-polish) ─────────── */

/* Fix 2: keep TT# on one line */
.cmy-table.cmy-table-classic .cmy-th-tt-num,
.cmy-table.cmy-table-classic .cmy-td-tt-num {
  min-width:   110px;
  white-space: nowrap;
}

/* Fix 3c: link-button base style (shared; skip if .cmy-link-btn already defined above) */
.cmy-link-btn {
  background:  none;
  border:      0;
  padding:     0;
  color:       var(--cmy-primary);
  font-weight: 600;
  cursor:      pointer;
  font:        inherit;
}
.cmy-link-btn:hover { text-decoration: underline; }

/* Order Ref column sizing */
.cmy-table.cmy-table-classic .cmy-th-tt-order-ref,
.cmy-table.cmy-table-classic .cmy-td-tt-order-ref {
  min-width:   90px;
  white-space: nowrap;
}

/* Stack multiple order-ref buttons vertically */
.cmy-td-tt-order-ref .cmy-link-btn {
  display: block;
}

/* ── end Trip Tickets page polish ───────────────────────────────────────── */

/* ── v2 Notification Settings (M11) ────────────────────────────────────── */
.cmy-notif-settings-wrap { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; }
.cmy-notif-settings-intro { margin-bottom: 0.5rem; }
.cmy-notif-settings-desc { font-size: 0.875rem; color: var(--cmy-on-surface-variant); margin: 0.25rem 0 0; line-height: 1.5; }
.cmy-notif-prefs-root { display: flex; flex-direction: column; gap: 1rem; }
.cmy-notif-pref-group { padding: 1.25rem 1.5rem; }
.cmy-notif-pref-group__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--cmy-tracking-wider); color: var(--cmy-on-surface-variant); margin: 0 0 0.75rem; }
.cmy-notif-pref-row { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid var(--cmy-outline-variant); }
.cmy-notif-pref-row:last-child { border-bottom: none; }
.cmy-notif-pref-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; padding-right: 1rem; }
.cmy-notif-pref-label { font-size: 0.875rem; font-weight: 600; color: var(--cmy-on-surface); }
.cmy-notif-pref-desc { font-size: 0.75rem; color: var(--cmy-on-surface-variant); line-height: 1.4; }
.cmy-notif-settings-footnote { font-size: 0.75rem; color: var(--cmy-on-surface-variant); text-align: center; margin: 0.5rem 0 0; }

/* Toggle switch */
.cmy-toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.cmy-toggle input { opacity: 0; width: 0; height: 0; }
.cmy-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--cmy-outline-variant); border-radius: 20px; transition: 0.2s; }
.cmy-toggle-slider::before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; top: 3px; background: var(--cmy-surface); border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.cmy-toggle input:checked + .cmy-toggle-slider { background: var(--cmy-primary-container); }
.cmy-toggle input:checked + .cmy-toggle-slider::before { transform: translateX(16px); }
/* ── end Notification Settings ─────────────────────────────────────────── */

/* ── M14 S1-B: internal_transfer payment method badge (task #322) ──────── */
/*
 * Modifier on .cbg-fe-pay-record__method.
 * Uses slate-blue tokens (processing family) — visually distinct from the
 * green PAID-cash color (#16a34a) used by .cbg-fe-pay-record__amount.
 * No hex literals: mirrors the --cmy-status-processing-* tokens already
 * defined in the v2 design token block (line ~9392).
 */
.cbg-fe-pay-record__method--internal-transfer {
  background: var(--cmy-status-processing-bg, #eff6ff);
  color:      var(--cmy-status-processing-fg, #2563eb);
}
/* ── end internal_transfer badge ────────────────────────────────────────── */

/* ── M14 S4-B: Store Ledger page (story #318, task #326) ───────────────── */

/* Page wrapper */
.cmy-ledger-wrap {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

/* Page heading */
.cmy-page-header {
  display:     flex;
  align-items: baseline;
  gap:         0.75rem;
}
.cmy-page-header-main { flex: 1; min-width: 0; }
.cmy-page-title-icon {
  font-size:      1.25rem;
  vertical-align: middle;
  margin-right:   0.375rem;
  color:          var(--cmy-primary);
}
.cmy-page-subtitle {
  margin:    0.25rem 0 0;
  font-size: 0.8125rem;
}

/* Toolbar */
.cmy-ledger-toolbar {
  flex-wrap: wrap;
  gap:       0.5rem;
}
.cmy-filter-chip-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.375rem;
  align-items: center;
}
.cmy-filter-chip {
  display:         inline-flex;
  align-items:     center;
  padding:         0.3125rem 0.875rem;
  border:          1px solid var(--cmy-outline-variant);
  border-radius:   999px;
  background:      var(--cmy-surface-container-low);
  color:           var(--cmy-on-surface);
  font-size:       0.8125rem;
  font-weight:     500;
  cursor:          pointer;
  transition:      background 0.15s, border-color 0.15s, color 0.15s;
  white-space:     nowrap;
  line-height:     1;
}
.cmy-filter-chip:hover {
  background:   var(--cmy-surface-container);
  border-color: var(--cmy-outline);
}
.cmy-filter-chip.is-active {
  background:   var(--cmy-primary-container);
  border-color: var(--cmy-primary);
  color:        var(--cmy-on-primary-container, var(--cmy-primary));
  font-weight:  600;
}

/* Custom date range */
.cmy-ledger-custom-range {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-wrap:   wrap;
  margin-top:  0.25rem;
}
.cmy-ledger-custom-range.cmy-hidden { display: none; }
.cmy-date-sep { color: var(--cmy-on-surface-variant); font-size: 0.875rem; }

/* Ledger table — row-type coloring via left border */
.cmy-table.cmy-ledger-table .cmy-ledger-row { border-left: 3px solid transparent; }
.cmy-table.cmy-ledger-table .cmy-ledger-debit {
  border-left-color: var(--cmy-error, #ba1a1a);
  background:        var(--cmy-error-container, #ffdad6);
  background:        color-mix(in srgb, var(--cmy-error-container, #ffdad6) 18%, transparent);
}
.cmy-table.cmy-ledger-table .cmy-ledger-credit {
  border-left-color: var(--cmy-success, #16a34a);
  background:        color-mix(in srgb, var(--cmy-success-container, #dcfce7) 18%, transparent);
}
.cmy-table.cmy-ledger-table .cmy-table-row--clickable { cursor: pointer; }
.cmy-table.cmy-ledger-table .cmy-table-row--clickable:hover {
  filter: brightness(0.97);
}
.cmy-table.cmy-ledger-table .cmy-table-row--clickable:focus-visible {
  outline:        2px solid var(--cmy-primary);
  outline-offset: -2px;
}

/* Type badges */
.cmy-ledger-badge {
  font-size:   0.6875rem;
  font-weight: 700;
  padding:     0.125rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display:     inline-flex;
  align-items: center;
}
.cmy-ledger-badge--debit {
  background: var(--cmy-error-container, #ffdad6);
  color:      var(--cmy-error, #ba1a1a);
}
.cmy-ledger-badge--credit {
  background: var(--cmy-success-container, #dcfce7);
  color:      var(--cmy-success, #16a34a);
}

/* Amount column */
.cmy-ledger-amount {
  font-weight: 600;
  font-family: var(--cmy-font-mono, ui-monospace, monospace);
  font-size:   0.875rem;
}
.cmy-ledger-amount--debit  { color: var(--cmy-error,   #ba1a1a); }
.cmy-ledger-amount--credit { color: var(--cmy-success, #16a34a); }

/* Running balance column */
.cmy-td-balance { min-width: 110px; }
.cmy-ledger-balance {
  font-family: var(--cmy-font-mono, ui-monospace, monospace);
  font-size:   0.875rem;
  font-weight: 600;
}
.cmy-ledger-balance--owed   { color: var(--cmy-error,   #ba1a1a); }
.cmy-ledger-balance--credit { color: var(--cmy-success, #16a34a); }
.cmy-ledger-balance--even   { color: var(--cmy-on-surface-variant); }

/* Reference */
.cmy-ledger-ref {
  font-size:   0.8125rem;
  font-weight: 500;
}

/* KPI net balance tint (applied by JS) */
.cmy-ledger-kpi-net--owed   { color: var(--cmy-error,   #ba1a1a) !important; }
.cmy-ledger-kpi-net--credit { color: var(--cmy-success, #16a34a) !important; }

/* Spinner */
@keyframes cmy-spin {
  to { transform: rotate(360deg); }
}
.cmy-spin {
  display:         inline-block;
  animation:       cmy-spin 1s linear infinite;
  transform-origin: center;
}

/* ── Store Ledgers Index (M14.1 / #335) ──────────────────────────────── */

.cmy-store-ledgers-wrap {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

/* Row links — make entire cell clickable without nesting <a> inside <a> */
.cmy-store-ledgers-table tbody tr.cmy-store-ledgers-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.cmy-store-ledgers-table tbody tr.cmy-store-ledgers-row:hover {
  background: var(--cmy-surface-container-low, rgba(0,0,0,0.035));
}
.cmy-store-ledgers-row-link {
  display:         block;
  color:           inherit;
  text-decoration: none;
}
.cmy-store-ledgers-row-link:hover {
  text-decoration: none;
}

/* Net-balance colour coding */
.cmy-balance-positive {
  color:       var(--cmy-error, #ba1a1a);
  font-weight: 600;
}
.cmy-balance-negative {
  color:       var(--cmy-success, #16a34a);
  font-weight: 600;
}
.cmy-balance-zero {
  color:       var(--cmy-on-surface-variant);
  font-weight: 400;
}

.cmy-balance-sign {
  font-size:   0.7rem;
  font-weight: 500;
  margin-left: 0.25rem;
  letter-spacing: 0.04em;
  opacity:     0.8;
}

/* Column alignment */
.cmy-th-right,
.cmy-td-right  { text-align: right; }
.cmy-th-center,
.cmy-td-center { text-align: center; }

/* Chevron action cell */
.cmy-td-action {
  width:      2rem;
  text-align: center;
}
.cmy-row-chevron {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  color:           var(--cmy-on-surface-variant);
  transition:      color 0.12s, transform 0.12s;
}
.cmy-store-ledgers-row:hover .cmy-row-chevron {
  color:     var(--cmy-primary, #5c5fc9);
  transform: translateX(2px);
}

/* Badge for unsettled count */
.cmy-badge {
  display:       inline-block;
  padding:       0.15rem 0.5rem;
  border-radius: 999px;
  font-size:     0.75rem;
  font-weight:   600;
  line-height:   1.4;
}
.cmy-badge-warning {
  background: var(--cmy-error-container, #ffdad6);
  color:      var(--cmy-on-error-container, #410002);
}

/* Toolbar chip link variant (plain <a> chips for page-reload navigation) */
.cmy-store-ledgers-toolbar .cmy-filter-chip {
  display:         inline-flex;
  align-items:     center;
  text-decoration: none;
}
/* ── /Store Ledgers Index ─────────────────────────────────────────────── */

/* ── Store Ledgers Index — Mixed Types (task #350) ───────────────────── */

/* Sortable column headers */
.cmy-th-sortable {
  white-space: nowrap;
}
.cmy-sort-link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.25rem;
  text-decoration: none;
  color:           inherit;
  font-weight:     inherit;
}
.cmy-sort-link:hover {
  color: var(--cmy-primary, #5c5fc9);
}
.cmy-th-sortable.is-sort-active .cmy-sort-link {
  color: var(--cmy-primary, #5c5fc9);
}
.cmy-sort-arrow {
  font-size:   0.7rem;
  line-height: 1;
  opacity:     0.6;
}
.cmy-sort-arrow--idle {
  opacity: 0.35;
}
.cmy-sort-arrow--asc,
.cmy-sort-arrow--desc {
  opacity: 0.9;
}

/* Store type pill */
.cmy-store-type-pill {
  display:       inline-block;
  padding:       0.15rem 0.55rem;
  border-radius: 999px;
  font-size:     0.7rem;
  font-weight:   600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height:   1.4;
}
.cmy-store-type-pill--company {
  background: var(--cmy-primary-container, #e0e0ff);
  color:      var(--cmy-on-primary-container, #1a1a6e);
}
.cmy-store-type-pill--franchise {
  background: var(--cmy-secondary-container, #d4f0d4);
  color:      var(--cmy-on-secondary-container, #0d3b0d);
}
.cmy-store-type-pill--b2b {
  background: var(--cmy-tertiary-container, #fde8c8);
  color:      var(--cmy-on-tertiary-container, #4b2800);
}

/* Overdue urgency indicator (days_max_overdue > 60) */
.cmy-row--urgent {
  background: rgba(255, 218, 214, 0.15);
}
.cmy-row--urgent:hover {
  background: rgba(255, 218, 214, 0.3);
}
.cmy-overdue--urgent {
  color: var(--cmy-error, #ba1a1a);
}
.cmy-overdue-days--urgent {
  font-weight: 700;
  color:       var(--cmy-error, #ba1a1a);
}
.cmy-overdue-icon {
  font-size:      1rem;
  vertical-align: middle;
  color:          var(--cmy-error, #ba1a1a);
  margin-right:   0.2rem;
}

/* Column widths for the mixed table */
.cmy-store-ledgers-table--mixed .cmy-th-store-name,
.cmy-store-ledgers-table--mixed .cmy-td-store-name {
  width: auto;
  min-width: 10rem;
}
.cmy-store-ledgers-table--mixed .cmy-th-type,
.cmy-store-ledgers-table--mixed .cmy-td-type {
  width: 6.5rem;
}
.cmy-store-ledgers-table--mixed .cmy-th-balance,
.cmy-store-ledgers-table--mixed .cmy-td-balance {
  width: 9rem;
}
.cmy-store-ledgers-table--mixed .cmy-th-overdue,
.cmy-store-ledgers-table--mixed .cmy-td-overdue {
  width: 7rem;
}
.cmy-store-ledgers-table--mixed .cmy-th-overdue-count,
.cmy-store-ledgers-table--mixed .cmy-td-overdue-count {
  width: 5.5rem;
}
.cmy-store-ledgers-table--mixed .cmy-th-last-activity,
.cmy-store-ledgers-table--mixed .cmy-td-last-activity {
  width: 7rem;
}

/* ── /Store Ledgers Index — Mixed Types ──────────────────────────────── */

/* ── end Store Ledger page ──────────────────────────────────────────────── */

/* ── Outstanding AR Widget (task #351 / story #343) ─────────────────────── */

/* Top rail: slate/orange palette signals urgency (AR is owed, not credit). */
.cmy-table-wrap--ar-outstanding {
  border-top-color: var(--cmy-error, #c62828);
  padding: 0;
}

/* Clickable link wrapper — mirrors .cmy-balance-widget-link */
.cmy-ar-widget-link {
  display:         block;
  text-decoration: none;
  color:           inherit;
  border-radius:   inherit;
  transition:      background-color 0.15s ease;
}

.cmy-ar-widget-link:hover {
  background-color: var(--cmy-surface-container-low, #f5f5f5);
}

/* Icon bubble — orange/amber to signal AR urgency */
.cmy-ar-widget-icon {
  background: var(--cmy-error-container, #ffdad6);
  color:      var(--cmy-on-error-container, #410002);
}

/* Amount text — slate/dark-orange instead of primary blue */
.cmy-ar-widget-amount {
  color: var(--cmy-error, #c62828);
}

/* ── /Outstanding AR Widget ──────────────────────────────────────────────── */
/* ── M15 S2-js: AR View styles (task #349) ───────────────────────────── */

/* Bucket chips row */
.cmy-ar-bucket-chips {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.5rem;
  align-items:   center;
  margin-bottom: 1rem;
}

/* Bucket chip — extends .cmy-filter-chip pill pattern */
.cmy-ar-bucket-chip {
  display:      inline-flex;
  align-items:  center;
  gap:          0.375rem;
  padding:      0.375rem 1rem;
  border:       1px solid var(--cmy-outline-variant);
  border-radius: var(--cmy-radius-pill);
  background:   var(--cmy-surface-container-low);
  color:        var(--cmy-on-surface);
  font-size:    0.8125rem;
  font-weight:  500;
  cursor:       pointer;
  transition:   background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space:  nowrap;
  line-height:  1;
  user-select:  none;
}
.cmy-ar-bucket-chip:hover {
  background:   var(--cmy-surface-container);
  border-color: var(--cmy-outline);
}
.cmy-ar-bucket-chip.is-active {
  background:   var(--cmy-primary-container);
  border-color: var(--cmy-primary);
  color:        var(--cmy-on-primary-container, var(--cmy-primary));
  font-weight:  600;
  box-shadow:   0 0 0 2px var(--cmy-primary-container);
}

/* Amount badge inside chip */
.cmy-ar-bucket-chip .cmy-ar-chip-amount {
  font-size:   0.75rem;
  font-weight: 700;
  opacity:     0.85;
}

/* AR invoice table rows */
.cmy-ar-invoice-row {
  cursor:     pointer;
  transition: background 0.12s;
}
.cmy-ar-invoice-row:hover {
  background: var(--cmy-surface-container-low);
}
.cmy-ar-invoice-row:focus-visible {
  outline:        2px solid var(--cmy-primary);
  outline-offset: -2px;
}

/* Overdue days cell */
.cmy-ar-overdue-days {
  font-variant-numeric: tabular-nums;
  color: var(--cmy-on-surface-variant);
}
.cmy-ar-overdue-days.is-overdue {
  color:       var(--cmy-error);
  font-weight: 600;
}

/* Empty state centred inside AR wrap */
.cmy-ar-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  padding:         3rem 1rem;
  text-align:      center;
  color:           var(--cmy-on-surface-variant);
  font-size:       0.9375rem;
}
.cmy-ar-empty .material-symbols-outlined {
  font-size: 2.5rem;
  opacity:   0.5;
}

/* ── /AR View styles (task #349) ─────────────────────────────────────── */
/* ── M15 S6: Stock Transfer Ledger View (story #345, task #353) ─────────── */

/* ── Monthly totals header ──────────────────────────────────────────────── */
.cmy-st-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cmy-st-total-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.cmy-st-total-card--transfer { border-top: 3px solid #2563eb; }
.cmy-st-total-card--cost     { border-top: 3px solid #9ca3af; }
.cmy-st-total-card--retail   { border-top: 3px solid #059669; }
.cmy-st-total-card--count    { border-top: 3px solid #7c3aed; }

.cmy-st-total-icon {
  color: #6b7280;
  font-size: 1.1rem;
  line-height: 1;
}
.cmy-st-total-icon .material-symbols-outlined { font-size: 1.25rem; }

.cmy-st-total-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #6b7280;
  text-transform: uppercase;
}

.cmy-st-total-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.cmy-st-total-sub {
  font-size: 0.7rem;
  color: #9ca3af;
}

/* ── Migration note banner ─────────────────────────────────────────────── */
.cmy-st-migration-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  padding: 0.625rem 0.875rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: #92400e;
  line-height: 1.4;
}

.cmy-st-migration-note-icon {
  font-size: 1rem;
  flex-shrink: 0;
  color: #d97706;
  margin-top: 0.05rem;
}

/* ── Transfers table ───────────────────────────────────────────────────── */
.cmy-st-table .cmy-th-date    { width: 7.5rem; }
.cmy-st-table .cmy-th-order   { width: auto; min-width: 8rem; }
.cmy-st-table .cmy-th-amount  { width: 9rem; }
.cmy-st-table .cmy-th-status  { width: 7rem; }
.cmy-st-table .cmy-th-expand  { width: 2.5rem; }

/* ── Row cells ─────────────────────────────────────────────────────────── */
.cmy-st-order-ref {
  font-weight: 600;
  color: #1d4ed8;
}

.cmy-st-tp-value {
  font-weight: 600;
}

/* Status pills */
.cmy-st-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
}
.cmy-st-status--transferred { background: #d1fae5; color: #065f46; }
.cmy-st-status--reconciled  { background: #dbeafe; color: #1e40af; }
.cmy-st-status--pending     { background: #fef9c3; color: #854d0e; }
.cmy-st-status--voided      { background: #fee2e2; color: #991b1b; text-decoration: line-through; }

/* Migrated badge */
.cmy-st-migrated-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  vertical-align: middle;
}

/* Expand button */
.cmy-st-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: #6b7280;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.cmy-st-expand-btn:hover {
  color: #2563eb;
  background: #eff6ff;
}
.cmy-st-expand-btn .material-symbols-outlined {
  font-size: 1.2rem;
  transition: transform 0.2s;
}

/* Detail expand row */
.cmy-st-detail-row td {
  background: #f8fafc;
  border-top: none;
  padding: 0.625rem 1rem;
}

.cmy-st-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem 1.5rem;
}

.cmy-st-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cmy-st-detail-item--full {
  grid-column: 1 / -1;
}

.cmy-st-detail-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
}

.cmy-st-detail-val {
  font-size: 0.85rem;
  font-weight: 500;
  color: #111827;
}

/* ── Toolbar (reuses existing cmy-toolbar styles + chip styles) ────────── */
.cmy-st-toolbar { margin-bottom: 1rem; }

/* ── Responsive: stack totals on small screens ────────────────────────── */
@media (max-width: 540px) {
  .cmy-st-totals {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── /M15 S6 Stock Transfer Ledger View ──────────────────────────────── */
/* ── M15 S7: Mark-as-Stock-Transfer modal (task #355) ──────────────────── */

/* Overlay scrim */
.cmy-st-modal-overlay {
    position:         fixed;
    inset:            0;
    z-index:          10200;
    background:       rgba(0, 0, 0, 0.52);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          1rem;
    opacity:          0;
    transition:       opacity 0.2s ease;
}
.cmy-st-modal-overlay.is-open {
    opacity: 1;
}

/* Modal card */
.cmy-st-modal {
    background:    var(--surface-container, #fff);
    border-radius: var(--radius-lg, 12px);
    border:        1px solid var(--outline-variant, #e0e0e0);
    width:         100%;
    max-width:     480px;
    box-shadow:    0 24px 48px rgba(0, 0, 0, 0.28);
    transform:     translateY(14px) scale(0.97);
    transition:    transform 0.25s ease;
    overflow:      hidden;
}
.cmy-st-modal-overlay.is-open .cmy-st-modal {
    transform: translateY(0) scale(1);
}

/* Header */
.cmy-st-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem;
    border-bottom:   1px solid var(--outline-variant, #e0e0e0);
    background:      var(--surface-container-high, #f5f5f5);
}
.cmy-st-modal__title {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.9375rem;
    font-weight: 700;
    color:       var(--on-surface, #1c1b1f);
    margin:      0;
}
.cmy-st-modal__title .material-symbols-outlined {
    font-size: 1.125rem;
    color:     var(--primary, #6750a4);
}
.cmy-st-modal__close {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            2rem;
    height:           2rem;
    border:           none;
    background:       transparent;
    border-radius:    50%;
    cursor:           pointer;
    color:            var(--on-surface-variant, #49454f);
    transition:       background 0.15s;
}
.cmy-st-modal__close:hover {
    background: var(--surface-container-highest, #e6e0e9);
}

/* Body */
.cmy-st-modal__body {
    padding: 1.25rem;
}
.cmy-st-modal__hint {
    font-size:   0.8125rem;
    color:       var(--on-surface-variant, #49454f);
    margin:      0 0 1rem;
    line-height: 1.5;
}
.cmy-st-modal__row {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
}
.cmy-st-modal__field {
    display:        flex;
    flex-direction: column;
}

/* Inline error */
.cmy-st-modal__error {
    margin-top:    0.75rem;
    padding:       0.5rem 0.75rem;
    border-radius: 6px;
    background:    var(--error-container, #ffdad6);
    color:         var(--on-error-container, #410002);
    font-size:     0.8125rem;
    font-weight:   600;
}

/* Footer */
.cmy-st-modal__footer {
    display:         flex;
    justify-content: flex-end;
    gap:             0.75rem;
    padding:         0.875rem 1.25rem;
    border-top:      1px solid var(--outline-variant, #e0e0e0);
    background:      var(--surface-container-high, #f5f5f5);
}

/* "Transferred" badge pill — slate palette matching M14 internal_transfer style */
.cmy-st-transferred-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.375rem;
    padding:        0.375rem 0.875rem;
    border-radius:  999px;
    background:     #e2e8f0;  /* slate-200 */
    color:          #334155;  /* slate-700 */
    font-size:      0.8125rem;
    font-weight:    700;
    letter-spacing: 0.01em;
}
.cmy-st-transferred-badge .material-symbols-outlined {
    font-size: 1rem;
    color:     #64748b; /* slate-500 */
}

/* "Mark as Stock Transfer" action button variant */
.cmy-st-action-btn {
    background: var(--surface-container-high, #f5f5f5);
    border:     1px solid var(--outline, #79747e);
    color:      var(--on-surface, #1c1b1f);
}
.cmy-st-action-btn:hover {
    background: var(--surface-container-highest, #e6e0e9);
}

/* Responsive: stack to single column on narrow screens */
@media (max-width: 420px) {
    .cmy-st-modal__row {
        grid-template-columns: 1fr;
    }
}

/* ── v1.0.48 hotfix: Orders list TT micro-status (begin) ───────────── */
.cmy-row-tt-hint {
  display:     inline-flex;
  align-items: center;
  gap:         0.25rem;
  font-size:   0.6875rem;
  font-weight: 500;
  color:       var(--cmy-on-surface-variant, #64748b);
  margin-top:  0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cmy-row-tt-hint .material-symbols-outlined { font-size: 0.85rem; }
.cmy-row-tt-hint--pending     { color: #94a3b8; }
.cmy-row-tt-hint--dispatched  { color: #2563eb; }
.cmy-row-tt-hint--delivered   { color: #15803d; }
.cmy-row-tt-hint--returned    { color: #dc2626; }
/* ── v1.0.48 hotfix: Orders list TT micro-status (end) ─────────────── */

/* ── end M15 S7 Stock Transfer modal ────────────────────────────────────── */

/* ── v1.0.48 hotfix: Logistics banner + TT mirror buttons (begin) ───── */
.cmy-drawer-logistics {
  background:    var(--cmy-surface-container-low, #f8fafc);
  border:        1px solid var(--cmy-outline-variant, #e2e8f0);
  border-radius: 8px;
  margin:        0.75rem 1rem 0;
  padding:       0.75rem 1rem;
}
.cmy-drawer-logistics[hidden] { display: none; }
.cmy-drawer-logistics__inner {
  display:     flex;
  align-items: center;
  gap:         1rem;
  flex-wrap:   wrap;
}
.cmy-drawer-logistics__main {
  flex: 1;
  min-width: 0;
}
.cmy-drawer-logistics__head {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  font-size:   0.6875rem;
  color:       var(--cmy-on-surface-variant, #64748b);
  margin-bottom: 0.35rem;
}
.cmy-drawer-logistics__head .material-symbols-outlined { font-size: 1rem; }
.cmy-drawer-logistics__eyebrow {
  font-weight:  700;
  letter-spacing: 0.06em;
}
.cmy-drawer-logistics__id {
  margin-left: 0.25rem;
  color: var(--cmy-on-surface, #0f172a);
  font-weight: 600;
  font-size: 0.75rem;
}
.cmy-drawer-logistics__row {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-wrap:   wrap;
}
.cmy-tt-pill {
  display:        inline-flex;
  align-items:    center;
  padding:        0.2rem 0.55rem;
  border-radius:  99px;
  color:          #fff;
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.04em;
}
.cmy-drawer-logistics__hint {
  font-size: 0.8125rem;
  color: var(--cmy-on-surface-variant, #475569);
}
.cmy-drawer-logistics__open {
  display:        inline-flex;
  align-items:    center;
  gap:            0.3rem;
  border:         1px solid var(--cmy-outline, #cbd5e1);
  background:     var(--cmy-surface, #fff);
  border-radius:  6px;
  padding:        0.4rem 0.75rem;
  font-size:      0.8125rem;
  font-weight:    600;
  color:          var(--cmy-on-surface, #0f172a);
  cursor:         pointer;
  transition:     background 0.15s, border-color 0.15s;
}
.cmy-drawer-logistics__open:hover {
  background:   var(--cmy-surface-container, #f1f5f9);
  border-color: var(--cmy-primary, #ea580c);
}
.cmy-drawer-logistics__open .material-symbols-outlined { font-size: 1rem; }

/* TT mirror buttons in drawer footer */
.cmy-tt-mirror-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.35rem;
  padding:       0.45rem 0.9rem;
  border:        none;
  border-radius: 99px;
  color:         #fff;
  font-size:     0.75rem;
  font-weight:   700;
  letter-spacing: 0.03em;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    filter 0.15s, transform 0.15s;
}
.cmy-tt-mirror-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.cmy-tt-mirror-btn:disabled { cursor: not-allowed; }
.cmy-tt-mirror-btn .material-symbols-outlined { font-size: 0.95rem; }
.cmy-drawer-actions__sep {
  display:    inline-block;
  width:      1px;
  height:     1.5rem;
  background: var(--cmy-outline-variant, #e2e8f0);
  margin:     0 0.4rem;
}
/* ── v1.0.48 hotfix: Logistics banner + TT mirror buttons (end) ─────── */


/* ===========================================================================
   v1.0.58 — Reports shared layout
   Promoted from sales-summary-v2.php's page-scoped <style> so any report page
   (Sales Summary, Sales by Product, Sales by Store, future reports) gets the
   same controls row, period preset group, KPI strip, and table chrome without
   re-declaring rules per page.
   =========================================================================== */

/* ── Controls row ─────────────────────────────────────────────────────── */
.cmy-sr-controls {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         0.5rem;
	margin-bottom: 1.25rem;
}

/* Preset tab group: joined button strip */
.cmy-sr-preset-group {
	display:       flex;
	border:        1px solid var(--cmy-surface-container-highest);
	border-radius: var(--cmy-radius-md);
	overflow:      hidden;
}
.cmy-sr-preset-group .cmy-sr-preset-btn {
	border-radius: 0;
	border-right:  1px solid var(--cmy-surface-container-highest);
}
.cmy-sr-preset-group .cmy-sr-preset-btn:last-child {
	border-right: none;
}
.cmy-sr-preset-btn.is-active {
	background: var(--cmy-primary-container) !important;
	color:      var(--cmy-on-primary)        !important;
	border-color: var(--cmy-primary-container) !important;
}

/* Custom date range row */
.cmy-sr-custom-range {
	display:       flex;
	align-items:   center;
	gap:           0.375rem;
	border:        1px solid var(--cmy-primary-container);
	border-radius: var(--cmy-radius-md);
	padding:       0.3125rem 0.625rem;
	background:    var(--cmy-surface-container-lowest);
}
.cmy-sr-custom-range[hidden] { display: none; }
.cmy-sr-cal-icon {
	font-size: 0.9rem;
	color:     var(--cmy-primary-container);
}
.cmy-sr-date-input {
	border:      none;
	background:  transparent;
	font-size:   0.8125rem;
	font-weight: 600;
	color:       var(--cmy-on-surface);
	outline:     none;
	cursor:      pointer;
	width:       118px;
}
.cmy-sr-range-sep {
	font-size: 0.75rem;
	color:     var(--cmy-on-surface-variant);
}

/* Active period badge */
.cmy-sr-period-badge {
	display:       flex;
	align-items:   center;
	gap:           0.375rem;
	padding:       0.375rem 0.75rem;
	border:        1px solid var(--cmy-outline-variant);
	border-radius: var(--cmy-radius-md);
	background:    var(--cmy-surface-container-lowest);
	font-size:     0.75rem;
	font-weight:   700;
	color:         var(--cmy-on-surface-variant);
}

/* Vertical divider */
.cmy-sr-divider {
	width:      1px;
	height:     28px;
	background: var(--cmy-outline-variant);
	margin:     0 0.125rem;
}

/* Select wrapper */
.cmy-sr-select-wrap {
	position: relative;
	display:  inline-flex;
}
.cmy-sr-select {
	appearance:         none;
	-webkit-appearance: none;
	padding:    0.4375rem 2rem 0.4375rem 0.75rem;
	border:     1px solid var(--cmy-surface-container-highest);
	border-radius: var(--cmy-radius-md);
	background: var(--cmy-surface-container-lowest);
	color:      var(--cmy-on-surface);
	font-size:  0.8125rem;
	font-weight: 600;
	cursor:     pointer;
	outline:    none;
}
.cmy-sr-select:focus {
	border-color: var(--cmy-primary-container);
}
.cmy-sr-select--sm {
	font-size: 0.75rem;
	padding:   0.25rem 1.75rem 0.25rem 0.5rem;
}
.cmy-sr-select-icon {
	position:       absolute;
	right:          0.5rem;
	top:            50%;
	transform:      translateY(-50%);
	font-size:      1rem;
	pointer-events: none;
	color:          var(--cmy-on-surface-variant);
}

/* ── KPI card grid ────────────────────────────────────────────────────── */
.cmy-sr-kpi-strip {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   1rem;
	margin-bottom:         1.25rem;
}
@media (max-width: 900px) {
	.cmy-sr-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.cmy-sr-kpi-strip { grid-template-columns: 1fr; }
}

/* Colour accent borders per card type (token-only) */
.cmy-card--retail   { border-top: 2px solid var(--cmy-tertiary-container); }
.cmy-card--b2b      { border-top: 2px solid var(--cmy-secondary); }
.cmy-card--transfer { border-top: 2px solid var(--cmy-tertiary); }

/* ── Table toolbar ────────────────────────────────────────────────────── */
.cmy-sr-table-toolbar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0.875rem 1rem;
	border-bottom:   1px solid var(--cmy-surface-container);
}
.cmy-sr-table-title {
	font-size:      0.9375rem;
	font-weight:    800;
	letter-spacing: var(--cmy-tracking-tight);
	margin:         0;
}
.cmy-sr-perpage-wrap {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
}
.cmy-sr-perpage-label {
	font-size:  0.75rem;
	color:      var(--cmy-on-surface-variant);
	white-space: nowrap;
}

/* ── Pagination footer ────────────────────────────────────────────────── */
.cmy-sr-pagination {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0.75rem 1rem;
	border-top:      1px solid var(--cmy-surface-container);
}
.cmy-sr-page-nav {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
}
.cmy-sr-page-info {
	font-size:   0.75rem;
	color:       var(--cmy-on-surface-variant);
	min-width:   80px;
	text-align:  center;
}
.cmy-sr-row-count {
	font-size: 0.75rem;
	color:     var(--cmy-on-surface-variant);
}

/* ── Table cell alignment helpers ────────────────────────────────────── */
.cmy-sr-th-num { text-align: left; }
.cmy-sr-td-num {
	text-align:          left;
	font-variant-numeric: tabular-nums;
	font-weight:         600;
}
.cmy-sr-td-muted { color: var(--cmy-on-surface-variant); }
/* ── /v1.0.58 Reports shared layout ─────────────────────────────────── */

/* ── v1.0.69 Logistics Hub ──────────────────────────────────────────────
   Hub layout for the Logistics parent page. Replaces the previous
   trip-tickets-clone view with a KPI strip + sub-section navigation cards
   (Trip Tickets, Pickup List, Pickup HQ).

   Tokens only — no hex literals.
   ─────────────────────────────────────────────────────────────────────── */

.cmy-logistics-hub {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Override the default 5-column KPI strip — the hub has 4 cards. */
.cmy-logistics-hub .cmy-kpi-strip {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .cmy-logistics-hub .cmy-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Section heading above the sub-section grid. */
.cmy-hub-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0 0.125rem;
}
.cmy-hub-section-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--cmy-tracking-wider);
  text-transform: uppercase;
  color: var(--cmy-label-muted);
}
.cmy-hub-section-sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--cmy-on-surface-variant);
}

/* Sub-section card grid. */
.cmy-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1100px) {
  .cmy-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .cmy-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* Card itself — full-anchor, hover/focus states for keyboard users. */
.cmy-hub-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.25rem;
  background: var(--cmy-surface-container-lowest);
  border: 1px solid var(--cmy-surface-container-high);
  border-radius: var(--cmy-radius-xl);
  box-shadow: var(--cmy-shadow-sm);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: var(--cmy-transition);
}
.cmy-hub-card:hover,
.cmy-hub-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: var(--cmy-primary-container);
  outline: none;
}

/* Icon disc — uses kpi accent vars + matching tinted background. */
.cmy-hub-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--cmy-radius-lg);
  background: var(--cmy-surface-container);
  color: var(--cmy-on-surface-variant);
  flex-shrink: 0;
}
.cmy-hub-card__icon .material-symbols-outlined {
  font-size: 1.5rem;
}
.cmy-hub-card[data-accent="orange"] .cmy-hub-card__icon {
  background: var(--cmy-kpi-orange-bg);
  color: var(--cmy-kpi-orange);
}
.cmy-hub-card[data-accent="blue"] .cmy-hub-card__icon {
  background: var(--cmy-kpi-blue-bg);
  color: var(--cmy-kpi-blue);
}
.cmy-hub-card[data-accent="green"] .cmy-hub-card__icon {
  background: var(--cmy-kpi-green-bg);
  color: var(--cmy-kpi-green);
}
.cmy-hub-card[data-accent="purple"] .cmy-hub-card__icon {
  background: #f5f3ff;
  color: #6d28d9;
}

/* Card body. */
.cmy-hub-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.cmy-hub-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cmy-on-surface);
  letter-spacing: -0.01em;
}
.cmy-hub-card__count {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--cmy-on-surface);
}
.cmy-hub-card__sub {
  font-size: 0.8125rem;
  color: var(--cmy-on-surface-variant);
  line-height: 1.4;
}

/* Chevron — gentle slide on hover. */
.cmy-hub-card__chevron {
  color: var(--cmy-on-surface-variant);
  flex-shrink: 0;
  transition: var(--cmy-transition);
}
.cmy-hub-card__chevron .material-symbols-outlined {
  font-size: 1.5rem;
}
.cmy-hub-card:hover .cmy-hub-card__chevron,
.cmy-hub-card:focus-visible .cmy-hub-card__chevron {
  transform: translateX(4px);
  color: var(--cmy-primary-container);
}
/* v1.0.70 — Today's queue mini-list. Reuses .cmy-tr semantics so the
   shared row-click delegation in app-v2.js opens the TT drawer. */
.cmy-hub-queue {
  background: var(--cmy-surface-container-lowest);
  border: 1px solid var(--cmy-surface-container-high);
  border-radius: var(--cmy-radius-xl);
  box-shadow: var(--cmy-shadow-sm);
  overflow: hidden;
}
.cmy-hub-queue__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cmy-hub-queue__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(7rem, auto) minmax(7rem, auto) 1fr 4.5rem 1.25rem;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--cmy-surface-container-high);
  cursor: pointer;
  transition: var(--cmy-transition);
  font-size: 0.875rem;
}
.cmy-hub-queue__row:last-child {
  border-bottom: 0;
}
.cmy-hub-queue__row:hover,
.cmy-hub-queue__row:focus-visible {
  background: var(--cmy-surface-container-lowest-hover, rgba(0, 0, 0, 0.025));
  outline: none;
}
.cmy-hub-queue__badge {
  justify-self: start;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--cmy-radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--cmy-tracking-wider);
}
.cmy-hub-queue__num {
  font-weight: 600;
  color: var(--cmy-on-surface);
  font-variant-numeric: tabular-nums;
}
.cmy-hub-queue__type {
  color: var(--cmy-on-surface-variant);
}
.cmy-hub-queue__addr {
  color: var(--cmy-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmy-hub-queue__time {
  color: var(--cmy-on-surface-variant);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cmy-hub-queue__chev {
  color: var(--cmy-on-surface-variant);
  font-size: 1.25rem;
}
.cmy-hub-queue__row:hover .cmy-hub-queue__chev,
.cmy-hub-queue__row:focus-visible .cmy-hub-queue__chev {
  color: var(--cmy-primary-container);
  transform: translateX(2px);
}
.cmy-hub-queue__empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  color: var(--cmy-on-surface-variant);
  font-size: 0.875rem;
}
.cmy-hub-queue__empty .material-symbols-outlined {
  color: var(--cmy-kpi-green);
}
@media (max-width: 720px) {
  .cmy-hub-queue__row {
    grid-template-columns: 5.5rem 1fr 1.25rem;
  }
  .cmy-hub-queue__type,
  .cmy-hub-queue__addr,
  .cmy-hub-queue__time {
    display: none;
  }
}
/* ── /v1.0.69 Logistics Hub ─────────────────────────────────────────── */

/* ── v1.0.71 Pickup List unified toolbar + Pickup HQ CTA-only header ──
   Wraps the view-mode toggle (List/Week/Month) and the date/location/
   status filter bar into a single flush container with one consistent
   row of controls. */
.cmy-pickup-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--cmy-surface-container-lowest);
  border: 1px solid var(--cmy-surface-container-high);
  border-radius: var(--cmy-radius-lg);
  margin-bottom: 1rem;
}
/* Soft divider between view-toggle group and the filter group. */
.cmy-pickup-toolbar > .cmy-pickup-view-toggle + .cmy-pickup-filter-bar {
  position: relative;
  padding-left: 1rem;
}
.cmy-pickup-toolbar > .cmy-pickup-view-toggle + .cmy-pickup-filter-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--cmy-surface-container-high);
}
/* Inside the toolbar, drop the filter-bar's own background (it's the
   container now) and tighten spacing. */
.cmy-pickup-toolbar .cmy-pickup-filter-bar {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  flex: 1 1 auto;
}
.cmy-pickup-toolbar .cmy-pickup-view-toggle {
  margin: 0;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .cmy-pickup-toolbar > .cmy-pickup-view-toggle + .cmy-pickup-filter-bar {
    padding-left: 0;
  }
  .cmy-pickup-toolbar > .cmy-pickup-view-toggle + .cmy-pickup-filter-bar::before {
    display: none;
  }
}

/* Pickup HQ — CTA-only header row (after body breadcrumb/title were
   moved to the shared header). Right-aligned action button only. */
.cmy-page-header--cta-only {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.cmy-page-header--cta-only .cmy-page-header-actions {
  display: flex;
  gap: 0.5rem;
}
/* ── /v1.0.71 ───────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   v1.0.74 — Mobile responsive shared chrome
   --------------------------------------------------------------------
   Desktop (≥1024px) keeps the existing layout. Below 1024px the sidebar
   becomes an off-canvas drawer triggered by a hamburger button in the
   header, with a logo at the top-left so the user still has brand
   anchoring once the sidebar is hidden. Body gets `cmy-nav-open` to
   open the drawer; backdrop covers the page and dismisses on tap.

   Affected:
   - Mobile leader (logo + burger) inside .cmy-header-left
   - .cmy-sidebar transforms off-canvas on mobile
   - .cmy-mobile-nav-backdrop visible only when nav is open
   - Detail drawer (.cbg-fe-drawer) goes full-width on mobile
   - Orders filter toolbar wraps; KPI strip becomes 2-col
   ────────────────────────────────────────────────────────────────────── */

/* Default (desktop) — mobile elements hidden. */
.cmy-mobile-leader { display: none; }
.cmy-mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 60;
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (max-width: 1023px) {

  /* Show mobile leader (logo + burger) at the start of the header-left. */
  .cmy-mobile-leader {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
  }
  .cmy-mobile-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
  }
  .cmy-mobile-brand-logo {
    display: block;
    height: 2rem;
    width: auto;
    max-width: 8rem;
    object-fit: contain;
  }
  .cmy-mobile-brand-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    color: var(--cmy-on-surface);
  }
  .cmy-mobile-burger {
    flex-shrink: 0;
  }

  /* Sidebar slides off-screen by default, slides in when body.cmy-nav-open. */
  .cmy-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100dvh;
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 70;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  }
  body.cmy-nav-open .cmy-sidebar {
    transform: translateX(0);
  }

  /* Backdrop visible only when nav is open. */
  body.cmy-nav-open .cmy-mobile-nav-backdrop {
    display: block;
    opacity: 1;
  }

  /* Body scroll-lock while drawer is open. */
  body.cmy-nav-open {
    overflow: hidden;
  }

  /* Main column takes full width since sidebar is now off-canvas. */
  .cmy-shell {
    flex-direction: column;
  }
  .cmy-main {
    width: 100%;
    min-height: 100dvh;
  }

  /* Header polish — tighter padding, hide breadcrumb crumbs on phones
     (the page title still anchors the user). */
  .cmy-header {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .cmy-header-left .cmy-page-title {
    font-size: 1rem;
  }

  /* Right-zone icon buttons stay; just tighten gap. */
  .cmy-header-right {
    gap: 0.25rem;
  }

  /* Detail drawer (Order, Edit, Payment, TT) goes full-width sheet. */
  .cbg-fe-drawer,
  .cbg-fe-drawer--lg,
  .cbg-fe-drawer--right {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Header-actions toolbar wraps cleanly. */
  .cmy-header-actions {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* Page content padding tighter on mobile. */
  .cmy-content {
    padding: 0.75rem;
  }
}

@media (max-width: 720px) {

  /* On phones, drop the breadcrumb trail entirely — page title is enough. */
  .cmy-header-left .cmy-crumbs {
    display: none;
  }

  /* KPI strip — two columns on phones (Orders has 5; would be unreadable). */
  .cmy-kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tabs (.cmy-tabs) already scroll; ensure they don't wrap. */
  .cmy-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  /* Pickup-toolbar stacks; remove the divider line on tiny screens. */
  .cmy-pickup-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* Hub-card grid drops to 1 col on phones (already in v1.0.69). */

  /* Notifications panel + search overlay — full-width on phones. */
  .cmy-notifications-panel {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    left: 0 !important;
  }
  .cmy-search-overlay-dialog {
    width: 92vw !important;
  }
}
/* ── /v1.0.74 mobile responsive ─────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   v1.0.75 — Mobile data-table reflow + drawer/toolbar polish
   --------------------------------------------------------------------
   At ≤720px every .cmy-table-classic (Pickup List, Trip Tickets, etc.)
   reflows from a horizontal grid into stacked label/value cards. Each
   <td> uses its data-label="…" attribute as a bold left-column label
   via ::before. THEAD is hidden — labels move into each cell.
   No PHP markup changes beyond the data-label additions.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {

  /* Hide table head — the data-label ::before on each <td> takes its place. */
  .cmy-table-classic thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Each <tbody> <tr> becomes a card. */
  .cmy-table-classic,
  .cmy-table-classic tbody,
  .cmy-table-classic tr,
  .cmy-table-classic td {
    display: block;
    width: 100%;
  }
  .cmy-table-classic tr.cmy-tr,
  .cmy-table-classic tr.cmy-table-row {
    background: var(--cmy-surface-container-lowest);
    border: 1px solid var(--cmy-surface-container-high);
    border-radius: var(--cmy-radius-lg);
    box-shadow: var(--cmy-shadow-sm);
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
  }
  .cmy-table-classic tr.cmy-tr td,
  .cmy-table-classic tr.cmy-table-row td {
    border: 0 !important;
    padding: 0.375rem 0;
    display: grid;
    grid-template-columns: minmax(6.5rem, 35%) 1fr;
    gap: 0.5rem;
    align-items: center;
    text-align: left !important;
  }

  /* Show the data-label as the left-side bold caption. */
  .cmy-table-classic tr.cmy-tr td::before,
  .cmy-table-classic tr.cmy-table-row td::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--cmy-tracking-wider);
    color: var(--cmy-on-surface-variant);
  }
  /* Cells with empty data-label="" (e.g. action chevron) — hide the label
     column and let the cell content span full width. */
  .cmy-table-classic tr.cmy-tr td[data-label=""]::before,
  .cmy-table-classic tr.cmy-table-row td[data-label=""]::before {
    display: none;
  }
  .cmy-table-classic tr.cmy-tr td[data-label=""],
  .cmy-table-classic tr.cmy-table-row td[data-label=""] {
    grid-template-columns: 1fr;
    justify-items: end;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--cmy-surface-container-high) !important;
  }

  /* Group header rows (Pickup List time-slot rows + TT date breaks) keep
     spanning full width as a sticky-feeling chip. */
  .cmy-table-classic tr.cmy-pickup-slot-row,
  .cmy-table-classic tr.cmy-pickup-slot-row td,
  .cmy-table-classic tr.cmy-table-group-row,
  .cmy-table-classic tr.cmy-table-group-row td {
    background: var(--cmy-surface-container);
    padding: 0.5rem 0.75rem;
    border-radius: var(--cmy-radius-md);
    margin-bottom: 0.25rem;
  }
  .cmy-table-classic tr.cmy-pickup-slot-row td::before,
  .cmy-table-classic tr.cmy-table-group-row td::before {
    display: none;
  }
  .cmy-table-classic tr.cmy-pickup-slot-row td,
  .cmy-table-classic tr.cmy-table-group-row td {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  /* Empty-state row keeps centered card layout. */
  .cmy-table-classic tr td.cmy-empty-state-cell {
    display: block;
    grid-template-columns: none;
    padding: 1rem;
  }
  .cmy-table-classic tr td.cmy-empty-state-cell::before {
    display: none;
  }

  /* Drop the table outer scrollbar wrapper since cards stack vertically. */
  .cmy-table-wrap {
    overflow-x: visible;
  }

  /* ── Mobile toolbar polish ────────────────────────────────────────
     When .cmy-toolbar / .cmy-pickup-toolbar / filter forms wrap onto
     multiple rows the chips/inputs/buttons should each occupy the full
     row instead of squeezing onto a half-width line. */
  .cmy-toolbar,
  .cmy-pickup-toolbar .cmy-pickup-filter-bar,
  .cmy-pickup-filter-form {
    flex-direction: column;
    align-items: stretch;
  }
  .cmy-toolbar > *,
  .cmy-pickup-toolbar .cmy-pickup-filter-bar > *,
  .cmy-pickup-filter-form > * {
    width: 100%;
  }
  .cmy-pickup-view-toggle {
    justify-content: stretch;
    width: 100%;
  }
  .cmy-pickup-view-toggle .cmy-view-btn {
    flex: 1;
    justify-content: center;
  }

  /* ── Order detail drawer — phone polish ─────────────────────────── */
  /* Tighten header so a long page title doesn't overflow. */
  #cbg-fe-detail-drawer .cbg-fe-drawer__header,
  #cbg-fe-edit-drawer .cbg-fe-drawer__header,
  #cbg-fe-payment-drawer .cbg-fe-drawer__header {
    padding: 1rem 1.25rem;
  }
  .cbg-fe-drawer__title {
    font-size: 1rem;
  }
  .cbg-fe-drawer__body {
    padding: 1.25rem;
  }
}
/* ── /v1.0.75 mobile data-table reflow ──────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   v1.0.76 — Order Edit drawer + Add Payment popup mobile polish
   --------------------------------------------------------------------
   The Order Edit drawer markup uses a lot of inline `style="..."` for
   2-col grids (Date+Time, customer info row, items table widths, etc).
   Inline styles win the cascade — these mobile overrides need `!important`.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {

  /* Drawer body padding tighter; form sections stack. */
  .cbg-fe-drawer__body .cbg-fe-drawer-section {
    padding: 1rem 0;
  }

  /* All inline 2-col grids inside any v2 drawer collapse to single col.
     Covers #cbg-fe-neworder-drawer (Order Create/Edit), #cbg-fe-detail-drawer
     (Order Detail view), #cbg-fe-tt-view-drawer, and any future drawer that
     uses .cbg-fe-drawer chrome. */
  .cbg-fe-drawer .cbg-fe-drawer-section > div[style*="grid-template-columns"],
  .cbg-fe-drawer .cbg-fe-drawer__body div[style*="grid-template-columns"],
  .cbg-fe-drawer div[style*="display:grid"][style*="grid-template-columns"],
  .cbg-fe-drawer div[style*="display: grid"][style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Form-row 2-col grid utility class also stacks. */
  .cbg-fe-form-row--2col {
    grid-template-columns: 1fr;
  }

  /* Drawer footer (Save Draft / Submit Order) stretches full-width
     and stacks if both buttons are present. */
  .cbg-fe-drawer__footer {
    flex-direction: column;
    padding: 0.875rem 1rem;
  }
  .cbg-fe-drawer__footer .cbg-fe-btn,
  .cbg-fe-drawer__footer .cbg-fe-drawer__action {
    width: 100%;
  }

  /* Pickup vs Delivery toggle — full-width, equal split. */
  .cbg-fe-toggle-btn {
    flex: 1;
    justify-content: center;
  }

  /* ── Items / Products table reflow ──────────────────────────────────
     Each <tr.cbg-fe-product-row> becomes a stacked card:
     · Product name input on its own line (full width)
     · Qty + Price + Actions on a single row below
     The meta-row collapses similarly. */
  .cbg-fe-drawer-table {
    display: block;
    width: 100%;
  }
  .cbg-fe-drawer-table thead {
    display: none;
  }
  .cbg-fe-drawer-table tbody,
  .cbg-fe-drawer-table tr {
    display: block;
    width: 100%;
  }
  .cbg-fe-drawer-table tr.cbg-fe-product-row {
    background: var(--cmy-surface-container-lowest);
    border: 1px solid var(--cmy-surface-container-high);
    border-radius: var(--cmy-radius-lg);
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .cbg-fe-drawer-table tr.cbg-fe-product-row td {
    display: block;
    border: 0 !important;
    padding: 0;
    width: 100% !important;
    text-align: left !important;
  }
  /* The 2nd / 3rd / 4th cells (qty, price, actions) cluster on one row. */
  .cbg-fe-drawer-table tr.cbg-fe-product-row td:nth-child(n+2) {
    display: inline-flex;
    width: auto !important;
    vertical-align: middle;
  }
  /* Wrap qty/price/actions in a flex row using ::after on the row itself
     isn't possible — instead use a sibling-aware grid layout. Simpler:
     give the row an inner second-row grid via :nth-child(n+2) packed
     into a flex container. CSS-only — no markup change. */
  .cbg-fe-drawer-table tr.cbg-fe-product-row {
    grid-template-areas:
      "name name name"
      "qty price actions";
    grid-template-columns: 5rem 1fr auto;
  }
  .cbg-fe-drawer-table tr.cbg-fe-product-row td:nth-child(1) { grid-area: name; }
  .cbg-fe-drawer-table tr.cbg-fe-product-row td:nth-child(2) { grid-area: qty; }
  .cbg-fe-drawer-table tr.cbg-fe-product-row td:nth-child(3) { grid-area: price; }
  .cbg-fe-drawer-table tr.cbg-fe-product-row td:nth-child(4) { grid-area: actions; justify-self: end; }

  /* Meta row keeps full-width; reset the inline colspan width hint. */
  .cbg-fe-drawer-table tr.cbg-fe-meta-row td {
    display: block;
    width: 100% !important;
  }

  /* Add-Product link goes on its own line, right-aligned. */
  .cbg-fe-link-btn {
    align-self: flex-end;
  }

  /* Order Edit section heading + Add Product link inline-row stacks. */
  .cbg-fe-drawer-section > div[style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  /* ── Add Payment popup — give it real estate at phone width. */
  .cbg-fe-payment-popup {
    max-width: 92vw;
    width: 92vw;
    margin: auto;
  }
  .cbg-fe-payment-popup__row {
    grid-template-columns: 1fr;
  }
  .cbg-fe-payment-popup__footer {
    flex-direction: column-reverse;
  }
  .cbg-fe-payment-popup__footer .cbg-fe-btn {
    width: 100%;
  }
}
/* ── /v1.0.76 forms + popup mobile polish ───────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   v1.0.77 — Reports table reflow + Dashboard widget polish
   --------------------------------------------------------------------
   Extends the v1.0.75 mobile data-table reflow to generic .cmy-table
   rows (Reports pages — Sales Summary, Sales by Product, Sales by
   Store) that opt-in via `data-label` attributes on each <td>. Cells
   without data-label keep their classic td rendering, so this rule is
   safe to apply across every .cmy-table row sitewide.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {

  /* Hide thead when at least one td in the row has a data-label.
     Specificity uses :has() — supported in all modern Safari/Chrome/FF
     (Cake's user base = WordPress dashboards on modern browsers). */
  .cmy-table:has(tbody td[data-label]) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Generic .cmy-table reflow when a row contains data-label cells.
     :has() gates per-row so non-labeled rows render as classic tds. */
  .cmy-table tr.cmy-table-row:has(td[data-label]) {
    display: block;
    background: var(--cmy-surface-container-lowest);
    border: 1px solid var(--cmy-surface-container-high);
    border-radius: var(--cmy-radius-lg);
    box-shadow: var(--cmy-shadow-sm);
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    width: 100%;
  }
  .cmy-table tr.cmy-table-row:has(td[data-label]) td {
    display: grid;
    grid-template-columns: minmax(6rem, 35%) 1fr;
    gap: 0.5rem;
    align-items: center;
    border: 0 !important;
    padding: 0.375rem 0;
    text-align: left !important;
    width: 100%;
  }
  .cmy-table tr.cmy-table-row:has(td[data-label]) td::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--cmy-tracking-wider);
    color: var(--cmy-on-surface-variant);
  }
  /* Empty data-label="" cells (action columns) span full width on their
     own row with a dashed top separator. */
  .cmy-table tr.cmy-table-row:has(td[data-label]) td[data-label=""]::before {
    display: none;
  }
  .cmy-table tr.cmy-table-row:has(td[data-label]) td[data-label=""] {
    grid-template-columns: 1fr;
    justify-items: end;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--cmy-surface-container-high) !important;
  }

  /* Dashboard widget body padding — give it more room on phones. */
  .cmy-dash-widget-body,
  .cmy-dash-widget-body--min {
    padding: 0.5rem 0.75rem;
  }
  /* Dashboard widget header stacks (title above View All) on phones. */
  .cmy-dash-widget-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
  }
  .cmy-dash-widget-header .cmy-dash-widget-title-group {
    width: 100%;
  }
  .cmy-dash-widget-header .cmy-btn-sm,
  .cmy-dash-widget-actions {
    align-self: flex-end;
  }
}
/* ── /v1.0.77 reports + dashboard mobile polish ─────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   v1.0.78 — Header Active-Store Switcher
   --------------------------------------------------------------------
   Pill-shaped chip in the middle of the header. Three states:
     · Static (single-store user)        — no caret, default cursor
     · Interactive (multi-store / wildcard) — caret + hover/click dropdown
     · Open                              — dropdown menu visible

   Mobile (≤720px): the switcher drops out of the top-bar row and
   shows below the page title in its own context row, so the top
   header stays uncluttered.
   ────────────────────────────────────────────────────────────────────── */

.cmy-store-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0 auto;       /* centers within .cmy-header (between left + right zones) */
  z-index: 50;
}

/* Trigger chip (button or static div). */
.cmy-store-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--cmy-surface-container);
  color: var(--cmy-on-surface);
  border: 1px solid var(--cmy-surface-container-high);
  cursor: pointer;
  transition: var(--cmy-transition);
  max-width: 18rem;
  white-space: nowrap;
}
.cmy-store-switcher__trigger:hover,
.cmy-store-switcher__trigger:focus-visible {
  background: var(--cmy-surface-container-high);
  border-color: var(--cmy-primary-container);
  outline: none;
}

/* Static (single-store) variant — no caret, no hover treatment. */
.cmy-store-switcher__trigger--static {
  cursor: default;
}
.cmy-store-switcher__trigger--static:hover {
  background: var(--cmy-surface-container);
  border-color: var(--cmy-surface-container-high);
}

/* Interactive variant tints subtly to invite click. */
.cmy-store-switcher--interactive .cmy-store-switcher__trigger {
  background: var(--cmy-surface-container-lowest);
}
.cmy-store-switcher--interactive .cmy-store-switcher__trigger:hover {
  background: var(--cmy-surface-container);
}

/* Active state when the menu is open — primary-tinted. */
.cmy-store-switcher.is-open .cmy-store-switcher__trigger {
  background: var(--cmy-primary-container);
  color: var(--cmy-on-primary-container);
  border-color: var(--cmy-primary-container);
}

/* Loading state while AJAX is in flight. */
.cmy-store-switcher.is-loading .cmy-store-switcher__trigger {
  opacity: 0.6;
  pointer-events: none;
}

.cmy-store-switcher__icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}
.cmy-store-switcher__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmy-store-switcher__caret {
  font-size: 1.125rem;
  margin-left: 0.125rem;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.cmy-store-switcher.is-open .cmy-store-switcher__caret {
  transform: rotate(180deg);
}

/* Dropdown menu. */
.cmy-store-switcher__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 16rem;
  max-width: 24rem;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--cmy-surface-container-lowest);
  border: 1px solid var(--cmy-surface-container-high);
  border-radius: var(--cmy-radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.cmy-store-switcher__menu[hidden] {
  display: none;
}

.cmy-store-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--cmy-radius-md);
  background: transparent;
  color: var(--cmy-on-surface);
  border: 0;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: var(--cmy-transition);
}
.cmy-store-switcher__option:hover,
.cmy-store-switcher__option:focus-visible {
  background: var(--cmy-surface-container);
  outline: none;
}
.cmy-store-switcher__option.is-active {
  background: var(--cmy-primary-container);
  color: var(--cmy-on-primary-container);
  font-weight: 700;
}
.cmy-store-switcher__option .material-symbols-outlined {
  font-size: 1.125rem;
  flex-shrink: 0;
}
.cmy-store-switcher__option-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmy-store-switcher__check {
  margin-left: auto;
}
.cmy-store-switcher__divider {
  height: 1px;
  background: var(--cmy-surface-container-high);
  margin: 0.25rem 0;
}

/* ── Mobile (≤720px) — drop the switcher into a context row. ──
   The .cmy-header keeps just burger/logo + page title + right icons.
   The switcher repositions below via absolute positioning relative to
   the header so it visually belongs to the title block. */
@media (max-width: 720px) {
  .cmy-header {
    /* Allow the switcher to drop below by giving the header a stacked
       layout where children wrap. */
    flex-wrap: wrap;
  }
  .cmy-store-switcher {
    order: 99;  /* always last in flex order */
    flex-basis: 100%;
    margin: 0.5rem 0 0;
    justify-content: flex-start;
  }
  .cmy-store-switcher__trigger {
    /* Take the full row on phones — easy thumb target. */
    width: 100%;
    justify-content: space-between;
    max-width: none;
  }
  .cmy-store-switcher__menu {
    /* Anchor to the trigger's left edge and span the row width. */
    left: 0;
    transform: none;
    min-width: 100%;
    max-width: 100%;
  }
}
/* ── /v1.0.78 active-store switcher ─────────────────────────────────── */