/* ===========================================================================
   Asset Lifecycle wheel — design 16a.

   Colour values are lifted verbatim from assets/asset-lifecycle-16a.html
   (SC_D / SC_P / SC_PD / SC_L in that file's script). They are NOT derived
   from the DEFEX status hexes with color-mix — the design picks specific
   tones and mixing produces visibly different ones. Change them only against
   an updated design.

   The whole composition lives inside one <svg> with a fixed design-space
   viewBox (1240 x 1070), so every length below is in DESIGN UNITS, not screen
   pixels — the browser scales them with the SVG. Do not chase these numbers
   with media queries; the viewBox already handles width.

   Status vocabulary (ok / info / warn / crit) is shared with
   AI.Contracts/DTOs/Lifecycle/AssetLifecycleDtos.cs -> AssetLifecycleStatus.
   =========================================================================== */

:root {
    /* SC_D — chevron stroke, card border, card top accent */
    --alc-ok-rim: #6FBE8D;
    --alc-warn-rim: #F0B05C;
    --alc-crit-rim: #DE817F;
    --alc-info-rim: #7FA6EC;

    /* SC_P — satellite card background */
    --alc-ok-pale: #EDF8F1;
    --alc-warn-pale: #FFF4E4;
    --alc-crit-pale: #FCEEED;
    --alc-info-pale: #EEF3FE;

    /* SC_PD — satellite card headline count */
    --alc-ok-deep: #3E8A5F;
    --alc-warn-deep: #C77E2B;
    --alc-crit-deep: #BE5451;
    --alc-info-deep: #3D6BD0;

    /* SC_L — leader dots (the one place the vivid status colour appears) */
    --alc-ok-vivid: #007E33;
    --alc-warn-vivid: #FF8F00;
    --alc-crit-vivid: #D32F2F;
    --alc-info-vivid: #155DFC;

    --alc-ink: #0F172B;
    --alc-ink-soft: #4B5563;
    --alc-ink-muted: #6B7280;
    --alc-ink-value: #252525;
    --alc-surface: #FFFFFF;
    --alc-line: #DEE2ED;
    --alc-leader: #C5CCD9;
    --alc-brand: #155DFC;
    --alc-danger: #D32F2F;
    --alc-success: #007E33;
}

/* ---------------------------------------------------------------- canvas -- */

.alc-wheel {
    display: block;
    width: 100%;
    height: auto;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    /* Segment labels are centred on their chevron; text selection just gets in the way. */
    user-select: none;
}

/* Fit the whole composition — ring AND satellite cards — in one screenful.
   width:100% alone sizes the wheel off the WIDTH, and at 1240x1070 a wide window makes it
   taller than the viewport, so the bottom cards fall below the fold. Clamping the height
   instead lets preserveAspectRatio="xMidYMid meet" scale the drawing down and centre it,
   letterboxing into the spare width rather than overflowing.

   --alc-viewport-chrome is everything stacked above and below the SVG: app bar, content
   padding, the card's own padding and its title row. Tune that one value if the surrounding
   chrome changes; the floor keeps the wheel legible (and lets the page scroll) on a short
   window rather than shrinking it to nothing.

   The default lives in the var() fallback rather than as a declaration here on purpose: a
   declaration ON .alc-wheel beats an inherited one, so a host that stacks extra chrome above
   the panel (the Home dashboard tab, see .alc-panel--embedded) could not override it. */
.alc-wheel:not(.alc-wheel--compact) {
    max-height: max(440px, calc(100vh - var(--alc-viewport-chrome, 160px)));
}

/* Note: deliberately NO touch-action override here. Wheel-zoom works because the interop
   registers its wheel listener with {passive:false}; touch-action would not help it, and
   setting it to none would cost touch users both page scrolling and native pinch-zoom over
   what is now the largest element on the screen. They still have the +/-/Fit buttons. */

/* Only offered once there is somewhere to drag to; the interop toggles these. */
.alc-wheel--pannable { cursor: grab; }
.alc-wheel--panning { cursor: grabbing; }

/* ------------------------------------------------------------------ ring -- */

