/* ===================== Font ===================== */
/* Saans is a licensed font: use it only when installed locally, never ship the files. */
@font-face {
  font-family: "Saans";
  src: local("Saans Regular"), local("Saans-Regular");
  font-weight: 100 499;
  font-style: normal;
}
@font-face {
  font-family: "Saans";
  src: local("Saans Medium"), local("Saans-Medium");
  font-weight: 500 900;
  font-style: normal;
}

/* ===================== Design tokens (Figma: Conscia Landing Zone) ===================== */
:root {
  /* brand */
  --brand: #4962ff;              /* blue/500 (brand) */
  --brand-hover: #3a4fe0;
  --brand-tint: #e5e9ff;         /* misc/secondary button bg · badge info bg */
  --brand-tint-hover: #d6dcff;
  --burgundy: #1e0721;           /* burgundy/900 (brand) */
  --burgundy-600: #351838;       /* burgundy/600 */
  --ink-accent: #402a7a;         /* team contact icons */

  /* surfaces + lines */
  --page-bg: #ffffff;            /* misc/default background */
  --card-bg: #ffffff;
  --subtle-bg: #f3f4f5;          /* misc/subtle background */
  --sidebar-active: #e4e4e5;     /* sidebar/active bg */
  --chip-bg: #f0f2f6;
  --stroke: #cbcace;             /* misc/subtle stroke — section cards */
  --divider: #e4e4e5;            /* misc/divider — tiles, rows */
  --track: #ececee;

  /* text */
  --text: #0e080f;               /* misc/default text */
  --text-muted: #6d6c75;         /* misc/muted text */
  --text-faint: #8e8d95;

  /* status */
  --danger: #e52e3b;             /* danger/500 · severity/default/critical bg */
  --danger-hover: #cc2431;
  --danger-tint: #ffebec;        /* severity/subtle/critical bg */
  --danger-text: #d42431;        /* severity/subtle/critical text */
  --disaster: #a41c26;           /* severity/default/disaster bg */
  --alert-tint: #ffe8e9;         /* peach/300 (brand) */
  --warning: #fa8b1b;            /* warning/500 */
  --warning-tint: #fff3d4;       /* warning/50 */
  --warning-text: #b25a00;
  --high-tint: #ffebcc;          /* severity/subtle/high bg */
  --high-text: #e14709;          /* severity/subtle/high text */
  --success: #16a66c;            /* severity/default/low bg */
  --success-tint: #e6faf1;       /* severity/subtle/low bg */
  --success-text: #0b7d4f;       /* severity/subtle/low text */

  /* severity scale (design-system sheet: Default / Subtle) — used for lifecycle buckets */
  --sev-disaster: #a41c26;
  --sev-critical: #e52e3b;
  --sev-critical-tint: #ffebec;
  --sev-high: #fa8b1b;
  --sev-high-tint: #ffebcc;
  --sev-medium: #ffd561;
  --sev-medium-tint: #fef6cd;
  --sev-medium-text: #8a6400;
  --sev-low: #36ba85;
  --sev-low-tint: #e6faf1;

  /* chart palette (design system "Graph/chart colors"): use in priority order, start at 1, never skip; same in light and dark mode */
  --chart-1: #4962ff;
  --chart-2: #a3afff;
  --chart-3: #31857e;
  --chart-4: #a3d6cf;
  --chart-5: #7c5281;
  --chart-6: #f2c7cb;
  --chart-7: #1430c1;
  --chart-8: #cbcace;
  --chart-9: #313033;
  --chart-10: #c22835;
  --chart-11: #bc78f7;
  --chart-12: #55c1ef;
  --chart-13: #fbd632;
  --chart-14: #540e11;

  /* shape, elevation, motion */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-pill: 100px;
  --shadow-hover: 0 4px 14px rgba(14, 8, 15, 0.08);
  --shadow-pop: 0 12px 32px rgba(14, 8, 15, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-chart: 900ms;
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--brand);

  --font: "Saans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.26;
  font-feature-settings: "calt" 0;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-feature-settings: inherit; }
button { color: inherit; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 500; }
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus); }

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  border: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn svg { flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-secondary { background: var(--brand-tint); color: var(--brand); }
.btn-secondary:hover { background: var(--brand-tint-hover); }
.btn-secondary:hover svg { transform: rotate(-12deg) scale(1.08); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--divider); }
.btn-ghost:hover { background: var(--subtle-bg); }
.btn-link { background: transparent; color: var(--brand); }
.btn-link:hover { background: var(--brand-tint); }
.btn-link:hover svg, .btn-primary:hover svg[data-nudge] { transform: translate(2px, -2px); }
.btn-sm { height: 28px; font-size: 12px; padding: 0 10px; gap: 6px; }

.icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn .dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--burgundy);
}
#notifBtn:hover svg { animation: bell-ring 0.6s var(--ease); }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } }

