/* ============================================================
   CONNEXA v2 — Design System skin
   Loads AFTER connexa.css and style.css. Replaces the sidebar shell
   with the two-tier command bar. Tokens live in connexa.css.
   Visual layer only: no selector here changes behaviour.
   ============================================================ */



body { background: var(--body-bg); letter-spacing: -.006em; }

/* Numerals: tabular everywhere they carry meaning */
.kpi-value, .data-table td, .pagination-info, .v2-hero-value, .v2-metric-value {
  font-variant-numeric: tabular-nums;
}

/* ── 2. Shell — sidebar out, command bar in ────────────────── */
.sidebar, .sidebar-overlay { display: none !important; }
.app-shell .topbar { display: none !important; }
/* The sidebar margin from style.css has to go, but `margin-left: 0` and
   `margin-inline: auto` cannot both be declared here — the !important one
   wins and the block sticks to the left edge while the command bar stays
   centred. Set the inline margins once, and share the rail with the bar. */
.app-shell .main-content,
.app-shell.collapsed .main-content {
  width: 100%;
  max-width: var(--v2-shell-max);
  margin-top: var(--cmdbar-h);
  margin-inline: auto !important;
  padding: 26px var(--v2-shell-pad) 72px;
}
/* Tighter gutters once the rail is wider than the screen — style.css's
   own mobile padding is out-specified by the rule above. */
@media (max-width: 900px) {
  .app-shell .main-content,
  .app-shell.collapsed .main-content { padding: 18px 16px 64px; }
}

#scrollTopBtn,
.app-shell.collapsed #scrollTopBtn { left: 24px; }

.v2-cmdbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-cmdbar);
  background: var(--gray-900);
  color: #fff;
}
:root[data-theme="dark"] .v2-cmdbar { background: #0c1120; border-bottom: 1px solid var(--border-color); }

.v2-cmdbar-row1 {
  height: var(--cmdbar-h1);
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--v2-shell-pad);
  max-width: var(--v2-shell-max); margin: 0 auto;
}
.v2-brand {
  display: flex; align-items: center; gap: 11px;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.v2-brand:hover { color: #fff; }
/* The wordmark is the artwork itself — the white-ink variant, since the
   bar is always dark in both themes. */
.v2-brand-logo { height: 21px; width: auto; display: block; }
.v2-brand-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
  line-height: 1; padding-left: 11px;
  border-left: 1px solid rgba(255,255,255,.16);
}
@media (max-width: 1100px) {
  .v2-brand-sub { display: none; }
  .v2-brand-logo { height: 19px; }
}

/* Global search — the prominent element of row 1 */
.v2-cmdbar .topbar-search {
  flex: 1 1 auto; max-width: 620px; margin: 0;
  position: relative; display: flex; align-items: center;
}
.v2-cmdbar .topbar-search input {
  width: 100%; height: 38px;
  padding: 0 82px 0 38px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: #fff; font-size: 13px; font-family: inherit;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.v2-cmdbar .topbar-search input::placeholder { color: rgba(255,255,255,.42); }
.v2-cmdbar .topbar-search input:focus {
  outline: none;
  background: rgba(255,255,255,.12);
  border-color: rgba(129,140,248,.85);
  box-shadow: 0 0 0 3px rgba(79,70,229,.28);
}
.v2-cmdbar .topbar-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.5); font-size: 12.5px; pointer-events: none;
}
.v2-search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 4px; pointer-events: none;
}
.v2-search-kbd span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px; padding: 2px 5px; line-height: 1;
}

.v2-cmdbar .topbar-actions {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto; flex-shrink: 0;
}
.v2-cmdbar .topbar-action-btn {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  color: rgba(255,255,255,.72);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; cursor: pointer; position: relative;
  transition: background .16s, color .16s, transform .16s;
}
.v2-cmdbar .topbar-action-btn:hover {
  background: rgba(255,255,255,.14); color: #fff; transform: translateY(-1px);
}
.v2-cmdbar .topbar-notif-dot {
  position: absolute; top: 7px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--v2-coral); box-shadow: 0 0 0 2px var(--gray-900);
}
.v2-cmdbar .topbar-role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: 8px;
  background: rgba(129,140,248,.16);
  border: 1px solid rgba(129,140,248,.3);
  color: #c7d2fe; font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}