/* The shadow belongs to the chevrons alone — the hub discs are drawn after this
   group in the reference, so they must not inherit it. */
.alc-ring {
    filter: drop-shadow(0 4px 12px rgba(15, 23, 43, 0.16));
}

.alc-seg {
    cursor: pointer;
}

.alc-seg-fill {
    stroke-width: 1;
    stroke-linejoin: round;
    transition: opacity 120ms;
}

.alc-seg:hover .alc-seg-fill,
.alc-seg:focus-visible .alc-seg-fill {
    opacity: 0.88;
}

.alc-seg--ok .alc-seg-fill { stroke: var(--alc-ok-rim); }
.alc-seg--warn .alc-seg-fill { stroke: var(--alc-warn-rim); }
.alc-seg--crit .alc-seg-fill { stroke: var(--alc-crit-rim); }
.alc-seg--info .alc-seg-fill { stroke: var(--alc-info-rim); }

.alc-hub-disc {
    fill: var(--alc-surface);
    stroke: var(--alc-line);
    stroke-width: 1;
}

.alc-hub-inner {
    fill: none;
    stroke: #F4F6FA;
    stroke-width: 1;
}

/* --------------------------------------------------------------- leaders -- */

.alc-leader {
    stroke: var(--alc-leader);
    stroke-width: 1.5;
}

.alc-dot--ok { fill: var(--alc-ok-vivid); }
.alc-dot--warn { fill: var(--alc-warn-vivid); }
.alc-dot--crit { fill: var(--alc-crit-vivid); }
.alc-dot--info { fill: var(--alc-info-vivid); }

/* --------------------------------------------- in-segment label + badge --- */

/* Paint order puts these decorative groups ON TOP of the chevrons, and they are siblings of
   .alc-seg rather than children — so without this they swallow every pointer event aimed at
   the wedge underneath. Two bugs came from that: clicking a stage's own icon/name/count did
   nothing at all (the click never reached .alc-seg's handler), and with Explode Legends off,
   drifting onto the label counted as leaving the segment and instantly closed the card that
   had just been revealed. They are aria-hidden decoration; the pointer belongs to the wedge. */
.alc-seg-label,
.alc-leaders,
.alc-leader-dots,
.alc-hub {
    pointer-events: none;
}

/* Translucent white lozenge so the status gradient reads through it. */
.alc-chip {
    fill: rgba(255, 255, 255, 0.55);
}

.alc-chip-icon {
    fill: var(--alc-ink);
}

.alc-seg-name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    fill: var(--alc-ink);
}

.alc-seg-count {
    font-size: 13px;
    font-weight: 600;
    fill: var(--alc-ink);
}

/* ------------------------------------------------------- satellite cards -- */

/* Chained drop-shadows stand in for the reference's two-layer box-shadow — an SVG group
   takes no box-shadow, and drop-shadow uses the same blur-radius semantics, so the pair
   reproduces it rather than approximating with a single softer shadow. */
.alc-card {
    cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
    transition: filter 120ms;
}

.alc-card:hover,
.alc-card:focus-visible {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.14)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
}

.alc-card-bg {
    stroke-width: 1;
}

.alc-card--ok .alc-card-bg { fill: var(--alc-ok-pale); stroke: var(--alc-ok-rim); }
.alc-card--warn .alc-card-bg { fill: var(--alc-warn-pale); stroke: var(--alc-warn-rim); }
.alc-card--crit .alc-card-bg { fill: var(--alc-crit-pale); stroke: var(--alc-crit-rim); }
.alc-card--info .alc-card-bg { fill: var(--alc-info-pale); stroke: var(--alc-info-rim); }

.alc-card--ok .alc-card-accent { fill: var(--alc-ok-rim); }
.alc-card--warn .alc-card-accent { fill: var(--alc-warn-rim); }
.alc-card--crit .alc-card-accent { fill: var(--alc-crit-rim); }
.alc-card--info .alc-card-accent { fill: var(--alc-info-rim); }

.alc-card-name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    fill: var(--alc-ink);
}

.alc-card-count {
    font-size: 12px;
    font-weight: 600;
}

