/* src/styles/tokens/graphite-lime.css — Graphite Lime, shade 2 "Spring" #9fca3a (owner-chosen), designer decisions Q-D1..Q-D10 (2026-10-04).
   Values are RGB channels so Tailwind can apply /<alpha>. Hex in comments. */
:root {
  --ui-background: 248 250 252;
  --ui-surface: 255 255 255;
  --ui-surface-elevated: 255 255 255;
  --ui-sidebar: 255 255 255;
  --ui-sidebar-text: 75 80 88;
  --ui-sidebar-active-bg: 243 249 231;
  --ui-sidebar-active-text: 23 25 28;
  --ui-sidebar-indicator: 113 147 34;
  --ui-sidebar-focus-ring: 79 115 9;
  --ui-text-primary: 23 25 28;
  --ui-text-secondary: 75 80 88;
  --ui-text-muted: 102 108 117;
  --ui-border: 230 232 236;
  --ui-border-strong: 128 134 144; /* Q-D8  */
  --ui-primary: 159 202 58;
  --ui-primary-foreground: 17 20 13;
  --ui-primary-hover: 144 185 50;
  --ui-primary-border: 113 147 34;
  --ui-link: 23 25 28;
  --ui-link-underline: 159 202 58;
  --ui-focus-ring: 79 115 9;
  --ui-secondary-bg: 255 255 255; /* Q-D6 */
  --ui-secondary-fg: 23 25 28; /* Q-D6 */
  --ui-secondary-border: 128 134 144; /* Q-D6 */
  --ui-secondary-hover: 243 244 246;
  --ui-success: 21 128 61;
  --ui-success-bg: 236 247 239;
  --ui-warning: 161 92 7;
  --ui-warning-bg: 253 244 227;
  --ui-danger: 192 38 45;
  --ui-danger-bg: 253 236 236;
  --ui-info: 31 95 168;
  --ui-info-bg: 234 242 251;
  --ui-table-header: 243 244 246;
  --ui-table-header-text: 75 80 88;
  --ui-table-row-alt: 249 250 251;
  --ui-amount-positive: 21 128 61;
  --ui-amount-negative: 192 38 45;
  --ui-accent: 159 202 58;
  --ui-danger-foreground: 255 255 255;
  --ui-success-foreground: 255 255 255;
  --ui-warning-foreground: 255 255 255;
  --ui-info-foreground: 255 255 255;
  --ui-placeholder: 102 108 117;
  --ui-disabled-text: 138 144 153;
  --ui-disabled-bg: 243 244 246;
  --ui-table-border: 230 232 236;
  --ui-input-border: 128 134 144;
  --ui-accent-text: 79 115 9; /* Q-D5 */
  --ui-secondary-border-hover: 128 134 144; /* Q-D10 (= border-strong) */
  --ui-premium-success-text: 22 101 52; /* Premium pack CSS only (Q-D2/Q-D2b) */
  --ui-premium-warning-text: 138 80 6; /* Premium pack CSS only (Q-D2/Q-D2b) */
  --ui-premium-control-border: 128 134 144; /* Premium pack CSS only (Q-D2/Q-D2b) */
  /* Button recipe tokens (BUTTON-CONTRAST-FIX 2026-10-27) */
  --ui-btn-primary-bg: 159 202 58;
  --ui-btn-primary-fg: 17 20 13;
  --ui-btn-primary-hover-bg: 144 185 50;
  --ui-btn-disabled-bg: 228 231 226;
  --ui-btn-disabled-fg: 92 98 92;
  --ui-btn-disabled-border: 207 211 204;
  --ui-brand-ink: 79 115 9; /* lime text/border on light, 5.5:1 on #fff */
  --ui-brand-lime-on-dark: 200 240 74; /* for always-dark surfaces */
  /* DS v1 table (ds-table.css) */
  --ui-ds-surface-1: 255 255 255;
  --ui-ds-surface-3: 238 240 243;
  --ui-ds-table-header-bg: 243 244 246;
  --ui-ds-table-header-fg: 75 80 88;
  --ui-ds-table-row-alt: 249 250 251;
  --ui-ds-table-row-hover: 243 249 231;
  --ui-ds-surface-selected: 243 249 231;
  --ui-ds-border-default: 223 226 230;
  --ui-ds-border-subtle: 236 238 241;
  --ui-ds-border-active: 113 147 34;
  --ui-ds-border-focus: 79 115 9;
  --ui-ds-text-primary: 23 25 28;
  --ui-ds-text-secondary: 75 80 88;
  --ui-ds-text-muted: 102 108 117;
  --ui-ds-text-accent: 79 115 9;
  --ui-ds-success: 21 128 61;
  --ui-ds-danger: 192 38 45;
  --ui-ds-warning: 161 92 7;
  --ui-ds-info: 31 95 168;
  --ui-ds-success-bg: 236 247 239;
  --ui-ds-warning-bg: 253 244 227;
  --ui-ds-danger-bg: 253 236 236;
  --ui-ds-info-bg: 234 242 251;
  /* auth: fixed (same in light and dark), used by dentixa-auth-contrast.css */
  --ui-auth-white: 255 255 255;
  --ui-auth-ink: 15 23 42;
  --ui-auth-link: 63 98 18;
  --ui-auth-field-border: 148 163 184;
  --ui-auth-placeholder: 91 102 112;
  --ui-auth-sub: 71 85 105;
  --ui-auth-label: 30 41 59;
  --ui-auth-field-dark: 12 16 18;
  --ui-auth-placeholder-dark: 154 165 160;
  --ui-auth-sub-dark: 203 213 225;
  --ui-auth-label-dark: 226 232 240;
  --ui-auth-panel-fallback: 17 19 20;
  --ui-auth-text-fallback: 245 245 247;
  --ui-auth-gate-muted: 214 220 217;
  --ui-auth-gate-sub: 180 189 185;
  --ui-auth-gate-light-text: 55 65 81;
  /* pm: premium mode tokens (premium-mode-tokens.css), light and dark values side by side, never switched here */
  --ui-pm-light-f5f5f7: 245 245 247;
  --ui-pm-light-ffffff: 255 255 255;
  --ui-pm-light-eef0f3: 238 240 243;
  --ui-pm-light-f7f8fa: 247 248 250;
  --ui-pm-light-8b939e: 139 147 158;
  --ui-pm-light-1d1d1f: 29 29 31;
  --ui-pm-light-666c75: 102 108 117;
  --ui-pm-light-7aab12: 122 171 18;
  --ui-pm-light-5f8a0e: 95 138 14;
  --ui-pm-light-c8f04a: 200 240 74;
  --ui-pm-light-000000: 0 0 0;
  --ui-pm-light-808690: 128 134 144;
  --ui-pm-dark-050505: 5 5 5;
  --ui-pm-dark-111314: 17 19 20;
  --ui-pm-dark-181b1c: 24 27 28;
  --ui-pm-dark-1c1f26: 28 31 38;
  --ui-pm-dark-3a4047: 58 64 71;
  --ui-pm-dark-424245: 66 66 69;
  --ui-pm-dark-f5f5f7: 245 245 247;
  --ui-pm-dark-8b939e: 139 147 158;
  --ui-pm-dark-c8f04a: 200 240 74;
  --ui-pm-dark-7aab12: 122 171 18;
  --ui-pm-dark-e8ff9a: 232 255 154;
  --ui-pm-dark-000000: 0 0 0;
  --ui-pm-dark-6b7672: 107 118 114;
  /* island: light-surface island in dark mode (globals.css .dx-light-surface), fixed */
  --ui-island-ffffff: 255 255 255;
  --ui-island-f5f5f7: 245 245 247;
  --ui-island-1d1d1f: 29 29 31;
  --ui-island-4b5058: 75 80 88;
  --ui-island-d2d2d7: 210 210 215;
  --ui-island-f0f0f0: 240 240 240;
  --ui-island-c9ced4: 201 206 212;
  --ui-island-e5e5e7: 229 229 231;
  --ui-island-15202b: 21 32 43;
  --ui-island-17191c: 23 25 28;
  --ui-island-dfe2e6: 223 226 230;
}
.dark {
  --ui-background: 9 12 13;
  --ui-surface: 18 22 22;
  --ui-surface-elevated: 23 28 28;
  --ui-sidebar: 14 18 18;
  --ui-sidebar-text: 169 177 174;
  --ui-sidebar-active-bg: 33 42 23;
  --ui-sidebar-active-text: 227 230 227;
  --ui-sidebar-indicator: 159 202 58;
  --ui-sidebar-focus-ring: 159 202 58;
  --ui-text-primary: 227 230 227;
  --ui-text-secondary: 185 193 189;
  --ui-text-muted: 147 157 153;
  --ui-border: 36 42 42;
  --ui-border-strong: 97 108 104;
  --ui-primary: 159 202 58;
  --ui-primary-foreground: 17 20 13;
  --ui-primary-hover: 174 214 82;
  --ui-primary-border: 159 202 58;
  --ui-link: 174 214 82;
  --ui-link-underline: 174 214 82;
  --ui-focus-ring: 159 202 58;
  --ui-secondary-bg: 18 22 22; /* Q-D6 */
  --ui-secondary-fg: 227 230 227; /* Q-D6 */
  --ui-secondary-border: 97 108 104; /* Q-D6 */
  --ui-secondary-hover: 29 35 35;
  --ui-success: 74 222 128;
  --ui-success-bg: 17 37 26;
  --ui-warning: 245 181 68;
  --ui-warning-bg: 42 32 16;
  --ui-danger: 255 123 114;
  --ui-danger-bg: 44 20 20;
  --ui-info: 108 182 255;
  --ui-info-bg: 15 33 51;
  --ui-table-header: 22 27 27;
  --ui-table-header-text: 185 193 189;
  --ui-table-row-alt: 13 17 17;
  --ui-amount-positive: 74 222 128;
  --ui-amount-negative: 255 123 114;
  --ui-accent: 159 202 58;
  --ui-danger-foreground: 17 20 13;
  --ui-success-foreground: 17 20 13;
  --ui-warning-foreground: 17 20 13;
  --ui-info-foreground: 17 20 13;
  --ui-placeholder: 147 157 153;
  --ui-disabled-text: 97 108 104;
  --ui-disabled-bg: 23 28 28;
  --ui-table-border: 36 42 42;
  --ui-input-border: 97 108 104;
  --ui-accent-text: 174 214 82; /* Q-D5 */
  --ui-secondary-border-hover: 104 115 111; /* Q-D10 */
  --ui-premium-success-text: 74 222 128; /* Premium pack CSS only (Q-D2/Q-D2b; dark approved v1.2) */
  --ui-premium-warning-text: 245 181 68; /* Premium pack CSS only (Q-D2/Q-D2b; dark approved v1.2) */
  --ui-premium-control-border: 107 118 114; /* Premium pack CSS only (Q-D2/Q-D2b; dark approved v1.2) */
  /* Button recipe tokens (BUTTON-CONTRAST-FIX 2026-10-27) */
  --ui-btn-primary-bg: 159 202 58;
  --ui-btn-primary-fg: 17 20 13;
  --ui-btn-primary-hover-bg: 144 185 50;
  --ui-btn-disabled-bg: 42 47 43;
  --ui-btn-disabled-fg: 163 170 163;
  --ui-btn-disabled-border: 58 64 59;
  --ui-brand-ink: 200 240 74; /* lime text/border on dark */
  --ui-brand-lime-on-dark: 200 240 74;
  /* DS v1 table (ds-table.css) */
  --ui-ds-surface-1: 17 19 20;
  --ui-ds-surface-3: 28 31 38;
  --ui-ds-table-header-bg: 22 26 27;
  --ui-ds-table-header-fg: 184 190 198;
  --ui-ds-table-row-alt: 13 15 16;
  --ui-ds-table-row-hover: 26 34 19;
  --ui-ds-surface-selected: 26 34 19;
  --ui-ds-border-default: 42 47 51;
  --ui-ds-border-subtle: 31 35 38;
  --ui-ds-border-active: 180 221 66;
  --ui-ds-border-focus: 180 221 66;
  --ui-ds-text-primary: 245 245 247;
  --ui-ds-text-secondary: 184 190 198;
  --ui-ds-text-muted: 139 147 158;
  --ui-ds-text-accent: 180 221 66;
  --ui-ds-success: 74 222 128;
  --ui-ds-danger: 255 123 114;
  --ui-ds-warning: 245 181 68;
  --ui-ds-info: 108 182 255;
  --ui-ds-success-bg: 17 37 26;
  --ui-ds-warning-bg: 42 32 16;
  --ui-ds-danger-bg: 44 20 20;
  --ui-ds-info-bg: 15 33 51;
  /* Fixed tokens (auth, pm, island): the same values in both modes, repeated so both blocks keep the same keys. */
  --ui-auth-white: 255 255 255;
  --ui-auth-ink: 15 23 42;
  --ui-auth-link: 63 98 18;
  --ui-auth-field-border: 148 163 184;
  --ui-auth-placeholder: 91 102 112;
  --ui-auth-sub: 71 85 105;
  --ui-auth-label: 30 41 59;
  --ui-auth-field-dark: 12 16 18;
  --ui-auth-placeholder-dark: 154 165 160;
  --ui-auth-sub-dark: 203 213 225;
  --ui-auth-label-dark: 226 232 240;
  --ui-auth-panel-fallback: 17 19 20;
  --ui-auth-text-fallback: 245 245 247;
  --ui-auth-gate-muted: 214 220 217;
  --ui-auth-gate-sub: 180 189 185;
  --ui-auth-gate-light-text: 55 65 81;
  --ui-pm-light-f5f5f7: 245 245 247;
  --ui-pm-light-ffffff: 255 255 255;
  --ui-pm-light-eef0f3: 238 240 243;
  --ui-pm-light-f7f8fa: 247 248 250;
  --ui-pm-light-8b939e: 139 147 158;
  --ui-pm-light-1d1d1f: 29 29 31;
  --ui-pm-light-666c75: 102 108 117;
  --ui-pm-light-7aab12: 122 171 18;
  --ui-pm-light-5f8a0e: 95 138 14;
  --ui-pm-light-c8f04a: 200 240 74;
  --ui-pm-light-000000: 0 0 0;
  --ui-pm-light-808690: 128 134 144;
  --ui-pm-dark-050505: 5 5 5;
  --ui-pm-dark-111314: 17 19 20;
  --ui-pm-dark-181b1c: 24 27 28;
  --ui-pm-dark-1c1f26: 28 31 38;
  --ui-pm-dark-3a4047: 58 64 71;
  --ui-pm-dark-424245: 66 66 69;
  --ui-pm-dark-f5f5f7: 245 245 247;
  --ui-pm-dark-8b939e: 139 147 158;
  --ui-pm-dark-c8f04a: 200 240 74;
  --ui-pm-dark-7aab12: 122 171 18;
  --ui-pm-dark-e8ff9a: 232 255 154;
  --ui-pm-dark-000000: 0 0 0;
  --ui-pm-dark-6b7672: 107 118 114;
  --ui-island-ffffff: 255 255 255;
  --ui-island-f5f5f7: 245 245 247;
  --ui-island-1d1d1f: 29 29 31;
  --ui-island-4b5058: 75 80 88;
  --ui-island-d2d2d7: 210 210 215;
  --ui-island-f0f0f0: 240 240 240;
  --ui-island-c9ced4: 201 206 212;
  --ui-island-e5e5e7: 229 229 231;
  --ui-island-15202b: 21 32 43;
  --ui-island-17191c: 23 25 28;
  --ui-island-dfe2e6: 223 226 230;
}
/* BUTTON-CONTRAST-FIX (2026-10-27): disabled recipe, grey + border. Repeated :disabled keeps it at 0,6,2.
 * Premium fills are important-flagged, so the premium pack carries an important-flagged copy (dentixa-new-dna.css). */
