/* ==========================================================================
   Emcube portal design system
   Brand derived from the Emcube logo: coral icing, amber glaze, plum outline.
   Bootstrap is the grid/utility/JS substrate; everything visual is defined here.
   Light theme only for now — every value is a custom property, so adding a
   dark theme later is a second :root block, not a rewrite.
   ========================================================================== */

/* --- Typeface (self-hosted; same family as the POS app) ------------------ */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/urbanist-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/urbanist-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/urbanist-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/urbanist-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
    /* Brand — coral. 500 is the logo colour (display only, 3.1:1).
       700 is the interactive step: 4.63:1 both as text on white and as a
       fill under white text, so buttons/links/focus all use it. */
    --coral-50:  #fff1f0;
    --coral-100: #ffe0dd;
    --coral-200: #ffc2bc;
    --coral-300: #ff9a92;
    --coral-400: #fe7068;
    --coral-500: #fe5656;
    --coral-600: #e4483f;
    --coral-700: #d33f38;
    --coral-800: #b53430;
    --coral-900: #8e2926;

    /* Brand — amber (logo glaze). 700 is the readable step. */
    --amber-50:  #fdf8ed;
    --amber-100: #faf1db;
    --amber-200: #f5e3b7;
    --amber-300: #efd18b;
    --amber-400: #eac367;
    --amber-500: #e7bc54;
    --amber-600: #dda51f;
    --amber-700: #ab8018;
    --amber-800: #7c5d11;

    /* Brand — plum (logo outline). The dark chrome. */
    --plum-500: #6b2f68;
    --plum-700: #431540;
    --plum-800: #350f33;
    --plum-900: #2b0d2a;

    /* Neutrals */
    --gray-25:  #fcfcfd;
    --gray-50:  #f7f7f9;
    --gray-100: #f1f0f4;
    --gray-200: #e6e4ea;
    --gray-300: #d3d0da;
    --gray-400: #a9a4b3;
    --gray-500: #7a7280;
    --gray-600: #5e5566;
    --gray-700: #453e4d;
    --gray-800: #2e2935;
    --gray-900: #1a1420;

    /* Status — reserved; never reused as a chart series */
    --good:     #0f7a3d;
    --good-bg:  #e6f4ec;
    --warning:  #9a6700;
    --warning-bg: #fdf3d7;
    --serious:  #b45309;
    --serious-bg: #fdeddc;
    --critical: #c02626;
    --critical-bg: #fce9e9;
    --info:     #1e5aa8;
    --info-bg:  #e7f0fb;

    /* Semantic surfaces & ink */
    --surface:        #ffffff;
    --surface-sunken: var(--gray-50);
    --page-bg:        var(--gray-50);
    --border:         var(--gray-200);
    --border-strong:  var(--gray-300);

    --text-primary:   var(--gray-900);   /* 18.0:1 on white */
    --text-secondary: var(--gray-600);   /*  7.1:1 */
    --text-muted:     var(--gray-500);   /*  4.6:1 */
    --text-inverse:   #ffffff;

    --accent:         var(--coral-700);
    --accent-hover:   var(--coral-800);
    --accent-subtle:  var(--coral-50);

    /* Sidebar (plum chrome) — muted step clears 7.9:1, fixing the old 3.4:1 */
    --sidebar-bg:       var(--plum-900);
    --sidebar-text:     #ede8ef;
    --sidebar-muted:    #b8a9be;
    --sidebar-hover-bg: rgba(255, 255, 255, .07);
    --sidebar-active-bg: rgba(254, 86, 86, .16);

    /* Spacing — 4px base */
    --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem;
    --sp-12: 3rem;

    /* Type scale */
    --font-sans: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fs-xs: .75rem;   --fs-sm: .8125rem; --fs-base: .9375rem;
    --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem; --fs-hero: 2.75rem;
    --lh-tight: 1.2; --lh-normal: 1.5;

    /* Radius */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(26, 20, 32, .06), 0 1px 3px rgba(26, 20, 32, .04);
    --shadow-2: 0 2px 4px rgba(26, 20, 32, .05), 0 4px 12px rgba(26, 20, 32, .07);
    --shadow-3: 0 8px 24px rgba(26, 20, 32, .12), 0 2px 6px rgba(26, 20, 32, .06);

    --focus-ring: 0 0 0 3px rgba(211, 63, 56, .35);

    --dur-fast: .12s; --dur: .2s;
    --sidebar-w: 248px;

    /* Bootstrap bridge — its components pick up the brand automatically */
    --bs-primary: var(--coral-700);
    --bs-primary-rgb: 211, 63, 56;
    --bs-body-bg: var(--page-bg);
    --bs-body-color: var(--text-primary);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-base);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--r-md);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover);
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0s; --dur: 0s; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Base --------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: var(--lh-tight); color: var(--text-primary); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--accent);
}