.alc-card--ok .alc-card-count { fill: var(--alc-ok-deep); }
.alc-card--warn .alc-card-count { fill: var(--alc-warn-deep); }
.alc-card--crit .alc-card-count { fill: var(--alc-crit-deep); }
.alc-card--info .alc-card-count { fill: var(--alc-info-deep); }

/* Each row is its own drill-down target, so it has to read as one: the pill brightens and the
   value darkens under the cursor. Kept to fill changes — a transform here would fight the GSAP
   timelines that own the card's own opacity/scale. */
.alc-card-row {
    cursor: pointer;
}

.alc-row-pill {
    fill: rgba(255, 255, 255, 0.65);
    transition: fill 120ms;
}

.alc-card-row:hover .alc-row-pill,
.alc-card-row:focus-visible .alc-row-pill {
    fill: #FFFFFF;
}

.alc-card-row:hover .alc-row-label,
.alc-card-row:hover .alc-row-value {
    fill: var(--alc-ink);
}

.alc-row-label {
    font-size: 10.5px;
    fill: var(--alc-ink-soft);
}

.alc-row-value {
    font-size: 11px;
    font-weight: 600;
    fill: var(--alc-ink-value);
}

/* ------------------------------------------------------------------ hub --- */

.alc-hub-icon {
    fill: var(--alc-brand);
}

.alc-hub-title {
    font-size: 19px;
    font-weight: 600;
    fill: var(--alc-ink);
}

.alc-hub-sub {
    font-size: 12px;
    fill: var(--alc-ink-muted);
}

.alc-hub-pill--action { fill: rgba(211, 47, 47, 0.08); }
.alc-hub-pill--clear { fill: rgba(0, 126, 51, 0.08); }

.alc-hub-pill-text {
    font-size: 12px;
    font-weight: 600;
}

.alc-hub-pill-text--action { fill: var(--alc-danger); }
.alc-hub-pill-text--clear { fill: var(--alc-success); }

/* Compact (widget) mode crops to the ring, so the hub copy shrinks with it. */
.alc-wheel--compact .alc-hub-title { font-size: 17px; }

/* ------------------------------------------------------- animated variant - */

/* Animated hosts start hidden so the wheel never flashes fully drawn before GSAP's first
   frame. lifecycleWheelInterop adds .alc-ready once the from-states are applied; the
   keyframe is the safety net for a browser where the interop never runs at all (gsap CDN
   blocked, JS error), matching the .gsap-reveal-root pattern in utilities.css. */
.alc-wheel--anim {
    visibility: hidden;
    animation: alcWheelFallback 0s linear 1.4s forwards;
}

.alc-wheel--anim.alc-ready {
    visibility: visible;
    animation: none;
}

@keyframes alcWheelFallback {
    to { visibility: visible; }
}

/* The satellite cards render OPEN and are closed by the interop, so that a browser with no
   GSAP still shows all thirteen breakdowns rather than a ring of invisible cards. */

/* ------------------------------------------------------------ Ask DEX orb - */

/* Lives inside a <foreignObject>, so every length here is in SVG user units and scales with
   the viewBox exactly like the rest of the wheel. Gradients are the design's own. */
.alc-orb {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    overflow: hidden;
    background: #F7FBFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
    cursor: pointer;
}

.alc-orb:focus-visible {
    outline: 2px solid var(--alc-brand);
    outline-offset: 2px;
}

/* The blue core, rising from below the orb — the interop drifts and swells it. The -30%
   inset gives the tween room to move without exposing an edge. */
