/* ==========================================================================
   QZONE OMS — COMPONENTS
   Overlays, tabs, alerts, calendar, auth, charts, KPI scorecards.
   ========================================================================== */

/* ==========================================================================
   MODALS  (Bootstrap markup, restyled)
   ========================================================================== */

.modal { z-index: var(--qz-z-modal); }
.modal-backdrop { z-index: calc(var(--qz-z-modal) - 20); background: #000; }
.modal-backdrop.show { opacity: 0.66 !important; }

.modal-dialog { margin: var(--qz-s-4) auto; }

.modal-content {
  border: 0 !important;
  border-radius: var(--qz-r-xl) !important;
  background: var(--qz-surface-2) !important;
  box-shadow: var(--qz-ring-strong), var(--qz-shadow-3) !important;
  overflow: hidden;
}

.modal-header {
  align-items: center;
  gap: var(--qz-s-3);
  padding: var(--qz-s-4) var(--qz-s-5) !important;
  background: var(--qz-surface-2) !important;
  border-bottom: 1px solid var(--qz-line) !important;
  color: var(--qz-text) !important;
}
.modal-title {
  font-family: var(--qz-font-display);
  font-size: var(--qz-fs-md);
  font-weight: 600;
  letter-spacing: var(--qz-track-tight);
  color: var(--qz-text);
}
.modal-body { padding: var(--qz-s-5) !important; background: var(--qz-surface-2); color: var(--qz-text-dim); font-size: var(--qz-fs-sm); }
.modal-footer {
  gap: var(--qz-s-2);
  padding: var(--qz-s-3) var(--qz-s-5) !important;
  background: var(--qz-surface-inset) !important;
  border-top: 1px solid var(--qz-line) !important;
}
.modal-footer > * { margin: 0 !important; }

.btn-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--qz-r-pill);
  opacity: 1;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c737f' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center/14px no-repeat;
  filter: none !important;
  transition: background-color var(--qz-dur-fast) var(--qz-ease);
}
.btn-close:hover { background-color: var(--qz-surface-4); }

/* A confirm dialog reads as a statement, not a decorated panel. */
.qz-confirm { text-align: center; padding: var(--qz-s-6) var(--qz-s-5); }
.qz-confirm__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto var(--qz-s-4);
  border-radius: var(--qz-r-lg);
  background: var(--qz-crit-weak);
  box-shadow: inset 0 0 0 1px var(--qz-crit-line);
  color: var(--qz-crit);
  font-size: 17px;
}
.qz-confirm__icon--warn { background: var(--qz-warn-weak); box-shadow: inset 0 0 0 1px var(--qz-warn-line); color: var(--qz-warn); }
.qz-confirm__title { font-family: var(--qz-font-display); font-size: var(--qz-fs-md); font-weight: 600; margin-bottom: var(--qz-s-2); }
.qz-confirm__text { font-size: var(--qz-fs-sm); color: var(--qz-text-mute); margin-bottom: var(--qz-s-5); }
.qz-confirm__actions { display: flex; gap: var(--qz-s-2); justify-content: center; }
.qz-confirm__actions form { margin: 0; }

@media (max-width: 575.98px) {
  .modal-dialog { margin: var(--qz-s-3); }
  .qz-confirm__actions { flex-direction: column-reverse; }
  .qz-confirm__actions > *, .qz-confirm__actions form { width: 100%; }
  .qz-confirm__actions .qz-btn { width: 100%; }
}

/* ==========================================================================
   DROPDOWNS  (Bootstrap markup, restyled)
   ========================================================================== */