/* Skip link — first tab stop */
.skip-link {
    position: absolute; left: var(--sp-2); top: -3rem;
    z-index: 2000; padding: var(--sp-2) var(--sp-4);
    background: var(--surface); color: var(--accent);
    border-radius: var(--r-md); box-shadow: var(--shadow-2);
    font-weight: 600; transition: top var(--dur);
}
.skip-link:focus { top: var(--sp-2); }

/* --- Shell -------------------------------------------------------------- */
.em-shell { display: flex; min-height: 100vh; }

.em-sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.em-brand {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    color: #fff; font-weight: 700; font-size: var(--fs-md);
    letter-spacing: .02em;
}
.em-brand img { width: 34px; height: 34px; object-fit: contain; }
/* A vendor's own mark was not drawn for a dark sidebar, so it gets a light
   tile to sit on rather than being left to disappear into the plum. */
.em-brand img.own {
    width: 38px; height: 38px; border-radius: var(--r-sm);
    background: #fff; padding: 3px;
}
.em-brand span { min-width: 0; }
.em-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-brand:hover { color: #fff; text-decoration: none; }
.em-brand small {
    display: block; font-size: var(--fs-xs); font-weight: 500;
    color: var(--sidebar-muted); letter-spacing: .06em; text-transform: uppercase;
}

.em-nav { padding: 0 var(--sp-3) var(--sp-6); flex: 1; }
.em-nav-section {
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--sidebar-muted);
    padding: var(--sp-5) var(--sp-3) var(--sp-2);
}
.em-nav a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: .5rem var(--sp-3); margin-bottom: 2px;
    color: var(--sidebar-text); border-radius: var(--r-md);
    font-size: var(--fs-base); font-weight: 500;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.em-nav a:hover { background: var(--sidebar-hover-bg); color: #fff; text-decoration: none; }
.em-nav a.active {
    background: var(--sidebar-active-bg); color: #fff; font-weight: 600;
    box-shadow: inset 3px 0 0 var(--coral-500);
}
.em-nav a i { font-size: 1.05rem; width: 1.25rem; text-align: center; opacity: .9; }

.em-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.em-topbar {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
}
.em-topbar h1 { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.em-content { padding: var(--sp-6); flex: 1; }
@media (max-width: 575px) { .em-content, .em-topbar { padding-left: var(--sp-4); padding-right: var(--sp-4); } }

/* --- Cards -------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-5);
    font-weight: 600;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.card-header h2, .card-header h3 { font-size: var(--fs-md); margin: 0; }
.card-body { padding: var(--sp-5); }
.card-footer { background: transparent; border-top: 1px solid var(--border); padding: var(--sp-3) var(--sp-5); }

.em-card-sub { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 400; }

/* --- Page header -------------------------------------------------------- */
.em-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.em-page-head .lead-text { color: var(--text-secondary); font-size: var(--fs-base); margin: 0; }

/* --- Stat tiles --------------------------------------------------------- */
.em-stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.em-stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--sp-5);
    box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--sp-2);
}
.em-stat-label {
    font-size: var(--fs-sm); color: var(--text-secondary);
    font-weight: 500; letter-spacing: .01em;
}
.em-stat-value {
    font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1;
    color: var(--text-primary);
    /* proportional figures on purpose: tabular-nums makes big numbers look loose */
}
.em-stat-foot { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.em-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.em-delta.up { color: var(--good); }
.em-delta.down { color: var(--critical); }
.em-delta.flat { color: var(--text-muted); }
.em-stat-note { color: var(--text-muted); }

.em-hero {
    font-size: var(--fs-hero); font-weight: 700; line-height: 1.05;
    color: var(--text-primary); letter-spacing: -.02em;
}

/* --- Tables ------------------------------------------------------------- */
.em-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
    --bs-table-bg: transparent;
    margin: 0; font-size: var(--fs-base); color: var(--text-primary);
}
.table > thead > tr > th {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted);
    background: var(--gray-50); border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4); white-space: nowrap;
}
.table > tbody > tr > td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover > td { background: var(--gray-25); }
.table tfoot td {
    font-weight: 600; border-top: 2px solid var(--border);
    background: var(--gray-50); padding: var(--sp-3) var(--sp-4);
}
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .em-row-title { font-weight: 600; }