.alc-orb-a {
    position: absolute;
    inset: -30%;
    background: radial-gradient(58% 52% at 50% 108%, #0B63FF 0%, #3E8CFF 38%, rgba(155, 187, 253, 0) 72%);
}

/* Two soft counter-drifting blobs. */
.alc-orb-b {
    position: absolute;
    inset: -20%;
    background: radial-gradient(46% 40% at 28% 78%, rgba(195, 214, 254, 0.95) 0%, rgba(195, 214, 254, 0) 70%),
                radial-gradient(40% 34% at 74% 86%, rgba(127, 166, 236, 0.85) 0%, rgba(127, 166, 236, 0) 72%);
    filter: blur(6px);
}

/* Diagonal sheen sweeping across the glass. */
.alc-orb-c {
    position: absolute;
    inset: 0;
    background: linear-gradient(148deg, rgba(255, 255, 255, 0) 26%, #FFFDF4 40%, rgba(255, 255, 255, 0) 56%);
}

.alc-orb-rim {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.alc-orb-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    pointer-events: none;
}

/* Ink stays dark in both themes — it sits on the orb's own pale glass, not on the page. */
.alc-orb-spark {
    width: 24px;
    height: 24px;
    fill: #0F172B;
}

.alc-orb-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #0F172B;
}

/* ------------------------------------------------------------- page shell - */

/* Hosted in the Home dashboard's first tab rather than owning the screen: the tab strip and
   the dashboard actions bar sit above the panel, so the wheel gets less height than it does
   on /lifecycle. Tighter side padding too — the tab panel already insets the content.

   Both this and the default above are MEASURED, not estimated: render the page, take
   (innerHeight - .alc-card-surface bottom), and subtract that slack from the value here,
   keeping .alc-content's own padding-bottom as the breathing room under the card. Guessing
   leaves either dead space at the foot of the screen or a page that scrolls for no reason. */
.alc-panel--embedded {
    --alc-viewport-chrome: 194px;
}

.alc-panel--embedded .alc-content {
    padding: 12px 16px 16px;
}

/* Ask DEX is open: its shell has grown out of the orb and is now standing in for it, so the
   orb gets out of the way instead of sitting behind the dialog. Matches the morph's 420ms
   ease-out so the two read as one move.

   This is on the <foreignObject> host and not on .alc-orb on purpose — the interop's GSAP
   timelines write the orb's own opacity and transform frame by frame, and a CSS transition
   on those properties would smear the entrance bloom into a lag. */
.alc-orb-host {
    transition: opacity 420ms cubic-bezier(0, 0, 0.2, 1);
}

.alc-panel--dex-open .alc-orb-host {
    opacity: 0;
    pointer-events: none;
}

/* The content well around the card.

   The token, NOT the #F4F6FA literal this used to carry. Design D makes the body gradient the
   page ground by redefining --mud-palette-background-gray to transparent for everything inside
   .main-container (utilities.css:860) — that reaches the ~199 inline `background: var(...)`
   styles across the app, but it cannot reach a hard-coded hex. So the well stayed an opaque grey
   slab sitting on top of the gradient, and the wheel read as grey while every panel around it had
   gone translucent.

   The dark override that used to sit here already used the token, which is why dark mode showed
   the ground correctly and only light was wrong. Both themes now resolve through one declaration,
   so the override is gone rather than duplicated.

   Outside .main-container the token still resolves to the real grey, so a host that isn't on the
   gradient (a dialog, a popover) keeps a filled well. If this ever genuinely needs a solid ground
   back, use .defex-solid-ground (utilities.css:880) — it keeps the opt-out greppable. */
.alc-content {
    padding: 20px 24px 24px;
    background: var(--mud-palette-background-gray);
}

/* The content card — a Design D card, matching every other card in the app.

   It used to be the pre-restyle standard: opaque #FFFFFF, a 5px radius (the old theme
   DefaultBorderRadius) and the flat 2-layer elevation. With the well above now transparent, that
   slab covered nearly the whole panel, so the component read as one flat white rectangle on the
   gradient while the cards beside it had 18px corners, a white rim and a large soft shadow.

   The tokens rather than literals: a card's radius, fill, rim and shadow are the four things
   utilities.css:1234 owns, and this element is a hand-rolled card that simply predates them.
   --defex-card-bg carries alpha, so the ground reads faintly through it — which is what makes it
   sit ON the gradient rather than punch a hole in it.

   NOT converted to .custom-border: that class also brings the nesting reset, and the wheel's own
   panels inside would flip to the grey inner-panel treatment. The tokens give the same surface
   without inheriting that behaviour.

   The --alc-* palette is untouched. Those values are lifted verbatim from the 16a design file and
   are deliberately not derived from the DEFEX hexes (see the header) — this changes the card the
   wheel sits on, not the wheel's own colours. */
.alc-card-surface {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 18px 24px 12px;
    background: var(--defex-card-bg);
    border: 1px solid var(--defex-card-edge);
    border-radius: var(--defex-radius-panel);
    box-shadow: var(--defex-card-shadow);
}

/* Dark mode has to restate the fill, rim and shadow — only the radius survives from above.
   The --defex-* card tokens are LIGHT-ONLY (utilities.css:17), so --defex-card-bg is a
   translucent WHITE and --defex-card-edge a near-solid white rim; inherited into dark they would
   turn this into a pale card with a bright white outline on a navy page. --alc-surface is already
   redefined to the navy #1B2136 in the dark block below, so the fill just goes back to the file's
   own token. The rim alpha matches the one the mobile glass block uses for its dark inversion, and
   the shadow matches .alc-ring's dark drop-shadow rather than the hue-tinted light one, which is
   invisible on a dark ground. */
.defex-theme-dark .alc-card-surface,
.mud-theme-dark .alc-card-surface {
    background: var(--alc-surface);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

.alc-surface-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.alc-surface-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--alc-ink);
}