.v2-user {
  display: flex; align-items: center; gap: 9px;
  padding-left: 12px; margin-left: 6px;
  border-left: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.v2-avatar {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(140deg,#4f46e5,#7c3aed);
  color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.v2-user-meta { line-height: 1.15; }
.v2-user-name { font-size: 12.5px; font-weight: 650; color: #fff; }
.v2-user-role { font-size: 10.5px; color: rgba(255,255,255,.45); }
.v2-logout {
  background: none; border: 0; cursor: pointer; padding: 6px;
  color: rgba(255,255,255,.45); font-size: 13px;
  transition: color .16s;
}
.v2-logout:hover { color: var(--v2-coral); }

/* ── 3. Module tabs + mega-menu ────────────────────────────── */
.v2-cmdbar-row2 {
  height: var(--cmdbar-h2);
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
}
.v2-tabs {
  height: 100%; max-width: var(--v2-shell-max); margin: 0 auto;
  padding: 0 var(--v2-shell-pad);
  display: flex; align-items: stretch; gap: 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.v2-tabs::-webkit-scrollbar { display: none; }
.v2-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.62); text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  position: relative;
  transition: color .16s, background .16s;
}
.v2-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.v2-tab i.v2-tab-icon { font-size: 12.5px; opacity: .85; }
.v2-tab i.v2-tab-caret { font-size: 8.5px; opacity: .5; transition: transform .18s var(--v2-ease); }
.v2-tab[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.08); }
.v2-tab[aria-expanded="true"] i.v2-tab-caret { transform: rotate(180deg); }
.v2-tab.is-active { color: #fff; }
.v2-tab.is-active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2.5px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg,#818cf8,#22d3ee);
}
.v2-tab-home { padding: 0 12px; margin-right: 6px; }

.v2-drop {
  position: fixed; top: var(--cmdbar-h); left: 0; z-index: var(--z-drop);
  width: max-content; min-width: 232px; max-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  padding: 7px;
  display: none;
  animation: v2MegaIn .16s var(--v2-ease);
}
.v2-drop.is-open { display: block; }
@keyframes v2MegaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.v2-drop-inner { display: flex; flex-direction: column; gap: 2px; }
/* Section count pill. Styled here for EVERY panel — the old rule tinted
   itself from --g-a, which the removed .v2-group[data-hue] supplied, so the
   catalogue's pills computed to transparent once that markup went. A menu
   ornament must not depend on a variable only one panel sets. */
.v2-group-count {
  margin-left: auto;
  font-size: 9px; font-weight: 750; color: var(--gray-500);
  background: var(--gray-100); border-radius: 99px; padding: 1px 5px;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.v2-mega-col-title {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-400); padding: 9px 9px 4px;
}
.v2-mega-col-title:first-child { padding-top: 4px; }
.v2-mega-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px;
  text-decoration: none; color: var(--gray-700);
  transition: background .14s, transform .14s;
}
.v2-mega-link:hover { background: var(--gray-50); color: var(--gray-900); transform: translateX(2px); }
.v2-mega-link.is-active { background: var(--primary-50); color: var(--primary-700); }
.v2-mega-ico {
  width: 26px; height: 26px; font-size: 11.5px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-500); font-size: 12.5px;
}
.v2-mega-link:hover .v2-mega-ico,
.v2-mega-link.is-active .v2-mega-ico { background: var(--primary-100); color: var(--primary-700); }
.v2-mega-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.v2-mega-scrim {
  position: fixed; inset: var(--cmdbar-h) 0 0; z-index: var(--z-scrim);
  background: rgba(16,21,43,.18); display: none;
}
.v2-mega-scrim.is-open { display: block; }
.v2-nav-badge {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px;
  background: var(--v2-coral-100); color: #c2410c; margin-left: 6px;
}

/* ── 4. Page header ────────────────────────────────────────── */
.page-header {
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
}
.page-title {
  font-size: 25px; font-weight: 750; letter-spacing: -.024em;
  color: var(--gray-900);
}
.page-subtitle { font-size: 13px; color: var(--gray-500); margin-top: 5px; }
.topbar-breadcrumb, #breadcrumb { display: none; }

/* ── 5. Surfaces ───────────────────────────────────────────── */
.card {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-color);
}
.card-header {
  padding: 15px 18px;
  background: transparent;
  border-bottom: 1px solid var(--border-color);
}
.card-title {
  font-size: 13.5px; font-weight: 680; letter-spacing: -.01em;
  color: var(--gray-900);
}
.card-body { padding: 18px; }