/* ===================== App shell ===================== */
.app { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Topbar ---------- */
.topbar {
  height: 50px;
  min-height: 50px;
  background: var(--burgundy);
  border-bottom: 1px solid var(--burgundy-600);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  position: sticky;
  top: 0;
  z-index: 60;
}
.topbar__left, .topbar__right { display: flex; align-items: center; min-width: 0; }
.topbar__left { gap: 48px; }
.topbar__right { gap: 16px; padding: 0 8px; position: relative; }
.topbar__actions { display: flex; gap: 8px; }

.branding { display: flex; align-items: center; padding: 0 8px; cursor: pointer; flex-shrink: 0; }
.branding__logo { display: block; height: 28px; width: auto; transition: opacity var(--dur-fast) var(--ease); }
.branding__name {
  color: #fff;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.46px;
  padding-left: 7px;
  white-space: nowrap;
}
.branding:hover .branding__logo { opacity: 0.85; }

.topbar__client {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  cursor: pointer;
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  margin-left: -8px;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.topbar__client:hover { background: rgba(255, 255, 255, 0.08); }
.topbar__client b { color: #fff; font-size: 14px; }
.topbar__client svg { color: #fff; transition: transform var(--dur-fast) var(--ease); }
.topbar__client:hover svg { transform: translateY(1px); }

.menu-btn { display: none; }

/* ---------- Dropdowns ---------- */
.rel { position: relative; }
.dropdown {
  position: absolute;
  top: 42px;
  right: 0;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  min-width: 260px;
  padding: 6px;
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  color: var(--text);
}
.dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.dropdown-item:hover { background: var(--subtle-bg); }
.dropdown-item svg { color: var(--text-muted); }
.dropdown-sep { height: 1px; background: var(--divider); margin: 6px 2px; }
.dropdown-head { padding: 8px 10px 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.dropdown-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.dropdown-user b { display: block; font-size: 14px; }
.dropdown-user span { font-size: 12px; color: var(--text-muted); }
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-item { display: flex; gap: 10px; padding: 9px 10px; border-radius: var(--radius-xs); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.notif-item:hover { background: var(--subtle-bg); }
.notif-item .d { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-top: 4px; flex-shrink: 0; }
.notif-item .d.read { background: var(--divider); }
.notif-item b { display: block; font-size: 14px; margin-bottom: 2px; }
.notif-item span { font-size: 12px; color: var(--text-muted); }

/* ---------- Body: sidebar + main ---------- */
.body { flex: 1; display: flex; min-height: 0; }

.sidebar {
  width: 104px;
  background: var(--subtle-bg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  position: sticky;
  top: 50px;
  align-self: flex-start;
  height: calc(100vh - 50px);
}
.sidebar__top, .sidebar__bottom { display: flex; flex-direction: column; gap: 4px; }

.sidebar__item {
  width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 10px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.sidebar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__item svg { transition: transform var(--dur) var(--ease); }
.sidebar__item:hover { background: rgba(14, 8, 15, 0.05); }
.sidebar__item:hover svg { transform: translateY(-2px); }
.sidebar__item:active svg { transform: scale(0.92); }
.sidebar__item.active { background: var(--sidebar-active); font-weight: 500; }
.sidebar__item.active svg { stroke-width: 1.8; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14, 8, 15, 0.4);
  z-index: 899;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.main { flex: 1; padding: 0 24px 40px; min-width: 0; }

/* ---------- Page head ---------- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px 0;
  margin-bottom: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid transparent;
}
.page-head--hero { margin-bottom: 0; padding-bottom: 48px; }
.page-head h1 {
  margin: 0;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.57px;
}
.page-head h1 + .page-head__sub, .page-head > div > h1 { margin-bottom: 10px; }
.page-head__sub { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 14px; flex-wrap: wrap; }
.page-head__live { display: flex; align-items: center; gap: 8px; }
.page-head__actions { display: flex; gap: 8px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--success); position: relative; flex-shrink: 0; }
.pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--success);
  opacity: 0.4;
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }

/* ===================== Layout ===================== */
.grid { display: grid; gap: 24px; margin-top: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Section card ---------- */
.section-card, .card {
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
  animation: card-in 0.5s var(--ease) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section-card { padding: 0 20px 20px; }
.section-card__title, .card__title {
  margin: 0;
  padding: 20px 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-card__foot { display: flex; justify-content: center; margin-top: 6px; }

.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; flex-wrap: wrap; }
.sub-head__title { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.sub-head__title--solo { padding: 20px 0; }

/* ---------- KPI tiles (Figma: KpiWithGraph) ---------- */
.kpi-grid { display: grid; gap: 16px; }
.kpi-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kpi-tile {
  position: relative;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kpi-tile[data-page], .kpi-tile[data-toast] { cursor: pointer; }
.kpi-tile[data-page]:hover, .kpi-tile[data-toast]:hover { border-color: var(--stroke); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.kpi-tile[data-page]:active, .kpi-tile[data-toast]:active { transform: translateY(0) scale(0.995); }
.kpi-tile--alert { background: var(--alert-tint); border-color: var(--disaster); }
.kpi-tile--plan { background: var(--warning-tint); border-color: var(--warning); }
.kpi-tile--success { background: var(--success-tint); border-color: var(--success); }
.kpi-tile--cta { background: var(--brand-tint); border-color: var(--brand-tint); }
.kpi-tile--alert[data-page]:hover { border-color: var(--disaster); }
.kpi-tile--plan[data-page]:hover { border-color: var(--warning); }
.kpi-tile--success[data-page]:hover { border-color: var(--success); }

.kpi-tile__head { position: relative; padding: 14px 36px 28px 16px; }
.kpi-tile:not(.kpi-tile--graph) .kpi-tile__head { flex-grow: 1; }
.kpi-tile__title { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; }
.kpi-tile__info { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--text); opacity: 0.85; cursor: help; transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease); }
.kpi-tile__info:hover { opacity: 1; transform: scale(1.12); }
.kpi-tile__link { position: absolute; top: 15px; right: 14px; color: var(--brand); display: inline-flex; transition: transform var(--dur) var(--ease); }
.kpi-tile:hover .kpi-tile__link { transform: translate(2px, -2px); }
.kpi-tile__value {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 20px;
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.69px;
}
.kpi-tile__unit { font-size: 32px; letter-spacing: -0.48px; line-height: 1; padding-bottom: 1px; }
.kpi-tile__label { text-align: center; padding: 12px 8px 14px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-tile .btn-sm { align-self: center; margin: -4px 0 12px; }

/* tiles with a sparkline */
.kpi-tile--graph .kpi-tile__head { flex-grow: 1; }
.kpi-tile--graph .kpi-tile__label { padding-bottom: 16px; }
.spark { position: relative; height: 72px; }
.spark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-chart) var(--ease);
}
.spark.drawn svg { clip-path: inset(0 0 0 0); }
.spark__area { opacity: 0; transition: opacity 0.6s var(--ease) 0.35s; }
.spark.drawn .spark__area { opacity: 1; }
.spark__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark--brand .spark__line { stroke: var(--brand); }
.spark--brand .spark__area { fill: var(--brand-tint); }
.spark--danger .spark__line { stroke: var(--danger-text); }
.spark--danger .spark__area { fill: var(--danger-tint); }
.spark--success .spark__line { stroke: var(--success); }
.spark--success .spark__area { fill: var(--success-tint); }
.spark__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(14, 8, 15, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast);
}
.spark__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease);
  transform: scale(0.6);
}
.spark--brand .spark__dot { color: var(--brand); }
.spark--danger .spark__dot { color: var(--danger-text); }
.spark--success .spark__dot { color: var(--success); }
.spark.hovering .spark__cursor { opacity: 1; }
.spark.hovering .spark__dot { opacity: 1; transform: scale(1); }
.kpi-tile__trend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 46px;
  padding: 0 8px;
  background: #fff;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.kpi-tile__trend--danger { color: var(--danger-text); }
.kpi-tile__trend--success { color: var(--success-text); }
.trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px;
  margin-left: 4px;
  border-radius: var(--radius-pill);
  font-weight: 500;
}
.trend-pill--flat { background: var(--subtle-bg); color: var(--text); }
.trend-pill--up { background: var(--danger); color: #fff; }
.trend-pill--down { background: var(--success); color: #fff; }

/* ---------- Call-to-action strip ---------- */
.cta-strip {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--brand-tint);
  border-radius: var(--radius);
  padding: 8px 8px 8px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.cta-strip .btn:hover svg { transform: scale(1.1); }

/* ---------- Tab group (pill tabs with a sliding indicator) ---------- */
.tabgroup { position: relative; display: inline-flex; gap: 2px; flex-wrap: wrap; }
.tabgroup__tab {
  position: relative;
  z-index: 1;
  height: 26px;
  padding: 0 12px 1px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
.tabgroup__tab:not(.active):hover { background: var(--subtle-bg); }
.tabgroup__tab.active { color: #fff; }
.tabgroup:not(.has-ind) .tabgroup__tab.active { background: var(--text); }
.tabgroup__ind {
  position: absolute;
  top: 0;
  left: 0;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--text);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
  pointer-events: none;
}
.tabgroup--team { margin-top: 4px; margin-bottom: 16px; }
[data-tab-panel] { animation: panel-in var(--dur) var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- List rows ---------- */
.row-list { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--divider);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur-fast);
}
.row:hover { border-color: var(--stroke); box-shadow: var(--shadow-hover); transform: translateX(2px); }
.row:active { transform: translateX(2px) scale(0.995); }
.row__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: var(--chip-bg);
  color: #6e7787;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.row:hover .row__icon { transform: scale(1.08); }
.row__icon.danger { background: var(--danger-tint); color: #ff3b30; }
.row__icon.warn { background: var(--warning-tint); color: var(--warning-text); }
.row__icon.ok { background: var(--sev-low-tint); color: var(--success-text); }
.row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__right { flex-shrink: 0; display: flex; align-items: center; }
.row__right--stack { flex-direction: column; align-items: flex-end; gap: 2px; }
.row__time { font-size: 12px; color: var(--text-muted); }

.pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-critical { background: var(--danger-tint); color: var(--danger-text); }
.pill-orange { background: var(--warning-tint); color: var(--warning-text); }
.pill-neutral, .pill-high { background: var(--chip-bg); color: var(--text); }
.pill-success { background: var(--success-tint); color: var(--success-text); }

.score { font-size: 12px; font-weight: 500; padding: 3px 7px; border-radius: 5px; background: var(--chip-bg); color: var(--text); }
.score--critical { background: var(--danger-tint); color: var(--danger-text); }

/* ---------- Badges + Actions required ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px 1px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge--first { background: var(--danger); color: #fff; }
.badge--important { background: var(--danger-tint); color: var(--danger-text); }
.badge--plan { background: var(--high-tint); color: var(--high-text); }
.badge--neutral { background: var(--subtle-bg); color: var(--text); }

.action-list { display: flex; flex-direction: column; }
.action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 47px;
  padding: 13px 40px 13px 8px;
  margin-bottom: -1px;
  background: #fff;
  border: none;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur) var(--ease);
}
.action .badge { width: 90px; margin-right: 14px; transition: transform var(--dur) var(--ease); }
.action::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--stroke);
  opacity: 0;
  transition: opacity var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.action:hover { background: var(--subtle-bg); }
.action:hover::after { opacity: 1; }
.action:hover .badge { transform: translateX(2px); }
.action__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.action__title { font-weight: 500; }
.action__context { color: var(--text-muted); }
.action.done { opacity: 0.5; }
.action.done .action__title { text-decoration: line-through; }
.action.done::after { opacity: 1; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--success); }

/* ---------- Team ---------- */
.team-list { display: flex; flex-direction: column; gap: 12px; }
.member {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.member:hover { border-color: var(--stroke); box-shadow: var(--shadow-hover); }
.member__photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.member:hover .member__photo { transform: scale(1.06); }
.member__photo--initials { display: flex; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand); font-size: 11px; font-weight: 500; }
.member__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.member__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member__role { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member__actions { display: flex; gap: 8px; flex-shrink: 0; }
.member__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.member__btn svg { color: var(--ink-accent); transition: transform var(--dur) var(--ease), color var(--dur-fast); }
.member__btn:hover { background: var(--brand-tint); color: var(--brand); }
.member__btn:hover svg { color: var(--brand); transform: scale(1.1); }

/* ---------- Locked (upsell) content ---------- */
.lock-wrap { position: relative; }
.lock-body { transition: filter 0.5s var(--ease), opacity 0.5s var(--ease); }
.lock-body.blurred { filter: blur(9.5px); opacity: 0.7; pointer-events: none; user-select: none; }
.locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px;
  text-align: center;
  padding: 20px;
  z-index: 5;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.locked-overlay p { margin: 0; font-size: 16px; line-height: 1.3; max-width: 190px; }
.locked-overlay.hidden { opacity: 0; transform: scale(0.97); pointer-events: none; }
.lock-wrap--page .locked-overlay { justify-content: flex-start; padding-top: 160px; }
.lock-wrap--page .locked-overlay p { max-width: 260px; }

/* ---------- Legacy card parts (Lifecycle summary, Uptime) ---------- */
.card { margin-bottom: 24px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; flex-wrap: wrap; }
.card__title svg { color: var(--text-muted); }
.card__body { padding: 0 20px 20px; flex: 1; }
.card__foot {
  padding: 12px 20px;
  border-top: 1px solid var(--divider);
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card__foot .warn { color: var(--warning-text); }
.inline-icon { display: inline-block; vertical-align: -2px; margin-right: 4px; }

.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.legend-dot.red { background: var(--danger); }
.legend-dot.orange { background: var(--warning); }
.legend-dot.green { background: var(--success); }
.legend-dot.neutral { background: var(--stroke); }

/* ===================== Tooltip / toast ===================== */
.tooltip {
  position: fixed;
  background: var(--text);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  max-width: 280px;
  transform: translate(-50%, calc(-100% - 4px));
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease);
  box-shadow: 0 8px 20px rgba(14, 8, 15, 0.25);
}
.tooltip.show { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); }
.tooltip::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--text);
}

.toast-stack {
  position: fixed;
  bottom: 100px;
  right: 22px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 800;
}
.toast {
  background: var(--text);
  color: #fff;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toast-in var(--dur) var(--ease);
  max-width: 340px;
}
.toast svg { color: #4ad99a; flex-shrink: 0; }
.toast.leaving { animation: toast-out 0.22s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(0.97); } }

/* ===================== Chat widget ===================== */
.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 700; }
.chat-widget__pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  box-shadow: -8px -2px 18px rgba(14, 8, 15, 0.08), var(--shadow-hover);
  padding: 10px 12px 10px 14px;
  cursor: pointer;
  text-align: left;
  transform-origin: bottom right;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur-fast);
}
.chat-widget__pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.chat-widget__text { display: flex; flex-direction: column; gap: 2px; }
.chat-widget__title { font-weight: 500; font-size: 14px; }
.chat-widget__sub { font-size: 12px; color: var(--text-muted); }
.chat-widget__avatar { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.chat-widget__avatar img, .chat-panel__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.chat-widget__status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid #fff;
}
.chat-widget.expanded .chat-widget__pill { opacity: 0; transform: scale(0.9); pointer-events: none; position: absolute; right: 0; bottom: 0; }

.chat-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 360px;
  height: 480px;
  max-height: calc(100vh - 44px);
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.4) translateY(10%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s var(--ease), opacity 0.25s var(--ease);
}
.chat-widget.expanded .chat-panel { transform: none; opacity: 1; pointer-events: auto; }
.chat-panel__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--burgundy); flex-shrink: 0; }
.chat-panel__avatar { width: 36px; height: 36px; flex-shrink: 0; position: relative; }
.chat-panel__avatar .chat-widget__status { width: 10px; height: 10px; border-color: var(--burgundy); }
.chat-panel__who { flex: 1; min-width: 0; }
.chat-panel__name { color: #fff; font-weight: 500; font-size: 14px; }
.chat-panel__role { color: rgba(255, 255, 255, 0.65); font-size: 12px; margin-top: 2px; }
.chat-panel__min {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.chat-panel__min:hover { background: rgba(255, 255, 255, 0.16); }
.chat-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--subtle-bg); }
.chat-msg { display: flex; gap: 8px; align-items: flex-end; animation: report-in var(--dur) var(--ease); }
.chat-msg--me { flex-direction: row-reverse; }
.chat-msg__avatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.chat-msg__bubble {
  max-width: 78%;
  font-size: 14px;
  line-height: 1.45;
  padding: 9px 12px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  background: #fff;
  border: 1px solid var(--divider);
}
.chat-msg--me .chat-msg__bubble { background: var(--brand); color: #fff; border-color: transparent; border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; }
.chat-msg--typing .chat-msg__bubble { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.chat-msg__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); animation: typing-bounce 1.1s ease-in-out infinite; }
.chat-msg__dot:nth-child(2) { animation-delay: 0.15s; }
.chat-msg__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.chat-panel__input-wrap { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--divider); background: #fff; flex-shrink: 0; transition: box-shadow var(--dur-fast); }
.chat-panel__input-wrap.focused { box-shadow: inset 0 0 0 2px var(--brand-tint); }
.chat-panel__input { flex: 1; border: none; outline: none; resize: none; background: transparent; font-size: 14px; line-height: 1.45; color: var(--text); max-height: 90px; min-height: 20px; padding: 4px 2px; }
.chat-panel__input::placeholder { color: var(--text-faint); }
.chat-panel__send, .drawer__send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.chat-panel__send:hover, .drawer__send:hover { background: var(--brand-hover); transform: scale(1.06); }
.chat-panel__send:active, .drawer__send:active { transform: scale(0.94); }

/* ===================== Modal ===================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 8, 15, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff;
  border-radius: var(--radius);
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
  padding: 24px;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.25s var(--ease);
}
.modal-backdrop.open .modal { transform: none; }
.modal-upgrade { width: 680px; padding: 28px; }
.modal-upgrade__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-upgrade__eyebrow { font-size: 12px; font-weight: 500; color: var(--brand); margin-bottom: 6px; }
.modal-upgrade__head h3 { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.2; }
.modal-close {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--divider);
  background: #fff;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast), transform var(--dur) var(--ease);
}
.modal-close:hover { background: var(--subtle-bg); transform: rotate(90deg); }
.modal-upgrade__sub { margin: 10px 0 24px; font-size: 14px; color: var(--text-muted); line-height: 1.45; max-width: 520px; }
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.tier-card {
  position: relative;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 18px 16px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur-fast);
}
.tier-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--stroke); }
.tier-card--popular { background: var(--brand-tint); border-color: var(--brand); }
.tier-card--popular:hover { border-color: var(--brand); }
.tier-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  white-space: nowrap;
}
.tier-card__label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
.tier-card__title { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.tier-card__sub { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; min-height: 30px; }
.tier-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tier-check li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-faint); }
.tier-check li.on { color: var(--text); }
.tier-check li svg { flex-shrink: 0; }
.modal-upgrade__warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--warning-tint);
  color: var(--warning-text);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 20px;
}
.modal-upgrade__warning svg { flex-shrink: 0; margin-top: 2px; }
.modal-upgrade__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--divider); font-size: 14px; color: var(--text-muted); }
.modal-upgrade__actions { display: flex; gap: 8px; flex-shrink: 0; }
.modal-upgrade__actions .btn-primary:hover svg { transform: translate(2px, -2px); }

/* ===================== Drawer (summary) ===================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 8, 15, 0.4);
  z-index: 950;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(14, 8, 15, 0.22);
  z-index: 960;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(100% + 32px));
  transition: transform 0.45s var(--ease);
}
.drawer-backdrop.open .drawer { transform: none; }
.drawer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 18px; flex-shrink: 0; }
.drawer__eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--brand); margin-bottom: 6px; }
.drawer__date { font-size: 20px; font-weight: 500; letter-spacing: -0.1px; }
.drawer__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur) var(--ease);
}
.drawer__close:hover { background: var(--subtle-bg); color: var(--text); transform: rotate(90deg); }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 20px; font-size: 14px; line-height: 1.6; }
.drawer__report { animation: report-in 0.4s var(--ease); }
@keyframes report-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.drawer__report h4 { font-size: 16px; font-weight: 500; margin: 22px 0 6px; }
.drawer__report p { margin: 0 0 12px; }
.drawer__report b { font-weight: 500; }
.drawer__report .rp-alert { color: var(--danger-text); font-weight: 500; font-size: 16px; }
.drawer__report .rp-decisions-label { font-weight: 500; margin-top: 22px; }
.drawer__skeleton { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.sk-line {
  height: 12px;
  width: 100%;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--track) 25%, #f7f7f8 37%, var(--track) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-line--h { width: 70%; height: 16px; }
.sk-line--sub { width: 40%; height: 14px; margin-top: 18px; }
@keyframes sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.drawer__bottom { flex-shrink: 0; padding: 16px 24px 24px; border-top: 1px solid var(--divider); }
.drawer__input-wrap { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 8px 8px 8px 12px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.drawer__input-wrap.focused { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.drawer__input { flex: 1; border: none; outline: none; resize: none; background: transparent; font-size: 14px; line-height: 1.5; color: var(--text); max-height: 120px; min-height: 20px; padding: 4px 0; }
.drawer__input::placeholder { color: var(--text-muted); }
.drawer__qa { animation: report-in var(--dur) var(--ease); margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--divider); }
.drawer__qa .qa-q { font-weight: 500; margin-bottom: 6px; }
.drawer__qa .qa-a { color: var(--text-muted); }

/* ===================== Placeholder page ===================== */
.placeholder {
  border: 1px dashed var(--stroke);
  border-radius: var(--radius);
  padding: 64px 24px;
  text-align: center;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.placeholder svg { color: var(--brand); margin-bottom: 14px; }
.placeholder .btn svg { color: inherit; margin: 0; }
.placeholder h2 { color: var(--text); margin: 0 0 8px; font-size: 20px; font-weight: 500; }
.placeholder p { margin: 0 0 20px; max-width: 420px; line-height: 1.45; }

/* ===================== Tables, filters, summaries (Lifecycle / Devices / Alarms / Cases / Advisories / Uptime) ===================== */
.lc-panel { animation: card-in 0.4s var(--ease) both; }
.lc-summary-card .card__head { padding-top: 0; }

.lc-summary { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lc-donut-wrap { position: relative; flex-shrink: 0; width: 150px; height: 150px; cursor: default; }
.lc-donut { display: block; }
.lc-donut { transform: rotate(-90deg); }
.lc-donut__track { fill: none; stroke: var(--stroke); stroke-width: 12; opacity: 0.6; }
.lc-donut__seg { fill: none; stroke-width: 12; stroke-dasharray: 0 314.16; transition: stroke-dasharray var(--dur-chart) var(--ease), stroke-width var(--dur-fast); }
.lc-donut__seg.disaster { stroke: var(--sev-disaster); }
.lc-donut__seg.critical { stroke: var(--sev-critical); }
.lc-donut__seg.high { stroke: var(--sev-high); }
.lc-donut__seg.medium { stroke: var(--sev-medium); }
.lc-donut__seg.low { stroke: var(--sev-low); }
.lc-donut-wrap:hover .lc-donut__seg { stroke-width: 14; }
.lc-donut__center { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lc-donut__center b { font-size: 26px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.1; }
.lc-donut__center span { font-size: 12px; color: var(--text-muted); }
.lc-tiles { flex: 1; min-width: 0; }
.lc-tiles .kpi-tile__head { flex-grow: 0; padding-bottom: 12px; padding-right: 16px; }
/* equal-height tiles: number + label sit centred in the space under the title */
.lc-tiles .kpi-tile__value { margin-top: auto; }
.lc-tiles .kpi-tile__label { margin-bottom: auto; padding-bottom: 26px; }
.kpi-tile__btn { height: auto; padding: 0 4px; margin: -2px 0; font-size: 14px; line-height: 1.26; gap: 4px; }
.invest { margin: 0 20px 20px; border: 1px solid var(--divider); border-radius: var(--radius); overflow: hidden; animation: panel-in var(--dur) var(--ease); }
.invest__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.invest__table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-muted); background: var(--subtle-bg); padding: 10px 14px; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.invest__table td { padding: 12px 14px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.invest__table td b { font-weight: 500; display: block; }
.invest__table td span:not(.pill) { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.invest__table tbody tr { transition: background var(--dur-fast); }
.invest__table tbody tr:hover { background: #f8f8f9; }
.invest__table .num { text-align: right; white-space: nowrap; font-weight: 500; }
.invest__table tfoot td { background: var(--brand-tint); border-bottom: none; color: var(--text); }
.invest__table tfoot td b { display: inline; }
.invest__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
#investToggle svg { transition: transform var(--dur) var(--ease); }
#investToggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 760px) {
  .invest { overflow-x: auto; }
  .invest__table { min-width: 620px; }
}
.lc-summary__foot { border-top: 1px solid var(--divider); padding: 12px 20px; font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
/* lifecycle buckets on the severity scale */
.kpi-tile--critical { background: var(--sev-critical-tint); border-color: var(--sev-critical); }
.kpi-tile--high { background: var(--sev-high-tint); border-color: var(--sev-high); }
.kpi-tile--medium { background: var(--sev-medium-tint); border-color: var(--sev-medium); }
.kpi-tile--critical[data-page]:hover, .kpi-tile--critical[data-scroll]:hover { border-color: var(--sev-critical); }
.kpi-tile--high[data-page]:hover, .kpi-tile--high[data-scroll]:hover { border-color: var(--sev-high); }
.kpi-tile--medium[data-page]:hover, .kpi-tile--medium[data-scroll]:hover { border-color: #e9b93a; }
.legend-dot.disaster { background: var(--sev-disaster); }
.legend-dot.critical { background: var(--sev-critical); }
.legend-dot.high { background: var(--sev-high); }
.legend-dot.medium { background: var(--sev-medium); box-shadow: inset 0 0 0 1px rgba(138, 100, 0, 0.25); }
.legend-dot.low { background: var(--sev-low); }
.pill-disaster { background: var(--sev-disaster); color: #fff; }
.pill-high { background: var(--sev-high-tint); color: var(--high-text); }
.pill-medium { background: var(--sev-medium-tint); color: var(--sev-medium-text); }
.pill-low { background: var(--sev-low-tint); color: var(--success-text); }
.row__icon.disaster { background: var(--sev-disaster); color: #fff; }
.lc-flag { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--sev-critical-tint); color: var(--sev-disaster); font-size: 12px; font-weight: 500; }
.lc-table tbody tr.lc-row-unsupported td:first-child { box-shadow: inset 3px 0 0 var(--sev-disaster); }
.lc-table td.lc-date--unsupported { color: var(--sev-disaster); font-weight: 500; }
.lc-legend { flex-wrap: wrap; gap: 8px 20px; }
.lc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lc-legend b { color: var(--text); font-weight: 500; }


.lc-table-card {
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  margin-bottom: 24px;
  overflow: hidden;
  animation: card-in 0.5s var(--ease) both;
}
.lc-table-card { scroll-margin-top: 70px; }
.lc-table-card.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(73, 98, 255, 0); } 20%, 60% { box-shadow: 0 0 0 3px var(--brand); } }
.kpi-tile[data-scroll] { cursor: pointer; }
.kpi-tile[data-scroll]:hover { border-color: var(--stroke); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.kpi-tile--alert[data-scroll]:hover { border-color: var(--disaster); }
.kpi-tile--plan[data-scroll]:hover { border-color: var(--warning); }
.kpi-tile--success[data-scroll]:hover { border-color: var(--success); }
.lc-table-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; gap: 10px; }
.lc-table-title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; }
.lc-count { color: var(--text-muted); }
.lc-info { color: var(--text-muted); cursor: help; display: flex; transition: color var(--dur-fast), transform var(--dur-fast) var(--ease); }
.lc-info:hover { color: var(--brand); transform: scale(1.1); }

.lc-table-scroll { overflow-x: auto; }
.lc-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.lc-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 10px 14px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  background: var(--subtle-bg);
}
.lc-table td { padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.lc-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.lc-table tbody tr:hover { background: #f8f8f9; }
.lc-table tbody tr:last-child td { border-bottom: none; }
.lc-th-check { width: 34px; padding-left: 16px !important; padding-right: 0 !important; }
.lc-th-sort { cursor: pointer; user-select: none; }
.lc-th-sort svg { display: inline-block; vertical-align: -2px; margin-left: 3px; transition: transform var(--dur) var(--ease); }
.lc-th-sort:hover { color: var(--text); }
.lc-th-sort.sort-desc svg { transform: rotate(180deg); }
.lc-table td.lc-id { color: var(--text-muted); }
.lc-table td.lc-date--past { color: var(--danger-text); font-weight: 500; }
.lc-table td.lc-date--soon { color: var(--warning-text); font-weight: 500; }
.lc-table-foot { padding: 12px 20px; font-size: 14px; color: var(--text-muted); border-top: 1px solid var(--divider); }
.lc-table-foot:has(.lc-expand) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.lc-table tbody tr.lc-row-collapsed { display: none; }
.lc-table-card.expanded tbody tr { animation: panel-in var(--dur) var(--ease); }
.lc-expand svg { transition: transform var(--dur) var(--ease); }
.lc-table-card.expanded .lc-expand svg { transform: rotate(180deg); }

.lc-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--stroke);
  background: #fff;
  cursor: pointer;
  padding: 0;
  display: block;
  position: relative;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.lc-checkbox:hover { border-color: var(--brand); }
.lc-checkbox:active { transform: scale(0.9); }
.lc-checkbox.checked { background: var(--brand); border-color: var(--brand); }
.lc-checkbox.checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

.lc-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--divider); flex-wrap: wrap; font-size: 14px; color: var(--text-muted); }
.lc-pagination__pages { display: flex; align-items: center; gap: 4px; }
.lc-page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--divider);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.lc-page-btn:hover { background: var(--subtle-bg); }
.lc-page-btn.active { background: var(--text); border-color: var(--text); color: #fff; }
.lc-page-btn[data-lc-page="prev"] svg { transform: scaleX(-1); }
.lc-pagination__perpage { display: flex; align-items: center; gap: 8px; }
.lc-pagination__perpage select, .al-filter input, .al-filter select {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xs);
  height: 34px;
  padding: 0 10px;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.lc-pagination__perpage select { height: 30px; cursor: pointer; }
.al-filter select { cursor: pointer; }
.al-filter input:hover, .al-filter select:hover { border-color: var(--text-faint); }
.al-filter input:focus, .al-filter select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.al-filter input::placeholder { color: var(--text-faint); }

/* tabs on table pages (same look as the Figma TabGroup) */
.tabline { display: inline-flex; gap: 2px; margin-bottom: 16px; }
.tabline__item {
  height: 26px;
  padding: 0 12px 1px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tabline__item:hover { background: var(--subtle-bg); }
.tabline__item.active { background: var(--text); color: #fff; }

/* summary cards */
.al-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.al-sev-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 16px;
  animation: card-in 0.5s var(--ease) both;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur-fast);
}
.al-sev-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--stroke); }
.al-sev-card--alert { background: var(--alert-tint); border-color: var(--disaster); }
.al-sev-card--alert:hover { border-color: var(--disaster); }
.al-sev-card__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.al-sev-card__value { font-size: 26px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.1; }
.al-sev-card__value .unit { font-size: 14px; margin-left: 2px; }
.al-sev-card__label { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

.sev-disaster { background: var(--danger-tint); color: var(--disaster); }
.sev-high { background: var(--high-tint); color: var(--high-text); }
.sev-average { background: var(--warning-tint); color: var(--warning-text); }
.sev-warning { background: #fff8e0; color: #9a6b00; }
.sev-info, .sev-brand { background: var(--brand-tint); color: var(--brand); }
.sev-unclassified { background: var(--subtle-bg); color: var(--text-muted); }
.sev-low { background: var(--success-tint); color: var(--success-text); }

.al-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.al-filter { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); }

.al-sev-pill, .cs-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
}
.al-sev-pill::before, .cs-state-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.al-sev-pill.sev-disaster { background: var(--danger); color: #fff; }
.al-sev-pill.p1 { background: var(--danger); color: #fff; }
.al-sev-pill.p2 { background: var(--danger-tint); color: var(--danger-text); }
.al-sev-pill.p3 { background: var(--high-tint); color: var(--high-text); }
.al-sev-pill.p4 { background: var(--subtle-bg); color: var(--text); }

.al-table th, .al-table td { white-space: nowrap; }
.al-link { color: var(--brand); font-weight: 500; }
.al-link:hover { text-decoration: underline; }
.al-table tbody tr.al-acknowledged { opacity: 0.5; }
.al-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); }
.al-actions-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.al-actions-btn:hover { background: var(--subtle-bg); color: var(--text); }
.al-actions-cell { position: relative; overflow: visible !important; }
.al-actions-cell .dropdown { top: 34px; right: 4px; min-width: 180px; }

/* advisories */
.adv-filters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.adv-toggles { display: flex; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }
.adv-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.adv-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.adv-sync { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-muted); padding: 8px 0 16px; }
.adv-sync b { color: var(--text); }
#cvesSyncMenu { right: 0; top: 34px; }
.adv-title-cell { min-width: 260px; max-width: 380px; white-space: normal; line-height: 1.35; font-weight: 500; }
.adv-sev-pill { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 12px; font-weight: 500; color: #fff; }
.adv-sev-pill.medium { background: var(--warning); }
.adv-sev-pill.high { background: var(--high-text); }
.adv-sev-pill.critical { background: var(--disaster); }
.adv-vendor-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--brand-tint); color: var(--brand); }