.dropdown-menu {
  z-index: var(--qz-z-dropdown) !important;
  min-width: 190px;
  padding: var(--qz-s-1) !important;
  border: 0 !important;
  border-radius: var(--qz-r-lg) !important;
  background: var(--qz-surface-3) !important;
  box-shadow: var(--qz-ring-strong), var(--qz-shadow-2) !important;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--qz-s-3);
  padding: 7px var(--qz-s-3) !important;
  border-radius: var(--qz-r-md) !important;
  color: var(--qz-text-dim) !important;
  font-size: var(--qz-fs-sm);
  font-weight: 500;
}
.dropdown-item i { width: 15px; font-size: 12px; text-align: center; opacity: 0.8; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--qz-surface-4) !important; color: var(--qz-text) !important; }
.dropdown-item.text-danger, .dropdown-item.qz-danger { color: var(--qz-crit) !important; }
.dropdown-item.text-danger:hover, .dropdown-item.qz-danger:hover { background: var(--qz-crit-weak) !important; color: var(--qz-crit) !important; }
.dropdown-divider { margin: var(--qz-s-1) !important; border-color: var(--qz-line) !important; }
.dropdown-header {
  padding: var(--qz-s-2) var(--qz-s-3) !important;
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-faint);
}

/* ==========================================================================
   TABS
   ========================================================================== */

.qz-tabs {
  display: flex;
  align-items: center;
  gap: var(--qz-s-1);
  margin-bottom: var(--qz-s-5);
  border-bottom: 1px solid var(--qz-line);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.qz-tabs::-webkit-scrollbar { display: none; }

.qz-tab {
  position: relative;
  flex: 0 0 auto;
  padding: var(--qz-s-3) var(--qz-s-3);
  border: 0;
  background: transparent;
  color: var(--qz-text-mute);
  font-size: var(--qz-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--qz-dur-fast) var(--qz-ease);
}
.qz-tab:hover { color: var(--qz-text); }
.qz-tab.is-active { color: var(--qz-text); font-weight: 600; }
/* 2px underline that sits on the container's own rule */
.qz-tab.is-active::after {
  content: "";
  position: absolute;
  right: var(--qz-s-2);
  bottom: -1px;
  left: var(--qz-s-2);
  height: 2px;
  background: var(--qz-accent);
}
.qz-tab__count {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: var(--qz-r-sm);
  background: var(--qz-surface-4);
  color: var(--qz-text-mute);
  font-family: var(--qz-font-mono);
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
}
.qz-tab.is-active .qz-tab__count { background: var(--qz-accent-weak); color: var(--qz-accent); }

/* ==========================================================================
   ALERTS + FLASH TOASTS
   ========================================================================== */

.qz-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--qz-s-3);
  padding: var(--qz-s-3) var(--qz-s-4);
  margin-bottom: var(--qz-s-4);
  border-radius: var(--qz-r-md);
  border-left: 2px solid var(--qz-idle);
  background: var(--qz-idle-weak);
  color: var(--qz-text-dim);
  font-size: var(--qz-fs-sm);
}
.qz-alert__icon { flex: 0 0 auto; margin-top: 1px; font-size: 13px; }
.qz-alert__body { flex: 1 1 auto; min-width: 0; }
.qz-alert__title { font-weight: 600; color: var(--qz-text); }
.qz-alert--ok   { border-left-color: var(--qz-ok);   background: var(--qz-ok-weak); }
.qz-alert--ok   .qz-alert__icon { color: var(--qz-ok); }
.qz-alert--warn { border-left-color: var(--qz-warn); background: var(--qz-warn-weak); }
.qz-alert--warn .qz-alert__icon { color: var(--qz-warn); }
.qz-alert--crit { border-left-color: var(--qz-crit); background: var(--qz-crit-weak); }
.qz-alert--crit .qz-alert__icon { color: var(--qz-crit); }
.qz-alert--info { border-left-color: var(--qz-info); background: var(--qz-info-weak); }
.qz-alert--info .qz-alert__icon { color: var(--qz-info); }

/* Flash toast stack — top-right on desktop, top-full-width on mobile */
.qz-toasts {
  position: fixed;
  top: var(--qz-s-3);
  right: var(--qz-s-3);
  z-index: var(--qz-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--qz-s-2);
  width: min(380px, calc(100vw - var(--qz-s-6)));
  pointer-events: none;
}
.qz-toasts > * { pointer-events: auto; }

