/* ==========================================================================
   NGMedia ERP — staff application shell and design system.
   Loads after bootstrap.min.css and erp-theme.css. Re-points the theme tokens
   so existing views inherit the new look, then styles the new shell.
   ========================================================================== */

:root {
    --ngm-paper: #F5F6F8;
    --ngm-surface: #FFFFFF;
    --ngm-sunk: #EEF0F4;
    --ngm-line: #E1E4EA;
    --ngm-line-strong: #CDD2DB;
    --ngm-ink: #15161B;
    --ngm-muted: #646B7A;
    --ngm-faint: #8B91A0;
    --ngm-accent: #2350E0;
    --ngm-accent-rgb: 35, 80, 224;
    --ngm-accent-soft: #E7EDFD;
    --ngm-rail: #15161B;
    --ngm-rail-fg: #A9AEBB;
    --ngm-ok: #11845B;
    --ngm-ok-soft: #E3F4EC;
    --ngm-warn: #A86200;
    --ngm-warn-soft: #FBF0DD;
    --ngm-crit: #C6312B;
    --ngm-crit-soft: #FBE7E5;
    --ngm-shadow: 0 12px 40px rgba(21, 22, 27, .16);
    --ngm-f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --ngm-f-body: "Figtree", "Segoe UI", system-ui, sans-serif;
    --ngm-f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
    --ngm-rail-w: 84px;
    --ngm-subnav-w: 232px;
    --ngm-topbar-h: 60px;

    /* Re-point the existing theme at the NGMedia palette */
    --primary-rgb: var(--ngm-accent-rgb);
    --success-rgb: 17, 132, 91;
    --warning-rgb: 168, 98, 0;
    --danger-rgb: 198, 49, 43;
    --info-rgb: 35, 80, 224;
    --light-rgb: 238, 240, 244;
    --body-bg-rgb: 245, 246, 248;
    --default-background: var(--ngm-paper);
    --default-text-color: var(--ngm-ink);
    --default-border: var(--ngm-line);
    --input-border: var(--ngm-line-strong);
    --text-muted: var(--ngm-muted);
    --gray-5: var(--ngm-muted);
    --title-color: var(--ngm-ink);
    --breadcrumb-link: var(--ngm-muted);
    --breadcrumb-active: var(--ngm-ink);
    --card-radius: 12px;
    --control-radius: 8px;
    --default-font-family: var(--ngm-f-body);
}

/* --------------------------------------------------------------------------
   Base for the staff realm
   -------------------------------------------------------------------------- */
body.ngm-staff { background: var(--ngm-paper); color: var(--ngm-ink); font-family: var(--ngm-f-body); font-size: 14px; }
body.ngm-staff .mono, body.ngm-staff code, body.ngm-staff kbd { font-family: var(--ngm-f-mono); font-size: .88em; letter-spacing: -.01em; }
body.ngm-staff .num, body.ngm-staff td.right, body.ngm-staff td.num, body.ngm-staff .money { font-variant-numeric: tabular-nums; }
body.ngm-staff :focus-visible { outline: 2px solid var(--ngm-accent); outline-offset: 2px; }
body.ngm-staff h1, body.ngm-staff h2, body.ngm-staff h3 { font-family: var(--ngm-f-display); letter-spacing: -.015em; text-wrap: balance; }

.ngm-shell { display: grid; grid-template-columns: var(--ngm-rail-w) var(--ngm-subnav-w) minmax(0, 1fr); min-height: 100vh; }
.ngm-shell.no-subnav { grid-template-columns: var(--ngm-rail-w) minmax(0, 1fr); }
body.ngm-subnav-collapsed .ngm-shell { grid-template-columns: var(--ngm-rail-w) minmax(0, 1fr); }
body.ngm-subnav-collapsed .ngm-subnav { display: none; }

/* App rail */
.ngm-rail {
    background: var(--ngm-rail); color: var(--ngm-rail-fg);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px 6px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30;
}
.ngm-rail .ngm-brand { color: #fff; width: 48px; height: 52px; display: grid; place-items: center; margin-bottom: 10px; }
.ngm-rail .ngm-brand svg { width: 36px; height: auto; display: block; }
.ngm-rail a.ngm-app {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px;
    padding: 9px 0 7px; border-radius: 10px; color: var(--ngm-rail-fg); text-decoration: none;
    font-size: 11px; font-weight: 600; letter-spacing: .01em; line-height: 1.1; text-align: center;
}
.ngm-rail a.ngm-app svg { width: 20px; height: 20px; }
.ngm-rail a.ngm-app:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.ngm-rail a.ngm-app[aria-current="page"] { background: rgba(255, 255, 255, .13); color: #fff; }
.ngm-rail .ngm-spacer { flex: 1; }

/* Section navigation for the current app */
.ngm-subnav {
    background: var(--ngm-surface); border-inline-end: 1px solid var(--ngm-line);
    position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 12px 24px; z-index: 20;
}
.ngm-subnav .ngm-subnav-title { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 12px; }
.ngm-subnav .ngm-subnav-title h2 { font-size: 18px; margin: 0; font-weight: 700; }
.ngm-subnav h3 { font-family: var(--ngm-f-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ngm-faint); margin: 16px 8px 6px; }
.ngm-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ngm-subnav a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ngm-ink); text-decoration: none; font-weight: 500; font-size: 13.5px; }
.ngm-subnav a:hover { background: var(--ngm-sunk); }
.ngm-subnav a[aria-current="page"] { background: var(--ngm-accent-soft); color: var(--ngm-accent); font-weight: 600; }

/* Top bar */
.ngm-main { min-width: 0; display: flex; flex-direction: column; }
.ngm-topbar {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 25; height: var(--ngm-topbar-h);
    display: flex; align-items: center; gap: 12px; padding: 0 24px;
    background: color-mix(in srgb, var(--ngm-paper) 88%, transparent); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ngm-line);
}
.ngm-iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ngm-ink); padding: 0; }
.ngm-iconbtn:hover { background: var(--ngm-sunk); }
.ngm-iconbtn svg { width: 18px; height: 18px; }
.ngm-search-trigger {
    flex: 1; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: 8px; height: 38px;
    background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 8px; padding: 0 12px;
    color: var(--ngm-muted); text-align: start; font: inherit; cursor: pointer;
}
.ngm-search-trigger:hover { border-color: var(--ngm-line-strong); color: var(--ngm-ink); }
.ngm-search-trigger svg { width: 16px; height: 16px; flex: none; }
.ngm-search-trigger span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ngm-search-trigger kbd { font: 600 11px var(--ngm-f-body); border: 1px solid var(--ngm-line); border-radius: 4px; padding: 1px 6px; background: var(--ngm-sunk); color: var(--ngm-muted); }
.ngm-topbar-right { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ngm-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ngm-accent-soft); color: var(--ngm-accent); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.ngm-user { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 6px; border-radius: 8px; color: var(--ngm-ink); text-decoration: none; }
.ngm-user:hover { background: var(--ngm-sunk); color: var(--ngm-ink); }
.ngm-user .meta { line-height: 1.15; text-align: start; }
.ngm-user .meta strong { display: block; font-size: 13px; font-weight: 600; }
.ngm-user .meta small { color: var(--ngm-muted); font-size: 11.5px; }