html body [class*='btn-disabled-bg']:disabled:disabled:disabled:disabled {
  background-color: rgb(var(--ui-btn-disabled-bg) / 1);
  background-image: none;
  color: rgb(var(--ui-btn-disabled-fg) / 1);
  border: 1px solid rgb(var(--ui-btn-disabled-border) / 1);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
html body [class*='disabled:text-btn-disabled-fg']:not([class*='btn-disabled-bg']):disabled:disabled:disabled:disabled {
  color: rgb(var(--ui-btn-disabled-fg) / 1);
  opacity: 1;
  cursor: not-allowed;
}

/**
 * Delivery Alert — SVG overlay strip: sequential edge sparks + full-strip flash
 *
 * Rhythm of one cycle:
 *   1. four sparks ignite from four points of the perimeter, `--beam-spark-stagger`
 *      apart, each alive for a fraction of a second;
 *   2. the whole hairline answers with a single flash;
 *   3. it settles back to the idle track and rests before the next cycle.
 *
 * CRITICAL (Chromium):
 * - Never animate unitless stroke-dashoffset — resolves to px (~1px) → looks frozen.
 *   Use % keyframes (0% → -100%).
 * - Never rely on CSS unitless/% stroke-dasharray on SVG rect/circle — wrong coverage
 *   (solid frame look). Dash gaps = SVG attributes in user units from path length.
 */

/*
 * Tuning surface. Override globally on :root, per scope on any ancestor, or per
 * instance with a Tailwind arbitrary property, e.g. `[--beam-speed-overdue:2.4s]`.
 */
:root {
  /* Full cycle per phase: sparks + flash + rest. */
  --beam-speed-overdue: 1.25s;
  --beam-speed-warning: 2s;
  /* Base hairline; every layer scales from this. */
  --beam-stroke-width: 0.6px;
  /* Gap between consecutive edge ignitions — this is what reads as "rapid". */
  --beam-spark-stagger: 80ms;
}

/* Travel: one continuous lap, linear so the streak length stays even. */
@keyframes da-svg-orbit {
  0% {
    stroke-dashoffset: 0%;
  }
  100% {
    stroke-dashoffset: -100%;
  }
}

/*
 * One spark: strikes in ~3% of the cycle, gone by ~16%, dark for the remainder.
 * Staggering this per spark is what produces the rapid succession.
 */
@keyframes da-spark-flare {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  7% {
    opacity: 0.72;
  }
  16% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* The whole strip answers the sparks once, then releases. No permanent glow. */
@keyframes da-strip-flash {
  0%,
  22% {
    opacity: 0;
  }
  27% {
    opacity: 0.95;
  }
  36% {
    opacity: 0.26;
  }
  52% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*
 * Glow containment (two hard walls, not conventions):
 *   1. overlay root — absolute + inset:0 + clip, so beams never widen the table
 *      scrollport (no overflow-x) and never paint past it.
 *   2. each beam svg — clips to its own viewport, so bloom cannot reach beyond
 *      row bounds + GLOW_PAD (DeliveryAlertBeamSvg) into a neighbouring row.
 */
.da-beam-overlay-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  /* Above ledger cells; thead sticky uses z-10 — stay under sticky header. */
  z-index: 9;
}

.da-beam-svg {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  display: block;
}

.da-beam-track,
.da-beam-flash,
.da-beam-spark {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* Needle tip — no fat round blob at either end of the streak */
.da-beam-spark {
  stroke-linecap: butt;
}

.da-beam-track,
.da-beam-flash {
  stroke-linecap: round;
}

/* ── Track: hairline, barely there ─────────────────────────────── */
.da-beam-track {
  stroke-width: calc(var(--beam-stroke-width, 0.6px) * 0.9);
}

.da-beam-track--warning {
  stroke: rgba(245, 158, 11, 0.04);
}

.da-beam-track--overdue {
  stroke: rgba(220, 38, 38, 0.04);
}

html:not(.dark) .da-beam-track--warning {
  stroke: rgba(180, 83, 9, 0.22);
}

html:not(.dark) .da-beam-track--overdue {
  stroke: rgba(185, 28, 28, 0.22);
}

/* ── Full-strip flash ──────────────────────────────────────────── */
.da-beam-flash {
  stroke-width: var(--beam-stroke-width, 0.6px);
  opacity: 0;
  animation-name: da-strip-flash;
  animation-duration: var(--da-beam-duration, var(--beam-speed-warning, 2s));
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: var(--da-beam-delay, 0ms);
}

/*
 * ── Sequential edge sparks ─────────────────────────────────────
 * Two animations, one shared cycle so they can never drift apart:
 *   travel — `--da-spark-phase` spreads the sparks around the perimeter;
 *   flare  — `--da-spark-i` × stagger sets the ignition order.
 * dashoffset MUST be % (unitless → Chromium px / frozen look), and dash gaps
 * come from SVG attributes in user units (see DeliveryAlertBeamSvg).
 */
.da-beam-spark {
  stroke-width: calc(var(--beam-stroke-width, 0.6px) * 1.25);
  opacity: 0;
  animation-name: da-svg-orbit, da-spark-flare;
  animation-duration:
    var(--da-beam-duration, var(--beam-speed-warning, 2s)),
    var(--da-beam-duration, var(--beam-speed-warning, 2s));
  animation-timing-function: linear, ease-out;
  animation-iteration-count: infinite, infinite;
  animation-delay:
    calc(
      var(--da-beam-delay, 0ms) + var(--da-spark-phase, 0) *
        var(--da-beam-duration, var(--beam-speed-warning, 2s))
    ),
    calc(var(--da-beam-delay, 0ms) + var(--da-spark-i, 0) * var(--beam-spark-stagger, 80ms));
}

/* ── Warning DNA (calmer cycle) ────────────────────────────────── */
.da-beam-svg--warning {
  --da-beam-duration: var(--beam-speed-warning, 2s);
}

.da-beam-flash--warning {
  stroke: rgba(251, 191, 36, 0.95);
  filter: drop-shadow(0 0 1.2px rgba(245, 158, 11, 0.5));
}

.da-beam-spark--warning {
  stroke: rgb(255, 252, 245);
  filter:
    drop-shadow(0 0 0.6px rgba(253, 224, 71, 0.95))
    drop-shadow(0 0 1.75px rgba(245, 158, 11, 0.45));
}

/* ── Overdue DNA (urgent, snappier) ────────────────────────────── */
.da-beam-svg--overdue {
  --da-beam-duration: var(--beam-speed-overdue, 1.25s);
}

.da-beam-flash--overdue {
  stroke: rgba(248, 113, 113, 0.97);
  filter: drop-shadow(0 0 1.3px rgba(239, 68, 68, 0.55));
}

.da-beam-spark--overdue {
  stroke: rgb(255, 250, 249);
  filter:
    drop-shadow(0 0 0.65px rgba(254, 202, 202, 1))
    drop-shadow(0 0 1.9px rgba(239, 68, 68, 0.5));
}

/* Light mode */
html:not(.dark) .da-beam-flash--warning {
  stroke: rgba(217, 119, 6, 0.95);
  filter: drop-shadow(0 0 1.2px rgba(245, 158, 11, 0.4));
}

html:not(.dark) .da-beam-flash--overdue {
  stroke: rgba(220, 38, 38, 0.95);
  filter: drop-shadow(0 0 1.3px rgba(185, 28, 28, 0.4));
}

html:not(.dark) .da-beam-spark--warning {
  stroke: #fff7ed;
  filter:
    drop-shadow(0 0 0.7px rgba(217, 119, 6, 0.9))
    drop-shadow(0 0 1.6px rgba(245, 158, 11, 0.35));
}

html:not(.dark) .da-beam-spark--overdue {
  stroke: #fff1f2;
  filter:
    drop-shadow(0 0 0.7px rgba(220, 38, 38, 0.9))
    drop-shadow(0 0 1.7px rgba(185, 28, 28, 0.35));
}

/* Bell — same DNA, tracks the phase speeds but reads slightly quicker */
.da-beam-svg--bell.da-beam-svg--warning {
  --da-beam-duration: calc(var(--beam-speed-warning, 2s) * 0.88);
}

.da-beam-svg--bell.da-beam-svg--overdue {
  --da-beam-duration: calc(var(--beam-speed-overdue, 1.25s) * 0.9);
}

/* Stronger track so the ring reads on premium crystal chrome */
.da-beam-svg--bell .da-beam-track--warning {
  stroke: rgba(245, 158, 11, 0.55);
}

.da-beam-svg--bell .da-beam-track--overdue {
  stroke: rgba(220, 38, 38, 0.55);
}

svg.da-beam-svg--bell {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible;
  z-index: 2;
}

/*
 * Delivery owns the bell chrome — amber/red beat rose/sky frames and premium lime count.
 * data-delivery-bell is set on TopBarIconButton from NotificationsCenter.
 * Centered digit (data-badge-placement=center) keeps the glyph; never lime count-fill.
 */
.dx-topbar-action[data-delivery-bell='warning'],
.dx-topbar-action[data-delivery-bell='critical'],
.dx-topbar-action[data-badge-placement='center'] {
  /* Beat premium DNA `overflow: hidden !important` so small frame + pulse stay visible */
  overflow: visible !important;
}

.dx-topbar-action[data-delivery-bell='warning'] {
  color: #d97706 !important;
  border-color: #f59e0b !important;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.2),
    0 0 6px rgba(245, 158, 11, 0.2) !important;
}

.dx-topbar-action[data-delivery-bell='critical'] {
  color: #dc2626 !important;
  border-color: #ef4444 !important;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.24),
    0 0 8px rgba(220, 38, 38, 0.22) !important;
}

html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='warning'],
html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='warning'].dx-topbar-action--count,
html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='warning'][data-dx-count='true'] {
  color: #f59e0b !important;
  border-color: #f59e0b !important;
  background: var(--dx-panel, #181b1c) !important;
  overflow: visible !important;
}

html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='critical'],
html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='critical'].dx-topbar-action--count,
html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='critical'][data-dx-count='true'] {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
  background: var(--dx-panel, #181b1c) !important;
  overflow: visible !important;
}

/* Glyph + centered count: never force lime digit when delivery is active */
html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='warning'] .dx-topbar-count,
html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='warning'] .dx-topbar-badge-center {
  color: #f59e0b !important;
}