.qz-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--qz-s-3);
  padding: var(--qz-s-3) var(--qz-s-4);
  border-radius: var(--qz-r-lg);
  border-left: 2px solid var(--qz-accent);
  background: var(--qz-surface-3);
  box-shadow: var(--qz-ring-strong), var(--qz-shadow-2);
  color: var(--qz-text);
  font-size: var(--qz-fs-sm);
  animation: qz-toast-in var(--qz-dur-slow) var(--qz-ease-out);
}
.qz-toast--ok   { border-left-color: var(--qz-ok); }
.qz-toast--warn { border-left-color: var(--qz-warn); }
.qz-toast--crit { border-left-color: var(--qz-crit); }
.qz-toast--info { border-left-color: var(--qz-info); }
.qz-toast__icon { flex: 0 0 auto; margin-top: 1px; }
.qz-toast--ok   .qz-toast__icon { color: var(--qz-ok); }
.qz-toast--warn .qz-toast__icon { color: var(--qz-warn); }
.qz-toast--crit .qz-toast__icon { color: var(--qz-crit); }
.qz-toast--info .qz-toast__icon { color: var(--qz-info); }
.qz-toast__body { flex: 1 1 auto; min-width: 0; }
.qz-toast__close {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--qz-r-pill);
  background: transparent;
  color: var(--qz-text-faint);
  font-size: 11px;
  cursor: pointer;
}
.qz-toast__close:hover { background: var(--qz-surface-4); color: var(--qz-text); }
/* `.slide-out` is what the existing flash Stimulus controller adds on close. */
.qz-toast.is-leaving,
.qz-toast.slide-out { animation: qz-toast-out var(--qz-dur) var(--qz-ease) forwards; }

@keyframes qz-toast-in  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes qz-toast-out { to { opacity: 0; transform: translateX(16px); } }

@media (max-width: 575.98px) {
  .qz-toasts { top: var(--qz-s-2); right: var(--qz-s-2); left: var(--qz-s-2); width: auto; }
  @keyframes qz-toast-in  { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  @keyframes qz-toast-out { to { opacity: 0; transform: translateY(-14px); } }
}

/* ==========================================================================
   AUTH PAGES — login, OTP, password reset
   Split layout: brand panel + form. Collapses to form-only on mobile.
   ========================================================================== */

.qz-auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--qz-bg);
}
@media (min-width: 992px) { .qz-auth { grid-template-columns: 1fr 1fr; } }

/* Left: identity. A quiet technical grid, not a photo or a gradient wash.
   The mark stays anchored top-left where it has always sat; the pitch and
   stats centre in the panel over the grid and the drifting-icon canvas. */
.qz-auth__aside {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--qz-s-8);
  padding: var(--qz-s-16) var(--qz-s-10) var(--qz-s-10);
  background: var(--qz-surface-1);
  border-right: 1px solid var(--qz-line);
  overflow: hidden;
  text-align: center;
}
@media (min-width: 992px) { .qz-auth__aside { display: flex; } }

.qz-auth__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--qz-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--qz-line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 0%, transparent 78%);
  pointer-events: none;
}
.qz-auth__aside > * { position: relative; z-index: 2; }

/* Decorative animation layer: above the grid, under the copy. Sized in JS to
   the panel's own box, so it never bleeds under the form column. The mask
   thins it out behind the centred headline — icons stay legible drifting
   around the copy instead of crossing it. */
.qz-auth__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 52% 42% at 50% 50%,
              rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.45) 55%, #000 82%);
  -webkit-mask-image: radial-gradient(ellipse 52% 42% at 50% 50%,
              rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.45) 55%, #000 82%);
}

@media (prefers-reduced-motion: reduce) {
  .qz-auth__canvas { opacity: 0.5; }
}

/* The mark is a wide, transparent PNG drawn in navy — it needs a light plate
   to stay legible on the dark surface, never the accent tile. */