/* Explode-legends switch + Replay + Live, in the card's title row. */
.alc-surface-tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

.alc-tool-divider {
    width: 1px;
    height: 18px;
    background: var(--alc-line);
}

.alc-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.alc-toggle-label,
.alc-tool-btn {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.alc-toggle-label {
    color: var(--alc-ink);
}

.alc-toggle-track {
    width: 34px;
    height: 14px;
    flex: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    background: #C5CCD9;
    transition: background 180ms;
}

.alc-toggle-track--on {
    background: var(--alc-brand);
}

.alc-toggle-knob {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.alc-toggle-track--on .alc-toggle-knob {
    transform: translateX(16px);
}

.alc-tool-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--alc-brand);
    cursor: pointer;
    font-family: inherit;
}

.alc-tool-btn:hover {
    color: var(--alc-ink);
}

/* Zoom stepper. The percentage is itself the reset-to-fit button — the one control you want
   the moment a pan has taken you somewhere you did not mean to go. */
.alc-zoom {
    display: flex;
    align-items: center;
    border: 1px solid var(--alc-line);
    border-radius: 5px;
    overflow: hidden;
}

.alc-zoom-btn,
.alc-zoom-value {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--alc-ink-muted);
    cursor: pointer;
    font-family: inherit;
}

.alc-zoom-btn {
    width: 26px;
}

.alc-zoom-value {
    min-width: 46px;
    border-left: 1px solid var(--alc-line);
    border-right: 1px solid var(--alc-line);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--alc-ink);
}

.alc-zoom-btn:hover,
.alc-zoom-value:hover {
    background: rgba(21, 93, 252, 0.08);
    color: var(--alc-brand);
}

.alc-live {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--alc-ink-muted);
}

.alc-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--alc-success);
    display: inline-block;
}

/* ------------------------------------------------------------------ filters -
   The filters used to sit in a dark full-bleed band above the card. They now live in a
   popover off the toolbar's Filters button, so the panel can be hosted inside a Home
   dashboard tab without reading as a second page header. */

.alc-filter-btn {
    position: relative;
}

.alc-filter-btn--on {
    color: var(--alc-ink);
}

/* The filters are out of sight, so this count is the only thing telling the user the wheel
   is showing a subset. */
.alc-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--alc-brand);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}

/* Transparent catcher so a click outside closes the popover, matching AnnualDatePicker.
   Below MudPopover's own stacking (1200) and above the card. */
.alc-filters-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

.mud-popover.alc-filters-popover {
    z-index: 1201;
    border-radius: 5px;
}

.alc-filters-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    width: 300px;
}

.alc-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alc-filter-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--alc-ink-muted);
    white-space: nowrap;
}

.alc-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--alc-line);
}

.alc-filter-clear,
.alc-filter-apply {
    font-size: 11px !important;
    letter-spacing: 0.05em;
}