/* Menus (New, user) */
.ngm-menu-wrap { position: relative; }
.ngm-menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 230px; z-index: 40;
    background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 10px; box-shadow: var(--ngm-shadow);
    padding: 6px; display: flex; flex-direction: column;
}
.ngm-menu[hidden] { display: none; }
.ngm-menu a, .ngm-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: start;
    padding: 8px 10px; border-radius: 6px; color: var(--ngm-ink); text-decoration: none; font: inherit; font-size: 13.5px; cursor: pointer;
}
.ngm-menu a:hover, .ngm-menu button:hover { background: var(--ngm-sunk); color: var(--ngm-ink); }
.ngm-menu svg { width: 16px; height: 16px; color: var(--ngm-muted); }
.ngm-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--ngm-line); opacity: 1; }
.ngm-menu form { display: block; margin: 0; }
.ngm-menu .ngm-menu-label { padding: 6px 10px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ngm-faint); }

/* Buttons */
body.ngm-staff .btn, .ngm-btn {
    --bs-btn-font-weight: 600; --bs-btn-border-radius: 8px; --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .85rem;
}
.ngm-btn {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ngm-line); background: var(--ngm-surface);
    color: var(--ngm-ink); border-radius: 8px; padding: 7px 12px; font: inherit; font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none; cursor: pointer; line-height: 1.3;
}
.ngm-btn:hover { border-color: var(--ngm-line-strong); color: var(--ngm-ink); }
.ngm-btn.primary { background: var(--ngm-accent); border-color: var(--ngm-accent); color: #fff; }
.ngm-btn.primary:hover { filter: brightness(1.07); color: #fff; }
.ngm-btn.sm { padding: 4px 9px; font-size: 12.5px; }
.ngm-btn svg { width: 16px; height: 16px; }
body.ngm-staff .btn-white { background: var(--ngm-surface); border-color: var(--ngm-line); color: var(--ngm-ink); }
body.ngm-staff .btn-white:hover { border-color: var(--ngm-line-strong); color: var(--ngm-ink); }

/* Content area and page header */
.ngm-content { padding: 22px 28px 56px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ngm-page-header { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ngm-page-header .main { flex: 1 1 360px; min-width: 0; }
.ngm-crumbs { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ngm-muted); }
.ngm-crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--ngm-faint); }
.ngm-crumbs a { color: inherit; text-decoration: none; }
.ngm-crumbs a:hover { color: var(--ngm-ink); }
/* Legacy views push <li class="breadcrumb-item"> into the crumb trail */
.ngm-crumbs .breadcrumb-item { padding: 0; }
.ngm-crumbs .breadcrumb-item + .breadcrumb-item::before { content: none; }
.ngm-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ngm-title-row h1 { font-size: 26px; line-height: 1.15; margin: 0; font-weight: 700; }
.ngm-page-header .subtitle { margin: 4px 0 0; color: var(--ngm-muted); max-width: 80ch; }
.ngm-page-header .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ngm-page-header .actions .btn svg { width: 14px; height: 14px; margin-inline-end: 4px; }

/* Existing component refinements (inherited by every backoffice view) */
body.ngm-staff .card { box-shadow: none; border: 1px solid var(--ngm-line); }
body.ngm-staff .card-header { padding: 14px 18px; }
body.ngm-staff .card-title, body.ngm-staff .card-header h2 { font-family: var(--ngm-f-body); font-size: 15px; font-weight: 700; letter-spacing: 0; }
body.ngm-staff thead th { background: var(--ngm-sunk); color: var(--ngm-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
body.ngm-staff th, body.ngm-staff td { border-bottom-color: var(--ngm-line); }
body.ngm-staff tbody tr:hover > td { background: color-mix(in srgb, var(--ngm-accent-soft) 45%, transparent); }
body.ngm-staff .stat-strip > div { background: var(--ngm-surface); border-color: var(--ngm-line); }
body.ngm-staff .stat-strip .stat-value { font-family: var(--ngm-f-display); font-weight: 700; font-size: 20px; }
body.ngm-staff .notice { border-radius: 10px; }
body.ngm-staff .module-tile { border-color: var(--ngm-line); }
body.ngm-staff .module-tile:hover { box-shadow: none; border-color: var(--ngm-accent); transform: none; }
body.ngm-staff .badge:not([class*="bg-"]):not([class*="text-bg-"]) { background: var(--ngm-accent-soft); color: var(--ngm-accent); }

/* Status pills and chips */
.ngm-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.ngm-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ngm-pill.ok { background: var(--ngm-ok-soft); color: var(--ngm-ok); }
.ngm-pill.warn { background: var(--ngm-warn-soft); color: var(--ngm-warn); }
.ngm-pill.crit { background: var(--ngm-crit-soft); color: var(--ngm-crit); }
.ngm-pill.info { background: var(--ngm-sunk); color: var(--ngm-muted); }
.ngm-pill.blue { background: var(--ngm-accent-soft); color: var(--ngm-accent); }
.ngm-tag { display: inline-block; border: 1px solid var(--ngm-line); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 600; color: var(--ngm-muted); white-space: nowrap; }
.ngm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ngm-chip { border: 1px solid var(--ngm-line); background: var(--ngm-surface); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--ngm-muted); text-decoration: none; }
.ngm-chip:hover { color: var(--ngm-ink); border-color: var(--ngm-line-strong); }
.ngm-chip[aria-current="true"] { background: var(--ngm-ink); border-color: var(--ngm-ink); color: var(--ngm-paper); }

/* Panels, toolbars, tables for new pages */
.ngm-panel { background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 12px; min-width: 0; }
.ngm-panel-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ngm-line); flex-wrap: wrap; }
.ngm-panel-h h2 { font-family: var(--ngm-f-body); font-size: 15px; font-weight: 700; margin: 0; letter-spacing: 0; }
.ngm-panel-h .hint { color: var(--ngm-muted); font-size: 13px; }
.ngm-panel-h .right { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; }
.ngm-panel-b { padding: 16px 18px; }
.ngm-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--ngm-line); }
form.ngm-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; flex: 1 1 auto; justify-content: flex-end; }
form.ngm-filter label { display: block; margin: 0; }
/* The legacy theme sizes every input at 100% with a very specific selector; filters need natural widths. */
form.ngm-filter input, form.ngm-filter select { width: auto !important; min-width: 0; padding: 6px 10px; font-size: 13.5px; }
form.ngm-filter input[type="search"] { flex: 1 1 260px; max-width: 460px; }
.ngm-table-wrap { overflow-x: auto; }
table.ngm-table { width: 100%; border-collapse: collapse; }
table.ngm-table th { font-size: 11.5px; font-weight: 700; color: var(--ngm-muted); text-align: start; padding: 9px 18px; background: var(--ngm-sunk); white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; border-bottom: 0; }
table.ngm-table td { padding: 11px 18px; border-top: 1px solid var(--ngm-line); border-bottom: 0; white-space: nowrap; vertical-align: middle; }
table.ngm-table td.wrap { white-space: normal; }
table.ngm-table tr.ngm-row-link { cursor: pointer; }
table.ngm-table .r { text-align: end; }
table.ngm-table .sub { display: block; color: var(--ngm-muted); font-size: 12.5px; }
table.ngm-table td a.ngm-row-title { color: var(--ngm-ink); font-weight: 600; text-decoration: none; }
table.ngm-table td a.ngm-row-title:hover { color: var(--ngm-accent); }
.ngm-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--ngm-line); color: var(--ngm-muted); font-size: 13px; flex-wrap: wrap; }
.ngm-empty { padding: 36px 18px; text-align: center; color: var(--ngm-muted); }
.ngm-empty strong { display: block; color: var(--ngm-ink); font-size: 15px; margin-bottom: 4px; }
.ngm-meter { height: 6px; border-radius: 999px; background: var(--ngm-sunk); overflow: hidden; width: 120px; margin-top: 4px; }
.ngm-meter i { display: block; height: 100%; background: var(--ngm-accent); border-radius: inherit; }
.ngm-meter i.warn { background: var(--ngm-warn); }
.ngm-meter i.crit { background: var(--ngm-crit); }

