* {
    /* Manrope (IMB admin English) for Latin; IBM Plex Sans Thai (self-hosted, brand
       font_TH) covers Thai, which Manrope lacks — Latin resolves to Manrope (first). */
    font-family: 'Manrope', 'IBM Plex Sans Thai', sans-serif;
    box-sizing: border-box;
}

/* Design tokens — copied EXACTLY from specification/requirement/core/* (light theme).
   Old semantic names (--panel/--text/--panel-2) are kept and mapped to the spec's
   surface scale so the 130 existing components re-skin without touching every rule:
     --panel   → --s1 (white surface)   --text      → --t1 (#111)
     --panel-2 → --s3 (hover/secondary)  --text-dim  → --t2 (#555)
   The platform sidebar re-scopes these tokens to dark values locally (see end of file). */
:root {
    /* surfaces */
    --bg: #f5f5f5;
    --s1: #ffffff;
    --s2: #f9f9f9;
    --s3: #f0f0f0;
    --panel: #ffffff;
    --panel-2: #f0f0f0;
    /* borders */
    --border: rgba(0, 0, 0, 0.07);
    --border-hi: rgba(0, 0, 0, 0.13);
    /* text */
    --text: #111111;
    --text-dim: #555555;
    --text-mute: #aaaaaa;
    --t1: #111111;
    --t2: #555555;
    --t3: #aaaaaa;
    /* accent (spec primary is near-black; keep a blue as secondary) */
    --accent: #111111;
    --accent-2: #60a5fa;
    --inv: #a78bfa;   /* inventory module accent (spec --inv) */
    --adim: rgba(0, 0, 0, 0.04);
    /* metrics */
    --radius: 12px;
    --rail-bg: #161616;
    --rail-hi: #1f1f1f;
    --sidebar-bg: #1c1c1c;
    --sw: 240px;   /* sidebar width */
    --hh: 52px;    /* topbar height */
    --rw: 72px;    /* platform rail width */
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
}

/* .cknui is the mount point that sits INSIDE the OS shell (below the topbar,
   right of the rail). The module <*-app> component fills it. */
