/// rebranding.
Bootstrap's default --bs-code-color is #d63384 (pink/purple) — past niet
bij Orbit's token-palette. We mappen naar text-muted en geven code een
subtiele chip-achtige achtergrond + rounded corners zodat inline code
zichtbaar is zonder te schreeuwen. Font is Space Mono (via Google Fonts
in header.php); fallback naar ui-monospace/system fonts.
Zie design-system §2.2 "Typografie — Monospace". */
:root {
--bs-font-monospace: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-code-color: var(--bs-secondary-color, #6c757d);
}
/* .orbit-num — tabular-nums utility voor cijferkolommen die op één lijn moeten
staan (CPU%, RAM, disk, score, uptime). Ipv font-monospace dat de body-font
breekt; tabular-nums lined up de cijfers maar laat de body-font intact. */
.orbit-num {
font-variant-numeric: tabular-nums;
}
code,
.font-monospace,
pre,
kbd,
samp {
font-family: var(--bs-font-monospace);
font-weight: 400;
}
/* Inline krijgt chip-achtige treatment; .bg-dark / blijft
onaangeroerd (daar sturen Bootstrap utilities al de kleur). */
code {
background-color: rgba(0, 0, 0, 0.04);
padding: 0.1em 0.35em;
border-radius: 3px;
font-size: 0.92em;
}
/* Binnen donkere surfaces (pre.bg-dark, tooltips etc.) geen extra achtergrond
op child- — anders krijgt de snippet een dubbele laag. */
pre.bg-dark code,
.bg-dark code,
.bg-dark > code {
background-color: transparent;
padding: 0;
border-radius: 0;
color: inherit;
font-size: inherit;
}
/* Analytics live-pulse dot — subtiele pulse-ring voor "Live op dit moment"
in de TLDR summary card (views/backend/tools/analytics/site.php). De dot
zelf is een 8px cirkel; de animatie is een expanderende ring via
box-shadow die uitfadet. 1.5s cyclus, ease-out zodat de puls niet
afleidt bij langere leestijd.
Kleur komt uit --orbit-chart-success (brand-green, dark-mode aware);
--orbit-live-pulse-color is een lokaal alias zodat de pulse-ring in één
plek bindt aan hetzelfde token als de dot. */
@keyframes orbit-live-pulse {
0% { box-shadow: 0 0 0 0 var(--orbit-live-pulse-ring-from, rgba(150, 189, 94, 0.5)); }
100% { box-shadow: 0 0 0 8px var(--orbit-live-pulse-ring-to, rgba(150, 189, 94, 0)); }
}
.live-pulse-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
/* Optische uitlijning met de x-hoogte van de begeleidende tekst — de
parent moet .d-inline-flex.align-items-center zijn om drift door
verschillende line-heights te vermijden. */
background: var(--orbit-live-pulse-color, var(--orbit-chart-success, #96bd5e)) !important;
animation: orbit-live-pulse 1.5s ease-out infinite;
}
/* Gray-state bij 0 live bezoekers: geen pulse, neutrale kleur die ook
leesbaar blijft in dark-mode (gebruikt Bootstrap's --bs-secondary token). */
.live-pulse-dot.is-zero {
background: var(--bs-secondary, #6c757d) !important;
animation: none !important;
box-shadow: none !important;
opacity: .5;
}
@media (prefers-reduced-motion: reduce) {
.live-pulse-dot { animation: none; }
}
/* ---------------------------------------------------------------
Analytics period-filter — segmented button-group styling.
Desktop: active period krijgt brand-color achtergrond. Mobile:
de buttons behouden normale tap-height (40px+) i.p.v. de btn-sm
compact-styling die moeilijk aan te tikken was.
--------------------------------------------------------------- */
[data-analytics-period-group] .btn.active,
[data-analytics-period-group] .btn:active {
background: var(--orbit-primary, var(--bs-primary));
border-color: var(--orbit-primary, var(--bs-primary));
color: #fff;
}
[data-analytics-period-group] .btn {
min-height: 38px;
}
/* Analytics summary-card "Overig"-rij micro-metrics — mid-dot separators
tussen nowrap-paren, met spacing-gap zodat de rij netjes kan wrappen
op mobiel i.p.v. overflow/truncate. Het eerste kind heeft geen leading
dot; bij wrap valt de dot weg voor het kind dat de nieuwe regel opent
(via ::before op .text-nowrap dat vanaf het tweede child een · toont). */
.analytics-tldr-extras {
column-gap: .45rem;
row-gap: .1rem;
}
.analytics-tldr-extras > .text-nowrap + .text-nowrap::before {
content: "·";
color: var(--bs-secondary-color, #6c757d);
margin-right: .45rem;
opacity: .7;
}
.analytics-tldr-extras > .text-nowrap > .fw-semibold + .text-muted {
margin-left: .25rem;
}
/* Analytics summary-card screenshot — padding rond het frame, afgeronde
hoeken die meebuigen met de card-radius, hover-overlay, en een vaste
aspect-ratio. Voorheen nam het frame de row-hoogte aan, waardoor op
brede viewports een smalle, sterk getrimde variant ontstond (de
TLDR-content rechts bepaalt de row-hoogte). Aspect-ratio 16:10 matcht
Microlink's native capture (1280×800) zodat de cover-crop minimaal is
en het beeld consistent oogt op elk scherm. */
.analytics-screenshot-wrap {
/* min-height weggehaald — aspect-ratio op het frame regelt nu de hoogte. */
}
.analytics-screenshot-frame {
border-radius: calc(var(--orbit-radius, 10px) * 0.8);
overflow: hidden;
background-color: var(--bs-body-tertiary-bg);
aspect-ratio: 16 / 10;
width: 100%;
/* Subtiele border — zelfde kleur als Bootstrap's card-border-color token
zodat het frame visueel aansluit bij omliggende cards in dark + light. */
border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .12));
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.analytics-screenshot-frame:hover,
.analytics-screenshot-frame:focus-visible {
box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
border-color: var(--bs-border-color, rgba(0, 0, 0, .18));
outline: none;
}
.analytics-screenshot-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
position: absolute;
inset: 0;
}
.analytics-screenshot-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(18, 33, 53, 0); /* brand-dark tint op hover */
opacity: 0;
transition: background-color .2s ease, opacity .2s ease;
pointer-events: none;
}
/* Hover-overlay pas actief zodra de image daadwerkelijk geladen is (voorkomt
een lege donkere waas tijdens het spinner-stadium). */
.analytics-screenshot-frame.is-loaded:hover .analytics-screenshot-overlay,
.analytics-screenshot-frame.is-loaded:focus-visible .analytics-screenshot-overlay {
background: rgba(18, 33, 53, 0.55);
opacity: 1;
}
[data-theme="dark"] .analytics-screenshot-frame.is-loaded:hover .analytics-screenshot-overlay,
[data-theme="dark"] .analytics-screenshot-frame.is-loaded:focus-visible .analytics-screenshot-overlay {
background: rgba(0, 0, 0, 0.6);
}
/* ═══════════════════════════════════════════════════════════════════
ANALYTICS INTEGRATION MODAL — "Field Manual" editorial wizard
Numbered sections (01-04), station-tags, dark console-panels voor
alle code/text, radar-metaphor op de verify-stap.
═══════════════════════════════════════════════════════════════════ */
#integrationModal .modal-content {
border: 0;
box-shadow: 0 24px 80px -16px rgba(15, 23, 32, .35);
}
#integrationModal .modal-body {
padding: 2rem 2.25rem;
}
/* ── Stepper rail ─────────────────────────────────────────────────── */
.int-stepper {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: .25rem 0 1.75rem;
margin-bottom: 2.25rem;
border-bottom: 1px solid color-mix(in srgb, var(--orbit-primary, #254672) 10%, transparent);
}
.int-stepper-rail,
.int-stepper-progress {
position: absolute;
top: 15px;
left: 0;
right: 0;
height: 2px;
border-radius: 2px;
}
.int-stepper-rail {
background: color-mix(in srgb, var(--orbit-primary, #254672) 12%, transparent);
}
.int-stepper-progress {
width: var(--progress, 0%);
background: linear-gradient(90deg,
color-mix(in srgb, var(--orbit-primary, #254672) 70%, transparent) 0%,
var(--orbit-primary, #254672) 100%);
transition: width .35s cubic-bezier(.2, .8, .3, 1);
}
.int-stepper-station {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: .55rem;
flex: 1;
z-index: 1;
}
.int-stepper-bead {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bs-body-bg, #fff);
color: var(--bs-secondary-color);
border: 2px solid color-mix(in srgb, var(--orbit-primary, #254672) 18%, transparent);
font-weight: 600;
font-size: .82rem;
font-variant-numeric: tabular-nums;
transition: all .25s ease;
}
.int-stepper-check {
width: 14px;
height: 14px;
display: none;
color: #fff;
}
.int-stepper-label {
font-size: .72rem;
font-weight: 500;
letter-spacing: .02em;
color: var(--bs-secondary-color);
text-align: center;
transition: color .2s;
white-space: nowrap;
}
.int-stepper-station.is-active .int-stepper-bead {
background: var(--orbit-primary, #254672);
color: #fff;
border-color: var(--orbit-primary, #254672);
transform: scale(1.1);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--orbit-primary, #254672) 18%, transparent);
}
.int-stepper-station.is-active .int-stepper-label {
color: var(--bs-body-color);
font-weight: 600;
}
.int-stepper-station.is-complete .int-stepper-bead {
background: var(--orbit-primary, #254672);
border-color: var(--orbit-primary, #254672);
}
.int-stepper-station.is-complete .int-stepper-num { display: none; }
.int-stepper-station.is-complete .int-stepper-check { display: inline-block; }
/* ── Section header — editorial numbering ─────────────────────────── */
.int-section + .int-section { margin-top: 2.5rem; }
.int-section-head {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.25rem;
margin-bottom: 1.25rem;
align-items: start;
}
.int-section-index {
font-family: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
font-weight: 500;
font-size: 2.4rem;
line-height: .85;
color: color-mix(in srgb, var(--orbit-primary, #254672) 35%, transparent);
letter-spacing: -.04em;
font-variant-numeric: tabular-nums;
padding-top: .15rem;
min-width: 3.25rem;
}
.int-station-tag {
display: inline-block;
font-size: .64rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--orbit-primary, #254672);
background: color-mix(in srgb, var(--orbit-primary, #254672) 10%, transparent);
padding: .18rem .5rem;
border-radius: 3px;
margin-bottom: .55rem;
}
.int-section-title {
font-weight: 600;
font-size: 1.1rem;
letter-spacing: -.01em;
color: var(--bs-body-color);
margin: 0 0 .5rem;
}
.int-section-lede {
font-size: .92rem;
line-height: 1.55;
color: var(--bs-secondary-color);
margin: 0;
max-width: 56ch;
}
.int-section-lede code {
font-size: .85em;
padding: .05rem .3rem;
background: color-mix(in srgb, var(--orbit-primary, #254672) 7%, transparent);
color: color-mix(in srgb, var(--orbit-primary, #254672) 85%, var(--bs-body-color));
border-radius: 3px;
}
/* ── Console (dark code/text panels) ──────────────────────────────── */
.int-console {
background: linear-gradient(180deg, #101a28 0%, #0a1220 100%);
border-radius: calc(var(--orbit-radius, 10px) * 1.2);
overflow: hidden;
box-shadow:
0 8px 24px -12px rgba(0, 0, 0, .4),
inset 0 1px 0 rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .05);
}
.int-console-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: .7rem 1rem .7rem 1.15rem;
border-bottom: 1px solid rgba(255, 255, 255, .05);
background: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, transparent 100%);
}
.int-console-tag {
font-family: ui-monospace, 'SF Mono', monospace;
font-size: .68rem;
letter-spacing: .08em;
color: rgba(255, 255, 255, .55);
display: inline-flex;
align-items: center;
gap: .4rem;
}
.int-console-tag svg,
.int-console-tag i {
width: 13px;
height: 13px;
color: color-mix(in srgb, var(--orbit-chart-info, #6E9EC2) 90%, white);
}
.int-console-body {
padding: 1rem 1.15rem;
margin: 0;
}
.int-console-input,
.int-console-textarea {
width: 100%;
background: transparent !important;
border: 0;
color: #e8f0fa;
font-family: ui-monospace, 'SF Mono', monospace;
font-size: .85rem;
line-height: 1.5;
padding: 0;
}
.int-console-input { resize: none; }
.int-console-input:focus,
.int-console-textarea:focus {
outline: none;
box-shadow: none;
}
.int-console-body--privacy {
padding: 1rem 1.15rem;
}
.int-console-textarea {
color: rgba(232, 240, 250, .92);
line-height: 1.6;
resize: none;
overflow: hidden;
display: block;
}
pre.int-console-code {
white-space: pre-wrap;
word-break: break-all;
padding: 1rem 1.15rem;
}
pre.int-console-code code {
color: #e8f0fa;
background: transparent;
padding: 0;
font-size: .85rem;
}
/* ── Copy-button ──────────────────────────────────────────────────── */
.int-copy-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .35rem .7rem;
border-radius: 6px;
background: rgba(255, 255, 255, .06);
color: rgba(232, 240, 250, .85);
border: 1px solid rgba(255, 255, 255, .08);
font-size: .75rem;
font-weight: 500;
transition: all .15s ease;
cursor: pointer;
}
.int-copy-btn:hover {
background: rgba(255, 255, 255, .12);
color: #fff;
border-color: rgba(255, 255, 255, .15);
}
.int-copy-btn:active { transform: scale(.97); }
.int-copy-btn .int-copy-icon,
.int-copy-btn .int-copy-check {
width: 13px;
height: 13px;
}
.int-copy-btn .int-copy-check { display: none; }
.int-copy-btn.is-copied {
background: color-mix(in srgb, var(--orbit-chart-success) 22%, transparent);
border-color: color-mix(in srgb, var(--orbit-chart-success) 40%, transparent);
color: color-mix(in srgb, var(--orbit-chart-success) 30%, white);
}
.int-copy-btn.is-copied .int-copy-icon { display: none; }
.int-copy-btn.is-copied .int-copy-check { display: inline-block; }
/* ── Platform tabs (chips) ────────────────────────────────────────── */
.int-tabs {
display: flex;
gap: .4rem;
padding: .3rem;
background: color-mix(in srgb, var(--orbit-primary, #254672) 6%, transparent);
border-radius: calc(var(--orbit-radius, 10px) * 0.9);
margin-bottom: 1.5rem;
overflow-x: auto;
scrollbar-width: none;
}
.int-tabs::-webkit-scrollbar { display: none; }
.int-tab {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .45rem .85rem;
background: transparent;
border: 0;
border-radius: calc(var(--orbit-radius, 10px) * 0.7);
color: var(--bs-secondary-color);
font-size: .82rem;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: all .15s;
flex-shrink: 0;
}
.int-tab:hover {
color: var(--bs-body-color);
background: rgba(255, 255, 255, .5);
}
.int-tab.active {
background: var(--bs-body-bg, #fff);
color: var(--bs-body-color);
font-weight: 600;
box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .08),
0 0 0 1px color-mix(in srgb, var(--orbit-primary, #254672) 12%, transparent);
}
.int-tab-name { font-family: 'Public Sans', ui-sans-serif, system-ui, sans-serif; }
/* ── Numbered steps in platform panels ────────────────────────────── */
.int-platform-panel { margin-bottom: 0; }
.int-steps-numbered {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
counter-reset: step;
}
.int-steps-numbered li {
counter-increment: step;
padding: .55rem 0 .55rem 2.4rem;
position: relative;
color: var(--bs-body-color);
font-size: .92rem;
line-height: 1.55;
border-bottom: 1px dashed color-mix(in srgb, var(--orbit-primary, #254672) 8%, transparent);
}
.int-steps-numbered li:last-child { border-bottom: 0; padding-bottom: 0; }
.int-steps-numbered li::before {
content: counter(step);
position: absolute;
left: 0;
top: .5rem;
width: 22px;
height: 22px;
border-radius: 50%;
background: color-mix(in srgb, var(--orbit-primary, #254672) 10%, transparent);
color: var(--orbit-primary, #254672);
font-weight: 600;
font-size: .72rem;
font-variant-numeric: tabular-nums;
display: flex;
align-items: center;
justify-content: center;
}
.int-steps-numbered code {
font-size: .85em;
padding: .05rem .32rem;
background: color-mix(in srgb, var(--orbit-primary, #254672) 8%, transparent);
color: color-mix(in srgb, var(--orbit-primary, #254672) 85%, var(--bs-body-color));
border-radius: 3px;
}
/* ── Verify card — radar station ──────────────────────────────────── */
.int-verify {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.35rem 1.5rem;
background: linear-gradient(135deg,
color-mix(in srgb, var(--orbit-chart-success) 6%, var(--bs-body-bg)) 0%,
var(--bs-body-bg) 70%);
border: 1px solid color-mix(in srgb, var(--orbit-chart-success) 25%, transparent);
border-radius: var(--orbit-radius, 10px);
position: relative;
overflow: hidden;
}
.int-verify[data-state="success"] {
border-color: color-mix(in srgb, var(--orbit-chart-success) 50%, transparent);
background: linear-gradient(135deg,
color-mix(in srgb, var(--orbit-chart-success) 12%, var(--bs-body-bg)) 0%,
var(--bs-body-bg) 70%);
}
.int-verify[data-state="error"] {
border-color: color-mix(in srgb, var(--orbit-chart-warning) 45%, transparent);
background: linear-gradient(135deg,
color-mix(in srgb, var(--orbit-chart-warning) 10%, var(--bs-body-bg)) 0%,
var(--bs-body-bg) 70%);
}
.int-verify-radar {
position: relative;
width: 46px;
height: 46px;
border-radius: 50%;
background: color-mix(in srgb, var(--orbit-chart-success) 14%, transparent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.int-verify-radar svg,
.int-verify-radar i {
width: 22px;
height: 22px;
color: var(--orbit-chart-success);
z-index: 2;
}
.int-verify-radar-ping {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--orbit-chart-success) 50%, transparent);
opacity: 0;
}
.int-verify[data-state="loading"] .int-verify-radar-ping {
animation: int-verify-ping 1.6s ease-out infinite;
}
.int-verify[data-state="loading"] .int-verify-radar-ping--delay {
animation-delay: .8s;
}
@keyframes int-verify-ping {
0% { transform: scale(.8); opacity: .8; }
80% { transform: scale(1.8); opacity: 0; }
100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.int-verify-radar-ping { animation: none !important; }
}
.int-verify-body { flex-grow: 1; min-width: 0; }
.int-verify-title {
font-weight: 600;
font-size: .95rem;
letter-spacing: -.005em;
color: var(--bs-body-color);
margin-bottom: .15rem;
}
.int-verify-hint {
font-size: .82rem;
color: var(--bs-secondary-color);
line-height: 1.45;
}
.int-verify-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .55rem 1rem;
background: var(--orbit-primary, #254672);
color: #fff;
border: 0;
border-radius: 6px;
font-weight: 500;
font-size: .85rem;
cursor: pointer;
flex-shrink: 0;
transition: all .2s;
box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--orbit-primary, #254672) 35%, transparent);
}
.int-verify-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--orbit-primary, #254672) 45%, transparent);
}
.int-verify-btn svg,
.int-verify-btn i { width: 14px; height: 14px; }
.int-verify-loading-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
animation: int-verify-btn-pulse 1s ease-in-out infinite;
}
@keyframes int-verify-btn-pulse {
0%, 100% { opacity: .4; transform: scale(.9); }
50% { opacity: 1; transform: scale(1.1); }
}
/* Result slot — verborgen tot JS .is-visible toevoegt (geen witruimte vooraf). */
.int-verify-result {
display: none;
margin-top: .9rem;
animation: int-slide-in .3s cubic-bezier(.2, .8, .3, 1);
}
.int-verify-result.is-visible { display: block; }
@keyframes int-slide-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Dark-mode ────────────────────────────────────────────────────── */
[data-theme="dark"] #integrationModal .int-section-title,
[data-theme="dark"] #integrationModal .int-verify-title,
[data-theme="dark"] #integrationModal .int-steps-numbered li {
color: var(--helios-text);
}
[data-theme="dark"] #integrationModal .int-section-lede,
[data-theme="dark"] #integrationModal .int-verify-hint,
[data-theme="dark"] #integrationModal .int-stepper-label {
color: color-mix(in srgb, var(--helios-text) 68%, transparent);
}
[data-theme="dark"] .int-stepper {
border-bottom-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .int-stepper-rail {
background: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .int-stepper-progress {
background: linear-gradient(90deg,
color-mix(in srgb, var(--orbit-chart-primary) 60%, transparent) 0%,
var(--orbit-chart-primary) 100%);
}
[data-theme="dark"] .int-stepper-bead {
background: var(--helios-surface-raised, #1b222d);
color: color-mix(in srgb, var(--helios-text) 65%, transparent);
border-color: color-mix(in srgb, var(--orbit-chart-primary) 25%, transparent);
}
[data-theme="dark"] .int-stepper-station.is-active .int-stepper-bead,
[data-theme="dark"] .int-stepper-station.is-complete .int-stepper-bead {
background: var(--orbit-chart-primary);
color: #fff;
border-color: var(--orbit-chart-primary);
}
[data-theme="dark"] .int-stepper-station.is-active .int-stepper-bead {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--orbit-chart-primary) 22%, transparent);
}
[data-theme="dark"] .int-stepper-station.is-active .int-stepper-label {
color: var(--helios-text);
}
[data-theme="dark"] .int-section-index {
color: color-mix(in srgb, var(--orbit-chart-primary) 55%, transparent);
}
[data-theme="dark"] .int-section-lede code,
[data-theme="dark"] .int-steps-numbered code {
background: rgba(255, 255, 255, .06);
color: var(--orbit-chart-info);
}
[data-theme="dark"] .int-tabs { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .int-tab { color: color-mix(in srgb, var(--helios-text) 65%, transparent); }
[data-theme="dark"] .int-tab:hover {
background: rgba(255, 255, 255, .07);
color: var(--helios-text);
}
[data-theme="dark"] .int-tab.active {
background: var(--helios-surface-raised, #141d27);
color: var(--helios-text);
box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .4),
0 0 0 1px color-mix(in srgb, var(--orbit-chart-primary) 25%, transparent);
}
[data-theme="dark"] .int-station-tag {
color: var(--orbit-chart-info);
background: color-mix(in srgb, var(--orbit-chart-info) 14%, transparent);
}
[data-theme="dark"] .int-steps-numbered li::before {
background: color-mix(in srgb, var(--orbit-chart-primary) 14%, transparent);
color: var(--orbit-chart-info);
}
[data-theme="dark"] .int-steps-numbered li {
border-bottom-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .int-verify {
background: linear-gradient(135deg,
color-mix(in srgb, var(--orbit-chart-success) 10%, var(--helios-surface-raised)) 0%,
var(--helios-surface-raised) 70%);
border-color: color-mix(in srgb, var(--orbit-chart-success) 35%, transparent);
}
[data-theme="dark"] .int-verify[data-state="success"] {
background: linear-gradient(135deg,
color-mix(in srgb, var(--orbit-chart-success) 18%, var(--helios-surface-raised)) 0%,
var(--helios-surface-raised) 70%);
border-color: color-mix(in srgb, var(--orbit-chart-success) 55%, transparent);
}
[data-theme="dark"] .int-verify[data-state="error"] {
background: linear-gradient(135deg,
color-mix(in srgb, var(--orbit-chart-warning) 16%, var(--helios-surface-raised)) 0%,
var(--helios-surface-raised) 70%);
border-color: color-mix(in srgb, var(--orbit-chart-warning) 50%, transparent);
}
[data-theme="dark"] .int-verify-btn {
background: var(--orbit-chart-primary);
box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--orbit-chart-primary) 40%, transparent);
}
[data-theme="dark"] .int-verify-btn:hover {
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--orbit-chart-primary) 50%, transparent);
}
/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
#integrationModal .modal-body { padding: 1.25rem; }
.int-section-head {
grid-template-columns: 1fr;
gap: .25rem;
}
.int-section-index {
font-size: 1.5rem;
min-width: auto;
}
.int-stepper-label { font-size: .65rem; }
.int-verify {
flex-wrap: wrap;
gap: 1rem;
}
.int-verify-btn { width: 100%; justify-content: center; }
}
/* ═══════════════════════════════════════════════════════════════════
CONTEXT-SWITCHER "The Meridian" — globale navigator
Leest als coordinaat-marker: scope → hairline → current-entity → kbd.
Gebouwd op Bootstrap 5 dropdown — BS regelt open/close, keyboard-nav,
positionering, z-index en a11y. Alleen het visuele "rail"-ontwerp en
de dropdown-item row-styling leven in deze sectie.
═══════════════════════════════════════════════════════════════════ */
.orbit-picker {
--nav-rail: var(--orbit-primary, #254672);
--nav-ink: var(--bs-body-color);
--nav-muted: var(--bs-secondary-color);
}
/* Filter-variant — deelt wrapper-classes met navigator maar visueel
"naked": geen rail-bg/border, geen margin. Wrapper vult de
beschikbare ruimte in z'n parent (label + picker pattern), zodat de
trigger als full-width input-element oogt. */
.orbit-picker--filter {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
/* Navigator-variant = volle kaart-rail (Meridian).
Filter-variant deelt slechts de wrapper-classes; een "naked"
.dropdown is voldoende — geen rail-bg/border, geen 100% width
(de compacte btn-light-trigger bepaalt zelf z'n breedte). */
.orbit-picker--navigator {
display: flex;
align-items: stretch;
width: 100%;
min-width: 0;
max-width: 100%;
margin-bottom: 1.25rem;
border-radius: calc(var(--orbit-radius, 10px) * 1.2);
background: color-mix(in srgb, var(--nav-rail) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--nav-rail) 14%, transparent);
transition: border-color .2s, background .2s;
}
.orbit-picker--navigator:hover {
border-color: color-mix(in srgb, var(--nav-rail) 24%, transparent);
background: color-mix(in srgb, var(--nav-rail) 11%, transparent);
}
.orbit-picker-scope {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: 0 .9rem 0 1rem;
border-right: 1px solid color-mix(in srgb, var(--nav-rail) 16%, transparent);
color: var(--nav-muted);
flex-shrink: 0;
}
.orbit-picker-scope-label {
font-family: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
font-weight: 500;
font-size: .6875rem;
letter-spacing: .18em;
text-transform: uppercase;
line-height: 1;
opacity: .75;
white-space: nowrap;
}
.orbit-picker-scope-chevron {
width: 12px; height: 12px;
color: color-mix(in srgb, var(--nav-rail) 48%, transparent);
flex-shrink: 0;
}
.orbit-picker-trigger {
display: inline-flex;
align-items: center;
gap: .75rem;
padding: .55rem 1rem;
background: transparent;
border: 0;
color: var(--nav-ink);
cursor: pointer;
text-align: left;
min-width: 0; /* zodat binnen-content kan ellipsen */
flex: 1 1 auto;
transition: background .15s;
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.orbit-picker-trigger:hover,
.orbit-picker-trigger:focus-visible {
background: color-mix(in srgb, var(--nav-rail) 6%, transparent);
outline: none;
}
.orbit-picker-trigger[aria-expanded="true"] {
background: color-mix(in srgb, var(--nav-rail) 10%, transparent);
}
.orbit-picker-current {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: .08rem;
min-width: 0;
flex: 1 1 auto;
line-height: 1.15;
}
.orbit-picker-current-name {
font-weight: 600;
font-size: .9375rem;
letter-spacing: -.005em;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
.orbit-picker-current-domain {
font-size: .75rem;
color: var(--nav-muted);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.25;
}
.orbit-picker-kbd {
font-family: ui-monospace, 'SF Mono', monospace;
font-size: .6875rem;
font-weight: 600;
color: var(--nav-muted);
padding: .1rem .4rem;
border-radius: .3rem;
background: color-mix(in srgb, var(--nav-rail) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--nav-rail) 18%, transparent);
line-height: 1.25;
flex-shrink: 0;
}
.orbit-picker-chevron {
width: 14px; height: 14px;
color: var(--nav-muted);
flex-shrink: 0;
transition: transform .2s;
}
.orbit-picker-trigger[aria-expanded="true"] .orbit-picker-chevron {
transform: rotate(180deg);
}
/* ── btn-helios-on-dark — Bootstrap btn-variant voor secundaire actie-
knoppen op donkere oppervlakken (terminal-card-headers, dark
hero-banners, dark-context dropdown-triggers). Gebruikt het Bootstrap
5.3 --bs-btn-* CSS-var pattern zodat :hover, :active, :focus en
:disabled automatisch via de framework-laag werken — geen extra
selectors nodig. Combineert met .btn-sm voor compact-size.
Padding-y overruled op 0.1875rem (3px) in plaats van btn-sm default
0.25rem (4px) zodat de knop in een card-header niet de header-hoogte
opdrijft. Project-globaal herbruikbaar. */
.btn-helios-on-dark {
--bs-btn-color: rgba(255, 255, 255, 0.85);
--bs-btn-bg: transparent;
--bs-btn-border-color: rgba(255, 255, 255, 0.20);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
--bs-btn-hover-border-color: rgba(255, 255, 255, 0.35);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: rgba(255, 255, 255, 0.15);
--bs-btn-active-border-color: rgba(255, 255, 255, 0.45);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.20);
--bs-btn-focus-shadow-rgb: 255, 255, 255;
--bs-btn-disabled-color: rgba(255, 255, 255, 0.40);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: rgba(255, 255, 255, 0.10);
--bs-btn-padding-y: 0.1875rem;
}
/* ── Generic helios collapse-toggle — chevron rotation tied to aria-expanded.
Werkt op zowel