/* KPI tiles */
.ngm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ngm-kpi { background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
a.ngm-kpi:hover { border-color: var(--ngm-accent); color: inherit; }
.ngm-kpi .label { font-size: 12px; font-weight: 700; color: var(--ngm-muted); text-transform: uppercase; letter-spacing: .06em; }
.ngm-kpi .value { font: 700 28px/1 var(--ngm-f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ngm-kpi .sub { font-size: 12.5px; color: var(--ngm-muted); }
.ngm-kpi.warn .value { color: var(--ngm-warn); }
.ngm-kpi.crit .value { color: var(--ngm-crit); }
.ngm-grid-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }

/* Task list */
ul.ngm-tasks { list-style: none; margin: 0; padding: 0; }
ul.ngm-tasks li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--ngm-line); }
ul.ngm-tasks li:first-child { border-top: 0; }
ul.ngm-tasks .sev { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ngm-faint); }
ul.ngm-tasks .sev.crit { background: var(--ngm-crit); }
ul.ngm-tasks .sev.warn { background: var(--ngm-warn); }
ul.ngm-tasks .sev.ok { background: var(--ngm-ok); }
ul.ngm-tasks .t { flex: 1; min-width: 0; }
ul.ngm-tasks .t b { font-weight: 600; }
ul.ngm-tasks .t span { display: block; color: var(--ngm-muted); font-size: 12.5px; }

/* Record pages */
.ngm-record-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ngm-record-head .tile { width: 54px; height: 54px; border-radius: 12px; background: var(--ngm-ink); color: var(--ngm-paper); display: grid; place-items: center; font: 700 18px var(--ngm-f-display); flex: none; }
.ngm-record-head .main { flex: 1; min-width: 0; }
.ngm-record-head h1 { font-size: 24px; margin: 0; font-weight: 700; }
.ngm-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; color: var(--ngm-muted); font-size: 13px; }
.ngm-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ngm-line); border-radius: 12px; background: var(--ngm-surface); }
.ngm-stat-strip > div { padding: 12px 16px; border-inline-start: 1px solid var(--ngm-line); min-width: 0; }
.ngm-stat-strip > div:first-child { border-inline-start: 0; }
.ngm-stat-strip .label { font-size: 12px; color: var(--ngm-muted); font-weight: 600; }
.ngm-stat-strip .value { font: 700 20px var(--ngm-f-display); letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ngm-stat-strip .value.crit { color: var(--ngm-crit); }
nav.ngm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ngm-line); overflow-x: auto; padding: 0 8px; }
nav.ngm-tabs a { border-bottom: 2px solid transparent; padding: 11px 12px; font-weight: 600; color: var(--ngm-muted); white-space: nowrap; text-decoration: none; margin-bottom: -1px; }
nav.ngm-tabs a:hover { color: var(--ngm-ink); }
nav.ngm-tabs a[aria-current="page"] { color: var(--ngm-ink); border-bottom-color: var(--ngm-accent); }
dl.ngm-dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; margin: 0; }
dl.ngm-dl dt { color: var(--ngm-muted); font-weight: 500; }
dl.ngm-dl dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
ul.ngm-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
ul.ngm-timeline li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
ul.ngm-timeline .d { width: 8px; height: 8px; border-radius: 50%; background: var(--ngm-line-strong); transform: translateY(-1px); }
ul.ngm-timeline time { color: var(--ngm-muted); font-size: 12.5px; white-space: nowrap; }

/* Command palette */
.ngm-palette-scrim { position: fixed; inset: 0; background: rgba(10, 11, 14, .42); z-index: 70; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.ngm-palette-scrim[hidden] { display: none; }
.ngm-palette { width: min(640px, 100%); background: var(--ngm-surface); border-radius: 14px; box-shadow: var(--ngm-shadow); overflow: hidden; }
.ngm-palette .bar { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--ngm-line); }
.ngm-palette .bar svg { width: 18px; height: 18px; color: var(--ngm-muted); flex: none; }
.ngm-palette input[type="search"] { border: 0 !important; box-shadow: none !important; padding: 16px 0 !important; font-size: 16px !important; background: transparent !important; }
.ngm-palette .results { max-height: 56vh; overflow-y: auto; padding: 6px 0; }
.ngm-palette h4 { margin: 0; padding: 8px 18px 4px; font-family: var(--ngm-f-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ngm-faint); }
.ngm-palette a.item { display: flex; gap: 10px; align-items: baseline; padding: 9px 18px; color: var(--ngm-ink); text-decoration: none; }
.ngm-palette a.item .title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ngm-palette a.item .meta { color: var(--ngm-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ngm-palette a.item:hover, .ngm-palette a.item.sel { background: var(--ngm-accent-soft); }
.ngm-palette .hint { padding: 18px; margin: 0; color: var(--ngm-muted); }
.ngm-palette .foot { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--ngm-line); color: var(--ngm-faint); font-size: 12px; }

/* Side panel (quick view) */
.ngm-drawer-scrim { position: fixed; inset: 0; background: rgba(10, 11, 14, .35); z-index: 60; }
.ngm-drawer-scrim[hidden], .ngm-drawer[hidden] { display: none; }
.ngm-drawer { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; width: min(520px, 100%); background: var(--ngm-surface); z-index: 61; box-shadow: var(--ngm-shadow); display: flex; flex-direction: column; }
.ngm-drawer .drawer-h { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--ngm-line); }
.ngm-drawer .drawer-h h3 { font-size: 20px; margin: 0; font-weight: 700; }
.ngm-drawer .drawer-b { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.ngm-drawer .drawer-f { padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ngm-line); display: flex; gap: 8px; flex-wrap: wrap; }
.ngm-drawer form { display: inline; }

/* Toast */
.ngm-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ngm-ink); color: var(--ngm-paper); border-radius: 10px; padding: 10px 16px; font-weight: 600; z-index: 80; box-shadow: var(--ngm-shadow); }

/* Impersonation / flash notices inside the shell */
.ngm-flash { border-radius: 10px; padding: 10px 14px; background: var(--ngm-ok-soft); color: var(--ngm-ink); border: 1px solid color-mix(in srgb, var(--ngm-ok) 30%, transparent); }
.ngm-flash.error { background: var(--ngm-crit-soft); border-color: color-mix(in srgb, var(--ngm-crit) 30%, transparent); }

