/* T.EN palette (Technip Energies brand), the second palette next to the default one.
 *
 * Two independent axes on <html>:
 *   data-theme   = light | dark        the scheme (unchanged; the user's saved preference)
 *   data-palette = default | ten       the palette (js/base/boot.js, localStorage "dtp.palette")
 * Brand hexes are the ones lng/dtp uses (frontend/src/index.css, "T.EN design tokens"). Everything
 * below is generated from them by solving each text/fill pair to WCAG AA (4.5:1 text, 3:1 marks)
 * on this palette's own surfaces; testing/ui/test_assets.py checks the same pairs.
 * Loaded after tokens.css and base.css. Components read only the tokens, never these hexes.
 */
:root[data-palette="ten"] {
  --ten-accent: #0070ef;
  --ten-navy: #004c84;
  --ten-teal: #3d98b7;
  --ten-lime: #a2c61c;
  --ten-sage: #80c7a0;
  --ten-coral: #ee7766;
  --ten-amber: #fdc300;
  --ten-red: #e84242;
  --ten-grey: #878787;
  --ten-light-grey: #dedede;
}

:root[data-palette="ten"], :root[data-palette="ten"][data-theme="light"] {
  color-scheme: light;
  --dtp-canvas: #eef1f4;
  --dtp-surface: #ffffff;
  --dtp-surface-raised: #ffffff;
  --dtp-surface-sunken: #f1f4f6;
  --dtp-border: #e4e9ee;
  --dtp-border-strong: #878787;
  --dtp-text: #0a1c2e;
  --dtp-text-muted: #52606b;
  --dtp-text-subtle: #626e76;
  --dtp-overlay: rgba(3, 20, 40, 0.45);
  --dtp-shadow-sm: 0 1px 2px rgba(3, 20, 40, 0.10);
  --dtp-shadow-md: 0 8px 24px -14px rgba(3, 20, 40, 0.35);
  --dtp-primary: #0070ef;
  --dtp-primary-text: #0058bd;
  --dtp-primary-fill: #0070ef;
  --dtp-on-primary: #ffffff;
  --dtp-primary-soft: #dbebfd;
  --dtp-row-selected: #dbebfd;
  --dtp-row-hover: #f2f8fe;
  --dtp-focus: #0058bd;
  --dtp-ok-fg: #607511;
  --dtp-ok-soft: #f0f6db;
  --dtp-ok-solid: #829e16;
  --dtp-ok-on-solid: #0a1c2e;
  --dtp-warn-fg: #896900;
  --dtp-warn-soft: #fff5d6;
  --dtp-warn-solid: #b68c00;
  --dtp-warn-on-solid: #0a1c2e;
  --dtp-crit-fg: #ba3535;
  --dtp-crit-soft: #fbe1e1;
  --dtp-crit-solid: #d53d3d;
  --dtp-crit-on-solid: #ffffff;
  --dtp-na-fg: #696969;
  --dtp-na-soft: #ececec;
  --dtp-na-solid: #878787;
  --dtp-na-on-solid: #0a1c2e;
  --dtp-info-fg: #2d7087;
  --dtp-info-soft: #e0eff3;
  --dtp-info-solid: #3d98b7;
  --dtp-info-on-solid: #0a1c2e;
  --dtp-violet-fg: #754dcf;
  --dtp-violet-soft: #ece5fe;
  --dtp-violet-solid: #8457ea;
  --dtp-violet-on-solid: #ffffff;
  --bg-primary: #ffffff;
  --bg-secondary: #eef1f4;
  --bg-tertiary: #f1f4f6;
  --bg-quaternary: #f1f4f6;
  --bg-neutral-subtle: #ececec;
  --text-primary: #0a1c2e;
  --text-secondary: #52606b;
  --text-tertiary: #626e76;
  --border-color: #e4e9ee;
  --color-primary: #0070ef;
  --color-primary-hover: #0063d2;
  --color-primary-dark: #004c84;
  --bg-primary-subtle: #dbebfd;
  --color-success: #607511;
  --color-success-text: #607511;
  --bg-success-subtle: #f0f6db;
  --color-warning: #896900;
  --bg-warning-subtle: #fff5d6;
  --color-danger: #ba3535;
  --bg-danger-subtle: #fbe1e1;
  --color-red-500: #d53d3d;
  --color-info: #2d7087;
  --bg-info-subtle: #e0eff3;
  --color-neutral: #52606b;
  --color-neutral-light: #e4e9ee;
  --color-secondary: #52606b;
  --color-secondary-dark: #0a1c2e;
  --status-a-bg: #f0f6db;
  --status-a-color: #607511;
  --status-a-border: #b9ca78;
  --status-b-bg: #e0eff3;
  --status-b-color: #2d7087;
  --status-b-border: #8ec4d5;
  --status-c-bg: #fbe1e1;
  --status-c-color: #ba3535;
  --status-c-border: #e88f8f;
  --status-pending-bg: #fff5d6;
  --status-pending-color: #896900;
  --status-pending-border: #dac06b;
  --approval-cell-bg: #f1f4f6;
  --approval-needed-bg: #fff5d6;
  --approval-needed-color: #896900;
  --stage-enabled-bg: #f0f6db;
  --stage-enabled-color: #607511;
  --stage-enabled-border: #829e16;
  --stage-disabled-bg: #f1f4f6;
  --stage-disabled-color: #52606b;
  --stage-disabled-border: #d53d3d;
  --state-locked-bg: #fff5d6;
  --state-locked-color: #896900;
  --state-locked-border: #dac06b;
  --state-danger-bg: #fbe1e1;
  --state-danger-color: #ba3535;
  --state-danger-border: #e88f8f;
  --comment-open-bg: #d53d3d;
  --comment-replied-bg: #927000;
  --comment-closed-bg: #677d11;
  --rework-bg: #fff5d6;
  --rework-border: #b68c00;
  --rework-color: #896900;
  --decision-bg: #e0eff3;
  --decision-border: #3d98b7;
  --decision-color: #2d7087;
  --chart-color-1: #0070ef;
  --chart-color-2: #a2c61c;
  --chart-color-3: #fdc300;
  --chart-color-4: #ee7766;
  --chart-color-5: #3d98b7;
  --chart-color-6: #80c7a0;
  --chart-color-7: #004c84;
  --chart-color-8: #878787;
  --shadow: 0 1px 2px rgba(3, 20, 40, 0.10);
  --shadow-lg: 0 8px 24px -14px rgba(3, 20, 40, 0.35);
}