/* cases */
.cs-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cs-state-pill.progress { background: var(--brand-tint); color: var(--brand); }
.cs-state-pill.awaiting { background: var(--warning-tint); color: var(--warning-text); }
.cs-state-pill.resolved { background: var(--success-tint); color: var(--success-text); }
.cs-state-pill.closed { background: var(--subtle-bg); color: var(--text-muted); }
.cs-sla-risk { color: var(--danger-text); font-weight: 500; }

/* uptime */
.ut-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ut-chart-card .card__head { padding-bottom: 4px; }
.ut-range-toggle { display: flex; gap: 2px; background: var(--subtle-bg); border-radius: var(--radius-pill); padding: 2px; }
.ut-range-btn {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ut-range-btn:hover { background: #fff; }
.ut-range-btn.active { background: var(--text); color: #fff; }
.ut-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ut-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--divider);
  background: #fff;
  border-radius: var(--radius-pill);
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), opacity var(--dur-fast), border-color var(--dur-fast);
}
.ut-legend-item span { color: var(--text-muted); }
.ut-legend-item:hover { border-color: var(--stroke); background: var(--subtle-bg); }
.ut-legend-item.off { opacity: 0.4; }
.ut-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ut-legend-dot.core, .ut-line.core { --c: var(--chart-1); }
.ut-legend-dot.security, .ut-line.security { --c: var(--chart-2); }
.ut-legend-dot.edge, .ut-line.edge { --c: var(--chart-3); }
.ut-legend-dot.wlan, .ut-line.wlan { --c: var(--chart-4); }
.ut-legend-dot.services, .ut-line.services { --c: var(--chart-5); }
.ut-legend-dot { background: var(--c); }
.ut-chart-wrap { position: relative; width: 100%; }
.ut-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ut-grid { stroke: var(--divider); stroke-width: 1; }
.ut-axis-label { font-size: 9.5px; fill: var(--text-muted); font-family: inherit; }
.ut-line { fill: none; stroke-width: 2; stroke: var(--c); transition: opacity var(--dur) var(--ease); }
.ut-pt { fill: #fff; stroke-width: 2; cursor: pointer; transition: opacity var(--dur) var(--ease), r var(--dur-fast) var(--ease); }
.ut-pt.core { stroke: var(--brand); }
.ut-pt.security { stroke: var(--danger); }
.ut-pt.edge { stroke: var(--success); }
.ut-pt.wlan { stroke: #8c6bd6; }
.ut-pt.services { stroke: var(--warning); }
.ut-pt:hover { r: 4.5; }
.ut-line.series-hidden, .ut-pt.series-hidden { opacity: 0; pointer-events: none; }
.ut-chart:not([hidden]) .ut-line { animation: ut-draw 1.1s var(--ease) both; stroke-dasharray: 4000; }
@keyframes ut-draw { from { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } }

.uptime__legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.uptime__legend span { display: flex; align-items: center; gap: 6px; }
.uptime-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 56px; align-items: center; gap: 12px; padding: 6px 4px; border-radius: var(--radius-xs); cursor: default; transition: background var(--dur-fast); }
.uptime-row:hover { background: var(--subtle-bg); }
.uptime-row__label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.uptime-row__track { position: relative; height: 16px; background: var(--track); border-radius: var(--radius-pill); }
.uptime-row__fill { position: absolute; inset: 0; width: 0; border-radius: var(--radius-pill); background: var(--success); transition: width 1s var(--ease); }
.uptime-row__fill.warn { background: var(--warning); }
.uptime-row__threshold { position: absolute; top: -3px; bottom: -3px; left: 99%; width: 2px; background: var(--text-muted); border-radius: 1px; }
.uptime-row__value { font-size: 14px; font-weight: 500; text-align: right; }
.uptime-row__value.warn { color: var(--warning-text); }

/* ===================== Responsive ===================== */
@media (max-width: 1280px) {
  .kpi-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .lc-tiles.kpi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .al-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adv-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .menu-btn { display: flex; }
  .topbar__left { gap: 8px; }
  .topbar__right { gap: 8px; padding: 0; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: auto;
    width: 240px;
    max-width: 78vw;
    padding: 62px 12px 12px;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-pop);
  }
  .sidebar.open { transform: none; }
  .sidebar-backdrop.open { display: block; opacity: 1; }
  .sidebar__item { width: 100%; flex-direction: row; gap: 12px; padding: 10px 12px; font-size: 14px; }
  .sidebar__item:hover svg { transform: translateX(2px); }
  .main { padding: 0 16px 32px; }
  .page-head { padding: 24px 0; }
  .lc-summary { flex-direction: column; align-items: stretch; }
  .lc-donut-wrap { align-self: center; }
}
@media (max-width: 880px) {
  .topbar__actions .btn span { display: none; }
  .topbar__actions .btn { width: 34px; padding: 0; }
}
@media (max-width: 760px) {
  .topbar__client { display: none; }
  .kpi-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head h1 { font-size: 32px; letter-spacing: -0.48px; }
  .cta-strip { flex-direction: column; align-items: stretch; padding: 12px; }
  .modal-upgrade { padding: 20px; }
  .tier-grid { grid-template-columns: minmax(0, 1fr); }
  .modal-upgrade__foot { flex-direction: column; align-items: stretch; }
  .modal-upgrade__actions .btn { flex: 1; }
}
@media (max-width: 640px) {
  .al-summary, .cs-summary, .ut-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-filters, .adv-filters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kpi-grid--5, .kpi-grid--3, .kpi-grid--2, .lc-tiles.kpi-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .section-card { padding: 0 16px 16px; }
  .action { padding-right: 32px; gap: 10px; }
  .action .badge { margin-right: 0; width: 82px; }
  .member__btn { font-size: 0; gap: 0; padding: 0 6px; }
  .member__actions { gap: 2px; }
  .sub-head { padding: 16px 0; }
}
@media (max-width: 520px) {
  .branding__name { display: none; }
  .chat-widget { right: 16px; bottom: 16px; }
  .chat-panel { width: calc(100vw - 32px); }
  .toast-stack { right: 16px; left: 16px; bottom: 92px; }
  .toast { max-width: none; }
  .drawer { top: 8px; right: 8px; bottom: 8px; max-width: calc(100vw - 16px); }
}
@media (max-width: 420px) {
  .chat-widget__text { display: none; }
  .chat-widget__pill { padding: 8px; border-radius: 50%; }
}

