*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--iit-font-body, 'Sora', system-ui, sans-serif); color: var(--iit-text); background: var(--iit-bg, #0A0418); min-height: 100vh; }
:where(h1, h2, h3, a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--iit-focus, #C052FF) !important;
  outline-offset: 3px;
}
.validation-message { color: #FF6B86; font-family: var(--iit-font-mono, 'Space Mono', monospace); font-size: 0.78rem; letter-spacing: 0.04em; }
.alert { padding: .75rem 1rem; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px; }
.alert-danger { background: rgba(255, 77, 109, 0.10); color: #FFB3C1; border: 1px solid rgba(255, 77, 109, 0.32); }
/* AP-22: the page-error bar holds the shared FailureNotice, so it takes the ieq-ux.css surface and danger
   tokens in both themes. The framework shows it by setting display: block. */
#blazor-error-ui { background: var(--ieq-surface); color: var(--ieq-text); border-top: 4px solid var(--ieq-danger-border); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25); padding: 12px 16px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: none; }

/* Sign-in pages own their small, route-specific styles. */
/* ============== PORTAL CHROME ============== */
  :root { --portal-bg: #0A0418; }
  body {
    background:
      radial-gradient(circle at 12% -10%, rgba(155, 92, 232, 0.20) 0%, transparent 50%),
      radial-gradient(circle at 88% 110%, rgba(0, 229, 255, 0.10) 0%, transparent 50%),
      var(--portal-bg);
    font-family: 'Sora', system-ui, sans-serif;
    color: var(--iit-text);
  }

  /* ---------- Top bar — frosted dark with cyan trace ---------- */
  .portal-topbar {
    background: rgba(10, 4, 24, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--iit-border);
    position: sticky; top: 0; z-index: 1030;
  }
  .portal-topbar::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent 5%, var(--iit-cyan-dim) 50%, transparent 95%);
    opacity: 0.35;
  }
  .topbar-inner {
    max-width: 1920px; margin: 0 auto;
    padding: 0 28px;
    height: 72px;
    display: flex; align-items: center; gap: 24px;
  }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; min-width: 0; }
  /* Only the logo image is clickable — opens the marketing site in
     a new tab. The Admin Portal pill and the live clock sit next
     to it as plain spans (no link). */
  .brand-logo { display: inline-flex; align-items: center; text-decoration: none; }
  .brand img { height: 144px; width: auto; max-width: none; flex-shrink: 0; }
  .brand-tag {
    font-family: 'Unbounded', sans-serif;
    font-size: 11px; font-weight: 700;
    color: #fff;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    background: var(--iit-purple);
    border: 1px solid var(--iit-purple-light);
  }

  /* Live clock next to the Admin Portal pill — date + 24h time,
     monospace, muted. Updated every second by inline JS in
     MainLayout.razor. */
  .topbar-clock {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.04em;
    margin-left: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
    flex: 0 0 auto;
  }

  nav.primary { display: flex; gap: 2px; align-items: center; height: 100%; margin: 0 auto; }
  .nav-item {
    position: relative; height: 100%;
    display: inline-flex; align-items: center; flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 500; font-size: 14.5px;
    line-height: 1.2; white-space: nowrap; text-align: center;
    color: rgba(255,255,255,0.8);
    user-select: none;
    border: none; background: transparent;
  }
  .nav-label, .nav-label-button {
    color: inherit; font: inherit;
    text-decoration: none;
    background: none; border: none;
    cursor: pointer;
    padding: 0 0 0 14px;
    height: 100%;
    display: inline-flex; align-items: center;
  }
  .nav-chev {
    color: inherit;
    background: none; border: none;
    cursor: pointer;
    padding: 0 14px 0 0;
    height: 100%;
    display: inline-flex; align-items: center;
  }
  /* Plain nav-item — no chev / no dropdown menu. The label covers
     the full row so the entire item is clickable as a single link. */
  .nav-item.nav-item-plain .nav-label { padding: 0 14px; }
  .nav-item:hover { color: #fff; background: rgba(155,92,232,0.10); border-radius: 6px; }
  .nav-item:has(> .nav-label.active) {
    color: #fff;
    background: rgba(155,92,232,0.22);
    border-radius: 6px;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--iit-cyan);
  }
  .nav-item .chev { margin-left: 6px; opacity: 0.6; transition: transform .15s ease; }
  .nav-item[aria-expanded="true"] .chev { transform: rotate(180deg); }

  .menu {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--iit-elev);
    border: 1px solid var(--iit-border);
    border-radius: var(--iit-radius);
    box-shadow: 0 16px 40px rgba(18,6,31,0.18);
    padding: 10px; min-width: 320px;
    display: none; z-index: 60;
  }
  .nav-item[aria-expanded="true"] .menu { display: flex; flex-direction: column; align-items: stretch; }
  .menu-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--iit-text-muted); padding: 8px 10px 6px; font-weight: 700;
    text-align: center;
  }
  .menu a {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 10px;
    text-decoration: none; color: var(--iit-text);
    border-radius: 10px; font-size: 14px; font-weight: 500;
    font-family: 'Sora', sans-serif;
    text-align: center;
  }
  .menu a:hover { background: rgba(0, 229, 255, 0.06); color: var(--iit-white); }
  .menu a[aria-current="page"] { font-weight: 600; }
  .menu a .ic { display: none; }
  .menu a:hover .ic {
    background: rgba(0, 229, 255, 0.10);
    border-color: rgba(0, 229, 255, 0.45);
    color: var(--iit-cyan);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
  }
  .menu a .desc { font-size: 12px; font-weight: 400; color: var(--iit-text-muted); margin-top: 2px; line-height: 1.4; }
  .menu-foot {
    margin-top: 6px; padding: 10px;
    border-top: 1px dashed var(--iit-border);
    font-size: 12px; color: var(--iit-text-muted);
    display: flex; justify-content: space-between;
  }
  .menu-foot a { color: var(--iit-purple); text-decoration: none; font-weight: 600; }

  .topbar-spacer { flex: 0; }
  .topbar-actions { display: flex; align-items: center; gap: 10px; }

  .env-pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 30px; padding: 0 12px;
    border: 1px solid var(--iit-purple-light);
    background: rgba(123,47,190,0.18);
    color: #fff;
    border-radius: 999px;
    font-family: 'Unbounded', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .env-pill::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--iit-green);
    box-shadow: 0 0 0 3px rgba(109,179,63,0.25);
  }

  .search-wrap {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 14px;
    border: 1px solid var(--iit-border);
    border-radius: 999px;
    background: rgba(155, 92, 232, 0.06);
    color: var(--iit-text-muted);
    font-family: var(--iit-font-mono);
    letter-spacing: 0.02em;
    font-size: 12px; width: 280px;
    transition: var(--iit-transition);
  }
  .search-wrap:focus-within { border-color: rgba(0, 229, 255, 0.6); background: rgba(155, 92, 232, 0.10); }
  .search-icon { font-size: 12px; color: rgba(255,255,255,0.6); }
  .search-input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: 0;
    color: #fff;
    font-family: inherit; font-size: 12.5px; letter-spacing: 0.02em;
    padding: 0;
  }
  .search-input::placeholder { color: var(--iit-text-muted); }
  .search-input::-webkit-search-cancel-button { display: none; }
  .search-wrap .kbd {
    flex: 0 0 auto;
    font-family: 'Space Mono', monospace; font-size: 11px;
    padding: 2px 6px; border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
    color: rgba(255,255,255,0.6);
  }
  .search-results {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    max-width: min(92vw, 420px);
    background: var(--iit-elev);
    border: 1px solid var(--iit-border);
    border-radius: var(--iit-radius);
    box-shadow: 0 16px 40px rgba(18,6,31,0.32);
    padding: 6px; z-index: 70;
    max-height: 60vh; overflow-y: auto;
  }
  .search-results[hidden] { display: none; }
  .search-result {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 10px; border-radius: 8px;
    text-decoration: none; color: var(--iit-text);
    font-family: 'Sora', sans-serif; font-size: 13.5px;
  }
  .search-result strong { color: #fff; font-weight: 600; display: block; }
  .search-result .search-result-section {
    font-size: 11px; color: var(--iit-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
  }
  .search-result .search-result-arrow {
    font-family: 'Space Mono', monospace; font-size: 11px;
    color: var(--iit-text-muted);
    padding: 2px 6px; border: 1px solid rgba(255,255,255,0.14); border-radius: 4px;
  }
  .search-result.active,
  .search-result:hover { background: rgba(0, 229, 255, 0.08); color: #fff; }
  .search-result-empty {
    padding: 14px 12px; color: var(--iit-text-muted);
    font-size: 13px; text-align: center;
  }
  .icon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 999px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06); cursor: pointer;
    position: relative; color: rgba(255,255,255,0.75);
  }
  .icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
  .dot {
    position: absolute; top: 8px; right: 9px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--iit-green); border: 2px solid var(--iit-dark);
  }

  /* Profile */
  .profile-wrap { position: relative; }
  .profile-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 14px 4px 4px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    cursor: pointer; font-family: 'Unbounded', sans-serif; height: 38px;
    color: #fff;
  }
  .profile-btn:hover { background: rgba(255,255,255,0.12); }
  .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--iit-purple) 0%, var(--iit-purple-light) 100%);
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 12px; font-family: 'Unbounded', sans-serif;
  }
  .profile-btn .name { font-size: 13px; font-weight: 600; }
  .profile-btn .role-tag {
    font-size: 10px; font-family: 'Unbounded', sans-serif;
    color: #fff; background: var(--iit-purple);
    padding: 2px 7px; border-radius: 4px; font-weight: 700;
    letter-spacing: 0.06em;
  }
  .profile-btn .chev { opacity: 0.6; }

  .profile-menu {
    position: absolute; top: calc(100% + 8px); right: 0; width: 340px;
    background: var(--iit-elev); border: 1px solid var(--iit-border);
    border-radius: var(--iit-radius); box-shadow: 0 16px 40px rgba(18,6,31,0.18);
    padding: 10px; display: none; z-index: 60;
  }
  .profile-wrap[aria-expanded="true"] .profile-menu { display: block; }
  .profile-head {
    display: flex; gap: 12px; align-items: center;
    padding: 14px; border-radius: 12px;
    background: linear-gradient(135deg, var(--iit-purple-pale) 0%, #fff 100%);
    border: 1px solid var(--iit-border);
    margin-bottom: 8px;
  }
  .profile-head .avatar { width: 46px; height: 46px; font-size: 14px; }
  .profile-head .who { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.3; }
  .profile-head .who small { display: block; font-weight: 500; color: var(--iit-text-muted); font-size: 12px; margin-top: 2px; font-family: 'Sora', sans-serif;}
  .profile-head .who .org-pill {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    font-size: 11px; background: var(--iit-elev); border: 1px solid var(--iit-purple);
    border-radius: 999px; padding: 3px 8px; font-weight: 600; color: var(--iit-purple-dark);
    font-family: 'Sora', sans-serif;
  }
  .profile-head .who .org-pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--iit-purple);
  }
  .profile-head .change {
    margin-left: auto; font-size: 11px;
    border: 1px solid var(--iit-purple); background: var(--iit-elev);
    border-radius: 999px; padding: 5px 10px; cursor: pointer;
    font-family: 'Unbounded', sans-serif; font-weight: 600; color: var(--iit-purple);
  }
  .profile-head .change:hover { background: var(--iit-purple); color: #fff; }
  .pm-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: 10px;
    text-decoration: none; color: var(--iit-text);
    font-size: 14px; font-weight: 500; cursor: pointer;
  }
  .pm-item:hover { background: var(--iit-purple-pale); color: var(--iit-purple-dark); }
  .pm-item .ic { width: 24px; height: 24px; color: var(--iit-purple); display: grid; place-items: center; }
  .pm-item .meta { margin-left: auto; font-size: 11px; color: var(--iit-text-muted); }
  .pm-divider { height: 1px; background: var(--iit-border); margin: 6px 4px; }
  .pm-foot {
    display: flex; justify-content: space-between; padding: 10px;
    color: var(--iit-text-muted); font-size: 11px;
  }

  /* ---------- Page ---------- */
  main { max-width: 1920px; margin: 0 auto; padding: clamp(14px, 4vw, 36px) clamp(14px, 4vw, 28px) 80px; }

  /* Tab nav for the per-tenant workspace (TenantDetail). Each tab is
     a button styled like the legacy nav-item top-row — purple-tinted
     active state, muted hover for the others. */
  .tenant-tabs { flex-wrap: wrap; }
  .tenant-tab {
    background: transparent; border: 0;
    color: var(--iit-text-muted);
    font-family: 'Unbounded', sans-serif;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.02em;
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  .tenant-tab i { font-size: 12px; opacity: 0.85; }
  .tenant-tab:hover {
    color: var(--iit-text);
    background: rgba(155,92,232,0.06);
  }
  .tenant-tab.active {
    color: #fff;
    border-bottom-color: var(--iit-purple);
  }

  .page-head {
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 32px; align-items: end; margin-bottom: 28px;
  }
  .eyebrow {
    font-family: 'Unbounded', sans-serif;
    font-size: 12px; color: var(--iit-purple);
    font-weight: 700;
    letter-spacing: 0.12em; margin-bottom: 12px; text-transform: uppercase;
  }
  .eyebrow .sep { color: var(--iit-border); margin: 0 8px; }
  h1.page-title {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(20px, 2.2vw, 28px); font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.2;
    margin: 0 0 6px;
  }
  h1.page-title .accent { color: var(--iit-purple); }
  .page-head .lede { color: var(--iit-text-muted); margin: 0; max-width: 56ch; font-size: clamp(13.5px, 1.2vw, 15px); }

  .head-meta {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--iit-border);
    border: 1px solid var(--iit-border);
    border-radius: var(--iit-radius); overflow: hidden;
  }
  .head-meta .stat { background: var(--iit-elev); padding: 14px 14px; }
  .head-meta .stat .lbl {
    font-family: 'Unbounded', sans-serif;
    font-size: 10px; color: var(--iit-text-muted);
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  }
  .head-meta .stat .val {
    font-family: 'Unbounded', sans-serif;
    font-size: 22px; font-weight: 800;
    margin-top: 6px; line-height: 1; color: var(--iit-text);
  }
  .head-meta .stat .val small { font-size: 12px; color: var(--iit-text-muted); margin-left: 2px; font-weight: 600; }
  .head-meta .stat .delta { font-size: 11px; color: var(--iit-green-dark); font-weight: 600; margin-top: 4px; }
  .head-meta .stat .delta.warn { color: #C77700; }
  .head-meta .stat .delta.muted { color: var(--iit-text-muted); }
  .head-meta .stat .delta.danger { color: #B3331F; }

  /* ---------- Cards ---------- */
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .card {
    position: relative;
    background: var(--iit-elev);
    border: 1px solid var(--iit-border);
    border-radius: var(--iit-radius-lg);
    padding: clamp(16px, 2.4vw, 24px);
    min-height: 340px;
    display: flex; flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: var(--iit-transition);
    text-decoration: none; color: inherit;
  }
  .card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--iit-purple), var(--iit-purple-light));
    opacity: 0; transition: var(--iit-transition);
  }
  .card:hover {
    border-color: var(--iit-purple-light);
    box-shadow: var(--iit-shadow-hover);
    transform: translateY(-4px);
  }
  .card:hover::before { opacity: 1; }

  .card-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 18px;
  }
  .card-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    background: var(--iit-purple-pale);
    color: var(--iit-purple);
    display: grid; place-items: center;
    font-size: 20px;
  }
  /* ⚠ Was --iit-purple-darker, which is declared nowhere. That made the whole linear-gradient
     declaration invalid, so this tile has been silently rendering .card's translucent --iit-elev instead
     of the dark accent it is named for, and border-color fell back too. --iit-purple-mid (#3D1478) is the
     darkest purple the palette actually declares. Caught by DesignTokenTests, not by eye. */
  .card.feature {
    background: linear-gradient(135deg, var(--iit-dark) 0%, var(--iit-purple-mid) 100%);
    color: #fff; border-color: var(--iit-purple-mid);
  }
  .card.feature h3 { color: #fff; }
  .card.feature p.lede { color: rgba(255,255,255,0.7); }
  .card.feature .metrics { border-top-color: rgba(255,255,255,0.12); }
  .card.feature .metric .l { color: rgba(255,255,255,0.55); }
  .card.feature .metric .v { color: #fff; }
  .card.feature .card-icon { background: var(--iit-purple); color: #fff; }

  .card.midnight {
    background: #14233a; color: #fff; border-color: #14233a;
  }
  .card.midnight h3 { color: #fff; }
  .card.midnight p.lede { color: rgba(255,255,255,0.7); }
  .card.midnight .metrics { border-top-color: rgba(255,255,255,0.12); }
  .card.midnight .metric .l { color: rgba(255,255,255,0.55); }
  .card.midnight .metric .v { color: #fff; }
  .card.midnight .card-icon { background: var(--iit-purple); color: #fff; }

  .card.cream { background: var(--iit-purple-pale); }
  .card.cream .card-icon { background: var(--iit-elev); color: var(--iit-purple); border: 1px solid var(--iit-border); }

  .card.green-card .card-icon { background: rgba(109,179,63,0.14); color: var(--iit-green-dark); }

  /* Tile-style home dashboard cards: centred title + a big centred
     icon underneath. No metrics, no top-right pill, no descriptive
     lede — just the section name and its glyph. */
  .card.card-tile {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.6vw, 20px);
    padding: clamp(20px, 2.2vw, 28px) clamp(16px, 2vw, 24px);
    min-height: 168px;
  }
  .card.card-tile h3 {
    margin: 0;
    text-align: center;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.2;
  }
  .card-bigicon {
    font-size: clamp(36px, 3.4vw, 48px);
    color: var(--iit-purple);
    line-height: 1;
    transition: var(--iit-transition);
  }
  .card.green-card .card-bigicon { color: var(--iit-green); }
  .card.card-tile:hover .card-bigicon { transform: scale(1.06); }

  .badge {
    font-family: 'Unbounded', sans-serif;
    font-size: 11px; padding: 5px 12px; border-radius: 999px;
    background: var(--iit-purple-pale); color: var(--iit-badge-ink);
    font-weight: 600; letter-spacing: 0.02em;
  }
  .badge.live { background: rgba(109,179,63,0.14); color: var(--iit-badge-live-ink); }
  /* ⚠ No colour of its own — the bullet takes the chip's ink. A second colour decision here is a second
     thing to measure, and the one it used (--iit-green) sat at 1.93:1 on the light card. */
  .badge.live::before { content: "● "; }
  .badge.warn { background: rgba(255,184,92,0.18); color: var(--iit-badge-warn-ink); }
  .badge.danger { background: rgba(179,51,31,0.14); color: var(--iit-badge-danger-ink); }
  .badge.purple { background: var(--iit-purple); color: #fff; }
  .badge.dark-on-light { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }

  .card h3 {
    font-family: 'Unbounded', sans-serif;
    font-size: 22px; font-weight: 700;
    margin: 0 0 6px;
  }
  .card p.lede {
    color: var(--iit-text-muted); font-size: 13.5px;
    margin: 0 0 16px; max-width: 38ch; line-height: 1.55;
  }

  .metrics {
    display: flex; gap: 18px;
    margin-top: auto; padding-top: 16px; padding-right: 52px;
    border-top: 1px solid var(--iit-border);
  }
  .metric .v {
    font-family: 'Unbounded', sans-serif;
    font-size: 20px; font-weight: 800;
    line-height: 1; color: var(--iit-text);
  }
  .metric .v small { font-size: 11px; color: var(--iit-text-muted); margin-left: 2px; font-weight: 600; }
  .metric .l {
    font-family: 'Unbounded', sans-serif;
    font-size: 10px; color: var(--iit-text-muted);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    margin-top: 6px;
  }

  .card .cta {
    position: absolute; bottom: 24px; right: 24px;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--iit-purple); color: #fff;
    display: grid; place-items: center;
    transition: var(--iit-transition);
    box-shadow: 0 6px 20px rgba(123,47,190,0.35);
  }
  .card:hover .cta { transform: translate(2px, -2px); background: var(--iit-purple-dark); }
  .card.feature .cta { background: var(--iit-purple-light); }
  .card.feature:hover .cta { background: var(--iit-elev); color: var(--iit-purple); }
  .card.midnight .cta { background: var(--iit-purple); }
  .card.midnight:hover .cta { background: var(--iit-elev); color: var(--iit-purple); }

  /* ============ Card-specific decorations ============ */
  .pipeline { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .pipe-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-family: 'Unbounded', sans-serif;
    color: var(--iit-text-muted);
  }
  .pipe-row .lbl { width: 64px; flex: none; color: var(--iit-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  .pipe-row .bar { flex: 1; height: 10px; background: var(--iit-purple-pale); border-radius: 3px; overflow: hidden; }
  .pipe-row .bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--iit-purple-light), var(--iit-purple));
  }
  .pipe-row.hot .bar > span { background: linear-gradient(90deg, var(--iit-green), var(--iit-green-dark)); }
  .pipe-row .num { width: 32px; text-align: right; font-weight: 700; color: var(--iit-text); }

  .reve { height: 56px; margin-bottom: 14px; position: relative; }
  .reve svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .reve .axis { stroke: rgba(255,255,255,0.12); stroke-dasharray: 2 3; }
  .reve .line { fill: none; stroke: var(--iit-purple-light); stroke-width: 2; }
  .reve .area { fill: var(--iit-purple-light); opacity: 0.18; }
  .reve .dot { fill: var(--iit-green); }

  .queue { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .ticket {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    font-size: 12px;
  }
  .ticket .id { font-family: 'Unbounded', sans-serif; color: rgba(255,255,255,0.55); width: 78px; flex: none; font-weight: 600; }
  .ticket .sub { color: #fff; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ticket .pri {
    font-family: 'Unbounded', sans-serif;
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  }
  .ticket .pri.p1 { background: #B3331F; color: #fff; }
  .ticket .pri.p2 { background: #C77700; color: #fff; }
  .ticket .pri.p3 { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }

  .kb-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
  .kb-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px;
    background: var(--iit-elev); border: 1px solid var(--iit-border);
    font-size: 13px;
  }
  .kb-row .glyph { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--iit-purple); }
  .kb-row .views { margin-left: auto; font-family: 'Unbounded', sans-serif; font-size: 11px; color: var(--iit-text-muted); font-weight: 600; }
  .kb-row .new {
    background: var(--iit-green); color: #fff;
    font-family: 'Unbounded', sans-serif; font-size: 9px;
    padding: 2px 6px; border-radius: 3px; letter-spacing: 0.06em; font-weight: 700;
  }

  .csat-row { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
  .ring {
    --p: 92;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: conic-gradient(var(--iit-purple) calc(var(--p) * 1%), var(--iit-purple-pale) 0);
    display: grid; place-items: center;
    flex: none; position: relative;
  }
  .ring::after { content: ""; position: absolute; inset: 6px; background: var(--iit-elev); border-radius: 50%; }
  .ring span {
    position: relative; z-index: 1;
    font-family: 'Unbounded', sans-serif;
    font-weight: 800; font-size: 18px;
    color: var(--iit-purple-dark);
  }
  .csat-meta { font-size: 12px; color: var(--iit-text-muted); }
  .csat-meta strong { display: block; font-family: 'Unbounded', sans-serif; font-size: 14px; color: var(--iit-text); margin-bottom: 2px; }
  .csat-meta .small { color: var(--iit-purple); font-family: 'Unbounded', sans-serif; font-size: 11px; margin-top: 4px; display: block; font-weight: 600; }

  .steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .step {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--iit-elev); border: 1px solid var(--iit-border);
    border-radius: 8px; font-size: 13px;
  }
  .step .check {
    width: 18px; height: 18px; flex: none;
    border-radius: 50%; border: 1.5px solid var(--iit-text-muted);
    display: grid; place-items: center;
    color: transparent; font-size: 10px;
  }
  .step.done .check { background: var(--iit-green); border-color: var(--iit-green); color: #fff; }
  .step.active .check { border-color: var(--iit-purple); background: var(--iit-purple-pale); }
  .step.active .check::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--iit-purple); }
  .step .who { margin-left: auto; font-family: 'Unbounded', sans-serif; font-size: 11px; color: var(--iit-text-muted); font-weight: 600; }
  .step.active .label { font-weight: 600; color: var(--iit-purple-dark); }

  /* footer strip */
  .strip {
    margin-top: 28px;
    background: var(--iit-elev); border: 1px solid var(--iit-border);
    border-radius: var(--iit-radius);
    padding: 16px 22px;
    display: flex; align-items: center; gap: 16px;
    color: var(--iit-text-muted); font-size: 13px;
  }
  .strip .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--iit-green);
    box-shadow: 0 0 0 4px rgba(109,179,63,0.18);
  }
  .strip strong { color: var(--iit-text); font-weight: 700; }
  .strip .right { margin-left: auto; display: flex; gap: 18px; }
  .strip a { color: var(--iit-text-muted); text-decoration: none; font-weight: 600; }
  .strip a:hover { color: var(--iit-purple); }

  .mission {
    margin-top: 14px; text-align: center;
    color: var(--iit-text-muted); font-size: 12px;
    font-family: 'Unbounded', sans-serif; letter-spacing: 0.04em; font-weight: 500;
  }
  .mission span { color: var(--iit-purple); font-weight: 700; }
/* ============================================================
   PORTAL CHROME — TABLET & MOBILE
   Hides the wide horizontal nav, replaces it with a hamburger
   drawer, and reflows page-head / card grids / tables for narrow
   viewports. Keeps the desktop chrome above 1100px untouched.
   ============================================================ */

.topbar-burger {
    display: none;
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: #fff;
    cursor: pointer;
    align-items: center; justify-content: center;
    flex: none;
    padding: 0;
}
.topbar-burger:hover { background: rgba(255,255,255,0.12); }
.topbar-burger i { font-size: 16px; }
body.nav-open .topbar-burger {
    background: var(--iit-purple);
    border-color: var(--iit-purple);
}

/* Tablet & below — the inline nav stays inline. The burger never
   appears; nav.primary just shrinks (font/padding via the rules
   below) and scrolls horizontally if it can't fit. The desktop
   layout is preserved at every viewport width. */
@media (max-width: 1100px) {
    .topbar-burger { display: none !important; }

    .topbar-inner { gap: clamp(6px, 1.2vw, 12px); padding: 0 clamp(10px, 1.6vw, 18px); }
    .search-wrap { width: clamp(160px, 22vw, 280px); }

    nav.primary {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    nav.primary::-webkit-scrollbar { display: none; }

    .nav-item { font-size: clamp(11.5px, 1.05vw, 14.5px); }
    .nav-label, .nav-label-button { padding-left: clamp(6px, 0.8vw, 14px); }
    .nav-chev { padding-right: clamp(6px, 0.8vw, 14px); }

    /* Page chrome scaling. */
    main { padding: clamp(18px, 3vw, 36px) clamp(14px, 3vw, 28px) 60px; }
    .page-head {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 24px;
        align-items: start;
    }
    .page-head .lede { max-width: 100%; }
    .head-meta { grid-template-columns: repeat(2, 1fr); }
    .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Phone — denser chrome but no transition. brand-tag and search
   drop off because they don't fit; nav still scrolls horizontally. */
@media (max-width: 720px) {
    .portal-topbar .topbar-inner { height: 60px; padding: 0 12px; gap: 6px; }
    .brand img { height: 88px; }
    .brand-tag { display: none; }
    .env-pill { display: none; }
    .search-wrap { display: none; }
    .icon-btn { width: 36px; height: 36px; }

    /* Profile collapses to just the avatar — keep the menu reachable. */
    .profile-btn { padding: 4px; gap: 0; height: 36px; width: 36px; justify-content: center; }
    .profile-btn .name,
    .profile-btn .role-tag,
    .profile-btn .chev { display: none; }
    .profile-menu {
        position: fixed;
        top: 64px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    main { padding: 22px 14px 56px; }
    .page-head { gap: 18px; margin-bottom: 18px; }
    h1.page-title { font-size: 26px; }
    .page-head .lede { font-size: 14px; }
    .eyebrow { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 8px; }

    .head-meta .stat { padding: 12px; }
    .head-meta .stat .val { font-size: 19px; }
    .head-meta .stat .lbl { font-size: 9.5px; }

    .grid { grid-template-columns: 1fr; gap: 14px; }
    .card { min-height: 0; padding: 20px; }
    .card .cta { bottom: 18px; right: 18px; width: 34px; height: 34px; }
    .card h3 { font-size: 20px; }
    .metrics { padding-right: 48px; gap: 14px; flex-wrap: wrap; }

    /* Footer strip stacks. */
    .strip { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
    .strip .right { margin-left: 0; flex-wrap: wrap; gap: 12px; }
}

/* Very narrow phones. */
@media (max-width: 420px) {
    h1.page-title { font-size: 22px; }
    .head-meta { grid-template-columns: 1fr; }
    .head-meta .stat { padding: 10px 12px; }
    .head-meta .stat .val { font-size: 18px; }
    .card h3 { font-size: 19px; }
    .card .cta { display: none; }
    .metrics { padding-right: 0; }
}

/* Touch devices — bigger tap targets in dropdown menus regardless of width. */
@media (hover: none) and (pointer: coarse) {
    .pm-item { padding: 12px; }
    .menu a { padding: 12px; }
    .icon-btn { min-width: 40px; min-height: 40px; }
    /* Prevent iOS from auto-zooming when focusing inputs. */
    input, select, textarea { font-size: 16px; }
}

/* Tables on narrow screens — wrap any .iit-table in a horizontal-scroll
   container by giving the table a sensible min-width. Pages already render
   tables inside a card with overflow:hidden; we override that below. */
@media (max-width: 720px) {
    .iit-table { min-width: 640px; }
    .card.iit-list,
    .iit-list-card,
    .card .iit-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   FLUID RESPONSIVE LAYER — additive rules that fire only below
   the 1100px desktop breakpoint, so the desktop look is preserved.
   Adds a tablet midpoint, wraps long flex rows, ensures tables
   stay scrollable, and clamps oversized fixed widths on forms.
   ============================================================ */

/* Tablet midpoint — between desktop (1100+) and the existing 820 stack point.
   Reduces side padding and shrinks the brand image so the topbar fits. */
@media (max-width: 1024px) {
    .topbar-inner { padding: 0 clamp(14px, 2vw, 22px); }
    .brand img { height: 88px; }
    .iit-card,
    .card { padding: clamp(16px, 2.4vw, 22px); }
    .head-meta { gap: 1px; }
}

/* Stat / metric rows wrap nicely instead of overflowing. */
@media (max-width: 820px) {
    .head-meta { flex-wrap: wrap; gap: clamp(6px, 1.4vw, 12px); }
    /* Allow narrow nav rows in the topbar to wrap to a second row at this width. */
    .portal-topbar .topbar-inner { flex-wrap: wrap; row-gap: 6px; }
}

/* Forms / dialog input groups: fixed min-widths can force horizontal scroll
   on phones. Reset within narrow viewports so flex rows shrink to fit. */
@media (max-width: 600px) {
    .field,
    .form-row,
    .input-group,
    .iit-form .field,
    .iit-form .form-row { min-width: 0; }
    .iit-form input,
    .iit-form select,
    .iit-form textarea { min-width: 0; max-width: 100%; }
}

/* Tables on narrow screens: belt-and-braces scroll wrapper. The earlier
   720px block handles .iit-table specifically; this catches generic tables
   inside cards / list panels by allowing the surrounding container to scroll
   horizontally instead of clipping. */
@media (max-width: 720px) {
    .iit-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .iit-list table,
    .card table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ============================================================
   LIGHT THEME — off-white page, purple translucent boxes
   ------------------------------------------------------------
   Loaded last so it overrides the dark tokens in site.css and
   the earlier rules in this file. Re-tints the portal body and
   content surfaces for a light background while preserving the
   "purpley transparent box" look on cards / panels / tables.

   Full light flip: page chrome, top nav bar and sign-in page are
   all re-tinted to light below. The only things kept dark are the
   accent cards (.card.feature / .card.midnight), which are meant
   to read as deliberate dark tiles among the light dashboard.
   ============================================================ */

[data-theme="light"] {
  /* Surfaces — translucent purple so boxes read as tinted glass on off-white */
  --iit-bg:          #F5F2FB;
  --iit-elev:        rgba(123, 47, 190, 0.055);
  --iit-elev-2:      rgba(123, 47, 190, 0.10);
  --iit-surface:     rgba(123, 47, 190, 0.04);

  /* Ink — dark text for a light background (‑‑iit-white left as #FFF on purpose:
     it is the label colour for purple buttons / pills and must stay white). */
  --iit-text:        #251B38;
  --iit-text-muted:  #6A6189;

  /* Focus ring for light. ⚠ The dark value (#C052FF) measured 2.96:1 on the light card, under the 3:1 that
     W 2.4.7 and 1.4.11 need; the brand purple measures 5.8:1 (ButtonTokenContrastTests). */
  --iit-focus:       #7B2FBE;

  /* Slightly stronger border so the boxes have a visible purple edge on light.
     ⚠ --iit-muted is deliberately absent from BOTH theme blocks. It was referenced six times and defined
     nowhere, so every `color: var(--iit-text-muted)` silently inherited its parent's ink instead of dimming;
     the references now use --iit-text-muted, which exists and flips per theme. */
  --iit-border:      rgba(123, 47, 190, 0.22);

  /* Chip ink for light. ⚠ The dark values in site.css are the base; these are the overrides, and every
     one of them is a MEASUREMENT rather than the previous hard-coded value — .warn (#B86B00), .danger
     (#B3331F) and .live (--iit-green-dark) each failed AA against their own light card. */
  --iit-badge-ink:        #5C1F9A;
  --iit-badge-live-ink:   #2A5F12;
  --iit-badge-warn-ink:   #8A4B00;
  --iit-badge-danger-ink: #99281A;

  /* Soft purple-tinted shadows instead of heavy black glows */
  --iit-shadow:       0 8px 24px rgba(76, 35, 130, 0.10), 0 0 0 1px rgba(123, 47, 190, 0.08);
  --iit-shadow-hover: 0 14px 40px rgba(76, 35, 130, 0.16), 0 0 0 1px rgba(123, 47, 190, 0.28);
}

/* Everything below is the light theme proper — gated on [data-theme="light"]
   (set on <html> before first paint) so the toggle can fall back to the
   original Circuit Atlas dark theme. Uses CSS nesting: each rule inside
   resolves to `[data-theme="light"] <selector>`. */
[data-theme="light"] {

/* Page background — off-white with a faint purple/cyan wash (kills the dark
   radial gradient defined earlier in this file and in site.css). */
body {
  background:
    radial-gradient(circle at 12% -8%, rgba(123, 47, 190, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 90% 110%, rgba(0, 229, 255, 0.05) 0%, transparent 45%),
    var(--iit-bg);
  color: var(--iit-text);
}

/* Default heading colour was near-white (site.css) — flip to dark ink.
   Headings on the dark accent cards keep their white colour because
   `.card.feature h3` / `.card.midnight h3` are higher-specificity rules. */
h1, h2, h3, h4, h5, h6 { color: var(--iit-text); }

/* Body links: purple instead of the dark-theme light-purple, no cyan glow.
   Topbar links set their own colour (inherit white) so they're unaffected. */
a { color: var(--iit-purple); }
a:hover { color: var(--iit-purple-dark); text-shadow: none; }

/* ---- Nav dropdowns overlaying the light page need an opaque light surface ---- */
.menu, .profile-menu, .search-results { background: #FBFAFE; }
.search-result strong { color: var(--iit-text); }
.search-result.active, .search-result:hover { color: var(--iit-purple-dark); }

/* ---- Queue / ticket rows used white-on-translucent-white (invisible on light) ---- */
.ticket { background: rgba(123, 47, 190, 0.05); border-color: var(--iit-border); }
.ticket .id  { color: var(--iit-text-muted); }
.ticket .sub { color: var(--iit-text); }
.ticket .pri.p3 { background: rgba(123, 47, 190, 0.12); color: var(--iit-text-muted); }

/* ---- Active TenantDetail tab was white text on a borderless tab ---- */
.tenant-tab.active { color: var(--iit-purple-dark); }

/* ---- Donut-ring hole should match the card, not show the gradient through ---- */
.ring::after { background: #FBF9FE; }

/* ============================================================
   TOP NAVIGATION BAR — light
   Frosted near-white bar with dark nav text, keeping the purple
   active state and the green status dots. The brand pill, avatar
   and role tag stay purple-on-white (already legible).
   ============================================================ */
.portal-topbar {
  background: rgba(251, 249, 254, 0.85);
  border-bottom: 1px solid var(--iit-border);
}
.topbar-clock {
  color: var(--iit-text-muted);
  background: rgba(123, 47, 190, 0.06);
  border-color: rgba(123, 47, 190, 0.12);
}
.nav-item { color: var(--iit-text-muted); }
.nav-item:hover { color: var(--iit-text); }
.nav-item:has(> .nav-label.active) { color: var(--iit-purple-dark); }
.env-pill { color: var(--iit-purple-dark); }
.search-wrap { color: var(--iit-text-muted); background: rgba(123, 47, 190, 0.05); }
.search-wrap:focus-within { background: rgba(123, 47, 190, 0.09); }
.search-icon { color: var(--iit-text-muted); }
.search-input { color: var(--iit-text); }
.search-wrap .kbd { color: var(--iit-text-muted); border-color: rgba(123, 47, 190, 0.20); }
.icon-btn {
  border-color: rgba(123, 47, 190, 0.18);
  background: rgba(123, 47, 190, 0.05);
  color: var(--iit-text-muted);
}
.icon-btn:hover { background: rgba(123, 47, 190, 0.10); color: var(--iit-text); }
.dot { border-color: #FBF9FE; }
.profile-btn {
  border-color: rgba(123, 47, 190, 0.18);
  background: rgba(123, 47, 190, 0.05);
  color: var(--iit-text);
}
.profile-btn:hover { background: rgba(123, 47, 190, 0.10); }
.topbar-burger {
  border-color: rgba(123, 47, 190, 0.18);
  background: rgba(123, 47, 190, 0.05);
  color: var(--iit-text);
}
.topbar-burger:hover { background: rgba(123, 47, 190, 0.10); }

} /* end [data-theme="light"] */

/* ============================================================
   IEQ UX standard, UX-6 (accessibility semantics and contrast)
   ============================================================ */

/* AP-12: a list row opens through a real link in its main cell. The link's box is stretched over the row, so
   the whole row stays one click target, and any other control in the row sits above it. */
.iit-table tbody tr.clickable { position: relative; }
.iit-table a.row-link { color: inherit; font-weight: inherit; text-decoration: none; }
.iit-table a.row-link::after { content: ""; position: absolute; inset: 0; }
.iit-table a.row-link:hover,
.iit-table a.row-link:focus-visible { text-decoration: underline; }
.iit-table tbody tr.clickable a:not(.row-link),
.iit-table tbody tr.clickable button,
.iit-table tbody tr.clickable input[type="checkbox"] { position: relative; z-index: 1; }
.iit-table tbody tr.clickable:focus-within { box-shadow: inset 0 0 0 3px var(--iit-focus, #C052FF); }

/* AP-18: AdminDialog. It sits under MudBlazor's own dialogs (z-index 1400), so a confirmation opened from
   inside one is never hidden behind it, and above the sticky top bar (1030). */
.admin-dialog-backdrop {
  position: fixed; inset: 0; z-index: 1350;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.5);
}
.admin-dialog-trap { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; }
.admin-dialog { width: 100%; cursor: default; }
.admin-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-dialog__title { margin: 0; }

/* AP-24: buttons take their colours from the shared ieq-ux.css tokens. ieq-button is the secondary action and
   ieq-button--danger the destructive one. The package has no primary token yet, so this one local rule is the
   primary: white on the brand purple, 7.0:1 in both themes, measured by ButtonTokenContrastTests. */
.ieq-button.admin-button--primary {
  background: var(--iit-purple);
  border-color: var(--iit-purple);
  color: var(--iit-white);
}
.ieq-button.admin-button--primary:hover {
  background: var(--iit-purple-dark);
  border-color: var(--iit-purple-dark);
  color: var(--iit-white);
}

/* AP-21: the search popup holds the listbox and one message line (no matches, searching, or IEQ-SEARCH-001). */
.search-results .search-result-empty { margin: 0; }