/* --- Badges ------------------------------------------------------------- */
.em-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px .5rem; border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
    white-space: nowrap;
}
.em-badge.good     { background: var(--good-bg);     color: var(--good); }
.em-badge.warning  { background: var(--warning-bg);  color: var(--warning); }
.em-badge.critical { background: var(--critical-bg); color: var(--critical); }
.em-badge.info     { background: var(--info-bg);     color: var(--info); }
.em-badge.neutral  { background: var(--gray-100);    color: var(--text-secondary); }
.em-badge.brand    { background: var(--coral-50);    color: var(--coral-800); }
.em-badge.code     { background: var(--plum-900); color: #fff; font-family: ui-monospace, SFMono-Regular, monospace; letter-spacing: .03em; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
    font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-base);
    border-radius: var(--r-md); padding: .45rem .9rem;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--gray-100); color: var(--text-primary); border-color: var(--border-strong); }
.btn-outline-primary { color: var(--accent); border-color: var(--coral-200); background: var(--surface); }
.btn-outline-primary:hover { background: var(--coral-50); color: var(--accent-hover); border-color: var(--coral-300); }
.btn-light { background: var(--gray-100); border-color: transparent; color: var(--text-secondary); }
.btn-light:hover { background: var(--gray-200); color: var(--text-primary); }
.btn-sm { padding: .3rem .65rem; font-size: var(--fs-sm); }
.btn-icon { padding: .35rem .5rem; line-height: 1; }

/* --- Forms -------------------------------------------------------------- */
.form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.form-control, .form-select {
    font-family: var(--font-sans); font-size: var(--fs-base);
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    padding: .45rem .7rem; color: var(--text-primary); background-color: var(--surface);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
/* Keep room for the chevron — the padding shorthand above would otherwise let
   the selected text run underneath it. */
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding-right: 2rem; }
.form-control::placeholder { color: var(--gray-400); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--critical); }
.em-field-error { font-size: var(--fs-sm); color: var(--critical); margin-top: var(--sp-1); }
.em-field-help { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: var(--focus-ring); border-color: var(--accent); }

/* --- Filter bar --------------------------------------------------------- */
.em-filters {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5); box-shadow: var(--shadow-1);
}