:root[data-palette="ten"][data-theme="dark"] {
  color-scheme: dark;
  --dtp-canvas: #06192c;
  --dtp-surface: #102d49;
  --dtp-surface-raised: #1c3a56;
  --dtp-surface-sunken: #0c2540;
  --dtp-border: #274863;
  --dtp-border-strong: #878787;
  --dtp-text: #eaf2fa;
  --dtp-text-muted: #a8c0d6;
  --dtp-text-subtle: #8ea6b9;
  --dtp-overlay: rgba(2, 10, 20, 0.6);
  --dtp-shadow-sm: 0 1px 2px rgba(2, 10, 20, 0.5);
  --dtp-shadow-md: 0 8px 24px -10px rgba(2, 10, 20, 0.7);
  --dtp-primary: #3389f2;
  --dtp-primary-text: #6fb0ff;
  --dtp-primary-fill: #0070ef;
  --dtp-on-primary: #ffffff;
  --dtp-primary-soft: #0c4077;
  --dtp-row-selected: #0c4077;
  --dtp-row-hover: #0e345a;
  --dtp-focus: #66abff;
  --dtp-ok-fg: #a3c71e;
  --dtp-ok-soft: #304f3f;
  --dtp-ok-solid: #a2c61c;
  --dtp-ok-on-solid: #0a1c2e;
  --dtp-warn-fg: #fdc300;
  --dtp-warn-soft: #444e39;
  --dtp-warn-solid: #fdc300;
  --dtp-warn-on-solid: #0a1c2e;
  --dtp-crit-fg: #f08282;
  --dtp-crit-soft: #403247;
  --dtp-crit-solid: #e94d4d;
  --dtp-crit-on-solid: #0a1c2e;
  --dtp-na-fg: #acacac;
  --dtp-na-soft: #2a4157;
  --dtp-na-solid: #878787;
  --dtp-na-on-solid: #0a1c2e;
  --dtp-info-fg: #79b8cd;
  --dtp-info-soft: #1a4561;
  --dtp-info-solid: #3d98b7;
  --dtp-info-on-solid: #0a1c2e;
  --dtp-violet-fg: #b597f9;
  --dtp-violet-soft: #2b376f;
  --dtp-violet-solid: #9469f7;
  --dtp-violet-on-solid: #0a1c2e;
  --bg-primary: #102d49;
  --bg-secondary: #06192c;
  --bg-tertiary: #1c3a56;
  --bg-quaternary: #0c2540;
  --bg-neutral-subtle: #2a4157;
  --text-primary: #eaf2fa;
  --text-secondary: #a8c0d6;
  --text-tertiary: #8ea6b9;
  --border-color: #274863;
  --color-primary: #0070ef;
  --color-primary-hover: #0063d2;
  --color-primary-dark: #6fb0ff;
  --bg-primary-subtle: #0c4077;
  --color-success: #a3c71e;
  --color-success-text: #a3c71e;
  --bg-success-subtle: #304f3f;
  --color-warning: #fdc300;
  --bg-warning-subtle: #444e39;
  --color-danger: #f08282;
  --bg-danger-subtle: #403247;
  --color-red-500: #e94d4d;
  --color-info: #79b8cd;
  --bg-info-subtle: #1a4561;
  --color-neutral: #a8c0d6;
  --color-neutral-light: #274863;
  --color-secondary: #a8c0d6;
  --color-secondary-dark: #eaf2fa;
  --status-a-bg: #304f3f;
  --status-a-color: #a3c71e;
  --status-a-border: #698a2e;
  --status-b-bg: #1a4561;
  --status-b-color: #79b8cd;
  --status-b-border: #2c6e8c;
  --status-c-bg: #403247;
  --status-c-color: #f08282;
  --status-c-border: #94404a;
  --status-pending-bg: #444e39;
  --status-pending-color: #fdc300;
  --status-pending-border: #a0881c;
  --approval-cell-bg: #0c2540;
  --approval-needed-bg: #444e39;
  --approval-needed-color: #fdc300;
  --stage-enabled-bg: #304f3f;
  --stage-enabled-color: #a3c71e;
  --stage-enabled-border: #a2c61c;
  --stage-disabled-bg: #0c2540;
  --stage-disabled-color: #a8c0d6;
  --stage-disabled-border: #e94d4d;
  --state-locked-bg: #444e39;
  --state-locked-color: #fdc300;
  --state-locked-border: #a0881c;
  --state-danger-bg: #403247;
  --state-danger-color: #f08282;
  --state-danger-border: #94404a;
  --comment-open-bg: #cd4444;
  --comment-replied-bg: #906f00;
  --comment-closed-bg: #667d12;
  --rework-bg: #444e39;
  --rework-border: #fdc300;
  --rework-color: #fdc300;
  --decision-bg: #1a4561;
  --decision-border: #3d98b7;
  --decision-color: #79b8cd;
  --chart-color-1: #0070ef;
  --chart-color-2: #a2c61c;
  --chart-color-3: #fdc300;
  --chart-color-4: #ee7766;
  --chart-color-5: #3d98b7;
  --chart-color-6: #80c7a0;
  --chart-color-7: #7fb2e6;
  --chart-color-8: #878787;
  --shadow: 0 1px 2px rgba(2, 10, 20, 0.5);
  --shadow-lg: 0 8px 24px -10px rgba(2, 10, 20, 0.7);
}

