/* =====================================================================
   UX: sparklines, statustijdlijn, zoekfunctie (Ctrl+K). Kleuren via de statusvariabelen (--st-*) zodat het in
   licht en donker thema klopt.
   ===================================================================== */

/* ---------- sparkline */
.spark { display: inline-block; vertical-align: middle; overflow: visible; }
.spark__line { fill: none; stroke: var(--spark-c, var(--st-unknown, #9aa5ad)); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark__area { fill: var(--spark-c, var(--st-unknown, #9aa5ad)); opacity: .14; stroke: none; }
.spark__dot { fill: var(--spark-c, var(--st-unknown, #9aa5ad)); }
.spark--st1 { --spark-c: var(--st-up, #7cb342); }
.spark--st2 { --spark-c: var(--st-warning, #f2b705); }
.spark--st3 { --spark-c: var(--st-down, #d9262c); }
.spark--st4 { --spark-c: var(--st-downack, #e57373); }
.spark--st5 { --spark-c: var(--st-unusual, #f57c00); }
.spark--st6, .spark--st7, .spark--st8 { --spark-c: var(--st-paused, #4f8fd6); }
.spark--empty { border-bottom: 1px dashed var(--slate-200, #d5dbe0); height: 11px !important; }
.spark--loading { background: linear-gradient(90deg, transparent, rgba(127, 140, 150, .12), transparent); border-radius: 3px; }

/* ---------- statustijdlijn */
.stl { width: 100%; }
.stl__bar { position: relative; height: 14px; border-radius: 4px; overflow: hidden; background: var(--st-unknown-50, #f0f2f4); }
.stl--compact { display: inline-block; vertical-align: middle; }
.stl--compact .stl__bar { height: 10px; border-radius: 3px; }
.stl__seg { position: absolute; top: 0; bottom: 0; min-width: 1px; }
.stl__seg:hover { filter: brightness(1.12); outline: 1px solid rgba(0, 0, 0, .25); z-index: 1; }
.st-bg-0 { background: var(--st-unknown, #9aa5ad); }
.st-bg-1 { background: var(--st-up, #7cb342); }
.st-bg-2 { background: var(--st-warning, #f2b705); }
.st-bg-3 { background: var(--st-down, #d9262c); }
.st-bg-4 { background: var(--st-downack, #e57373); }
.st-bg-5 { background: var(--st-unusual, #f57c00); }
.st-bg-6, .st-bg-7, .st-bg-8 { background: var(--st-paused, #4f8fd6); }
.st-bg--1 { background: transparent; }
.stl__axis { position: relative; height: 16px; margin-top: 3px; font-size: 11px; color: var(--slate-500, #657782); }
.stl__tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.stl__tick:first-child { transform: none; }
.stl__tick:last-child { transform: translateX(-100%); }
.sd-timeline { margin-bottom: 14px; }
.sd-timeline__title { font-size: 12px; font-weight: 600; color: var(--slate-500, #657782); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }

/* ---------- zoekfunctie (Ctrl+K) */
.cmdk-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--slate-200, #e1e6ea);
    border-radius: 8px; background: var(--white, #fff); color: var(--slate-500, #657782); font: inherit; font-size: 13px; cursor: pointer; }
.cmdk-btn:hover { color: var(--slate-800, #1b232c); border-color: var(--slate-300, #cbd3da); }
.cmdk-btn kbd { font-family: inherit; font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--slate-200, #e1e6ea); background: var(--slate-50, #f6f8fa); }
@media (max-width: 900px) { .cmdk-btn__text, .cmdk-btn kbd { display: none; } }
.cmdk-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 20, 26, .45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.cmdk { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--white, #fff); color: var(--slate-800, #1b232c);
    border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.cmdk__input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--slate-100, #eef1f4); }
.cmdk__input input { flex: 1; border: 0; outline: none; background: transparent; color: inherit; font: inherit; font-size: 16px; min-width: 0; }
.cmdk__input kbd { font-family: inherit; font-size: 11px; color: var(--slate-500, #657782); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--slate-200, #e1e6ea); }
.cmdk__list { overflow-y: auto; padding: 6px; }
.cmdk__group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500, #657782); padding: 10px 10px 4px; }
.cmdk__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit;
    font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cmdk__item--on, .cmdk__item:hover { background: var(--slate-50, #f2f5f8); }
.cmdk__item--on { box-shadow: inset 3px 0 0 #1f6fb2; }
.cmdk__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__path { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--slate-500, #657782); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cmdk__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cmdk__empty { padding: 22px; text-align: center; color: var(--slate-500, #657782); font-size: 14px; }
.cmdk__foot { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--slate-100, #eef1f4); font-size: 11.5px; color: var(--slate-500, #657782); }