.cknui {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
/* The mounted <*-app> custom element is inline by default; make it a flex box so
   its single root child (.product-app / .lz / …, height:100%) actually fills. */
.cknui > * { flex: 1; min-width: 0; min-height: 0; display: flex; }

/* ===== Retail-OS shell — shared chrome rendered by theme.default.ejs ===== */
/* Layer A = platform rail, Layer B = topbar. Both identical on every route. */
.ros {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Platform app-switcher rail — spec: requirement/core/index.html .rail (72px, dark) */
.rail {
    width: var(--rw);
    background: var(--rail-bg);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 10;
}
.rail-logo { width: 38px; height: 38px; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 6px; }
.rail-logo img { width: 80%; height: 80%; object-fit: contain; display: block; }
.rail-name { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); text-align: center; line-height: 1.25; margin-bottom: 14px; }
.rail-sep { width: 34px; height: 1px; background: rgba(255, 255, 255, .08); margin: 6px 0 12px; }
.rail-apps { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; flex: 1; overflow-y: auto; }
.rail-apps::-webkit-scrollbar { width: 0; }
.app { width: 58px; padding: 9px 0 7px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; transition: background .15s; position: relative; border: 1px solid transparent; background: transparent; text-decoration: none; }
.app:hover { background: var(--rail-hi); }
/* Disabled rail module — greyed and non-interactive (Supplier / Purchase). */
.app.disabled { cursor: default; opacity: .38; filter: grayscale(1); pointer-events: none; }
.app.disabled:hover { background: transparent; }
.app.active { background: var(--rail-hi); border-color: rgba(255, 255, 255, .07); }
.app.active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--ac, #fff); }
.app-ico { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255, 255, 255, .06); transition: all .15s; }
.app-ico svg { width: 15px; height: 15px; color: rgba(255, 255, 255, .5); transition: color .15s; }
.app:hover .app-ico svg { color: rgba(255, 255, 255, .8); }
.app.active .app-ico { background: color-mix(in srgb, var(--ac, #fff) 22%, transparent); }
.app.active .app-ico svg { color: var(--ac, #fff); }
.app-lbl { font-size: 9px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .4); transition: color .15s; text-align: center; line-height: 1.1; }
.app.active .app-lbl { color: #fff; }
.app:hover .app-lbl { color: rgba(255, 255, 255, .7); }
.app-badge { position: absolute; top: 5px; right: 9px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 8.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.rail-bot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); width: 46px; }
.rail-btn { width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.rail-btn:hover { background: rgba(255, 255, 255, .1); }
.rail-btn svg { width: 15px; height: 15px; color: rgba(255, 255, 255, .5); }
.rail-avatar { width: 34px; height: 34px; border-radius: 50%; background: #2a2a2a; border: 1px solid rgba(255, 255, 255, .12); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; cursor: pointer; }

/* App frame = topbar + the mounted module (everything right of the rail) */
.app-frame { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* Topbar — spec: module .topbar (52px, white). logo-area sits above the sidebar. */
.topbar { height: var(--hh); background: var(--s1); border-bottom: 1px solid var(--border); display: flex; align-items: center; flex-shrink: 0; z-index: 100; }
.logo-area { width: var(--sw); height: 100%; display: flex; align-items: center; padding: 0 18px; gap: 10px; flex-shrink: 0; }
.logo-mark { width: 26px; height: 26px; background: #fff; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-mark img { width: 82%; height: 82%; object-fit: contain; display: block; }
.logo-name { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t1); line-height: 1; }
.logo-sub { font-size: 9px; color: var(--t3); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.topbar-mid { flex: 1; padding: 0 24px; display: flex; align-items: center; }
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t3); }
.breadcrumb .sep { color: var(--t3); }
.breadcrumb .cur { color: var(--t1); font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 10px; padding-right: 20px; }
.tbtn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--t2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.tbtn:hover { background: var(--adim); color: var(--t1); border-color: var(--border-hi); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--s3); border: 1px solid var(--border-hi); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; cursor: pointer; }

/* Branch / warehouse switcher (topbar, Inventory only) */
.branch-switch { position: relative; margin-right: 4px; }
.branch-trigger { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; color: var(--t1); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .15s; }
.branch-trigger:hover { border-color: var(--border-hi); }
.branch-trigger .branch-name { font-weight: 500; font-size: 13px; }
.branch-trigger .branch-badge { background: rgba(124,108,240,.1); color: #7c6cf0; border: 1px solid rgba(124,108,240,.45); border-radius: 4px; font-family: 'Manrope', sans-serif; }
.branch-trigger .branch-badge.is-hq { background: rgba(59,130,246,.1); color: #3b82f6; border-color: rgba(59,130,246,.45); }
.branch-trigger .branch-badge.is-cw { background: rgba(242,184,75,.1); color: #d99a24; border-color: rgba(242,184,75,.45); }
.branch-trigger svg { color: var(--t3); }
.branch-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.branch-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; width: auto; background: var(--sidebar-bg); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.28); padding: 8px 0; z-index: 60; }
.branch-menu[hidden] { display: none; }
.branch-menu-hdr { padding: 10px 18px 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8b93a3; }
.branch-opt { display: flex; align-items: center; gap: 12px; padding: 10px 18px; cursor: pointer; }
.branch-opt:hover, .branch-opt.is-active { background: rgba(255,255,255,.06); }
.branch-opt-txt { flex: 1; min-width: 0; }
.branch-opt-name { font-size: 13px; font-weight: 400; color: #e8eaf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.branch-opt-sub { font-size: 11px; color: #8b93a3; }
/* Badges inside the dark branch dropdown: green outline STORE, amber outline CW */
.branch-menu .badge-bin { background: transparent; color: #4ade80; border: 1px solid rgba(74,222,128,.4); border-radius: 4px; font-weight: 500; font-family: 'Manrope', sans-serif; }
.branch-badge-cw { background: transparent; color: #f2b84b; border: 1px solid rgba(242,184,75,.4); border-radius: 4px; font-family: 'Manrope', sans-serif; font-size: 10px; }
/* HQ badge (Scope dropdown, e.g. Sales): blue outline */
.branch-menu .branch-badge-hq { background: transparent; color: #60a5fa; border: 1px solid rgba(96,165,250,.45); border-radius: 4px; font-weight: 500; font-family: 'Manrope', sans-serif; font-size: 10px; }
/* Scope variant (Sales): wider than the trigger, sidebar-matched bg, blue STORE badges */
.branch-menu.scope { left: auto; right: 0; width: 320px; background: var(--sidebar-bg); }
.branch-menu.scope .badge-bin { color: #60a5fa; border-color: rgba(96,165,250,.45); }
/* Teal variant (Customer): all badges use the module's teal accent */
.branch-switch.teal .branch-trigger .branch-badge,
.branch-switch.teal .branch-trigger .branch-badge.is-hq { background: rgba(20,184,166,.1); color: #14b8a6; border-color: rgba(20,184,166,.45); }
.branch-switch.teal .branch-menu .branch-badge-hq,
.branch-switch.teal .branch-menu .badge-bin,
.branch-switch.teal .branch-menu .branch-badge-cw { color: #2dd4bf; border-color: rgba(45,212,191,.45); }
/* Bold section headers; divider line above the "Warehouse" header (both variants) */
.branch-menu .branch-menu-hdr { font-weight: 700; }
.branch-menu .branch-opt + .branch-menu-hdr { border-top: 1px solid rgba(255,255,255,.1); margin-top: 6px; padding-top: 12px; }

/* ===== Shell (home-app) ===== */
.home-app {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.home-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sb-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
}

.sb-brand-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.sb-brand-sub {
    font-size: 12px;
    color: var(--text-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
}

.sb-nav {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mi {
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.12s ease;
}

.mi:hover {
    background: var(--panel-2);
}

.mi.active {
    background: var(--panel-2);
    box-shadow: inset 3px 0 0 var(--accent);
}

.mi-lbl {
    font-size: 14px;
    color: var(--text);
}

.mi-group {
    font-size: 11px;
    color: var(--text-mute);
}

.home-main {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px;
}

/* ===== Home pane (home-home) ===== */
.home-pane {
    max-width: 1100px;
    margin: 0 auto;
}

.welcome {
    margin-bottom: 28px;
}

.w-eye {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.w-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text);
}

.w-sub {
    font-size: 15px;
    color: var(--text-dim);
    margin-top: 6px;
}

.avail-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.avail-summary--6 {
    grid-template-columns: repeat(6, 1fr);
}

.avail-summary--4 {
    grid-template-columns: repeat(4, 1fr);
}

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

.avail-box {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.avail-box-lbl {
    font-size: 13px;
    color: var(--text-dim);
}

.avail-box-val {
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    margin: 6px 0 4px;
}

.avail-box-sub {
    font-size: 12px;
    color: var(--text-mute);
}

.w-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.wc {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.14s ease, transform 0.14s ease;
    position: relative;
}

.wc:hover {
    border-color: var(--accent-2);
    transform: translateY(-2px);
}

.wc-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-bottom: 14px;
}

.wc-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.wc-desc {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 6px;
    line-height: 1.5;
}

/* ===== Shared pane header ===== */
.pane-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.pane-eye {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.pane-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}

.pane-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* ===== Buttons ===== */
.btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover { opacity: .85; }

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    cursor: pointer;
}

.btn-ghost:hover { background: var(--panel-2); }

.dd-btn, .act-btn {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
}

.dd-btn:hover, .act-btn:hover { border-color: var(--accent-2); }

/* Solid (primary) table action button — mirror demo `.act-btn.primary`: a compact
   near-black button the SAME size as `.act-btn`. Without this rule the `primary`
   class falls through to the generic `.primary` (line ~1196), which is a larger form
   button (padding 9/16, radius 8, no border) and renders oversized inside table rows. */
.act-btn.primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
}
.act-btn.primary:hover { border-color: var(--accent); opacity: .85; }

.row-actions { display: inline-flex; gap: 6px; align-items: center; }
.dd-more { padding: 5px 9px; font-weight: 700; line-height: 1; }

/* Sidebar sub-rail (expandable nested nav) — matches retailos mockup */
.sub-items { display: none; padding: 1px 0; }
.sub-items.open { display: block; }
.si { display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 46px; cursor: pointer; transition: all .15s; border-left: 2px solid transparent; }
.si:hover { background: rgba(255,255,255,0.04); }
.si.active { background: rgba(255,255,255,0.06); border-left-color: rgba(255,255,255,0.3); }
.si.active .si-lbl { color: #ffffff; }
.si-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.si-lbl { font-size: 11.5px; color: rgba(255,255,255,0.38); }

/* Row action dropdown (⋯ menu) */
.dd-wrap { position: relative; display: inline-flex; }
.dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 140px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: 4px;
    display: flex;
    flex-direction: column;
}
.dd-item {
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}
.dd-item:hover { background: var(--panel-2); }
.dd-danger { color: #dc2626; }

/* Product List's row ⋯ dropdown now positions itself with fixed viewport coordinates
   (see ProductProducts#toggleMenu/menuStyle), so it no longer depends on this box being
   unclipped — .tbl-wrap can use the general overflow-x:auto scroll behavior instead.
   Issue #25: overflow:visible here clipped the Status/Actions columns with no way to
   scroll to them on iPad-width viewports, since every ancestor above it clips overflow. */
/* Campaign tables still carry a row ⋯ dropdown without fixed positioning; let it overflow
   the table box (same as Product used to) until that page gets the same treatment. */
.campaign-app .tbl-wrap { overflow: visible; }

/* ===== Column customizer (☰ Columns) ===== */
.cc-wrap { position: relative; display: inline-flex; }
.col-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.col-btn:hover { border-color: var(--accent-2); }
.cc-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    width: 264px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    padding: 12px 8px 8px;
}
.cc-panel.open { display: block; }
.col-btn.active { border-color: var(--accent); }
.cc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 8px;
}
.cc-title { font-size: 11px; letter-spacing: 0.06em; color: var(--text-mute); font-weight: 600; }
.cc-reset { background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 0; }
.cc-list { max-height: 232px; overflow-y: auto; display: flex; flex-direction: column; }
.cc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.cc-row:hover { background: var(--panel-2); }
.cc-grip { color: var(--text-mute); font-size: 13px; cursor: grab; line-height: 1; }
.cc-box {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1.5px solid var(--border-hi);
    border-radius: 4px;
    position: relative;
}
.cc-box.on { background: #111; border-color: #111; }
.cc-box.on::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.cc-label { flex: 1; }
.cc-foot {
    font-size: 11px;
    color: var(--text-mute);
    line-height: 1.5;
    padding: 8px 8px 2px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* Product List: white backgrounds on the filter dropdowns and row action buttons. */
.product-pane .filt-sel,
.product-pane .dd-btn { background: #fff; }

/* Product List: search box stretches to fill the toolbar; filters keep their size. */
.product-pane .toolbar { flex-wrap: nowrap; }
.product-pane .search-wrap { flex: 1 1 auto; min-width: 180px; }
.product-pane .filt-sel,
.product-pane .cc-wrap { flex: 0 0 auto; }

/* Sales Orders, POS Sales & Tax Documents: search box stretches to fill the toolbar;
   status/branch/channel filters keep their size — all stay on a single line (no wrap). */
.sales-so .toolbar,
.sales-receipts .toolbar,
.sales-tax-docs .toolbar { flex-wrap: nowrap; }
.sales-so .search-wrap,
.sales-receipts .search-wrap,
.sales-tax-docs .search-wrap { flex: 1 1 auto; min-width: 180px; }
.sales-so .filt-sel,
.sales-receipts .filt-sel,
.sales-tax-docs .filt-sel { flex: 0 0 auto; }

/* Redemption History: Type + Status filter pills have no flexible element to absorb
   width, so keep them on a single row instead of the shared .toolbar's default wrap. */
.redemption-history .toolbar { flex-wrap: nowrap; }

/* Hidden table columns (toggled off in the column customizer). Using display:none
   keeps every cell in the DOM so headers and body cells stay perfectly aligned,
   and the remaining columns stretch to fill because the table is width:100%. */
.col-hidden { display: none; }

/* Product List: column-edge resize handle (drag to widen/narrow a column). A
   thin hit-area pinned to the right edge of each header cell; th/td widths are
   set inline (style="width:...px") from columnPrefs, so this only needs to
   catch the mousedown that starts the drag. */
.col-rsz {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 1;
}
.col-rsz:hover { background: var(--border-hi); }
.product-pane .tbl thead th { position: relative; }

/* Product List: Import modal (Download Template + local CSV staging). */
.import-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.import-modal {
    width: 380px;
    max-width: calc(100vw - 32px);
    background: var(--panel);
    border-radius: var(--radius);
    padding: 20px;
}
.import-modal h3 { margin: 0 0 4px; font-size: 15px; }
.import-modal p { margin: 0 0 14px; font-size: 12px; color: var(--text-mute); }
.import-modal .row { display: flex; gap: 8px; margin-bottom: 10px; }

/* Product Detail: "view" mode disables the whole form and hides Save (an
   "✎ Edit" button switches back to editable — see productdetail.ts mode field). */
.readonly-form .pdp-layout { pointer-events: none; opacity: 0.85; }

/* Discount Code "view" mode (issue #78) — same read-only treatment, but the modal-body
   itself carries the class rather than an ancestor (see campaigndiscount.ts's viewing field). */
.modal-body.readonly-form { pointer-events: none; opacity: 0.85; }

/* Membership Landing Page editor "view" mode (issue #82) — the class is applied
   directly to the two mutating regions (palette, active-modules list) rather than
   the whole pe-layout, since the back button/page name/version bar live inside
   pe-layout too and must stay usable in view mode (see membershiplanding-editor.ts). */
.readonly-form.pe-mid-palette, .readonly-form.pe-active-mods, .readonly-form.version-add { pointer-events: none; opacity: 0.85; }

/* ===== Content Management Dashboard (dash-*) ===== */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.dash-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.dash-card.clickable { cursor: pointer; }
.dash-card.clickable:hover { border-color: var(--border-hi); }
.dash-lbl { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.dash-val { font-size: 28px; font-weight: 700; margin: 6px 0 4px; }
.dash-sub { font-size: 12px; color: var(--text-dim); }

.dash-wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}
.dash-wide .card { margin-bottom: 0; }
.dash-card-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }

.dash-stack { display: flex; flex-direction: column; }
.dash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.dash-row:first-child { border-top: none; }
.dash-row-main { min-width: 0; }
.dash-row-title { font-size: 13px; font-weight: 500; color: var(--text); }
.dash-row-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.dash-metric { font-size: 18px; font-weight: 700; color: var(--text); white-space: nowrap; }

.dash-channel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.dash-channel {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}
.dash-channel-name { font-size: 13px; font-weight: 600; }
.dash-channel-meta { font-size: 12px; color: var(--text-mute); margin: 4px 0 12px; min-height: 32px; }
.dash-bar { height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.dash-fill { height: 100%; width: 0; background: var(--text); border-radius: 999px; }
.dash-fill.good { background: #2e7d32; }
.dash-fill.warn { background: #f57f17; }

.dash-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.dash-day {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    min-height: 92px;
}
.dash-day-num { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.dash-event {
    font-size: 11px;
    background: var(--panel-2);
    border-radius: 6px;
    padding: 4px 6px;
    margin-bottom: 5px;
}

.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table thead th {
    text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-mute); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dash-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.dash-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 1100px) {
    .dash-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-wide { grid-template-columns: 1fr; }
    .dash-channel-grid { grid-template-columns: 1fr; }
    .dash-calendar { grid-template-columns: repeat(3, 1fr); }
}

.help-note {
    font-size: 12px;
    color: var(--text-mute);
    margin-bottom: 12px;
}

/* ===== Card ===== */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.card-sub { font-size: 12px; color: var(--text-mute); margin-bottom: 12px; }

/* ===== Table ===== */
.tbl-wrap {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Scroll wide tables horizontally instead of clipping the right-hand columns
       (e.g. Product List's Actions column was hidden under overflow:hidden). */
    overflow-x: auto;
    overflow-y: hidden;
}

.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }

.tbl thead th {
    text-align: left;
    padding: 9px 11px;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-mute);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.tbl tbody td {
    padding: 9px 11px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    vertical-align: middle;
}

.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--panel-2); }

.cell-strong { color: var(--text); font-weight: 500; }
.cell-muted { color: var(--text-mute); }
.cell-mid { color: var(--text-dim); }

/* ===== Category tree (expand / collapse) ===== */
.tree-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-weight: 500;
}
.tree-name.has-children { cursor: pointer; }
.tree-caret {
    display: inline-block;
    width: 12px;
    text-align: center;
    font-size: 10px;
    color: var(--text-mute);
}
.tree-child .tree-name { font-weight: 400; color: var(--text-dim); }
.tree-add-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mute);
    font-size: 12px;
    cursor: pointer;
}
.tree-add-link:hover { color: var(--accent); }
.tree-add:hover { background: transparent; }

/* ===== Badges ===== */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Status badges — pastel-light fills w/ dark text (spec: mockup inventory.html).
   Readable on both the white content area and the dark sidebars. */
.badge-active { background: #e8f5e9; color: #2e7d32; }
.badge-in { background: #e8f5e9; color: #2e7d32; }
.badge-mini { background: #e3f2fd; color: #1565c0; }
.badge-trf { background: #e3f2fd; color: #1565c0; }
.badge-member { background: #f3e5f5; color: #6a1b9a; }
.badge-draft { background: #f5f5f5; color: #888; border: 1px solid var(--border); }
.type-discount { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.type-freegift { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.type-bundle { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
.type-flashsale { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.type-points { background: rgba(96, 165, 250, 0.15); color: #3b82f6; }
.type-cashback { background: rgba(167, 139, 250, 0.15); color: #a855f7; }
.type-points { background: rgba(96, 165, 250, 0.15); color: #1565c0; }
.type-campaign { background: rgba(167, 139, 250, 0.15); color: #6a1b9a; }
.type-partner { background: rgba(251, 191, 36, 0.15); color: #e65100; }

/* ===== Tabs ===== */
.tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.tab {
    padding: 9px 16px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ===== Forms ===== */
.field-row { margin-bottom: 16px; }
.field-row label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }

.inp {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 13px;
}

.inp:focus { outline: none; border-color: var(--accent-2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ===== KPI grid ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.kpi-lbl { font-size: 13px; color: var(--text-dim); }
.kpi-val { font-size: 24px; font-weight: 600; margin: 6px 0 4px; }
.kpi-sub { font-size: 12px; color: var(--text-mute); }

/* ===== Monitor grid (display manager) ===== */
.monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.monitor-btn {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
}

.monitor-btn:hover { border-color: var(--accent-2); }
.monitor-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.monitor-ico { font-size: 24px; }
.monitor-name { font-size: 13px; font-weight: 600; margin-top: 6px; }
.monitor-status { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

/* ===== Display version chips ===== */
.dv-bar { display: flex; gap: 10px; flex-wrap: wrap; }

.dv-chip {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dv-chip:hover { border-color: var(--accent-2); }
.dv-chip.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dv-lbl { font-size: 13px; font-weight: 600; }
.dv-live { font-size: 11px; color: var(--text-mute); }

/* ===== Template cards ===== */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

.tpl-card {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
}

.tpl-card:hover { border-color: var(--accent-2); }
.tpl-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tpl-preview { height: 80px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; }
.tpl-name { font-size: 13px; font-weight: 600; }
.tpl-desc { font-size: 11px; color: var(--text-mute); margin-top: 4px; }

/* ===== Banner sequence ===== */
.banner-seq { display: flex; flex-direction: column; gap: 8px; }

.banner-seq-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
}

.drag-handle { cursor: grab; color: var(--text-mute); }
.banner-seq-name { flex: 1; font-size: 13px; }

/* ===== Campaign form: type picker + product summary ===== */
.type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }

/* Each option is a click target (onSelectType) — border + pointer cursor so that reads
   visually, matching the .src-prod-item "selectable card" convention used elsewhere.
   Resting state uses --border-hi (not --border, which is only 7% opacity and reads as
   "no border at all" against the white card background) so every card looks boxed,
   not just the active one. */
.type-opt { border: 1px solid var(--border-hi); border-radius: 9px; padding: 12px; cursor: pointer; transition: all .15s; }
.type-opt:hover { border-color: #111; background: var(--s2); }
.type-opt.active { border-color: #111; background: var(--s1); }

.type-icon { font-size: 22px; }
.type-lbl { font-size: 13px; font-weight: 600; margin-top: 6px; }
.type-desc { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

/* ===== Reward Redemption catalogue grid (Membership · Promotion & Campaign) ===== */
.rw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rw-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rw-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.rw-badges { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rw-img { height: 90px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: var(--panel-2); border-radius: 8px; }
.rw-name { font-size: 14px; font-weight: 600; color: var(--text); }
.rw-desc { font-size: 12px; color: var(--text-mute); }
.rw-value-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rw-pts { background: rgba(96, 165, 250, 0.15); color: #1565c0; padding: 3px 8px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.rw-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; font-size: 12px; color: var(--text-mute); }
.rw-actions { display: flex; gap: 6px; }
.badge-limited { background: #fee2e2; color: #b91c1c; }

.prod-sel-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sel-count { font-size: 12px; color: var(--text-mute); }
.sum-list { display: flex; flex-direction: column; gap: 8px; }
.sum-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.sum-lbl { color: var(--text-dim); }
.sum-val { color: var(--text); font-weight: 500; }

/* ===== Two-column layouts (campaign form / detail) ===== */
.pdp-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }

/* Campaign form only (.sm-pane): position:sticky alone did nothing because .pdp-layout's
   grid items are align-items:start (natural height) — .pdp-right had no scroll container
   taller than itself to stick within, since the whole pane just grows with the page.
   Same "pane fills the viewport, columns scroll inside the card" technique already used
   by .env-setup-pane/.pe-pane: give the pane a bounded height, stretch both grid columns
   to fill it, and let only the (much taller) left column scroll internally. Scoped to
   .sm-pane so Product Detail's .pdp-layout (a different page, natural-height by design)
   is untouched. 64px = .sm-main's 32px top+bottom padding, same convention as .env-setup-pane. */
.sm-pane { height: calc(100vh - var(--hh) - 64px); min-height: 480px; display: flex; flex-direction: column; }
.sm-pane .pane-hdr { flex-shrink: 0; }
.sm-pane .pdp-layout { flex: 1; min-height: 0; align-items: stretch; }
.sm-pane .pdp-left { overflow-y: auto; min-height: 0; padding-right: 4px; }
.sm-pane .pdp-right { overflow-y: auto; min-height: 0; }

/* ===== Page editor (mock pane-page-editor: one connected card, 3 columns) =====
   `pe-*` is used ONLY by homepage-editor.ts, so these mirror the mock 1:1.
   The pane fills the viewport so each column scrolls inside the card. */
/* Full-bleed: cancel .content-main's 32/40 padding so the palette touches the
   topbar and sidebar (mock: pane-page-editor has padding:0). */
.pe-pane { margin: -32px -40px; height: calc(100vh - var(--hh)); display: flex; flex-direction: column; }
.pe-layout {
    display: grid;
    grid-template-columns: 170px 1fr 210px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--s1);
}
.pe-mid-palette { border-right: 1px solid var(--border); background: var(--s2); display: flex; flex-direction: column; overflow: hidden; min-height: 0; padding: 0; }
.pe-mid-hdr-sm { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); padding: 12px 14px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pe-palette { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px; overflow-y: auto; flex: 1; min-height: 0; }
.pe-pal-group-lbl { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
/* 3 columns, not the mock's 4: at a 170px palette a 4-col `1fr` grid cannot shrink
   below the min-content of names like "Collection"/"Countdown", so it overflowed
   horizontally and clipped every 4th tile (CTA Button / Fixed / Divider).
   `minmax(0,1fr)` lets the tracks shrink; overflow-wrap keeps long words inside. */
.pe-pal-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pe-pal-item { min-width: 0; background: var(--s1); border: 1px solid var(--border); border-radius: 7px; padding: 8px 3px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: all .15s; }
.pe-pal-item:hover { border-color: var(--accent); background: var(--s2); }
.pe-pal-ico { font-size: 16px; color: var(--t2); line-height: 1; }
.pe-pal-name { font-size: 9.5px; color: var(--t2); text-align: center; line-height: 1.2; overflow-wrap: anywhere; }

.pe-mid { display: flex; flex-direction: column; overflow: hidden; min-height: 0; border-right: 1px solid var(--border); background: var(--bg); }
.pe-mid-hdr { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; flex-shrink: 0; background: var(--s1); }
.pe-page-name { border: none; outline: none; font-size: 16px; font-weight: 600; color: var(--t1); background: transparent; width: 100%; }
.pe-section-lbl { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); padding: 10px 18px 6px; flex-shrink: 0; }
/* Page Settings + Active Modules share ONE scroll region so neither gets clipped. */
.pe-mid-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.pe-active-mods { display: flex; flex-direction: column; gap: 5px; padding: 0 14px 14px; }
.pe-mod-row { display: flex; align-items: center; gap: 8px; background: var(--s1); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; transition: all .15s; }
.pe-mod-row:hover { border-color: var(--border-hi); }
.pe-mod-drag { color: var(--t3); cursor: grab; font-size: 14px; flex-shrink: 0; }
.pe-mod-info { flex: 1; }
.pe-mod-name { font-size: 12.5px; font-weight: 500; color: var(--t1); }
.pe-mod-sub { font-size: 10.5px; color: var(--t3); margin-top: 1px; }
.pe-mod-actions { display: flex; gap: 4px; align-items: center; }
.pe-icon-btn { background: transparent; border: 1px solid var(--border-hi); border-radius: 5px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; color: var(--t2); transition: all .15s; }
.pe-icon-btn:hover { background: var(--s3); color: var(--t1); }
.pe-icon-btn.danger:hover { background: #fce4ec; color: #c62828; border-color: rgba(198, 40, 40, .2); }

/* Bottom Nav tab icon-upload button (issue #90) — click to open the shared hidden file input. */
.nav-tab-icon { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border-hi); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; overflow: hidden; flex-shrink: 0; }
.nav-tab-icon img { width: 100%; height: 100%; object-fit: cover; }

.pe-right { background: var(--s2); display: flex; flex-direction: column; align-items: center; padding: 14px 10px; overflow-y: auto; min-height: 0; gap: 10px; }
.pe-preview-lbl { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); flex-shrink: 0; }
/* Mock's segmented toggle is black-on-white; the shared .unit-toggle uses accent. */
.pe-pane .unit-toggle button.on { background: #111; color: #fff; font-weight: 500; }

/* Version chips (mock .version-btn) — also used by the display-schedule bar. */
.version-btn { background: var(--s3); border: 1px solid var(--border-hi); border-radius: 5px; padding: 3px 10px; font-size: 11px; color: var(--t2); cursor: pointer; white-space: nowrap; transition: all .15s; }
.version-btn:hover { background: var(--s2); color: var(--t1); }
.version-btn.active { background: #111; color: #fff; border-color: #111; }
.version-btn.version-add { background: transparent; border-style: dashed; color: var(--t3); }
.version-btn.version-add:hover { background: var(--s2); color: var(--t1); }

/* Version chip wrapper + delete (✕) affordance (issue #70). */
.version-chip { display: flex; align-items: stretch; }
.version-chip .version-btn { border-radius: 5px 0 0 5px; }
.version-x {
    background: var(--s3); border: 1px solid var(--border-hi); border-left: none;
    border-radius: 0 5px 5px 0; width: 20px; display: flex; align-items: center;
    justify-content: center; font-size: 9px; color: var(--t3); cursor: pointer;
    transition: all .15s;
}
.version-x:hover { background: #fce4ec; color: #c62828; border-color: rgba(198, 40, 40, .2); }

/* Module config slide-over (mock .mod-cfg-*) — docks to the right edge. */
.mod-cfg-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .3); display: flex; justify-content: flex-end; z-index: 300; }
.mod-cfg-panel { width: 380px; background: #fff; height: 100%; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0, 0, 0, .12); overflow: hidden; }
.mod-cfg-hdr { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--t1); }
.mod-cfg-body { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.mod-cfg-ft { padding: 16px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.mod-cfg-x { background: transparent; border: none; font-size: 16px; cursor: pointer; color: var(--t2); line-height: 1; }
.mod-cfg-grp { font-size: 11.5px; font-weight: 600; color: var(--t2); margin: 12px 0 6px; }

/* Lightweight text-input prompt modal — replaces native window.prompt() so the
   browser's own dialog chrome (which shows the host's IP:port) never appears. */
.prompt-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; z-index: 400; }
.prompt-modal { width: 320px; background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, .18); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.prompt-modal-title { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.prompt-modal-ft { display: flex; justify-content: flex-end; gap: 8px; }

/* Product-source tabs + manual picker */
.src-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.src-tab { padding: 7px 14px; font-size: 12.5px; color: var(--t3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
.src-tab.active { color: var(--t1); border-bottom-color: var(--t1); }
.src-prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 200px; overflow-y: auto; margin-top: 8px; }
.src-prod-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 11.5px; color: var(--t2); transition: all .15s; }
.src-prod-item:hover { border-color: var(--border-hi); }
.src-prod-item.selected { border-color: #111; background: #f8f8f8; color: var(--t1); }
.src-prod-ini { width: 26px; height: 26px; background: var(--s3); border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 600; color: var(--t3); }
.grid-btn { background: var(--s3); border: 1px solid var(--border-hi); border-radius: 5px; width: 36px; height: 28px; font-size: 12px; color: var(--t2); cursor: pointer; transition: all .15s; }
.grid-btn.active { background: #111; color: #fff; border-color: #111; }

/* Display Style selector (mock 2x2 icon cards) — Active Campaigns / Rewards Shelf config (issue #87). */
.dstyle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.dstyle-card { border: 1.5px solid var(--border); border-radius: 8px; padding: 12px 10px; text-align: center; cursor: pointer; transition: all .15s; }
.dstyle-card:hover { border-color: var(--border-hi); }
.dstyle-card.active { border-color: #111; background: #f8f8f8; }
.dstyle-ico { font-size: 16px; margin-bottom: 6px; color: var(--t2); }
.dstyle-name { font-size: 12px; font-weight: 600; color: var(--t1); }
.dstyle-sub { font-size: 10px; color: var(--t3); margin-top: 2px; }

/* ===== Phone preview ===== */
.phone-wrap { display: flex; justify-content: center; }

.phone-frame {
    width: 240px;
    /* mock: 6px solid #111 — thinner bezel than the old 8px #2a2f38 */
    border: 6px solid #111;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.phone-status { height: 24px; background: #000; }
.phone-content { min-height: 380px; padding: 12px; }

/* ===== Mini-app environment (nav | config panel | live preview) =====
   One connected card split into 3 columns (mock pane-env-setup): distinct
   grey nav/preview flanks around a lighter central panel. */
.env-layout { display: grid; grid-template-columns: 200px 1fr 240px; gap: 0; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; align-items: stretch; }
.env-nav { background: var(--s2); border-right: 1px solid var(--border); padding: 8px 0; overflow-y: auto; min-height: 0; }
.env-nav-grouplbl { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); padding: 10px 16px 6px; }
.env-panel { background: var(--s1); padding: 0; overflow-y: auto; min-height: 0; }
.env-preview { background: var(--s2); border-left: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow-y: auto; min-height: 0; }

/* Setup pane fills the viewport so each of the 3 columns scrolls INSIDE the card
   (mock: pane height:100% + overflow:hidden), instead of growing the page.
   Anchored to the viewport, not height:100% — the `:if` wrapper and the
   <home-environment> custom element in between are both auto-height, so a
   percentage height would not resolve. 64px = .content-main's 32px y-padding. */
.env-setup-pane { height: calc(100vh - var(--hh) - 64px); min-height: 480px; display: flex; flex-direction: column; }
.env-setup-pane .pane-hdr { flex-shrink: 0; }
.env-setup-pane .env-layout { flex: 1; min-height: 0; }
.env-preview-lbl { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
/* cfg-* rows mirror the mock pane-env-setup: bordered flex rows (label left,
   control right), grey uppercase group-title strips, header-strip section title.
   Used only by homeenvironment.ts (shared home + content Setup). */
.cfg-sec-title { font-size: 13px; font-weight: 600; color: var(--text); padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.cfg-group { border-bottom: 1px solid var(--border); }
.cfg-group-title { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); padding: 10px 16px 6px; background: var(--s2); }
.cfg-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); gap: 12px; min-height: 44px; }
.cfg-row:last-child { border-bottom: none; }
.cfg-label { flex: 1; display: block; margin: 0; font-size: 12.5px; color: var(--text); }
.cfg-hint { font-size: 10.5px; color: var(--text-mute); margin-top: 2px; font-weight: 400; }
.cfg-inp { background: var(--bg); border: 1px solid var(--border-hi); border-radius: 6px; padding: 5px 8px; font-size: 12px; color: var(--text); outline: none; }
.cfg-inp:focus { border-color: #aaa; }
.cfg-upload-mini { background: var(--s3); border: 1px solid var(--border-hi); border-radius: 6px; padding: 5px 12px; font-size: 11.5px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.cfg-upload-mini:hover { background: var(--s2); color: var(--text); }
.cfg-color { display: flex; align-items: center; gap: 6px; }
.cfg-swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); }
.cfg-hex { width: 90px; font-size: 11px; color: var(--text); font-family: monospace; }
/* Badge Configuration sub-tabs + item cards (mock env-badgecfg) */
.badge-sub-tab { padding: 8px 16px; font-size: 12.5px; color: var(--text-mute); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; transition: all .15s; }
.badge-sub-tab:hover { color: var(--text-dim); }
.badge-sub-tab.active { color: var(--text); border-bottom-color: var(--text); }
.badge-item-card { border-bottom: 1px solid var(--border); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.badge-item-hdr { display: flex; align-items: center; justify-content: space-between; }
.badge-item-name { font-size: 13px; font-weight: 600; color: var(--text); }
.badge-item-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--s2); border-radius: 8px; }
.radio-opt { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
/* Buttons section cards (mock env-buttons) */
.btn-cfg-card { border-bottom: 1px solid var(--border); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.btn-cfg-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
/* Navigation category-tab rows (mock env-navigation) */
.nav-tab-row { display: flex; align-items: center; gap: 8px; background: var(--s1); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; }
.nav-tab-type { font-size: 10px; background: var(--s3); border: 1px solid var(--border-hi); border-radius: 4px; padding: 2px 7px; color: var(--text-mute); cursor: pointer; white-space: nowrap; }
.nav-tab-type.active-type { background: #111; color: #fff; border-color: #111; }

/* =====================================================================
   SHARED FOUNDATION for the other 14 module shells (oms, sales, browse,
   inventory, membership, delivery, ...). Covers the sidebar+main frame,
   sidebar internals, and generic primitives so every shell is legible.
   Module-specific visuals (tiers, storefront, delivery flow, dashboards)
   still need per-module passes.
   ===================================================================== */

/* ----- Shell frame (all wrappers reuse the home layout) ----- */
/* Module shells fill the .cknui area under the topbar (not the whole viewport).
   NOTE: `.app` is intentionally excluded here — it is the platform rail button. */
.oms-app, .browse-app, .content-app, .customer-app, .delivery-app,
.inv-app, .membership-app, .pms-app, .product-app, .purchase-app,
.sales-app, .sm-app, .staff-app, .supplier-app, .campaign-app,
.layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.oms-sidebar, .browse-sidebar, .content-sidebar, .mem-sidebar,
.product-sidebar, .sm-sidebar, .sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.oms-main, .browse-main, .content-main, .mem-main, .product-main,
.sm-main, .main {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px;
}

/* ----- Sidebar internals ----- */
.sb-scroll { display: flex; flex-direction: column; overflow-y: auto; padding: 4px 0; }

.mod-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.mod-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.mod-lbl { font-size: 17px; font-weight: 600; }

.sb-brand { padding: 18px 20px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 600; }
.sb-brand-lbl { font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; }

.sb-branch { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.sb-branch-eye { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); }
.sb-branch-name { font-size: 13px; font-weight: 600; margin-top: 3px; }
.sb-branch-sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.branch-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); font-size: 11px; }

.sb-foot, .sb-bot { margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-mute); }
.sb-grp { padding: 6px 10px; }

/* Alternate nav item styles (some shells use .nav-item instead of .mi) */
.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 20px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dim);
}

.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--panel-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.nav-lbl { flex: 1; }
.nav-ct { font-size: 11px; color: var(--text-mute); }

.mi-count {
    font-size: 11px;
    background: var(--panel-2);
    color: var(--text-dim);
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: auto;
}

.mi-count.hot, .hot { background: rgba(244, 114, 182, 0.2); color: #f472b6; }
.mi-tag { font-size: 10px; color: var(--text-mute); }

.wordmark, .wm { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.wm-main { font-size: 16px; font-weight: 600; }
.wm-sub { font-size: 11px; color: var(--text-mute); }
.brand { font-size: 16px; font-weight: 600; }

/* ----- Generic pane container + heading ----- */
.pane, .page { max-width: 1200px; }

.pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.pane-desc, .pane-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.ptitle, .ph-title { font-size: 22px; font-weight: 600; }
.ph-eye { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 6px; }
.ph-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.sec-label, .sec-title { font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 18px 0 10px; }

/* ----- Card sub-parts ----- */
.card-h, .card-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-b { font-size: 13px; color: var(--text-dim); }

/* ----- Grids ----- */
.grid, .pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ----- Buttons (generic) ----- */
.btn, .primary {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover, .primary:hover { opacity: .85; }

.btn-out {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    cursor: pointer;
}

.btn-out:hover { background: var(--panel-2); }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px; }
.iconbtn { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; cursor: pointer; color: var(--text); }

/* ----- Pills / tags / chips / dots ----- */
.pill, .tag, .chip, .term-tag, .attrtags, .size-chip, .soon-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-dim);
}

/* issue #158: browse-pane product cards put the tag on the same row as the name */
.browse-pane .meta .name-row { display: flex; align-items: flex-start; gap: 6px; }
.browse-pane .meta .name-row .tag { flex: none; margin-top: 1px; }
.browse-pane .meta .name-row .pname { flex: 1; min-width: 0; }

/* issue #166: order-confirmation "Order detail"/"Payment summary" rows (browseconfirm.ts) —
   ported from the mini-app popup's .mskpop .od/.od-row rules (miniapp_popup.css), remapped
   onto default.css's own design tokens since .browse-pane doesn't inherit .mskpop's vars. */
.browse-pane .od { margin-bottom: 24px; }
.browse-pane .od h2 { font-size: 13px; font-weight: 600; letter-spacing: .3px; margin-bottom: 13px; }
.browse-pane .od-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; margin-bottom: 11px; }
.browse-pane .od-row .k { color: var(--text-dim); letter-spacing: .2px; }
.browse-pane .od-row .v { color: var(--text); font-weight: 500; text-align: right; }
.browse-pane .od-row .v.u { text-decoration: underline; text-underline-offset: 2px; }
.browse-pane .od-row.disc .v { color: #dc2626; }
.browse-pane .od-row.net { border-top: 1px solid var(--border); padding-top: 11px; margin-top: 2px; }
.browse-pane .od-row.net .k, .browse-pane .od-row.net .v { font-weight: 600; color: var(--text); }

.dot, .seg-dot, .avail-dot, .tl-dot, .mtl-dot, .yn-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-mute);
}

.badge-out { background: #fce4ec; color: #b71c1c; }
.badge-adj { background: #fff8e1; color: #e65100; }
.badge-bin { background: #f5f5f5; color: #555; border: 1px solid var(--border); font-family: ui-monospace, monospace; font-size: 10px; }

/* ----- Toolbar / tabs / search ----- */
.toolbar, .filter-row, .action-wrap, .qty-row, .count-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tabs, .assist-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.atab { padding: 9px 16px; font-size: 13px; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.atab.active { color: var(--accent); border-bottom-color: var(--accent); }
.atab-ct { font-size: 11px; color: var(--text-mute); }

.search { position: relative; display: flex; align-items: center; }
/* Bordered search container holding an inline input (spec: mockup .search-wrap) */
.search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--s1);
    border: 1px solid var(--border-hi);
    border-radius: 8px;
    padding: 0 12px;
    height: 36px;
    color: var(--text-mute);
}
.search-wrap .search-inp {
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    flex: 1;
    height: 100%;
}
.search-inp, .filt-sel, .filter-lbl select {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 13px;
}

/* ----- Text helpers ----- */
.muted, .dim, .sub, .note-inline, .h-note, .meta, .lbl {
    color: var(--text-mute);
    font-size: 12px;
}

/* Boxed inline note / callout strip (spec: mockup .note + .note.purple) */
.note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff8e1;
    border: 1px solid rgba(245, 127, 23, .25);
    border-radius: 9px;
    padding: 11px 15px;
    font-size: 12px;
    color: #7a5c00;
}
.note.purple {
    background: rgba(167, 139, 250, .08);
    border-color: rgba(167, 139, 250, .3);
    color: #5b4a91;
}

.strong { color: var(--text); font-weight: 600; }
.mono { font-family: monospace; }
.val { color: var(--text); }

/* ----- Key/value + field rows ----- */
.kv-row, .field, .toggle-row, .opt, .zone-line, .pp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.toggle-lbl { font-size: 13px; }
.toggle-hint { font-size: 11px; color: var(--text-mute); }

/* Simple on/off toggle look */
.tog, .toggle {
    width: 38px;
    height: 20px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.tog-th { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-mute); }
.yn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 20px; }
.yn-yes { background: #e8f5e9; color: #2e7d32; }
.yn-no { background: var(--s3); color: var(--t3); }
.yn-yes .yn-dot { background: #2e7d32; }
.yn-no .yn-dot { background: var(--t3); }

/* ----- Coming-soon placeholder panes ----- */
.coming-soon { text-align: center; padding: 60px 20px; color: var(--text-mute); }
.coming-soon-icon { font-size: 40px; }
.coming-soon-title { font-size: 18px; font-weight: 600; color: var(--text); margin-top: 12px; }
.coming-soon-sub { font-size: 13px; margin-top: 6px; }

/* ----- Toggle on-state (shared by all .tog switches) ----- */
.tog { transition: background .15s, border-color .15s; }
.tog-th { transition: left .15s, background .15s; }
.tog.active { background: var(--accent); border-color: var(--accent); }
.tog.active .tog-th { left: 20px; background: #fff; }
.badge-inactive { background: #fce4ec; color: #b71c1c; }

/* ===== Product Detail (pane-product-detail) ===== */
.variant-hint { font-size: 12px; color: var(--text-mute); margin-bottom: 14px; }
.var-lbl { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.var-toggles { display: flex; gap: 28px; margin-bottom: 16px; }
.var-toggle { display: flex; align-items: center; gap: 10px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Sizes: tags + inline add-input inside one bordered field box. */
.tag-box {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 10px 12px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 10px;
}
.tag-box .tag {
    display: inline-flex; align-items: center;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--text);
}
.tag-x { margin-left: 6px; cursor: pointer; color: var(--text-mute); }
.tag-x:hover { color: var(--text); }
.tag-inp {
    flex: 1; min-width: 120px; background: transparent;
    border: none; padding: 4px 6px; color: var(--text); font-size: 13px;
}
.tag-inp:focus { outline: none; }
.color-rows { display: flex; flex-direction: column; gap: 6px; }
.color-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.13); border-radius: 6px;
}
.color-swatch {
    width: 30px; height: 28px; flex: none;
    border-radius: 5px; border: 1px solid rgba(0,0,0,0.13);
}
input.color-swatch { padding: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
input.color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
input.color-swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
input.color-swatch::-moz-color-swatch { border: none; border-radius: 4px; }
.color-name { flex: 1; height: 30px; padding: 4px 8px; font-size: 12px; min-width: 60px; }
.swatch-img {
    width: 30px; height: 28px; flex: none;
    border: 1px dashed rgba(0,0,0,0.13); border-radius: 5px;
    background: #fff; color: #9a9a9a;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.swatch-img:hover { border-color: var(--accent-2); color: var(--text); }
.color-imgs { font-size: 10.5px; color: #9a9a9a; white-space: nowrap; }
.mini-x {
    width: 22px; height: 22px; flex: none; line-height: 1;
    border: none; background: none; color: #9a9a9a;
    font-size: 16px; cursor: pointer; border-radius: 4px;
}
.mini-x:hover { background: #fce4ec; color: #c62828; }
.synced-tag { display: inline-block; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; color: #9a9a9a; background: #ececec; border-radius: 10px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.color-add { margin-top: 10px; }

/* Rich-text editor (Description & Care, Size Guide) — matches retailos mockup */
.rte { border: 1px solid rgba(0,0,0,0.13); border-radius: 8px; overflow: hidden; background: #fff; }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 6px 8px; background: #fafafa; border-bottom: 1px solid #e5e5e5; }
.rte-btn { min-width: 28px; height: 28px; border: 1px solid rgba(0,0,0,0.13); background: #fff; border-radius: 6px; font-size: 12px; color: #555; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.rte-btn:hover { background: #f0f0f0; color: #111; }
.rte-btn b { font-weight: 700; }
.rte-btn i { font-style: italic; }
.rte-btn u { text-decoration: underline; }
.rte-sel { height: 28px; border: 1px solid rgba(0,0,0,0.13); border-radius: 6px; font-size: 11px; color: #555; background: #fff; padding: 0 4px; cursor: pointer; outline: 0; }
.rte-color { width: 30px; height: 28px; border: 1px solid rgba(0,0,0,0.13); border-radius: 6px; padding: 1px; cursor: pointer; background: #fff; }
.rte-div { width: 1px; height: 18px; background: rgba(0,0,0,0.13); margin: 0 3px; }
.rte-body { min-height: 96px; padding: 10px 12px; font-size: 12.5px; line-height: 1.6; color: #111; outline: 0; overflow-y: auto; max-height: 280px; }
.rte-body:empty:before { content: attr(data-ph); color: #999; }
.rte-body table { border-collapse: collapse; margin: 6px 0; }
.rte-body table td { border: 1px solid rgba(0,0,0,0.13); padding: 5px 9px; min-width: 54px; }
.rte-body .rte-imgph, .rte-body img { max-width: 100%; }
.rte-imgph { display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 90px; background: #f0f0f0; color: #999; border-radius: 6px; font-size: 11px; margin: 4px 0; }
.vtbl-wrap { border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; }
.vtbl-wrap .inp { border: none; border-radius: 0; background: transparent; }

/* Sub-SKUs table — compact, matches retailos .vtbl */
.vtbl { width: 100%; border-collapse: collapse; }
.vtbl th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: #999; font-weight: 600; padding: 8px 8px; background: #fafafa; border-bottom: 1px solid var(--border); white-space: nowrap; }
.vtbl td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 12px; }
.vtbl tbody tr:last-child td { border-bottom: none; }
.vtbl .v-lbl { font-weight: 500; color: #111; white-space: nowrap; font-size: 12px; }
.vtbl td .v-inp { height: 28px; padding: 3px 7px; font-size: 12px; width: 100%; min-width: 90px; border: 1px solid rgba(0,0,0,0.13); border-radius: 6px; background: #fff; }
.vtbl td .v-sel { height: 28px; padding: 3px 6px; font-size: 12px; min-width: 78px; border: 1px solid rgba(0,0,0,0.13); border-radius: 6px; background: #fff; }
.vtbl .v-stock { color: #999; white-space: nowrap; }
.syncpill { font-size: 8px; background: #f0f0f0; color: #999; padding: 1px 6px; border-radius: 10px; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.gallery-head { display: flex; align-items: center; justify-content: space-between; }
.color-count { font-size: 12px; color: var(--text-mute); }
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 8px; margin-top: 12px;
}
.gtile { display: flex; flex-direction: column; gap: 4px; }
.gthumb {
    aspect-ratio: 1 / 1; border-radius: 6px; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: rgba(0,0,0,.22); position: relative;
}
.gthumb .gx {
    position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
    border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
    font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.gtile .ginp {
    font-size: 10.5px; padding: 3px 4px; border: 1px solid rgba(0,0,0,0.13);
    border-radius: 4px; background: #fff; color: #555; width: 100%; outline: 0;
}
.gadd {
    align-items: center; justify-content: center; border: 1.5px dashed rgba(0,0,0,0.13);
    border-radius: 6px; aspect-ratio: 1 / 1; cursor: pointer; color: #999;
    font-size: 10.5px; gap: 3px; display: flex; flex-direction: column;
}
.gadd:hover { border-color: #aaa; color: #111; background: #fafafa; }

/* Media — grouped-by-colour layout (Shared · all colours, then one column per colour) */
.gallery-groups { display: flex; gap: 14px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
.gallery-group { flex: 0 0 auto; width: 168px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.gallery-group-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.gallery-group-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; }
.gallery-group-lbl { font-size: 12px; font-weight: 600; color: #111; flex: 1; }
.gallery-group-count { font-size: 10.5px; color: var(--text-mute); }
.gallery-group-grid { display: flex; flex-direction: column; gap: 10px; }
.gtile-badge {
    position: absolute; top: 3px; left: 3px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px;
    line-height: 16px; text-align: center;
}
.gtile-ratio {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; text-align: center;
    background: rgba(0,0,0,.5); color: #fff; font-size: 9px; letter-spacing: .02em;
}
.gtile-nav { display: flex; justify-content: space-between; margin-top: 2px; }
.gtile-nav-btn {
    border: 1px solid rgba(0,0,0,0.13); background: #fff; border-radius: 4px;
    width: 22px; height: 20px; font-size: 12px; line-height: 1; cursor: pointer; color: #555;
}
.gtile-nav-btn:hover { border-color: #aaa; color: #111; background: #fafafa; }
.gadd-empty { font-style: italic; color: #999; font-size: 10.5px; text-align: center; padding: 0 6px; cursor: default; }
.gallery-group-grid .gadd { aspect-ratio: auto; padding: 14px 6px; }
.sg-section { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; }
.sg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sg-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sg-tbl th, .sg-tbl td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.sg-tbl th { color: var(--text-dim); font-weight: 600; }
.sg-tbl input { width: 100%; background: transparent; border: none; color: var(--text); font-size: 12.5px; }
.unit-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.unit-toggle button {
    background: var(--panel-2); border: none; color: var(--text-dim);
    font-size: 11.5px; padding: 5px 11px; cursor: pointer;
}
.unit-toggle button.on { background: var(--accent-2); color: #0f1216; font-weight: 600; }
.rte {
    min-height: 68px; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 9px 12px; color: var(--text); font-size: 13px;
}
.rte:empty::before { content: attr(data-ph); color: var(--text-mute); }

/* ===== Sales module shared classes (mirror sales.html) ===== */
.chart-box {
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
    height: 200px; display: flex; align-items: center; justify-content: center;
    color: var(--text-mute); font-size: 12px; overflow: hidden;
}
.chart-box::after { content: "◍ chart"; letter-spacing: 1px; }
.chart-box.sm { height: 160px; }
.chart-box.xs { height: 116px; }
/* When a real Chart.js canvas is mounted (G1), show it and drop the placeholder.
   Chart.js (responsive + maintainAspectRatio:false) needs its canvas's DIRECT parent
   to be a definite-height, position:relative BLOCK — not a flex box. With the base
   `display:flex; align-items:center` the canvas collapses to ~0 cross-size and renders
   invisibly, so override to the mockup's container pattern (inventory.html .chart-box). */
.chart-box:has(canvas) { background: transparent; border: none; padding: 0; display: block; position: relative; }
.chart-box:has(canvas)::after { content: none; }
.chart-box canvas { display: block; }
/* Chart legend row (mirror inventory.html) */
.legend-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10.5px; color: var(--t3); margin-top: 8px; }
.lg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.num { text-align: right; }
.cnt {
    display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--border);
    font-size: 10.5px; color: var(--text-dim); margin-left: 6px;
}
.cnt.hot { background: rgba(96, 165, 250, 0.18); color: var(--accent-2); border-color: transparent; }
/* Salespeople leaderboard rank medal (mirror sales.html .sl-rank). */
.sl-rank { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--panel-2); color: var(--text-dim); }
.sl-rank.g1 { background: #fff3cd; color: #b8860b; }
.sl-rank.g2 { background: #eceff1; color: #607d8b; }
.sl-rank.g3 { background: #fbe9e7; color: #bf5b3a; }
.badge-free { background: #fff8e1; color: #f57f17; }
.badge-ret { background: #f3e5f5; color: #6a1b9a; }
.status { font-size: 12px; color: var(--text-dim); }
.blue { color: var(--accent-2); }
.pos { font-size: 11px; color: var(--text-mute); }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.tl-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.tl-item:last-child { border-bottom: none; }
.tl-body { flex: 1; }
.tl-label { font-size: 13px; color: var(--text); }
.tl-meta { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.pnl-cell { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; }
.pnl-lbl { font-size: 11.5px; color: var(--text-mute); }
.pnl-val { font-size: 16px; font-weight: 600; color: var(--text); }
.detail-meta-cell { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; }
.detail-meta-lbl { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.detail-meta-val { font-size: 13px; color: var(--text); }
.info-tip { color: var(--text-mute); font-size: 11px; cursor: help; }
.pp-pill {
    padding: 3px 11px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--panel-2); color: var(--text-dim); font-size: 11.5px; cursor: pointer;
}
.pp-pill.active { background: var(--accent-2); color: #0f1216; border-color: transparent; font-weight: 600; }
.period-btn.active { background: var(--accent-2); color: #0f1216; border-color: transparent; }
/* Membership dashboards mirror the reference period-source format: solid black active
   pill (issue #107), not the default accent blue above. */
.mem-pane .period-btn.active { background: var(--t1); color: #fff; border-color: var(--t1); }
/* Dashboard filter dropdowns are short (inline height:30px). The shared .filt-sel rule
   adds 8px top/bottom padding which, with border-box, clips the label — mirror the
   mock's zero vertical padding so the text stays vertically centred. */
.sales-perf .filt-sel { padding: 0 10px; }

/* Sortable table headers (mirror demo Tabulator): clickable, show ▲/▼ on the active column. */
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover { color: var(--text); }

/* Store Management (mirror sales.html): note callout colour variants + progress bars. */
.note.blue { background: rgba(59, 130, 246, .06); border-color: rgba(59, 130, 246, .2); color: #1e40af; }
.note.red { background: #fce4ec; border-color: rgba(198, 40, 40, .18); color: #b71c1c; }
.stock-bar { height: 5px; background: rgba(0, 0, 0, .07); border-radius: 3px; overflow: hidden; margin-top: 9px; }
.stock-fill { height: 100%; background: #2e7d32; border-radius: 3px; }

/* Tax Documents detail modal (mirror sales.html openTaxDoc): rich sectioned layout —
   type/status sub-badges, 4-col meta grid, "Tax Control Flow" node cards, boxed
   breakdown rows, audit table. Scoped to .sales-tax-docs so the shared .detail-meta*
   / .kv-row keep their existing form elsewhere. flex-shrink:0 stops the flex-column
   modal-body from squashing the sections. */
.sales-tax-docs .detail-sub { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.sales-tax-docs .detail-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.sales-tax-docs .detail-meta-cell { display: block; padding: 12px 16px; border-right: 1px solid var(--border); }
.sales-tax-docs .detail-meta-cell:last-child { border-right: none; }
.sales-tax-docs .detail-meta-lbl { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); margin-bottom: 4px; }
.sales-tax-docs .detail-meta-val { font-size: 13px; font-weight: 500; color: var(--t1); }
.sales-tax-docs .note { flex-shrink: 0; }
.sales-tax-docs .doc-section { border: 1px solid var(--border); border-radius: 9px; background: var(--s1); overflow: hidden; flex-shrink: 0; }
.sales-tax-docs .doc-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--border); background: var(--s2); }
.sales-tax-docs .doc-section-title { font-size: 12px; font-weight: 600; color: var(--t1); }
.sales-tax-docs .doc-section-sub { font-size: 10.5px; color: var(--t3); margin-top: 1px; }
.sales-tax-docs .doc-section-body { padding: 13px; display: flex; flex-direction: column; gap: 10px; }
.sales-tax-docs .doc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sales-tax-docs .doc-node { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--s2); min-height: 68px; }
.sales-tax-docs .doc-node.done { background: #e8f5e9; border-color: rgba(46, 125, 50, .22); }
.sales-tax-docs .doc-node.cur { background: #e3f2fd; border-color: rgba(21, 101, 192, .22); }
.sales-tax-docs .doc-node.blocked { background: #fff8e1; border-color: rgba(245, 127, 23, .25); }
.sales-tax-docs .doc-node-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.sales-tax-docs .doc-node-main { font-size: 12.5px; font-weight: 600; color: var(--t1); margin-top: 4px; }
.sales-tax-docs .doc-node-sub { font-size: 10.5px; color: var(--t3); margin-top: 2px; line-height: 1.35; }
.sales-tax-docs .kv-row { justify-content: space-between; padding: 8px 12px; background: var(--s2); border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; color: var(--t2); }
.sales-tax-docs .kv-row b { color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .sales-tax-docs .doc-flow, .sales-tax-docs .detail-meta { grid-template-columns: 1fr; }
    .sales-tax-docs .detail-meta-cell { border-right: none; border-bottom: 1px solid var(--border); }
    .sales-tax-docs .detail-meta-cell:last-child { border-bottom: none; }
}
.stock-fill.warn { background: #f57f17; }
.stock-fill.bad { background: #c62828; }

/* Toast — button-click feedback popup (mirror sales.html .toast): dark pill, bottom
   centre, fades in on .show. Hosted by the sales-app shell. */
.sales-app .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
    background: #111; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 12.5px;
    opacity: 0; transition: all .3s; pointer-events: none; z-index: 999; white-space: nowrap; max-width: 90%;
}
.sales-app .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----- Table "name + sub-line" cell (shared by ~23 components app-wide) ----- */
.prod-info { display: flex; align-items: center; gap: 10px; }
.prod-thumb {
    width: 34px; height: 34px; border-radius: 8px; background: var(--panel-2);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 600; color: var(--text-dim); flex-shrink: 0;
}
/* Real product photo variant — same box, actual <img> instead of the initials fallback. */
img.prod-thumb { object-fit: cover; }
.prod-name { font-size: 13px; font-weight: 500; color: var(--text); }
.prod-sku { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }

/* ===== Membership module shared classes (mirror membership.html) ===== */
.dash-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.mem-av {
    width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: var(--text-dim); flex-shrink: 0;
}
.mem-pill {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--border);
    font-size: 11px; color: var(--text-dim);
}
.pbar { height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin: 4px 0; }
.pbar > div { height: 100%; border-radius: 999px; background: var(--accent-2); }

/* ----- Revenue by Tier cards (issue #65) ----- */
.rev-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rev-tier-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.rev-tier-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.rev-tier-name { font-size: 14px; font-weight: 600; }
.rev-tier-val { font-size: 16px; font-weight: 600; color: var(--text); }
.rev-tier-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-dim); }
.rev-tier-pct { font-weight: 600; color: var(--text); }
.rev-tier-note { font-size: 12px; margin-top: 6px; }

.tier-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tier-top { padding: 16px; color: #fff; }
.tier-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.tier-perk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.tier-perk svg { color: var(--accent); flex-shrink: 0; }
.tier-badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
}
.seg-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
    transition: border-color 0.15s;
}
.seg-card:hover { border-color: var(--accent-2); }
.mtl-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.mtl-row:last-child { border-bottom: none; }
.mtl-t { font-size: 13px; color: var(--text); }
.mtl-m { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }

/* ----- Membership dashboard: RFM / Tier Migration / Radar / Channels (issue #61) ----- */
.rfm-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 16px; }
.rfm-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--rfm-color, var(--accent-2));
    border-radius: var(--radius);
    padding: 16px 18px;
}
.rfm-name { font-size: 13px; font-weight: 600; color: var(--rfm-color, var(--text)); margin-bottom: 4px; }
.rfm-count { font-size: 24px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.rfm-sub { font-size: 11.5px; color: var(--text-mute); margin-bottom: 10px; }
.rfm-action {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--rfm-color, var(--text-dim));
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 10px;
}

.tier-bars { display: flex; flex-direction: column; }
.tier-bar-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.tier-bar-lbl { flex: 0 0 90px; font-size: 12.5px; color: var(--text-dim); }
.tier-bar-row .pbar { flex: 1; margin: 0; }
.tier-bar-val { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--text); }
.tier-bar-pct { flex: 0 0 40px; text-align: right; font-size: 11.5px; color: var(--text-mute); }

.migration-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.migration-row:last-child { border-bottom: none; }
.migration-lbl { color: var(--text-dim); }
.migration-delta { font-weight: 600; margin-left: auto; }
.migration-delta.up { color: #2e7d32; }
.migration-delta.down { color: #b91c1c; }
.migration-tag { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.migration-tag.up { background: #e8f5e9; color: #2e7d32; }
.migration-tag.down { background: #fce4ec; color: #b71c1c; }
.migration-alert { margin-top: 10px; padding: 10px 12px; background: #fce4ec; color: #b71c1c; border-radius: 8px; font-size: 12px; font-weight: 500; }

.radar-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.radar-row:last-child { border-bottom: none; }
.radar-hdr { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.radar-lbl { color: var(--text); font-weight: 500; }
.radar-away { color: var(--text-mute); font-size: 11.5px; }
.radar-bar { height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin: 4px 0; }
.radar-bar > div { height: 100%; border-radius: 999px; background: var(--text); }
.radar-ftr { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.radar-pct { font-size: 11px; color: var(--text-mute); }
.radar-cta {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
}
.radar-cta:hover { background: var(--panel-2); }

.chan-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12.5px; }
.chan-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--chan-color, var(--accent-2)); }
.chan-lbl { flex: 0 0 110px; color: var(--text-dim); }
.chan-bar { flex: 1; height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.chan-bar > div { height: 100%; border-radius: 999px; background: var(--chan-color, var(--accent-2)); }
.chan-pct { flex: 0 0 40px; text-align: right; font-weight: 600; color: var(--text); }

.forecast-alert {
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff8e1;
    border: 1px solid #f5e2a3;
    border-radius: var(--radius);
}
.forecast-alert-hdr { font-size: 13px; font-weight: 600; color: #7a5c00; margin-bottom: 4px; }
.forecast-alert-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }

/* ----- Environment Setup settings nav (membership) ----- */
.env-nav-eye { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); padding: 4px 10px 8px; }
.env-nav-item { padding: 9px 16px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; border-left: 2px solid transparent; transition: background 0.12s, color 0.12s; }
.env-nav-item:hover { background: var(--s2); color: var(--text); }
.env-nav-item.active { background: var(--s2); color: var(--text); font-weight: 500; border-left: 2px solid #111; }
.env-body { min-height: 240px; }
.icon-lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px; }
.icon-lib-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.icon-lib-key { font-family: monospace; font-size: 10px; color: var(--text-mute); }
.rule-list { display: flex; flex-direction: column; gap: 2px; }

/* ============================================================================
   Platform sidebar = DARK (spec: requirement/core/* .sidebar #1c1c1c) over the
   light content area. Instead of overriding every nav selector, we RE-SCOPE the
   design tokens locally: every descendant that uses var(--text)/var(--panel-2)/
   var(--accent) automatically flips to light-on-dark. One block covers all 8
   sidebar variants used by the shells. */
.browse-sidebar, .content-sidebar, .home-sidebar, .mem-sidebar,
.oms-sidebar, .product-sidebar, .sm-sidebar, .sidebar {
    background: var(--sidebar-bg);
    color: rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    /* local token overrides — the whole subtree reads these */
    --panel: var(--sidebar-bg);
    --panel-2: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.08);
    --border-hi: rgba(255, 255, 255, 0.14);
    --text: rgba(255, 255, 255, 0.9);
    --text-dim: rgba(255, 255, 255, 0.55);
    --text-mute: rgba(255, 255, 255, 0.4);
    --accent: #ffffff;
    --adim: rgba(255, 255, 255, 0.05);
}
/* Elements with no explicit color inherit the light sidebar color above. */
.browse-sidebar .mod-lbl, .content-sidebar .mod-lbl, .home-sidebar .mod-lbl,
.mem-sidebar .mod-lbl, .oms-sidebar .mod-lbl, .product-sidebar .mod-lbl,
.sm-sidebar .mod-lbl, .sidebar .mod-lbl,
.browse-sidebar .sb-brand, .content-sidebar .sb-brand, .home-sidebar .sb-brand,
.mem-sidebar .sb-brand, .oms-sidebar .sb-brand, .product-sidebar .sb-brand,
.sm-sidebar .sb-brand, .sidebar .sb-brand { color: rgba(255, 255, 255, 0.9); }

/* Launcher fills the .cknui area and scrolls internally (home route). */
/* .lz mounts directly under .cknui, which forces display:flex on its children —
   pin the direction to column so the header stacks above the full-width grid. */
.lz { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
      overflow-y: auto; background: var(--bg); }

/* ----- Launcher header (sticky brand bar) ----- */
.lz-hdr {
    position: sticky; top: 0; z-index: 5; flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 32px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.lz-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lz-logo {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, #4f46e5, #a78bfa);
    color: #fff; font-weight: 800; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
}
.lz-brand-name { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.2; }
.lz-brand-sub { font-size: 13px; color: var(--text-dim); line-height: 1.3; }
.lz-hdr-meta {
    font-size: 12px; font-weight: 600; color: var(--text-dim);
    padding: 6px 12px; border: 1px solid var(--border);
    border-radius: 999px; background: var(--s1); white-space: nowrap;
}

/* ----- Launcher body & module groups ----- */
.lz-body { width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 32px 48px; }
.lz-group { margin-bottom: 32px; }
.lz-group-hdr {
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-mute); margin: 0 4px 12px;
}

/* ----- Responsive card grid ----- */
.lz-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.lz-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; border-radius: var(--radius);
    background: var(--s1); border: 1px solid var(--border);
    text-decoration: none; color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lz-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hi);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
.lz-card-ico {
    width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
}
.lz-card-body { min-width: 0; flex: 1; }
.lz-card-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25; }
.lz-card-desc {
    font-size: 12.5px; color: var(--text-dim); line-height: 1.35; margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lz-card-go {
    flex-shrink: 0; color: var(--text-mute); font-size: 18px;
    opacity: 0; transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
}
.lz-card:hover .lz-card-go { opacity: 1; transform: translateX(0); }

/* Disabled module card — greyed, non-interactive (Supplier / Purchasing). */
.lz-card-soon {
    display: none; flex-shrink: 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-mute); padding: 4px 9px; border: 1px solid var(--border);
    border-radius: 999px; background: var(--s2);
}
.lz-card.disabled {
    cursor: default; pointer-events: none;
    background: var(--s2); border-style: dashed;
}
.lz-card.disabled .lz-card-ico { filter: grayscale(1); opacity: .55; }
.lz-card.disabled .lz-card-name { color: var(--text-dim); }
.lz-card.disabled .lz-card-desc { color: var(--text-mute); }
.lz-card.disabled .lz-card-go { display: none; }
.lz-card.disabled .lz-card-soon { display: block; }

@media (max-width: 560px) {
    .lz-hdr { padding: 16px 18px; }
    .lz-body { padding: 20px 18px 40px; }
    .lz-hdr-meta { display: none; }
}

/* =====================================================================
   Shared component families ported from the mockups (spec: inventory.html)
   — were missing from the design system. Used app-wide by modal dialogs,
   the receive stepper, RFID scan panels and progress bars.
   ===================================================================== */

/* ----- Modal / dialog ----- */
.modal-bg {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .4);
    display: none; align-items: center; justify-content: center;
    z-index: 200; backdrop-filter: blur(2px);
}
.modal-bg.open { display: flex; }
.modal {
    background: #fff; border-radius: 13px; padding: 24px;
    width: 480px; max-width: calc(100vw - 40px); max-height: calc(100vh - 64px);
    display: flex; flex-direction: column; gap: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.modal.wide { width: 660px; }
.modal.xl { width: 900px; }
.modal.xl .modal-body { max-height: 72vh; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.modal-eye { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-bottom: 5px; }
.modal-title { font-size: 16.5px; font-weight: 600; color: var(--t1); letter-spacing: -.01em; line-height: 1.3; }
.modal-x {
    width: 27px; height: 27px; border: none; background: var(--s3); border-radius: 7px;
    color: var(--t2); cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all .15s;
}
.modal-x:hover { background: #e8e8e8; color: var(--t1); }
.modal-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 62vh; }
.modal-desc { font-size: 13px; color: var(--t2); line-height: 1.6; }
.modal-meta { font-size: 11px; color: var(--t3); font-family: ui-monospace, monospace; }
.modal-tbl { font-size: 11.5px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: 100%; border-collapse: collapse; }
.modal-tbl thead tr { background: var(--s2); }
.modal-tbl th { padding: 8px 11px; text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--t3); }
.modal-tbl td { padding: 8px 11px; border-top: 1px solid var(--border); color: var(--t2); }
.modal-note { font-size: 11.5px; color: var(--t3); line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.btn-danger {
    background: #c62828; color: #fff; border: none; border-radius: 7px;
    padding: 0 16px; height: 34px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: opacity .15s;
}
.btn-danger:hover { opacity: .85; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-bg.open .modal { animation: modalIn .18s cubic-bezier(.2, .8, .2, 1); }

/* ----- Stepper (receive / multi-step flows) ----- */
.steps { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.step { display: flex; align-items: center; gap: 8px; }
.step-num {
    width: 22px; height: 22px; border-radius: 50%; background: var(--s3); color: var(--t3);
    font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-hi);
}
.step.done .step-num { background: #111; color: #fff; border-color: #111; }
.step.cur .step-num { background: #fff; color: #111; border-color: #111; }
.step-lbl { font-size: 11.5px; color: var(--t3); }
.step.done .step-lbl, .step.cur .step-lbl { color: var(--t1); font-weight: 500; }
.step-line { width: 36px; height: 1px; background: var(--border-hi); margin: 0 10px; }

/* ----- Scan / RFID drop panel ----- */
.scan-box {
    border: 1.5px dashed var(--border-hi); border-radius: 10px; padding: 22px;
    display: flex; align-items: center; gap: 16px; background: var(--s2);
}
.scan-ico {
    width: 42px; height: 42px; border-radius: 9px; background: #111; color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.scan-title { font-size: 13px; font-weight: 600; color: var(--t1); }
.scan-sub { font-size: 11.5px; color: var(--t3); margin-top: 2px; line-height: 1.5; }

/* ----- Progress bar (spec .prog; repo also has .pbar) ----- */
.prog { height: 5px; background: var(--s3); border-radius: 3px; overflow: hidden; width: 90px; }
.prog-fill { height: 100%; background: #111; border-radius: 3px; }
.prog-fill.warn { background: #e65100; }
.prog-fill.ok { background: #2e7d32; }

/* =====================================================================
   Inventory sidebar — mockup fidelity (G7 reference, scoped to .inv-app so
   the home/other shells' vertical .mi style is untouched). Horizontal item
   (icon + label + count), group headers, bottom admin, purple active accent.
   Other shells replicate this scoped block during the G7 sweep.
   ===================================================================== */
.inv-app .sb-scroll { flex: 1; padding: 8px 0; }
/* Hide sidebar scrollbar (spec: mockup .sb-scroll::-webkit-scrollbar{width:0}) */
.inv-app .sidebar, .inv-app .sb-scroll { scrollbar-width: none; }
.inv-app .sidebar::-webkit-scrollbar, .inv-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
/* Branch box — purple-tinted card (spec: mockup .sb-branch) */
.inv-app .sb-branch {
    margin: 4px 14px 4px; padding: 9px 11px;
    background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 8px;
}
.inv-app .sb-branch-eye { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(167, 139, 250, 0.8); }
.inv-app .sb-branch-name { font-size: 12px; font-weight: 600; color: #fff; margin-top: 3px; }
.inv-app .sb-branch-sub { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 1px; }
/* Sidebar width aligned to the topbar logo-area (--sw); module header slimmed to mockup */
.inv-app .sidebar { width: var(--sw); }
.inv-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.inv-app .mod-dot { width: 6px; height: 6px; }
.inv-app .mod-lbl {
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.inv-app .sb-nav { padding: 12px 0; }
.inv-app .sb-grp {
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px;
}
.inv-app .mi {
    flex-direction: row; align-items: center; gap: 9px;
    padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent;
    box-shadow: none;
}
.inv-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.inv-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: var(--inv); }
.inv-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.inv-app .mi.active .mi-ico { color: var(--inv); }
.inv-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.inv-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.inv-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.inv-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.inv-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.inv-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.inv-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* =====================================================================
   G7 per-shell sidebar (replicated from the .inv-app reference above).
   Accent = the mockup's own --inv/--pms value (source of truth), NOT the
   RAIL_APPS module color: sales/delivery #3b82f6, supplier #14b8a6.
   ===================================================================== */
/* ----- Sales (#3b82f6) ----- */
.sales-app .sb-scroll { flex: 1; padding: 8px 0; }
.sales-app .sidebar, .sales-app .sb-scroll { scrollbar-width: none; }
.sales-app .sidebar::-webkit-scrollbar, .sales-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.sales-app .sb-branch {
    margin: 4px 14px 8px; padding: 9px 11px;
    background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
}
.sales-app .sb-branch-eye { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(59, 130, 246, 0.8); }
.sales-app .sb-branch-name { font-size: 12px; font-weight: 600; color: #fff; margin-top: 3px; }
.sales-app .sb-branch-sub { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 1px; }
.sales-app .sidebar { width: var(--sw); }
.sales-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.sales-app .mod-dot { width: 6px; height: 6px; }
.sales-app .mod-lbl {
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.sales-app .sb-grp {
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px;
}
.sales-app .mi {
    flex-direction: row; align-items: center; gap: 9px;
    padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent;
    box-shadow: none;
}
.sales-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.sales-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #3b82f6; }
.sales-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.sales-app .mi.active .mi-ico { color: #3b82f6; }
.sales-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.sales-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.sales-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.sales-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.sales-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.sales-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.sales-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- Supplier (#14b8a6) ----- */
.supplier-app .sb-scroll { flex: 1; padding: 8px 0; }
.supplier-app .sidebar, .supplier-app .sb-scroll { scrollbar-width: none; }
.supplier-app .sidebar::-webkit-scrollbar, .supplier-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.supplier-app .sb-branch {
    margin: 4px 14px 8px; padding: 9px 11px;
    background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: 8px;
}
.supplier-app .sb-branch-eye { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 184, 166, 0.8); }
.supplier-app .sb-branch-name { font-size: 12px; font-weight: 600; color: #fff; margin-top: 3px; }
.supplier-app .sb-branch-sub { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 1px; }
.supplier-app .sidebar { width: var(--sw); }
.supplier-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.supplier-app .mod-dot { width: 6px; height: 6px; }
.supplier-app .mod-lbl {
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.supplier-app .sb-grp {
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px;
}
.supplier-app .mi {
    flex-direction: row; align-items: center; gap: 9px;
    padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent;
    box-shadow: none;
}
.supplier-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.supplier-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #14b8a6; }
.supplier-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.supplier-app .mi.active .mi-ico { color: #14b8a6; }
.supplier-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.supplier-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.supplier-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.supplier-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.supplier-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.supplier-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.supplier-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- Delivery (#3b82f6) ----- */
.delivery-app .sb-scroll { flex: 1; padding: 8px 0; }
.delivery-app .sidebar, .delivery-app .sb-scroll { scrollbar-width: none; }
.delivery-app .sidebar::-webkit-scrollbar, .delivery-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.delivery-app .sb-branch {
    margin: 4px 14px 8px; padding: 9px 11px;
    background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
}
.delivery-app .sb-branch-eye { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(59, 130, 246, 0.8); }
.delivery-app .sb-branch-name { font-size: 12px; font-weight: 600; color: #fff; margin-top: 3px; }
.delivery-app .sb-branch-sub { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 1px; }
.delivery-app .sidebar { width: var(--sw); }
.delivery-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.delivery-app .mod-dot { width: 6px; height: 6px; }
.delivery-app .mod-lbl {
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.delivery-app .sb-grp {
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px;
}
.delivery-app .mi {
    flex-direction: row; align-items: center; gap: 9px;
    padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent;
    box-shadow: none;
}
.delivery-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.delivery-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #3b82f6; }
.delivery-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.delivery-app .mi.active .mi-ico { color: #3b82f6; }
.delivery-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.delivery-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.delivery-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.delivery-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.delivery-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.delivery-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.delivery-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- Purchase (#3b82f6) ----- */
.purchase-app .sb-scroll { flex: 1; padding: 8px 0; }
.purchase-app .sidebar, .purchase-app .sb-scroll { scrollbar-width: none; }
.purchase-app .sidebar::-webkit-scrollbar, .purchase-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.purchase-app .sb-branch { margin: 4px 14px 8px; padding: 9px 11px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 8px; }
.purchase-app .sb-branch-eye { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(59, 130, 246, 0.8); }
.purchase-app .sb-branch-name { font-size: 12px; font-weight: 600; color: #fff; margin-top: 3px; }
.purchase-app .sb-branch-sub { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 1px; }
.purchase-app .sidebar { width: var(--sw); }
.purchase-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.purchase-app .mod-dot { width: 6px; height: 6px; }
.purchase-app .mod-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.purchase-app .sb-grp { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px; }
.purchase-app .mi { flex-direction: row; align-items: center; gap: 9px; padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent; box-shadow: none; }
.purchase-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.purchase-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #3b82f6; }
.purchase-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.purchase-app .mi.active .mi-ico { color: #3b82f6; }
.purchase-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.purchase-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.purchase-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.purchase-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.purchase-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.purchase-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.purchase-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- OMS (#3b82f6) ----- */
.oms-app .sb-scroll { flex: 1; padding: 8px 0; }
.oms-app .sidebar, .oms-app .sb-scroll { scrollbar-width: none; }
.oms-app .sidebar::-webkit-scrollbar, .oms-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.oms-app .sb-branch { margin: 4px 14px 8px; padding: 9px 11px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 8px; }
.oms-app .sb-branch-eye { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(59, 130, 246, 0.8); }
.oms-app .sb-branch-name { font-size: 12px; font-weight: 600; color: #fff; margin-top: 3px; }
.oms-app .sb-branch-sub { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 1px; }
.oms-app .sidebar { width: var(--sw); }
.oms-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.oms-app .mod-dot { width: 6px; height: 6px; }
.oms-app .mod-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.oms-app .sb-grp { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px; }
.oms-app .mi { flex-direction: row; align-items: center; gap: 9px; padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent; box-shadow: none; }
.oms-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.oms-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #3b82f6; }
.oms-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.oms-app .mi.active .mi-ico { color: #3b82f6; }
.oms-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.oms-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.oms-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.oms-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.oms-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.oms-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.oms-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- Customer (#14b8a6) ----- */
.customer-app .sb-scroll { flex: 1; padding: 8px 0; }
.customer-app .sidebar, .customer-app .sb-scroll { scrollbar-width: none; }
.customer-app .sidebar::-webkit-scrollbar, .customer-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.customer-app .sb-branch { margin: 4px 14px 8px; padding: 9px 11px; background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.25); border-radius: 8px; }
.customer-app .sb-branch-eye { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 184, 166, 0.8); }
.customer-app .sb-branch-name { font-size: 12px; font-weight: 600; color: #fff; margin-top: 3px; }
.customer-app .sb-branch-sub { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 1px; }
.customer-app .sidebar { width: var(--sw); }
.customer-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.customer-app .mod-dot { width: 6px; height: 6px; }
.customer-app .mod-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.customer-app .sb-grp { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px; }
.customer-app .mi { flex-direction: row; align-items: center; gap: 9px; padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent; box-shadow: none; }
.customer-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.customer-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #14b8a6; }
.customer-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.customer-app .mi.active .mi-ico { color: #14b8a6; }
.customer-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.customer-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.customer-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.customer-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.customer-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.customer-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.customer-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }
/* Timeline lists (Segments / CDP cards) + card headings — match customer.html mock (teal dots, small text) */
.customer-app .card-title { font-size: 13px; }
.customer-app .timeline { display: flex; flex-direction: column; gap: 9px; }
.customer-app .tl-row { display: flex; gap: 10px; align-items: flex-start; }
.customer-app .tl-dot { width: 7px; height: 7px; background: #14b8a6; margin-top: 6px; flex-shrink: 0; }
.customer-app .tl-title { font-size: 12px; font-weight: 500; color: var(--text); }
.customer-app .tl-meta { font-size: 10.5px; color: var(--text-mute); margin-top: 2px; }
.customer-app .avail-box-val .warn { color: #e65100; }
.customer-app .avail-box-val .ok { color: #2e7d32; }
/* Callout strip — mock has a teal `.note.pms` variant default.css lacks, plus breathing room above */
.customer-app .note { margin-top: 18px; }
.customer-app .note.pms { background: rgba(20, 184, 166, .08); border-color: rgba(20, 184, 166, .3); color: #0f766e; }
/* Partner cell (avatar + name + code) — absent from the shared theme, so cells stacked */
.customer-app .partner-info { display: flex; align-items: center; gap: 10px; }
.customer-app .partner-avatar { width: 34px; height: 34px; border-radius: 7px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--text-dim); flex-shrink: 0; font-size: 10px; font-weight: 700; overflow: hidden; }
.customer-app .partner-avatar.customer { background: #e3f2fd; color: #1565c0; }
.customer-app .partner-avatar.supplier { background: #e0f2f1; color: #00796b; }
.customer-app .partner-name { font-size: 12.5px; font-weight: 500; color: var(--text); }
/* Sortable table headers (the mock renders these via Tabulator) */
.customer-app .th-sort { cursor: pointer; user-select: none; }
.customer-app .th-sort:hover { color: var(--text); }
.customer-app .th-caret { margin-left: 6px; font-size: 8px; color: var(--text-mute); }
/* Table sub-label + requirement cards (Exclusive Access) — absent from the shared theme */
.customer-app .partner-code { font-size: 11px; color: var(--text-mute); margin-top: 1px; }
.customer-app .req-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.customer-app .req-card { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 13px 14px; display: flex; flex-direction: column; gap: 4px; }
.customer-app .req-id { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #14b8a6; }
.customer-app .req-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.customer-app .req-copy { font-size: 11px; color: var(--text-mute); line-height: 1.45; }
@media (max-width: 1000px) { .customer-app .req-grid { grid-template-columns: 1fr; } }

/* ----- PMS (#14b8a6) ----- */
.pms-app .sb-scroll { flex: 1; padding: 8px 0; }
.pms-app .sidebar, .pms-app .sb-scroll { scrollbar-width: none; }
.pms-app .sidebar::-webkit-scrollbar, .pms-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.pms-app .sb-branch { margin: 4px 14px 8px; padding: 9px 11px; background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.25); border-radius: 8px; }
.pms-app .sb-branch-eye { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 184, 166, 0.8); }
.pms-app .sb-branch-name { font-size: 12px; font-weight: 600; color: #fff; margin-top: 3px; }
.pms-app .sb-branch-sub { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 1px; }
.pms-app .sidebar { width: var(--sw); }
.pms-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.pms-app .mod-dot { width: 6px; height: 6px; }
.pms-app .mod-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.pms-app .sb-grp { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px; }
.pms-app .mi { flex-direction: row; align-items: center; gap: 9px; padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent; box-shadow: none; }
.pms-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.pms-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #14b8a6; }
.pms-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.pms-app .mi.active .mi-ico { color: #14b8a6; }
.pms-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.pms-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.pms-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.pms-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.pms-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.pms-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.pms-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- Product (#ffffff, white active — colored mod-dot #666, no branch card) ----- */
.product-app .sb-scroll { flex: 1; padding: 8px 0; }
.product-app .sidebar, .product-app .sb-scroll { scrollbar-width: none; }
.product-app .sidebar::-webkit-scrollbar, .product-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.product-app .sidebar { width: var(--sw); }
.product-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.product-app .mod-dot { width: 6px; height: 6px; }
.product-app .mod-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.product-app .sb-grp { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px; }
.product-app .mi { flex-direction: row; align-items: center; gap: 9px; padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent; box-shadow: none; }
.product-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.product-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #ffffff; }
.product-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.product-app .mi.active .mi-ico { color: #ffffff; }
.product-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.product-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.product-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.product-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.product-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.product-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.product-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- Membership (#ffffff, white active — colored mod-dot #60a5fa, no branch card) ----- */
.membership-app .sb-scroll { flex: 1; padding: 8px 0; }
.membership-app .sidebar, .membership-app .sb-scroll { scrollbar-width: none; }
.membership-app .sidebar::-webkit-scrollbar, .membership-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.membership-app .sidebar { width: var(--sw); }
.membership-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.membership-app .mod-dot { width: 6px; height: 6px; }
.membership-app .mod-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.membership-app .sb-grp { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px; }
.membership-app .mi { flex-direction: row; align-items: center; gap: 9px; padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent; box-shadow: none; }
.membership-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.membership-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #ffffff; }
.membership-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.membership-app .mi.active .mi-ico { color: #ffffff; }
.membership-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.membership-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.membership-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.membership-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.membership-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.membership-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.membership-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- Campaign (#ffffff, white active — colored mod-dot #f59e0b, no branch card) ----- */
.campaign-app .sb-scroll { flex: 1; padding: 8px 0; }
.campaign-app .sidebar, .campaign-app .sb-scroll { scrollbar-width: none; }
.campaign-app .sidebar::-webkit-scrollbar, .campaign-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.campaign-app .sidebar { width: var(--sw); }
.campaign-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.campaign-app .mod-dot { width: 6px; height: 6px; }
.campaign-app .mod-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.campaign-app .sb-grp { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px; }
.campaign-app .mi { flex-direction: row; align-items: center; gap: 9px; padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent; box-shadow: none; }
.campaign-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.campaign-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #ffffff; }
.campaign-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.campaign-app .mi.active .mi-ico { color: #ffffff; }
.campaign-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.campaign-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.campaign-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.campaign-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.campaign-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.campaign-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.campaign-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- Content (#ffffff, white active — colored mod-dot #f43f5e, no branch card) ----- */
.content-app .sb-scroll { flex: 1; padding: 8px 0; }
.content-app .sidebar, .content-app .sb-scroll { scrollbar-width: none; }
.content-app .sidebar::-webkit-scrollbar, .content-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.content-app .sidebar { width: var(--sw); }
.content-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.content-app .mod-dot { width: 6px; height: 6px; }
.content-app .mod-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.content-app .sb-grp { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px; }
.content-app .mi { flex-direction: row; align-items: center; gap: 9px; padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent; box-shadow: none; }
.content-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.content-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #ffffff; }
.content-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.content-app .mi.active .mi-ico { color: #ffffff; }
.content-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.content-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.content-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.content-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.content-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.content-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.content-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* ----- Home / Brand OS (#ffffff, white active — neutral mod-dot #94a3b8, no branch card).
   Repo-only aggregation nav (the core mockup's sidebar is empty), rendered in the
   shared flat style; icons drawn from the shared mockup icon vocabulary. ----- */
.home-app .sb-scroll { flex: 1; padding: 8px 0; }
.home-app .sidebar, .home-app .sb-scroll { scrollbar-width: none; }
.home-app .sidebar::-webkit-scrollbar, .home-app .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.home-app .sidebar { width: var(--sw); }
.home-app .mod-hdr { padding: 12px 16px 8px; border-bottom: none; gap: 8px; }
.home-app .mod-dot { width: 6px; height: 6px; }
.home-app .mod-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.home-app .sb-grp { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 5px 16px 4px; }
.home-app .mi { flex-direction: row; align-items: center; gap: 9px; padding: 7px 16px 7px 22px; border-radius: 0; border-left: 2px solid transparent; box-shadow: none; }
.home-app .mi:hover { background: rgba(255, 255, 255, 0.05); }
.home-app .mi.active { background: rgba(255, 255, 255, 0.08); box-shadow: none; border-left-color: #ffffff; }
.home-app .mi-ico { width: 15px; height: 15px; flex-shrink: 0; color: rgba(255, 255, 255, 0.3); }
.home-app .mi.active .mi-ico { color: #ffffff; }
.home-app .mi-lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); flex: 1; }
.home-app .mi.active .mi-lbl { color: #fff; font-weight: 500; }
.home-app .sb-bot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 0; }
.home-app .adm-item { display: flex; align-items: center; gap: 9px; padding: 7px 16px; cursor: pointer; }
.home-app .adm-item:hover { background: rgba(255, 255, 255, 0.05); }
.home-app .adm-ico { width: 12px; height: 12px; flex-shrink: 0; color: rgba(255, 255, 255, 0.25); }
.home-app .adm-lbl { font-size: 11.5px; color: rgba(255, 255, 255, 0.3); }

/* Campaign Detail — best-selling product drill-down (mirror retailos pp-* mock,
   uniquely prefixed cdp- to avoid clashing with the existing .pp-row rule). */
.cdp-caret { display: inline-block; width: 14px; color: var(--t3); font-size: 9px; transition: transform .15s; }
.cdp-best-head, .cdp-best-row { display: grid; grid-template-columns: 22px 30px minmax(180px, 2fr) 96px 70px 70px 70px 56px; align-items: center; gap: 8px; }
.cdp-best-head { padding: 10px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); background: var(--s2); border-bottom: 1px solid var(--border); }
.cdp-best-row { padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12.5px; color: var(--t2); }
.cdp-best-row:hover { background: var(--s2); }
.cdp-best-row.open { background: var(--s2); }
.cdp-best-row.open .cdp-caret { transform: rotate(90deg); color: var(--t1); }
.cdp-drill-box { background: var(--s2); border-bottom: 1px solid var(--border); }
.cdp-drill-inner { padding: 14px 18px 18px; }
.cdp-mini { font-size: 9px; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 8px; }
.cdp-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cdp-bar-lbl { font-size: 11px; color: var(--t2); width: 72px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdp-bar-track { flex: 1; height: 14px; background: var(--s3); border-radius: 3px; overflow: hidden; }
.cdp-bar-fill { height: 14px; background: #111; border-radius: 3px; }
.cdp-bar-val { font-size: 10.5px; color: var(--t3); width: 78px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cdp-trend { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.cdp-trend-bar { flex: 1; background: #cfd8ea; border-radius: 2px 2px 0 0; min-height: 2px; }
.cdp-vtbl { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
.cdp-vtbl th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--t3); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.cdp-vtbl td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--t2); }
.cdp-vtbl tr:last-child td { border-bottom: none; }
.cdp-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 14px; }
.cdp-trend-wrap { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.cdp-trend-day { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.cdp-trend-gmv { flex: 1; background: #111; border-radius: 2px 2px 0 0; }
.cdp-trend-units { flex: 1; background: #cfd8ea; border-radius: 2px 2px 0 0; }

/* ===== Sales > Dashboard — exact mirror of demo sales.html (#sales pane) ===== */
/* Scoped to .sales-perf so the rest of the app keeps its current theme values. */
/* Fill the whole content area (demo .pane has no max-width; imb caps .pane at 1200px). */
.sales-perf { display: flex; flex-direction: column; gap: 18px; max-width: none; }
.sales-perf .pane-hdr { margin-bottom: 0; }
.sales-perf .pane-eye { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-bottom: 4px; }
.sales-perf .pane-title { font-size: 20px; font-weight: 600; color: var(--t1); letter-spacing: -.01em; }

/* KPI row — four compact cards, uppercase labels */
.sales-perf .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 0; }
.sales-perf .kpi-card { background: var(--s1); border: 1px solid var(--border); border-radius: 9px; padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.sales-perf .kpi-lbl { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.sales-perf .kpi-val { font-size: 24px; font-weight: 600; color: var(--t1); line-height: 1; margin: 0; }
.sales-perf .kpi-sub { font-size: 11px; }

/* Cards — 10px radius, no bottom margin (pane gap handles spacing) */
.sales-perf .card { padding: 20px; border-radius: 10px; margin-bottom: 0; gap: 14px; }

/* Chart boxes — demo "Sales extra sections" heights */
.sales-perf .chart-box { position: relative; height: 210px; width: 100%; }
.sales-perf .chart-box.sm { height: 175px; }
.sales-perf .chart-box.xs { height: 150px; }

/* Toggles — black (not accent-blue) active state, matching demo */
.sales-perf .period-btn.active { background: var(--t1); color: #fff; border-color: var(--t1); }
.sales-perf .pp-pill { border: 1px solid var(--border-hi); background: #fff; color: var(--t2); font-size: 11.5px; font-weight: 500; padding: 4px 12px; border-radius: 20px; cursor: pointer; }
.sales-perf .pp-pill:hover { background: var(--s2); }
.sales-perf .pp-pill.active { background: #111; color: #fff; border-color: #111; }
.sales-perf .info-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--s3); color: var(--t3); font-size: 11px; cursor: help; flex-shrink: 0; }

/* Product Performance table + drill-down */
.sales-perf .tbl thead tr { background: var(--s2); }
.sales-perf .pp-caret { display: inline-block; width: 14px; color: var(--t3); font-size: 9px; transition: transform .15s; }
/* Reset the shared `.kv-row,...,.pp-row{display:flex}` rule (line ~1229) that would
   otherwise turn these <tr> rows into flex boxes and collapse the table columns. */
.sales-perf tr.pp-row { display: table-row; cursor: pointer; border-bottom: none; padding: 0; }
.sales-perf tr.pp-row.open .pp-caret { transform: rotate(90deg); color: var(--t1); }
.sales-perf tr.pp-row:hover > td { background: var(--s2); }
.sales-perf tr.pp-row.open > td { background: var(--s2); }
.sales-perf .pp-drill td { background: var(--s2); padding: 0 !important; }
.sales-perf .pp-drill-inner { padding: 14px 18px 18px; }
.sales-perf .pp-mini { font-size: 9px; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 8px; }
.sales-perf .pp-mini-chart { position: relative; height: 90px; width: 100%; }
.sales-perf .pp-vtbl { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
.sales-perf .pp-vtbl th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--t3); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.sales-perf .pp-vtbl td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--t2); }
.sales-perf .pp-vtbl tr:last-child td { border-bottom: none; }