/* App tabs: the current app's pages, under the top bar (replaces the old page-list column) */
.ngm-topbar-brand { display: none; color: var(--ngm-ink); }
.ngm-topbar-brand svg { width: 26px; height: auto; display: block; }
.ngm-apptabs { display: flex; align-items: center; gap: 4px; padding: 0 28px; background: var(--ngm-surface); border-bottom: 1px solid var(--ngm-line); min-height: 46px; }
.ngm-apptabs-app { font: 700 15px var(--ngm-f-display); letter-spacing: -.01em; margin-inline-end: 14px; white-space: nowrap; }
.ngm-apptabs-list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ngm-apptabs-list::-webkit-scrollbar { display: none; }
.ngm-apptabs-list a, .ngm-apptabs-more { border: 0; background: transparent; border-bottom: 2px solid transparent; padding: 12px 11px 11px; font-weight: 600; font-size: 13.5px; color: var(--ngm-muted); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ngm-apptabs-list a:hover, .ngm-apptabs-more:hover { color: var(--ngm-ink); }
.ngm-apptabs-list a[aria-current="page"] { color: var(--ngm-ink); border-bottom-color: var(--ngm-accent); }
.ngm-apptabs-more svg { width: 14px; height: 14px; }
.ngm-apptabs .ngm-menu-wrap { flex: none; }

/* Settings: grouped in-page menu next to the working canvas */
.ngm-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.ngm-settings-nav { position: sticky; top: calc(var(--ngm-topbar-h) + 16px); display: flex; flex-direction: column; gap: 14px; }
.ngm-settings-nav h3 { font-family: var(--ngm-f-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ngm-faint); margin: 0 10px 4px; }
.ngm-settings-nav a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ngm-muted); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.ngm-settings-nav a:hover { color: var(--ngm-ink); background: var(--ngm-sunk); }
.ngm-settings-nav a[aria-current="page"] { background: var(--ngm-surface); color: var(--ngm-ink); box-shadow: inset 0 0 0 1px var(--ngm-line); }
.ngm-settings-body { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* Responsive */
@media (max-width: 1200px) { .ngm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ngm-grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
    .ngm-shell, .ngm-shell.no-subnav { grid-template-columns: minmax(0, 1fr); }
    /* The rail becomes a bottom app bar on phones and small tablets */
    .ngm-rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; justify-content: space-around; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; z-index: 52; }
    .ngm-rail .ngm-brand, .ngm-rail .ngm-spacer { display: none; }
    .ngm-rail a.ngm-app { width: auto; min-width: 54px; padding: 6px 4px; font-size: 10.5px; }
    .ngm-main { padding-bottom: 72px; }
    .ngm-topbar-brand { display: inline-grid; }
    .ngm-topbar { padding: 0 14px; gap: 8px; }
    .ngm-apptabs { padding: 0 8px; }
    .ngm-apptabs-app { display: none; }
    .ngm-content { padding: 16px 16px 40px; }
    .ngm-user .meta, .ngm-search-trigger kbd { display: none; }
    .ngm-search-trigger { padding: 0 10px; }
    .ngm-page-header .actions { margin-inline-start: 0; }
    .ngm-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ngm-stat-strip > div:nth-child(3) { border-inline-start: 0; }
    .ngm-stat-strip > div:nth-child(n+3) { border-top: 1px solid var(--ngm-line); }
    form.ngm-filter input[type="search"] { min-width: 0; flex: 1 1 100%; }
    dl.ngm-dl { grid-template-columns: 120px minmax(0, 1fr); }
    .ngm-settings { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ngm-settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
    .ngm-settings-nav .group { display: contents; }
    .ngm-settings-nav h3 { display: none; }
    .ngm-settings-nav a { white-space: nowrap; }
}
.ngm-nav-toggle, .ngm-nav-scrim, .ngm-subnav { display: none !important; }
/* Brand mark inside the buyer / guest header and sidebar */
.ngm-logo-mark { display: inline-grid; place-items: center; width: 34px; height: 38px; color: currentColor; }
.ngm-logo-mark svg { width: 30px; height: auto; display: block; }
.header-logo .ngm-logo-mark { color: inherit; }

/* Existing status pills, restyled to match */
body.ngm-staff .status-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; background: var(--ngm-sunk); color: var(--ngm-muted); border: 0; }
body.ngm-staff .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.ngm-staff .status-pill.success { background: var(--ngm-ok-soft); color: var(--ngm-ok); }
body.ngm-staff .status-pill.warning { background: var(--ngm-warn-soft); color: var(--ngm-warn); }
body.ngm-staff .status-pill.danger { background: var(--ngm-crit-soft); color: var(--ngm-crit); }
body.ngm-staff .status-pill.neutral { background: var(--ngm-sunk); color: var(--ngm-muted); }

/* Home dashboard */
body.ngm-staff details.dash-modules > summary { cursor: pointer; list-style: none; }
body.ngm-staff details.dash-modules > summary::-webkit-details-marker { display: none; }
body.ngm-staff details.dash-modules:not([open]) > summary { border-bottom: 0; }
body.ngm-staff .kpi-card .kpi-value { font-family: var(--ngm-f-display); font-weight: 700; letter-spacing: -.02em; }
body.ngm-staff .kpi-card .kpi-label { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 700; color: var(--ngm-muted); white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }

/* Buyer storefront and guest pages inherit the same identity */
:root {
    --menu-bg: var(--ngm-rail);
    --sidemenu-active-bgcolor: var(--ngm-paper);
    --header-prime-color: var(--ngm-muted);
}
body:not(.ngm-staff) { font-family: var(--ngm-f-body); }
body:not(.ngm-staff) .main-content-title { font-family: var(--ngm-f-display); font-weight: 700; letter-spacing: -.02em; }
body:not(.ngm-staff) .header-logo .logo-text { font-family: var(--ngm-f-display); font-weight: 700; letter-spacing: -.01em; }
body:not(.ngm-staff) .app-sidebar .header-logo { color: #fff; }
body:not(.ngm-staff) .card { box-shadow: none; border: 1px solid var(--ngm-line); }

/* Storefront landing hero */
.ngm-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: center; background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 16px; padding: clamp(24px, 5vw, 56px); margin: 8px 0 18px; }
.ngm-hero-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ngm-muted); }
.ngm-hero h1 { font-family: var(--ngm-f-display); font-weight: 700; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.05; letter-spacing: -.025em; margin: 0 0 14px; max-width: 16ch; text-wrap: balance; }
.ngm-hero p { font-size: 16px; color: var(--ngm-muted); max-width: 52ch; margin: 0 0 20px; }
.ngm-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ngm-hero-actions .button { padding: 11px 18px; font-weight: 600; font-size: 15px; border-radius: 10px; }
.ngm-hero-logo { color: var(--ngm-ink); display: grid; place-items: center; }
.ngm-hero-logo svg { width: min(100%, 320px); height: auto; }
ul.ngm-hero-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
ul.ngm-hero-points li { background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
ul.ngm-hero-points b { font-weight: 700; }
ul.ngm-hero-points span { color: var(--ngm-muted); font-size: 13.5px; }
@media (max-width: 900px) {
    .ngm-hero { grid-template-columns: minmax(0, 1fr); }
    .ngm-hero-logo { order: -1; justify-items: start; }
    .ngm-hero-logo svg { width: 150px; }
    ul.ngm-hero-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { ul.ngm-hero-points { grid-template-columns: minmax(0, 1fr); } }

.ngm-guest-wide { width: min(1180px, 100%); margin: 1.5rem auto; }
@media (max-width: 960px) {
    /* Keep empty-state text on screen when its table scrolls sideways */
    .ngm-table-wrap .ngm-empty { position: sticky; left: 0; width: min(100%, calc(100vw - 64px)); text-align: left; }
}
ul.ngm-timeline .sub { display: block; font-size: 12.5px; }
table.ngm-table td.wrap { min-width: 240px; }

/* Authenticator setup QR code: always dark modules on white so phone cameras can read it */
.totp-qr { display: inline-block; background: #fff; padding: 12px; border-radius: 12px; border: 1px solid #e5e7eb; line-height: 0; margin: .25rem 0 .75rem; }
.totp-qr svg { width: 220px; height: 220px; display: block; }

/* Verification rules and method pickers */
.ngm-choice-list { display: grid; gap: .5rem; margin: .5rem 0 1rem; }
.ngm-choice { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--ngm-line); border-radius: 10px; cursor: pointer; }
.ngm-choice:has(input:checked) { border-color: var(--ngm-accent); background: var(--ngm-accent-soft); }
.ngm-choice input { margin-top: .2rem; width: auto; }
.ngm-choice .ngm-choice-title { font-weight: 600; display: block; }
.ngm-choice .ngm-choice-text { color: var(--ngm-muted); font-size: .86rem; display: block; }
.ngm-choice.is-locked { cursor: default; opacity: .85; }
.ngm-rules-table td { vertical-align: top; }
.ngm-rules-table .ngm-rule-toggle { white-space: nowrap; }
.ngm-rules-table .ngm-rule-toggle input { width: auto; margin-right: .35rem; }
.ngm-rules-table .ngm-rule-toggle label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 600; }

/* --------------------------------------------------------------------------
   Mockup alignment for the existing views: one panel per list (toolbar + table),
   quiet in-row buttons, compact headers. Applies to every backoffice page.
   -------------------------------------------------------------------------- */
body.ngm-staff .card { border-radius: 12px; }
body.ngm-staff .card:not(:has(> .card-body, > .card-header, > .card-footer)):not(details):not(.table-card):not(.filter-card) { padding: 16px 18px; }
body.ngm-staff .card-header { padding: 14px 18px; gap: 10px; }
body.ngm-staff .card-header .card-title-group p { font-size: 13px; max-width: 90ch; }
body.ngm-staff .card.table-card > .card-header { padding: 14px 18px; }
body.ngm-staff .card.table-card table th:first-child, body.ngm-staff .card.table-card table td:first-child { padding-inline-start: 18px; }
body.ngm-staff .card.table-card table th:last-child, body.ngm-staff .card.table-card table td:last-child { padding-inline-end: 18px; }
body.ngm-staff .card.table-card table td { padding-top: 11px; padding-bottom: 11px; vertical-align: middle; }
body.ngm-staff .card.table-card table th { padding-top: 9px; padding-bottom: 9px; text-transform: uppercase; }
body.ngm-staff .card.table-card .card-footer { padding: 12px 18px; color: var(--ngm-muted); font-size: 13px; }
body.ngm-staff .ngm-page-header .subtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Filters sit on top of the list they filter, as one panel */
body.ngm-staff .stack > .filter-card:has(+ .table-card) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: calc(-1rem - 1px); position: relative; z-index: 1; background: var(--ngm-surface); }
body.ngm-staff .stack > .filter-card + .table-card { border-top-left-radius: 0; border-top-right-radius: 0; }
body.ngm-staff .filter-card { padding: 12px 18px !important; }
body.ngm-staff .filter-card .filter-bar { gap: 10px; align-items: end; }
body.ngm-staff .filter-card label { font-size: 12px; color: var(--ngm-muted); font-weight: 600; }

/* In-row actions are secondary: neutral buttons, danger stays recognisable but soft */
body.ngm-staff td button:not(.danger):not(.ngm-btn), body.ngm-staff td .button:not(.danger), body.ngm-staff td a.btn-primary, body.ngm-staff td .btn-primary {
    background: var(--ngm-surface); border: 1px solid var(--ngm-line); color: var(--ngm-ink); box-shadow: none; font-weight: 600;
}
body.ngm-staff td button:not(.danger):not(.ngm-btn):hover, body.ngm-staff td .button:not(.danger):hover, body.ngm-staff td .btn-primary:hover { border-color: var(--ngm-line-strong); background: var(--ngm-surface); color: var(--ngm-ink); }
body.ngm-staff td button.danger, body.ngm-staff td .button.danger { background: var(--ngm-surface); border: 1px solid color-mix(in srgb, var(--ngm-crit) 40%, var(--ngm-line)); color: var(--ngm-crit); }
body.ngm-staff td button.danger:hover, body.ngm-staff td .button.danger:hover { background: var(--ngm-crit-soft); }

/* Rows that open a record are clickable as a whole (set by ngm-app.js) */
body.ngm-staff tr.ngm-autolink { cursor: pointer; }

/* Row action menus built by ngm-app.js from rows full of inline forms */
.ngm-row-menu-wrap { position: relative; display: inline-block; }
.ngm-row-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 45; background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 12px; box-shadow: var(--ngm-shadow); padding: 12px; width: min(340px, 86vw); display: flex; flex-direction: column; gap: 10px; text-align: start; white-space: normal; }
.ngm-row-menu[hidden] { display: none; }
.ngm-row-menu form { display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; padding-top: 10px; border-top: 1px solid var(--ngm-line); }
.ngm-row-menu form:first-child { border-top: 0; padding-top: 0; }
.ngm-row-menu form input:not([type=hidden]), .ngm-row-menu form select { flex: 1 1 100%; width: 100% !important; }
.ngm-row-menu > a { font-weight: 600; }
.ngm-chip .n { margin-inline-start: 5px; opacity: .7; font-variant-numeric: tabular-nums; }
.ngm-pager { display: inline-flex; gap: 6px; }
.ngm-toolbar form.ngm-filter { margin-inline-start: auto; }