/* ===================== Motion preferences ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ===================== Multi-client additions ===================== */
/* client switcher */
button.topbar__client { border: none; background: transparent; font-family: inherit; line-height: 1.26; }
.topbar__client-wrap { display: flex; align-items: center; }
.dropdown--left { left: -8px; right: auto; transform-origin: top left; }
.client-menu { min-width: 320px; }
.client-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.client-option:hover { background: var(--subtle-bg); }
.client-option.active { background: var(--brand-tint); }
.client-option svg { color: var(--brand); flex-shrink: 0; }
.client-option__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.client-option__main b { font-size: 14px; }
.client-option__main span { font-size: 12px; color: var(--text-muted); }
.client-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px #fff; }
.client-dot--alarming { background: var(--sev-critical); }
.client-dot--mixed { background: var(--sev-high); }
.client-dot--good { background: var(--sev-low); }

/* empty states */
.row-empty, .lc-table-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--divider);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.row-empty svg, .lc-table-empty svg { color: var(--sev-low); flex-shrink: 0; }
.lc-table-empty { margin: 0 20px 20px; }

/* donut: hover a segment to read it, the rest steps back */
.lc-donut__seg { cursor: pointer; transition: stroke-dasharray var(--dur-chart) var(--ease), stroke-width var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.lc-donut-wrap:hover .lc-donut__seg { stroke-width: 12; opacity: 0.35; }
.lc-donut-wrap .lc-donut__seg:hover { opacity: 1; stroke-width: 16; }

/* summary drawer tone + misc */
.drawer__report .rp-alert--good { color: var(--success-text); }
.drawer__report .rp-alert--warn { color: var(--danger-text); }
.drawer__report .rp-alert--danger { color: var(--sev-disaster); }
.card__foot .good { color: var(--success-text); }
.adv-table td.adv-vuln { color: var(--danger-text); font-weight: 500; }
.cs-state-pill.new { background: var(--brand-tint); color: var(--brand); }

/* on small screens the topbar client switcher is hidden: offer it in the account menu instead */
.client-menu--compact { display: none; }
@media (max-width: 760px) {
  .topbar__client-wrap { display: none; }
  .client-menu--compact { display: block; }
  #userDropdown { min-width: 300px; max-width: calc(100vw - 24px); }
}

/* donut popover: explains each colour with its device count */
.lc-donut-wrap { z-index: 20; }
.lc-donut-wrap:focus-visible { border-radius: 50%; }
.lc-pop {
  display: none;
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  z-index: 30;
  pointer-events: none;
}
.lc-donut-wrap:hover .lc-pop, .lc-donut-wrap:focus-visible .lc-pop { display: block; animation: pop-in var(--dur-fast) var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translate(-4px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.lc-pop__head { padding: 8px 10px 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.lc-pop__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-xs); transition: background var(--dur-fast), opacity var(--dur-fast); }
.lc-pop__row .legend-dot { width: 10px; height: 10px; }
.lc-pop__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lc-pop__text b { font-size: 14px; font-weight: 500; }
.lc-pop__text span { font-size: 12px; color: var(--text-muted); }
.lc-pop__count { font-size: 16px; font-weight: 500; }
.lc-pop__row.is-zero { opacity: 0.45; }
.lc-donut-wrap.has-active .lc-pop__row:not(.is-active) { opacity: 0.45; }
.lc-pop__row.is-active { background: var(--subtle-bg); opacity: 1; }
@media (max-width: 900px) {
  .lc-pop { left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: min(320px, calc(100vw - 48px)); }
  @keyframes pop-in { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }
}
/* the summary card sits above the tables that follow, so the donut popover isn't covered */
.lc-summary-card { position: relative; z-index: 5; }

/* Cases card (Figma 240:3642): P1 solid red, P2 subtle red, green empty row */
.row__icon.danger-solid { background: var(--danger); color: #fff; }
.row__icon.danger { color: var(--danger-text); }
.row__icon.ok { background: #d5f5e6; color: var(--success-text); }
.pill-critical-solid { background: var(--danger); color: #fff; }
.row.row--static { cursor: default; }
.row.row--static:hover { transform: none; box-shadow: none; border-color: var(--divider); }
.row.row--static:hover .row__icon { transform: none; }

/* ===================== Lifecycle: action tags + hardware/software filter ===================== */
/* outlined + neutral on purpose: the tag says WHAT to do, the severity colours already say HOW URGENT */
.action-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: help;
}
.action-tag svg { color: var(--text-muted); }
.action-tag--upgrade svg { color: var(--brand); }
.action-tag--renew svg { color: var(--warning-text); }
.row__right .action-tag { margin-right: 8px; }

.lc-filter { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.lc-filter__label { font-size: 14px; color: var(--text-muted); }
.lc-table tbody tr.lc-row-filtered { display: none; }
.lc-table td.lc-date--na { color: var(--text-faint); }
.lc-pop__foot { margin-top: 4px; padding: 8px 10px 6px; border-top: 1px solid var(--divider); font-size: 12px; color: var(--text-muted); }
.lc-pop__foot b { color: var(--text); font-weight: 500; }
@media (max-width: 560px) {
  .row__right .action-tag { display: none; } /* too tight next to the severity pill on phones */
}

/* ===================== 5-year plan ===================== */
.view-switch { display: inline-flex; padding: 3px; gap: 2px; background: var(--subtle-bg); border-radius: var(--radius-sm); }
.view-switch__btn { height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.view-switch__btn:not(.active):hover { color: var(--text); background: rgba(255, 255, 255, 0.6); }
.view-switch__btn.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(14, 8, 15, 0.12); cursor: default; }
.pill-brand { background: var(--brand-tint); color: var(--brand); }
.plan-summary__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-tiles .kpi-tile__head { flex-grow: 0; padding-bottom: 12px; padding-right: 16px; }
.plan-tiles .kpi-tile__value { margin-top: auto; }
.invest__plan { height: auto; padding: 0 4px; margin-left: 4px; font-size: 12px; gap: 4px; }

.plan-drift { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 24px; border: 1px solid var(--sev-high); background: var(--sev-high-tint); border-radius: var(--radius); font-size: 14px; animation: card-in 0.5s var(--ease) both; }
.plan-drift > svg { color: var(--high-text); flex-shrink: 0; }
.plan-drift > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-drift b { font-weight: 500; }
.plan-drift span { color: var(--text-muted); font-size: 13px; }

.plan-chart { position: relative; }
.plan-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.plan-grid { stroke: var(--divider); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan-axis { font-size: 11px; fill: var(--text-faint); }
.plan-year { font-size: 13px; font-weight: 500; fill: var(--text); }
.plan-acc { font-size: 11px; fill: var(--text-muted); }
.plan-total { font-size: 13px; font-weight: 500; fill: var(--text); opacity: 0; transition: opacity var(--dur) var(--ease) .7s; }
.plan-hit { fill: transparent; cursor: pointer; transition: fill var(--dur-fast); }
.plan-col.is-active .plan-hit { fill: var(--subtle-bg); }
.plan-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform var(--dur-chart) var(--ease); }
.plan-seg { transition: opacity var(--dur-fast); }
.plan-range line { stroke: var(--text); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.plan-range, .plan-prev { opacity: 0; transition: opacity var(--dur) var(--ease) .8s; }
.plan-prev { stroke: var(--high-text); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.plan-chart.drawn .plan-bar { transform: scaleY(1); }
.plan-chart.drawn .plan-total, .plan-chart.drawn .plan-range, .plan-chart.drawn .plan-prev { opacity: 1; }
.plan-chart.has-active .plan-col:not(.is-active) .plan-bar { opacity: 0.45; }
.plan-chart.has-cat .plan-seg:not(.is-hl) { opacity: 0.2; }
.plan-bar { transition: transform var(--dur-chart) var(--ease), opacity var(--dur-fast); }
.plan-pop { left: 0; top: 8px; transform: translateX(14%); width: 300px; }
.plan-pop.left { transform: translateX(-114%); }
.plan-pop.show { display: block; animation: none; }
.plan-pop.has-active .lc-pop__row:not(.is-active) { opacity: 0.45; }
.plan-pop__range { font-weight: 400; }
.plan-pop .lc-pop__head { color: var(--text); font-size: 14px; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.plan-legend__item, .plan-legend__key { display: inline-flex; align-items: center; gap: 6px; }
.plan-legend__item { cursor: default; transition: color var(--dur-fast); }
.plan-legend__item:hover { color: var(--text); }
.plan-legend__key:first-of-type { margin-left: auto; }
.plan-key { display: inline-block; width: 16px; height: 0; }
.plan-key--prev { border-top: 2px dashed var(--high-text); }
.plan-key--range { width: 1px; height: 12px; background: var(--text); position: relative; }
.plan-key--range::before, .plan-key--range::after { content: ""; position: absolute; left: -4px; width: 9px; height: 1px; background: var(--text); }
.plan-key--range::before { top: 0; }
.plan-key--range::after { bottom: 0; }

.plan-table .num { text-align: right; }
.plan-table th:first-child, .plan-table tr:not(.plan-detail) > td:first-child { min-width: 200px; white-space: normal; }
.plan-table th:first-child { width: 340px; }
.plan-table tbody tr, .plan-table tfoot tr { background: #fff; }
.plan-table td.num b { display: block; font-weight: 500; }
.plan-table td.num > span:not(.plan-ind) { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.plan-table td.plan-empty { color: var(--text-faint); }
.plan-cat { cursor: pointer; }
.plan-table tbody tr.plan-cat { background: var(--subtle-bg); }
.plan-table tbody tr.plan-cat:hover { background: var(--sidebar-active); }
.plan-cat td { font-weight: 500; padding-top: 10px; padding-bottom: 10px; }
.plan-cat__name { display: inline-flex; align-items: center; gap: 8px; }
.plan-cat__name svg { color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.plan-cat[aria-expanded="false"] .plan-cat__name svg { transform: rotate(-90deg); }
.plan-line { cursor: pointer; }
.plan-line td:first-child { padding-left: 38px; }
.plan-line__item { display: block; font-weight: 500; }
.plan-line__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.plan-line[aria-expanded="true"] { background: #f8f8f9; }
.plan-line[aria-expanded="true"] td { border-bottom-color: transparent; }
.plan-detail td { padding: 0 14px 14px 38px; white-space: normal; background: #f8f8f9; font-size: 13px; color: var(--text-muted); }
.plan-table tbody tr.plan-detail:hover { background: #f8f8f9; }
.plan-detail p { margin: 0 0 6px; max-width: 760px; }
.plan-detail b { color: var(--text); font-weight: 500; }
.plan-detail .btn-sm { height: auto; padding: 0 4px; font-size: 13px; gap: 4px; }
.plan-table tfoot td { padding: 12px 14px; border-top: 1px solid var(--divider); }
.plan-foot-total td { font-weight: 500; background: var(--brand-tint) !important; }
.plan-foot-range td { font-size: 12px; color: var(--text-muted); }
.plan-table td.col-flash { animation: col-flash 1.6s var(--ease); }
@keyframes col-flash { 0%, 100% { box-shadow: none; } 15%, 60% { box-shadow: inset 0 0 0 999px rgba(73, 98, 255, 0.12); } }
.plan-note { font-size: 12px; }
.plan-changes td { white-space: normal; vertical-align: top; }
.plan-changes .num { text-align: right; white-space: nowrap; }
.plan-changes .plan-why { color: var(--text-muted); min-width: 280px; }

@media (max-width: 760px) {
  .page-head__actions:has(.view-switch) { width: 100%; }
  .plan-legend__key:first-of-type { margin-left: 0; }
  .plan-pop { width: 260px; }
  .plan-table th:first-child, .plan-table tr:not(.plan-detail) > td:first-child { width: auto; min-width: 160px; }
  .plan-line td:first-child, .plan-detail td { padding-left: 14px; }
  .plan-drift { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-bar, .plan-total, .plan-range, .plan-prev { transition: none; }
}
@media (max-width: 900px) { .plan-tiles.kpi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plan-tiles.kpi-grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* plan grid: the item column stays put when the years scroll sideways; a vertical line separates it from the year columns */
.plan-table th:first-child, .plan-table tr:not(.plan-detail) > td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--stroke); }
.plan-table thead th:first-child { background: var(--subtle-bg); z-index: 2; }
.plan-table tbody tr.plan-line > td:first-child, .plan-table tfoot tr.plan-foot-range > td:first-child { background: #fff; }
.plan-table tbody tr.plan-line:hover > td:first-child, .plan-table tbody tr.plan-line[aria-expanded="true"] > td:first-child { background: #f8f8f9; }
.plan-table tbody tr.plan-cat > td:first-child { background: var(--subtle-bg); }
.plan-table tbody tr.plan-cat:hover > td:first-child { background: var(--sidebar-active); }
.plan-table thead th:nth-child(2), .plan-table tr:not(.plan-detail) > td:nth-child(2) { padding-left: 20px; }
.plan-detail__body { position: sticky; left: 38px; max-width: min(760px, calc(100vw - 120px)); }
@media (max-width: 760px) { .plan-detail__body { left: 14px; max-width: calc(100vw - 80px); } }
.plan-grid-tools { display: flex; align-items: center; gap: 8px; }
#planExpandAll { height: auto; padding: 2px 6px; font-size: 13px; gap: 4px; }
#planExpandAll svg { transition: transform var(--dur) var(--ease); }
#planExpandAll[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ===================== Plan editor (Conscia internal) ===================== */
.internal-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--burgundy); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.2px; white-space: nowrap; }
.dropdown-item--internal .internal-tag { margin-left: auto; }
.pe-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding: 10px 14px; border-radius: var(--radius); background: #f4eef5; border: 1px dashed #b49bb8; font-size: 13px; color: var(--burgundy-600); }
.pe-banner .btn { margin-left: auto; height: auto; padding: 2px 6px; font-size: 13px; gap: 4px; }
#page-planner .page-head { padding-top: 24px; }
#pePublishBtn:disabled { opacity: 0.45; cursor: not-allowed; }
.pe-draft-tag { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--warning-tint); color: var(--warning-text); }
.pe-years-legend { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.pe-years-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pe-years-legend b { color: var(--text); font-weight: 500; }
.pe-key { display: inline-block; width: 12px; height: 10px; border-radius: 2px; }
.pe-key--draft { background: var(--chart-1); }
.pe-key--pub { height: 0; border-top: 2px dashed var(--text); border-radius: 0; }
.pe-years { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pe-year { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--radius-sm); transition: background var(--dur-fast); }
.pe-year:hover { background: var(--subtle-bg); }
.pe-year__bar { position: relative; width: 44px; height: 90px; margin-bottom: 8px; }
.pe-year__bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px 4px 0 0; background: var(--chart-1); transition: height var(--dur) var(--ease); }
.pe-year.is-peak .pe-year__bar i { background: var(--chart-5); }
.pe-year__bar b { position: absolute; left: -6px; right: -6px; height: 0; border-top: 2px dashed var(--text); }
.pe-year__label { font-size: 13px; color: var(--text-muted); }
.pe-year__value { font-size: 20px; font-weight: 500; }
.pe-year__delta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pe-year__delta .up { color: var(--warning-text); font-weight: 500; }
.pe-year__delta .down { color: var(--success-text); font-weight: 500; }
.pe-hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--subtle-bg); font-size: 13px; color: var(--text-muted); }
.pe-hint b { color: var(--text); font-weight: 500; }
.pe-hint svg { flex-shrink: 0; }

.pe-sugg__src { font-size: 12px; color: var(--text-muted); }
.pe-sugg__list { display: flex; flex-direction: column; gap: 8px; }
.pe-sugg__row { display: flex; align-items: flex-end; gap: 12px; padding: 12px; border: 1px solid var(--divider); border-radius: var(--radius-sm); flex-wrap: wrap; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.pe-sugg__row:hover { border-color: var(--stroke); box-shadow: var(--shadow-hover); }
.pe-sugg__main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-self: center; }
.pe-sugg__main b { font-weight: 500; }
.pe-sugg__main > span { font-size: 12px; color: var(--text-muted); }
.pe-sugg__actions { display: flex; align-items: center; gap: 4px; }
.pe-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); min-width: 0; }
.pe-field input, .pe-field select, .pe-field textarea, .pe-basis, .pe-note__input {
  font: inherit; font-size: 14px; color: var(--text); background: #fff; border: 1px solid var(--stroke); border-radius: var(--radius-xs);
  padding: 6px 8px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pe-field input:focus, .pe-field select:focus, .pe-field textarea:focus, .pe-basis:focus, .pe-note__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.pe-field--n input { width: 70px; }
.pe-field--p input { width: 110px; }

.pe-table td.pe-actions { white-space: nowrap; text-align: right; padding: 6px 8px; }
.pe-actions .icon-btn { display: inline-flex; width: 30px; height: 30px; color: var(--text-muted); }
.pe-actions .icon-btn:hover, .pe-actions .icon-btn.active { color: var(--brand); background: var(--brand-tint); }
.pe-basis { font-size: 12px; padding: 1px 4px; height: 22px; }
.pe-warn, .pe-ok { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.pe-warn { color: var(--high-text); }
.pe-ok { color: var(--success-text); }
.pe-cell { cursor: pointer; position: relative; transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.pe-cell:hover, .pe-cell:focus-visible { background: var(--brand-tint); outline: none; }
.pe-cell[draggable="true"] { cursor: grab; }
.pe-cell.is-editing { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-tint); }
.pe-cell.is-dragging { opacity: 0.4; }
.pe-cell.drop-ok { box-shadow: inset 0 0 0 2px dashed var(--brand); background: var(--brand-tint); outline: 2px dashed var(--brand); outline-offset: -4px; }
.pe-add { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-faint); border: 1px dashed var(--stroke); opacity: 0; transition: opacity var(--dur-fast); }
.pe-cell--empty:hover .pe-add, .pe-cell--empty:focus-visible .pe-add, tr.is-drag-row .pe-add { opacity: 1; color: var(--brand); border-color: var(--brand); }
.pe-grid-help { font-size: 12px; color: var(--text-muted); }
.pe-note__label { display: block; font-size: 12px; margin-bottom: 4px; }
.pe-note__input { width: 100%; resize: vertical; }

.pe-pop { position: fixed; z-index: 800; width: 320px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--divider); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 14px; animation: panel-in var(--dur-fast) var(--ease); }
.pe-pop__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pe-pop__head b { display: block; font-weight: 500; }
.pe-pop__head span { font-size: 12px; color: var(--text-muted); }
.pe-pop__fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); align-items: end; gap: 8px; }
.pe-pop__fields input { width: 100%; }
.pe-pop__x { padding-bottom: 8px; color: var(--text-muted); }
.pe-pop__amount { margin: 10px 0 12px; font-size: 13px; color: var(--text-muted); }
.pe-pop__amount b { color: var(--text); font-weight: 500; font-size: 16px; margin-left: 4px; }
.pe-pop__refs { border-top: 1px solid var(--divider); padding-top: 10px; margin-bottom: 12px; }
.pe-pop__label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; }
.pe-ref { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.pe-ref span { flex: 1; color: var(--text-muted); }
.pe-ref b { font-weight: 500; }
.pe-ref .btn { height: auto; padding: 1px 6px; font-size: 12px; }
.pe-pop__move { margin-bottom: 12px; }
.pe-pop__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pe-pop__clear { color: var(--danger-text); }
.pe-pop__clear:hover { background: var(--danger-tint); }

.pe-modal { width: 860px; padding: 24px; }
.pe-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pe-modal__head h3 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.3px; }
.pe-modal__sub { margin: 8px 0 18px; font-size: 14px; color: var(--text-muted); line-height: 1.45; }
.pe-modal__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pe-publish td { vertical-align: top; }
.pe-publish .num { text-align: right; }
.pe-publish tr.is-changed td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.pe-publish textarea { width: 100%; min-width: 260px; font: inherit; font-size: 13px; border: 1px solid var(--stroke); border-radius: var(--radius-xs); padding: 6px 8px; resize: vertical; white-space: normal; }
.pe-publish textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.pe-check { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; }
.pe-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pe-form .pe-field--wide { grid-column: 1 / -1; }
.pe-form textarea { resize: vertical; }
.pe-form .pe-modal__foot { margin-top: 6px; }
.pe-modal:has(.pe-form) { width: 600px; }

@media (max-width: 760px) {
  .pe-years { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .pe-year__bar { width: 28px; height: 70px; }
  .pe-year__value { font-size: 15px; }
  .pe-year__delta { white-space: normal; text-align: center; }
  .pe-banner .btn { margin-left: 0; }
  .pe-grid-help { display: none; }
  .pe-form { grid-template-columns: minmax(0, 1fr); }
  .pe-sugg__actions { width: 100%; }
}

/* ===================== Lifecycle: time-based buckets + 5-year plan tile ===================== */
/* "Later · in the 5-year plan" is scheduled, not a severity: brand tint instead of the severity scale */
.lc-donut__seg.planned { stroke: var(--chart-2); }
.legend-dot.planned { background: var(--chart-2); }
.pill-planned { background: var(--brand-tint); color: var(--brand); }
.lc-plan-link { height: auto; padding: 1px 6px; margin-left: 8px; font-size: 13px; gap: 4px; font-weight: 500; }
.mini-bars { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 34px; padding: 0 12px 12px; margin-top: -4px; }
.mini-bars__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; width: 18px; height: 100%; }
.mini-bars__col i { display: block; width: 12px; border-radius: 2px 2px 0 0; background: var(--chart-2); transition: background var(--dur-fast); }
.mini-bars__col.is-now i { background: var(--chart-1); }
.mini-bars__col em { font-style: normal; font-size: 9px; line-height: 1; color: var(--text-faint); }
.kpi-tile:hover .mini-bars__col i { background: var(--chart-1); }
.kpi-tile:hover .mini-bars__col:not(.is-now) i { opacity: 0.55; }
.kpi-tile--plan .kpi-tile__label b { color: var(--warning-text); }
.budget-ok, .budget-miss { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; }
.budget-ok { color: var(--success-text); }
.budget-miss { color: var(--high-text); }
.lc-tiles .mini-bars { margin-top: -18px; padding-bottom: 14px; }
/* keep numbers and labels on one line across a row that contains the plan tile */
@media (min-width: 561px) {
  .kpi-grid:has(.mini-bars) .kpi-tile:not(:has(.mini-bars)) .kpi-tile__label { padding-bottom: 44px; }
  .lc-tiles.kpi-grid:has(.mini-bars) .kpi-tile:not(:has(.mini-bars)) .kpi-tile__label { padding-bottom: 26px; }
}
/* request a quote from the 5-year plan (replaces the Est. investment tile) */
.plan-quote { height: auto; padding: 1px 6px; font-size: 12px; gap: 3px; }
.plan-quote:disabled, .plan-quote-all:disabled { color: var(--success-text); background: transparent; cursor: default; opacity: 1; }
.plan-quote-all:disabled { background: var(--success-tint); }
/* indicative amounts (list price or estimate) carry a tilde and are slightly muted */
.plan-ind { color: #4a4650; }
.plan-table b .plan-ind, .plan-table td.num > .plan-ind { font-weight: inherit; }
.plan-note .plan-ind { font-weight: 600; color: var(--text); }
.plan-detail__facts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.plan-detail__facts .plan-quote { font-size: 13px; }

/* ===================== 5-year plan: budget check icon + item side panel ===================== */
.plan-line__item { display: inline-flex; align-items: center; gap: 6px; }
.plan-check { display: inline-flex; flex-shrink: 0; cursor: help; }
.plan-check--ok { color: var(--success); }
.plan-check--tight { color: var(--warning); }
.plan-check--late { color: var(--sev-critical); }
.plan-table tbody tr.plan-line.is-selected, .plan-table tbody tr.plan-line.is-selected > td:first-child { background: var(--brand-tint); }
.plan-table tbody tr.plan-line.is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--brand), inset -1px 0 0 var(--stroke); }

.plan-panel { position: fixed; top: 50px; right: 0; bottom: 0; width: 420px; max-width: 100vw; z-index: 700; background: #fff; border-left: 1px solid var(--stroke);
  box-shadow: -12px 0 32px rgba(14, 8, 15, 0.08); transform: translateX(100%); transition: transform 0.35s var(--ease); display: flex; flex-direction: column; }
.plan-panel.open { transform: none; }
.plan-panel__inner { display: flex; flex-direction: column; min-height: 0; flex: 1; }
@media (min-width: 1100px) { body.pp-open .main { padding-right: 444px; transition: padding-right 0.35s var(--ease); } }
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--divider); }
.pp-head__main { min-width: 0; }
.pp-eyebrow { font-size: 12px; font-weight: 500; color: var(--brand); margin-bottom: 4px; }
.pp-head h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.25; }
.pp-meta { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.pp-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pp-nav .icon-btn { width: 30px; height: 30px; color: var(--text-muted); }
.pp-nav .icon-btn:hover { color: var(--text); background: var(--subtle-bg); }
.pp-nav [data-pp="prev"] svg { transform: rotate(180deg); }
.pp-body { flex: 1; overflow-y: auto; padding: 4px 20px 24px; }
.pp-body section { padding: 16px 0; border-bottom: 1px solid var(--divider); }
.pp-body section:last-child { border-bottom: 0; }
.pp-body h4 { margin: 0 0 10px; font-size: 14px; font-weight: 500; display: flex; align-items: baseline; gap: 8px; }
.pp-body h4 span { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.pp-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.pp-muted, .pp-body p.pp-muted { color: var(--text-muted); font-size: 13px; }
.pp-date { display: grid; grid-template-columns: 120px auto 1fr; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 14px; }
.pp-date span { color: var(--text-muted); }
.pp-date b { font-weight: 500; }
.pp-date b.lc-date--past { color: var(--danger-text); }
.pp-date b.lc-date--unsupported { color: var(--sev-disaster); }
.pp-date b.lc-date--soon { color: var(--warning-text); }
.pp-date em { font-style: normal; font-size: 12px; color: var(--text-muted); text-align: right; }
.pp-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; }
.pp-check svg { flex-shrink: 0; margin-top: 1px; }
.pp-check--ok { background: var(--success-tint); color: var(--success-text); }
.pp-check--tight { background: var(--warning-tint); color: var(--warning-text); }
.pp-check--late { background: var(--danger-tint); color: var(--danger-text); }
.pp-cost { display: grid; grid-template-columns: 60px 1fr auto; gap: 8px; padding: 5px 0; font-size: 14px; }
.pp-cost span:nth-child(2) { color: var(--text-muted); }
.pp-cost b { font-weight: 500; text-align: right; }
.pp-cost--total { border-top: 1px solid var(--divider); margin-top: 4px; padding-top: 8px; }
.pp-basis { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px !important; font-size: 13px !important; color: var(--text-muted) !important; }
.pp-devices { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.pp-devices li { display: flex; flex-direction: column; font-size: 13px; }
.pp-devices li b { font-weight: 500; }
.pp-devices li span { color: var(--text-muted); font-size: 12px; }
.pp-body .btn-sm { height: auto; padding: 2px 6px; font-size: 13px; gap: 4px; }
@media (max-width: 760px) {
  .plan-panel { width: 100vw; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .plan-panel { transition: none; } }
/* urgent devices: small budget tag, details on hover */
.budget-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.4; background: var(--brand-tint); color: var(--brand); cursor: help; vertical-align: 1px; }
.budget-tag--miss { background: var(--warning-tint); color: var(--warning-text); }
/* device count under each year in the plan table header */
.plan-table thead th .plan-th-devices { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--text-muted); cursor: help; white-space: nowrap; }

/* ===================== Tables: Conscia UI 2 design system (Figma pnMrx8mfVme8f3ckRK42Vf, node 61:45382) =====================
   head: white, 52px, Saans Medium 14px default text, darker rule above and below (#7f7c87)
   rows: white, 44px, 14px regular default text, divider #e4e4e5 · badges 26px high, 10px side padding */
:root { --table-head-rule: #7f7c87; }
.lc-table th, .plan-table thead th:first-child {
  height: 52px; padding: 8px 8px; font-size: 14px; font-weight: 500; color: var(--text); background: #fff;
  border-top: 1px solid var(--table-head-rule); border-bottom: 1px solid var(--table-head-rule); vertical-align: middle;
}
.lc-table td { height: 44px; padding: 8px 8px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.lc-table th:first-child, .lc-table td:first-child { padding-left: 20px; }
.lc-table th:last-child, .lc-table td:last-child { padding-right: 20px; }
.lc-table td.lc-id { color: var(--text); }
.lc-table .pill, .lc-table .action-tag { min-height: 26px; padding-top: 0; padding-bottom: 0; padding-left: 10px; padding-right: 10px; }
.lc-table .lc-th-sort svg { color: var(--text-muted); }
.plan-table thead th .plan-th-devices { font-weight: 400; }
.plan-table thead th:first-child { box-shadow: inset -1px 0 0 var(--stroke); }
.plan-table tbody tr.plan-cat td { height: 44px; }
.lc-table-head + .lc-table-scroll, .lc-table-head + div > .lc-table-scroll { margin-top: 0; }
.lc-table .action-tag { height: 26px; }

/* amounts look the same whether quoted or indicative; only the "~" tells them apart */
.plan-ind { color: inherit; font-size: inherit; }
/* keyboard focus on plan rows: tint the row (a ring on <tr> renders as a stray line under the head) */
.plan-table tr:focus-visible { box-shadow: none; }
.plan-table tr:focus-visible > td { background: var(--brand-tint); }
/* filtered plan table: say so next to the title, and show the all-costs totals under the filtered ones */
.plan-filter-note { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--warning-tint); color: var(--warning-text); font-size: 12px; font-weight: 500; }
.plan-filter-note .btn { height: auto; padding: 1px 6px; font-size: 12px; }
.plan-foot-all td { font-weight: 500; color: var(--text-muted); }
/* lifecycle date colours (see dateClass): End of Support < 3 months = red like Act now; End of Sale is information only */
.lc-table td.lc-date--act, .pp-date b.lc-date--act { color: var(--danger-text); font-weight: 500; }
.lc-table td.lc-date--info, .pp-date b.lc-date--info { color: var(--text-muted); font-weight: 400; }
/* numbers right-aligned in every table (IDs, counts, versions, durations, amounts) */
.lc-table th.num, .lc-table td.num, .lc-table td.lc-id { text-align: right; }
.lc-table th.lc-th-sort.num { padding-right: 24px; }
.lc-table td.lc-id { padding-right: 24px; }
/* locked Alarms: upsell copy */
.locked-overlay { gap: 12px; }
.locked-overlay__title { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; max-width: 320px; }
.locked-overlay p, .lock-wrap--page .locked-overlay p { max-width: 340px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.locked-overlay p b { color: var(--text); font-weight: 500; }
.locked-teaser { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--danger-tint); color: var(--danger-text); font-size: 13px; font-weight: 500; }
.locked-teaser i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: teaser-pulse 1.8s ease-in-out infinite; }
@keyframes teaser-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.locked-overlay__actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 4px; }
.locked-overlay__actions .btn-link { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .locked-teaser i { animation: none; } }
.locked-teaser { background: var(--warning-tint); color: var(--warning-text); }
.locked-teaser svg { flex-shrink: 0; }

/* ===================== Your Conscia Team: whole row opens the contact drawer ===================== */
.member[data-contact] { cursor: pointer; }
.member__view { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 14px; font-weight: 500; color: var(--brand); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-fast), transform var(--dur) var(--ease); }
.member:hover .member__view, .member:focus-visible .member__view { opacity: 1; transform: none; }
@media (hover: none) { .member__view { opacity: 1; transform: none; } }
.drawer--contact { width: 420px; }
.contact-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.contact-head .member__photo { width: 56px; height: 56px; font-size: 14px; }
.contact-head .drawer__eyebrow { margin-bottom: 4px; }
.contact-head__name { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.2; }
.contact-list { margin: 4px 0 0; }
.contact-list > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.contact-list dt { color: var(--text-muted); }
.contact-list dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; word-break: break-word; }
.contact-list a { color: var(--brand); text-decoration: none; font-weight: 500; }
.contact-list a:hover { text-decoration: underline; }
.contact-copy { border: 1px solid var(--divider); background: #fff; border-radius: var(--radius-xs); padding: 1px 8px; font: inherit; font-size: 12px; color: var(--text-muted); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.contact-copy:hover { background: var(--subtle-bg); color: var(--text); }
.contact-about { margin: 16px 0 0; color: var(--text-muted); }
.contact-actions { display: flex; gap: 8px; }
.contact-actions .btn { flex: 1; justify-content: center; }
/* devices without End-of-Life data: grey, not part of the risk scale */
.lc-donut__seg.unknown { stroke: var(--stroke); }
.legend-dot.unknown { background: var(--stroke); }

/* ===================== Advisory detail ===================== */
.adv-head { padding: 28px 0 20px; }
.adv-back { height: auto; padding: 2px 6px 2px 0; margin-bottom: 10px; font-size: 14px; gap: 2px; }
.adv-back svg { transform: rotate(180deg); }
.adv-head h1 { margin: 0 0 12px; font-size: 30px; font-weight: 500; line-height: 1.2; letter-spacing: -0.4px; max-width: 1000px; }
.adv-head__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adv-head__cve { font-size: 14px; color: var(--text-muted); margin-left: 4px; }
.adv-tabs { margin-bottom: 20px; }
.adv-tabs .tabgroup__tab { height: 32px; padding: 0 14px; font-size: 14px; }
.adv-tabs .tabgroup__ind { height: 32px; }
.adv-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.adv-about__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.adv-card { margin-bottom: 0; }
.adv-dl { margin: 0; }
.adv-dl__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }
.adv-dl__row:first-child { border-top: 1px solid var(--divider); }
.adv-dl dt { color: var(--text-muted); }
.adv-dl dd { margin: 0; word-break: break-word; }
.adv-downloads { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.adv-downloads .btn { height: auto; padding: 2px 4px; gap: 6px; }
.adv-text { font-size: 14px; line-height: 1.6; }
.adv-text p { margin: 0 0 12px; }
.adv-text p:last-child { margin-bottom: 0; }
.adv-text a { word-break: break-all; }
.adv-text ul { margin: 0; padding-left: 20px; }
.adv-text li { margin: 4px 0; }
.adv-dev-filters { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.adv-dev-search { width: 320px; max-width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); font: inherit; font-size: 14px; }
.adv-dev-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.adv-ticket-foot { display: flex; justify-content: flex-end; }
a.adv-open { color: inherit; text-decoration: none; }
a.adv-open:hover { color: var(--brand); text-decoration: underline; }
#cvesTableBody tr { cursor: default; }
@media (max-width: 900px) { .adv-about { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .adv-head h1 { font-size: 24px; } .adv-tabs .tabgroup__tab { padding: 0 10px; font-size: 13px; } }

/* ===================== Devices (main navigation) — same pattern as the SDP portal device list ===================== */
.dev-search { max-width: 580px; }
.dev-field { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: #fff; color: var(--text-muted); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.dev-field:hover { border-color: #7f7c87; }
.dev-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.dev-field input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 16px; color: var(--text); background: transparent; }
.dev-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 16px; padding-top: 24px; }
.dev-filter { display: flex; flex-direction: column; gap: 12px; font-size: 14px; font-weight: 500; }
.dev-filter select { height: 44px; padding: 0 12px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: 16px; font-weight: 400; color: var(--text); }
.dev-filter select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.dev-filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; flex-wrap: wrap; }
.dev-clear { color: var(--danger-text); gap: 6px; height: auto; padding: 4px 8px; font-size: 14px; }
.dev-clear:hover { background: var(--danger-tint); }
.dev-tiles { margin-top: 24px; }
.dev-tile { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.dev-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.dev-tile[aria-pressed="true"] .kpi-tile__link svg { transform: rotate(180deg); }
.dev-section-title { display: flex; align-items: center; gap: 12px; padding: 40px 0 22px; flex-wrap: wrap; }
.dev-section-title h2 { margin: 0; font-size: 22px; font-weight: 500; }
.dev-tools { margin-left: auto; display: flex; gap: 24px; }
.dev-tools .btn, .dev-section-title > .btn { height: auto; padding: 4px 6px; gap: 6px; font-size: 14px; }
.dev-table td { white-space: nowrap; }
.dev-th-prio { width: 72px; }
.dev-prio .prio-wrap { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; cursor: help; transition: background var(--dur-fast); }
.dev-prio .prio-wrap:hover { background: var(--subtle-bg); }
.prio-crit { color: var(--sev-critical); }
.prio-warn { color: var(--high-text); }
.prio-unknown { color: #7f7c87; }
.prio-ok { color: var(--success-text); }
.dev-cell { display: flex; flex-direction: column; gap: 2px; }
.dev-link { color: var(--brand); font-weight: 500; text-decoration: none; }
.dev-link:hover { text-decoration: underline; }
.dev-cell span { font-size: 12px; color: var(--text-muted); }
.none-dash { color: var(--text-faint); }
.dev-empty { text-align: center; color: var(--text-muted); padding: 32px 0 !important; }
.badge { display: inline-flex; align-items: center; height: 26px; padding: 1px 10px 0; border-radius: 100px; font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.badge-critical { background: #e52e3b; color: #fff; }
.badge-danger { background: #ffebec; color: #d42431; }
.badge-warning2 { background: #ffebcc; color: #e14709; }
.badge-warning1 { background: #fef6cd; color: #ed751f; }
.badge-success { background: #e6faf1; color: #0b7d4f; }
.badge-neutral { background: #f3f4f5; color: #0e080f; }
.badge-planned { background: var(--brand-tint); color: var(--brand); }
.badge[data-tip] { cursor: help; }
.dev-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--divider); flex-wrap: wrap; }
.dev-pager__nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dev-page { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-xs); background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-muted); cursor: pointer; }
.dev-page:hover { background: var(--subtle-bg); color: var(--text); }
.dev-page.is-current { border: 2px solid var(--text); color: var(--text); }
.dev-page-gap { color: var(--text-faint); padding: 0 2px; }
.dev-pager__nav .btn:disabled { background: var(--divider); color: #7f7c87; cursor: not-allowed; }
.dev-pager__count { margin-left: auto; font-size: 14px; color: var(--text-muted); }
.dev-pager__per { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.dev-pager__per select { height: 34px; padding: 0 8px; border: 1px solid var(--stroke); border-radius: var(--radius-xs); font: inherit; background: #fff; }
@media (max-width: 1100px) { .dev-tiles.kpi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dev-filters { grid-template-columns: minmax(0, 1fr); } .dev-tools { margin-left: 0; } .dev-pager__count { margin-left: 0; } }
@media (max-width: 560px) { .dev-tiles.kpi-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ===================== Device detail ===================== */
.dd-prio { display: inline-flex; }
.dd-prio-label { font-size: 14px; font-weight: 500; margin-right: 8px; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--sev-critical); color: #fff; font-size: 11px; font-weight: 500; }
.dd-sync { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }
.dd-sync__item { display: inline-flex; align-items: center; gap: 6px; }
.dd-sync__item.is-ok { color: var(--success-text); }
.dd-sync__item.is-late { color: var(--danger-text); font-weight: 500; }
.dd-sync__item.is-off { color: var(--text-muted); }
.dd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.dd-grid .adv-dl__row:nth-child(2) { border-top: 1px solid var(--divider); }
.dd-na { color: var(--text-faint); }
.dd-sub { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 14px; }
.dd-sub b { font-size: 18px; font-weight: 500; }
.dd-sub > span:not(.badge):not(.budget-tag) { color: var(--text-muted); }
.dd-sub .budget-tag { margin-left: 0; }
.dd-eox { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; }
.dd-eox span { color: var(--text-muted); min-width: 96px; }
.dd-eox b { font-weight: 500; }
.dd-eox b.lc-date--unsupported { color: var(--sev-disaster); }
.dd-eox b.lc-date--act { color: var(--danger-text); }
.dd-eox b.lc-date--soon { color: var(--warning-text); }
.dd-eox b.lc-date--info { color: var(--text-muted); font-weight: 400; }
.dd-life td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 760px) { .dd-grid { grid-template-columns: minmax(0, 1fr); } .dd-grid .adv-dl__row:nth-child(2) { border-top: 0; } }

/* ===================== Badges — Conscia UI 2 design system (Figma pnMrx8mfVme8f3ckRK42Vf, node 37:24160) =====================
   Two sizes: medium 26px / 10px side padding, small 20px / 7px; Saans Medium 12px, line-height 1.3, fully rounded, no dots.
   Light-mode variants (background / text):
   Critical #e52e3b / white · Danger #ffebec / #d42431 · Big warning #ffebcc / #e14709 · Mild warning #fef6cd / #ed751f
   No issues #e6faf1 / #0b7d4f · Neutral #f3f4f5 / #0e080f · Info #e5e9ff / #4962ff · White white / #0e080f · Black #0e080f / white */
:root {
  --bdg-critical-bg: #e52e3b; --bdg-critical-fg: #fff;
  --bdg-danger-bg: #ffebec; --bdg-danger-fg: #d42431;
  --bdg-bigwarn-bg: #ffebcc; --bdg-bigwarn-fg: #e14709;
  --bdg-mildwarn-bg: #fef6cd; --bdg-mildwarn-fg: #ed751f;
  --bdg-ok-bg: #e6faf1; --bdg-ok-fg: #0b7d4f;
  --bdg-neutral-bg: #f3f4f5; --bdg-neutral-fg: #0e080f;
  --bdg-info-bg: #e5e9ff; --bdg-info-fg: #4962ff;
}
.badge, .pill, .al-sev-pill, .cs-state-pill, .adv-sev-pill, .adv-vendor-pill, .budget-tag, .badge--first, .badge--important, .badge--plan, .badge--neutral {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 20px; padding: 1px 7px 0; border: 0; border-radius: 100px;
  font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; margin-left: 0;
}
.badge, .lc-table .pill, .lc-table .al-sev-pill, .lc-table .cs-state-pill, .lc-table .adv-sev-pill, .lc-table .adv-vendor-pill { height: 26px; padding: 1px 10px 0; gap: 4px; min-height: 0; }
.al-sev-pill::before, .cs-state-pill::before { display: none; }
/* Critical */
.badge-critical, .badge-disaster, .pill-disaster, .pill-critical-solid, .al-sev-pill.sev-disaster, .al-sev-pill.p1, .adv-sev-pill.critical, .badge--first { background: var(--bdg-critical-bg); color: var(--bdg-critical-fg); }
/* Danger */
.badge-danger, .pill-critical, .al-sev-pill.p2, .budget-tag--miss.budget-tag--miss, .badge--important { background: var(--bdg-danger-bg); color: var(--bdg-danger-fg); }
/* Big warning */
.badge-warning2, .pill-high, .pill-orange, .al-sev-pill.sev-high, .al-sev-pill.p3, .adv-sev-pill.high, .cs-state-pill.awaiting, .badge--plan { background: var(--bdg-bigwarn-bg); color: var(--bdg-bigwarn-fg); }
/* Mild warning */
.badge-warning1, .pill-medium, .al-sev-pill.sev-average, .al-sev-pill.sev-warning, .adv-sev-pill.medium { background: var(--bdg-mildwarn-bg); color: var(--bdg-mildwarn-fg); }
/* No issues */
.badge-success, .pill-low, .pill-success, .cs-state-pill.resolved { background: var(--bdg-ok-bg); color: var(--bdg-ok-fg); }
/* Neutral */
.badge-neutral, .pill-neutral, .al-sev-pill.p4, .al-sev-pill.sev-unclassified, .cs-state-pill.closed, .badge--neutral { background: var(--bdg-neutral-bg); color: var(--bdg-neutral-fg); }
/* Info */
.badge-planned, .pill-planned, .pill-brand, .budget-tag, .adv-vendor-pill, .al-sev-pill.sev-info, .cs-state-pill.progress, .cs-state-pill.new { background: var(--bdg-info-bg); color: var(--bdg-info-fg); }
/* the "not budgeted" tag stays a warning */
.budget-tag.budget-tag--miss { background: var(--bdg-bigwarn-bg); color: var(--bdg-bigwarn-fg); }
.budget-tag { margin-left: 6px; }
/* action tags (Replace / Upgrade / Renew) = White badge with icon */
.action-tag { height: 20px; padding: 1px 7px 0; gap: 3px; border: 0; background: #fff; color: var(--text); font-size: 12px; font-weight: 500; line-height: 1.3; }
.lc-table .action-tag { height: 26px; padding: 1px 10px 0; gap: 4px; }

/* ===================== Device lifecycle: timeline + facts ===================== */
.dd-lc .card__head { align-items: center; }
.dd-lc__tags { display: flex; gap: 6px; }
.dd-tl { position: relative; height: 112px; margin: 26px 8px 8px; }
.dd-tl__line { position: absolute; left: 0; right: 0; top: 40px; height: 2px; background: var(--divider); border-radius: 2px; }
.dd-tl__span { position: absolute; top: 39px; height: 4px; border-radius: 4px; background: var(--sev-medium); }
.dd-tl__span.is-past { background: var(--sev-critical); opacity: 0.35; }
.dd-tl__pt { position: absolute; top: 34px; transform: translateX(-50%); }
.dd-tl__pt i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--text-muted); }
.dd-tl__pt.lc-date--unsupported i { border-color: var(--sev-disaster); background: var(--sev-disaster); }
.dd-tl__pt.lc-date--act i { border-color: var(--sev-critical); }
.dd-tl__pt.lc-date--soon i { border-color: var(--warning); }
.dd-tl__pt.lc-date--info i { border-color: var(--stroke); }
.dd-tl__lbl { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; font-size: 12px; }
.dd-tl__lbl.is-up { top: auto; bottom: 22px; }
.dd-tl__lbl b { font-weight: 500; color: var(--text); }
.dd-tl__lbl span { color: var(--text-muted); }
.dd-tl__pt.lc-date--unsupported .dd-tl__lbl span { color: var(--sev-disaster); font-weight: 500; }
.dd-tl__pt.lc-date--act .dd-tl__lbl span { color: var(--danger-text); font-weight: 500; }
.dd-tl__pt.lc-date--soon .dd-tl__lbl span { color: var(--warning-text); font-weight: 500; }
.dd-tl__today { position: absolute; top: 14px; height: 54px; width: 0; border-left: 2px dashed var(--brand); }
.dd-tl__today span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 100px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; }
.dd-facts { margin: 8px 0 0; border-top: 1px solid var(--divider); }
.dd-fact { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }
.dd-fact dt { color: var(--text-muted); }
.dd-fact dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dd-fact .budget-tag { margin-left: 0; }
.dd-muted { color: var(--text-muted); }
.dd-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.dd-check.plan-check--ok { color: var(--success-text); }
.dd-check.plan-check--tight { color: var(--warning-text); }
.dd-check.plan-check--late { color: var(--danger-text); }
.dd-lc__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.dd-lc__actions .btn { gap: 4px; }
.dd-lc__empty, .dd-lc__ok { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 8px; font-size: 14px; line-height: 1.5; }
.dd-lc__empty svg { color: #7f7c87; flex-shrink: 0; margin-top: 1px; }
.dd-lc__ok svg { color: var(--success-text); flex-shrink: 0; margin-top: 1px; }
.dd-lc__empty b { font-weight: 500; }
@media (max-width: 560px) {
  .dd-tl { height: 150px; }
  .dd-tl__lbl { font-size: 11px; white-space: normal; width: 80px; text-align: center; }
  .dd-fact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* keep timeline labels and the status tag inside the card on narrow screens */
.dd-tl__lbl.is-end { left: auto; right: -6px; transform: none; align-items: flex-end; text-align: right; }
.dd-tl__lbl.is-start { left: -6px; transform: none; align-items: flex-start; text-align: left; }
.dd-lc .card__head { flex-wrap: wrap; row-gap: 0; }
@media (max-width: 560px) {
  .dd-lc__tags { width: 100%; margin: -12px 0 12px; }
  .dd-tl__lbl.is-end, .dd-tl__lbl.is-start { width: 110px; }
}
.dd-lc__tags .badge, .dd-fact .badge, .dd-fact .budget-tag { flex-shrink: 0; }