/* App chrome: the T.EN navy carries the header and sidebar in both schemes. */
:root[data-palette="ten"] {
  --dtp-chrome-bg: var(--ten-navy);
  --dtp-chrome-fg: #ffffff;
  --dtp-chrome-fg-muted: #c9dcee;
}

/* App chrome: header and sidebar are T.EN navy in both schemes, as in lng. The colour tokens are
   re-scoped inside them to a light-on-navy set (solved to AA on the three navy steps), so every
   control there keeps reading its usual tokens. */
:root[data-palette="ten"] .main-header, :root[data-palette="ten"] #sidebar {
  color-scheme: dark;
  background-color: #004c84;
  --bg-primary: #004c84; --bg-secondary: #145a8e; --bg-tertiary: #266796;
  --dtp-surface: #004c84; --dtp-surface-raised: #145a8e; --dtp-surface-sunken: #145a8e; --dtp-canvas: #004c84;
  --text-primary: #ffffff; --text-secondary: #d3e3f1; --text-tertiary: #d5e2ee;
  --dtp-text: #ffffff; --dtp-text-muted: #d3e3f1; --dtp-text-subtle: #d5e2ee;
  --border-color: #38739f; --dtp-border: #38739f;
  --color-primary: #c7e4ff; --dtp-primary: #c7e4ff; --dtp-primary-text: #ffffff;
  --dtp-primary-soft: #2e6c9a; --dtp-row-hover: #266796; --dtp-focus: #c7e4ff;
  --color-success-text: #d9e8a2; --color-success: #d9e8a2; --dtp-ok-fg: #d9e8a2;
  --color-warning: #fedf75; --dtp-warn-fg: #fedf75; --color-danger: #ffd7d7; --dtp-crit-fg: #ffd7d7;
  --shadow: none;
}
:root[data-palette="ten"] .main-header { border-bottom-color: #38739f; }
:root[data-palette="ten"] #sidebar .sidebar-header { border-bottom-color: #38739f; }
/* The T.EN lockup (white wordmark, for dark surfaces) before the product name; the mark alone when collapsed. */
:root[data-palette="ten"] .tp-brand__owner {
  display: block; flex: none; width: 4.4rem; height: 2.15rem; padding-right: 0.75rem; box-sizing: content-box;
  border-right: 1px solid #38739f;
  background: url("../../brand/ten/ten-lockup-negative.457471812da9.png") no-repeat left center / contain;
}
:root[data-palette="ten"] .tp-brand__name { display: none; }
/* The TP2D mark drawn in the lockup's own lettering (brand/tp2d, frontend/tools/gen_tp2d_mark.py):
   the image carries the letters, the text stays for screen readers. Sidebar: the height of the
   lockup's two-line wordmark block; sign-in pane: in proportion. Ratio 158.6 : 43.4. */
:root[data-palette="ten"] #sidebar .tp-brand .tp-brand__mark,
:root[data-palette="ten"] .auth__mark {
  display: inline-block; height: 1rem; width: 3.65rem; padding: 0; border: 0; border-radius: 0;
  background: url("../../brand/tp2d/tp2d-negative.115fa25beca5.svg") no-repeat left center / contain;
  color: transparent; font-size: 0; line-height: 0; overflow: hidden;
}
:root[data-palette="ten"] .auth__mark { height: 2.75rem; width: 10.05rem; }
/* Signed-out pages: the lockup heads the navy brand pane. */
:root[data-palette="ten"] .auth__owner {
  display: block; width: 12rem; height: 3.75rem;
  background: url("../../brand/ten/ten-lockup-negative.457471812da9.png") no-repeat left center / contain;
}
/* phones: the lockup and the mark shrink so the band stays short (after the rules above) */
@media (max-width: 820px) {
  :root[data-palette="ten"] .auth__owner { flex: none; width: 10.5rem; height: 3.4rem; }
  :root[data-palette="ten"] .auth__mark { height: 1.1rem; width: 4rem; }
}
:root[data-palette="ten"] .sidebar.collapsed .sidebar-header::before {
  content: ""; display: block; width: 2rem; height: 2rem; margin: auto;
  background: url("../../brand/ten/ten-globe-official.413f192d3b6f.png") no-repeat center / contain;
}

/* Home dashboard: its traffic-light palette and chart series follow the T.EN tones. */
:root[data-palette="ten"], :root[data-palette="ten"] .v8-dashboard {
  --tl-green: #607511;
  --tl-green-light: #f0f6db;
  --tl-green-mid: #cad796;
  --tl-amber: #b68c00;
  --tl-amber-light: #fff5d6;
  --tl-amber-mid: #e5d08b;
  --tl-red: #d53d3d;
  --tl-red-light: #fbe1e1;
  --tl-red-mid: #eea8a8;
  --tl-blue: #0058bd;
  --tl-surface: #ffffff;
  --tl-bg: #eef1f4;
  --tl-series-salmon: #ee7766;
  --tl-series-amber: #fdc300;
  --tl-series-steel: #0070ef;
  --tl-series-sand: #3d98b7;
  --tl-series-pale: #a2c61c;
}
:root[data-palette="ten"][data-theme="dark"], :root[data-palette="ten"][data-theme="dark"] .v8-dashboard {
  --tl-green: #a3c71e;
  --tl-green-light: #304f3f;
  --tl-green-mid: #587933;
  --tl-amber: #fdc300;
  --tl-amber-light: #444e39;
  --tl-amber-mid: #857725;
  --tl-red: #e94d4d;
  --tl-red-light: #403247;
  --tl-red-mid: #7b3b49;
  --tl-blue: #6fb0ff;
  --tl-surface: #102d49;
  --tl-bg: #1c3a56;
  --tl-series-salmon: #ee7766;
  --tl-series-amber: #fdc300;
  --tl-series-steel: #6fb0ff;
  --tl-series-sand: #3d98b7;
  --tl-series-pale: #a2c61c;
}

/* ---- The Feedback Studio look (ten_qa_next "T.EN design system") ------------------------------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../../vendor/fonts/poppins/5.2.7/poppins-latin-600-normal.72993dddf88a.woff2") format("woff2"); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../../vendor/fonts/poppins/5.2.7/poppins-latin-700-normal.25b0e113ca7c.woff2") format("woff2"); }
:root[data-palette="ten"] {
  --dtp-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dtp-font-display: 'Poppins', 'Inter', system-ui, sans-serif;
  --dtp-radius-sm: 10px;   /* controls, inputs */
  --dtp-radius-md: 14px;   /* cards, panels */
  --dtp-radius-lg: 22px;   /* dialogs, toasts */
  --dtp-thead-bg: #004c84;
  --dtp-thead-fg: #ffffff;
  --dtp-stamp-a-fill: #a2c61c; --dtp-stamp-a-ink: #2b3707;
  --dtp-stamp-b-fill: #ee7766; --dtp-stamp-b-ink: #3a140f;
  --dtp-stamp-c-fill: #c62f2f; --dtp-stamp-c-ink: #ffffff;
}
:root[data-palette="ten"], :root[data-palette="ten"][data-theme="light"] {
  --dtp-shadow-sm: 0 12px 34px -26px rgba(3, 20, 40, 0.5);
  --dtp-shadow-md: 0 12px 34px -26px rgba(3, 20, 40, 0.5);
  --shadow: 0 12px 34px -26px rgba(3, 20, 40, 0.5);
  --shadow-lg: 0 12px 34px -26px rgba(3, 20, 40, 0.5);
}
:root[data-palette="ten"][data-theme="dark"] {
  --dtp-shadow-sm: 0 18px 46px -22px rgba(2, 10, 20, 0.7);
  --dtp-shadow-md: 0 18px 46px -22px rgba(2, 10, 20, 0.7);
  --shadow: 0 18px 46px -22px rgba(2, 10, 20, 0.7);
  --shadow-lg: 0 18px 46px -22px rgba(2, 10, 20, 0.7);
}
/* Dark: the luminous navy backdrop of the T.EN dark world; data sits on surfaces above it. */
:root[data-palette="ten"][data-theme="dark"] body {
  background: radial-gradient(1200px 600px at 70% -10%, rgba(36, 131, 239, 0.22), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(150, 213, 184, 0.12), transparent 60%),
              linear-gradient(150deg, #0a2c4e 0%, #081f3a 55%, #06192c 100%) fixed;
}
:root[data-palette="ten"] body { font-family: var(--dtp-font-ui); }
/* Display face for the names of things: the page title, section titles, big numbers. */
:root[data-palette="ten"] :is(.main-header h1, .review-section-title, .card-title, .qc-summary-title, .kpi-val, .dtp-strip__value) {
  font-family: var(--dtp-font-display); letter-spacing: -0.01em;
}
/* Status: a filled pill with a dark ink, icon and word (never colour alone). */
:root[data-palette="ten"] .dtp-chip--ok { background: #a2c61c; color: #2b3707; border-color: #a2c61c; }
:root[data-palette="ten"] .dtp-chip--warn { background: #fdc300; color: #4a3900; border-color: #fdc300; }
:root[data-palette="ten"] .dtp-chip--crit { background: #c62f2f; color: #ffffff; border-color: #c62f2f; }
:root[data-palette="ten"] .dtp-chip { font-weight: 600; }
/* Buttons are pills. */
:root[data-palette="ten"] :is(.tpv-btn, .btn, .tp-priority-pill) { border-radius: 999px; }
/* Table heads: navy with white labels, the T.EN scorecard. */
:root[data-palette="ten"] :is(.data-table, .control-sheet-table, .qc-data-table, .reports-table) thead th,
:root[data-palette="ten"] .dtp-grid .tabulator .tabulator-header,
:root[data-palette="ten"] .dtp-grid .tabulator .tabulator-header .tabulator-col {
  background: var(--dtp-thead-bg); color: var(--dtp-thead-fg); border-color: rgba(255, 255, 255, 0.18);
  font-family: var(--dtp-font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
:root[data-palette="ten"] .dtp-grid .tabulator .tabulator-header .tabulator-frozen,
:root[data-palette="ten"] .dtp-grid .tabulator .tabulator-header .tabulator-col.tabulator-frozen { background: var(--dtp-thead-bg); color: var(--dtp-thead-fg); }
/* A hovered heading cell of any navy table head stays navy (a page's own light hover, e.g. the
   dashboard's .expandable-header:hover with --bg-tertiary !important, left white labels on light grey).
   !important: it must beat those page-level !important hovers. */
:root[data-palette="ten"] :is(.data-table, .control-sheet-table, .qc-data-table, .reports-table) thead th:hover,
:root[data-palette="ten"] :is(.data-table, .control-sheet-table, .qc-data-table, .reports-table) thead th:focus-visible {
  background-color: #266796 !important; color: var(--dtp-thead-fg) !important;
}
/* Sort markers and icons in a navy head take the head's ink (the dashboard's personnel table greyed
   them by id, 1.07:1 on navy). !important: page styles set them with id selectors. */
:root[data-palette="ten"] :is(.data-table, .control-sheet-table, .qc-data-table, .reports-table) thead th :is(.sort-indicator, .sort-icon, .expand-icon, i) {
  color: var(--dtp-thead-fg) !important; opacity: 0.85;
}
/* hover and sorted columns stay on the navy head (a light hover left white labels on light grey) */
:root[data-palette="ten"] .dtp-grid .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background: #266796; color: var(--dtp-thead-fg);
}
:root[data-palette="ten"] .dtp-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: #d3e3f1; border-top-color: #d3e3f1;
}
:root[data-palette="ten"] .dtp-grid .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: #ffffff; }
:root[data-palette="ten"] .dtp-grid .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-top-color: #ffffff; }

/* Approval code badges paint fixed white (or the page text) on the legacy status "text" colours.
   In this palette those colours are solved for text, not for fills: use the fill pairs. */
:root[data-palette="ten"] .code-a { background-color: var(--dtp-ok-solid); color: var(--dtp-ok-on-solid); }
:root[data-palette="ten"] .code-b { background-color: var(--dtp-warn-solid); color: var(--dtp-warn-on-solid); }
:root[data-palette="ten"] .code-c { background-color: var(--dtp-crit-solid); color: var(--dtp-crit-on-solid); }
/* The side panel counters (actions, risk, notifications) likewise carry white text on the traffic-light fills. */
:root[data-palette="ten"] .global-side-btn-actions .global-side-btn-count { background: var(--dtp-warn-solid); color: var(--dtp-warn-on-solid); }
:root[data-palette="ten"] .global-side-btn-risk .global-side-btn-count { background: var(--dtp-crit-solid); color: var(--dtp-crit-on-solid); }
:root[data-palette="ten"] .global-side-btn-notif .global-side-btn-count { background: var(--dtp-ok-solid); color: var(--dtp-ok-on-solid); }