/* Home: receivables bars and the page directory */
.ngm-aging { display: flex; flex-direction: column; gap: 12px; }
.ngm-aging .row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 12px; align-items: center; margin: 0; }
.ngm-aging .row > * { padding: 0; width: auto; }
.ngm-aging .track { height: 12px; background: var(--ngm-sunk); border-radius: 4px; overflow: hidden; }
.ngm-aging .track i { display: block; height: 100%; border-radius: 4px; }
.ngm-aging .num { text-align: end; font-variant-numeric: tabular-nums; }
.ngm-aging .row.total { border-top: 1px solid var(--ngm-line); padding-top: 10px; font-weight: 700; }
ul.ngm-tasks li > .num { white-space: nowrap; }
ul.ngm-tasks .t span a { color: var(--ngm-accent); }
details.ngm-panel > summary { cursor: pointer; list-style: none; border-bottom: 0; }
details.ngm-panel > summary::-webkit-details-marker { display: none; }
details.ngm-panel[open] > summary { border-bottom: 1px solid var(--ngm-line); }
.ngm-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px 24px; }
.ngm-directory h3 { font-family: var(--ngm-f-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ngm-faint); margin: 0 0 6px; }
.ngm-directory ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ngm-directory a { display: block; padding: 4px 0; color: var(--ngm-ink); font-weight: 600; text-decoration: none; font-size: 13.5px; }
.ngm-directory a:hover { color: var(--ngm-accent); }
.ngm-directory small { display: block; color: var(--ngm-muted); font-weight: 400; font-size: 12px; }
@media (max-width: 960px) { .ngm-aging .row { grid-template-columns: 80px minmax(0, 1fr) 90px; } }
ul.ngm-timeline a.ngm-row-title { color: var(--ngm-ink); font-weight: 500; text-decoration: none; }
ul.ngm-timeline a.ngm-row-title:hover { color: var(--ngm-accent); }
.ngm-grid-2 { align-items: start; }
body.ngm-staff .filter-card button[type="submit"]:not(.danger) { background: var(--ngm-surface); border: 1px solid var(--ngm-line); color: var(--ngm-ink); }
@media (max-width: 960px) { .ngm-rail a.ngm-app { min-width: 0; flex: 1 1 0; font-size: 9.5px; padding: 6px 2px; } .ngm-rail a.ngm-app svg { width: 19px; height: 19px; } }