/* --- Empty state -------------------------------------------------------- */
.em-empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-muted); }
.em-empty i { font-size: 2rem; color: var(--gray-300); display: block; margin-bottom: var(--sp-3); }
.em-empty-title { font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.em-empty p { margin: 0; font-size: var(--fs-sm); }

/* --- Toasts ------------------------------------------------------------- */
.em-toasts {
    position: fixed; top: calc(var(--env-h, 0px) + var(--sp-5)); right: var(--sp-5); z-index: 1080;
    display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(420px, calc(100vw - 2rem));
}
.em-toast {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--gray-400);
    border-radius: var(--r-md); box-shadow: var(--shadow-3);
    padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base);
    animation: em-toast-in var(--dur) ease-out;
}
.em-toast.success  { border-left-color: var(--good); }
.em-toast.error    { border-left-color: var(--critical); }
.em-toast.warning  { border-left-color: var(--warning); }
.em-toast .bi { font-size: 1.1rem; line-height: 1.35; }
.em-toast.success .bi { color: var(--good); }
.em-toast.error .bi   { color: var(--critical); }
.em-toast.warning .bi { color: var(--warning); }
.em-toast-body { flex: 1; }
.em-toast-close { background: none; border: 0; color: var(--text-muted); padding: 0 2px; line-height: 1; }
@keyframes em-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- Modals ------------------------------------------------------------- */
.modal-content { border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.modal-header { border-bottom: 1px solid var(--border); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.modal-title { font-size: var(--fs-md); font-weight: 600; }
.modal-body { padding: var(--sp-5); }
.modal-footer { border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-5); gap: var(--sp-2); }

/* --- Charts ------------------------------------------------------------- */
.em-chart { position: relative; }
.em-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.em-chart .grid line { stroke: var(--gray-200); stroke-width: 1; }
.em-chart .axis line, .em-chart .axis path { stroke: var(--gray-300); stroke-width: 1; }
.em-chart .tick-label { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.em-chart .series-label { font-size: 11px; fill: var(--text-secondary); font-weight: 600; }
.em-chart .hit { fill: transparent; cursor: pointer; }
.em-chart .mark { transition: opacity var(--dur-fast); }
.em-chart .bar-group:hover .mark { opacity: .85; }

.em-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); }
.em-legend-item { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); }
.em-legend-key { width: 12px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.em-legend-key.rect { height: 10px; width: 10px; border-radius: 3px; }

.em-tooltip {
    position: absolute; pointer-events: none; z-index: 20;
    background: var(--gray-900); color: #fff;
    border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm); box-shadow: var(--shadow-3);
    opacity: 0; transition: opacity var(--dur-fast); white-space: nowrap;
    transform: translate(-50%, -100%);
}
.em-tooltip.show { opacity: 1; }
.em-tooltip .tt-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.em-tooltip .tt-label { color: var(--gray-300); font-size: var(--fs-xs); }
.em-tooltip .tt-row { display: flex; align-items: center; gap: var(--sp-2); }
.em-tooltip .tt-key { width: 10px; height: 2px; border-radius: 1px; flex: 0 0 auto; }

.em-chart-toggle {
    background: none; border: 0; color: var(--text-muted);
    font-size: var(--fs-sm); font-weight: 600; padding: 2px 6px; border-radius: var(--r-sm);
}
.em-chart-toggle:hover { color: var(--accent); background: var(--coral-50); }

/* --- Meter / progress --------------------------------------------------- */
.em-meter { height: 6px; border-radius: var(--r-pill); background: var(--gray-200); overflow: hidden; }
.em-meter > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }

/* --- Auth (login) ------------------------------------------------------- */
.em-auth {
    min-height: 100vh; display: grid; place-items: center;
    padding: var(--sp-6);
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(254, 86, 86, .18), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(231, 188, 84, .16), transparent 55%),
        var(--plum-900);
}
.em-auth-card {
    width: 100%; max-width: 400px;
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--shadow-3); padding: var(--sp-8);
}
.em-auth-logo { display: block; width: 92px; height: auto; margin: 0 auto var(--sp-4); }
.em-auth h1 { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--sp-1); }
.em-auth .sub { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.em-auth-foot { text-align: center; margin-top: var(--sp-6); color: rgba(255,255,255,.6); font-size: var(--fs-sm); }

.em-pw-wrap { position: relative; }
.em-pw-wrap .form-control { padding-right: 2.5rem; }
.em-pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--text-muted); padding: .25rem .4rem; border-radius: var(--r-sm);
}
.em-pw-toggle:hover { color: var(--text-primary); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .em-sidebar {
        position: fixed; left: 0; top: var(--env-h, 0px); z-index: 1045;
        transform: translateX(-100%); transition: transform var(--dur);
        box-shadow: var(--shadow-3);
    }
    .em-sidebar.open { transform: none; }
    .em-backdrop {
        position: fixed; inset: 0; background: rgba(26, 20, 32, .5);
        z-index: 1040; opacity: 0; pointer-events: none; transition: opacity var(--dur);
    }
    .em-backdrop.show { opacity: 1; pointer-events: auto; }
    body.em-locked { overflow: hidden; }
}
@media (min-width: 992px) { .em-backdrop { display: none; } }