/* KPI cards — vibrant tinted gradient surfaces, tone taken from the icon */
.kpi-card,
.card:has(> .kpi-icon) {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s var(--v2-ease), transform .18s var(--v2-ease), border-color .18s;
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(79,70,229,.22) 0%, rgba(34,211,238,.13) 46%, rgba(255,255,255,0) 88%),
    var(--surface);
}
.kpi-card { padding: 17px 18px; }
.kpi-card:has(.kpi-icon.green), .kpi-card:has(.kpi-icon.teal),
.card:has(> .kpi-icon.green), .card:has(> .kpi-icon.teal) {
  background: linear-gradient(135deg, rgba(16,185,129,.26) 0%, rgba(34,211,238,.14) 48%, rgba(255,255,255,0) 90%), var(--surface);
}
.kpi-card:has(.kpi-icon.orange),
.card:has(> .kpi-icon.orange) {
  background: linear-gradient(135deg, rgba(249,115,22,.24) 0%, rgba(251,191,36,.15) 48%, rgba(255,255,255,0) 90%), var(--surface);
}
.kpi-card:has(.kpi-icon.red),
.card:has(> .kpi-icon.red) {
  background: linear-gradient(135deg, rgba(225,29,72,.22) 0%, rgba(251,113,133,.13) 48%, rgba(255,255,255,0) 90%), var(--surface);
}
.kpi-card:has(.kpi-icon.indigo), .kpi-card:has(.kpi-icon.purple),
.card:has(> .kpi-icon.indigo), .card:has(> .kpi-icon.purple) {
  background: linear-gradient(135deg, rgba(124,58,237,.24) 0%, rgba(79,70,229,.14) 48%, rgba(255,255,255,0) 90%), var(--surface);
}
.kpi-card:has(.kpi-icon.gray),
.card:has(> .kpi-icon.gray) {
  background: linear-gradient(135deg, rgba(102,112,138,.20) 0%, rgba(255,255,255,0) 82%), var(--surface);
}
.card:has(> .kpi-icon):hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--primary); opacity: 0;
  transition: opacity .18s;
}
.kpi-card:hover,
.card:has(> .kpi-icon):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-200);
}
.kpi-card:hover::before { opacity: .9; }
.kpi-icon {
  border-radius: 9px; width: 40px; height: 40px; font-size: 15px;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(16,21,43,.4);
}
.kpi-icon.blue   { background: linear-gradient(140deg,#6366f1,#4f46e5); }
.kpi-icon.green  { background: linear-gradient(140deg,#34d399,#059669); }
.kpi-icon.teal   { background: linear-gradient(140deg,#22d3ee,#0891b2); }
.kpi-icon.orange { background: linear-gradient(140deg,#fbbf24,#f97316); }
.kpi-icon.red    { background: linear-gradient(140deg,#fb7185,#e11d48); }
.kpi-icon.purple,
.kpi-icon.indigo { background: linear-gradient(140deg,#a78bfa,#7c3aed); }
.kpi-icon.gray   { background: linear-gradient(140deg,#94a3b8,#64748b); }
.kpi-icon.amber  { background: linear-gradient(140deg,#fbbf24,#f97316); }
.kpi-value {
  font-size: 27px; font-weight: 760; letter-spacing: -.03em;
  color: var(--gray-900); line-height: 1.05;
}
.kpi-label {
  font-size: 11.5px; font-weight: 600; color: var(--gray-500);
  margin-top: 4px; letter-spacing: -.002em;
}
.kpi-trend { font-size: 11px; margin-top: 8px; }

/* Dashboard hero — revenue panel + satellite tiles */
.v2-hero {
  display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
  gap: 18px; margin-bottom: 26px;
}
.v2-hero-panel {
  border-radius: var(--border-radius-lg);
  padding: 26px 28px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(34,211,238,.20) 0%, transparent 55%),
    linear-gradient(135deg, #1b1f4b 0%, #10152b 100%);
  color: #fff; position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 18px;
}
.v2-hero-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(199,210,254,.75);
}
.v2-hero-value {
  font-size: 46px; font-weight: 780; letter-spacing: -.038em; line-height: 1;
}
.v2-hero-caption { font-size: 12.5px; color: rgba(255,255,255,.6); }
.v2-hero-split { display: flex; flex-direction: column; gap: 9px; }
.v2-hero-bar {
  height: 9px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.12); display: flex;
}
.v2-hero-bar i { display: block; height: 100%; }
.v2-hero-legend {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,.72);
}
.v2-hero-legend b { color: #fff; font-weight: 680; }
.v2-hero-legend span.dot {
  width: 8px; height: 8px; border-radius: 3px; display: inline-block;
  margin-right: 7px; vertical-align: middle;
}
.v2-satellites { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v2-metric {
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: var(--border-radius); padding: 15px 16px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--v2-ease), box-shadow .18s var(--v2-ease);
}
.v2-metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.v2-metric-top {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gray-400);
}
.v2-metric-value {
  font-size: 24px; font-weight: 760; letter-spacing: -.03em; color: var(--gray-900);
}
.v2-metric-sub { font-size: 11.5px; color: var(--gray-500); }
@media (max-width: 1100px) {
  .v2-hero { grid-template-columns: 1fr; }
}

/* ── 6. Data grid — flat rows, hairline dividers ───────────── */
.data-table { font-size: 13px; }
.data-table thead th {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 16px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gray-500);
  white-space: nowrap;
}
.data-table tbody td {
  /* Density-driven: the values are tokens in connexa.css, retuned by
     data-density on <body>. Literals here would silently outrank the
     toggle, since this selector is more specific than .data-table td. */
  padding: var(--row-pad-y) var(--row-pad-x);
  font-size: var(--row-fs);
  border-bottom: 1px solid var(--border-color);
  color: var(--gray-700); vertical-align: middle;
}
.data-table tbody tr { transition: background .13s; }
.data-table tbody tr:nth-child(even) td { background: var(--surface-sunken); }
.data-table tbody tr:hover td { background: var(--primary-50); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td:has(.badge) { white-space: nowrap; }

.table-toolbar {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
}
/* Row actions stay on ONE line everywhere.
   The base sheets set .table-action-btn to display:flex — block-level — so
   buttons stack vertically on any table that doesn't wrap them in a
   .table-actions flex container. inline-flex keeps them in a row whether or
   not a wrapper exists, and .data-table's action cell never wraps. */
.table-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; flex: 0 0 auto;
  border-radius: 8px; border-color: var(--border-color);
  color: var(--gray-500);
  transition: background .14s, color .14s, border-color .14s, transform .14s;
}
.table-action-btn:hover {
  background: var(--primary-50); color: var(--primary-700);
  border-color: var(--primary-200); transform: translateY(-1px);
}
.pagination { padding: 13px 16px; border-top: 1px solid var(--border-color); }
.page-btn { border-radius: 8px; border-color: var(--border-color); }

/* ── 7. Controls ───────────────────────────────────────────── */
.btn {
  border-radius: 9px; font-weight: 620; font-size: 13px;
  padding: 8px 15px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--primary); border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(16,21,43,.12), 0 6px 16px -8px rgba(79,70,229,.6);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-secondary { border-color: var(--border-color); }
.btn-outline { border-color: var(--primary-200); color: var(--primary-700); }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }

.badge {
  border-radius: 7px; padding: 3.5px 9px;
  font-size: 11px; font-weight: 650; letter-spacing: -.002em;
}
.badge-primary { background: var(--primary-100); color: var(--primary-700); }
.badge-indigo  { background: var(--v2-violet-100); color: var(--v2-violet); }
.badge-teal    { background: var(--v2-cyan-100); color: var(--v2-cyan); }

.form-control, .filter-select {
  border-radius: 9px; border-color: var(--border-color);
  font-size: 13px; height: 38px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-control:focus, .filter-select:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(79,70,229,.14);
  outline: none;
}
.form-control:disabled, .form-control[readonly] { background: var(--surface-sunken); }
.label {
  font-size: 11.5px; font-weight: 680; letter-spacing: .01em;
  color: var(--gray-600);
}

.tabs-nav { border-bottom-width: 1px; gap: 2px; }
.tab-item {
  font-size: 13px; font-weight: 620; padding: 10px 15px;
  border-radius: 8px 8px 0 0;
}
.tab-item:hover { background: var(--gray-50); }
.tab-item.active { border-bottom-color: var(--primary); }
.tabs-pills { background: var(--gray-100); border-radius: 9px; }
.tab-pill { border-radius: 7px; }

.modal { border-radius: var(--border-radius-lg); }
.toast { border-radius: 10px; }

/* Enhancement components inherited from v1 keep their accents on-token */
.pricing-date-bar { border-left-color: var(--primary); border-radius: var(--border-radius); }

/* Page-local summary tiles (.ctr-kpi and friends) declare their own pale
   icon chips in a page <style>; re-point them at the v2 gradients with
   higher specificity and tint their surface the same way. */
html .ctr-kpi .kpi-icon, html .card > .kpi-icon { color: #fff; }
html .ctr-kpi .kpi-icon.blue   { background: linear-gradient(140deg,#6366f1,#4f46e5); }
html .ctr-kpi .kpi-icon.green  { background: linear-gradient(140deg,#34d399,#059669); }
html .ctr-kpi .kpi-icon.teal   { background: linear-gradient(140deg,#22d3ee,#0891b2); }
html .ctr-kpi .kpi-icon.amber,
html .ctr-kpi .kpi-icon.orange { background: linear-gradient(140deg,#fbbf24,#f97316); }
html .ctr-kpi .kpi-icon.red    { background: linear-gradient(140deg,#fb7185,#e11d48); }
html .ctr-kpi .kpi-icon.gray   { background: linear-gradient(140deg,#94a3b8,#64748b); }
html .ctr-kpi {
  border-radius: var(--border-radius);
  transition: box-shadow .18s var(--v2-ease), transform .18s var(--v2-ease);
}
html .ctr-kpi:hover { transform: translateY(-2px); }
html .ctr-kpi:has(> .kpi-icon.blue) {
  background: linear-gradient(135deg, rgba(79,70,229,.22) 0%, rgba(34,211,238,.13) 46%, rgba(255,255,255,0) 88%), var(--surface);
}
html .ctr-kpi:has(> .kpi-icon.green), html .ctr-kpi:has(> .kpi-icon.teal) {
  background: linear-gradient(135deg, rgba(16,185,129,.26) 0%, rgba(34,211,238,.14) 48%, rgba(255,255,255,0) 90%), var(--surface);
}
html .ctr-kpi:has(> .kpi-icon.amber), html .ctr-kpi:has(> .kpi-icon.orange),
.card:has(> .kpi-icon.amber) {
  background: linear-gradient(135deg, rgba(249,115,22,.24) 0%, rgba(251,191,36,.15) 48%, rgba(255,255,255,0) 90%), var(--surface);
}
html .ctr-kpi:has(> .kpi-icon.red) {
  background: linear-gradient(135deg, rgba(225,29,72,.22) 0%, rgba(251,113,133,.13) 48%, rgba(255,255,255,0) 90%), var(--surface);
}
html .ctr-kpi:has(> .kpi-icon.gray) {
  background: linear-gradient(135deg, rgba(102,112,138,.20) 0%, rgba(255,255,255,0) 82%), var(--surface);
}

/* ── 8. Responsive ─────────────────────────────────────────── */
@media (max-width: 1180px) {
  .v2-cmdbar .topbar-role-badge, .v2-user-meta { display: none; }
}
@media (max-width: 900px) {
  :root { --cmdbar-h: 104px; }
  .v2-cmdbar-row1 { gap: 12px; padding: 0 14px; }
  .v2-brand-sub { display: none; }
  .v2-tabs { padding: 0 10px; }
  .app-shell .main-content { padding: 18px 14px 60px; }
  .v2-satellites { grid-template-columns: 1fr; }
}

/* ── 9. Supplement / inclusive-all entry controls ──────────── */
.hxn-mini-toggle {
  display: inline-flex; background: var(--gray-100);
  border: 1px solid var(--border-color); border-radius: 8px; padding: 2px;
}
.hxn-mini-toggle button {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 650; color: var(--gray-500);
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  transition: background .14s, color .14s;
}
.hxn-mini-toggle button:hover:not(:disabled) { color: var(--gray-800); }
.hxn-mini-toggle button.active {
  background: var(--surface); color: var(--primary-700); box-shadow: var(--shadow-sm);
}
.hxn-mini-toggle button:disabled { opacity: .5; cursor: not-allowed; }
.hxn-derived {
  display: block; margin-top: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: -.002em;
  color: var(--primary-700); cursor: help;
  font-variant-numeric: tabular-nums;
}
.hxn-derived.is-warn { color: var(--danger-600); }
.hxn-derived i { margin-right: 3px; opacity: .7; }

/* ── 10. Contract wizard step rail ─────────────────────────── */
html .wizard-nav {
  position: relative;
  gap: 0;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-sunken) 100%);
  padding: 10px 12px 14px;
  overflow: visible;
  overflow-x: auto;
}
/* progress track under the whole rail — width driven by --wiz-progress */
html .wizard-nav::before,
html .wizard-nav::after {
  content: ''; position: absolute; left: 12px; bottom: 6px; height: 3px;
  border-radius: 99px; pointer-events: none;
}
html .wizard-nav::before { right: 12px; background: var(--gray-200); }
html .wizard-nav::after {
  width: calc((100% - 24px) * var(--wiz-progress, 0));
  background: linear-gradient(90deg, #6366f1, #22d3ee 55%, #10b981);
  box-shadow: 0 0 12px -2px rgba(79,70,229,.6);
  transition: width .4s var(--v2-ease);
}

html .wiz-tab {
  gap: 8px; padding: 8px 13px; border-radius: 10px;
  flex: 0 0 auto; min-width: max-content;
  font-size: 12.5px; font-weight: 640; color: var(--gray-500);
  --step-a: #6366f1; --step-b: #4f46e5;
}
html .wiz-tab[data-step="commission"]   { --step-a: #22d3ee; --step-b: #0891b2; }
html .wiz-tab[data-step="promotions"]   { --step-a: #a78bfa; --step-b: #7c3aed; }
html .wiz-tab[data-step="checkinout"]   { --step-a: #fbbf24; --step-b: #f97316; }
html .wiz-tab[data-step="cancellation"] { --step-a: #fb7185; --step-b: #e11d48; }
html .wiz-tab[data-step="bookingrules"] { --step-a: #34d399; --step-b: #059669; }
html .wiz-tab[data-step="notes"]        { --step-a: #94a3b8; --step-b: #64748b; }
html .wiz-tab[data-step="review"]       { --step-a: #818cf8; --step-b: #4338ca; }

html .wiz-tab i { color: var(--step-b); opacity: .55; font-size: 11px !important; transition: opacity .18s, transform .18s; }
html .wiz-tab .snum {
  width: 24px; height: 24px; border-radius: 8px;
  font-size: 11px; font-weight: 750;
  background: var(--gray-100); color: var(--gray-500);
  box-shadow: none; transition: all .2s var(--v2-ease);
}
html .wiz-tab:hover {
  background: color-mix(in oklab, var(--step-a) 12%, transparent);
  color: var(--gray-800);
}
html .wiz-tab:hover i { opacity: .9; }

html .wiz-tab.active {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--step-a) 26%, transparent),
    color-mix(in oklab, var(--step-b) 12%, transparent));
  color: color-mix(in oklab, var(--step-b) 78%, #0b1020);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--step-b) 30%, transparent);
}
html .wiz-tab.active .snum {
  background: linear-gradient(140deg, var(--step-a), var(--step-b));
  color: #fff;
  box-shadow: 0 4px 12px -3px color-mix(in oklab, var(--step-b) 70%, transparent);
  transform: scale(1.06);
}
html .wiz-tab.active i { opacity: 1; transform: scale(1.08); }

html .wiz-tab.completed { color: #047857; }
html .wiz-tab.completed .snum {
  background: linear-gradient(140deg, #34d399, #059669); color: #fff;
  box-shadow: 0 3px 10px -3px rgba(5,150,105,.7);
}
html .wiz-tab.completed i { color: #059669; opacity: .8; }
html .wiz-tab.has-error { color: var(--danger-600); }
html .wiz-tab.has-error .snum {
  background: linear-gradient(140deg,#fb7185,#e11d48); color: #fff;
  animation: wizPulse 1.6s ease-in-out infinite;
}
@keyframes wizPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(225,29,72,.5); }
  50%     { box-shadow: 0 0 0 5px rgba(225,29,72,0); }
}

/* connectors: filled once the step to their left is done */
html .wiz-sep {
  width: 18px; height: 2px; margin: auto 0; border-radius: 99px;
  background: var(--gray-200); align-self: center; flex-shrink: 0;
  transition: background .3s var(--v2-ease);
}
html .wiz-sep.done { background: linear-gradient(90deg,#34d399,#22d3ee); }

/* ── Row-action layout, applied to every table in the build ────────
   Keyed off the markup, never a page's body class, so a new page or a
   new table cannot reintroduce the vertical stack. */
.data-table .table-actions {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap; justify-content: flex-end;
}
/* An actions cell with bare buttons (no .table-actions wrapper) */
.data-table td:last-child { white-space: nowrap; }
.data-table td.trf-rowacts,
.data-table td:has(> .table-action-btn) { white-space: nowrap; }
.data-table td > .table-action-btn + .table-action-btn { margin-left: 3px; }
/* the actions column keeps a floor so the row can't squeeze buttons out */
.data-table th:last-child { white-space: nowrap; }

/* ══ Module access — lives here, not in transfers.css, because every page
   loads v2.css and any page can be blocked ═════════════════════════════════════════ */
.modacc-block {
  max-width: 560px; margin: 60px auto; text-align: center;
  padding: 44px 36px; border-radius: var(--border-radius);
  background: var(--surface); border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.modacc-block-ico {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 18px;
  display: grid; place-items: center; font-size: 24px; color: #fff;
  background: linear-gradient(140deg, #a78bfa, #6d28d9);
  box-shadow: 0 10px 26px -12px rgba(109,40,217,.75);
}
.modacc-block-t { font-size: 19px; font-weight: 750; letter-spacing: -.02em; color: var(--gray-900); }
.modacc-block-s { font-size: 13.5px; color: var(--gray-500); margin-top: 9px; line-height: 1.6; text-wrap: pretty; }
.modacc-block-actions { display: flex; gap: 9px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

.modacc-banner {
  display: flex; align-items: center; gap: 13px; margin-bottom: 18px;
  padding: 13px 17px; border-radius: 12px; font-size: 13px; color: var(--gray-700);
  background: linear-gradient(135deg, rgba(124,58,237,.16) 0%, rgba(79,70,229,.08) 60%, rgba(255,255,255,0) 100%), var(--surface);
  border: 1px solid rgba(124,58,237,.34);
}
.modacc-banner > i { font-size: 16px; color: #6d28d9; flex-shrink: 0; }
.modacc-banner strong { color: var(--gray-900); }
.modacc-banner-sub { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; }
.modacc-banner .btn { margin-left: auto; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   Direction B — Workspace switcher (command bar, row 1)
   Scopes the session's market and reporting currency once instead of
   repeating a market filter on every page.
   ══════════════════════════════════════════════════════════════ */
.v2-ws {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 11px;
  border-radius: 9px; cursor: pointer; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
  color: #fff; transition: background var(--dur-fast) var(--v2-ease), border-color var(--dur-fast);
}
.v2-ws:hover { background: rgba(255,255,255,.15); }
.v2-ws.is-scoped { border-color: rgba(129,140,248,.55); background: rgba(79,70,229,.26); }
.v2-ws-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(52,211,153,.22);
}
.v2-ws.is-scoped .v2-ws-dot { background: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.25); }
.v2-ws-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.v2-ws-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.v2-ws-sub {
  font-size: 10px; color: rgba(255,255,255,.62); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.v2-ws-caret { font-size: 9px; color: rgba(255,255,255,.55); }

.v2-ws-pop {
  position: fixed; width: 282px; z-index: var(--z-drop);
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg);
  padding: 7px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--v2-ease), visibility var(--dur-fast);
}
.v2-ws-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.v2-ws-pop-h {
  font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray-400); padding: 7px 10px 8px;
}
.v2-ws-opt {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px;
  width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; padding: 8px 10px; border-radius: var(--border-radius-sm);
  transition: background var(--dur-fast);
}
.v2-ws-opt:hover { background: var(--gray-100); }
.v2-ws-opt.is-on { background: var(--primary-50); }
.v2-ws-opt-n { font-size: 12.5px; font-weight: 650; color: var(--gray-900); }
.v2-ws-opt.is-on .v2-ws-opt-n { color: var(--primary-700); }
.v2-ws-opt-s { grid-column: 1 / -1; font-size: 11px; color: var(--gray-400); }
.v2-ws-opt > i {
  /* Pinned, not auto-placed: the sub-line spans 1/-1, so DOM order puts
     this on row 3 in column 1 and collapses the auto track to 0px. */
  grid-row: 1; grid-column: 2; justify-self: end;
  color: var(--primary); font-size: 11px;
}
.v2-ws-pop-f {
  font-size: 10.5px; color: var(--gray-400); padding: 9px 10px 5px;
  margin-top: 4px; border-top: 1px solid var(--border-color); line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════
   Borrowed from Direction C — collapsible tree in the module menu
   The caret leads the row (tree affordance) rather than trailing it,
   and rotates in place; group headers open children and never navigate.
   ══════════════════════════════════════════════════════════════ */

.v2-mega-desc {
  display: block; font-size: 10.5px; color: var(--gray-400);
  margin-top: 2px; line-height: 1.4;
}
.v2-mega-link.is-active .v2-mega-desc { color: var(--primary-400); }

@media (max-width: 1180px) {
  .v2-ws-sub { display: none; }
  .v2-ws-name { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 900px) {
  .v2-ws { padding: 0 9px; }
  .v2-ws-meta { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Dashboard — Direction B lead cards + Direction C cockpit
   ══════════════════════════════════════════════════════════════ */

/* Attention cards. Vibrant by intent: these are the only gradients that
   carry meaning rather than decoration — one per severity. */
.cnx-lead {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px; margin-bottom: 20px;
}
.cnx-lead:empty { display: none; }
.cnx-lead.is-clear { grid-template-columns: 1fr; }
.cnx-ld {
  display: flex; align-items: flex-start; gap: 14px; min-height: 106px;
  padding: 17px 19px; border-radius: 13px; color: #fff; position: relative;
  overflow: hidden; text-decoration: none;
  transition: transform var(--dur) var(--v2-ease), box-shadow var(--dur);
}
.cnx-ld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 140px at 92% -20%, rgba(255,255,255,.3), transparent 60%);
}
.cnx-ld:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: #fff; }
.cnx-ld.r { background: linear-gradient(132deg, #9f1239 0%, #e11d48 55%, #fb7185 100%); }
.cnx-ld.a { background: linear-gradient(132deg, #92400e 0%, #d97706 55%, #fbbf24 100%); }
.cnx-ld.v { background: linear-gradient(132deg, #4c1d95 0%, #7c3aed 55%, #a78bfa 100%); }
.cnx-ld-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 17px; flex: 0 0 auto; background: rgba(255,255,255,.19); position: relative;
}
.cnx-ld-tx { position: relative; min-width: 0; }
.cnx-ld-v {
  display: block; font-size: 32px; font-weight: 800; letter-spacing: -.035em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.cnx-ld-k { display: block; font-size: 12.5px; font-weight: 700; margin-top: 5px; }
.cnx-ld-s { display: block; font-size: 11.5px; opacity: .84; margin-top: 2px; }
.cnx-ld-go {
  position: absolute; right: 16px; bottom: 15px; font-size: 11.5px; font-weight: 700;
  opacity: .9; display: flex; align-items: center; gap: 5px;
}
.cnx-lead-clear {
  display: flex; align-items: center; gap: 13px; padding: 15px 18px;
  border-radius: 13px; background: var(--success-50); border: 1px solid var(--success-300);
  color: var(--gray-700);
}
.cnx-lead-clear > i { font-size: 18px; color: var(--success-600); }
.cnx-lead-clear strong { color: var(--gray-900); }

/* Cockpit row: matrix beside worklist */
.cnx-cockpit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px; margin-bottom: 24px;
}
.cnx-mx-body { padding: 16px 18px 14px; overflow-x: auto; }
.cnx-mx { border-collapse: separate; border-spacing: 3px; width: 100%; }
.cnx-mx th {
  font-size: 10px; font-weight: 700; color: var(--gray-400); text-transform: uppercase;
  letter-spacing: .05em; padding: 0 0 5px; text-align: center; background: none; border: 0;
}
.cnx-mx th.rh { text-align: left; width: 96px; }
.cnx-mx td { padding: 0; }
.cnx-mx .rowlbl {
  font-size: 11.5px; font-weight: 650; color: var(--gray-900);
  padding-right: 8px; white-space: nowrap;
}
.cnx-cell {
  height: 30px; border-radius: 6px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 750; cursor: default;
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-fast) var(--v2-ease), box-shadow var(--dur-fast);
}
.cnx-cell:hover { transform: scale(1.09); box-shadow: var(--shadow-md); position: relative; z-index: 5; }
.cnx-cell.h4 { background: linear-gradient(135deg, #4338ca, #6366f1); color: #fff; }
.cnx-cell.h3 { background: linear-gradient(135deg, #6366f1, #818cf8); color: #fff; }
.cnx-cell.h2 { background: rgba(99,102,241,.32); color: #3730a3; }
.cnx-cell.h1 { background: rgba(99,102,241,.15); color: #4338ca; }
.cnx-cell.gap {
  background: rgba(225,29,72,.14); color: #9f1239;
  border: 1px dashed rgba(225,29,72,.42);
}
.cnx-cell.na { background: var(--gray-100); color: var(--gray-300); }
:root[data-theme="dark"] .cnx-cell.h2 { color: #c7d2fe; }
:root[data-theme="dark"] .cnx-cell.h1 { color: #a5b4fc; }
:root[data-theme="dark"] .cnx-cell.gap { color: #fda4af; }
.cnx-mx-lg {
  display: flex; gap: 15px; flex-wrap: wrap; margin-top: 12px;
  font-size: 10.5px; color: var(--gray-500);
}
.cnx-mx-lg span { display: flex; align-items: center; gap: 5px; }
.cnx-mx-lg i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.cnx-mx-lg i.h4 { background: linear-gradient(135deg, #4338ca, #6366f1); }
.cnx-mx-lg i.h3 { background: linear-gradient(135deg, #6366f1, #818cf8); }
.cnx-mx-lg i.h2 { background: rgba(99,102,241,.32); }
.cnx-mx-lg i.h1 { background: rgba(99,102,241,.15); }
.cnx-mx-lg i.gap { background: rgba(225,29,72,.14); border: 1px dashed rgba(225,29,72,.5); }
.cnx-mx-lg i.na { background: var(--gray-100); }

/* Source chip — own contracted vs supplier sourced */
.cnx-src {
  display: inline-flex; font-size: 9.5px; font-weight: 750;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.cnx-src.o { background: rgba(79,70,229,.12); color: var(--primary-700); }
.cnx-src.t { background: rgba(8,145,178,.13); color: #0e7490; }
:root[data-theme="dark"] .cnx-src.o { background: rgba(129,140,248,.2); color: #c7d2fe; }
:root[data-theme="dark"] .cnx-src.t { background: rgba(34,211,238,.18); color: #a5f3fc; }

@media (max-width: 1400px) {
  .cnx-cockpit { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .cnx-lead { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   Density — the application lives in this sheet because it loads last
   and both style.css and the .data-table tbody td rule above set cell
   padding. Values are tokens in connexa.css, retuned by one attribute
   on <body>, so no page needs its own density CSS.
   ══════════════════════════════════════════════════════════════ */
.data-table th {
  padding: calc(var(--row-pad-y) + 1px) var(--row-pad-x);
}
/* Inputs inside a compact row must not force the row taller than the
   density asks for. */
body[data-density="compact"] .data-table td .form-control,
body[data-density="compact"] .data-table td input,
body[data-density="compact"] .data-table td select {
  height: 28px; font-size: 12px; padding: 0 8px;
}

/* ══════════════════════════════════════════════════════════════
   Hero satellites — the dashboard's single metric presentation.
   These carry the figures the four KPI grids held, chosen by meaning
   (aggregate first) and written straight from the page's own data, so
   there is no second inferred copy to drift. The tile treatment below
   is what the removed #cnxStrip contributed.
   ══════════════════════════════════════════════════════════════ */
.v2-satellites .v2-metric {
  position: relative; overflow: hidden;
  transition: transform var(--dur) var(--v2-ease), box-shadow var(--dur);
}
.v2-satellites .v2-metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* One tint per metric class, matched to the module it links to:
   indigo inventory, teal supply nodes, coral contracts, violet products. */
.v2-satellites .v2-metric:nth-child(1) {
  background: linear-gradient(135deg, rgba(79,70,229,.2), rgba(99,102,241,.09) 52%, rgba(255,255,255,0)), var(--surface);
}
.v2-satellites .v2-metric:nth-child(2) {
  background: linear-gradient(135deg, rgba(13,148,136,.2), rgba(45,212,191,.09) 52%, rgba(255,255,255,0)), var(--surface);
}
.v2-satellites .v2-metric:nth-child(3) {
  background: linear-gradient(135deg, rgba(249,115,98,.22), rgba(251,146,60,.09) 52%, rgba(255,255,255,0)), var(--surface);
}
.v2-satellites .v2-metric:nth-child(4) {
  background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(167,139,250,.09) 52%, rgba(255,255,255,0)), var(--surface);
}
.v2-satellites .v2-metric-top > i { color: var(--primary); }
.v2-satellites .v2-metric:nth-child(2) .v2-metric-top > i { color: var(--teal-600); }
.v2-satellites .v2-metric:nth-child(3) .v2-metric-top > i { color: var(--v2-coral); }
.v2-satellites .v2-metric:nth-child(4) .v2-metric-top > i { color: var(--v2-violet); }

/* Retired: #cnxStrip presented the same figures a second time.
   Rules kept only so a stale cached page degrades to plain cards. */
.cnx-kt {
  border: 1px solid var(--border-color); border-radius: 13px;
  padding: 16px 17px; background: var(--surface); position: relative; overflow: hidden;
  transition: transform var(--dur) var(--v2-ease), box-shadow var(--dur);
}
.cnx-kt:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cnx-kt.b { background: linear-gradient(135deg, rgba(79,70,229,.2), rgba(99,102,241,.09) 52%, rgba(255,255,255,0)), var(--surface); }
.cnx-kt.o { background: linear-gradient(135deg, rgba(249,115,98,.22), rgba(251,146,60,.09) 52%, rgba(255,255,255,0)), var(--surface); }
.cnx-kt.v { background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(167,139,250,.09) 52%, rgba(255,255,255,0)), var(--surface); }
.cnx-kt.t { background: linear-gradient(135deg, rgba(13,148,136,.2), rgba(45,212,191,.09) 52%, rgba(255,255,255,0)), var(--surface); }
.cnx-kt-i {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: #fff; font-size: 13px; position: relative; margin-bottom: 12px;
}
.cnx-kt-eb {
  font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gray-400); position: relative;
}
.cnx-kt-v {
  font-size: 27px; font-weight: 800; letter-spacing: -.035em; color: var(--gray-900);
  line-height: 1; margin-top: 6px; position: relative; font-variant-numeric: tabular-nums;
}
.cnx-kt-l { font-size: 12.5px; font-weight: 650; color: var(--gray-600); margin-top: 5px; position: relative; }
.cnx-kt-d {
  font-size: 11px; color: var(--gray-500); margin-top: 6px; position: relative;
  line-height: 1.5; text-wrap: pretty;
}
.cnx-kt-t {
  display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  color: var(--success-600); margin-top: 9px; position: relative;
}
.cnx-kt-t i { font-size: 9.5px; }

/* Activity source IP — an audit fact, so it reads as monospace data
   rather than prose, and stays legible without competing with the
   action text above it. */
.activity-ip {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  padding: 1px 6px; border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: -.01em;
  background: var(--gray-100); color: var(--gray-500);
  white-space: nowrap;
}
.activity-ip i { font-size: 9px; opacity: .75; }

/* ══════════════════════════════════════════════════════════════
   Catalogue — mega menu
   33 items across two product lines is too many for an accordion: every
   item sat one or two clicks out of sight, which reads as a broken menu.
   The panel shows the whole catalogue at once — one region per vertical,
   one column per section.
   ══════════════════════════════════════════════════════════════ */
.v2-drop.is-mega {
  left: 22px; right: 22px; width: auto; max-width: none;
  padding: 6px;
}
/* Both variants cap to the space under the bar and scroll: the full
   catalogue is ~860px tall, well past a laptop viewport. */
.v2-drop, .v2-drop.is-mega {
  max-height: calc(100vh - var(--cmdbar-h) - 22px);
  overflow-y: auto; overscroll-behavior: contain;
}
.v2-drop:not(.is-mega) { max-width: 330px; }
.v2-drop.is-cols { max-width: 620px; width: 620px; }

/* Dropdown groups as visible columns. Nothing collapsed: a menu that opens
   showing only group headers reads as broken. */
.v2-drop-cols { column-gap: 14px; }
.v2-drop-cols.is-wide .v2-drop-col { break-inside: avoid; }
.v2-drop-col { padding-bottom: 8px; min-width: 0; }
.v2-drop-col .v2-mega-coltitle { padding: 6px 8px 4px; }
/* Track floor sized to the wider vertical; align-items:start stops a short
   vertical being stretched to its neighbour's height. */
.v2-mega-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 4px; width: 100%; align-items: start;
}
.v2-mega-vert {
  padding: 10px 12px 2px; border-radius: var(--border-radius);
  min-width: 0;
}
.v2-mega-vert + .v2-mega-vert { border-left: 1px solid var(--border-color); }
.v2-mega-vhd {
  display: flex; align-items: center; gap: 9px; padding: 0 4px 9px;
  margin-bottom: 7px; border-bottom: 1px solid var(--border-color);
}
.v2-vert-ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-size: 13px; flex: 0 0 auto; color: #fff;
  background: linear-gradient(140deg, var(--primary-400), var(--primary-700));
}
.v2-mega-vert[data-vert="transfer"] .v2-vert-ico { background: linear-gradient(140deg, #22d3ee, #0e7490); }
.v2-vert-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.v2-vert-label { font-size: 13.5px; font-weight: 750; color: var(--gray-900); letter-spacing: -.01em; }
.v2-vert-blurb {
  font-size: 10.5px; color: var(--gray-400); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-mega-vert.has-current .v2-vert-label { color: var(--primary-700); }
.v2-vert-count {
  font-size: 10px; font-weight: 750; color: var(--gray-500);
  background: var(--gray-100); border-radius: 99px; padding: 2px 7px; flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* Sections as columns. auto-fit means a vertical with 3 sections and one
   with 5 both fill their region without a fixed column count to maintain. */
/* Sections pack into balanced COLUMNS rather than grid cells: a grid aligns
   every row to its tallest section, and with 5 sections of unequal length
   that wasted enough height to push the last items out of the panel. */
.v2-mega-cols { column-gap: 10px; }   /* column-count set per vertical from its item count */
.v2-mega-col { min-width: 0; padding-bottom: 6px; break-inside: avoid; }
.v2-mega-coltitle {
  display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gray-400); padding: 5px 8px 3px;
}
.v2-drop.is-mega .v2-mega-link {
  padding: 4px 8px; border-radius: var(--border-radius-sm); gap: 7px;
}
.v2-drop.is-mega .v2-mega-ico { width: 22px; height: 22px; font-size: 10.5px; }
.v2-drop.is-mega .v2-mega-label { font-size: 12px; white-space: normal; line-height: 1.3; }

/* Stack only when two 360px tracks genuinely cannot fit — not at an
   arbitrary laptop breakpoint. */
@media (max-width: 760px) {
  .v2-mega-grid { grid-template-columns: 1fr; }
  .v2-mega-vert + .v2-mega-vert {
    border-left: 0; border-top: 1px solid var(--border-color);
  }
}
.v2-vert-empty { padding: 18px 14px; font-size: 12.5px; color: var(--gray-400); }