/* Signed-out backoffice pages (login, device verification, password reset) */
body.ngm-staff-auth { min-height: 100vh; background: var(--ngm-rail); display: flex; flex-direction: column; align-items: center; padding: 0 0 32px; }
body.ngm-staff-auth > .ngm-demo-ticker { align-self: stretch; }
.ngm-staff-auth-main { width: min(440px, calc(100% - 32px)); margin-top: 8vh; display: flex; flex-direction: column; gap: 14px; }
.ngm-staff-auth-brand { color: #fff; display: flex; justify-content: center; margin-bottom: 6px; }
.ngm-staff-auth-brand svg { max-height: 54px; width: auto; }
.ngm-staff-auth-main .auth-wrap { width: 100%; margin: 0; }
.ngm-staff-auth-main .card h1 { font-size: 22px; margin: 0 0 12px; }
.ngm-staff-auth-main .card { border-radius: 14px; }

/* Product images panel (backoffice product page) */
.ngm-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 16px; }
.ngm-image-tile { margin: 0; border: 1px solid var(--ngm-line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.ngm-image-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #fff; }
.ngm-image-tile figcaption { display: flex; gap: 4px; flex-wrap: wrap; min-height: 20px; }
.ngm-image-tile form { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ngm-image-tile label { font-size: 12px; margin: 0; }

/* "Demo purpose only" ticker (all layouts) */
.ngm-demo-ticker { position: relative; z-index: 1100; overflow: hidden; background: #F5A623; color: #15161B; font: 700 12.5px/1 var(--ngm-f-body, system-ui), sans-serif; letter-spacing: .06em; text-transform: uppercase; height: 26px; display: flex; align-items: center; }
.ngm-demo-ticker-track { display: flex; gap: 48px; white-space: nowrap; padding-inline-start: 24px; animation: ngm-demo-ticker 45s linear infinite; }
.ngm-demo-ticker-track span::before { content: "\25CF"; margin-inline-end: 10px; font-size: 8px; vertical-align: 2px; }
@keyframes ngm-demo-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ngm-demo-ticker-track { animation: none; } }

/* Product page header (backoffice) */
.ngm-back { display: inline-block; margin: 0 0 10px; font-weight: 600; text-decoration: none; color: var(--ngm-muted) !important; }
.ngm-back:hover { color: var(--ngm-accent) !important; }
.ngm-product-head { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 20px; }
.ngm-product-media { width: 140px; height: 140px; border-radius: 14px; border: 1px solid var(--ngm-line); background: #fff; display: grid; place-items: center; overflow: hidden; }
.ngm-product-media img { width: 100%; height: 100%; object-fit: contain; }
.ngm-product-media span { font: 700 34px var(--ngm-f-display, inherit); color: var(--ngm-muted); }
.ngm-product-main h1 { margin: 2px 0; font-size: 26px; }
.ngm-product-main p { margin: 0; }
.ngm-product-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ngm-product-facts { display: grid; grid-template-columns: repeat(2, minmax(110px, auto)); gap: 10px 22px; margin: 0; }
.ngm-product-facts dt { font-size: 12px; color: var(--ngm-muted); font-weight: 600; }
.ngm-product-facts dd { margin: 0; font-weight: 700; font-size: 16px; }
.ngm-product-head > .ngm-btn { grid-column: 1 / -1; justify-self: start; }
.ngm-product-nav { position: sticky; top: 56px; z-index: 5; background: var(--ngm-paper, #f6f7f9); margin: 12px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.ngm-product-nav a { padding: 7px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 13.5px; color: var(--ngm-ink) !important; background: var(--ngm-surface, #fff); border: 1px solid var(--ngm-line); }
.ngm-product-nav a:hover { border-color: var(--ngm-accent); color: var(--ngm-accent) !important; }
#product-variants, #product-images-section, #product-details, #product-visibility, #product-retirement { scroll-margin-top: 110px; }
@media (max-width: 900px) { .ngm-product-head { grid-template-columns: 96px minmax(0, 1fr); } .ngm-product-media { width: 96px; height: 96px; } .ngm-product-facts { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Website pages: layout picker with wireframe thumbnails (homepage-content/partials/template-preview). */
.ngm-template-picker { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.ngm-template-picker legend { font-family: var(--ngm-f-display); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.ngm-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 10px; align-items: start; }
.ngm-template-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1.5px solid var(--ngm-line); border-radius: 12px; background: var(--ngm-surface); cursor: pointer; margin: 0; transition: border-color .15s, box-shadow .15s; }
.ngm-template-card:hover { border-color: var(--ngm-line-strong); box-shadow: 0 4px 14px rgba(21, 22, 27, .07); }
.ngm-template-card input { position: absolute; top: 18px; right: 18px; width: 18px !important; height: 18px; margin: 0; accent-color: var(--ngm-accent); z-index: 1; }
.ngm-template-card:has(input:checked) { border-color: var(--ngm-accent); box-shadow: 0 0 0 3px rgba(var(--ngm-accent-rgb), .18); }
.ngm-template-card:has(input:focus-visible) { outline: 2px solid var(--ngm-accent); outline-offset: 2px; }
.ngm-template-shot { display: block; background: var(--ngm-sunk); border-radius: 8px; padding: 8px; }
.ngm-template-preview { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 3px rgba(21, 22, 27, .12); }
.ngm-template-name { font-weight: 700; font-size: 15px; color: var(--ngm-ink); }
.ngm-template-tagline { font-size: 13.5px; color: var(--ngm-ink); line-height: 1.45; }
.ngm-template-parts { font-size: 12px; color: var(--ngm-muted); line-height: 1.45; }
.ngm-template-current { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 14px; }
.ngm-template-current p { margin: 0 0 8px; }
@media (max-width: 640px) { .ngm-template-current { grid-template-columns: 1fr; } .ngm-template-current .ngm-template-shot { max-width: 260px; } }

/* Website pages editor (backoffice/homepage-content/show). */
.ngm-pages { display: flex; flex-direction: column; gap: 14px; }
.ngm-pages-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ngm-pages-head h1 { margin: 0; }
.ngm-pages-head p { margin: 0; }
.ngm-page-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ngm-page-tabs > a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ngm-line); background: var(--ngm-surface); color: var(--ngm-ink) !important; text-decoration: none; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.ngm-page-tabs > a:hover { border-color: var(--ngm-line-strong); }
.ngm-page-tabs > a[aria-current="page"] { background: var(--ngm-ink); border-color: var(--ngm-ink); color: #fff !important; }
.ngm-page-tabs .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ngm-warn); }
.ngm-page-find { position: relative; }
.ngm-page-find > summary { list-style: none; cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 1px dashed var(--ngm-line-strong); font-weight: 600; font-size: 14px; color: var(--ngm-muted); }
.ngm-page-find > summary::-webkit-details-marker { display: none; }
.ngm-page-find form { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 8px; width: 300px; padding: 12px; background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 12px; box-shadow: var(--ngm-shadow); }
.ngm-pages-status { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.ngm-pages-status p { margin: 0 0 4px; }
.ngm-pages-actions { display: flex; gap: 8px; }
.ngm-pages-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; }
.ngm-pages-layout h2 { margin: 0 0 4px; }
.ngm-pages-layout p { margin: 0 0 10px; }
.ngm-pages > .ngm-panel { padding: 16px 18px; }
.ngm-dialog { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 16px; padding: 0; box-shadow: var(--ngm-shadow); }
.ngm-dialog::backdrop { background: rgba(21, 22, 27, .45); }
.ngm-dialog form { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.ngm-dialog header, .ngm-dialog footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ngm-dialog footer { justify-content: flex-end; position: sticky; bottom: -18px; background: var(--ngm-surface); padding: 12px 0 18px; margin-bottom: -18px; border-top: 1px solid var(--ngm-line); }
.ngm-dialog h2 { margin: 0; }
.ngm-dialog-close { background: none !important; border: 0 !important; font-size: 26px; line-height: 1; color: var(--ngm-muted) !important; padding: 0 4px !important; }
.ngm-builder { display: flex; flex-direction: column; gap: 12px; }
.ngm-builder-intro { margin: 4px 0 0; color: var(--ngm-muted); }
.ngm-block { background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ngm-block-head { display: flex; gap: 12px; align-items: center; }
.ngm-block-head h3 { margin: 0; font-size: 16px; }
.ngm-block-head p { margin: 0; font-size: 13px; }
.ngm-block-num { width: 28px; height: 28px; border-radius: 50%; background: var(--ngm-accent-soft); color: var(--ngm-accent); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ngm-grip { cursor: grab; color: var(--ngm-faint); font-size: 16px; user-select: none; }
.ngm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ngm-tile { position: relative; border: 1px solid var(--ngm-line); border-radius: 12px; background: var(--ngm-surface); display: flex; flex-direction: column; }
.ngm-tile > img { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; border-radius: 11px 11px 0 0; background: var(--ngm-sunk); display: block; }
.ngm-tile > .ngm-grip { position: absolute; top: 6px; left: 6px; background: rgba(255, 255, 255, .92); border-radius: 6px; padding: 0 6px; }
.ngm-tile-body { padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.ngm-tile-body .muted { font-size: 12.5px; }
.ngm-tile-actions { display: flex; align-items: center; gap: 6px; padding: 6px 10px 10px; flex-wrap: wrap; }
.ngm-tile-actions form { margin: 0; }
.ngm-move { border: 1px solid var(--ngm-line) !important; background: var(--ngm-surface) !important; color: var(--ngm-ink) !important; border-radius: 6px !important; padding: 0 8px !important; min-height: 26px; line-height: 1; font-size: 16px; }
.ngm-tile-edit > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ngm-accent); padding: 3px 6px; }
.ngm-tile-edit > summary::-webkit-details-marker { display: none; }
.ngm-tile-edit[open] { flex-basis: 100%; order: 10; }
.ngm-tile-edit[open] .ngm-tile-popover { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ngm-line); }
.ngm-tile:has(.ngm-tile-edit[open]) { grid-column: 1 / -1; }
.ngm-tile:has(.ngm-tile-edit[open]) > img { max-height: 180px; }
.ngm-link-danger { background: none !important; border: 0 !important; color: var(--ngm-crit) !important; font-weight: 600; font-size: 13.5px; padding: 3px 6px !important; }
.ngm-empty { margin: 0; color: var(--ngm-muted); font-size: 14px; padding: 6px 0; grid-column: 1 / -1; }
.ngm-add > summary, .ngm-advanced > summary, .ngm-schedule > summary, .ngm-discard > summary { cursor: pointer; font-weight: 600; color: var(--ngm-accent); font-size: 14px; }
.ngm-add[open] { border: 1px dashed var(--ngm-line-strong); border-radius: 12px; padding: 12px 14px; }
.ngm-add[open] > summary { margin-bottom: 10px; }
.ngm-banner-form { display: flex; flex-direction: column; gap: 10px; }
.ngm-dest { border: 1px solid var(--ngm-line); border-radius: 10px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ngm-dest legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.ngm-dest-options { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ngm-dest-options label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 500; }
.ngm-dest-options input { width: auto !important; }
.ngm-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 8px; }
.ngm-chip-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 8px; border: 1px solid var(--ngm-line); border-radius: 999px; background: var(--ngm-surface); font-size: 13.5px; font-weight: 500; cursor: grab; }
.ngm-chip-item form { margin: 0; display: inline; }
.ngm-chip-item .ngm-move { min-height: 22px; padding: 0 6px !important; font-size: 14px; }
.ngm-chip-x { background: var(--ngm-sunk) !important; border: 0 !important; color: var(--ngm-muted) !important; border-radius: 50% !important; width: 22px; height: 22px; padding: 0 !important; line-height: 1; font-size: 15px; }
.ngm-chip-x:hover { background: var(--ngm-crit-soft) !important; color: var(--ngm-crit) !important; }
.is-dragging { opacity: .45; }
[data-sortable].is-saving { opacity: .7; }
[data-sortable].is-saved { outline: 2px solid var(--ngm-ok); outline-offset: 4px; border-radius: 10px; }
.ngm-add-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.ngm-add-inline input[type="search"] { flex: 1 1 240px; width: auto; }
.ngm-add-inline select { flex: 1 1 220px; width: auto; }
.ngm-fill-mode { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ngm-fill-mode fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ngm-fill-mode legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ngm-choice { display: flex !important; gap: 8px; align-items: flex-start; border: 1.5px solid var(--ngm-line); border-radius: 10px; padding: 10px 12px; margin: 0; cursor: pointer; font-weight: 400; font-size: 13.5px; }
.ngm-choice input { width: auto !important; margin-top: 3px; accent-color: var(--ngm-accent); }
.ngm-choice:has(input:checked) { border-color: var(--ngm-accent); background: var(--ngm-accent-soft); }
.ngm-advanced { border-top: 1px solid var(--ngm-line); padding-top: 10px; }
.ngm-advanced[open] > *:not(summary) { margin-top: 10px; }
.ngm-row-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ngm-inline { display: inline-flex !important; gap: 6px; align-items: center; margin: 0; font-weight: 500; }
.ngm-content-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ngm-publish form { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.ngm-publish h2 { margin-top: 0; }
.ngm-discard { margin-top: 14px; }
.ngm-discard[open] form { margin-top: 8px; }
.ngm-history > summary { cursor: pointer; font-weight: 700; }
.ngm-history[open] > summary { margin-bottom: 10px; }
@media (max-width: 700px) { .ngm-pages-layout { grid-template-columns: 1fr; } .ngm-pages-layout .ngm-template-shot { max-width: 240px; } }
.ngm-pages form button[type="submit"], .ngm-dialog button { width: auto; align-self: flex-start; }
.ngm-add-inline button[type="submit"] { align-self: center; }

/* Home dashboard widgets (backoffice/dashboard + dashboard/widgets, dashboard/kit). 12-column grid; w-N = N columns. */
.ngm-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ngm-dash > * { margin: 0 !important; min-width: 0; }
.ngm-dash > .w-3 { grid-column: span 3; } .ngm-dash > .w-4 { grid-column: span 4; } .ngm-dash > .w-6 { grid-column: span 6; }
.ngm-dash > .w-8 { grid-column: span 8; } .ngm-dash > .w-12 { grid-column: span 12; }
.ngm-widget { background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 14px; overflow: hidden; }
.ngm-widget-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ngm-line); }
.ngm-widget-h h2 { margin: 0; font-size: 15.5px; display: inline; }
.ngm-widget-h .hint { color: var(--ngm-muted); font-size: 13px; margin-left: 8px; }
.ngm-widget-empty { margin: 0; padding: 18px; color: var(--ngm-muted); font-size: 14px; }
.ngm-widget-row { display: grid; grid-template-columns: repeat(var(--cards, 4), minmax(0, 1fr)); gap: 16px; }
.ngm-stat { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 14px; background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 14px; color: var(--ngm-ink) !important; text-decoration: none; overflow: hidden; min-height: 112px; transition: border-color .15s, box-shadow .15s; }
a.ngm-stat:hover { border-color: var(--ngm-line-strong); box-shadow: 0 4px 16px rgba(21, 22, 27, .07); }
.ngm-stat-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ngm-muted); }
.ngm-stat-value { font-family: var(--ngm-f-display); font-size: 28px; font-weight: 700; line-height: 1.1; }
.ngm-stat.crit .ngm-stat-value { color: var(--ngm-crit); }
.ngm-stat.warn .ngm-stat-value { color: var(--ngm-warn); }
.ngm-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.ngm-stat.crit::before { background: var(--ngm-crit); } .ngm-stat.warn::before { background: var(--ngm-warn); } .ngm-stat.ok::before { background: var(--ngm-ok); }
.ngm-stat-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ngm-muted); position: relative; z-index: 1; }
.ngm-stat-trend { font-weight: 700; padding: 1px 7px; border-radius: 999px; font-size: 12px; }
.ngm-stat-trend.up { color: var(--ngm-ok); background: var(--ngm-ok-soft); }
.ngm-stat-trend.down { color: var(--ngm-crit); background: var(--ngm-crit-soft); }
.ngm-stat-spark { position: absolute; right: 12px; top: 14px; width: 92px; height: 28px; }
.ngm-stat-spark path { fill: none; stroke: var(--ngm-accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ngm-wlist { list-style: none; margin: 0; padding: 4px 0; }
.ngm-wlist > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "rank main val" "rank bar bar"; column-gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--ngm-line); }
.ngm-wlist > li:first-child { border-top: 0; }
.ngm-wlist .rank { grid-area: rank; width: 24px; height: 24px; border-radius: 50%; background: var(--ngm-sunk); color: var(--ngm-muted); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.ngm-wlist .main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.ngm-wlist .main a, .ngm-wlist .main b { font-weight: 600; color: var(--ngm-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ngm-wlist .main a:hover { color: var(--ngm-accent); }
.ngm-wlist .sub { color: var(--ngm-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ngm-wlist .val { grid-area: val; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ngm-wlist .val.ok { color: var(--ngm-ok); } .ngm-wlist .val.crit { color: var(--ngm-crit); }
.ngm-wlist .bar { grid-area: bar; height: 4px; background: var(--ngm-sunk); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.ngm-wlist .bar i { display: block; height: 100%; background: var(--ngm-accent); border-radius: 4px; }
.ngm-wlist.compact > li { padding: 7px 0; grid-template-areas: "main val"; grid-template-columns: minmax(0, 1fr) auto; }
.ngm-quick { display: flex; flex-wrap: wrap; gap: 10px; }
.ngm-quick a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--ngm-surface); border: 1px solid var(--ngm-line); border-radius: 12px; color: var(--ngm-ink) !important; text-decoration: none; font-weight: 600; font-size: 14px; }
.ngm-quick a:hover { border-color: var(--ngm-accent); color: var(--ngm-accent) !important; }
.ngm-quick a svg { width: 17px; height: 17px; color: var(--ngm-accent); }
.ngm-health { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; }
.ngm-ring { --pct: 0; width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--ngm-ok) calc(var(--pct) * 1%), var(--ngm-sunk) 0); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.ngm-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--ngm-surface); }
.ngm-ring span, .ngm-ring small { position: relative; }
.ngm-ring span { font-family: var(--ngm-f-display); font-size: 24px; font-weight: 700; }
.ngm-ring small { color: var(--ngm-muted); font-size: 12px; }
.ngm-health ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ngm-health li { display: flex; gap: 12px; align-items: flex-start; }
.ngm-health li b { min-width: 42px; text-align: center; padding: 2px 8px; border-radius: 8px; background: var(--ngm-sunk); font-variant-numeric: tabular-nums; }
.ngm-health li.warn b { background: var(--ngm-warn-soft); color: var(--ngm-warn); }
.ngm-health li.crit b { background: var(--ngm-crit-soft); color: var(--ngm-crit); }
.ngm-health li.info b { background: var(--ngm-accent-soft); color: var(--ngm-accent); }
.ngm-health li.ok b { background: var(--ngm-ok-soft); color: var(--ngm-ok); }
.ngm-health li span { display: flex; flex-direction: column; font-weight: 600; font-size: 14px; }
.ngm-health li small { color: var(--ngm-muted); font-weight: 400; font-size: 12.5px; }
.ngm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 10px 18px 14px; }
.ngm-split h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ngm-muted); margin: 6px 0 4px; }
.ngm-split h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ngm-dash > .ngm-panel { border-radius: 14px; }
@media (max-width: 1180px) {
    .ngm-dash > .w-3, .ngm-dash > .w-4 { grid-column: span 6; }
    .ngm-widget-row { grid-template-columns: repeat(min(var(--cards, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .ngm-dash > .w-3, .ngm-dash > .w-4, .ngm-dash > .w-6, .ngm-dash > .w-8 { grid-column: span 12; }
    .ngm-widget-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ngm-split, .ngm-health { grid-template-columns: 1fr; }
}