html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='critical'] .dx-topbar-count,
html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-delivery-bell='critical'] .dx-topbar-badge-center {
  color: #ef4444 !important;
}

/* Notifications center digit — no pill, no lime wash */
html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-badge-placement='center'] {
  overflow: visible !important;
}

html[data-app-theme='dentixa-premium'] .dx-topbar-action[data-badge-placement='center'] .dx-topbar-badge-center {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.dark .da-beam-svg--bell .da-beam-track--warning {
  stroke: rgba(245, 158, 11, 0.5) !important;
}

html.dark .da-beam-svg--bell .da-beam-track--overdue {
  stroke: rgba(248, 113, 113, 0.5) !important;
}

/*
 * Defeat global dark chrome:
 *   .dark svg:not(.dx-orders-odontogram) rect|circle { stroke: currentColor !important }
 */
html.dark svg.da-beam-svg .da-beam-track--warning {
  stroke: rgba(245, 158, 11, 0.05) !important;
}
html.dark svg.da-beam-svg .da-beam-track--overdue {
  stroke: rgba(220, 38, 38, 0.05) !important;
}
html.dark svg.da-beam-svg .da-beam-flash--warning {
  stroke: rgba(251, 191, 36, 0.95) !important;
}
html.dark svg.da-beam-svg .da-beam-spark--warning {
  stroke: rgb(255, 250, 235) !important;
}
html.dark svg.da-beam-svg .da-beam-flash--overdue {
  stroke: rgba(248, 113, 113, 0.97) !important;
}
html.dark svg.da-beam-svg .da-beam-spark--overdue {
  stroke: rgb(255, 245, 242) !important;
}

/*
 * Reduced motion: no strobe. Keep the alert legible as a static lit edge —
 * the track carries the colour and one spark marks the strip.
 */
@media (prefers-reduced-motion: reduce) {
  .da-beam-flash,
  .da-beam-spark {
    animation: none !important;
  }

  .da-beam-flash {
    opacity: 0.5;
  }

  .da-beam-spark {
    opacity: 0;
  }
}