.qz-auth__brand { display: flex; align-items: center; gap: var(--qz-s-3); }

/* Out of the flex flow so the copy below centres on the panel itself, not on
   the space left under the mark. The wordmark rides alongside it. */
.qz-auth__aside .qz-auth__brand {
  position: absolute;
  top: var(--qz-s-10);
  left: var(--qz-s-10);
  text-align: left;
}
/* Short acronym over a much wider descriptor — it needs the size and a little
   tracking to hold its own as the mark rather than read as a caption. */
.qz-auth__brand-name {
  display: block;
  font-family: var(--qz-font-display);
  font-size: var(--qz-fs-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.qz-auth__brand-sub {
  display: block;
  font-size: var(--qz-fs-2xs);
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-faint);
}
/* No fill behind the mark — the lockup is transparent artwork and sits
   directly on the auth panel. */
.qz-auth__logo {
  display: grid;
  place-items: center;
  padding: var(--qz-s-2) var(--qz-s-3);
  overflow: hidden;
}
.qz-auth__logo img { display: block; width: auto; height: 40px; max-width: 100%; object-fit: contain; }

/* Mobile card carries the same mark, one size down. */
.qz-auth__mobile-brand .qz-auth__logo img { height: 44px; }

.qz-auth__pitch { max-width: 34ch; }
.qz-auth__pitch h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--qz-s-4);
}
.qz-auth__pitch p { color: var(--qz-text-mute); font-size: var(--qz-fs-sm); }

/* What the portal covers. Two columns of icon + label, no card surface, so
   the drifting icons stay visible between the rows. */
.qz-auth__modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qz-s-4) var(--qz-s-6);
  width: 100%;
  max-width: 520px;
  text-align: left;
}
.qz-auth__module { display: flex; align-items: flex-start; gap: var(--qz-s-3); }
.qz-auth__module-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--qz-r-lg);
  background: var(--qz-accent-weak);
  box-shadow: inset 0 0 0 1px var(--qz-accent-line);
  color: var(--qz-accent);
  font-size: var(--qz-fs-xs);
}
.qz-auth__module-name { display: block; font-size: var(--qz-fs-sm); font-weight: 600; line-height: 1.3; }
.qz-auth__module-desc { display: block; font-size: var(--qz-fs-2xs); color: var(--qz-text-mute); line-height: 1.4; }

.qz-auth__stats {
  display: flex;
  justify-content: center;
  gap: var(--qz-s-8);
  width: 100%;
  max-width: 520px;
  padding-top: var(--qz-s-6);
  border-top: 1px solid var(--qz-line);
}
.qz-auth__stat-val { font-family: var(--qz-font-mono); font-size: var(--qz-fs-lg); font-weight: 600; color: var(--qz-text); }
.qz-auth__stat-key { font-size: var(--qz-fs-2xs); letter-spacing: var(--qz-track-label); text-transform: uppercase; color: var(--qz-text-faint); }

/* Pinned to the panel foot, mirroring the mark at the head. */
.qz-auth__aside-foot {
  position: absolute;
  left: var(--qz-s-10);
  right: var(--qz-s-10);
  bottom: var(--qz-s-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-s-4);
  font-size: var(--qz-fs-2xs);
  color: var(--qz-text-faint);
}
.qz-auth__aside-foot span { display: inline-flex; align-items: center; gap: var(--qz-s-2); }

/* Short panels (laptops, split screens) drop the extras rather than scroll. */
@media (min-width: 992px) and (max-height: 760px) {
  .qz-auth__modules,
  .qz-auth__aside-foot { display: none; }
  .qz-auth__aside { gap: var(--qz-s-10); }
}

/* Right: the form */
.qz-auth__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--qz-s-8) var(--qz-s-5);
}
.qz-auth__form { width: 100%; max-width: 380px; margin: 0 auto; }