/* -------------------------------------------------------------- dark mode - */
/* 16a is a light design. The pale chevron gradients stay — their labels are dark text
   ON the gradient, so they read correctly either way — and what changes is every white
   surface behind them. Treatment follows sibling concepts 6a/8a: navy surfaces, same rims. */

.defex-theme-dark,
.mud-theme-dark {
    --alc-ink: #E6EAF3;
    --alc-ink-soft: #A9B2C6;
    --alc-ink-muted: #8A93A8;
    --alc-ink-value: #E6EAF3;
    --alc-surface: #1B2136;
    --alc-line: #30324E;
    --alc-leader: #3a4a6b;
}

/* Anything drawn on top of a pale chevron keeps the light-theme ink. */
.defex-theme-dark .alc-seg-name,
.mud-theme-dark .alc-seg-name,
.defex-theme-dark .alc-seg-count,
.mud-theme-dark .alc-seg-count,
.defex-theme-dark .alc-chip-icon,
.mud-theme-dark .alc-chip-icon {
    fill: #0F172B;
}

.defex-theme-dark .alc-hub-inner,
.mud-theme-dark .alc-hub-inner { stroke: #262C44; }

.defex-theme-dark .alc-card--ok .alc-card-bg,
.mud-theme-dark .alc-card--ok .alc-card-bg { fill: #21372C; }
.defex-theme-dark .alc-card--warn .alc-card-bg,
.mud-theme-dark .alc-card--warn .alc-card-bg { fill: #3A3020; }
.defex-theme-dark .alc-card--crit .alc-card-bg,
.mud-theme-dark .alc-card--crit .alc-card-bg { fill: #3A2426; }
.defex-theme-dark .alc-card--info .alc-card-bg,
.mud-theme-dark .alc-card--info .alc-card-bg { fill: #1F2B44; }

.defex-theme-dark .alc-card-name,
.mud-theme-dark .alc-card-name { fill: #E6EAF3; }

.defex-theme-dark .alc-card--ok .alc-card-count,
.mud-theme-dark .alc-card--ok .alc-card-count { fill: #8FD1A8; }
.defex-theme-dark .alc-card--warn .alc-card-count,
.mud-theme-dark .alc-card--warn .alc-card-count { fill: #FFC97F; }
.defex-theme-dark .alc-card--crit .alc-card-count,
.mud-theme-dark .alc-card--crit .alc-card-count { fill: #EE9C9A; }
.defex-theme-dark .alc-card--info .alc-card-count,
.mud-theme-dark .alc-card--info .alc-card-count { fill: #9BBBFD; }

.defex-theme-dark .alc-row-pill,
.mud-theme-dark .alc-row-pill { fill: rgba(0, 0, 0, 0.22); }

.defex-theme-dark .alc-card-row:hover .alc-row-pill,
.mud-theme-dark .alc-card-row:hover .alc-row-pill,
.defex-theme-dark .alc-card-row:focus-visible .alc-row-pill,
.mud-theme-dark .alc-card-row:focus-visible .alc-row-pill { fill: rgba(255, 255, 255, 0.14); }

.defex-theme-dark .alc-card-row:hover .alc-row-label,
.mud-theme-dark .alc-card-row:hover .alc-row-label,
.defex-theme-dark .alc-card-row:hover .alc-row-value,
.mud-theme-dark .alc-card-row:hover .alc-row-value { fill: #E6EAF3; }

.defex-theme-dark .alc-hub-icon,
.mud-theme-dark .alc-hub-icon { fill: #6ea0ff; }
.defex-theme-dark .alc-hub-pill--action,
.mud-theme-dark .alc-hub-pill--action { fill: rgba(255, 138, 128, 0.12); }
.defex-theme-dark .alc-hub-pill-text--action,
.mud-theme-dark .alc-hub-pill-text--action { fill: #FF8A80; }
.defex-theme-dark .alc-hub-pill--clear,
.mud-theme-dark .alc-hub-pill--clear { fill: rgba(111, 215, 154, 0.12); }
.defex-theme-dark .alc-hub-pill-text--clear,
.mud-theme-dark .alc-hub-pill-text--clear { fill: #6FD79A; }

.defex-theme-dark .alc-ring,
.mud-theme-dark .alc-ring { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)); }