/* --- Print -------------------------------------------------------------- */
@media print {
    .em-sidebar, .em-topbar, .em-toasts, .em-filters, .btn, .em-chart-toggle { display: none !important; }
    .em-shell { display: block; }
    .em-content { padding: 0; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
}

/* --- Emcube Go additions: hub shell, KYC strip, workspace cards --------- */
.em-nav-foot { padding: var(--sp-3) var(--sp-3) var(--sp-5); border-top: 1px solid rgba(255,255,255,.08); }
.em-nav-foot a { display: flex; align-items: center; gap: var(--sp-2); color: var(--sidebar-muted); font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
.em-nav-foot a:hover { background: var(--sidebar-hover-bg); color: #fff; text-decoration: none; }
.em-kyc-strip { margin: 0 var(--sp-3) var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: var(--sp-2); background: rgba(255,255,255,.08); color: var(--sidebar-text); }
.em-kyc-strip.warning { background: rgba(231,188,84,.18); color: #f5e3b7; }
.em-kyc-strip.critical { background: rgba(254,86,86,.2); color: #ffc2bc; }
.em-kyc-strip.good { background: rgba(15,122,61,.25); color: #bfe8cf; }

.em-hub-body { background: var(--page-bg); min-height: 100vh; }
.em-hub-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6); background: var(--plum-900); color: #fff; position: sticky; top: 0; z-index: 20; }
.em-hub-brand { display: flex; align-items: center; gap: var(--sp-2); color: #fff; font-weight: 700; font-size: var(--fs-md); }
.em-hub-brand img { width: 30px; height: 30px; object-fit: contain; }
.em-hub-brand:hover { color: #fff; text-decoration: none; }
.em-hub-content { max-width: 880px; margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-12); }
.em-hub-content.wide { max-width: 1140px; }
@media (max-width: 575px) { .em-hub-bar { padding-left: var(--sp-4); padding-right: var(--sp-4); } }

.em-ws-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.em-ws-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: var(--text-primary); transition: box-shadow var(--dur), transform var(--dur); }
.em-ws-card:hover { text-decoration: none; color: var(--text-primary); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.em-ws-card .icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 1.25rem; background: var(--coral-50); color: var(--coral-700); }
.em-ws-card .icon.plum { background: var(--plum-900); color: #fff; }
.em-ws-card .icon.amber { background: var(--amber-100); color: var(--amber-800); }
.em-ws-card .title { font-weight: 700; font-size: var(--fs-md); }
.em-ws-card .sub { color: var(--text-muted); font-size: var(--fs-sm); }
.em-ws-card.dashed { border-style: dashed; background: transparent; box-shadow: none; }

.em-otp-input { font-size: 1.75rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.em-steps { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-6); font-size: var(--fs-sm); color: var(--text-muted); }
.em-steps .on { color: var(--accent); font-weight: 600; }
.em-doc-list .row-doc { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--gray-100); }
.em-doc-list .row-doc:last-child { border-bottom: 0; }
.em-desk-empty { text-align: center; padding: var(--sp-12) var(--sp-4); }
.em-desk-empty i { font-size: 2.5rem; color: var(--gray-300); }
.em-badge.danger { background: var(--critical-bg); color: var(--critical); }
.em-badge.success { background: var(--good-bg); color: var(--good); }

/* ==========================================================================
   Tickets: a conversation, not a table.

   Three voices have to be told apart at a glance — the person who wrote in,
   us answering them, and the desk talking to itself. The last one is the one
   that must never be mistaken for the second.
   ========================================================================== */
.em-ticket-message {
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--sp-2);
    background: #fff;
}
.em-ticket-message.staff {
    background: var(--wash, #fbf9fa);
    border-color: var(--brand-200, #eedfe2);
}
.em-ticket-message.internal {
    background: #fffaf0;
    border-style: dashed;
    border-color: #e6d3a8;
}
.em-ticket-message .who {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-weight: 600;
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-1);
}
.em-ticket-message .who .when { margin-left: auto; font-weight: 400; color: var(--text-muted); }
.em-ticket-message .who .tag {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a6d2f;
    background: #f5e7c6;
    border-radius: 999px;
    padding: 1px 8px;
}
.em-ticket-message .body { white-space: pre-wrap; line-height: 1.55; }

/* A star rating somebody can actually hit with a thumb. */
.em-stars { display: inline-flex; gap: 2px; direction: rtl; }
.em-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.em-stars label {
    font-size: 28px;
    line-height: 1;
    color: var(--line);
    cursor: pointer;
    padding: 2px;
}
.em-stars input:checked ~ label,
.em-stars label:hover,
.em-stars label:hover ~ label { color: #e2a63b; }
.em-stars-shown { color: #e2a63b; letter-spacing: 1px; }

/* ==========================================================================
   The staging banner.

   Fixed to the top of every page and not dismissible, because the mistake it
   prevents — a real order placed on a test site, or a day of data entry into
   a database about to be wiped — is one somebody makes precisely when they
   have stopped noticing the banner.
   ========================================================================== */
.em-env-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 14px;
    background: repeating-linear-gradient(
        45deg, #3a2b12, #3a2b12 10px, #4a3616 10px, #4a3616 20px
    );
    color: #ffe9b8;
    font-size: 12px;
    line-height: 1.4;
}
.em-env-banner strong {
    background: #ffce5c;
    color: #3a2b12;
    border-radius: 3px;
    padding: 1px 7px;
    font-size: 11px;
    letter-spacing: .08em;
    flex-shrink: 0;
}

@media print {
    .em-env-banner { display: none; }
}

/* The striped strip is deliberately above everything, because on staging you
   must never be in doubt about which site you are looking at. Everything
   above is in flow, so it only ever overlaps things that are positioned —
   a drawer or a dialog, whose close button it would otherwise sit on top of.
   --env-h is the strip's measured height, and zero on the live site, where
   there is no strip at all. */
.offcanvas.offcanvas-start,
.offcanvas.offcanvas-end { top: var(--env-h, 0px); }
.modal { padding-top: var(--env-h, 0px); }

/* --- an organisation's own mark ------------------------------------------
   Shown against a chequerboard so a logo saved with a transparent background
   reads as transparent rather than as white, which is the difference between
   "this will sit on my storefront" and "this has a white box round it". */
.em-logo-preview {
    width: 108px; height: 108px; flex: 0 0 auto;
    display: grid; place-items: center; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--r-lg);
    color: var(--gray-400); font-size: 1.75rem;
    background-color: var(--surface);
    background-image:
        linear-gradient(45deg, var(--gray-100) 25%, transparent 25%),
        linear-gradient(-45deg, var(--gray-100) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--gray-100) 75%),
        linear-gradient(-45deg, transparent 75%, var(--gray-100) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.em-logo-preview img { width: 100%; height: 100%; object-fit: contain; }

/* The cover photograph, shown at the shape it will be cropped to so nobody
   is surprised by what the storefront does to it. */
.em-cover-preview {
    width: 220px; aspect-ratio: 16 / 10; flex: 0 0 auto;
    display: grid; place-items: center; overflow: hidden;
    background: var(--gray-100); border: 1px solid var(--border); border-radius: var(--r-lg);
    color: var(--gray-400); font-size: 1.75rem;
}
.em-cover-preview img { width: 100%; height: 100%; object-fit: cover; }

/* --- the photo backlog ---------------------------------------------------
   A grid of what a buyer sees, not a table of filenames: the only way to
   judge whether a catalogue needs photographing is to look at it. */
.em-photo-grid {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.em-photo-card { overflow: hidden; }
.em-photo-card .shot {
    position: relative; aspect-ratio: 4 / 3; background: var(--gray-100);
    display: grid; place-items: center; color: var(--gray-400); font-size: 1.75rem;
}
.em-photo-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.em-photo-card .shot .tag {
    position: absolute; left: var(--sp-2); top: var(--sp-2);
    background: rgba(26, 20, 32, .78); color: #fff;
    border-radius: var(--r-pill); padding: .1rem .55rem;
    font-size: var(--fs-xs); font-weight: 700;
}
.em-photo-card .card-body { padding: var(--sp-3); }