.qz-auth__mobile-brand { display: flex; align-items: center; gap: var(--qz-s-3); margin-bottom: var(--qz-s-8); }
@media (min-width: 992px) { .qz-auth__mobile-brand { display: none; } }

.qz-auth__title { font-size: var(--qz-fs-xl); font-weight: 600; letter-spacing: var(--qz-track-tight); margin-bottom: var(--qz-s-2); }
.qz-auth__sub { font-size: var(--qz-fs-sm); color: var(--qz-text-mute); margin-bottom: var(--qz-s-6); }
.qz-auth__foot { margin-top: var(--qz-s-6); padding-top: var(--qz-s-4); border-top: 1px solid var(--qz-line); font-size: var(--qz-fs-xs); color: var(--qz-text-mute); text-align: center; }

@media (max-width: 575.98px) {
  .qz-auth__main { padding: var(--qz-s-6) var(--qz-s-4); }
}

/* ==========================================================================
   CALENDAR
   ========================================================================== */

.qz-cal { border-radius: var(--qz-r-lg); background: var(--qz-surface-2); box-shadow: var(--qz-ring); overflow: hidden; }
.qz-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-s-3);
  padding: var(--qz-s-3) var(--qz-s-4);
  border-bottom: 1px solid var(--qz-line);
}
.qz-cal__month { font-family: var(--qz-font-display); font-size: var(--qz-fs-base); font-weight: 600; }
.qz-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.qz-cal__dow {
  padding: var(--qz-s-2);
  border-bottom: 1px solid var(--qz-line);
  background: var(--qz-surface-inset);
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-mute);
  text-align: center;
}
.qz-cal__day {
  position: relative;
  min-height: 104px;
  padding: var(--qz-s-2);
  border-right: 1px solid var(--qz-line-soft);
  border-bottom: 1px solid var(--qz-line-soft);
  transition: background-color var(--qz-dur-fast) var(--qz-ease);
}
.qz-cal__day:nth-child(7n) { border-right: 0; }
.qz-cal__day:hover { background: var(--qz-surface-3); }
.qz-cal__day--out { background: var(--qz-surface-inset); opacity: 0.5; }
.qz-cal__day--today { box-shadow: inset 0 0 0 1px var(--qz-accent-line); }
.qz-cal__date { font-family: var(--qz-font-mono); font-size: var(--qz-fs-xs); font-weight: 600; color: var(--qz-text-mute); }
.qz-cal__day--today .qz-cal__date { color: var(--qz-accent); }
.qz-cal__event {
  display: block;
  margin-top: 3px;
  padding: 2px 5px;
  border-left: 2px solid var(--qz-accent);
  border-radius: var(--qz-r-xs);
  background: var(--qz-accent-weak);
  color: var(--qz-text);
  font-size: var(--qz-fs-2xs);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qz-cal__event--ok   { border-left-color: var(--qz-ok);   background: var(--qz-ok-weak); }
.qz-cal__event--warn { border-left-color: var(--qz-warn); background: var(--qz-warn-weak); }
.qz-cal__event--crit { border-left-color: var(--qz-crit); background: var(--qz-crit-weak); }
.qz-cal__event--info { border-left-color: var(--qz-info); background: var(--qz-info-weak); }

@media (max-width: 767.98px) {
  .qz-cal__day { min-height: 62px; padding: 4px; }
  .qz-cal__event { padding: 1px 3px; font-size: 9px; }
  .qz-cal__dow { font-size: 9px; padding: 5px 2px; }
}

/* ==========================================================================
   SCORECARD / KPI RATING
   ========================================================================== */

.qz-score {
  display: flex;
  align-items: center;
  gap: var(--qz-s-4);
  padding: var(--qz-s-4);
  border-radius: var(--qz-r-lg);
  border-left: 2px solid var(--qz-idle);
  background: var(--qz-surface-2);
  box-shadow: var(--qz-ring);
}
.qz-score + .qz-score { margin-top: var(--qz-s-2); }
.qz-score__val { font-family: var(--qz-font-mono); font-size: var(--qz-fs-xl); font-weight: 600; line-height: 1; min-width: 60px; }
.qz-score__main { flex: 1 1 auto; min-width: 0; }
.qz-score__name { font-size: var(--qz-fs-sm); font-weight: 600; color: var(--qz-text); }
.qz-score__meta { font-size: var(--qz-fs-xs); color: var(--qz-text-mute); }

.qz-score--outstanding { border-left-color: var(--qz-info); }
.qz-score--outstanding .qz-score__val { color: var(--qz-info); }
.qz-score--excellent   { border-left-color: var(--qz-ok); }
.qz-score--excellent   .qz-score__val { color: var(--qz-ok); }
.qz-score--good        { border-left-color: var(--qz-accent); }
.qz-score--good        .qz-score__val { color: var(--qz-accent); }
.qz-score--satisfactory{ border-left-color: var(--qz-warn); }
.qz-score--satisfactory .qz-score__val { color: var(--qz-warn); }
.qz-score--poor        { border-left-color: var(--qz-crit); }
.qz-score--poor        .qz-score__val { color: var(--qz-crit); }

@media (max-width: 575.98px) {
  .qz-score { flex-wrap: wrap; gap: var(--qz-s-2); }
  .qz-score__val { min-width: 0; }
}

/* ==========================================================================
   CHARTS
   Chart.js draws into a canvas; the container controls the box. Fixed aspect
   so the canvas never collapses or overflows its column.
   ========================================================================== */

.qz-chart { position: relative; width: 100%; height: 260px; }
.qz-chart--sm { height: 180px; }
.qz-chart--lg { height: 340px; }
.qz-chart canvas { display: block; width: 100% !important; height: 100% !important; }

@media (max-width: 767.98px) {
  .qz-chart { height: 220px; }
  .qz-chart--lg { height: 260px; }
}

.qz-legend { display: flex; flex-wrap: wrap; gap: var(--qz-s-2) var(--qz-s-4); margin-top: var(--qz-s-3); }
.qz-legend__item { display: flex; align-items: center; gap: 6px; font-size: var(--qz-fs-xs); color: var(--qz-text-mute); }
.qz-legend__swatch { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }

/* ==========================================================================
   TIMELINE — audit trails, activity history
   ========================================================================== */

.qz-timeline { position: relative; margin: 0; padding: 0 0 0 var(--qz-s-5); list-style: none; }
.qz-timeline::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: 1px; background: var(--qz-line); }
.qz-timeline__item { position: relative; padding-bottom: var(--qz-s-4); }
.qz-timeline__item:last-child { padding-bottom: 0; }
.qz-timeline__item::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(-1 * var(--qz-s-5) + 1px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--qz-surface-4);
  box-shadow: 0 0 0 2px var(--qz-bg);
}
.qz-timeline__item--accent::before { background: var(--qz-accent); }
.qz-timeline__item--ok::before   { background: var(--qz-ok); }
.qz-timeline__item--crit::before { background: var(--qz-crit); }
.qz-timeline__time { font-family: var(--qz-font-mono); font-size: var(--qz-fs-2xs); color: var(--qz-text-faint); }
.qz-timeline__title { font-size: var(--qz-fs-sm); font-weight: 500; color: var(--qz-text); }
.qz-timeline__text { font-size: var(--qz-fs-xs); color: var(--qz-text-mute); }

/* ==========================================================================
   KEY / VALUE INLINE PAIRS — compact meta strips
   ========================================================================== */

.qz-kv { display: flex; flex-wrap: wrap; gap: var(--qz-s-2) var(--qz-s-5); }
.qz-kv__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qz-kv__k { font-size: var(--qz-fs-2xs); font-weight: 600; letter-spacing: var(--qz-track-label); text-transform: uppercase; color: var(--qz-text-faint); }
.qz-kv__v { font-size: var(--qz-fs-sm); color: var(--qz-text); font-variant-numeric: tabular-nums; }