:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-soft: #edf1f6;
  --sidebar: #ffffff;
  --sidebar-text: #172033;
  --sidebar-muted: #667085;
  --sidebar-panel: #f8fafc;
  --sidebar-line: #dfe3ea;
  --sidebar-hover: #eef2f7;
  --line: #dfe3ea;
  --line-strong: #c4cad4;
  --text: #172033;
  --muted: #667085;
  --control: #ffffff;
  --chip: #eef2f7;
  --chip-text: #344054;
  --hover: #f8fafc;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --green: #0f766e;
  --amber: #b45309;
  --red: #dc2626;
  --shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
  --primary: var(--blue);
  --accent: var(--blue);
  --card: var(--panel);
}

:root[data-theme="dark"] {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel-soft: #111827;
  --sidebar: #020617;
  --sidebar-text: #ffffff;
  --sidebar-muted: #bac4d1;
  --sidebar-panel: rgba(148, 163, 184, 0.09);
  --sidebar-line: rgba(148, 163, 184, 0.18);
  --sidebar-hover: rgba(148, 163, 184, 0.14);
  --line: #334155;
  --line-strong: #475569;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --control: #0f172a;
  --chip: #334155;
  --chip-text: #e2e8f0;
  --hover: #182235;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  --primary: var(--blue);
  --accent: #60a5fa;
  --card: var(--panel);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  color: var(--text);
  background: var(--bg);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr) 320px;
}

body:has(.shortcut-rail.collapsed) {
  grid-template-columns: 300px minmax(0, 1fr) 58px;
}

body.sidebar-collapsed:has(.shortcut-rail.collapsed) {
  grid-template-columns: 64px minmax(0, 1fr) 58px;
}

body.auth-locked {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-soft: #edf2f7;
  --line: #d7dee8;
  --line-strong: #b8c3d1;
  --text: #111c2f;
  --muted: #607087;
  --control: #ffffff;
  --chip: #e9eef5;
  --chip-text: #344054;
  --hover: #f8fafc;
  --shadow: 0 22px 60px rgba(10, 25, 49, 0.14);
  color-scheme: light;
  display: block;
  min-width: 0;
  overflow-x: hidden;
}

body.auth-locked .sidebar,
body.auth-locked .app-shell,
body.auth-locked .shortcut-rail {
  display: none;
}

body.auth-locked dialog:not(.login-popup) {
  display: none;
}

.login-screen {
  min-height: 100vh;
  display: none;
  background: var(--bg);
}

body.auth-locked .login-screen {
  display: block;
}

.session-loading-screen {
  display: none;
}

body.auth-pending .login-screen,
body.auth-pending .sidebar,
body.auth-pending .app-shell,
body.auth-pending .shortcut-rail {
  display: none;
}

body.auth-pending .session-loading-screen {
  display: flex;
  min-height: 100dvh;
  padding: 32px 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #0b1020;
  color: #f4f7fb;
  text-align: center;
}

.session-loading-screen h1 {
  margin: 0;
  font-size: 22px;
}

.session-loading-screen p {
  margin: 0;
  font-size: 14px;
  color: #b8c8df;
}

.session-loading-screen progress {
  width: 180px;
  height: 4px;
  accent-color: #9d78d8;
}

.session-loading-screen[aria-busy="false"] progress {
  visibility: hidden;
}

.session-loading-screen button {
  min-height: 36px;
  padding: 6px 18px;
  font-size: 14px;
}

.sentinel-site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  min-height: 72px;
  padding: 12px max(24px, calc((100vw - 1240px) / 2));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  color: #ffffff;
  background: rgba(5, 12, 24, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(18px);
}

.sentinel-site-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.sentinel-site-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.sentinel-site-brand span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.sentinel-site-brand strong {
  font-size: 1rem;
  line-height: 1.1;
}

.sentinel-site-brand small {
  color: #aab8ca;
  font-size: 0.82rem;
  line-height: 1.2;
}

.sentinel-site-nav {
  display: flex;
  justify-content: center;
  gap: 26px;
}

.sentinel-site-nav a,
.sentinel-site-signin {
  color: #dfe8f3;
  font-size: 0.92rem;
  font-weight: 750;
  text-decoration: none;
}

.sentinel-site-nav a:hover,
.sentinel-site-nav a:focus-visible,
.sentinel-site-signin:hover,
.sentinel-site-signin:focus-visible {
  color: #ffffff;
}

.sentinel-site-signin {
  min-height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  font-family: inherit;
  background: transparent;
  cursor: pointer;
}

.sentinel-marketing-site {
  min-width: 0;
}

.sentinel-hero {
  position: relative;
  min-height: 78svh;
  padding: 118px max(24px, calc((100vw - 1240px) / 2)) 56px;
  display: flex;
  align-items: center;
  color: #ffffff;
  background-color: #050c18;
  background-image: url("client/assets/marketing/sentinel-desk-board-live.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
}

.sentinel-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: rgba(3, 9, 18, 0.76);
}

.sentinel-hero-content {
  width: min(720px, 100%);
  display: grid;
  gap: 22px;
}

.sentinel-capture-note {
  position: absolute;
  right: max(24px, calc((100vw - 1240px) / 2));
  bottom: 24px;
  margin: 0;
  color: #c6d2df;
  font-size: 0.75rem;
  line-height: 1.4;
}

.sentinel-kicker,
.sentinel-section-label,
.login-form-eyebrow {
  margin: 0;
  color: #2f7df4;
  font-size: 0.84rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: uppercase;
}

.sentinel-hero .sentinel-kicker {
  color: #78e2b7;
}

.sentinel-hero h1 {
  max-width: 620px;
  margin: 0;
  font-size: 4.75rem;
  line-height: 0.98;
  letter-spacing: 0;
}

.sentinel-hero-lede {
  max-width: 620px;
  margin: 0;
  color: #d4deea;
  font-size: 1.15rem;
  line-height: 1.65;
}

.sentinel-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sentinel-cta {
  min-height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.sentinel-cta.primary {
  color: #ffffff;
  background: #2563eb;
  border-color: #2563eb;
}

.sentinel-cta.primary:hover,
.sentinel-cta.primary:focus-visible {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.sentinel-cta.secondary {
  color: #ffffff;
  background: rgba(5, 12, 24, 0.62);
  border-color: rgba(255, 255, 255, 0.45);
}

.sentinel-suite-rail {
  max-width: 620px;
  margin-top: 14px;
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.sentinel-suite-rail span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: #ecf2f8;
  font-size: 0.86rem;
  font-weight: 760;
}

.sentinel-suite-rail b {
  color: #78e2b7;
  font-size: 0.76rem;
}

.sentinel-identity-band {
  padding: 92px max(24px, calc((100vw - 1240px) / 2));
  background: #f4f7fb;
}

.sentinel-identity-inner {
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  gap: 88px;
  align-items: center;
}

.login-popup {
  position: fixed;
  inset: 0;
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100svh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: #111c2f;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 32px 90px rgba(3, 9, 18, 0.42);
}

.login-popup:not(:popover-open) {
  display: none;
}

.login-popup:popover-open {
  display: block;
}

.login-popup::backdrop {
  background: rgba(3, 9, 18, 0.76);
  backdrop-filter: blur(8px);
}

.login-popup-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #42546c;
  background: #edf2f7;
  border: 1px solid #d3dce8;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.login-popup-close:hover,
.login-popup-close:focus-visible {
  color: #111c2f;
  background: #e1e8f0;
}

.login-card {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px;
  display: grid;
  gap: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.login-card.signup-mode {
  width: 100%;
}

.login-form-heading {
  padding-right: 42px;
  padding-bottom: 4px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.login-emblem {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #cad4e2;
  border-radius: 8px;
  background: #0d1728;
}

.login-emblem img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.login-form-heading h2 {
  margin: 2px 0 0;
  color: #111c2f;
  font-size: 1.65rem;
  line-height: 1.15;
}

.login-form-heading #loginBrandSubtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.login-field {
  display: grid;
  gap: 7px;
  color: #26364c;
  font-size: 0.9rem;
  font-weight: 780;
}

.login-field input {
  min-height: 46px;
  border-color: #cbd5e1;
  background: #ffffff;
}

.login-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
}

.login-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.login-card.signup-mode .login-actions {
  grid-template-columns: 1fr;
}

.login-card.signup-mode .login-actions .primary-button {
  width: 100%;
}

.login-secondary-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.login-card .dialog-note {
  margin: -2px 0 0;
  color: #607087;
  font-size: 0.86rem;
  line-height: 1.4;
}

.login-card .login-actions button {
  min-height: 42px;
}

.login-access-copy {
  max-width: 680px;
  display: grid;
  gap: 18px;
}

.login-access-copy h2,
.sentinel-section-intro h2,
.sentinel-product-copy h2,
.sentinel-report-copy h2,
.sentinel-trust-band h2 {
  margin: 0;
  color: #111c2f;
  font-size: 2.75rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.login-access-copy > p:not(.sentinel-section-label),
.sentinel-section-intro > p:not(.sentinel-section-label),
.sentinel-product-copy > p:not(.sentinel-section-label),
.sentinel-report-copy > p:not(.sentinel-section-label) {
  margin: 0;
  color: #607087;
  font-size: 1rem;
  line-height: 1.7;
}

.login-proof-list {
  margin: 0;
  display: grid;
  border-top: 1px solid #ced7e3;
}

.login-proof-list div {
  padding: 15px 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 16px;
  border-bottom: 1px solid #dbe2eb;
}

.login-proof-list dt {
  color: #111c2f;
  font-size: 0.94rem;
  font-weight: 850;
}

.login-proof-list dd {
  margin: 0;
  color: #607087;
  font-size: 0.94rem;
  line-height: 1.45;
}

.signup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.signup-fields .span-2 {
  grid-column: 1 / -1;
}

.signup-intro {
  display: grid;
  gap: 4px;
  padding-bottom: 2px;
}

.signup-intro strong {
  font-size: 1rem;
}

.signup-intro span,
.signup-public-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.sentinel-platform-story {
  scroll-margin-top: 72px;
  padding: 104px max(24px, calc((100vw - 1240px) / 2));
  background: #ffffff;
}

.sentinel-section-intro {
  max-width: 860px;
  display: grid;
  gap: 18px;
}

.sentinel-market-map {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.sentinel-market-map article {
  min-width: 0;
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid #d4dde8;
  border-radius: 8px;
  background: #f7f9fc;
}

.sentinel-market-map article > span {
  color: #607087;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.35;
  text-transform: uppercase;
}

.sentinel-market-map article > strong {
  color: #111c2f;
  font-size: 1.02rem;
  line-height: 1.35;
}

.sentinel-market-map article > p {
  margin: 0;
  color: #607087;
  font-size: 0.9rem;
  line-height: 1.55;
}

.sentinel-market-map .sentinel-market-map-accent {
  color: #ffffff;
  background: #0d213d;
  border-color: #1f5fb8;
}

.sentinel-market-map .sentinel-market-map-accent > span {
  color: #78e2b7;
}

.sentinel-market-map .sentinel-market-map-accent > strong {
  color: #ffffff;
}

.sentinel-market-map .sentinel-market-map-accent > p {
  color: #c5d2e2;
}

.sentinel-flow {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #bfc9d7;
}

.sentinel-flow div {
  min-width: 0;
  padding: 22px 18px 6px 0;
  display: grid;
  gap: 9px;
}

.sentinel-flow span {
  color: #2563eb;
  font-size: 0.8rem;
  font-weight: 850;
}

.sentinel-flow strong {
  color: #111c2f;
  font-size: 1rem;
}

.sentinel-flow small {
  color: #607087;
  font-size: 0.86rem;
  line-height: 1.5;
}

.sentinel-product-band {
  scroll-margin-top: 72px;
  min-height: 620px;
  padding: 92px max(24px, calc((100vw - 1240px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(480px, 1.18fr);
  gap: 78px;
  align-items: center;
}

.sentinel-product-proof,
.sentinel-intelligence-proof,
.sentinel-report-proof,
.sentinel-record-band {
  scroll-margin-top: 72px;
  padding: 104px max(24px, calc((100vw - 1240px) / 2));
}

.sentinel-desk-proof {
  background: #eef3f8;
}

.sentinel-product-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 72px;
  align-items: start;
}

.sentinel-product-detail {
  padding-top: 22px;
}

.sentinel-screen {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #263c59;
  border-radius: 8px;
  background: #071221;
  box-shadow: 0 26px 64px rgba(13, 31, 53, 0.2);
}

.sentinel-screen > img {
  width: 100%;
  height: auto;
  display: block;
  background: #061020;
}

.sentinel-screen > figcaption {
  min-height: 56px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: #9fb0c5;
  background: #0d192a;
  border-top: 1px solid #263c59;
  font-size: 0.8rem;
  line-height: 1.45;
}

.sentinel-screen > figcaption strong {
  color: #ffffff;
  font-size: 0.86rem;
}

.sentinel-screen-wide {
  margin-top: 62px;
}

.sentinel-screen-wide > img {
  max-height: 720px;
  object-fit: cover;
  object-position: center top;
}

.sentinel-intelligence-proof {
  color: #ffffff;
  background: #0d1828;
}

.sentinel-intelligence-proof .sentinel-section-label {
  color: #78e2b7;
}

.sentinel-intelligence-proof .sentinel-section-intro h2 {
  color: #ffffff;
}

.sentinel-intelligence-proof .sentinel-section-intro > p:not(.sentinel-section-label) {
  color: #b9c7d7;
}

.sentinel-screen-grid {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.sentinel-screen-grid .sentinel-screen > img {
  aspect-ratio: 2 / 1;
  object-fit: contain;
  object-position: center;
}

.sentinel-intelligence-points {
  margin: 54px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.sentinel-intelligence-points > div {
  padding-top: 18px;
  border-top: 2px solid #2f7df4;
}

.sentinel-intelligence-points > div:nth-child(2) {
  border-top-color: #38b985;
}

.sentinel-intelligence-points > div:nth-child(3) {
  border-top-color: #f1b44c;
}

.sentinel-intelligence-points dt {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 850;
}

.sentinel-intelligence-points dd {
  margin: 10px 0 0;
  color: #aebdce;
  font-size: 0.9rem;
  line-height: 1.6;
}

.sentinel-report-proof {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(560px, 1.32fr);
  gap: 64px;
  align-items: center;
  background: #ffffff;
}

.sentinel-report-copy {
  display: grid;
  gap: 18px;
}

.sentinel-report-copy ul,
.sentinel-product-copy ul {
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.sentinel-report-copy li,
.sentinel-product-copy li {
  position: relative;
  padding-left: 22px;
  color: #40536b;
  font-size: 0.96rem;
  line-height: 1.55;
}

.sentinel-report-copy li::before,
.sentinel-product-copy li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: #2f7df4;
}

.sentinel-report-screen > img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
}

.sentinel-desk-band {
  background: #eef3f8;
}

.sentinel-assistant-band {
  grid-template-columns: minmax(480px, 1.18fr) minmax(0, 0.82fr);
  background: #edf7f3;
}

.patch-sentinel-band {
  color: #ffffff;
  background: #0b1524;
}

.patch-sentinel-band .sentinel-section-label {
  color: #78e2b7;
}

.patch-sentinel-band .sentinel-product-copy h2 {
  color: #ffffff;
}

.patch-sentinel-band .sentinel-product-copy > p:not(.sentinel-section-label),
.patch-sentinel-band .sentinel-product-copy li {
  color: #c6d2df;
}

.sentinel-product-copy {
  display: grid;
  gap: 18px;
}

.sentinel-product-copy ul {
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.sentinel-product-copy li {
  position: relative;
  padding-left: 22px;
  color: #40536b;
  font-size: 0.96rem;
  line-height: 1.55;
}

.sentinel-product-copy li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: #2f7df4;
}

.patch-sentinel-band .sentinel-product-copy li::before {
  background: #38b985;
}

.sentinel-assistant-screen > img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.sentinel-patch-screen {
  border-color: #304966;
}

.sentinel-patch-screen > img {
  aspect-ratio: 4.5 / 1;
  object-fit: contain;
  object-position: center;
}

.sentinel-patch-screen > figcaption {
  background: #07101d;
}

.sentinel-product-image {
  min-width: 0;
}

.sentinel-product-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(13, 31, 53, 0.2);
}

.sentinel-record-band {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
  gap: 82px;
  background: #f5f8fb;
}

.sentinel-record-steps {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
  border-top: 1px solid #bdc9d7;
}

.sentinel-record-steps li {
  padding: 18px 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  border-bottom: 1px solid #d5dee8;
}

.sentinel-record-steps span {
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.sentinel-record-steps strong {
  color: #26364c;
  font-size: 0.96rem;
  line-height: 1.5;
}

.sentinel-desk-preview {
  min-width: 0;
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #293c57;
  border-radius: 8px;
  color: #dbe8f7;
  background: #071221;
  box-shadow: 0 28px 70px rgba(13, 31, 53, 0.22);
}

.preview-sidebar {
  padding: 15px 11px;
  display: grid;
  align-content: start;
  gap: 14px;
  background: #0d1b2f;
  border-right: 1px solid #243750;
}

.preview-logo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #ffffff;
  background: #2563eb;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
}

.preview-sidebar i {
  width: 34px;
  height: 7px;
  display: block;
  border-radius: 4px;
  background: #2b3c54;
}

.preview-workspace {
  min-width: 0;
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
}

.preview-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 36px;
  gap: 10px;
  align-items: center;
}

.preview-topline b {
  font-size: 0.86rem;
}

.preview-topline span {
  height: 22px;
  border: 1px solid #30445f;
  border-radius: 5px;
  background: #111f33;
}

.preview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.preview-metrics i {
  height: 38px;
  border: 1px solid #2b405b;
  border-radius: 5px;
  background: #13233a;
}

.preview-board {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.preview-board > div {
  min-width: 0;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid #263b56;
  border-radius: 5px;
  background: #0b1728;
}

.preview-board b {
  color: #8da4bf;
  font-size: 0.625rem;
  text-transform: uppercase;
}

.preview-board span {
  height: 52px;
  border: 1px solid #34506f;
  border-radius: 5px;
  background: #172a43;
  box-shadow: inset 3px 0 0 #2f7df4;
}

.preview-board > div:nth-child(3) span {
  box-shadow: inset 3px 0 0 #a855f7;
}

.preview-board > div:nth-child(4) span {
  box-shadow: inset 3px 0 0 #31b981;
}

.sentinel-trust-band {
  padding: 96px max(24px, calc((100vw - 1240px) / 2));
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: 76px;
  color: #ffffff;
  background: #111c2c;
}

.sentinel-trust-band .sentinel-section-label {
  color: #78e2b7;
}

.sentinel-trust-band h2 {
  margin-top: 14px;
  color: #ffffff;
}

.sentinel-trust-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.sentinel-trust-points article {
  padding-top: 16px;
  border-top: 2px solid #2f7df4;
}

.sentinel-trust-points article:nth-child(2) {
  border-top-color: #38b985;
}

.sentinel-trust-points article:nth-child(3) {
  border-top-color: #a855f7;
}

.sentinel-trust-points strong {
  font-size: 1rem;
}

.sentinel-trust-points p {
  margin: 10px 0 0;
  color: #aebdce;
  font-size: 0.92rem;
  line-height: 1.6;
}

.sentinel-site-footer {
  min-height: 116px;
  padding: 26px max(24px, calc((100vw - 1240px) / 2));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  color: #ffffff;
  background: #050c18;
}

.sentinel-site-footer p {
  margin: 0;
  color: #91a2b7;
  font-size: 0.9rem;
  text-align: center;
}

.sentinel-site-footer > button:last-child {
  color: #ffffff;
  padding: 8px 0;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  background: transparent;
  border: 0;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .sentinel-site-nav {
    display: none;
  }

  .sentinel-site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sentinel-hero h1 {
    font-size: 4rem;
  }

  .sentinel-identity-inner {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    gap: 48px;
  }

  .sentinel-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sentinel-market-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sentinel-product-heading {
    gap: 44px;
  }

  .sentinel-report-proof {
    grid-template-columns: minmax(280px, 0.76fr) minmax(500px, 1.24fr);
    gap: 42px;
  }

  .sentinel-record-band {
    gap: 52px;
  }

  .sentinel-product-band,
  .sentinel-assistant-band {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1.15fr);
    gap: 44px;
  }

  .sentinel-assistant-band {
    grid-template-columns: minmax(420px, 1.15fr) minmax(0, 1fr);
  }

  .sentinel-trust-band {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (max-width: 820px) {
  .sentinel-hero {
    min-height: calc(100svh - 40px);
    padding-top: 124px;
    background-position: 58% top;
  }

  .sentinel-hero::before {
    background: rgba(3, 9, 18, 0.48);
  }

  .sentinel-hero h1 {
    max-width: 560px;
    font-size: 3.45rem;
  }

  .sentinel-identity-inner {
    grid-template-columns: 1fr;
  }

  .login-card {
    max-width: 620px;
  }

  .login-access-copy {
    max-width: 700px;
  }

  .sentinel-product-band,
  .sentinel-assistant-band {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .sentinel-product-heading,
  .sentinel-report-proof,
  .sentinel-record-band {
    grid-template-columns: 1fr;
  }

  .sentinel-product-heading,
  .sentinel-report-proof,
  .sentinel-record-band {
    gap: 42px;
  }

  .sentinel-product-detail {
    padding-top: 0;
  }

  .sentinel-screen-grid,
  .sentinel-intelligence-points {
    grid-template-columns: 1fr;
  }

  .sentinel-assistant-band .sentinel-product-image {
    order: 2;
  }

  .sentinel-assistant-band .sentinel-product-copy {
    order: 1;
  }

  .sentinel-product-image,
  .sentinel-desk-preview,
  .sentinel-screen {
    width: min(680px, 100%);
  }

  .sentinel-report-screen,
  .sentinel-screen-wide {
    width: 100%;
  }

  .sentinel-trust-points {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .sentinel-site-header {
    min-height: 64px;
    padding: 9px 16px;
  }

  .sentinel-site-brand img {
    width: 38px;
    height: 38px;
  }

  .sentinel-site-brand small {
    display: none;
  }

  .sentinel-site-signin {
    min-height: 36px;
    padding: 0 13px;
  }

  .sentinel-hero {
    min-height: calc(100svh - 32px);
    padding: 112px 18px 66px;
    align-items: flex-end;
    background-position: 58% top;
  }

  .sentinel-capture-note {
    display: none;
  }

  .sentinel-hero h1 {
    font-size: 2.75rem;
  }

  .sentinel-hero-lede {
    font-size: 1rem;
    line-height: 1.55;
  }

  .sentinel-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sentinel-suite-rail {
    grid-template-columns: 1fr;
  }

  .sentinel-identity-band,
  .sentinel-platform-story,
  .sentinel-product-band,
  .sentinel-product-proof,
  .sentinel-intelligence-proof,
  .sentinel-report-proof,
  .sentinel-record-band,
  .sentinel-trust-band {
    padding: 70px 18px;
  }

  .sentinel-market-map {
    grid-template-columns: 1fr;
  }

  .login-popup {
    width: calc(100vw - 24px);
    max-height: calc(100svh - 24px);
  }

  .login-card {
    padding: 20px;
  }

  .login-form-heading {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .login-emblem {
    width: 42px;
    height: 42px;
  }

  .login-emblem img {
    width: 35px;
    height: 35px;
  }

  .login-actions {
    grid-template-columns: 1fr;
  }

  .login-actions button {
    width: 100%;
  }

  .login-secondary-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .login-access-copy h2,
  .sentinel-section-intro h2,
  .sentinel-product-copy h2,
  .sentinel-report-copy h2,
  .sentinel-trust-band h2 {
    font-size: 2.15rem;
  }

  .sentinel-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sentinel-screen > figcaption {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .sentinel-record-steps li {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .sentinel-desk-preview {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .preview-sidebar {
    padding: 10px 6px;
  }

  .preview-logo,
  .preview-sidebar i {
    width: 28px;
  }

  .preview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sentinel-site-footer {
    padding: 26px 18px;
    grid-template-columns: 1fr auto;
  }

  .sentinel-site-footer p {
    display: none;
  }
}

.form-error {
  color: var(--red);
  font-weight: 800;
}

.guest-support-ticket-panel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.guest-support-session { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.guest-support-session > div:first-child { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.guest-support-session span { color: var(--muted); font-size: 12px; }
.guest-support-code { font-family: Consolas, monospace; font-size: 18px; }

:root[data-theme="dark"] body {
  color-scheme: dark;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button,
input,
select,
textarea,
summary,
[tabindex] {
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}

:where(button, input, select, textarea, summary, a, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details:not(.signal-card) > summary {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

details:not(.signal-card) > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}

details[open]:not(.signal-card) > summary::before {
  transform: rotate(45deg) translateY(-1px);
}

.sidebar {
  min-height: 100vh;
  position: relative;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
  color: var(--sidebar-text);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.sidebar-collapsed .sidebar {
  padding: 8px;
  align-items: center;
  gap: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.sidebar-collapsed .sidebar > .brand,
body.sidebar-collapsed .sidebar > .auth-panel,
body.sidebar-collapsed .sidebar > .page-nav,
body.sidebar-collapsed .sidebar > .collapsible-panel,
body.sidebar-collapsed .sidebar > .compact {
  display: none;
}

.sidebar-collapse-button {
  margin-left: auto;
}

.rail-toggle-button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--sidebar-line);
  border-radius: 8px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--sidebar-panel);
  color: var(--sidebar-text);
}

.rail-toggle-button:hover {
  background: var(--sidebar-hover);
}

.compact-dock {
  display: none;
}

body.sidebar-collapsed .compact-dock {
  width: 100%;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.compact-dock-button {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--sidebar-line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--sidebar-panel);
  color: var(--sidebar-text);
}

.compact-dock-button:hover,
.compact-dock-button.active {
  background: var(--sidebar-hover);
  color: var(--blue);
}

.compact-dock-button:disabled {
  opacity: 0.45;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: block;
  color: currentColor;
  background-color: currentColor;
  -webkit-mask: var(--nav-symbol) center / contain no-repeat;
  mask: var(--nav-symbol) center / contain no-repeat;
}

.compact-dock-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Pinned Lucide assets keep navigation symbols consistent without a runtime dependency. */
.icon-dashboard { --nav-symbol: url("./client/assets/icons/lucide/layout-dashboard.svg"); }
.icon-board { --nav-symbol: url("./client/assets/icons/lucide/columns-3.svg"); }
.icon-backlog { --nav-symbol: url("./client/assets/icons/lucide/inbox.svg"); }
.icon-list { --nav-symbol: url("./client/assets/icons/lucide/list.svg"); }
.icon-calendar { --nav-symbol: url("./client/assets/icons/lucide/calendar-days.svg"); }
.icon-gantt { --nav-symbol: url("./client/assets/icons/lucide/chart-no-axes-gantt.svg"); }
.icon-tree { --nav-symbol: url("./client/assets/icons/lucide/git-branch.svg"); }
.icon-milestones { --nav-symbol: url("./client/assets/icons/lucide/flag.svg"); }
.icon-workload { --nav-symbol: url("./client/assets/icons/lucide/gauge.svg"); }
.icon-timesheets { --nav-symbol: url("./client/assets/icons/lucide/clock-3.svg"); }
.icon-billing { --nav-symbol: url("./client/assets/icons/lucide/receipt.svg"); }
.icon-templates { --nav-symbol: url("./client/assets/icons/lucide/files.svg"); }
.icon-reports { --nav-symbol: url("./client/assets/icons/lucide/file-chart-column.svg"); }
.icon-admin { --nav-symbol: url("./client/assets/icons/lucide/sliders-horizontal.svg"); }
.icon-platform { --nav-symbol: url("./client/assets/icons/lucide/network.svg"); }
.icon-raid { --nav-symbol: url("./client/assets/icons/lucide/triangle-alert.svg"); }
.icon-automation { --nav-symbol: url("./client/assets/icons/lucide/workflow.svg"); }
.icon-portfolio { --nav-symbol: url("./client/assets/icons/lucide/briefcase-business.svg"); }
.icon-metrics { --nav-symbol: url("./client/assets/icons/lucide/chart-no-axes-combined.svg"); }
.icon-archive { --nav-symbol: url("./client/assets/icons/lucide/archive.svg"); }
.icon-audit { --nav-symbol: url("./client/assets/icons/lucide/history.svg"); }
.icon-projects { --nav-symbol: url("./client/assets/icons/lucide/folder-open.svg"); }
.icon-users { --nav-symbol: url("./client/assets/icons/lucide/users-round.svg"); }
.icon-theme { --nav-symbol: url("./client/assets/icons/lucide/moon.svg"); }
.icon-workspace { --nav-symbol: url("./client/assets/icons/lucide/panels-top-left.svg"); }
.icon-settings { --nav-symbol: url("./client/assets/icons/lucide/settings.svg"); }
.icon-integrations { --nav-symbol: url("./client/assets/icons/lucide/plug.svg"); }
.icon-account { --nav-symbol: url("./client/assets/icons/lucide/user-round.svg"); }
.icon-clients { --nav-symbol: url("./client/assets/icons/lucide/building-2.svg"); }
.icon-collapse-left { --nav-symbol: url("./client/assets/icons/lucide/chevron-left.svg"); }
.icon-expand-right { --nav-symbol: url("./client/assets/icons/lucide/chevron-right.svg"); }
.icon-collapse-right { --nav-symbol: url("./client/assets/icons/lucide/chevron-right.svg"); }
.icon-security { --nav-symbol: url("./client/assets/icons/lucide/shield-check.svg"); }
.icon-close { --nav-symbol: url("./client/assets/icons/lucide/x.svg"); }

.icon-assistant {
  background: url("./client/assets/sentinel-assistant-desktop-icon.png") center / auto 135% no-repeat;
  -webkit-mask: none;
  mask: none;
  filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.34));
}

.sidebar-flyout {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 72px;
  width: min(320px, calc(100vw - 96px));
  max-height: calc(100vh - 24px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 12px;
  overflow: auto;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

.sidebar-flyout-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-flyout-heading h2 {
  margin: 0;
  font-size: 1rem;
}

.sidebar-flyout-content {
  display: grid;
  gap: 8px;
}

.flyout-row {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  background: var(--control);
  color: var(--text);
  text-align: left;
}

.flyout-row.active {
  border-color: rgba(37, 99, 235, 0.5);
  background: rgba(37, 99, 235, 0.1);
}

.flyout-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
}

.flyout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.brand h1,
.brand p,
.panel h2,
.topbar h2,
.eyebrow {
  margin: 0;
}

.brand h1 {
  font-size: 1.15rem;
}

.brand p,
.eyebrow {
  color: var(--muted);
  font-size: 0.85rem;
}

.sidebar .brand p {
  color: var(--sidebar-muted);
}

.auth-panel {
  border: 1px solid var(--sidebar-line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  background: var(--sidebar-panel);
}

.auth-user-summary {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-width: 0;
}

.auth-user-summary > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.auth-panel span:not(.avatar),
.auth-panel small {
  display: block;
  color: var(--sidebar-muted);
  font-size: 0.74rem;
  font-weight: 700;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-user-summary .avatar {
  color: white;
  display: grid;
  line-height: 1;
  place-items: center;
  text-align: center;
}

.auth-panel strong {
  display: -webkit-box;
  margin: 2px 0;
  color: var(--sidebar-text);
  line-height: 1.08;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.auth-panel-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.auth-panel-actions .secondary-button {
  min-height: 36px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel {
  border: 1px solid var(--sidebar-line);
  border-radius: 8px;
  padding: 14px;
  background: var(--sidebar-panel);
}

#programsPanel,
#projectsPanel,
#sidebarMilestonesPanel {
  --sidebar-entity-accent: var(--blue);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sidebar-entity-accent) 12%, transparent), transparent 60%),
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--sidebar-entity-accent) 8%, transparent), transparent 34%),
    var(--sidebar-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 30px rgba(2, 6, 23, 0.12);
}

#programsPanel {
  --sidebar-entity-accent: #a855f7;
}

#projectsPanel {
  --sidebar-entity-accent: var(--blue);
}

#sidebarMilestonesPanel {
  --sidebar-entity-accent: var(--green);
}

#programsPanel .section-toggle span:last-child,
#projectsPanel .section-toggle span:last-child,
#sidebarMilestonesPanel .section-toggle span:last-child {
  color: color-mix(in srgb, var(--sidebar-entity-accent) 62%, var(--sidebar-text));
}

#programsPanel .panel-heading .icon-button,
#projectsPanel .panel-heading .icon-button,
#sidebarMilestonesPanel .panel-heading .icon-button {
  border-color: color-mix(in srgb, var(--sidebar-entity-accent) 42%, var(--sidebar-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sidebar-entity-accent) 18%, transparent), transparent 65%),
    var(--sidebar-panel);
  color: var(--sidebar-text);
}

#programsPanel .panel-heading .icon-button:hover,
#projectsPanel .panel-heading .icon-button:hover,
#sidebarMilestonesPanel .panel-heading .icon-button:hover {
  border-color: color-mix(in srgb, var(--sidebar-entity-accent) 72%, var(--sidebar-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sidebar-entity-accent) 28%, transparent), transparent 68%),
    var(--sidebar-hover);
}

.panel.compact {
  margin-top: auto;
}

.panel-heading,
.topbar,
.toolbar,
.dialog-heading,
.audit-actions,
menu,
.menu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.audit-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.section-toggle {
  min-height: 34px;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--sidebar-text);
  font-weight: 900;
  text-align: left;
}

.section-toggle .chevron {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--sidebar-muted);
  font-size: 0;
  transition: transform 160ms ease;
}

.section-toggle .chevron::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.collapsible-panel.collapsed .chevron {
  transform: rotate(-90deg);
}

.collapsible-panel.collapsed .project-list,
.collapsible-panel.collapsed .user-list,
.collapsible-panel.collapsed .sidebar-dashboard-toggle,
.collapsible-panel.collapsed .sidebar-dashboard-panel {
  display: none;
}

.panel h2 {
  font-size: 0.9rem;
  color: var(--sidebar-text);
}

.project-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

#programsPanel .project-list,
#projectsPanel .project-list,
#sidebarMilestonesPanel .project-list {
  gap: 10px;
}

.project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.user-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.project-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px;
  color: var(--sidebar-text);
  background: transparent;
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
}

#programsPanel .project-item,
#projectsPanel .project-item,
#sidebarMilestonesPanel .project-item {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--sidebar-entity-accent) 24%, var(--sidebar-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sidebar-entity-accent) 10%, transparent), transparent 66%),
    color-mix(in srgb, var(--sidebar-panel) 92%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(2, 6, 23, 0.06);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

#programsPanel .project-item::before,
#projectsPanel .project-item::before,
#sidebarMilestonesPanel .project-item::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-entity-accent) 92%, white), var(--sidebar-entity-accent));
  opacity: 0.55;
}

#programsPanel .project-item:hover,
#projectsPanel .project-item:hover,
#sidebarMilestonesPanel .project-item:hover {
  border-color: color-mix(in srgb, var(--sidebar-entity-accent) 58%, var(--sidebar-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sidebar-entity-accent) 18%, transparent), transparent 68%),
    var(--sidebar-hover);
  transform: translateY(-1px);
}

#programsPanel .project-item.active,
#projectsPanel .project-item.active,
#sidebarMilestonesPanel .project-item.active {
  border-color: color-mix(in srgb, var(--sidebar-entity-accent) 76%, var(--sidebar-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sidebar-entity-accent) 32%, transparent), rgba(15, 23, 42, 0.14) 70%),
    var(--sidebar-hover);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--sidebar-entity-accent) 16%, transparent),
    0 12px 28px color-mix(in srgb, var(--sidebar-entity-accent) 13%, transparent);
}

#programsPanel .project-item:hover::before,
#projectsPanel .project-item:hover::before,
#sidebarMilestonesPanel .project-item:hover::before,
#programsPanel .project-item.active::before,
#projectsPanel .project-item.active::before,
#sidebarMilestonesPanel .project-item.active::before {
  opacity: 1;
}

.row-action-button {
  min-width: 46px;
  border: 1px solid var(--sidebar-line);
  border-radius: 8px;
  background: var(--sidebar-panel);
  color: var(--sidebar-text);
  font-size: 0.74rem;
  font-weight: 900;
}

#programsPanel .row-action-button,
#projectsPanel .row-action-button,
#sidebarMilestonesPanel .row-action-button {
  border-color: color-mix(in srgb, var(--sidebar-entity-accent) 22%, var(--sidebar-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sidebar-entity-accent) 9%, transparent), transparent 66%),
    var(--sidebar-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(2, 6, 23, 0.06);
}

#programsPanel .row-action-button:hover,
#projectsPanel .row-action-button:hover,
#sidebarMilestonesPanel .row-action-button:hover {
  border-color: color-mix(in srgb, var(--sidebar-entity-accent) 62%, var(--sidebar-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sidebar-entity-accent) 20%, transparent), transparent 68%),
    var(--sidebar-hover);
}

.row-action-button:hover {
  background: var(--sidebar-hover);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.project-item small {
  display: block;
  margin-top: 2px;
  color: var(--sidebar-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.project-item.active,
.project-item:hover {
  border-color: var(--sidebar-line);
  background: var(--sidebar-hover);
}

#programsPanel .sidebar-dashboard-toggle,
#projectsPanel .sidebar-dashboard-toggle,
#sidebarMilestonesPanel .sidebar-dashboard-toggle {
  min-height: 34px;
  border-color: color-mix(in srgb, var(--sidebar-entity-accent) 40%, var(--sidebar-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sidebar-entity-accent) 16%, transparent), transparent 72%),
    var(--sidebar-panel);
  color: var(--sidebar-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(2, 6, 23, 0.06);
}

#programsPanel .sidebar-dashboard-toggle:hover,
#projectsPanel .sidebar-dashboard-toggle:hover,
#sidebarMilestonesPanel .sidebar-dashboard-toggle:hover {
  border-color: color-mix(in srgb, var(--sidebar-entity-accent) 68%, var(--sidebar-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sidebar-entity-accent) 24%, transparent), transparent 72%),
    var(--sidebar-hover);
}

.project-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.count {
  color: var(--sidebar-muted);
  font-size: 0.8rem;
}

.user-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  color: var(--sidebar-text);
  padding: 8px;
  text-align: left;
}

.user-item:hover {
  border-color: var(--sidebar-line);
  background: var(--sidebar-hover);
}

.user-item strong,
.user-item small {
  display: block;
}

.user-item strong {
  font-size: 0.88rem;
}

.user-item small,
.empty-sidebar {
  color: var(--sidebar-muted);
  font-size: 0.78rem;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
  flex: 0 0 auto;
  overflow: hidden;
  text-transform: uppercase;
}

.avatar img {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.avatar-small {
  font-size: 0.625rem;
  height: 24px;
  width: 24px;
}

.avatar-large {
  font-size: 1.15rem;
  height: 76px;
  width: 76px;
}

.avatar-count {
  background: var(--chip);
  border: 1px solid var(--line);
  color: var(--text);
}

.avatar-stack {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
}

.avatar-stack .avatar + .avatar {
  margin-left: -7px;
  box-shadow: 0 0 0 2px var(--panel-soft);
}

.card-people,
.shortcut-user-line {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-width: 0;
}

.card-people {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 8px;
}

.card-people > span:last-child,
.shortcut-user-line {
  overflow-wrap: anywhere;
}

.app-shell {
  min-width: 0;
  padding: 24px;
}

.shortcut-rail {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  border-left: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--blue)), var(--panel-soft)),
    var(--panel);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--blue) 8%, transparent);
}

:root[data-theme="dark"] .shortcut-rail {
  background:
    radial-gradient(circle at 18% 0%, rgba(37, 99, 235, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.62)),
    var(--panel);
  box-shadow: inset 1px 0 0 rgba(96, 165, 250, 0.08);
}

.shortcut-rail.collapsed {
  width: 58px;
  padding: 18px 10px;
  overflow: hidden;
}

.shortcut-rail.collapsed .shortcut-list,
.shortcut-rail.collapsed .shortcut-dashboard-toggle,
.shortcut-rail.collapsed .shortcut-dashboard-panel,
.shortcut-rail.collapsed .shortcut-filter-button,
.shortcut-rail.collapsed .shortcut-assistant-panel,
.shortcut-rail.collapsed .section-toggle span:last-child {
  display: none;
}

.shortcut-toggle-button .chevron {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--sidebar-line));
  border-radius: 10px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(15, 23, 42, 0.38)),
    var(--sidebar-panel);
  color: var(--sidebar-text);
  font-size: 0;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(2, 6, 23, 0.18);
}

.shortcut-toggle-button .chevron::before {
  content: none;
}

.shortcut-toggle-chevron-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shortcut-rail.collapsed .shortcut-toggle-chevron-icon {
  transform: rotate(180deg);
}

.shortcut-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shortcut-toggle-button {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing: 0;
}

.shortcut-filter-button {
  min-height: 42px;
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent 65%),
    var(--control);
  white-space: nowrap;
  padding-inline: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.shortcut-filter-button.active {
  border-color: var(--blue);
  background: rgba(37, 99, 235, 0.18);
  color: var(--text);
}

.shortcut-list {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  order: 3;
  padding-right: 2px;
}

.shortcut-dashboard-toggle {
  order: 2;
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.12), transparent 72%),
    var(--control);
}

.shortcut-dashboard-panel {
  order: 2;
}

.shortcut-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.shortcut-signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-weight: 850;
  line-height: 1.1;
}

.shortcut-signal span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shortcut-signal-icon {
  width: 18px;
  height: 18px;
  border: 2px solid var(--blue);
  border-radius: 999px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.22);
}

.shortcut-signal-icon::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--blue);
  margin-left: 2px;
}

.shortcut-signal-assigned .shortcut-signal-icon {
  border-color: var(--amber);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.2);
}

.shortcut-signal-assigned .shortcut-signal-icon::before {
  width: 6px;
  height: 6px;
  border: 2px solid var(--amber);
  border-radius: 999px;
  background: transparent;
  margin: 0;
}

.shortcut-signal-blocked .shortcut-signal-icon {
  border-color: var(--red);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.22);
}

.shortcut-signal-blocked .shortcut-signal-icon::before {
  content: "!";
  width: auto;
  height: auto;
  border: 0;
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 950;
  margin: 0;
}

.shortcut-tabs {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr 1.1fr 1fr;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.42);
}

.shortcut-tabs button {
  position: relative;
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 6px;
  white-space: nowrap;
}

.shortcut-tabs button:last-child {
  border-right: 0;
}

.shortcut-tabs button:hover,
.shortcut-tabs button.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.04));
}

.shortcut-tabs button.active::after {
  content: "";
  position: absolute;
  inset: auto 10px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--blue);
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.55);
}

.shortcut-sections {
  display: grid;
  gap: 14px;
}

.shortcut-section {
  display: grid;
  gap: 8px;
}

.shortcut-section + .shortcut-section {
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
}

.shortcut-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.shortcut-section-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.shortcut-ticket-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-left: 3px solid var(--blue);
  border-radius: 9px;
  padding: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 72%),
    var(--card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 22px rgba(2, 6, 23, 0.08);
}

.shortcut-ticket-row.blocked {
  border-left-color: var(--red);
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--red) 10%, transparent), transparent 72%),
    var(--card);
}

:root[data-theme="dark"] .shortcut-ticket-row {
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.1), transparent 72%),
    rgba(15, 23, 42, 0.42);
}

:root[data-theme="dark"] .shortcut-ticket-row.blocked {
  background:
    linear-gradient(90deg, rgba(239, 68, 68, 0.13), transparent 72%),
    rgba(15, 23, 42, 0.42);
}

.shortcut-ticket-row.running {
  border-left-color: var(--green);
}

.shortcut-ticket-content {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  display: grid;
  gap: 5px;
  text-align: left;
}

.shortcut-ticket-content:hover {
  background: transparent;
}

.shortcut-ticket-primary,
.shortcut-ticket-secondary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.shortcut-ticket-primary strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 950;
}

.shortcut-ticket-primary span:last-child,
.shortcut-ticket-secondary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shortcut-ticket-primary span:last-child {
  color: var(--text);
  font-weight: 850;
}

.shortcut-ticket-secondary {
  color: var(--muted);
  font-size: 0.74rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.shortcut-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shortcut-time::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 999px;
  opacity: 0.82;
}

.shortcut-priority {
  justify-self: end;
  white-space: nowrap;
}

.shortcut-row-action {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 62%, var(--line));
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.16), transparent 62%),
    var(--control);
  color: var(--blue);
}

.shortcut-row-action.start span:not(.sr-only) {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid currentColor;
  margin-left: 2px;
}

.shortcut-row-action.stop {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 52%, var(--line));
  background:
    radial-gradient(circle at 50% 50%, rgba(239, 68, 68, 0.14), transparent 62%),
    var(--control);
}

.shortcut-row-action.stop span:not(.sr-only) {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
}

.shortcut-open-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 950;
  padding: 0 2px;
}

.shortcut-view-all {
  min-height: 40px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 0;
  background: transparent;
  color: var(--blue);
  font-size: 0.95rem;
  font-weight: 900;
}

.shortcut-view-all span {
  display: inline-block;
  margin-left: 8px;
  font-size: 1.4rem;
  line-height: 0;
  transform: translateY(2px);
}

.shortcut-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
  padding: 12px;
}

.shortcut-card-heading,
.shortcut-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shortcut-card h3 {
  margin: 9px 0 5px;
  font-size: 0.96rem;
  line-height: 1.25;
}

.shortcut-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shortcut-meta {
  display: grid;
  gap: 3px;
  margin: 10px 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.shortcut-actions button {
  flex: 1;
}

.topbar {
  margin-bottom: 18px;
}

.topbar-primary {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.page-title-block {
  min-width: max-content;
}

.topbar h2 {
  margin-top: 2px;
  font-size: 1.7rem;
}

.toolbar {
  flex-wrap: wrap;
}

.header-search {
  width: min(520px, 100%);
  display: grid;
  gap: 4px;
  align-self: center;
}

.header-search-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.search-submit-button {
  min-width: 86px;
}

.link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-button:hover {
  color: var(--blue-dark);
}

.advanced-search-toggle {
  width: fit-content;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sidebar .page-nav {
  padding: 14px;
  overflow: visible;
}

.assistant-nav-group {
  --nav-group-accent: #60a5fa;
}

.assistant-nav-group:not(:has(.assistant-nav-toggle:not([hidden]))) {
  display: none;
}
.sidebar-inkling-room {
  display: block;
  padding: 4px 12px 4px 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}
.sidebar-inkling-room:hover,
.sidebar-inkling-room:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
.inkling-linked-rooms {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.inkling-linked-rooms h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.inkling-linked-rooms [data-inkling-room-links] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.inkling-linked-rooms a {
  color: var(--accent);
}

.icon-inkling {
  background: url("./client/assets/inkling-logo.svg") center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

#inklingNavLink {
  margin-top: 8px;
  text-decoration: none;
  --nav-group-accent: #2b7367;
}

.inkling-launch-dialog {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.inkling-launch-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inkling-launch-heading .nav-icon { width: 28px; height: 28px; }

.inkling-launch-options { display: grid; gap: 10px; }

.inkling-launch-option {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.inkling-launch-option:hover,
.inkling-launch-option:focus-visible { border-color: #2b7367; background: var(--hover); }

.inkling-launch-option:disabled { opacity: 0.55; cursor: not-allowed; }

.inkling-launch-option span { color: var(--muted); font-size: 0.86rem; }

#inklingLaunchMessage:empty { display: none; }

.assistant-nav-toggle {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--nav-group-accent) 40%, var(--sidebar-line));
  border-radius: 9px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--nav-group-accent) 16%, transparent), transparent 66%),
    var(--sidebar-panel);
  color: var(--sidebar-text);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 24px rgba(2, 6, 23, 0.08);
}

.assistant-nav-toggle[hidden] {
  display: none;
}

.assistant-nav-toggle:hover,
.assistant-nav-toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--nav-group-accent) 72%, var(--sidebar-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--nav-group-accent) 28%, transparent), transparent 68%),
    var(--sidebar-hover);
}

.assistant-nav-toggle[aria-expanded="true"] {
  box-shadow:
    inset 3px 0 0 var(--nav-group-accent),
    0 0 0 1px color-mix(in srgb, var(--nav-group-accent) 12%, transparent),
    0 12px 28px rgba(37, 99, 235, 0.14);
}

.assistant-nav-toggle .nav-icon {
  width: 24px;
  height: 24px;
}

.segmented {
  display: grid;
  width: 100%;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.page-nav-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.nav-group {
  --nav-group-accent: var(--blue);
  display: grid;
  gap: 8px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--sidebar-line);
}

.nav-group + .nav-group {
  padding-top: 14px;
}

.nav-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.nav-group[data-nav-group="Overview"] {
  --nav-group-accent: var(--blue);
}

.nav-group[data-nav-group="Planning"] {
  --nav-group-accent: var(--green);
}

.nav-group[data-nav-group="Execution"] {
  --nav-group-accent: var(--amber);
}

.nav-group[data-nav-group="Portfolio"] {
  --nav-group-accent: #a855f7;
}

.nav-group[data-nav-group="Reports"] {
  --nav-group-accent: #facc15;
}

.nav-group[data-nav-group="Admin"] {
  --nav-group-accent: #22d3ee;
}

.nav-group h3 {
  margin: 0 0 2px;
  color: color-mix(in srgb, var(--nav-group-accent) 68%, var(--sidebar-muted));
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.nav-group-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.page-nav-groups .nav-group-list button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--sidebar-line);
  border-radius: 9px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--nav-group-accent) 7%, transparent), transparent 58%),
    var(--sidebar-panel);
  color: var(--sidebar-text);
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 24px rgba(2, 6, 23, 0.08);
}

.page-nav-groups .nav-group-list button .nav-icon {
  width: 24px;
  height: 24px;
  color: color-mix(in srgb, var(--sidebar-text) 88%, var(--nav-group-accent));
}

.page-nav-groups .nav-group-list button .nav-label {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.page-nav-groups .nav-group-list button:hover,
.page-nav-groups .nav-group-list button.active {
  border-color: color-mix(in srgb, var(--nav-group-accent) 70%, var(--sidebar-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--nav-group-accent) 25%, transparent), transparent 65%),
    var(--sidebar-hover);
  color: var(--sidebar-text);
}

.page-nav-groups .nav-group-list button.active {
  box-shadow:
    inset 3px 0 0 var(--nav-group-accent),
    0 0 0 1px color-mix(in srgb, var(--nav-group-accent) 12%, transparent),
    0 12px 28px rgba(37, 99, 235, 0.14);
}

:root[data-theme="dark"] .page-nav-groups .nav-group-list button.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--nav-group-accent) 28%, transparent), rgba(15, 23, 42, 0.42) 70%),
    rgba(15, 23, 42, 0.72);
  color: #ffffff;
}

.primary-button,
.secondary-button,
.danger-button,
.wide-button,
.icon-button {
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: 700;
  line-height: 1;
}

.primary-button {
  background: var(--blue);
  color: white;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
}

.primary-button:hover {
  background: var(--blue-dark);
}

.primary-button:active,
.secondary-button:active,
.danger-button:active,
.wide-button:active,
.icon-button:active {
  transform: translateY(1px);
}

.secondary-button,
.wide-button {
  border-color: var(--line);
  background: var(--control);
  color: var(--text);
}

.secondary-button:hover,
.wide-button:hover,
.icon-button.subtle:hover,
.row-action-button:hover {
  border-color: var(--line-strong);
  background: var(--hover);
}

.notification-menu {
  position: relative;
}

.notification-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notification-button strong {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  background: var(--red);
  color: white;
  font-size: 12px;
}

.notification-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: min(520px, calc(100vw - 24px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.notification-popover-heading {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-preferences {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.notification-preferences summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
}

.notification-preferences label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.notification-preferences label[hidden] {
  display: none;
}

.notification-preferences label.notification-preference-required {
  color: var(--muted);
  cursor: not-allowed;
}

.notification-preferences label.notification-preference-required::after {
  content: "Required";
  margin-left: auto;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 6px;
  text-transform: uppercase;
}

.notification-preferences input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.notification-list {
  max-height: min(300px, calc(100vh - 330px));
  overflow: auto;
  overscroll-behavior: contain;
}

.notification-item {
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-right: 0;
  border-top: 0;
  background: transparent;
  color: var(--text);
  display: grid;
  gap: 6px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.notification-item.unread {
  border-left-color: var(--blue);
  background: var(--hover);
}

.notification-item.selected {
  border-left-color: var(--accent);
  background: var(--panel-soft);
}

.notification-item:hover,
.notification-item:focus-visible {
  background: var(--panel-soft);
}

.notification-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.notification-item-topline,
.notification-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notification-item strong,
.notification-item p {
  margin: 0;
}

.notification-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.notification-item p {
  color: var(--muted);
  line-height: 1.35;
}

.notification-item time {
  color: var(--muted);
  font-size: 12px;
}

.notification-item-footer span,
.notification-status {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 7px;
}

.notification-item.unread .notification-status {
  background: rgba(37, 99, 235, 0.18);
  color: var(--accent);
}

.notification-detail {
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
  padding: 12px;
  display: grid;
  gap: 12px;
}

.notification-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.notification-detail-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.notification-detail-heading strong {
  overflow-wrap: anywhere;
}

.notification-detail-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.notification-detail p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.notification-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.notification-detail-meta div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
  padding: 8px;
}

.notification-detail-meta dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.notification-detail-meta dd {
  margin: 2px 0 0;
  color: var(--text);
  font-weight: 800;
}

.notification-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mention-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: #dbeafe;
  color: var(--blue-dark);
  font-weight: 800;
}

:root[data-theme="dark"] .mention-chip {
  background: rgba(96, 165, 250, 0.16);
  color: #bfdbfe;
}

.danger-button {
  border-color: #fecaca;
  background: #fff1f2;
  color: var(--red);
}

.danger-button:hover,
.secondary-button.danger:hover {
  border-color: rgba(220, 38, 38, 0.58);
  background: #fee2e2;
  color: #991b1b;
}

:root[data-theme="dark"] .danger-button {
  border-color: #7f1d1d;
  background: #2a1115;
  color: #fca5a5;
}

.wide-button {
  width: 100%;
  margin-top: 10px;
}

.file-button {
  display: grid;
  place-items: center;
}

.file-button input {
  display: none;
}

.icon-button {
  width: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.icon-button.subtle {
  background: var(--chip);
  color: var(--text);
}

.theme-switch {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
  text-align: left;
}

.theme-switch:hover {
  color: var(--text);
}

.switch-track {
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: #475569;
  padding: 3px;
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: block;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease;
}

.theme-switch[aria-pressed="true"] .switch-track {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

.theme-switch[aria-pressed="true"] .switch-thumb {
  transform: translateX(22px);
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0;
  align-items: end;
}

.advanced-search-panel {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel);
}

.saved-view-bar {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  background: var(--panel-soft);
}

.saved-view-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.saved-view-actions button {
  min-height: 40px;
}

.filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.filter-actions button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  white-space: nowrap;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

label > span,
.inline-filter span {
  letter-spacing: 0;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  background: var(--control);
  color: var(--text);
  outline: none;
  min-height: 40px;
}

select:not([multiple]) {
  appearance: none;
  padding-right: 34px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)) right 18px center / 8px 8px no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)) right 12px center / 8px 8px no-repeat,
    var(--control);
}

select:not([multiple])::-ms-expand {
  display: none;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
}

body[data-density="comfortable"] .sidebar {
  padding: 26px;
  gap: 22px;
}

body[data-density="comfortable"] {
  grid-template-columns: 330px minmax(0, 1fr) 360px;
  font-size: 17px;
}

body[data-density="comfortable"] .app-shell {
  padding: 34px;
}

body[data-density="comfortable"] .shortcut-rail {
  padding: 28px;
  gap: 18px;
}

body[data-density="comfortable"] :is(.panel, .stat, .board-toolbar-panel, .ticket-card, .metric-card, .chart-card, .dashboard-widget, .dialog-card, .portfolio-card, .shortcut-card) {
  padding: 22px;
}

body[data-density="comfortable"] :is(.kanban, .filters, .stats, .toolbar, .topbar, .page-nav-groups, .dashboard-grid, .metric-grid, .chart-grid) {
  gap: 20px;
}

body[data-density="comfortable"] :is(input, select, textarea) {
  min-height: 50px;
  padding: 14px 15px;
}

body[data-density="comfortable"] :is(.primary-button, .secondary-button, .danger-button, .wide-button, .icon-button) {
  min-height: 46px;
  padding-inline: 18px;
}

body[data-density="comfortable"] .topbar h2 {
  font-size: 1.9rem;
}

body[data-density="comfortable"] .kanban-row {
  gap: 14px;
}

body[data-density="comfortable"] .column {
  min-height: 64vh;
  padding: 16px;
}

body[data-density="comfortable"] .ticket-card h3 {
  font-size: 1.08rem;
}

body[data-density="comfortable"] .ticket-card p {
  font-size: 0.9rem;
  line-height: 1.45;
}

body[data-density="compact"] .sidebar {
  padding: 10px;
  gap: 8px;
}

body[data-density="compact"] {
  grid-template-columns: 270px minmax(0, 1fr) 285px;
  font-size: 14px;
}

body[data-density="compact"] .app-shell {
  padding: 10px;
}

body[data-density="compact"] .shortcut-rail {
  padding: 10px;
  gap: 7px;
}

body[data-density="compact"] :is(.panel, .stat, .board-toolbar-panel, .ticket-card, .metric-card, .chart-card, .dashboard-widget, .dialog-card, .portfolio-card, .shortcut-card) {
  padding: 8px;
}

body[data-density="compact"] :is(.kanban, .filters, .stats, .toolbar, .topbar, .page-nav-groups, .dashboard-grid, .metric-grid, .chart-grid) {
  gap: 6px;
}

body[data-density="compact"] :is(input, select, textarea) {
  min-height: 30px;
  padding: 5px 8px;
}

body[data-density="compact"] :is(.primary-button, .secondary-button, .danger-button, .wide-button, .icon-button) {
  min-height: 30px;
  padding-inline: 8px;
}

body[data-density="compact"] :is(.stat strong, .metric-card strong, .dashboard-stat) {
  font-size: 1rem;
}

body[data-density="compact"] :is(.ticket-card h3, .shortcut-card h3, .portfolio-card h3) {
  font-size: 0.84rem;
}

body[data-density="compact"] .topbar h2 {
  font-size: 1.45rem;
}

body[data-density="compact"] .kanban-row {
  grid-template-columns: repeat(var(--kanban-column-count, 5), minmax(0, 1fr));
  gap: 8px;
}

body[data-density="compact"] .column {
  min-height: 48vh;
  padding: 7px;
}

body[data-density="compact"] .ticket-card p {
  font-size: 0.75rem;
  line-height: 1.25;
}

body[data-density="compact"] .chip,
body[data-density="compact"] .ticket-key,
body[data-density="compact"] .wip-pill {
  font-size: 0.68rem;
  padding: 2px 6px;
}

body.sidebar-collapsed[data-density] .sidebar {
  padding: 8px;
  gap: 8px;
}

body[data-density] .shortcut-rail.collapsed {
  padding: 18px 10px;
}

body[data-density="comfortable"] {
  grid-template-columns: 344px minmax(0, 1fr) 380px;
  font-size: 18px;
}

body[data-density="compact"] {
  grid-template-columns: 258px minmax(0, 1fr) 320px;
  font-size: 13px;
}

body.sidebar-collapsed[data-density="comfortable"] {
  grid-template-columns: 64px minmax(0, 1fr) 380px;
}

body.sidebar-collapsed[data-density="compact"] {
  grid-template-columns: 64px minmax(0, 1fr) 320px;
}

body[data-density="comfortable"]:has(.shortcut-rail.collapsed) {
  grid-template-columns: 344px minmax(0, 1fr) 58px;
}

body[data-density="compact"]:has(.shortcut-rail.collapsed) {
  grid-template-columns: 258px minmax(0, 1fr) 58px;
}

body[data-density="compact"]:has(#boardView.active):has(.shortcut-rail.collapsed) {
  grid-template-columns: 258px minmax(760px, 1fr) 58px;
}

body[data-density="compact"]:has(#boardView.active).sidebar-collapsed:has(.shortcut-rail.collapsed) {
  grid-template-columns: 64px minmax(760px, 1fr) 58px;
}

body.sidebar-collapsed[data-density]:has(.shortcut-rail.collapsed) {
  grid-template-columns: 64px minmax(0, 1fr) 58px;
}

body[data-density="comfortable"] .sidebar {
  padding: 30px;
  gap: 24px;
}

body[data-density="compact"] .sidebar {
  padding: 8px;
  gap: 7px;
}

body[data-density="comfortable"] .app-shell {
  padding: 40px;
}

body[data-density="compact"] .app-shell {
  padding: 8px;
}

body[data-density="comfortable"] .shortcut-rail {
  padding: 30px;
  gap: 20px;
}

body[data-density="compact"] .shortcut-rail {
  padding: 14px;
  gap: 12px;
}

body[data-density="comfortable"] :is(.panel, .stat, .board-toolbar-panel, .ticket-card, .metric-card, .chart-card, .dashboard-widget, .dialog-card, .portfolio-card, .shortcut-card) {
  padding: 24px;
}

body[data-density="compact"] :is(.panel, .stat, .board-toolbar-panel, .ticket-card, .metric-card, .chart-card, .dashboard-widget, .dialog-card, .portfolio-card, .shortcut-card) {
  padding: 6px;
}

body[data-density="comfortable"] :is(.kanban, .filters, .stats, .toolbar, .topbar, .page-nav-groups, .dashboard-grid, .metric-grid, .chart-grid, .saved-view-bar) {
  gap: 22px;
}

body[data-density="compact"] :is(.kanban, .filters, .stats, .toolbar, .topbar, .page-nav-groups, .dashboard-grid, .metric-grid, .chart-grid, .saved-view-bar) {
  gap: 6px;
}

body[data-density="comfortable"] :is(input, select, textarea) {
  min-height: 54px;
  padding: 15px 16px;
  font-size: 1.04rem;
}

body[data-density="compact"] :is(input, select, textarea) {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 0.84rem;
}

body[data-density="comfortable"] :is(.primary-button, .secondary-button, .danger-button, .wide-button, .icon-button) {
  min-height: 50px;
  padding-inline: 20px;
  font-size: 1.04rem;
}

body[data-density="compact"] :is(.primary-button, .secondary-button, .danger-button, .wide-button, .icon-button) {
  min-height: 28px;
  padding-inline: 7px;
  font-size: 0.82rem;
}

body[data-density="comfortable"] .sidebar .page-nav {
  padding: 18px;
}

body[data-density="compact"] .sidebar .page-nav {
  padding: 12px;
}

body[data-density="compact"] .nav-group {
  gap: 7px;
  padding-bottom: 12px;
}

body[data-density="compact"] .nav-group + .nav-group {
  padding-top: 12px;
}

body[data-density="compact"] .page-nav-groups .nav-group-list button {
  min-height: 42px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  font-size: 0.9rem;
}

body[data-density="compact"] .page-nav-groups .nav-group-list button .nav-icon {
  width: 21px;
  height: 21px;
}

body[data-density="comfortable"] .topbar h2 {
  font-size: 2.05rem;
}

body[data-density="compact"] .topbar h2 {
  font-size: 1.35rem;
}

body[data-density="comfortable"] .kanban-row {
  gap: 16px;
}

body[data-density="compact"] .kanban-row {
  grid-template-columns: repeat(var(--kanban-column-count, 5), minmax(0, 1fr));
  gap: 8px;
}

body[data-density="comfortable"] .column {
  min-height: 68vh;
  padding: 18px;
}

body[data-density="compact"] .column {
  min-height: 42vh;
  padding: 5px;
}

body[data-density="comfortable"] .ticket-card {
  min-height: 160px;
}

body[data-density="compact"] .ticket-card {
  min-height: 84px;
}

body[data-density="comfortable"] .ticket-card h3 {
  font-size: 1.14rem;
  line-height: 1.25;
}

body[data-density="compact"] :is(.ticket-card h3, .shortcut-card h3, .portfolio-card h3) {
  font-size: 0.78rem;
  line-height: 1.12;
}

body[data-density="comfortable"] .ticket-card p {
  font-size: 0.95rem;
  line-height: 1.52;
}

body[data-density="compact"] .ticket-card p {
  font-size: 0.7rem;
  line-height: 1.18;
}

body[data-density="comfortable"] .stat strong {
  font-size: 1.7rem;
}

body[data-density="compact"] .stat strong {
  font-size: 1rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
}

.stat strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
}

.stat span {
  color: var(--muted);
  font-size: 0.82rem;
}

.view {
  display: none;
  min-width: 0;
}

.view.active {
  display: block;
}

.view > :first-child {
  scroll-margin-top: 16px;
}

.kanban {
  display: grid;
  gap: 18px;
}

.board-toolbar-panel {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: minmax(280px, 344px) minmax(220px, 260px) minmax(min(100%, 420px), 1fr);
  gap: 12px;
  align-items: end;
}

.scope-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 8px;
}

.scope-controls label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.scope-controls label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scope-controls select {
  min-height: 36px;
}

.board-scope-controls {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  align-items: end;
  grid-template-columns: minmax(140px, 190px) minmax(150px, 210px);
}

.board-view-controls {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  display: grid;
  gap: 12px;
  align-items: end;
}

.board-view-controls {
  grid-template-columns: minmax(210px, 250px);
}

.board-view-controls:has(#boardSwimlaneCustomFieldLabel:not([hidden])) {
  grid-template-columns: minmax(210px, 250px) minmax(180px, 220px);
}

body:has(#boardView.active):has(.shortcut-rail:not(.collapsed)) .board-toolbar-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

body:has(#boardView.active):has(.shortcut-rail:not(.collapsed)) .board-scope-controls,
body:has(#boardView.active):has(.shortcut-rail:not(.collapsed)) .board-view-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.board-toolbar-panel strong,
.board-toolbar-panel span {
  display: block;
}

.board-toolbar-panel span {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 3px;
}

.board-workspace {
  display: block;
  position: relative;
  container: board / inline-size;
  min-width: 0;
}

.board-detail-panel {
  position: fixed;
  z-index: 30;
  top: 84px;
  right: 68px;
  width: min(360px, calc(100vw - 96px));
  max-width: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
  max-height: calc(100vh - 108px);
  overflow: auto;
  box-shadow: var(--shadow);
}

.compact-heading {
  align-items: flex-start;
  margin-bottom: 16px;
}

.detail-stack {
  display: grid;
  gap: 16px;
}

.detail-stack h4 {
  margin: 0 0 6px;
}

.detail-stack p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  font-size: 0.86rem;
}

.detail-grid span {
  color: var(--muted);
}

.mini-activity {
  display: grid;
  gap: 8px;
}

.mini-activity p {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--panel-soft);
}

.mini-activity strong,
.mini-activity span {
  display: block;
}

.full-width {
  width: 100%;
}

.kanban-row {
  display: grid;
  grid-template-columns: repeat(var(--kanban-column-count, 5), minmax(0, 1fr));
  gap: 14px;
  overflow-x: clip;
  padding-bottom: 0;
  width: 100%;
}

.swimlane {
  display: grid;
  gap: 10px;
}

.swimlane-heading {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.swimlane-heading h3 {
  margin: 0;
  font-size: 0.96rem;
}

.swimlane-heading span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.column {
  min-width: 0;
  min-height: 58vh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px;
  scroll-margin-top: 14px;
}

.column.drag-over {
  outline: 3px solid rgba(37, 99, 235, 0.24);
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.column-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--control);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: none;
}

.mini-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.wip-pill {
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--chip);
  color: var(--chip-text);
  font-weight: 900;
}

.wip-pill.over-limit {
  background: #fee2e2;
  color: #991b1b;
}

.ticket-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  display: grid;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06);
  margin-bottom: 10px;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.ticket-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.1);
  transform: translateY(-1px);
}

.ticket-card.blocked {
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.38), 0 4px 14px rgba(16, 24, 40, 0.06);
}

.card-topline,
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.card-topline {
  align-items: flex-start;
  min-height: 24px;
}

.card-footer {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.ticket-card h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.ticket-key {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 3px 7px;
  margin-bottom: 0;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  flex-shrink: 0;
}

.ticket-key.inline {
  margin-bottom: 4px;
}

.ticket-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.card-meta,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
  align-items: center;
}

.ticket-progress {
  height: 7px;
  border-radius: 999px;
  margin-top: 2px;
  overflow: hidden;
  background: var(--line);
}

.ticket-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.table-ticket-progress {
  min-width: 90px;
  max-width: 160px;
  margin-top: 6px;
}

.chip {
  max-width: 100%;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.search-multi-source {
  display: none !important;
}

.search-multi-picker {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--control);
}

.search-multi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.search-multi-chips:empty {
  display: none;
}

.search-multi-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.search-multi-chip button {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel), transparent 15%);
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.search-multi-chip button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.search-multi-input {
  width: 100%;
}

.status-chip {
  min-width: 0;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--control);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
  flex-shrink: 0;
}

.danger-chip {
  background: #fee2e2;
  color: #991b1b;
}

.priority-Critical {
  background: #fee2e2;
  color: #991b1b;
}

.priority-High {
  background: #ffedd5;
  color: #9a3412;
}

.priority-Medium {
  background: #dbeafe;
  color: #1e40af;
}

.priority-Low {
  background: #dcfce7;
  color: #166534;
}

.timer-chip {
  background: #fef3c7;
  color: #92400e;
}

@container board (max-width: 1080px) {
  .kanban-row {
    gap: 8px;
  }

  .column {
    padding: 6px;
  }

  .column-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    font-size: 0.74rem;
  }

  .column-actions {
    gap: 4px;
    width: 100%;
  }

  .mini-button,
  .wip-pill {
    font-size: 0.66rem;
    min-height: 22px;
    padding: 1px 6px;
  }

  .ticket-card {
    padding: 8px;
  }

  .ticket-card h3 {
    font-size: 0.84rem;
    line-height: 1.18;
  }

  .ticket-card p {
    font-size: 0.72rem;
    line-height: 1.22;
  }

  .card-meta {
    gap: 4px;
  }

  .chip,
  .ticket-key,
  .status-chip {
    font-size: 0.64rem;
    padding: 2px 6px;
  }

  .card-footer {
    font-size: 0.68rem;
  }
}

@container board (max-width: 940px) {
  .ticket-card p {
    display: none;
  }

  .card-meta .chip:nth-child(2),
  .card-meta .chip:nth-child(4),
  .card-meta .chip:nth-child(n + 7) {
    display: none;
  }

  .card-people {
    gap: 5px;
    font-size: 0.68rem;
  }

  .avatar-small {
    width: 20px;
    height: 20px;
    font-size: 0.625rem;
  }
}

@container board (max-width: 820px) {
  .kanban-row {
    gap: 5px;
  }

  .column {
    padding: 5px;
  }

  .ticket-card {
    border-left-width: 3px;
    padding: 6px;
  }

  .card-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .ticket-card h3 {
    font-size: 0.76rem;
  }

  .card-people > span:last-child,
  .card-footer {
    display: none;
  }

  .card-meta .chip:nth-child(n + 4) {
    display: none;
  }
}

.gantt-wrap,
.table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: auto;
}

.gantt-wrap {
  position: relative;
}

.list-toolbar,
.list-pagination,
.quick-views {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.list-pagination {
  min-height: 52px;
}

.list-toolbar-group,
.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.bulk-actions > .searchable-select-control {
  flex: 1 1 180px;
  min-width: 180px;
}

.list-toolbar-group.scope-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 220px));
  gap: 8px;
}

.list-toolbar label {
  min-width: 150px;
}

.column-menu {
  position: relative;
}

.column-menu summary {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--control);
  cursor: pointer;
  font-weight: 800;
}

.column-chooser {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  width: 280px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.column-choice {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px;
}

.column-choice button,
.quick-views button,
.table-sort-button,
.link-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 900;
  cursor: pointer;
}

.quick-views {
  justify-content: flex-start;
}

.quick-views button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 11px;
  background: var(--control);
  color: var(--text);
}

.list-pagination label {
  min-width: 120px;
}

.list-pagination > span {
  color: var(--muted);
  font-weight: 900;
}

.list-pagination-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.table-input {
  width: 100%;
  min-width: 130px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control);
  color: var(--text);
  font-weight: 700;
}

.table-input.narrow {
  min-width: 90px;
}

.select-cell {
  width: 42px;
  text-align: center;
}

.list-group-row td {
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 900;
}

.list-group-row span {
  color: var(--muted);
  margin-left: 8px;
}

.spreadsheet-row:hover {
  background: var(--hover);
}

.ticket-list-scroll {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

.ticket-list-overflow {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  background: var(--bg);
}

.list-column-scrollbar {
  min-width: 0;
  height: 20px;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-color: var(--muted) var(--panel-soft);
  overscroll-behavior-x: contain;
}

.list-column-scrollbar-track { height: 1px; }
.list-visible-columns { min-width: 138px; color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
#listView .ticket-list-overflow .icon-button { width: 28px; height: 28px; min-height: 28px; padding: 4px; }

#listView { min-width: 0; container: ticket-list / inline-size; }
#listView .list-toolbar { padding: 10px 12px; gap: 12px; margin-bottom: 8px; }
#listView .list-toolbar-group { min-width: 0; max-width: 100%; }
#listView .list-toolbar label { min-width: 0; flex: 1 1 150px; }
#listView .list-scope-controls { flex: 1 1 340px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#listView .list-toolbar-group:not(.scope-controls):not(.bulk-actions) { flex: 2 1 540px; }
#listView .bulk-actions {
  flex: 1 0 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
#listView .bulk-actions > :is(select, input, .searchable-select-control) {
  flex: 1 1 140px;
  width: 140px;
  min-width: 0;
}
#listView .bulk-actions > span { white-space: nowrap; }
#listView .list-pagination { min-height: 0; padding: 8px 12px; margin-bottom: 8px; }
#listView .list-pagination label { display: flex; align-items: center; min-width: 0; }
#listView .list-pagination select { width: 72px; }
#listView .quick-views { padding: 8px 12px; margin-bottom: 8px; }
#listView .quick-views button { padding: 5px 9px; }
#listView .column-menu summary { min-height: 30px; padding: 5px 8px; border-radius: 4px; }
#listView .column-chooser { left: auto; right: 0; max-width: calc(100vw - 32px); }
#listView .column-choice { min-width: 0; }
#listView .column-choice input { width: 16px; height: 16px; min-height: 16px; margin: 0; }
#listView select:not([multiple]),
#listView .searchable-select-input { padding-right: 34px; }

@container ticket-list (max-width: 500px) {
  #listView .column-menu { width: 100%; }
  #listView .column-chooser { left: 0; right: auto; width: 100%; }
  #listView .list-scope-controls { grid-template-columns: 1fr; }
  #listView .ticket-list-overflow { grid-template-columns: auto minmax(0, 1fr) auto; }
  #listView .list-visible-columns { grid-column: 1 / -1; text-align: center; }
}

#ticketListTable {
  min-width: 0;
  table-layout: auto;
}

#ticketListTable th,
#ticketListTable td {
  padding: 7px 10px;
  vertical-align: middle;
  font-size: 13px;
}

#ticketListTable th {
  padding-block: 9px;
  background: var(--panel-soft);
  text-transform: none;
}

#ticketListTable [data-list-column] { min-width: 180px; }
#ticketListTable [data-list-column="ticket"] { min-width: 320px; }
#ticketListTable [data-list-column="project"],
#ticketListTable [data-list-column="program"] { min-width: 172px; }
#ticketListTable [data-list-column="status"] { min-width: 156px; }
#ticketListTable [data-list-column="assignee"] { min-width: 184px; }
#ticketListTable [data-list-column="priority"] { min-width: 120px; }
#ticketListTable [data-list-column="start"],
#ticketListTable [data-list-column="due"] { min-width: 156px; }
#ticketListTable [data-list-column="percent"] { min-width: 110px; }
#ticketListTable [data-list-column="tags"] { min-width: 200px; }
#ticketListTable [data-list-column="blocked"] { min-width: 90px; }

#ticketListTable .select-cell {
  width: 38px;
  min-width: 38px;
  text-align: center;
}

#ticketListTable input[type="checkbox"] {
  display: block;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: auto;
  accent-color: var(--accent);
}

#ticketListTable .table-sort-button {
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

#ticketListTable .table-sort-button:hover { color: var(--text); }

#ticketListTable .list-ticket-open {
  display: grid;
  gap: 3px;
  width: 300px;
  max-width: 100%;
  border: 0;
  border-radius: 2px;
  padding: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.list-ticket-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.list-ticket-key { flex-shrink: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-weight: 600; }
.list-ticket-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-ticket-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.list-ticket-open:hover .list-ticket-title { color: var(--accent); text-decoration: underline; }

#ticketListTable .list-cell-text {
  display: block;
  max-width: 172px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ticketListTable .table-input {
  min-width: 0;
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
}

#ticketListTable select.table-input:not([multiple]) {
  padding-right: 34px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ticketListTable .list-progress-label {
  display: block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#ticketListTable .table-ticket-progress { margin-top: 5px; }
#ticketListTable .list-group-row td { padding-block: 10px; }

body[data-density="comfortable"] #ticketListTable th,
body[data-density="comfortable"] #ticketListTable td { padding-block: 12px; }
body[data-density="comfortable"] #ticketListTable .table-input { min-height: 40px; }

.gantt-toolbar {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.gantt-scope-controls {
  flex: 1 1 360px;
  min-width: min(100%, 280px);
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
}

.gantt-scope-controls label {
  display: grid;
  gap: 4px;
}

.gantt-scope-controls label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.gantt-scope-controls select {
  min-height: 36px;
}

.segmented.compact {
  width: auto;
}

.gantt-toolbar .segmented.compact,
.calendar-toolbar .segmented.compact {
  --mode-nav-accent: var(--green);
  display: inline-flex;
  width: auto;
  gap: 6px;
  padding: 7px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 8%, transparent), transparent 68%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 24px rgba(2, 6, 23, 0.08);
}

.calendar-toolbar .segmented.compact {
  --mode-nav-accent: var(--green);
}

.gantt-toolbar .segmented.compact {
  --mode-nav-accent: #22d3ee;
  flex: 0 1 auto;
  max-width: 100%;
  flex-wrap: wrap;
}

.gantt-toolbar > .secondary-button {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

.gantt-toolbar .gantt-legend {
  flex: 0 0 auto;
}

.gantt-toolbar .segmented.compact button,
.calendar-toolbar .segmented.compact button {
  min-height: 34px;
  min-width: max-content;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 13px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 7%, transparent), transparent 62%),
    var(--card);
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(2, 6, 23, 0.08);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.gantt-toolbar .segmented.compact button:nth-child(3n),
.calendar-toolbar .segmented.compact button:nth-child(3n) {
  border-right: 1px solid var(--line);
}

.gantt-toolbar .segmented.compact button:last-child,
.calendar-toolbar .segmented.compact button:last-child {
  border-right: 1px solid var(--line);
}

.gantt-toolbar .segmented.compact button:hover,
.gantt-toolbar .segmented.compact button:focus-visible,
.calendar-toolbar .segmented.compact button:hover,
.calendar-toolbar .segmented.compact button:focus-visible {
  border-color: color-mix(in srgb, var(--mode-nav-accent) 70%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 22%, transparent), transparent 66%),
    var(--hover);
  color: var(--text);
  transform: translateY(-1px);
}

.gantt-toolbar .segmented.compact button.active,
.calendar-toolbar .segmented.compact button.active {
  border-color: color-mix(in srgb, var(--mode-nav-accent) 78%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 30%, transparent), color-mix(in srgb, var(--mode-nav-accent) 8%, var(--card)) 70%),
    var(--card);
  color: var(--text);
  box-shadow:
    inset 3px 0 0 var(--mode-nav-accent),
    inset 0 0 0 1px color-mix(in srgb, var(--mode-nav-accent) 20%, transparent),
    0 12px 28px color-mix(in srgb, var(--mode-nav-accent) 15%, transparent);
}

:root[data-theme="dark"] .gantt-toolbar .segmented.compact button.active,
:root[data-theme="dark"] .calendar-toolbar .segmented.compact button.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 32%, transparent), rgba(15, 23, 42, 0.46) 72%),
    rgba(15, 23, 42, 0.72);
  color: #ffffff;
}

.gantt-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--muted);
}

.legend-dot.overdue {
  background: #ef4444;
}

.legend-dot.critical {
  background: #7c3aed;
}

.gantt-canvas {
  position: relative;
  min-width: max-content;
}

.gantt-dependencies {
  position: absolute;
  top: 42px;
  left: 0;
  z-index: 3;
  width: 100%;
  height: calc(100% - 42px);
  pointer-events: none;
  overflow: visible;
}

.dependency-line {
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
  opacity: 0.7;
}

.dependency-line.conflict {
  stroke: #ef4444;
  stroke-dasharray: 5 4;
}

.gantt-dependencies marker path {
  fill: #64748b;
}

.tree-view-layout {
  display: grid;
  gap: 10px;
}

.tree-toolbar,
.tree-summary,
.workflow-tree {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.tree-toolbar > div:first-child {
  display: grid;
  gap: 2px;
}

.tree-toolbar strong {
  color: var(--text);
}

.tree-toolbar span {
  color: var(--muted);
}

.tree-scope-controls {
  flex: 1 1 460px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 8px;
}

.tree-scope-controls label {
  display: grid;
  gap: 4px;
}

.tree-scope-controls label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tree-scope-controls select {
  min-height: 36px;
}

.tree-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.inline-check {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  background: var(--control);
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}

.inline-check input {
  width: auto;
  min-height: 0;
}

.tree-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}

.tree-summary article {
  padding: 12px;
  border-right: 1px solid var(--line);
}

.tree-summary article:last-child {
  border-right: 0;
}

.tree-summary strong,
.tree-summary span {
  display: block;
}

.tree-summary strong {
  color: var(--text);
  font-size: 1.2rem;
}

.tree-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.workflow-tree {
  padding: 8px;
  overflow: auto;
}

.tree-node {
  min-width: 0;
}

.tree-node-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(180px, 1fr) auto minmax(120px, auto);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tree-accent, var(--primary));
  border-radius: 8px;
  padding: 7px 8px;
  background: var(--panel-soft);
}

.tree-node + .tree-node,
.tree-node-children {
  margin-top: 8px;
}

.tree-node-children {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  border-left: 1px dashed var(--line);
  margin-left: 13px;
}

.tree-level-1 > .tree-node-main {
  background: color-mix(in srgb, var(--panel-soft) 86%, var(--primary) 14%);
}

.tree-level-2 > .tree-node-main {
  background: var(--control);
}

.tree-level-3 > .tree-node-main,
.tree-level-4 > .tree-node-main,
.tree-level-5 > .tree-node-main {
  background: var(--panel);
}

.tree-node-toggle,
.tree-node-spacer {
  width: 24px;
  height: 24px;
}

.tree-node-toggle {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control);
  color: var(--text);
  display: grid;
  place-items: center;
  font-weight: 900;
  cursor: pointer;
}

.tree-node-toggle span,
.gantt-tree-toggle span,
.portfolio-v2-tree-toggle span {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 160ms ease;
}

.tree-node-toggle.is-collapsed span,
.gantt-tree-toggle.is-collapsed span,
.portfolio-v2-tree-toggle.is-collapsed span {
  transform: rotate(-45deg) translateX(-1px);
}

.tree-node-content {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tree-node-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
}

.tree-node-kind {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.tree-node-meta,
.tree-node-chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tree-node-meta {
  color: var(--muted);
  font-size: 0.78rem;
}

.tree-node-meta span:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--line-strong);
}

.tree-node-count {
  justify-self: end;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.tree-node-chips {
  justify-content: flex-end;
}

.milestone-view-layout {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.milestone-toolbar,
.milestone-summary,
.milestone-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.milestone-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.milestone-toolbar > div:first-child {
  flex: 1 1 220px;
  min-width: min(100%, 220px);
  display: grid;
  gap: 2px;
}

.milestone-toolbar strong {
  color: var(--text);
}

.milestone-toolbar span {
  color: var(--muted);
}

.milestone-scope-controls {
  flex: 1 1 360px;
  min-width: min(100%, 280px);
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
}

.milestone-toolbar > .primary-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.milestone-scope-controls label {
  display: grid;
  gap: 4px;
}

.milestone-scope-controls label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.milestone-scope-controls select {
  min-height: 36px;
}

.milestone-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}

.milestone-summary article {
  padding: 12px;
  border-right: 1px solid var(--line);
}

.milestone-summary article:last-child {
  border-right: 0;
}

.milestone-summary strong,
.milestone-summary span {
  display: block;
}

.milestone-summary strong {
  font-size: 1.2rem;
  color: var(--text);
}

.milestone-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.milestone-list {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.milestone-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--milestone-accent, var(--primary));
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-soft);
}

.milestone-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.milestone-card-main > div:first-child {
  min-width: 0;
}

.milestone-card h3,
.milestone-card p {
  margin: 0;
}

.milestone-card h3 {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.milestone-card p {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.milestone-card-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.milestone-card-meta span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--control);
  min-width: 0;
}

.milestone-card-meta strong {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.milestone-progress {
  display: grid;
  gap: 6px;
}

.milestone-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.milestone-progress strong {
  color: var(--text);
}

.milestone-ticket-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
}

.milestone-ticket-links button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.78rem;
  font-weight: 800;
}

@media (max-width: 980px) {
  .tree-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .milestone-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tree-scope-controls {
    flex-basis: auto;
    grid-template-columns: 1fr;
  }

  .milestone-scope-controls {
    flex-basis: auto;
    grid-template-columns: 1fr;
  }

  .tree-toolbar-actions {
    justify-content: flex-start;
  }

  .gantt-toolbar {
    flex-wrap: wrap;
    min-width: 0;
  }

  .gantt-scope-controls {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .tree-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .milestone-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tree-summary article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .milestone-summary article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .tree-node-main {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .milestone-card-main {
    display: grid;
  }

  .tree-node-count,
  .tree-node-chips {
    grid-column: 2;
    justify-self: start;
    justify-content: flex-start;
  }
}

.calendar-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: auto;
}

.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.calendar-toolbar label {
  min-width: 150px;
}

.calendar-toolbar strong {
  margin-left: auto;
  font-size: 1rem;
}

.calendar-toolbar [aria-pressed="true"] {
  border-color: rgba(37, 99, 235, 0.7);
  background: rgba(37, 99, 235, 0.14);
}

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.calendar-layout.detail-open {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  min-height: 680px;
  overflow: auto;
}

.calendar-grid.day-view {
  grid-template-columns: minmax(320px, 1fr);
  min-height: 520px;
}

.calendar-grid.week-view {
  min-height: 520px;
}

.calendar-grid.quarter-view {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 12px;
  min-height: 720px;
}

.calendar-grid.year-view {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 12px;
  min-height: 820px;
}

.calendar-grid.day-view .calendar-day {
  min-height: 480px;
}

.calendar-grid.quarter-view .calendar-day,
.calendar-grid.year-view .calendar-day {
  min-height: 96px;
}

.calendar-month-section {
  min-width: 760px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.calendar-month-heading {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel-soft);
}

.calendar-month-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.calendar-month-heading span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(108px, 1fr));
}

.calendar-day {
  min-height: 112px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px;
  background: var(--panel);
}

.calendar-day.muted-day {
  background: var(--panel-soft);
  color: var(--muted);
}

.calendar-day.today {
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.42);
}

.calendar-day.drag-over {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: -3px;
}

.calendar-day-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.calendar-items {
  display: grid;
  gap: 6px;
}

.calendar-item {
  width: 100%;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 7px;
  padding: 7px;
  background: var(--control);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.calendar-item:hover {
  border-color: var(--line-strong);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
  transform: translateY(-1px);
}

.calendar-item span,
.calendar-item strong {
  display: block;
}

.calendar-item span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-item strong {
  margin-top: 2px;
  font-size: 0.78rem;
  line-height: 1.25;
}

.calendar-item.milestone {
  border-radius: 0;
  transform: skew(-6deg);
}

.calendar-item.project {
  border-style: dashed;
  background: rgba(37, 99, 235, 0.09);
}

.calendar-item.color-critical,
.calendar-item.color-red {
  border-left-color: #dc2626;
}

.calendar-item.color-high,
.calendar-item.color-yellow,
.calendar-item.color-in-progress {
  border-left-color: #f97316;
}

.calendar-item.color-medium,
.calendar-item.color-ready,
.calendar-item.color-review {
  border-left-color: #2563eb;
}

.calendar-item.color-low,
.calendar-item.color-green,
.calendar-item.color-done {
  border-left-color: #16a34a;
}

.calendar-detail-panel {
  border-left: 1px solid var(--line);
  padding: 16px;
  background: var(--panel);
  max-height: calc(100vh - 170px);
  overflow: auto;
}

.workload-layout {
  display: grid;
  gap: 14px;
}

.backlog-toolbar,
.backlog-list-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.backlog-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.3fr) minmax(220px, .8fr) auto;
  align-items: end;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.backlog-heading h3,
.backlog-heading p,
.backlog-list-heading h3,
.backlog-list-heading p {
  margin: 0;
}

.backlog-heading > p:last-child,
.backlog-list-heading p {
  color: var(--muted);
}

.backlog-scope-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
}

.backlog-search {
  min-width: 0;
}

.backlog-list-panel {
  min-width: 0;
  overflow: hidden;
}

.backlog-list-panel + .backlog-list-panel {
  margin-top: 8px;
}

.backlog-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.backlog-list {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.backlog-table {
  width: 100%;
  min-width: 1188px;
  table-layout: fixed;
  border-collapse: collapse;
}

.backlog-column-id { width: 160px; }
.backlog-column-title { width: 320px; }
.backlog-column-project { width: 184px; }
.backlog-column-priority { width: 72px; }
.backlog-column-assignee { width: 152px; }
.backlog-column-due { width: 100px; }
.backlog-column-actions { width: 200px; }

body[data-density="comfortable"] .backlog-table { min-width: 1268px; }
body[data-density="comfortable"] .backlog-column-actions { width: 280px; }

.backlog-table th,
.backlog-table td {
  position: static;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
}

.backlog-table thead th {
  padding-top: 6px;
  padding-bottom: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.backlog-table tbody tr { background: var(--panel); }
.backlog-table tbody tr:hover,
.backlog-table tbody tr:focus-within { background: var(--hover); }
.backlog-table tbody tr:last-child > * { border-bottom: 0; }
.backlog-table .backlog-actions-heading { text-align: right; }

.backlog-ticket-key,
.backlog-ticket-title {
  display: block;
  max-width: 100%;
  min-width: 0;
  border: 0;
  padding: 2px 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 400;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.backlog-ticket-key {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.backlog-ticket-title:hover { color: var(--accent); }

.backlog-ticket-project {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.backlog-project-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("/client/assets/icons/lucide/folder-open.svg") center / contain no-repeat;
}

.backlog-ticket-project > span:last-child,
.backlog-cell-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlog-rework-reason {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
}

.backlog-rework-reason strong {
  color: var(--danger);
  flex: 0 1 auto;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlog-rework-reason span {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlog-ticket-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

.backlog-ticket-actions button {
  min-width: 0;
  min-height: 28px;
  max-width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.backlog-ticket-actions [data-backlog-action="open"] { flex-shrink: 0; }

.ticket-failure-rework {
  border-left: 3px solid var(--danger);
}

.ticket-rework-summary {
  color: var(--muted);
  margin-bottom: 10px;
}

.ticket-rework-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 1180px) {
  .backlog-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backlog-heading {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .backlog-toolbar,
  .backlog-scope-controls {
    grid-template-columns: 1fr;
  }

  .backlog-list-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

.workload-toolbar,
.workload-alerts,
.workload-summary-card,
.workload-user-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.workload-toolbar {
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.workload-toolbar label {
  min-width: 170px;
}

.workload-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.workload-alerts {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.workload-alert-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.workload-alert-heading h3,
.workload-alert-heading p {
  margin: 0;
}

.workload-alert-heading p {
  color: var(--muted);
}

.workload-alert-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.workload-alert-count {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: var(--panel-soft);
}

.workload-alert-count span,
.workload-alert-count strong {
  display: block;
}

.workload-alert-count span {
  color: var(--muted);
  font-weight: 800;
}

.workload-alert-count strong {
  margin-top: 3px;
  font-size: 1.25rem;
}

.workload-alert-count.critical strong {
  color: var(--red);
}

.workload-alert-count.warning strong {
  color: var(--amber);
}

.workload-alert-list {
  display: grid;
  gap: 8px;
}

.workload-alert-row {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(130px, .5fr) minmax(260px, 1.7fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--panel-soft);
}

.workload-alert-row.over,
.workload-alert-row.concurrent {
  border-left-color: var(--red);
}

.workload-alert-row div span {
  display: block;
  color: var(--muted);
}

.workload-alert-row > span,
.workload-alert-row p {
  color: var(--muted);
  margin: 0;
}

.workload-summary-card {
  padding: 14px;
}

.workload-summary-card span,
.workload-summary-card small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.workload-summary-card strong {
  display: block;
  margin: 5px 0;
  font-size: 1.45rem;
}

.workload-board {
  display: grid;
  gap: 14px;
}

.time-estimate-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.time-estimate-summary span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--panel-soft);
  color: var(--muted);
}

.time-estimate-summary strong {
  display: block;
  color: var(--text);
}

.time-estimate-summary .over strong {
  color: var(--red);
}

.timesheet-layout {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.timesheet-entry-panel,
.timesheet-toolbar,
.timesheet-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
}

.timesheet-entry-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 14px;
  align-items: end;
}

.timesheet-entry-panel > div:first-child,
.timesheet-entry-panel .span-2 {
  grid-column: 1 / -1;
}

.timesheet-entry-panel h3,
.timesheet-panel h3,
.timesheet-breakdown h4 {
  margin: 0;
}

.timesheet-entry-panel p {
  margin: 4px 0 0;
  color: var(--muted);
}

.timesheet-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 12px;
  align-items: end;
}

.timesheet-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.timesheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 16px;
}

.timesheet-table-wrap {
  overflow: auto;
}

.timesheet-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.timesheet-table-wrap th,
.timesheet-table-wrap td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.timesheet-breakdown {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.timesheet-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.client-layout,
.billing-layout {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.client-toolbar,
.billing-toolbar,
.invoice-preview-panel,
.invoice-history-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
}

.client-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.client-toolbar-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex: 0 1 520px;
}

.client-search-field {
  display: grid;
  gap: 5px;
  flex: 1 1 280px;
  min-width: 220px;
}

.client-toolbar h3,
.billing-toolbar h3,
.invoice-preview-panel h3,
.invoice-history-panel h3 {
  margin: 0;
}

.client-toolbar p,
.billing-toolbar p,
.invoice-preview-panel p,
.invoice-history-panel p {
  margin: 4px 0 0;
  color: var(--muted);
}

.client-summary,
.billing-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.client-list-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 0;
  min-width: 0;
  overflow: hidden;
}

.client-table-wrap {
  overflow: auto;
  min-width: 0;
}

.client-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  table-layout: fixed;
}

.client-table th,
.client-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}

.client-table th {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.client-table tbody tr:hover {
  background: color-mix(in srgb, var(--panel-soft), transparent 20%);
}

.client-table td:first-child {
  width: 260px;
}

.client-table th:nth-child(2),
.client-table td:nth-child(2) {
  width: 92px;
}

.client-table th:nth-child(3),
.client-table td:nth-child(3) {
  width: 150px;
}

.client-table th:nth-child(4),
.client-table td:nth-child(4) {
  width: 200px;
}

.client-table th:nth-child(5),
.client-table td:nth-child(5) {
  width: 150px;
}

.client-table th:nth-child(6),
.client-table td:nth-child(6),
.client-table th:nth-child(7),
.client-table td:nth-child(7),
.client-table th:nth-child(8),
.client-table td:nth-child(8),
.client-table th:nth-child(9),
.client-table td:nth-child(9) {
  width: 86px;
  text-align: center;
}

.client-table th:nth-child(10),
.client-table td:nth-child(10) {
  width: 94px;
  text-align: center;
}

.client-table td strong,
.client-table td small {
  display: grid;
  gap: 2px;
}

.client-table td small {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 2px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-table td:not(:first-child) {
  white-space: nowrap;
}

.client-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: normal;
  white-space: nowrap;
}

.client-status-chip.is-active {
  background: color-mix(in srgb, var(--success) 18%, var(--chip));
}

.client-status-chip.is-on-hold {
  background: color-mix(in srgb, var(--warning) 20%, var(--chip));
}

.client-status-chip.is-inactive {
  background: color-mix(in srgb, var(--muted) 18%, var(--chip));
}

.client-table .secondary-button {
  min-height: 28px;
  padding: 5px 10px;
  width: auto;
  min-width: 66px;
}

.client-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.client-card-heading h3 {
  margin: 6px 0 3px;
}

.client-card-heading p {
  margin: 0;
  color: var(--muted);
}

.client-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.client-card-metrics span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 8px;
  color: var(--muted);
  font-weight: 800;
}

.client-card-metrics strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}

.client-card-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.client-card-detail span {
  border-radius: 999px;
  background: var(--chip);
  padding: 4px 8px;
}

.billing-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  overflow: visible;
}

.program-lines-panel,
.program-line-detail-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.program-lines-heading,
.program-line-detail-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.program-lines-heading h3,
.program-line-detail-heading h3 {
  margin: 0;
}

.program-lines-heading p,
.program-line-detail-heading p {
  margin: 4px 0 0;
  color: var(--muted);
}

.program-lines-actions,
.program-line-detail-actions,
.program-line-action-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.program-lines-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}

.program-lines-filters label {
  min-width: 0;
}

.program-lines-filters input,
.program-lines-filters select {
  width: 100%;
}

.program-lines-table-wrap,
.program-line-grid-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  min-width: 0;
}

.program-line-grid-wrap.expanded {
  max-height: 72vh;
}

.program-lines-table,
.program-line-resource-table {
  width: 100%;
  min-width: 1420px;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.program-line-resource-table {
  min-width: 1320px;
}

.program-lines-table th,
.program-lines-table td,
.program-line-resource-table th,
.program-line-resource-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.program-lines-table th,
.program-line-resource-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--panel), var(--bg) 20%);
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

.program-lines-table tr.active td {
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

.program-lines-table th:first-child,
.program-lines-table td:first-child {
  width: 88px;
  min-width: 88px;
  text-align: center;
}

.program-lines-table span,
.program-line-resource-table span {
  color: var(--muted);
}

.program-line-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 900;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.program-line-action-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.program-line-open-button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.program-line-open-button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), var(--control) 78%);
}

.program-line-rate-input {
  width: 120px;
  min-width: 0;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.billing-status-pill,
.program-line-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--chip);
  color: var(--text);
  font-weight: 900;
  white-space: nowrap;
}

.program-line-detail-heading > div:first-child {
  min-width: 0;
}

.program-line-detail-heading span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.program-line-action-strip {
  justify-content: flex-start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.program-line-action-strip button[disabled] {
  opacity: 0.65;
}

.program-line-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.hours-cell.active {
  background: color-mix(in srgb, #f59e0b, transparent 82%);
}

.program-line-total-row td {
  background: color-mix(in srgb, var(--red), transparent 88%);
  font-weight: 900;
}

.negative-value {
  color: var(--red);
  font-weight: 900;
}

.billing-toolbar-copy {
  min-width: 0;
  padding-top: 14px;
}

.billing-toolbar-controls {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) repeat(4, minmax(118px, 1fr));
  column-gap: 12px;
  row-gap: 14px;
  align-items: end;
  min-width: 0;
  overflow: visible;
}

.billing-toolbar-controls label,
.billing-toolbar-controls > button {
  min-width: 0;
}

.billing-toolbar-controls label {
  display: grid;
  gap: 5px;
  position: relative;
}

.billing-toolbar-controls input,
.billing-toolbar-controls select {
  width: 100%;
  min-width: 0;
}

.billing-toolbar-controls > button {
  align-self: end;
  justify-self: start;
  min-height: 32px;
  min-width: 170px;
  padding-inline: 18px;
  white-space: nowrap;
}

.billing-toolbar-controls label:has(#invoiceClientSelect) {
  z-index: 30;
}

.billing-toolbar-controls #invoiceClientSelect + .searchable-select-control .searchable-select-menu {
  max-height: 180px;
  min-width: 100%;
  width: max(100%, 260px);
}

.invoice-preview-panel,
.invoice-history-panel {
  display: grid;
  gap: 12px;
}

.invoice-preview {
  min-width: 0;
  overflow: auto;
}

.invoice-document {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.invoice-document-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.invoice-document-heading span,
.invoice-document-heading p,
.invoice-table span {
  color: var(--muted);
}

.invoice-document-heading h3,
.invoice-document-heading p {
  margin: 0;
}

.invoice-document-heading strong {
  display: block;
  text-align: right;
  font-size: 1.35rem;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.invoice-table th,
.invoice-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px;
  text-align: left;
  vertical-align: top;
}

.invoice-table th {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.invoice-total-box {
  justify-self: end;
  width: min(100%, 280px);
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel);
}

.invoice-total-box span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoice-history-row {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 10px;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, auto) auto;
  gap: 12px;
  align-items: center;
}

.invoice-history-row.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 35%);
}

.invoice-history-main,
.invoice-history-total {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.invoice-history-main strong,
.invoice-history-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-history-total {
  justify-items: end;
}

.invoice-history-row small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}

.invoice-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: end;
}

.invoice-history-actions button {
  min-height: 28px;
  padding: 5px 9px;
  white-space: nowrap;
}

.template-layout {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.template-create-panel,
.template-editor-panel,
.template-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
}

.template-create-panel,
.template-editor-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 14px;
  align-items: end;
}

.template-editor-panel {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.template-create-panel > div:first-child,
.template-editor-panel > div:first-child,
.template-editor-panel .span-2 {
  grid-column: 1 / -1;
}

.template-create-panel h3,
.template-editor-panel h3,
.template-section h3 {
  margin: 0;
}

.template-create-panel p,
.template-editor-panel p,
.template-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

.template-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.template-section {
  display: grid;
  gap: 10px;
  align-content: start;
}

.template-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-soft);
}

.template-card span {
  color: var(--muted);
  font-size: 12px;
}

.admin-layout {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.admin-panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.admin-panel h3 {
  margin: 0 0 4px;
}

.admin-panel p {
  color: var(--muted);
  margin: 0 0 14px;
}

.admin-control-panel {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, var(--panel)), var(--panel));
}

.admin-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.admin-control-card {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  background: var(--panel-soft);
}

.admin-control-card.active {
  border-color: color-mix(in srgb, var(--blue) 72%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 34%, transparent);
}

.admin-control-card > .nav-icon {
  color: var(--accent);
}

.admin-control-card strong {
  display: block;
  font-size: 0.94rem;
}

.admin-control-card p {
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-control-card button {
  width: 100%;
  justify-content: center;
}

.panel-heading-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.panel-heading-row > div {
  min-width: 0;
}

.integration-security-note {
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
  font-size: 0.84rem;
  line-height: 1.35;
}

.integration-provider-grid,
.integration-connection-list,
.integration-event-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.tenant-provisioning-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.tenant-provisioning-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
}

.tenant-provisioning-summary article,
.tenant-provisioning-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
}

.tenant-provisioning-summary strong {
  display: block;
  font-size: 1.05rem;
}

.tenant-provisioning-summary span,
.tenant-provisioning-note {
  color: var(--muted);
  font-size: 0.82rem;
}

.tenant-provisioning-form,
.tenant-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
  min-width: 0;
}

.tenant-provisioning-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: end;
}

.tenant-provisioning-form > div:first-child,
.tenant-provisioning-form .span-2,
.tenant-provisioning-form menu {
  grid-column: 1 / -1;
}

.tenant-provisioning-form h4,
.tenant-card h4 {
  margin: 0;
}

.tenant-provisioning-form p,
.tenant-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

.platform-service-value {
  display: flex;
  align-items: center;
  min-height: 32px;
  font-size: 0.9rem;
  font-weight: 600;
}

.tenant-initial-users {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 10px;
}

.tenant-initial-users legend {
  padding: 0;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
}

.tenant-initial-user-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.tenant-initial-user-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(170px, 1.2fr) minmax(130px, 0.9fr) minmax(130px, 0.9fr) 32px;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.tenant-initial-user-row label {
  min-width: 0;
}

.tenant-initial-user-row input,
.tenant-initial-user-row select {
  width: 100%;
}

.tenant-initial-user-remove {
  width: 32px;
  height: 32px;
  align-self: end;
}

@media (max-width: 920px) {
  .tenant-initial-user-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .tenant-initial-user-remove {
    justify-self: end;
  }
}

.tenant-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.tenant-card header,
.tenant-card menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.tenant-card header strong,
.tenant-card header small {
  display: block;
}

.tenant-card header small {
  color: var(--muted);
  margin-top: 3px;
}

.tenant-status {
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.tenant-status.active {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 16%, var(--chip));
}

.tenant-status.warning {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 16%, var(--chip));
}

.tenant-status.danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, var(--chip));
}

.tenant-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 10px;
}

.tenant-event-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.platform-summary-grid,
.platform-dashboard-grid,
.platform-directory-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.platform-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.platform-kpi-card,
.platform-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  min-width: 0;
}

.platform-kpi-card {
  padding: 12px;
}

.platform-kpi-card span,
.platform-kpi-card small {
  display: block;
  color: var(--muted);
  line-height: 1.3;
}

.platform-kpi-card span {
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.platform-kpi-card strong {
  display: block;
  margin: 4px 0;
  font-size: 1.35rem;
}

.platform-control-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%),
    var(--panel-soft);
}

.platform-control-tabs button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
}

.platform-control-tabs button.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 54%, #0b1220));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 20%, transparent);
}

.platform-dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.platform-span-2 {
  grid-column: span 2;
}

.platform-panel {
  padding: 12px;
}

.platform-panel header,
.platform-detail-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.platform-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.platform-detail-heading > div:first-child {
  min-width: 0;
}

.platform-detail-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.platform-panel h4,
.platform-detail-heading h4,
.platform-subsection h4 {
  margin: 0;
}

.platform-panel p,
.platform-detail-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.platform-breakdown-list,
.platform-mini-list,
.platform-tenant-list,
.platform-user-list,
.platform-event-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
}

.platform-breakdown-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(80px, 2fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.platform-breakdown-row div {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--track);
}

.platform-breakdown-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
}

.platform-usage-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 8px;
  margin-top: 12px;
}

.platform-usage-summary article,
.platform-usage-row {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.platform-usage-summary article {
  padding: 10px;
}

.platform-usage-summary span,
.platform-usage-summary small,
.platform-usage-row small {
  display: block;
  color: var(--muted);
  line-height: 1.3;
}

.platform-usage-summary span {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.platform-usage-summary strong {
  display: block;
  margin: 4px 0;
  font-size: 1.25rem;
}

.platform-usage-table {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.platform-usage-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(84px, 0.55fr) minmax(72px, 0.45fr) minmax(92px, 0.55fr) minmax(180px, 1.35fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  color: var(--text);
}

.platform-usage-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.platform-usage-header {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.platform-mini-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  padding: 10px;
  cursor: pointer;
}

.platform-tenant-list button {
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: minmax(190px, 1.55fr) 86px 78px 104px 82px 104px minmax(150px, 1.15fr);
  width: 100%;
  min-height: 46px;
  min-width: 820px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  background: transparent;
  padding: 8px 10px;
  cursor: pointer;
}

.platform-tenant-list {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  gap: 0;
  max-height: min(68vh, 760px);
  overflow: auto;
}

.platform-tenant-list-header {
  align-items: center;
  background: color-mix(in srgb, var(--panel-soft) 92%, var(--accent) 8%);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  font-size: 0.68rem;
  font-weight: 900;
  gap: 10px;
  grid-template-columns: minmax(190px, 1.55fr) 86px 78px 104px 82px 104px minmax(150px, 1.15fr);
  letter-spacing: 0;
  min-width: 820px;
  padding: 7px 10px;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.platform-mini-list button.active,
.platform-tenant-list button.active,
.platform-tenant-list button:hover,
.platform-mini-list button:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.platform-tenant-list button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.platform-mini-list strong,
.platform-mini-list span,
.platform-mini-list small,
.platform-tenant-list strong,
.platform-tenant-list small,
.platform-tenant-list span,
.platform-tenant-list em {
  display: block;
  min-width: 0;
}

.platform-mini-list small,
.platform-tenant-list small,
.platform-tenant-list em {
  color: var(--muted);
}

.platform-tenant-list em {
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.35;
}

.platform-tenant-row-heading {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.platform-tenant-row-heading .tenant-status {
  flex: 0 0 auto;
}

.platform-tenant-list-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.platform-tenant-list-main strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.platform-tenant-list-main strong,
.platform-tenant-list-main small,
.platform-tenant-description,
.platform-tenant-list em,
.platform-tenant-list button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-tenant-description {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.platform-tenant-meta-row {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-width: 0;
}

.platform-tenant-meta-row span {
  background: color-mix(in srgb, var(--chip) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  min-height: 44px;
  padding: 6px 8px;
}

.platform-tenant-meta-row strong {
  color: var(--text);
  font-size: 0.64rem;
  letter-spacing: 0;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.platform-tenant-scale small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
}

.platform-event-list article,
.platform-user-list article {
  display: grid;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  min-width: 0;
}

.platform-user-list article > div {
  min-width: 0;
}

.platform-user-list article strong,
.platform-user-list article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-event-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.platform-user-list article {
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) auto;
}

.platform-admin-user-card {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}

.platform-user-role-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.platform-boundary-note {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--panel);
  padding: 10px;
  color: var(--muted);
  line-height: 1.35;
}

.platform-boundary-note strong {
  color: var(--text);
}

.platform-boundary-note span {
  display: block;
}

.platform-admin-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.45fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  min-width: 0;
}

.platform-event-list strong,
.platform-user-list strong,
.platform-event-list small,
.platform-user-list small {
  display: block;
}

.platform-event-list small,
.platform-user-list small {
  color: var(--muted);
}

.platform-directory-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.platform-tenant-detail-backdrop {
  position: fixed;
  z-index: 55;
  top: 0;
  bottom: 0;
  left: 300px;
  right: 320px;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 84px 24px 24px;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(2px);
}

body.sidebar-collapsed .platform-tenant-detail-backdrop {
  left: 64px;
}

body:has(.shortcut-rail.collapsed) .platform-tenant-detail-backdrop {
  right: 58px;
}

.platform-tenant-detail-dialog {
  width: min(1080px, 100%);
  max-height: calc(100vh - 108px);
  min-width: 0;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.platform-tenant-detail-scroll {
  display: grid;
  gap: 14px;
  min-width: 0;
  max-height: inherit;
  overflow: auto;
  padding: 16px;
  scrollbar-gutter: stable;
}

.platform-signup-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.platform-signup-settings {
  margin-bottom: 12px;
}

.platform-signup-settings-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.platform-signup-settings-form menu {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.platform-signup-settings-form .inline-check,
.platform-auto-provision-note {
  width: 100%;
  height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--control);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.platform-signup-settings-form .inline-check input,
.platform-auto-provision-note input {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  min-height: 13px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
}

.platform-signup-settings-form .inline-check span,
.platform-auto-provision-note span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.platform-signup-domains-field {
  grid-column: span 2;
}

.platform-signup-intake-backdrop {
  position: fixed;
  z-index: 56;
  top: 0;
  bottom: 0;
  left: 300px;
  right: 320px;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 84px 24px 24px;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(2px);
}

body.sidebar-collapsed .platform-signup-intake-backdrop {
  left: 64px;
}

body:has(.shortcut-rail.collapsed) .platform-signup-intake-backdrop {
  right: 58px;
}

.platform-signup-intake-dialog {
  width: min(760px, 100%);
  max-height: calc(100vh - 108px);
  min-width: 0;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  box-shadow: var(--shadow);
  overflow: auto;
  padding: 16px;
  scrollbar-gutter: stable;
}

.platform-signup-intake-form menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.platform-signup-form .span-2,
.platform-signup-form menu {
  grid-column: 1 / -1;
}

.platform-signup-controls {
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.5fr);
}

.platform-signup-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}

.platform-signup-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.platform-signup-card header,
.platform-signup-card menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.platform-signup-card strong,
.platform-signup-card small {
  display: block;
  min-width: 0;
}

.platform-signup-card small,
.platform-provisioned-note {
  color: var(--muted);
}

.platform-signup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.platform-signup-meta span {
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.platform-signup-card p {
  margin: 0;
}

.platform-signup-card menu {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.platform-search-input {
  margin-top: 12px;
}

.platform-directory-controls {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}

.platform-directory-controls label {
  flex: 1 1 132px;
  min-width: 132px;
}

.platform-directory-controls .platform-directory-search-control {
  flex: 2 1 240px;
  min-width: min(100%, 240px);
}

.platform-directory-controls label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.platform-directory-controls .platform-search-input {
  margin-top: 0;
}

.platform-section-heading,
.platform-lifecycle-card,
.platform-tenant-meta-grid {
  min-width: 0;
}

.platform-section-heading {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  padding: 12px;
}

.platform-section-heading h4,
.platform-lifecycle-card h4 {
  margin: 0;
}

.platform-section-heading p,
.platform-lifecycle-card p,
.platform-tenant-meta-card small {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.platform-tenant-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 10px;
}

.platform-tenant-meta-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  min-width: 0;
}

.platform-tenant-meta-card span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.platform-tenant-meta-card strong {
  display: block;
  margin-top: 4px;
  font-size: 1.05rem;
}

.platform-lifecycle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warning) 12%, transparent), transparent 46%),
    var(--panel-soft);
  padding: 12px;
}

.platform-lifecycle-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.muted {
  color: var(--muted);
}

.platform-tenant-form {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.platform-tenant-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.platform-tenant-form .span-2,
.platform-tenant-form menu {
  grid-column: 1 / -1;
}

.platform-subsection {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.platform-tenant-products-section {
  padding: 2px 0;
}

.platform-product-table {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.platform-product-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 0.8fr) minmax(150px, 0.7fr) minmax(230px, 1.25fr);
  min-width: 0;
  border-top: 1px solid var(--line);
}

.platform-product-row:first-child {
  border-top: 0;
}

.platform-product-row > span {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  overflow-wrap: anywhere;
}

.platform-product-row > span + span {
  border-left: 1px solid var(--line);
}

.platform-product-row small {
  color: var(--muted);
}

.platform-product-access {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.platform-product-state {
  color: var(--text);
  font-weight: 800;
  line-height: 1.25;
}

.platform-product-state.is-muted {
  color: var(--muted);
}

.platform-product-action {
  min-height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}

.platform-runtime-setup {
  display: grid;
  gap: 12px;
  padding: 14px 2px 2px;
  border-top: 1px solid var(--line);
}

.platform-runtime-setup-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.platform-runtime-setup-heading p {
  max-width: 720px;
  margin: 4px 0 0;
  color: var(--muted);
}

.platform-runtime-setup-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.platform-runtime-setup-meta div {
  min-width: 0;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
}

.platform-runtime-setup-meta dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.platform-runtime-setup-meta dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.platform-runtime-setup-actions {
  display: flex;
  justify-content: flex-start;
}

.platform-product-heading {
  background: color-mix(in srgb, var(--control) 82%, transparent);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.platform-product-cell-label {
  display: none;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.platform-tenant-support-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  padding: 12px;
}

.platform-support-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.platform-support-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.platform-support-user-row,
.platform-support-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  min-width: 0;
}

.platform-support-user-row strong,
.platform-support-log-row strong,
.platform-support-user-row small,
.platform-support-log-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.platform-support-badges,
.platform-support-log-row div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  color: var(--muted);
}

.platform-support-badges b,
.platform-support-log-row span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--control) 72%, transparent);
  font-size: 0.72rem;
  line-height: 1.2;
}

.platform-support-reset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

@media (max-width: 1050px) {
  .platform-dashboard-grid,
  .platform-directory-grid {
    grid-template-columns: 1fr;
  }

  .platform-span-2 {
    grid-column: auto;
  }

  .platform-user-list article,
  .platform-admin-user-card,
  .platform-admin-form,
  .platform-signup-settings-form,
  .platform-signup-form,
  .platform-support-search,
  .platform-support-user-row,
  .platform-support-log-row,
  .platform-support-reset,
  .platform-signup-controls {
    grid-template-columns: 1fr;
  }

  .platform-usage-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .platform-tenant-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-product-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-product-heading {
    display: none;
  }

  .platform-product-row > span:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .platform-product-row > span:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .platform-product-cell-label {
    display: block;
  }

  .platform-signup-domains-field {
    grid-column: auto;
  }

  .platform-signup-settings-form menu {
    justify-content: stretch;
  }

  .platform-signup-settings-form menu button {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .platform-product-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-product-row > span + span {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .platform-product-access {
    justify-content: flex-start;
  }

  .platform-runtime-setup-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

.integration-category {
  min-width: 0;
}

.integration-category h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.integration-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: 10px;
  min-width: 0;
}

.integration-card,
.integration-connection-row,
.integration-event-row {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.integration-card {
  display: grid;
  gap: 10px;
}

.integration-card header,
.integration-connection-row,
.integration-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.integration-card strong,
.integration-connection-row strong,
.integration-event-row strong {
  display: block;
}

.integration-card small,
.integration-connection-row small,
.integration-event-row small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.3;
}

.integration-status {
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.integration-status.active {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 16%, var(--chip));
}

.integration-status.mock {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 16%, var(--chip));
}

.integration-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.integration-capabilities span {
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.integration-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
}

.integration-actions button {
  min-width: max-content;
}

.integration-event-row {
  grid-template-columns: minmax(0, 1fr) max-content max-content;
}

.integration-event-row > span,
.integration-event-row time {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.page-visibility-list {
  display: grid;
  gap: 10px;
}

.page-visibility-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(112px, max-content) minmax(0, 2fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-soft);
}

.page-visibility-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page-visibility-main .nav-icon {
  color: var(--accent);
  flex: 0 0 auto;
}

.page-visibility-main strong,
.page-visibility-main small {
  display: block;
}

.page-visibility-main small {
  color: var(--muted);
  font-size: 0.76rem;
}

.page-enabled-toggle {
  justify-content: flex-start;
  margin: 0;
}

.page-role-grid {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-gutter: stable;
}

.role-chip {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--control);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
}

.role-chip input {
  width: 14px;
  height: 14px;
}

.visibility-matrix-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  overflow: hidden;
}

.visibility-matrix-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px) minmax(150px, 190px) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.visibility-matrix-toolbar h3,
.visibility-matrix-toolbar p {
  margin: 0;
}

.visibility-matrix-toolbar p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.visibility-matrix-scroll {
  overflow: auto;
  max-width: 100%;
}

.visibility-matrix-header,
.visibility-matrix-row {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 90px repeat(7, 82px);
  min-width: 1000px;
}

.visibility-matrix-header {
  position: sticky;
  top: 0;
  z-index: 1;
  align-items: end;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 82%, var(--panel-soft));
}

.visibility-module-heading,
.visibility-column-heading {
  padding: 12px 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.78rem;
  font-weight: 900;
}

.visibility-column-heading {
  text-align: center;
}

.visibility-column-heading strong,
.visibility-column-heading span {
  display: block;
}

.visibility-column-heading strong {
  color: var(--text);
}

.visibility-column-heading span {
  margin-top: 3px;
  text-transform: none;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.visibility-category-row {
  min-width: 1000px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-soft) 88%, var(--panel));
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visibility-matrix-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.visibility-matrix-row:last-child {
  border-bottom: 0;
}

.visibility-module-cell {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  min-width: 0;
}

.visibility-icon-tile {
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
  color: var(--accent);
}

.visibility-module-cell strong,
.visibility-module-cell span {
  display: block;
}

.visibility-module-cell strong {
  line-height: 1.15;
}

.visibility-module-cell span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.visibility-toggle-cell,
.visibility-check-cell {
  min-width: 0;
  min-height: 66px;
  display: grid;
  place-items: center;
  border-left: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.visibility-toggle-cell input {
  appearance: none;
  width: 42px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--control);
  position: relative;
  cursor: pointer;
}

.visibility-toggle-cell input::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 2px;
  left: 2px;
  border-radius: 999px;
  background: var(--muted);
  transition: left 140ms ease, background 140ms ease;
}

.visibility-toggle-cell input:checked {
  border-color: var(--blue);
  background: var(--blue);
}

.visibility-toggle-cell input:checked::before {
  left: 20px;
  background: #fff;
}

.visibility-check-cell input {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--line-strong);
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--control);
  cursor: pointer;
}

.visibility-check-cell input::before {
  content: "";
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease;
}

.visibility-check-cell input:checked {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 24%, transparent);
}

.visibility-check-cell input:checked::before {
  transform: rotate(45deg) scale(1);
}

.visibility-toggle-cell input:disabled,
.visibility-check-cell input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.role-landing-list {
  display: grid;
  gap: 10px;
}

.role-landing-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-soft);
}

.role-landing-row strong,
.role-landing-row small {
  display: block;
}

.role-landing-row small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.role-matrix {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 100%;
  overflow: hidden;
  background: var(--panel-soft);
}

.role-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  padding: 12px;
}

.role-permission-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: var(--panel);
}

.role-permission-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.role-permission-card strong,
.role-permission-card small {
  display: block;
}

.role-permission-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 4px;
}

.role-permission-card header > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.74rem;
  font-weight: 900;
}

.role-permission-list {
  max-height: 260px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: start;
  padding: 1px 4px 1px 1px;
  scrollbar-gutter: stable;
}

.permission-pill {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: var(--control);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.permission-pill > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 5px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.66rem;
}

.permission-pill.allowed {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
}

.permission-pill.blocked {
  opacity: 0.62;
}

.role-user-list {
  display: grid;
  gap: 10px;
}

.role-user-toolbar {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 0.9fr) auto;
  gap: 12px;
  min-width: 0;
  padding: 12px;
}

.role-user-toolbar strong,
.role-user-toolbar span {
  display: block;
}

.role-user-toolbar span {
  color: var(--muted);
  font-size: 0.84rem;
}

.role-user-search {
  display: grid;
  min-width: 0;
}

.role-user-search input {
  min-width: 0;
  width: 100%;
}

.role-user-toolbar-actions {
  display: flex;
  justify-content: flex-end;
}

.role-user-row {
  align-items: start;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(280px, 1fr) minmax(170px, 0.34fr) minmax(250px, 0.54fr);
  min-width: 0;
  padding: 10px;
}

.role-user-row.locked {
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
}

.role-user-permissions { display: grid; gap: 10px; min-width: 0; }
.remote-access-toggle { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; }
.remote-access-toggle input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: 0; }
.remote-access-toggle span { overflow-wrap: anywhere; }
.remote-access-note { font-size: 13px; color: var(--muted); }

.role-user-profile {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-width: 0;
}

.role-user-profile > div {
  min-width: 0;
}

.role-user-profile strong,
.role-user-profile small {
  overflow-wrap: anywhere;
}

.role-user-row small {
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.compact-user-row .avatar,
.compact-user-row .profile-photo {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

.role-user-meta,
.role-user-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.role-user-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
}

.role-user-meta span,
.role-user-program-summary > span {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 4px 8px;
}

.role-user-program-summary {
  display: contents;
}

.role-user-actions {
  align-self: center;
  justify-content: stretch;
}

.role-user-control {
  align-content: start;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.role-user-control > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.role-user-control select {
  min-width: 0;
  width: 100%;
}

.patch-sentinel-access-toolbar {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
  margin-bottom: 10px;
  padding: 12px;
}

.patch-sentinel-access-toolbar strong,
.patch-sentinel-access-toolbar span {
  display: block;
}

.patch-sentinel-access-toolbar span,
.patch-sentinel-admin-identity small {
  color: var(--muted);
  font-size: 0.8rem;
}

.patch-sentinel-access-toolbar input {
  width: 100%;
}

.patch-sentinel-access-message {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.patch-sentinel-access-message p {
  margin: 5px 0 0;
}

.patch-sentinel-admin-list {
  display: grid;
  gap: 8px;
}

.patch-sentinel-admin-row {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 0.22fr) minmax(130px, auto);
  min-width: 0;
  padding: 10px 12px;
}

.patch-sentinel-admin-identity {
  display: grid;
  min-width: 0;
}

.patch-sentinel-admin-identity strong,
.patch-sentinel-admin-identity small {
  overflow-wrap: anywhere;
}

.patch-sentinel-admin-state {
  display: grid;
  gap: 2px;
}

.patch-sentinel-admin-state span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.remote-support-policy-form {
  display: grid;
  gap: 14px;
}

.remote-support-policy-summary {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel-soft);
}

.remote-support-policy-summary[data-enabled="true"] {
  border-left-color: var(--green);
}

.remote-support-policy-summary strong,
.remote-support-policy-summary span {
  display: block;
}

.remote-support-policy-summary span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}

.remote-support-policy-summary .settings-toggle {
  align-items: center;
  display: flex;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
}

.remote-support-policy-summary .settings-toggle span {
  margin: 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.remote-support-policy-section {
  margin: 0;
}

.remote-support-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.remote-support-policy-option {
  align-items: start;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: var(--panel-soft);
  cursor: pointer;
}

.remote-support-policy-option input {
  margin-top: 2px;
}

.remote-support-policy-option span,
.remote-support-policy-option strong,
.remote-support-policy-option small {
  display: block;
  min-width: 0;
}

.remote-support-policy-option strong {
  color: var(--text);
  font-size: 0.8rem;
}

.remote-support-policy-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.remote-support-policy-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.35fr);
  gap: 10px;
}

.remote-support-policy-fields label {
  display: grid;
  gap: 5px;
}

.remote-support-policy-fields label > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.remote-support-policy-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.remote-support-policy-actions > span {
  color: var(--muted);
  font-size: 0.78rem;
}

.remote-support-policy-actions > span[data-state="success"] {
  color: var(--green);
}

@media (max-width: 720px) {
  .patch-sentinel-access-toolbar,
  .patch-sentinel-admin-row,
  .remote-support-policy-summary,
  .remote-support-policy-grid,
  .remote-support-policy-fields {
    grid-template-columns: 1fr;
  }

  .patch-sentinel-admin-row button {
    width: 100%;
  }
}

.tenant-product-enrollment-summary {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px 16px;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px 10px;
}

.tenant-product-enrollment-summary span,
.tenant-product-enrollment-main small,
.tenant-product-enrollment-state small {
  color: var(--muted);
}

.tenant-product-enrollment-list {
  display: grid;
  gap: 8px;
}

.tenant-product-enrollment-row {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(88px, 0.28fr) minmax(180px, 0.55fr) auto;
  min-width: 0;
  padding: 12px;
}

.tenant-product-enrollment-main,
.tenant-product-enrollment-state {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tenant-product-enrollment-main strong,
.tenant-product-enrollment-main small,
.tenant-product-enrollment-state strong,
.tenant-product-enrollment-state small {
  overflow-wrap: anywhere;
}

.tenant-product-enrollment-main small,
.tenant-product-enrollment-state small {
  font-size: 0.76rem;
}

.tenant-product-enrollment-state > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tenant-product-enrollment-row > button {
  justify-self: end;
  white-space: nowrap;
}

.demo-mode-notice,
.demo-mode-row,
.demo-mode-list-heading {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 6px;
}

.demo-mode-notice {
  display: grid;
  gap: 4px;
  padding: 12px;
  margin-bottom: 12px;
}

.demo-mode-notice span,
.demo-mode-main span,
.demo-mode-list-heading span {
  color: var(--muted);
  font-size: 12px;
}

.demo-mode-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
}

.demo-mode-form label,
.demo-mode-list-heading > div,
.demo-mode-main {
  display: grid;
  gap: 5px;
}

.demo-mode-list {
  display: grid;
  gap: 8px;
}

.demo-mode-list-heading,
.demo-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.demo-mode-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 900px) {
  .demo-mode-form {
    grid-template-columns: 1fr 1fr;
  }

  .demo-mode-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.tenant-product-enrollment-ready {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding-top: 12px;
}

.tenant-product-enrollment-ready p {
  color: var(--muted);
  margin: 4px 0 0;
}

.tenant-product-device-inventory {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
}

.tenant-product-device-heading {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.tenant-product-device-heading > div,
.tenant-product-device-cell,
.tenant-product-device-products,
.tenant-product-device-products > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tenant-product-device-heading span,
.tenant-product-device-cell > span,
.tenant-product-device-products > span:first-child,
.tenant-product-device-cell small,
.tenant-product-device-products small {
  color: var(--muted);
}

.tenant-product-device-heading > span,
.tenant-product-device-cell > span,
.tenant-product-device-products > span:first-child {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tenant-product-device-row {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, 0.8fr) minmax(170px, 0.8fr) minmax(190px, 1fr) minmax(130px, 0.55fr) auto;
  min-width: 0;
  padding: 12px;
}

.tenant-product-device-cell strong,
.tenant-product-device-cell small,
.tenant-product-device-products strong,
.tenant-product-device-products small {
  overflow-wrap: anywhere;
}

.tenant-product-device-cell small,
.tenant-product-device-products small {
  font-size: 0.76rem;
}

.tenant-product-device-products > span:not(:first-child) + span {
  border-top: 1px solid var(--line);
  margin-top: 3px;
  padding-top: 6px;
}

.tenant-product-device-row > button {
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 880px) {
  .tenant-product-enrollment-row,
  .tenant-product-device-row {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.65fr);
  }

  .tenant-product-enrollment-row > button,
  .tenant-product-device-row > button {
    justify-self: stretch;
  }

  .tenant-product-enrollment-ready {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .tenant-product-enrollment-summary,
  .tenant-product-enrollment-row,
  .tenant-product-device-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .tenant-product-enrollment-summary,
  .tenant-product-device-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .tenant-product-enrollment-ready {
    grid-column: 1;
  }
}

.team-admin-list {
  display: grid;
  gap: 10px;
}

.team-admin-card {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.team-admin-card.archived {
  opacity: 0.68;
}

.team-admin-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.team-admin-main > strong,
.team-admin-main > small {
  overflow-wrap: anywhere;
}

.team-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.team-admin-meta span {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 4px 8px;
}

.team-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: end;
}

.team-member-editor {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
}

.team-member-panel {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.field-label {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  font-weight: 900;
}

.team-member-panel small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
}

.team-member-list,
.team-member-results {
  display: grid;
  gap: 6px;
  max-height: 230px;
  min-height: 96px;
  overflow: auto;
}

.team-member-readonly-row,
.team-member-result-row {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
}

.team-member-readonly-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.team-member-result-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.team-member-result-row.selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--control));
}

.team-member-readonly-row strong,
.team-member-readonly-row small,
.team-member-result-row strong,
.team-member-result-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-readonly-row strong,
.team-member-result-row strong {
  color: var(--text);
  font-size: 0.85rem;
}

.searchable-select-source {
  display: none !important;
}

.searchable-select-control {
  display: grid;
  min-width: 0;
  position: relative;
  width: 100%;
}

.searchable-select-input {
  min-width: 0;
  padding-right: 34px;
  width: 100%;
}

.searchable-select-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.searchable-select-caret {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  height: calc(100% - 8px);
  justify-content: center;
  min-width: 30px;
  padding: 0;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.searchable-select-caret::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 160ms ease;
}

.searchable-select-control.open .searchable-select-caret::before {
  transform: rotate(225deg) translateY(-1px);
}

.searchable-select-caret:hover,
.searchable-select-control.open .searchable-select-caret {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.searchable-select-menu {
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.34);
  display: grid;
  gap: 3px;
  left: 0;
  max-height: 230px;
  max-width: min(420px, calc(100vw - 24px));
  min-width: 100%;
  overflow: auto;
  padding: 7px;
  position: absolute;
  right: auto;
  top: calc(100% + 6px);
  width: max(100%, 300px);
  z-index: 12000;
}

.searchable-select-menu[hidden] {
  display: none;
}

.searchable-select-hint {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--muted);
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 5px;
  letter-spacing: 0;
  line-height: 1.15;
  min-height: 24px;
  overflow: hidden;
  padding: 2px 7px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-select-option,
.searchable-select-empty {
  border-radius: 6px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.25;
  min-width: 0;
  padding: 7px 9px;
  text-align: left;
}

.searchable-select-option {
  background: var(--control);
  border: 0;
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-height: 30px;
}

.searchable-select-option strong {
  font-size: 0.86rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-select-option span,
.searchable-select-empty {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.searchable-select-option:hover,
.searchable-select-option:focus,
.searchable-select-option.selected {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  outline: none;
}

:root[data-theme="dark"] .searchable-select-menu,
:root[data-theme="dark"] .searchable-select-option {
  background: #18181b;
}

:root[data-theme="dark"] .searchable-select-option:hover,
:root[data-theme="dark"] .searchable-select-option:focus,
:root[data-theme="dark"] .searchable-select-option.selected {
  background: #1f2937;
}

:root[data-theme="dark"] .searchable-select-hint {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
}

.role-user-programs {
  align-self: stretch;
}

.role-user-programs > small {
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 0;
}

.program-access-picker {
  background: color-mix(in srgb, var(--control) 72%, var(--panel-soft));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
}

.program-access-search {
  min-height: 32px;
  padding: 6px 10px;
  width: 100%;
}

.program-access-list {
  display: grid;
  gap: 5px;
  max-height: 106px;
  min-width: 0;
  overflow: auto;
  padding-right: 2px;
}

.program-access-option {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 34px;
  min-width: 0;
  padding: 6px 8px;
}

.program-access-option.selected {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--control));
}

.program-access-option.inherited {
  background: color-mix(in srgb, var(--green) 10%, var(--control));
}

.program-access-option input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.program-access-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-access-state {
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.66rem;
  font-weight: 900;
  padding: 3px 8px;
  white-space: nowrap;
}

.program-access-option.selected .program-access-state,
.program-access-option.inherited .program-access-state {
  background: var(--accent);
  color: #ffffff;
}

.program-access-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 10px;
  text-align: center;
}

.role-user-actions button {
  min-height: 36px;
  padding-inline: 8px;
  width: 100%;
}

#userSettingsDialog {
  width: min(560px, calc(100vw - 28px));
}

#userSessionDialog {
  width: min(460px, calc(100vw - 28px));
}

.session-review-card {
  max-width: none;
}

.session-review-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.user-settings-card {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.user-settings-profile {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 14px;
}

.user-settings-avatar-preview {
  display: grid;
  place-items: center;
}

.user-settings-photo-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.user-settings-display {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding-block: 8px;
}

.user-settings-display .theme-switch {
  color: var(--text);
  min-height: 36px;
  width: 100%;
}

.user-settings-display .theme-switch:hover {
  color: var(--text);
}

.user-settings-photo-actions strong,
.user-settings-photo-actions p {
  margin: 0;
}

.user-settings-photo-actions p {
  color: var(--muted);
  font-size: 0.88rem;
}

.user-settings-card label,
.user-settings-card input {
  min-width: 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-section h3,
.settings-section p {
  margin: 0;
}

.settings-section p {
  color: var(--muted);
  font-size: 0.88rem;
}

.report-layout {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.operational-report-workspace {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.operational-report-heading,
.operational-report-result-heading,
.operational-report-action-row,
.operational-report-panel > header,
.report-section-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.operational-report-heading h3,
.operational-report-heading p,
.operational-report-result-heading h3,
.operational-report-result-heading p,
.operational-report-panel h4,
.operational-report-panel header span,
.report-section-heading h3 {
  margin: 0;
}

.operational-report-heading h3,
.operational-report-result-heading h3 {
  font-size: 1.08rem;
}

.operational-report-freshness,
.operational-report-result-heading p,
.operational-report-panel header span,
.operational-report-status {
  color: var(--muted);
  font-size: 0.78rem;
}

.operational-report-freshness {
  text-align: right;
}

.operational-report-presets {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.operational-report-preset {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  min-height: 36px;
  padding: 7px 10px;
}

.operational-report-preset:hover,
.operational-report-preset:focus-visible {
  color: var(--text);
  outline: none;
}

.operational-report-preset.active {
  border-bottom-color: var(--blue);
  color: var(--text);
}

.operational-report-controls {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns:
    minmax(120px, 0.8fr)
    minmax(224px, 1.35fr)
    repeat(2, minmax(130px, 1fr))
    max-content;
}

.operational-report-controls label,
.operational-report-filter-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.operational-report-controls label > span,
.operational-report-filter-grid label > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.operational-report-controls input,
.operational-report-controls select,
.operational-report-filter-grid input {
  min-width: 0;
  width: 100%;
}

.operational-report-period-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

.operational-report-period-actions .secondary-button {
  flex: 1 1 0;
  min-width: 0;
}

.operational-report-filter-panel {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.operational-report-filter-panel summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 0.82rem;
  font-weight: 900;
  justify-content: space-between;
  list-style: none;
}

.operational-report-filter-panel summary::-webkit-details-marker {
  display: none;
}

.operational-report-filter-panel summary::after {
  content: "\2304";
  font-size: 1rem;
  margin-left: 8px;
}

.operational-report-filter-panel[open] summary::after {
  transform: rotate(180deg);
}

.operational-report-filter-panel summary span {
  color: var(--muted);
  font-size: 0.72rem;
  margin-left: auto;
}

.operational-report-filter-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0;
}

.operational-report-boundary {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  display: grid;
  gap: 10px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px 14px;
}

.operational-report-boundary > div {
  display: grid;
  gap: 2px;
}

.operational-report-boundary strong {
  font-size: 0.78rem;
}

.operational-report-boundary span {
  font-size: 1.15rem;
  font-weight: 900;
}

.operational-report-boundary small,
.operational-report-boundary p {
  color: var(--muted);
  font-size: 0.75rem;
  margin: 0;
}

.operational-report-boundary p {
  border-top: 1px solid var(--line);
  grid-column: 1 / -1;
  padding-top: 8px;
}

.operational-report-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.operational-report-status.form-error {
  color: var(--red);
}

.operational-report-results {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.operational-report-result-heading {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.operational-report-confidence {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 5px 8px;
}

.operational-report-confidence.confidence-exact {
  border-color: rgba(15, 118, 110, 0.48);
  color: var(--green);
}

.operational-report-confidence.confidence-estimated,
.operational-report-confidence.confidence-partial {
  border-color: rgba(180, 83, 9, 0.48);
  color: var(--amber);
}

.operational-report-comparison {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.operational-report-comparison > header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.operational-report-comparison > header div {
  display: grid;
  gap: 2px;
}

.operational-report-comparison h4 {
  font-size: 0.84rem;
}

.operational-report-comparison header span,
.operational-report-comparison header small {
  color: var(--muted);
  font-size: 0.7rem;
}

.operational-report-comparison header small {
  line-height: 1.35;
  max-width: 560px;
  text-align: right;
}

.operational-report-comparison-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.operational-report-comparison-metric {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
}

.operational-report-comparison-metric > span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
}

.operational-report-comparison-metric > strong {
  font-size: 1rem;
}

.operational-report-comparison-metric > div {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.operational-report-comparison-metric b,
.operational-report-comparison-metric small {
  font-size: 0.66rem;
}

.operational-report-comparison-metric small {
  color: var(--muted);
}

.operational-report-comparison-metric.delta-up b {
  color: var(--blue);
}

.operational-report-comparison-metric.delta-down b {
  color: #0891b2;
}

.operational-report-comparison-metric.delta-flat b {
  color: var(--muted);
}

.operational-report-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.operational-report-metric {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 6px;
  display: grid;
  gap: 3px;
  min-height: 92px;
  padding: 11px;
}

.operational-report-metric > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.operational-report-metric > strong {
  font-size: 1.35rem;
  line-height: 1.1;
}

.operational-report-metric > small {
  color: var(--muted);
  font-size: 0.72rem;
}

.operational-report-metric.tone-blue {
  border-left-color: var(--blue);
}

.operational-report-metric.tone-green {
  border-left-color: var(--green);
}

.operational-report-metric.tone-orange {
  border-left-color: var(--amber);
}

.operational-report-metric.tone-red {
  border-left-color: var(--red);
}

.operational-report-metric.tone-cyan {
  border-left-color: #0891b2;
}

.operational-report-metric.tone-purple {
  border-left-color: #7c3aed;
}

.operational-report-two-column {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.operational-report-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.operational-report-panel > header {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.operational-report-panel h4 {
  font-size: 0.86rem;
}

.operational-report-attention-list {
  display: grid;
  gap: 0;
}

.operational-report-attention-list > div,
.operational-report-quality-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  font-size: 0.78rem;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 34px;
}

.operational-report-attention-list > div:last-child,
.operational-report-quality-row:last-child {
  border-bottom: 0;
}

.tone-dot {
  background: var(--line-strong);
  border-radius: 2px;
  height: 8px;
  width: 8px;
}

.tone-dot.tone-green {
  background: var(--green);
}

.tone-dot.tone-orange {
  background: var(--amber);
}

.tone-dot.tone-red {
  background: var(--red);
}

.tone-dot.tone-purple {
  background: #7c3aed;
}

.operational-report-quality-meter {
  background: var(--chip);
  border-radius: 4px;
  height: 7px;
  overflow: hidden;
}

.operational-report-quality-meter span {
  background: var(--green);
  display: block;
  height: 100%;
}

.operational-report-panel > p {
  color: var(--muted);
  font-size: 0.76rem;
  margin: 0;
}

.operational-report-trend {
  align-items: end;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(14, minmax(8px, 1fr));
  height: 160px;
  min-width: 0;
}

.operational-report-trend-day {
  align-items: stretch;
  display: grid;
  gap: 5px;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-width: 0;
}

.operational-report-trend-bars {
  align-items: end;
  display: flex;
  gap: 2px;
  justify-content: center;
  min-height: 0;
}

.operational-report-trend-bars span {
  border-radius: 2px 2px 0 0;
  display: block;
  max-width: 10px;
  min-height: 3px;
  width: 45%;
}

.operational-report-trend-bars .created {
  background: var(--blue);
}

.operational-report-trend-bars .completed {
  background: var(--green);
}

.operational-report-trend-day small {
  color: var(--muted);
  font-size: 0.625rem;
  overflow: hidden;
  text-align: center;
}

.operational-report-panel > footer {
  color: var(--muted);
  display: flex;
  font-size: 0.68rem;
  gap: 12px;
}

.operational-report-panel > footer span::before {
  border-radius: 2px;
  content: "";
  display: inline-block;
  height: 7px;
  margin-right: 5px;
  width: 7px;
}

.legend-created::before {
  background: var(--blue);
}

.legend-completed::before {
  background: var(--green);
}

.operational-report-table-scroll {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.operational-report-table-panel table {
  border-collapse: collapse;
  font-size: 0.74rem;
  min-width: 720px;
  width: 100%;
}

.operational-report-table-panel th,
.operational-report-table-panel td {
  border-bottom: 1px solid var(--line);
  padding: 8px 9px;
  text-align: left;
  vertical-align: top;
}

.operational-report-table-panel th {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.operational-report-table-panel tbody tr:last-child td {
  border-bottom: 0;
}

.operational-report-link {
  background: none;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.operational-report-empty {
  color: var(--muted);
  font-size: 0.76rem;
}

.report-section-heading {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 16px;
}

.report-toolbar,
.report-editor,
.report-snapshots {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.report-toolbar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.report-toolbar h3,
.report-editor h3,
.report-snapshots h3 {
  margin: 0 0 4px;
}

.report-toolbar p,
.report-editor-heading p {
  color: var(--muted);
  margin: 0;
}

.report-toolbar > div:first-child {
  min-width: min(100%, 260px);
}

.report-editor {
  display: grid;
  gap: 14px;
}

.report-preview-shell {
  gap: 16px;
}

.report-editor-heading {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.report-health-grid,
.report-text-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-data-fields {
  display: none;
}

.report-health-insights {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.report-health-insights .dashboard-widget {
  min-height: 0;
  padding: 10px;
}

.report-text-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-text-grid .span-2 {
  grid-column: 1 / -1;
}

.report-template-preview {
  display: grid;
  min-width: 0;
}

.report-template-page {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.12), transparent 180px), var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.report-template-hero {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.report-template-hero span,
.report-template-section p,
.report-template-section li {
  color: var(--muted);
}

.report-template-hero h3,
.report-template-hero p,
.report-template-section h4,
.report-template-section p,
.report-template-section ul {
  margin: 0;
}

.report-template-hero h3 {
  font-size: 1.35rem;
}

.health-badge {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 6px 10px;
  text-transform: capitalize;
}

.report-template-health {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.report-template-health div,
.report-template-health button,
.report-template-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.report-template-health button {
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.report-template-health span {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.report-template-health strong {
  display: block;
  margin-top: 4px;
  text-transform: capitalize;
}

.report-template-two-column {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-template-section ul {
  padding-left: 18px;
}

.report-template-section.danger {
  border-color: rgba(239, 68, 68, 0.45);
}

.report-template-section.warning {
  border-color: rgba(245, 158, 11, 0.5);
}

.report-template-section.clickable {
  cursor: pointer;
}

.report-template-section.clickable:hover,
.report-template-section.clickable:focus-visible,
.report-template-health button:hover,
.report-template-health button:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
  outline: none;
}

.report-snapshot-row {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.report-snapshot-row span {
  color: var(--muted);
  font-size: 12px;
}

.time-intelligence-dashboard {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.time-intelligence-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
}

.time-intelligence-section-header {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
}

.time-intelligence-section-header h4,
.time-intelligence-section-header p,
.time-intelligence-workflow-detail h5,
.time-intelligence-contribution-detail h5 {
  margin: 0;
}

.time-intelligence-section-header h4 {
  font-size: 0.94rem;
}

.time-intelligence-section-header p,
.time-intelligence-workflow-detail header span,
.time-intelligence-contribution-detail header span {
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 3px;
}

.time-intelligence-failure-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(340px, 0.9fr) minmax(460px, 1.1fr);
  min-width: 0;
}

.time-intelligence-failure-summary {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.time-intelligence-failure-summary .operational-report-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.time-intelligence-donut-wrap {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 156px;
  padding: 12px;
}

.time-intelligence-donut {
  align-items: center;
  background: var(--time-report-donut);
  border-radius: 50%;
  display: flex;
  height: 124px;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  width: 124px;
}

.time-intelligence-donut::before {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  content: "";
  inset: 25px;
  position: absolute;
}

.time-intelligence-donut > span {
  display: grid;
  line-height: 1.1;
  position: relative;
  text-align: center;
  z-index: 1;
}

.time-intelligence-donut strong {
  font-size: 1.15rem;
}

.time-intelligence-donut small {
  color: var(--muted);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.time-intelligence-legend {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.time-intelligence-legend > div {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 9px minmax(0, 1fr) auto;
}

.time-intelligence-legend i {
  border-radius: 2px;
  height: 9px;
  width: 9px;
}

.time-intelligence-legend span {
  color: var(--muted);
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-intelligence-segments {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.time-intelligence-segments button {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  min-height: 30px;
  padding: 5px 9px;
}

.time-intelligence-segments button:hover,
.time-intelligence-segments button:focus-visible,
.time-intelligence-segments button.active {
  border-color: var(--blue);
  color: var(--text);
  outline: none;
}

.time-intelligence-segments button.active {
  background: var(--chip);
}

.time-intelligence-bars {
  display: grid;
  gap: 8px;
}

.time-intelligence-bar-row {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(170px, 0.7fr) minmax(180px, 1.3fr) minmax(90px, auto);
  min-width: 0;
  padding: 10px;
}

.time-intelligence-bar-row > div:first-child {
  display: grid;
  min-width: 0;
}

.time-intelligence-bar-row > div:first-child strong,
.time-intelligence-bar-row > div:first-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-intelligence-bar-row span,
.time-intelligence-bar-row > strong {
  color: var(--muted);
  font-size: 0.7rem;
}

.time-intelligence-bar-track {
  background: var(--line);
  border-radius: 3px;
  height: 9px;
  overflow: hidden;
  position: relative;
}

.time-intelligence-bar-work {
  background: var(--blue);
  display: block;
  height: 100%;
  min-width: 2px;
  position: relative;
}

.time-intelligence-bar-rework {
  background: var(--red);
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.time-intelligence-stage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.time-intelligence-stage-legend span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.7rem;
  gap: 5px;
}

.time-intelligence-stage-legend i {
  border-radius: 2px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.stage-tone-0 {
  background: var(--blue);
}

.stage-tone-1 {
  background: var(--green);
}

.stage-tone-2 {
  background: var(--amber);
}

.stage-tone-3 {
  background: var(--red);
}

.stage-tone-4 {
  background: var(--muted);
}

.stage-tone-5 {
  background: var(--text);
}

.time-intelligence-workflow-grid,
.time-intelligence-master-detail {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(390px, 1.25fr) minmax(280px, 0.75fr);
  min-width: 0;
}

.time-intelligence-ticket-timelines,
.time-intelligence-master-list,
.time-intelligence-workflow-detail,
.time-intelligence-contribution-detail {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.time-intelligence-ticket-timelines,
.time-intelligence-master-list {
  display: grid;
  gap: 6px;
  max-height: 390px;
  overflow-y: auto;
  padding: 8px;
  scrollbar-gutter: stable;
}

.time-intelligence-workflow-ticket,
.time-intelligence-master-item {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.time-intelligence-workflow-ticket {
  grid-template-columns: minmax(140px, 0.72fr) minmax(150px, 1.28fr) auto;
}

.time-intelligence-master-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.time-intelligence-workflow-ticket:hover,
.time-intelligence-workflow-ticket:focus-visible,
.time-intelligence-workflow-ticket.active,
.time-intelligence-master-item:hover,
.time-intelligence-master-item:focus-visible,
.time-intelligence-master-item.active {
  border-color: var(--blue);
  outline: none;
}

.time-intelligence-workflow-ticket > span:first-child,
.time-intelligence-master-item > span:first-child {
  display: grid;
  min-width: 0;
}

.time-intelligence-workflow-ticket small,
.time-intelligence-master-item small,
.time-intelligence-workflow-detail small,
.time-intelligence-contribution-row small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-intelligence-stage-stack {
  background: var(--line);
  border-radius: 3px;
  display: flex;
  height: 10px;
  overflow: hidden;
}

.time-intelligence-stage-stack i {
  border-right: 1px solid var(--panel);
  display: block;
  height: 100%;
}

.time-intelligence-workflow-detail,
.time-intelligence-contribution-detail {
  align-content: start;
  display: grid;
  min-height: 180px;
  padding: 10px;
}

.time-intelligence-workflow-detail header,
.time-intelligence-contribution-detail header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 2px 2px 9px;
}

.time-intelligence-workflow-detail > div,
.time-intelligence-contribution-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 9px 2px;
}

.time-intelligence-workflow-detail > div:last-child,
.time-intelligence-contribution-row:last-child {
  border-bottom: 0;
}

.time-intelligence-workflow-detail > div > span:first-child,
.time-intelligence-contribution-row > span:first-child {
  display: grid;
  min-width: 0;
}

.time-intelligence-stage-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.time-intelligence-stage-flags b {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 0.625rem;
  padding: 3px 5px;
}

.time-intelligence-contribution-row {
  grid-template-columns: minmax(120px, 0.9fr) minmax(100px, 1.1fr) auto;
}

@media (max-width: 1100px) {
  .operational-report-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operational-report-controls .primary-button {
    justify-self: start;
  }

  .operational-report-filter-grid,
  .operational-report-metrics,
  .operational-report-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .time-intelligence-failure-layout,
  .time-intelligence-workflow-grid,
  .time-intelligence-master-detail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .operational-report-heading,
  .operational-report-result-heading,
  .operational-report-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .operational-report-freshness {
    text-align: left;
  }

  .operational-report-controls,
  .operational-report-filter-grid,
  .operational-report-boundary,
  .operational-report-metrics,
  .operational-report-comparison-grid,
  .operational-report-two-column {
    grid-template-columns: 1fr;
  }

  .operational-report-comparison > header {
    display: grid;
  }

  .operational-report-comparison header small {
    max-width: none;
    text-align: left;
  }

  .operational-report-boundary p {
    grid-column: 1;
  }

  .operational-report-export-actions {
    justify-content: flex-start;
  }

  .time-intelligence-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .time-intelligence-failure-summary .operational-report-metrics {
    grid-template-columns: 1fr;
  }

  .time-intelligence-donut-wrap {
    grid-template-columns: 1fr;
  }

  .time-intelligence-bar-row {
    grid-template-columns: 1fr;
  }

  .time-intelligence-workflow-ticket {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .time-intelligence-workflow-ticket .time-intelligence-stage-stack {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .time-intelligence-contribution-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .time-intelligence-contribution-row .time-intelligence-bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.audit-filters {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  margin: 12px 0;
}

.audit-layout .archive-panel {
  min-height: 0;
}

.admin-control-dialog-body .audit-layout .archive-panel {
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr);
}

.admin-control-dialog-body .audit-list {
  max-height: min(58vh, 620px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.audit-row small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.workload-user-panel {
  padding: 14px;
}

.workload-user-heading,
.workload-week-head,
.workload-ticket-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workload-user-heading h3,
.workload-user-heading p {
  margin: 0;
}

.workload-user-heading p {
  color: var(--muted);
  font-size: 0.86rem;
}

.workload-badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
}

.workload-badge.available,
.workload-week.available {
  border-color: rgba(22, 163, 74, 0.5);
}

.workload-badge.available {
  background: #dcfce7;
  color: #166534;
}

.workload-badge.near,
.workload-week.near {
  border-color: rgba(234, 179, 8, 0.55);
}

.workload-badge.near {
  background: #fef3c7;
  color: #92400e;
}

.workload-badge.over,
.workload-week.over {
  border-color: rgba(220, 38, 38, 0.55);
}

.workload-badge.over {
  background: #fee2e2;
  color: #991b1b;
}

.workload-bottlenecks {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(220, 38, 38, 0.55);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 88%, #dc2626 12%);
}

.workload-bottlenecks > strong {
  color: #ef4444;
}

.workload-bottlenecks p,
.workload-capacity-warning {
  margin: 0;
  line-height: 1.45;
}

.workload-capacity-warning {
  margin: 8px 0;
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 800;
}

.workload-week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.workload-week {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel-soft);
}

.workload-week-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.workload-track {
  margin: 8px 0;
}

.workload-ticket-list {
  display: grid;
  gap: 8px;
}

.workload-ticket-line {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px;
  background: var(--panel);
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.workload-ticket-line .link-button {
  min-width: 0;
  text-align: left;
}

.workload-ticket-effort {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.workload-allocation-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.workload-allocation-control input,
.workload-ticket-line select {
  max-width: 130px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control);
  color: var(--text);
}

.workload-allocation-control input {
  width: 70px;
}

.raid-layout {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.raid-toolbar,
.raid-summary-card,
.raid-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.raid-toolbar {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  gap: 10px;
  align-items: end;
}

.raid-toolbar label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.raid-toolbar select {
  width: 100%;
  min-width: 0;
}

.raid-create-button {
  align-self: end;
  justify-self: stretch;
  min-width: 0;
  width: 100%;
}

.raid-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.raid-summary-card {
  padding: 12px;
}

.raid-summary-card span,
.raid-summary-card small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.raid-summary-card strong {
  display: block;
  margin: 5px 0;
  font-size: 1.45rem;
}

.raid-summary-card.warning strong {
  color: #b45309;
}

.raid-summary-card.danger strong {
  color: #dc2626;
}

.raid-register {
  display: grid;
  gap: 10px;
}

.raid-card {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.raid-card.escalated {
  border-color: rgba(220, 38, 38, 0.65);
  box-shadow: inset 4px 0 0 #dc2626;
}

.raid-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.raid-title-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.raid-card-heading h3,
.raid-card-heading p,
.raid-description {
  margin: 0;
}

.raid-card-heading p,
.raid-description {
  color: var(--muted);
}

.raid-card-heading h3 {
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.raid-type,
.raid-escalation {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.raid-type.risk,
.raid-type.issue,
.raid-escalation {
  background: #fee2e2;
  color: #991b1b;
}

.raid-type.decision {
  background: #dbeafe;
  color: #1d4ed8;
}

.raid-type.change-request,
.raid-type.dependency {
  background: #fef3c7;
  color: #92400e;
}

.raid-score {
  width: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: 999px;
  border: 5px solid var(--blue);
  display: grid;
  place-items: center;
  text-align: center;
}

.raid-score strong {
  font-size: 1.05rem;
  line-height: 1;
}

.raid-score span {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 900;
}

.raid-card-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.raid-card-side .compact-action-button {
  margin: 0;
  min-height: 30px;
  padding: 6px 10px;
}

.raid-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
}

.raid-meta-grid span {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.8rem;
  min-width: 0;
}

.raid-meta-grid strong {
  display: block;
  color: var(--text);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.raid-card-footer,
.raid-card-notes {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.raid-description {
  line-height: 1.38;
}

.raid-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.raid-links strong {
  margin-right: 2px;
}

.raid-detail-editor {
  display: grid;
  gap: 10px;
}

.compact-grid {
  gap: 10px;
}

.automation-layout {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.automation-hero,
.automation-template-card,
.automation-rule-card,
.automation-run-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.automation-hero {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.automation-hero h3,
.automation-hero p,
.automation-rule-card h3,
.automation-rule-card p {
  margin: 0;
}

.automation-hero p,
.automation-rule-card p,
.automation-rule-card small,
.automation-template-card p {
  color: var(--muted);
}

.automation-actions,
.automation-rule-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.automation-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
}

.automation-template-card {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.automation-template-card p {
  margin: 0;
  font-size: 0.82rem;
}

.automation-rule-list {
  display: grid;
  gap: 10px;
}

.automation-rule-card {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.automation-rule-main {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.automation-rule-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.automation-rule-card.disabled {
  opacity: 0.62;
}

.automation-trigger {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.automation-run-panel {
  padding: 14px;
}

.dashboard-layout {
  display: grid;
  gap: 16px;
}

.dashboard-section {
  display: grid;
  gap: 12px;
}

.dashboard-heading,
.dashboard-widget {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.dashboard-heading {
  padding: 16px;
}

.dashboard-heading,
.report-editor-heading,
.archive-heading {
  align-items: start;
}

.dashboard-heading h3,
.dashboard-heading p,
.dashboard-widget h4,
.dashboard-widget p {
  margin: 0;
}

.dashboard-heading p,
.dashboard-widget p,
.dashboard-list,
.dashboard-timeline {
  color: var(--muted);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.sidebar-dashboard-toggle,
.shortcut-dashboard-toggle {
  margin-top: 10px;
}

.sidebar-dashboard-panel,
.shortcut-dashboard-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--sidebar-line);
  padding-top: 10px;
}

.sidebar-dashboard-panel {
  position: fixed;
  z-index: 24;
  top: 78px;
  left: calc(258px + 12px);
  width: min(380px, calc(100vw - 340px));
  max-height: calc(100vh - 100px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-top: 0;
  background: var(--panel);
  box-shadow: var(--shadow);
}

body.sidebar-collapsed .sidebar-dashboard-panel {
  left: 76px;
}

.shortcut-dashboard-panel {
  position: fixed;
  z-index: 24;
  top: 78px;
  right: calc(260px + 12px);
  width: min(360px, calc(100vw - 340px));
  max-height: calc(100vh - 100px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-top: 0;
  background: var(--panel);
  box-shadow: var(--shadow);
}

body:has(.shortcut-rail.collapsed) .shortcut-dashboard-panel {
  right: 70px;
}

.sidebar-dashboard-grid,
.shortcut-dashboard-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.flyout-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.flyout-panel-heading strong {
  color: var(--sidebar-text);
  font-size: 0.95rem;
  line-height: 1.2;
}

.sidebar-dashboard-panel .dashboard-widget,
.shortcut-dashboard-panel .dashboard-widget {
  min-height: 0;
  padding: 10px;
  background: var(--sidebar-panel);
  border-color: var(--sidebar-line);
}

.sidebar-dashboard-panel .dashboard-widget h4,
.shortcut-dashboard-panel .dashboard-widget h4 {
  color: var(--sidebar-text);
}

.sidebar-dashboard-panel .dashboard-stat,
.shortcut-dashboard-panel .dashboard-stat {
  font-size: 1.35rem;
}

.sidebar-dashboard-panel .dashboard-bar-row,
.shortcut-dashboard-panel .dashboard-bar-row {
  grid-template-columns: 1fr;
  gap: 5px;
}

.dashboard-widget {
  min-height: 150px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
}

.dashboard-widget.clickable {
  cursor: pointer;
  text-align: left;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.dashboard-widget.clickable:hover,
.dashboard-widget.clickable:focus-visible {
  border-color: var(--blue);
  background: var(--hover);
  outline: none;
  transform: translateY(-1px);
}

.dashboard-widget h4 {
  font-size: 0.9rem;
  color: var(--text);
}

.dashboard-stat {
  font-size: 1.9rem;
  line-height: 1;
}

.dashboard-stat.warning {
  color: #b45309;
}

.dashboard-stat.danger {
  color: #dc2626;
}

.dashboard-health {
  display: grid;
  gap: 8px;
}

.dashboard-bars {
  display: grid;
  gap: 9px;
}

.dashboard-bar-row {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) minmax(70px, 2fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.dashboard-bar {
  height: 9px;
  border-radius: 999px;
  background: var(--control);
  overflow: hidden;
}

.dashboard-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.dashboard-bar .priority-critical,
.dashboard-bar .health-red {
  background: #dc2626;
}

.dashboard-bar .priority-high,
.dashboard-bar .health-yellow {
  background: #f97316;
}

.dashboard-bar .priority-medium {
  background: #2563eb;
}

.dashboard-bar .priority-low,
.dashboard-bar .health-green {
  background: #16a34a;
}

.dashboard-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
  line-height: 1.35;
}

.dashboard-timeline {
  display: grid;
  gap: 7px;
}

.dashboard-timeline span {
  border-left: 4px solid var(--blue);
  border-radius: 7px;
  padding: 8px;
  background: var(--panel-soft);
  display: grid;
  gap: 3px;
  font-size: 0.8rem;
}

.dashboard-timeline strong {
  color: var(--text);
}

.dashboard-drilldown-panel {
  border: 1px solid var(--sidebar-line);
  border-radius: 8px;
  background: var(--sidebar-panel);
  padding: 10px;
  display: grid;
  gap: 10px;
}

.dashboard-drilldown-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.dashboard-drilldown-heading strong,
.dashboard-drilldown-heading span {
  display: block;
}

.dashboard-drilldown-heading span,
.dashboard-drilldown-item p {
  color: var(--sidebar-muted);
  font-size: 0.78rem;
}

.dashboard-drilldown-list {
  display: grid;
  gap: 8px;
}

.dashboard-drilldown-item {
  width: 100%;
  border: 1px solid var(--sidebar-line);
  border-radius: 8px;
  padding: 9px;
  background: var(--control);
  color: var(--text);
  text-align: left;
}

.dashboard-drilldown-item:is(button) {
  cursor: pointer;
}

.dashboard-drilldown-item:is(button):hover {
  border-color: var(--blue);
}

.dashboard-drilldown-item strong,
.dashboard-drilldown-item p {
  display: block;
  margin: 0;
}

.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.weekday-grid label {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.archive-layout {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.portfolio-layout {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.portfolio-scope-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 260px));
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.portfolio-panel,
.metrics-layout {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.portfolio-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
}

.portfolio-grid {
  display: grid;
  gap: 12px;
}

.portfolio-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.portfolio-card-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
}

.portfolio-card-heading h3 {
  margin: 0 0 4px;
}

.portfolio-card-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.portfolio-metrics,
.portfolio-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.portfolio-metrics span,
.portfolio-mini-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel);
}

.portfolio-mini-list ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.progress-track span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.portfolio-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.portfolio-v2 {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.portfolio-v2-hero,
.portfolio-v2-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, var(--primary)), var(--panel));
  padding: 16px;
  min-width: 0;
}

.portfolio-v2-hero {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.portfolio-v2-hero h3,
.portfolio-v2-section-heading h4,
.portfolio-v2-card h5 {
  margin: 0;
}

.portfolio-v2-hero p,
.portfolio-v2-section-heading p,
.portfolio-v2-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

.portfolio-v2-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.portfolio-v2-chip {
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  padding: 4px 8px;
  font-weight: 800;
  font-size: 0.75rem;
  white-space: nowrap;
}

.portfolio-v2-kpis,
.portfolio-v2-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  min-width: 0;
}

.portfolio-v2-detail-grid.six {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}

.portfolio-v2-kpi,
.portfolio-v2-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.portfolio-v2-kpi.is-clickable,
.portfolio-v2-card.is-clickable {
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.portfolio-v2-kpi.is-clickable:hover,
.portfolio-v2-kpi.is-clickable:focus-visible,
.portfolio-v2-card.is-clickable:hover,
.portfolio-v2-card.is-clickable:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--card) 88%, var(--primary));
  outline: none;
  transform: translateY(-1px);
}

.portfolio-v2-kpi span,
.portfolio-v2-card h5 {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.portfolio-v2-kpi strong,
.portfolio-v2-large {
  font-size: 1.4rem;
  line-height: 1.1;
}

.portfolio-v2-kpi p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.portfolio-v2-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.portfolio-v2-scope-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 260px));
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.portfolio-v2-scope-panel label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.portfolio-v2-scope-panel span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.portfolio-v2-scope-panel select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  padding: 6px 10px;
  font-weight: 800;
}

.portfolio-v2-tree-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.portfolio-v2-tree {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: auto;
}

.portfolio-v2-tree-node {
  --portfolio-v2-accent: var(--primary);
  min-width: 0;
}

.portfolio-v2-tree-node.tone-green {
  --portfolio-v2-accent: #22c55e;
}

.portfolio-v2-tree-node.tone-yellow {
  --portfolio-v2-accent: #f59e0b;
}

.portfolio-v2-tree-node.tone-red {
  --portfolio-v2-accent: #ef4444;
}

.portfolio-v2-tree-node.tone-blue {
  --portfolio-v2-accent: var(--primary);
}

.portfolio-v2-tree-node + .portfolio-v2-tree-node {
  margin-top: 8px;
}

.portfolio-v2-tree-node.selected > .portfolio-v2-tree-row {
  background: color-mix(in srgb, var(--primary) 17%, var(--panel-soft));
  border-color: color-mix(in srgb, var(--primary) 72%, var(--line));
}

.portfolio-v2-tree-node.selected > .portfolio-v2-tree-row::before {
  opacity: 0.9;
}

.portfolio-v2-tree-row:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--panel-soft));
}

.portfolio-v2-tree-row {
  display: grid;
  grid-template-columns: 28px minmax(180px, 1fr) minmax(120px, auto);
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  color: var(--text);
  cursor: pointer;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--portfolio-v2-accent);
  border-radius: 8px;
  background: var(--panel-soft);
  position: relative;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.portfolio-v2-tree-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portfolio-v2-tree-kind {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.portfolio-v2-tree-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}

.portfolio-v2-tree-meta {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-v2-tree-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 160px;
}

.portfolio-v2-tree-metric {
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  padding: 3px 7px;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.portfolio-v2-tree-open {
  min-height: 24px;
  padding: 3px 9px;
  line-height: 1;
  border-color: var(--line);
  background: var(--control);
}

.portfolio-v2-tree-metric.tone-green {
  color: #22c55e;
}

.portfolio-v2-tree-metric.tone-yellow {
  color: #f59e0b;
}

.portfolio-v2-tree-metric.tone-red {
  color: #ef4444;
}

.portfolio-v2-tree-metric.tone-blue {
  color: var(--primary);
}

.portfolio-v2-tree-toggle,
.portfolio-v2-tree-leaf {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.portfolio-v2-tree-toggle {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  display: grid;
  place-items: center;
  font-weight: 900;
  cursor: pointer;
}

.portfolio-v2-tree-toggle:hover,
.portfolio-v2-tree-toggle:focus-visible {
  border-color: var(--primary);
}

.portfolio-v2-tree-leaf {
  display: block;
  position: relative;
}

.portfolio-v2-tree-leaf::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: var(--portfolio-v2-accent);
}

.portfolio-v2-tree-children {
  display: grid;
  gap: 8px;
  padding: 0 0 0 18px;
  position: relative;
  border-left: 1px dashed var(--line);
  margin: 8px 0 0 13px;
}

.portfolio-v2-tree-children::before {
  content: none;
}

.portfolio-v2-tree-node.level-1 > .portfolio-v2-tree-row {
  background: color-mix(in srgb, var(--panel-soft) 86%, var(--primary) 14%);
}

.portfolio-v2-tree-node.level-2 > .portfolio-v2-tree-row {
  background: var(--control);
}

.portfolio-v2-tree-node.level-3 > .portfolio-v2-tree-row,
.portfolio-v2-tree-node.level-4 > .portfolio-v2-tree-row,
.portfolio-v2-tree-node.level-5 > .portfolio-v2-tree-row {
  background: var(--panel);
}

.portfolio-v2-tree-node.leaf > .portfolio-v2-tree-row {
  border-style: dashed;
}

.portfolio-v2-tree-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 10px;
  background: var(--surface);
}

.portfolio-v2-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: var(--surface);
}

.portfolio-v2-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
}

.portfolio-v2-table th,
.portfolio-v2-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.portfolio-v2-table th {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.portfolio-v2-table tbody tr {
  cursor: pointer;
}

.portfolio-v2-table tbody tr:hover,
.portfolio-v2-table tbody tr.selected {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.portfolio-v2-table .compact-button,
.portfolio-v2 .compact-button {
  min-height: 28px;
  padding: 4px 9px;
}

.portfolio-v2-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 6px;
  background: var(--primary);
}

.portfolio-v2-chip.tone-green,
.portfolio-v2-dot.tone-green,
.portfolio-v2-kpi.tone-green strong {
  color: #22c55e;
}

.portfolio-v2-chip.tone-yellow,
.portfolio-v2-dot.tone-yellow,
.portfolio-v2-kpi.tone-yellow strong {
  color: #f59e0b;
}

.portfolio-v2-chip.tone-red,
.portfolio-v2-dot.tone-red,
.portfolio-v2-kpi.tone-red strong {
  color: #ef4444;
}

.portfolio-v2-chip.tone-blue,
.portfolio-v2-dot.tone-blue,
.portfolio-v2-kpi.tone-blue strong {
  color: var(--primary);
}

.portfolio-v2-dot.tone-green,
.portfolio-v2-timeline-item.tone-green span {
  background: #22c55e;
}

.portfolio-v2-dot.tone-yellow,
.portfolio-v2-timeline-item.tone-yellow span {
  background: #f59e0b;
}

.portfolio-v2-dot.tone-red,
.portfolio-v2-timeline-item.tone-red span {
  background: #ef4444;
}

.portfolio-v2-progress {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.portfolio-v2-progress::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--line);
}

.portfolio-v2-progress span {
  grid-column: 1;
  grid-row: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  z-index: 1;
}

.portfolio-v2-progress strong {
  font-size: 0.78rem;
}

.portfolio-v2-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  row-gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px 16px 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.portfolio-v2-timeline-item {
  border: 0;
  border-top: 2px solid var(--line);
  background: transparent;
  color: var(--text);
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 12px 10px 0;
  cursor: pointer;
  min-width: 0;
  text-align: center;
}

.portfolio-v2-timeline-item span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--panel);
  margin-top: -23px;
}

.portfolio-v2-timeline-item strong {
  max-width: 150px;
  font-size: 0.76rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.portfolio-v2-timeline-item small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.portfolio-v2-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.portfolio-v2-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.portfolio-v2-list li + li {
  margin-top: 5px;
}

.portfolio-v2-linked-list {
  display: grid;
  gap: 8px;
}

.portfolio-v2-linked-list button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 8px;
  text-align: left;
  display: grid;
  gap: 3px;
  cursor: pointer;
}

.portfolio-v2-linked-list button:hover,
.portfolio-v2-linked-list button:focus-visible {
  border-color: var(--primary);
}

.portfolio-v2-linked-list span,
.portfolio-v2-mini-rows,
.portfolio-v2-priority-bars span {
  color: var(--muted);
}

.portfolio-v2-mini-rows {
  display: grid;
  gap: 5px;
}

.portfolio-v2-mini-rows span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portfolio-v2-ring {
  --ring-color: var(--primary);
  width: 90px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 2px auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  background: conic-gradient(var(--ring-color) calc(var(--value) * 1%), var(--line) 0);
  position: relative;
}

.portfolio-v2-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--card);
}

.portfolio-v2-ring strong,
.portfolio-v2-ring span {
  position: relative;
  z-index: 1;
}

.portfolio-v2-ring strong {
  font-size: 1.1rem;
  line-height: 1;
}

.portfolio-v2-ring span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1;
  margin: 0;
}

.portfolio-v2-ring.tone-green {
  --ring-color: #22c55e;
}

.portfolio-v2-ring.tone-yellow {
  --ring-color: #f59e0b;
}

.portfolio-v2-ring.tone-red {
  --ring-color: #ef4444;
}

.portfolio-v2-priority-bars {
  display: grid;
  gap: 8px;
}

.portfolio-v2-priority-bars > div {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 8px;
}

.portfolio-v2-priority-track {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.portfolio-v2-priority-track i {
  display: block;
  height: 100%;
}

.portfolio-v2-priority-track .priority-critical {
  background: #ef4444;
}

.portfolio-v2-priority-track .priority-high {
  background: #f97316;
}

.portfolio-v2-priority-track .priority-medium {
  background: var(--primary);
}

.portfolio-v2-priority-track .priority-low {
  background: #22c55e;
}

.portfolio-v2-drilldown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.62);
}

.portfolio-v2-drilldown {
  width: min(780px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.portfolio-v2-drilldown header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.portfolio-v2-drilldown h4,
.portfolio-v2-drilldown p {
  margin: 0;
}

.portfolio-v2-drilldown header p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.9rem;
}

.portfolio-v2-drilldown-list {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.portfolio-v2-drilldown-row {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  text-align: left;
}

button.portfolio-v2-drilldown-row {
  cursor: pointer;
}

button.portfolio-v2-drilldown-row:hover,
button.portfolio-v2-drilldown-row:focus-visible {
  border-color: var(--primary);
  outline: none;
  background: color-mix(in srgb, var(--surface) 88%, var(--primary));
}

.portfolio-v2-drilldown-row strong,
.portfolio-v2-drilldown-row p,
.portfolio-v2-drilldown-row small {
  display: block;
  min-width: 0;
}

.portfolio-v2-drilldown-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.portfolio-v2-drilldown-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.portfolio-v2-panel.muted {
  background: var(--panel);
}

@media (max-width: 900px) {
  .portfolio-v2-hero,
  .portfolio-v2-section-heading {
    display: grid;
  }

  .portfolio-v2-scope-panel {
    grid-template-columns: 1fr;
  }

  .portfolio-v2-hero-actions,
  .portfolio-heading-actions {
    justify-content: start;
  }
}

.health-dot,
.dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  margin-top: 6px;
  background: #22c55e;
}

.health-yellow {
  background: #f59e0b;
}

.health-red {
  background: #ef4444;
}

.health-green {
  background: #22c55e;
}

.metrics-hero {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.metrics-controls {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(150px, 180px) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-width: 0;
  align-items: end;
}

.metrics-controls > label {
  min-width: 0;
}

.metrics-hidden-select {
  display: none;
}

.metrics-apply {
  width: 100%;
}

.metrics-trend-nav.segmented.compact {
  --mode-nav-accent: #22d3ee;
  grid-column: auto;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  gap: 6px;
  padding: 7px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 8%, transparent), transparent 68%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 24px rgba(2, 6, 23, 0.08);
}

.metrics-trend-nav.segmented.compact button {
  min-height: 34px;
  flex: 1 1 78px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 13px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 7%, transparent), transparent 62%),
    var(--card);
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(2, 6, 23, 0.08);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.metrics-trend-nav.segmented.compact button:hover,
.metrics-trend-nav.segmented.compact button:focus-visible {
  border-color: color-mix(in srgb, var(--mode-nav-accent) 70%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 22%, transparent), transparent 66%),
    var(--hover);
  color: var(--text);
  transform: translateY(-1px);
}

.metrics-trend-nav.segmented.compact button.active {
  border-color: color-mix(in srgb, var(--mode-nav-accent) 78%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 30%, transparent), color-mix(in srgb, var(--mode-nav-accent) 8%, var(--card)) 70%),
    var(--card);
  color: var(--text);
  box-shadow:
    inset 3px 0 0 var(--mode-nav-accent),
    inset 0 0 0 1px color-mix(in srgb, var(--mode-nav-accent) 20%, transparent),
    0 12px 28px color-mix(in srgb, var(--mode-nav-accent) 15%, transparent);
}

:root[data-theme="dark"] .metrics-trend-nav.segmented.compact button.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mode-nav-accent) 32%, transparent), rgba(15, 23, 42, 0.46) 72%),
    rgba(15, 23, 42, 0.72);
  color: #ffffff;
}

.metrics-trend-nav.segmented.compact [data-metrics-preset="clear"] {
  --mode-nav-accent: #60a5fa;
  flex-basis: 112px;
}

.metrics-date-notice {
  margin: -4px 0 0;
  border: 1px solid color-mix(in srgb, var(--amber) 44%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 12%, var(--card));
  color: color-mix(in srgb, var(--amber) 85%, var(--text));
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 800;
}

.metrics-scope-summary {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
    var(--card);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.metrics-scope-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.metrics-scope-title strong {
  color: var(--text);
}

.metrics-scope-title span {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}

.metrics-scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.metrics-scope-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--muted);
  padding: 5px 9px;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
}

.metrics-scope-chip b {
  color: var(--text);
}

.metrics-hero h3,
.metrics-hero p,
.chart-card h3,
.metric-card p {
  margin: 0;
}

.metric-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.info-button {
  --info-ring: #2f6df6;
  --info-glyph: #9ca3af;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--info-ring);
  border-radius: 999px;
  background: color-mix(in srgb, var(--info-ring) 5%, var(--card));
  color: var(--info-glyph);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

.info-button::before {
  content: "i";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--info-glyph);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-transform: none;
}

.risk-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.risk-gauge {
  width: 132px;
  aspect-ratio: 1;
  border-radius: 999px;
  margin: 2px auto;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--red) calc(var(--risk) * 1%), var(--chip) 0);
}

.risk-gauge-inner {
  width: 92px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--panel);
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 10px;
}

.risk-gauge-inner strong {
  margin: 0;
  font-size: 1rem;
}

.risk-gauge-inner small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.metrics-hero p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.88rem;
}

.analytics-top-stack,
.analytics-section-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.analytics-section-nav {
  --analytics-nav-accent: #facc15;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--analytics-nav-accent) 8%, transparent), transparent 68%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 24px rgba(2, 6, 23, 0.08);
}

.analytics-section-nav button {
  --analytics-tab-accent: var(--analytics-nav-accent);
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--analytics-tab-accent) 7%, transparent), transparent 62%),
    var(--card);
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(2, 6, 23, 0.08);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.analytics-section-nav button[data-analytics-section="signals"] {
  --analytics-tab-accent: var(--blue);
}

.analytics-section-nav button[data-analytics-section="kpis"] {
  --analytics-tab-accent: #22d3ee;
}

.analytics-section-nav button[data-analytics-section="delivery"] {
  --analytics-tab-accent: var(--green);
}

.analytics-section-nav button[data-analytics-section="risk"] {
  --analytics-tab-accent: var(--red);
}

.analytics-section-nav button[data-analytics-section="financials"] {
  --analytics-tab-accent: #14b8a6;
}

.analytics-section-nav button[data-analytics-section="detailed"] {
  --analytics-tab-accent: #a855f7;
}

.analytics-section-nav button:hover,
.analytics-section-nav button:focus-visible {
  border-color: color-mix(in srgb, var(--analytics-tab-accent) 70%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--analytics-tab-accent) 22%, transparent), transparent 66%),
    var(--hover);
  color: var(--text);
  transform: translateY(-1px);
}

.analytics-section-nav button.active {
  border-color: color-mix(in srgb, var(--analytics-tab-accent) 78%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--analytics-tab-accent) 30%, transparent), color-mix(in srgb, var(--analytics-tab-accent) 8%, var(--card)) 70%),
    var(--card);
  color: var(--text);
  box-shadow:
    inset 3px 0 0 var(--analytics-tab-accent),
    inset 0 0 0 1px color-mix(in srgb, var(--analytics-tab-accent) 20%, transparent),
    0 12px 28px color-mix(in srgb, var(--analytics-tab-accent) 15%, transparent);
}

:root[data-theme="dark"] .analytics-section-nav button.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--analytics-tab-accent) 32%, transparent), rgba(15, 23, 42, 0.46) 72%),
    rgba(15, 23, 42, 0.72);
  color: #ffffff;
}

.analytics-subpage {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.analytics-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
  min-width: 0;
}

.analytics-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.analytics-section-header.compact {
  margin-bottom: 10px;
}

.analytics-section-header h3,
.analytics-section-header p {
  margin: 0;
}

.analytics-section-header h3 {
  font-size: 1.05rem;
}

.analytics-section-header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.84rem;
}

.analytics-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.analytics-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.signal-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    background 0.15s ease;
}

.signal-card:hover,
.signal-card:focus-within {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.signal-card summary {
  min-height: 120px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  cursor: pointer;
  list-style: none;
}

.signal-card summary > span:not(.signal-dot) {
  min-width: 0;
  padding-right: 84px;
}

.signal-card summary::-webkit-details-marker {
  display: none;
}

.signal-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  margin-top: 1px;
  background: var(--accent);
  box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--panel) 82%, transparent);
}

.signal-card strong {
  display: block;
  font-size: 0.88rem;
}

.signal-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.signal-card em,
.analytics-kpi-card::before {
  border-radius: 999px;
}

.signal-card em {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: calc(100% - 64px);
  padding: 4px 8px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.signal-card p {
  margin: 0;
  padding: 0 12px 12px 50px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.tone-high {
  --tone: var(--red);
}

.tone-medium {
  --tone: var(--amber);
}

.tone-low,
.tone-info {
  --tone: var(--blue);
}

.tone-on-track {
  --tone: #22c55e;
}

.tone-financial {
  --tone: #0f766e;
}

.signal-card[class*="tone-"] .signal-dot {
  background: var(--tone);
}

.signal-card[class*="tone-"] em,
.analytics-kpi-card[class*="tone-"]::before {
  background: color-mix(in srgb, var(--tone) 18%, var(--chip));
  color: var(--text);
}

.analytics-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
}

.analytics-kpi-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px 12px 12px 14px;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.analytics-kpi-card[data-analytics-kpi-drilldown] {
  cursor: pointer;
}

.analytics-kpi-card:hover,
.analytics-kpi-card:focus-within,
.analytics-click-card:hover,
.analytics-click-card:focus-within,
.chart-card:focus-within {
  border-color: var(--line-strong);
}

.analytics-kpi-card:hover,
.analytics-click-card:hover {
  transform: translateY(-1px);
}

.analytics-kpi-card::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 4px;
  background: var(--tone, var(--accent));
}

.analytics-card-label,
.analytics-kpi-card .analytics-card-label,
.metric-card .analytics-card-label {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-kpi-card strong {
  display: block;
  margin-top: 5px;
  font-size: 1.4rem;
}

.analytics-card-subtitle,
.analytics-kpi-card .analytics-card-subtitle,
.metric-card .analytics-card-subtitle {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.analytics-card-topline,
.metric-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.analytics-info-button {
  --info-ring: #2f6df6;
  --info-glyph: #9ca3af;
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--info-ring);
  border-radius: 999px;
  padding: 0;
  background: color-mix(in srgb, var(--info-ring) 5%, var(--card));
  color: var(--info-glyph);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0;
  font-weight: 700;
  font-style: normal;
  line-height: 0;
  text-transform: none;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.analytics-info-button::before {
  content: "i";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--info-glyph);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-transform: none;
}

.analytics-info-button span {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-align: center;
  color: var(--info-glyph);
  transform: translateY(-0.5px);
}

.analytics-info-button:hover,
.analytics-info-button:focus-visible,
.info-open .analytics-info-button {
  border-color: var(--info-ring);
  background: color-mix(in srgb, var(--info-ring) 14%, var(--card));
  color: var(--info-glyph);
  transform: none;
}

.analytics-dashboard-section {
  display: grid;
  gap: 14px;
}

.analytics-metric-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.analytics-metric-deck .metric-card {
  padding: 12px;
  background: var(--card);
}

.analytics-metric-deck .analytics-click-card {
  padding: 12px;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.analytics-metric-deck .metric-card strong {
  font-size: 1.32rem;
}

.analytics-metric-deck .risk-card {
  grid-column: span 2;
}

.analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.analytics-chart-grid .chart-card {
  grid-column: span 4;
  min-width: 0;
}

.analytics-chart-grid .chart-card.is-primary {
  grid-column: span 8;
}

.detail-grid .chart-card {
  grid-column: span 12;
}

.risk-section {
  border-color: color-mix(in srgb, var(--red) 28%, var(--line));
}

.risk-section .analytics-eyebrow,
.risk-accent .chart-card-header h3 {
  color: #fca5a5;
}

.financial-section {
  border-color: color-mix(in srgb, #0f766e 34%, var(--line));
}

.financial-section .analytics-eyebrow,
.financial-accent .chart-card-header h3 {
  color: #5eead4;
}

.chart-card.risk-accent {
  border-color: color-mix(in srgb, var(--red) 24%, var(--line));
}

.chart-card.financial-accent {
  border-color: color-mix(in srgb, #0f766e 28%, var(--line));
}

.analytics-detail-drawer {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--card);
}

.analytics-detail-drawer summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 900;
}

.analytics-detail-drawer .analytics-metric-deck,
.analytics-detail-drawer .analytics-chart-grid {
  margin-top: 12px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel);
}

.metric-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.65rem;
}

.metric-card p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.analytics-card-detail {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, #000);
}

.analytics-card-detail[hidden] {
  display: none;
}

.analytics-info-popover {
  position: fixed;
  z-index: 10000;
  max-height: min(430px, calc(100vh - 24px));
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 20px 48px rgb(0 0 0 / 46%);
}

.analytics-info-popover[hidden] {
  display: none;
}

.analytics-info-popover-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, #000);
}

.analytics-info-popover-header strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-info-popover-close {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  background: var(--card);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.analytics-info-popover-close:hover,
.analytics-info-popover-close:focus-visible {
  border-color: var(--blue);
  color: var(--text);
}

.analytics-info-popover .analytics-popover-detail {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px;
}

.analytics-card-detail strong {
  display: block;
  margin: 0 0 4px;
  color: var(--text);
  font-size: 0.78rem;
  text-transform: none;
}

.analytics-card-detail p,
.metric-card .analytics-card-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.analytics-drilldown-dialog {
  width: min(860px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 80px rgb(0 0 0 / 56%);
}

.analytics-drilldown-dialog::backdrop {
  background: rgb(2 6 23 / 62%);
}

.analytics-drilldown-panel {
  display: grid;
  max-height: inherit;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.analytics-drilldown-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, #000);
}

.analytics-drilldown-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.analytics-drilldown-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.analytics-drilldown-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.analytics-drilldown-summary article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card);
}

.analytics-drilldown-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-drilldown-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 1.25rem;
}

.analytics-drilldown-guidance {
  margin: 0 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 36%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--blue) 9%, var(--card));
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.analytics-drilldown-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px;
}

.analytics-drilldown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card);
}

.analytics-drilldown-row strong {
  display: block;
  font-size: 0.9rem;
}

.analytics-drilldown-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.analytics-drilldown-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.analytics-drilldown-meta span {
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.7rem;
  font-weight: 900;
}

.analytics-drilldown-footer {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 0.78rem;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.chart-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 15px;
}

.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.chart-card-header h3 {
  font-size: 1rem;
}

.chart-card-header select {
  max-width: 132px;
  padding: 7px 8px;
  font-size: 0.8rem;
}

.chart-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.bar-list {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(120px, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.bar-row span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  height: 12px;
  border-radius: 999px;
  background: var(--chip);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
}

.bar-row strong {
  text-align: right;
  font-size: 0.82rem;
}

.column-chart {
  min-height: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 10px;
  align-items: end;
}

.column-item {
  min-width: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
}

.column-bar-wrap {
  width: 100%;
  height: 138px;
  border-radius: 8px;
  background: var(--chip);
  display: flex;
  align-items: end;
  overflow: hidden;
}

.column-bar {
  width: 100%;
  border-radius: 8px 8px 0 0;
  background: var(--blue);
}

.column-item span,
.line-labels span {
  max-width: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-chart svg {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.line-stroke {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area-fill {
  fill: rgba(37, 99, 235, 0.18);
}

.line-chart circle {
  fill: var(--blue);
}

.line-labels,
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.radial-chart {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.radial-visual {
  width: 150px;
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.donut-chart .radial-visual::before {
  content: "";
  width: 82px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--panel);
  grid-area: 1 / 1;
}

.radial-visual span {
  grid-area: 1 / 1;
  z-index: 1;
  font-weight: 900;
}

.chart-legend {
  display: grid;
}

.chart-legend span {
  color: var(--muted);
  font-size: 0.8rem;
}

.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}

.treemap-chart {
  min-height: 210px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-content: start;
  gap: 10px;
}

.treemap-tile {
  min-width: 0;
  min-height: 86px;
  border-radius: 8px;
  padding: 11px;
  color: white;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  overflow: hidden;
  position: relative;
}

.treemap-tile::before {
  content: "";
  position: absolute;
  inset: auto 10px 9px 10px;
  height: 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 20%);
}

.treemap-tile::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 9px;
  width: var(--share);
  max-width: calc(100% - 20px);
  height: 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
}

.treemap-tile div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
}

.treemap-tile strong,
.treemap-tile span,
.treemap-tile small {
  position: relative;
  z-index: 1;
}

.treemap-tile strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.treemap-tile span {
  width: fit-content;
  min-width: 34px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgb(15 23 42 / 22%);
  font-size: 0.76rem;
  font-weight: 900;
}

.treemap-tile small {
  align-self: start;
  border-radius: 999px;
  padding: 2px 7px;
  background: rgb(15 23 42 / 24%);
  font-size: 0.7rem;
  font-weight: 900;
}

.project-volume-card .treemap-chart {
  min-height: 140px;
}

.tile-0 { background: #2563eb; }
.tile-1 { background: #0f766e; }
.tile-2 { background: #b45309; }
.tile-3 { background: #7c3aed; }
.tile-4 { background: #be123c; }
.tile-5 { background: #475569; }

.bubble-chart {
  min-height: 230px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.bubble {
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 999px;
  padding: 12px;
  background: rgba(37, 99, 235, 0.18);
  color: var(--text);
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.bubble span {
  max-width: 100%;
  color: var(--muted);
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.funnel-chart {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.funnel-step {
  min-height: 40px;
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.heatmap-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}

.heat-cell {
  min-height: 78px;
  border-radius: 8px;
  padding: 10px;
  background: rgba(37, 99, 235, var(--intensity));
  color: var(--text);
  display: grid;
  align-content: end;
}

.heat-cell span {
  color: var(--muted);
  font-size: 0.74rem;
}

.insight-card {
  grid-column: span 2;
}

.signal-list {
  display: grid;
  gap: 8px;
}

.signal-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.archive-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
}

.archive-heading,
.archive-subheading,
.record-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.archive-heading h3,
.archive-heading p,
.archive-subsection h4,
.record-group-heading h4 {
  margin: 0;
}

.archive-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

.inline-filter {
  min-width: 170px;
}

.archive-filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  justify-content: flex-end;
}

.archive-actions,
.archive-records,
.archive-subsection,
.record-group {
  display: grid;
  gap: 10px;
}

.archive-actions,
.archive-records {
  margin-top: 14px;
}

.archive-subsection {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.archive-subsection:first-child {
  border-top: 0;
  padding-top: 0;
}

.archive-row,
.record-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: var(--control);
}

.record-row.project-record {
  border-left: 4px solid var(--amber);
}

.record-row.program-record {
  border-left: 4px solid var(--success);
}

.record-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.archive-row strong,
.record-row strong,
.archive-row span,
.record-row span {
  display: block;
}

.archive-row span,
.record-row span,
.record-group-heading span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.record-note {
  align-self: center;
  justify-self: end;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.78rem;
  font-weight: 800;
}

.archive-record-detail {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.archive-record-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
  padding: 12px;
}

.archive-record-summary p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.record-type-chip {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-text);
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.archive-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
}

.archive-detail-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
  padding: 10px;
  min-width: 0;
}

.archive-detail-grid dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.archive-detail-grid dd {
  margin: 4px 0 0;
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.gantt-header,
.gantt-row {
  display: grid;
  grid-template-columns: 260px repeat(var(--gantt-column-count), var(--gantt-column-width));
  min-width: max-content;
}

.gantt-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.gantt-label,
.gantt-day {
  min-height: 42px;
  border-right: 1px solid var(--line);
  display: grid;
  align-items: center;
  padding: 0 10px;
}

.gantt-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
  grid-template-columns: auto 1fr;
  gap: 8px;
}

.gantt-label > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.15;
}

.gantt-label strong,
.gantt-label .count {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gantt-tree-toggle,
.gantt-tree-spacer {
  width: 24px;
  height: 24px;
}

.gantt-tree-toggle {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control);
  color: var(--text);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.gantt-row.level-1 .gantt-label {
  padding-left: 24px;
}

.gantt-row.level-2 .gantt-label {
  padding-left: 46px;
}

.gantt-row.level-3 .gantt-label {
  padding-left: 68px;
}

.gantt-label.openable {
  cursor: pointer;
}

.gantt-label.openable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}

.gantt-day {
  justify-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0;
}

.gantt-day.today-cell {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--primary);
}

.gantt-row {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.gantt-row:last-child {
  border-bottom: 0;
}

.gantt-bar {
  height: 24px;
  align-self: center;
  border-radius: 999px;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 10px;
  min-width: 34px;
  font-size: 0.74rem;
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  border: 0;
  z-index: 4;
  cursor: pointer;
}

.gantt-bar.draggable {
  cursor: grab;
}

.gantt-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(255, 255, 255, 0.24);
  pointer-events: none;
}

.gantt-bar strong {
  position: relative;
  z-index: 1;
}

.gantt-bar.overdue {
  outline: 2px solid #ef4444;
}

.gantt-bar.critical {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.24);
}

.gantt-bar.impacted {
  outline: 2px dashed #f59e0b;
}

.gantt-bar .resize {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
}

.gantt-bar .resize.left {
  left: 0;
}

.gantt-bar .resize.right {
  right: 0;
}

.gantt-baseline {
  height: 4px;
  align-self: end;
  margin-bottom: 5px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #64748b 0 8px, transparent 8px 12px);
  z-index: 4;
}

.gantt-milestone {
  width: 18px;
  height: 18px;
  align-self: center;
  justify-self: center;
  border: 0;
  border-radius: 3px;
  transform: rotate(45deg);
  background: #f59e0b;
  z-index: 4;
}

.gantt-milestone.overdue {
  background: #ef4444;
}

.gantt-side-panel {
  position: sticky;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: min(420px, 100%);
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px 0 0 0;
  padding: 14px;
  background: var(--panel);
  box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.18);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-grid span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  color: var(--muted);
}

.detail-grid strong {
  display: block;
  color: var(--text);
}

.dependency-editor {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.warning-box {
  margin-top: 12px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 8px;
  padding: 10px;
  background: rgba(239, 68, 68, 0.08);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}

th,
td {
  padding: 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

td {
  color: var(--text);
}

tbody tr:nth-child(even):not(.list-group-row) {
  background: color-mix(in srgb, var(--hover) 48%, transparent);
}

tr.clickable {
  cursor: pointer;
}

tr.clickable:hover {
  background: var(--hover);
}

dialog {
  width: min(720px, calc(100vw - 28px));
  border: 0;
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 0;
  background: var(--panel);
  color: var(--text);
}

dialog.admin-control-dialog {
  width: min(1080px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}

#boardSettingsDialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
}

#boardSettingsDialog .dialog-card {
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.48);
}

.dialog-card {
  padding: 18px;
}

.dialog-card.wide {
  width: 100%;
}

.admin-control-dialog-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  max-height: calc(100dvh - 40px);
  padding: 12px;
}

.admin-control-dialog-card > .dialog-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.admin-control-dialog-card h2 {
  font-size: 1.1rem;
  line-height: 1.15;
}

.admin-control-dialog-card .dialog-subtitle {
  font-size: 0.8rem;
  max-width: 78ch;
}

.admin-control-dialog-body {
  align-content: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.admin-control-dialog-body .admin-panel {
  margin: 0;
  overflow: visible;
  padding: 14px;
}

.admin-control-dialog-body .template-layout,
.admin-control-dialog-body .automation-layout,
.admin-control-dialog-body .archive-layout,
.admin-control-dialog-body .audit-layout,
.admin-control-dialog-body .report-layout {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

.admin-control-dialog-body .template-layout,
.admin-control-dialog-body .automation-layout,
.admin-control-dialog-body .archive-layout {
  gap: 8px;
  overflow: hidden;
}

.admin-control-dialog-body .archive-layout,
.admin-control-dialog-body .audit-layout {
  overflow: visible;
  padding-bottom: 8px;
}

.admin-control-dialog-body .report-layout {
  gap: 8px;
}

.admin-control-dialog-body .template-create-panel,
.admin-control-dialog-body .template-editor-panel,
.admin-control-dialog-body .automation-hero,
.admin-control-dialog-body .automation-template-card,
.admin-control-dialog-body .automation-rule-card,
.admin-control-dialog-body .automation-run-panel,
.admin-control-dialog-body .archive-panel,
.admin-control-dialog-body .audit-layout .archive-panel,
.admin-control-dialog-body .report-toolbar,
.admin-control-dialog-body .report-editor,
.admin-control-dialog-body .report-snapshots {
  margin: 0;
}

.admin-control-dialog-body .automation-hero,
.admin-control-dialog-body .automation-template-card,
.admin-control-dialog-body .automation-rule-card,
.admin-control-dialog-body .automation-run-panel,
.admin-control-dialog-body .archive-panel,
.admin-control-dialog-body .audit-layout .archive-panel,
.admin-control-dialog-body .report-toolbar,
.admin-control-dialog-body .report-editor,
.admin-control-dialog-body .report-snapshots,
.admin-control-dialog-body .template-create-panel,
.admin-control-dialog-body .template-editor-panel {
  padding: 10px;
}

.admin-control-dialog-body .automation-hero {
  align-items: center;
}

.admin-control-dialog-body .automation-hero h3,
.admin-control-dialog-body .automation-rule-card h3,
.admin-control-dialog-body .template-create-panel h3,
.admin-control-dialog-body .template-editor-panel h3,
.admin-control-dialog-body .archive-heading h3,
.admin-control-dialog-body .audit-layout .archive-heading h3,
.admin-control-dialog-body .report-toolbar h3,
.admin-control-dialog-body .report-editor h3,
.admin-control-dialog-body .report-snapshots h3 {
  font-size: 0.96rem;
  line-height: 1.18;
}

.admin-control-dialog-body .automation-hero p,
.admin-control-dialog-body .automation-rule-card p,
.admin-control-dialog-body .automation-rule-card small,
.admin-control-dialog-body .automation-template-card p,
.admin-control-dialog-body .template-create-panel p,
.admin-control-dialog-body .template-editor-panel p,
.admin-control-dialog-body .archive-heading p,
.admin-control-dialog-body .audit-layout .archive-heading p,
.admin-control-dialog-body .report-toolbar p,
.admin-control-dialog-body .report-editor-heading p {
  font-size: 0.78rem;
  line-height: 1.3;
}

.admin-control-dialog-body .automation-template-grid {
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.admin-control-dialog-body .automation-template-card {
  gap: 6px;
}

.admin-control-dialog-body .automation-rule-list {
  gap: 8px;
}

.admin-control-dialog-body .automation-rule-card {
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) max-content;
  min-width: 0;
}

.admin-control-dialog-body .automation-rule-card > div {
  min-width: 0;
}

.admin-control-dialog-body .automation-rule-main {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
}

.admin-control-dialog-body .automation-rule-copy {
  gap: 4px;
}

.admin-control-dialog-body .automation-trigger {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding: 5px 9px;
  font-size: 0.66rem;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 1px 0 0;
}

.admin-control-dialog-body .automation-rule-card h3,
.admin-control-dialog-body .automation-rule-card p,
.admin-control-dialog-body .automation-rule-card small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.admin-control-dialog-body .automation-rule-card h3 {
  font-size: 0.88rem;
  margin-top: 0;
}

.admin-control-dialog-body .automation-rule-card p,
.admin-control-dialog-body .automation-rule-card small {
  font-size: 0.74rem;
}

.admin-control-dialog-body .automation-actions,
.admin-control-dialog-body .automation-rule-actions,
.admin-control-dialog-body .report-actions {
  gap: 6px;
}

.admin-control-dialog-body .automation-rule-actions {
  justify-content: flex-end;
}

.admin-control-dialog-body button,
.admin-control-dialog-body select,
.admin-control-dialog-body input,
.admin-control-dialog-body textarea {
  min-height: 32px;
}

.admin-control-dialog-body .admin-panel h3 {
  font-size: 1.04rem;
  line-height: 1.2;
}

.admin-control-dialog-body .admin-panel p {
  font-size: 0.86rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.admin-control-dialog-body .page-visibility-list,
.admin-control-dialog-body .role-landing-list,
.admin-control-dialog-body .role-user-list {
  gap: 8px;
}

.admin-control-dialog-body .page-visibility-row,
.admin-control-dialog-body .role-landing-row,
.admin-control-dialog-body .role-user-row,
.admin-control-dialog-body .role-user-toolbar {
  padding: 10px;
}

.admin-control-dialog-body .page-visibility-row {
  grid-template-columns: minmax(170px, 0.9fr) max-content minmax(320px, 1.4fr);
}

.admin-control-dialog-body .page-role-grid {
  justify-content: flex-start;
  overflow: visible;
}

.admin-control-dialog-body .role-permission-grid {
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  padding: 10px;
}

.admin-control-dialog-body .role-permission-card {
  padding: 10px;
}

.admin-control-dialog-body .role-permission-list {
  max-height: 180px;
}

.admin-control-dialog-body .role-user-row {
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 0.32fr) minmax(220px, 0.5fr);
}

.admin-control-dialog-body .role-user-actions {
  gap: 6px;
}

.admin-control-dialog-body .role-user-actions button {
  min-height: 32px;
  padding-inline: 6px;
}

.security-review-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

#adminSecurityReviewPanel:not([hidden]) {
  display: grid;
  gap: 12px;
}

#adminSecurityReviewPanel .settings-section-heading {
  align-items: center;
  gap: 14px;
}

#adminSecurityReviewPanel .settings-section-heading > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}

#adminSecurityReviewPanel .settings-section-heading .settings-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-top: 0;
}

#adminSecurityReviewPanel .settings-section-heading .settings-actions button {
  min-width: 118px;
}

#adminSecurityReviewPanel .compact-heading {
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 12px;
}

#adminSecurityReviewPanel .compact-heading > button {
  align-self: center;
  white-space: nowrap;
}

.security-summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.security-summary-card strong {
  display: block;
  font-size: 1.18rem;
  line-height: 1;
}

.security-summary-card span,
.security-summary-card small {
  display: block;
}

.security-summary-card span {
  margin-top: 5px;
  font-weight: 800;
}

.security-summary-card small {
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 3px;
}

.security-event-filters {
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(130px, 0.7fr));
}

.security-event-list {
  display: grid;
  gap: 8px;
}

.security-event-card {
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) max-content;
  padding: 10px;
}

.security-event-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.24);
}

.security-event-card.open {
  border-left: 3px solid var(--accent);
}

.security-control-family {
  display: grid;
  gap: 8px;
}

.security-control-family h4 {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 6px 0 0;
  text-transform: uppercase;
}

.security-control-card.passed {
  border-left: 3px solid var(--green);
}

.security-control-card.failed {
  border-left: 3px solid var(--red);
}

.security-control-card.needs_review {
  border-left: 3px solid var(--amber);
}

.security-control-card.not_applicable,
.security-control-card.not_run {
  border-left: 3px solid var(--muted);
}

.security-incident-card {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), var(--surface) 42%);
  border-color: rgba(245, 158, 11, 0.7);
}

.security-event-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.security-event-title-row,
.security-event-meta,
.security-event-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.security-event-title-row strong {
  font-size: 0.94rem;
}

.security-event-card p,
.security-event-card small {
  margin: 0;
}

.security-event-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.security-event-meta span,
.security-incident-pill,
.security-review-status,
.security-severity {
  background: var(--chip);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
}

.security-incident-pill {
  background: rgba(245, 158, 11, 0.22);
  color: #fde68a;
}

.security-severity.high,
.security-severity.critical {
  background: rgba(239, 68, 68, 0.18);
  color: var(--red);
}

.security-severity.medium {
  background: rgba(245, 158, 11, 0.18);
  color: var(--amber);
}

.security-severity.low {
  background: rgba(34, 197, 94, 0.18);
  color: var(--green);
}

.security-severity.info {
  background: rgba(96, 165, 250, 0.16);
  color: var(--blue);
}

.security-event-details summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
}

.security-event-details pre {
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  margin: 6px 0 0;
  max-height: 160px;
  overflow: auto;
  padding: 8px;
  white-space: pre-wrap;
}

.security-event-actions {
  justify-content: flex-end;
}

.security-event-actions button {
  min-width: 96px;
}

.security-review-detail {
  background: color-mix(in srgb, var(--input) 78%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 12px;
}

.security-review-detail-heading {
  align-items: start;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.security-review-detail-heading strong,
.security-review-detail-copy h5,
.security-review-notes span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
  margin: 0;
}

.security-review-detail-heading span {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  margin-top: 2px;
}

.security-review-detail-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
}

.security-review-detail-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.security-review-detail-grid div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 8px;
}

.security-review-detail-grid dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  margin: 0 0 3px;
  text-transform: uppercase;
}

.security-review-detail-grid dd {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  margin: 0;
  overflow-wrap: anywhere;
}

.security-review-detail-copy {
  display: grid;
  gap: 4px;
}

.security-review-detail-copy p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0;
}

.security-review-notes {
  display: grid;
  gap: 5px;
}

.security-review-notes textarea {
  min-height: 78px;
  resize: vertical;
}

.security-review-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.security-review-metadata pre {
  max-height: 220px;
}

.session-inventory-list {
  display: grid;
  gap: 8px;
}

.session-inventory-card {
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) max-content;
  padding: 10px;
}

.session-inventory-card.current {
  border-left: 3px solid var(--green);
}

.session-inventory-card.stale {
  border-left: 3px solid var(--amber);
}

.session-inventory-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.session-inventory-title-row,
.session-inventory-meta,
.session-inventory-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.session-inventory-title-row strong {
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.session-inventory-card small {
  color: var(--muted);
  font-size: 0.74rem;
}

.session-inventory-meta span,
.session-status-pill {
  background: var(--chip);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
}

.session-status-pill.current,
.session-status-pill.fresh {
  background: rgba(34, 197, 94, 0.18);
  color: var(--green);
}

.session-status-pill.stale {
  background: rgba(245, 158, 11, 0.18);
  color: var(--amber);
}

.session-inventory-actions {
  justify-content: flex-end;
}

.admin-control-dialog-card > .dialog-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  margin-top: 0;
  padding-top: 10px;
}

@media (max-width: 900px) {
  .admin-control-dialog-body .role-user-toolbar,
  .admin-control-dialog-body .page-visibility-row,
  .admin-control-dialog-body .role-user-row,
  .admin-control-dialog-body .automation-rule-card,
  .admin-control-dialog-body .automation-rule-main,
  .security-event-card,
  .session-inventory-card,
  .security-event-filters {
    grid-template-columns: 1fr;
  }

  .admin-control-dialog-body .page-role-grid,
  .admin-control-dialog-body .role-user-actions,
  .role-user-toolbar-actions,
  .admin-control-dialog-body .automation-rule-actions {
    justify-content: flex-start;
  }
}

.dialog-card h2 {
  margin: 0;
}

.dialog-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dialog-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.derived-completion-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel-soft);
}

.derived-completion-card > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.derived-completion-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.derived-completion-card strong {
  font-size: 1.15rem;
}

.derived-health-card strong {
  background: transparent;
}

.derived-health-card strong.health-green {
  color: #22c55e;
}

.derived-health-card strong.health-yellow {
  color: #f59e0b;
}

.derived-health-card strong.health-red {
  color: #ef4444;
}

.derived-completion-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.ticket-field-hidden {
  display: none !important;
}

.settings-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  background: var(--panel-soft);
}

.settings-section-heading {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.settings-section-heading h3,
.settings-section-heading h4,
.settings-section-heading p {
  margin: 0;
}

.settings-section-heading h4 {
  font-size: 0.95rem;
}

.settings-section-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.user-session-settings-section {
  display: grid;
  gap: 10px;
}

.user-session-settings-section .security-review-summary {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.user-settings-card .session-inventory-card {
  grid-template-columns: 1fr;
}

.user-settings-card .session-inventory-actions {
  justify-content: flex-start;
}

.sla-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.workflow-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.workflow-scope-grid {
  align-items: end;
}

.workflow-backlog-toggle {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
}

.workflow-backlog-toggle strong,
.workflow-backlog-toggle small {
  display: block;
}

.workflow-backlog-toggle small {
  color: var(--muted);
  font-size: 0.76rem;
  margin-top: 2px;
}

.workflow-status-row.system-status-row input,
.workflow-status-row.system-status-row select {
  background: var(--chip-bg);
  color: var(--muted);
  cursor: not-allowed;
}

.workflow-editor-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 14px;
}

.workflow-editor-toolbar strong,
.workflow-editor-toolbar span {
  display: block;
}

.workflow-editor-toolbar span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 2px;
}

.workflow-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.workflow-status-editor {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.workflow-status-header {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: 0.68rem;
  font-weight: 900;
  gap: 8px;
  grid-template-columns: 34px minmax(190px, 1fr) minmax(150px, 220px) auto;
  letter-spacing: 0.02em;
  padding: 0 8px;
  text-transform: uppercase;
}

.workflow-status-row {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: 34px minmax(190px, 1fr) minmax(150px, 220px) auto;
  padding: 6px 8px;
}

.workflow-status-index {
  align-items: center;
  background: var(--chip-bg);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.workflow-status-name-field,
.workflow-status-category-field {
  min-width: 0;
}

.workflow-status-row label span {
  font-size: 0.68rem;
  line-height: 1;
  margin-bottom: 3px;
}

.workflow-status-row input,
.workflow-status-row select {
  min-height: 30px;
}

.workflow-status-actions {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.workflow-status-actions .icon-button {
  min-height: 30px;
  min-width: 42px;
  width: auto;
}

.workflow-transition-panel {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 2px;
}

.workflow-transition-editor {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}

.workflow-transition-row {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  padding: 7px 8px;
}

.workflow-transition-row strong,
.workflow-transition-row span {
  display: block;
}

.workflow-transition-row > div:first-child span {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2px;
}

.workflow-transition-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workflow-transition-options label {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 6px;
  font-size: 0.72rem;
  min-height: 26px;
  padding: 3px 8px;
}

.workflow-transition-options input {
  width: auto;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.ticket-layout-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.ticket-layout-field {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  background: var(--panel);
}

.ticket-layout-field input {
  width: auto;
  margin-top: 2px;
}

.ticket-layout-field strong,
.ticket-layout-field small {
  display: block;
}

.ticket-layout-field small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.ticket-layout-field.locked {
  opacity: 0.78;
}

.workflow-rule-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.workflow-rule-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.workflow-rule-card > strong {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.workflow-required-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px 12px;
}

.workflow-required-grid label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
}

.workflow-required-grid input {
  width: auto;
}

@media (max-width: 760px) {
  .workflow-settings-grid,
  .workflow-status-header,
  .workflow-status-row,
  .workflow-transition-row,
  .workflow-rule-grid {
    grid-template-columns: 1fr;
  }

  .workflow-status-header {
    display: none;
  }

  .workflow-editor-toolbar,
  .workflow-editor-actions,
  .workflow-status-actions {
    justify-content: flex-start;
  }
}

.settings-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  margin-top: 12px;
}

.audit-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 0;
}

.audit-header-actions .secondary-button {
  min-width: 112px;
}

:is(
  .admin-control-grid,
  .page-visibility-list,
  .integration-provider-grid,
  .integration-card-grid,
  .integration-connection-list,
  .role-landing-list,
  .role-user-list,
  .role-user-toolbar,
  .template-create-panel,
  .template-editor-panel,
  .raid-toolbar,
  .audit-filters,
  .metrics-controls,
  .report-toolbar,
  .settings-actions,
  .timesheet-toolbar,
  .timesheet-entry-panel,
  .client-toolbar,
  .client-toolbar-actions,
  .client-list-panel,
  .client-table-wrap,
  .billing-toolbar,
  .invoice-preview,
  .invoice-document,
  .automation-template-grid
) {
  min-width: 0;
  max-width: 100%;
}

:is(
  .page-role-grid,
  .role-permission-list,
  .timesheet-table-wrap,
  .gantt-shell,
  .table-shell
) {
  scrollbar-gutter: stable;
}

.toggle-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.toggle-row input {
  width: auto;
}

.worklog-editor,
.activity-editor {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-soft);
}

.worklog-heading h3,
.worklog-heading p {
  margin: 0;
}

.ticket-remote-support {
  display: grid;
  gap: 12px;
}

.ticket-remote-support[hidden] {
  display: none;
}

.ticket-remote-support .worklog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ticket-remote-support-status {
  min-height: 38px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
}

.ticket-remote-support-status[data-state="ready"],
.ticket-remote-support-status[data-state="complete"] {
  border-color: var(--green);
  color: var(--text);
}

.ticket-remote-support-status[data-state="waiting"] {
  border-color: var(--amber);
  color: var(--text);
}

.ticket-remote-support-status[data-state="error"] {
  border-color: var(--red);
  color: var(--red);
}

.ticket-remote-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ticket-remote-support-grid .span-2 {
  grid-column: 1 / -1;
}

.ticket-remote-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-remote-support-tools {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ticket-remote-support-tools[hidden] {
  display: none;
}

.ticket-remote-support-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ticket-remote-support-tool-grid > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.ticket-remote-support-tool-grid > label > span,
.ticket-remote-support-tool-grid > label > small,
.ticket-remote-support-tool-grid > label > textarea,
.ticket-remote-support-tool-grid > label > select {
  grid-column: 1 / -1;
}

.ticket-remote-support-tool-grid > label > small {
  color: var(--muted);
  line-height: 1.4;
}

.ticket-remote-support-tool-grid .span-2 {
  grid-column: 1 / -1;
}

.ticket-remote-support-operations {
  min-height: 46px;
  max-height: 180px;
  overflow: auto;
  white-space: pre-line;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  line-height: 1.55;
}

.ticket-remote-support-evidence {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ticket-remote-support-evidence[hidden] {
  display: none;
}

.ticket-remote-support-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ticket-remote-support-evidence-grid > div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.ticket-remote-support-evidence-list {
  min-height: 46px;
  max-height: 180px;
  overflow: auto;
  white-space: pre-line;
  color: var(--muted);
  line-height: 1.55;
}

.ticket-remote-support-artifact-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.ticket-remote-support-outcome {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ticket-remote-support-outcome[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .ticket-remote-support-grid,
  .ticket-remote-support-tool-grid,
  .ticket-remote-support-evidence-grid,
  .ticket-remote-support-outcome {
    grid-template-columns: minmax(0, 1fr);
  }

  .ticket-remote-support-grid .span-2,
  .ticket-remote-support-tool-grid .span-2 {
    grid-column: auto;
  }

  .ticket-remote-support-artifact-download {
    grid-template-columns: minmax(0, 1fr);
  }
}

.timer-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: var(--panel);
}

.ticket-timer-panel {
  margin: 14px 0 0;
}

.timer-panel strong,
.timer-panel span {
  display: block;
}

.timer-panel span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.timer-actions {
  display: flex;
  gap: 8px;
}

.worklog-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.compact-action-button {
  width: fit-content;
  margin-top: 12px;
}

.duration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.color-picker-section {
  position: relative;
  display: grid;
  gap: 8px;
}

.color-picker-heading {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.color-dropdown-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  background: var(--control);
  color: var(--text);
  text-align: left;
}

.dropdown-caret {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.75rem;
}

.dropdown-caret::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.selected-color-swatch {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #2563eb;
}

.color-dropdown-menu {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  left: 0;
  width: min(430px, calc(100vw - 48px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.color-palette-group {
  display: grid;
  gap: 8px;
}

.color-palette-group strong {
  color: var(--text);
  font-size: 0.84rem;
}

.color-swatch-grid {
  display: grid;
  gap: 4px;
}

.color-swatch-grid.theme {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.color-swatch-grid.standard {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.color-swatch-button {
  width: 100%;
  aspect-ratio: 1;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0;
}

.color-swatch-button:hover,
.color-swatch-button.active {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.custom-color-panel {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.custom-color-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.6fr);
  gap: 10px;
}

.custom-color-main input[type="color"] {
  height: 76px;
  padding: 4px;
}

.custom-color-main input[type="text"] {
  text-transform: uppercase;
}

.rgb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.color-preview-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.color-preview-pair span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.large-color-preview {
  height: 48px;
  margin-top: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

.color-dropdown-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr) minmax(120px, auto);
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.checklist-summary {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--text);
  background: var(--panel);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.checklist-editor {
  display: grid;
  gap: 12px;
}

.checklist-editor .worklog-heading {
  display: grid;
  gap: 10px;
}

.checklist-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 0;
}

.checklist-add-row input,
.checklist-add-row button {
  min-height: 36px;
}

.checklist-add-row .compact-action-button {
  margin-top: 0;
}

.inline-field-error {
  margin: -4px 0 0;
  display: block;
  color: #f87171;
  font-size: 0.8rem;
  font-weight: 800;
}

.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.checklist-list {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.checklist-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--panel);
}

.checklist-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.checklist-row.complete input[type="text"] {
  color: var(--muted);
  text-decoration: line-through;
}

.attachment-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1fr) minmax(110px, auto);
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.worklog-list,
.activity-list,
.attachment-list,
.audit-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.worklog-row,
.activity-row,
.attachment-row,
.audit-row,
.definition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--panel);
}

.worklog-row:hover,
.activity-row:hover,
.attachment-row:hover,
.audit-row:hover,
.definition-row:hover {
  border-color: var(--line-strong);
}

.worklog-row strong,
.worklog-row span,
.activity-row strong,
.activity-row p,
.activity-row time,
.attachment-row strong,
.attachment-row span,
.audit-row strong,
.audit-row span,
.audit-row time,
.definition-row strong,
.definition-row span {
  display: block;
}

.worklog-row span,
.activity-row p,
.activity-row time,
.attachment-row span,
.audit-row span,
.audit-row time,
.definition-row span,
.empty-inline {
  color: var(--muted);
  font-size: 0.8rem;
}

.worklog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.activity-row p,
.audit-row span {
  margin: 3px 0 0;
  line-height: 1.35;
}

.audit-row {
  align-items: start;
}

.audit-row-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.audit-boundary-chip {
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.audit-boundary-chip.platform {
  background: color-mix(in srgb, var(--blue) 16%, var(--chip));
  color: var(--blue);
}

.audit-boundary-chip.security {
  background: color-mix(in srgb, var(--danger) 14%, var(--chip));
  color: var(--danger);
}

.audit-boundary-chip.tenant {
  background: color-mix(in srgb, var(--success) 14%, var(--chip));
  color: var(--success);
}

.audit-row.expanded {
  background: var(--panel-soft);
}

.audit-row-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.audit-row-actions .compact-action-button {
  margin: 0;
}

.audit-drilldown {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.audit-detail-grid,
.audit-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.audit-detail-cell,
.audit-detail-note,
.audit-value-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
  padding: 8px;
  min-width: 0;
}

.audit-detail-cell span,
.audit-value-block strong,
.audit-detail-note strong {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.audit-detail-cell strong,
.audit-detail-note p {
  display: block;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.audit-value-block pre {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 6px 0 0;
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
}

.audit-drilldown-actions {
  display: flex;
  justify-content: flex-end;
}

.attachment-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.attachment-download {
  text-decoration: none;
}

.custom-field-definition-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.structured-fields,
.definition-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.wip-limit-row {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 140px);
  padding: 10px;
}

.wip-limit-row span {
  color: var(--text);
  font-weight: 800;
}

.field-helper {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.span-2 {
  grid-column: span 2;
}

menu {
  padding: 0;
  margin: 16px 0 0;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 82%, transparent), var(--panel-soft));
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  line-height: 1.45;
}

.empty-inline,
.loading-state,
.error-state {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel-soft);
  line-height: 1.4;
}

.loading-state {
  color: var(--muted);
}

.error-state {
  border-color: rgba(220, 38, 38, 0.5);
  color: var(--red);
  background: rgba(220, 38, 38, 0.08);
}

@media (max-width: 980px) {
  body {
    grid-template-columns: 1fr;
  }

  body:has(.shortcut-rail.collapsed) {
    grid-template-columns: 1fr;
  }

  body.sidebar-collapsed {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  body.sidebar-collapsed:has(.shortcut-rail.collapsed) {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .platform-tenant-detail-backdrop,
  .platform-signup-intake-backdrop,
  body:has(.shortcut-rail.collapsed) .platform-tenant-detail-backdrop,
  body:has(.shortcut-rail.collapsed) .platform-signup-intake-backdrop {
    left: 0;
    right: 0;
    padding: 76px 12px 12px;
  }

  body.sidebar-collapsed .platform-tenant-detail-backdrop,
  body.sidebar-collapsed .platform-signup-intake-backdrop,
  body.sidebar-collapsed:has(.shortcut-rail.collapsed) .platform-tenant-detail-backdrop,
  body.sidebar-collapsed:has(.shortcut-rail.collapsed) .platform-signup-intake-backdrop {
    left: 64px;
  }

  .platform-tenant-detail-dialog,
  .platform-signup-intake-dialog {
    max-height: calc(100vh - 88px);
  }

  .sidebar {
    min-height: auto;
  }

  body.sidebar-collapsed .sidebar {
    min-height: 100vh;
    align-items: center;
  }

  body.sidebar-collapsed .compact-dock {
    grid-template-columns: 1fr;
  }

  body.sidebar-collapsed .compact-dock-button {
    width: 100%;
  }

  .sidebar-flyout {
    position: static;
    width: 100%;
    max-height: none;
  }

  .shortcut-rail {
    min-height: auto;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .shortcut-rail.collapsed {
    width: auto;
  }

  .shortcut-dashboard-panel {
    inset: auto 12px 12px 12px;
    width: auto;
    max-height: min(72vh, calc(100vh - 24px));
  }

  .board-detail-panel {
    inset: auto 12px 12px 12px;
    width: auto;
    max-width: none;
    max-height: min(70vh, calc(100vh - 24px));
  }

  .filters,
  .stats,
  .metric-grid,
  .chart-grid,
  .dashboard-grid,
  .workload-summary,
  .workload-alert-counts,
  .timesheet-summary,
  .automation-template-grid,
  .raid-toolbar,
  .raid-summary,
  .raid-meta-grid,
  .report-health-grid,
  .report-text-grid,
  .report-template-two-column,
  .audit-filters {
    grid-template-columns: 1fr 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-primary {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .page-title-block {
    min-width: 0;
  }

  .header-search {
    width: 100%;
  }

  .board-toolbar-panel,
  .calendar-layout.detail-open,
  .timesheet-grid,
  .admin-control-grid,
  .saved-view-bar,
  .page-visibility-row,
  .role-landing-row,
  .report-toolbar,
  .report-editor-heading,
  .role-user-toolbar,
  .role-user-row,
  .user-settings-profile {
    grid-template-columns: 1fr;
  }

  .board-view-controls,
  .scope-controls,
  .list-toolbar-group.scope-controls {
    grid-template-columns: 1fr;
  }

  .report-actions {
    justify-content: flex-start;
  }

  .page-role-grid {
    justify-content: flex-start;
  }
}

@media (max-width: 1240px) {
  .metrics-controls,
  .report-toolbar,
  .timesheet-toolbar,
  .template-create-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics-trend-nav.segmented.compact {
    grid-column: 1 / -1;
  }

  .billing-toolbar {
    grid-template-columns: 1fr;
  }

  .program-lines-filters,
  .program-line-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billing-toolbar-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics-apply {
    min-width: 0;
  }

  .analytics-chart-grid .chart-card {
    grid-column: span 6;
  }

  .analytics-chart-grid .chart-card.is-primary,
  .detail-grid .chart-card {
    grid-column: span 12;
  }

  .analytics-metric-deck .risk-card {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .app-shell,
  .sidebar {
    padding: 16px;
  }

  .filters,
  .stats,
  .metric-grid,
  .chart-grid,
  .dashboard-grid,
  .workload-summary,
  .workload-alert-counts,
  .timesheet-summary,
  .client-summary,
  .billing-summary,
  .program-lines-filters,
  .program-line-metrics,
  .automation-template-grid,
  .automation-rule-card,
  .raid-toolbar,
  .raid-summary,
  .raid-meta-grid,
  .report-toolbar,
  .report-health-grid,
  .report-text-grid,
  .report-template-two-column,
  .audit-filters,
  .timesheet-toolbar,
  .timesheet-entry-panel,
  .client-toolbar,
  .client-toolbar-actions,
  .billing-toolbar,
  .billing-toolbar-controls,
  .client-card-metrics,
  .template-create-panel,
  .template-editor-panel,
  .checklist-add-row,
  .comment-form,
  .custom-field-definition-form,
  .integration-card header,
  .integration-connection-row,
  .integration-event-row,
  .ticket-layout-field-grid,
  .team-member-editor,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .workload-alert-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .workload-alert-row {
    grid-template-columns: 1fr;
  }

  .client-toolbar,
  .program-lines-heading,
  .program-line-detail-heading,
  .invoice-document-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .client-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .login-card.signup-mode,
  .login-card {
    width: 100%;
  }

  .signup-fields {
    grid-template-columns: 1fr;
  }

  .signup-fields .span-2 {
    grid-column: auto;
  }

  .client-search-field {
    min-width: 0;
  }

  .filter-actions button,
  .saved-view-actions button,
  .report-actions button,
  .toolbar button {
    width: 100%;
  }

  .header-search-row {
    grid-template-columns: 1fr;
  }

  .saved-view-actions {
    justify-content: stretch;
  }

  .panel-heading-row,
  .platform-detail-heading,
  .platform-lifecycle-card,
  .integration-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-detail-actions {
    justify-content: space-between;
  }

  .platform-tenant-detail-scroll {
    padding: 12px;
  }

  .integration-actions button {
    width: 100%;
  }

  .metrics-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .metrics-controls {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  .metrics-trend-nav.segmented.compact {
    grid-column: 1 / -1;
    width: 100%;
  }

  .metrics-apply {
    width: 100%;
  }

  .metrics-scope-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .metrics-scope-title span {
    text-align: left;
  }

  .metrics-scope-chip {
    white-space: normal;
  }

  .insight-card {
    grid-column: auto;
  }

  .analytics-panel {
    padding: 12px;
  }

  .analytics-section-nav {
    display: grid;
    grid-template-columns: 1fr;
  }

  .analytics-section-header {
    display: grid;
  }

  .analytics-kpi-strip,
  .analytics-metric-deck {
    grid-template-columns: 1fr;
  }

  .analytics-chart-grid .chart-card,
  .analytics-chart-grid .chart-card.is-primary,
  .detail-grid .chart-card {
    grid-column: span 12;
  }

  .signal-card summary {
    min-height: auto;
  }

  .bar-row {
    grid-template-columns: minmax(72px, 1fr) 1fr 34px;
  }

  .comment-form,
  .custom-field-definition-form {
    grid-template-columns: 1fr;
  }

  .timer-panel {
    grid-template-columns: 1fr;
  }

  .timer-actions {
    flex-direction: column;
  }

  .span-2 {
    grid-column: auto;
  }

  .toolbar {
    width: 100%;
  }

  .primary-button {
    flex: 1;
  }
}

.assistant-panel {
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto;
  order: 2;
  min-width: 0;
  width: 100%;
  max-height: calc(100vh - 96px);
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #020617), var(--bg)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 42px rgba(2, 6, 23, 0.22);
}

.shortcut-assistant-panel {
  flex: 1 1 auto;
  min-height: min(620px, calc(100vh - 220px));
}

.assistant-panel.assistant-panel-collapsed {
  display: block;
  flex: 0 0 auto;
  min-height: auto;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.assistant-panel.assistant-panel-collapsed .assistant-messages,
.assistant-panel.assistant-panel-collapsed .assistant-compose {
  display: none;
}

.assistant-panel.assistant-panel-collapsed .assistant-panel-header {
  border-bottom: 0;
  padding: 0;
  background: transparent;
}

.assistant-panel.assistant-panel-collapsed .assistant-header-actions,
.assistant-panel.assistant-panel-collapsed .assistant-orb,
.assistant-panel.assistant-panel-collapsed #assistantStatus {
  display: none;
}

.assistant-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 10%, transparent), transparent 70%),
    rgba(15, 23, 42, 0.44);
}

.assistant-title-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.assistant-panel.assistant-panel-collapsed .assistant-title-button {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 8px;
  padding: 0 12px;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.12), transparent 72%),
    var(--control);
  color: var(--text);
}

.assistant-title-button:hover,
.assistant-title-button:focus-visible {
  outline: none;
  color: var(--text);
}

.assistant-thread-list {
  display: grid;
  gap: 14px;
}

.assistant-thread-empty {
  margin: 10px 4px 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.assistant-thread-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
}

.assistant-thread-row > button:first-child {
  min-width: 0;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.assistant-thread-row > button:first-child span,
.assistant-thread-row > button:first-child small,
.assistant-thread-row > button:first-child em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-thread-row > button:first-child small,
.assistant-thread-row > button:first-child em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
}

.assistant-thread-row:hover > button:first-child,
.assistant-thread-row.active > button:first-child {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}

.assistant-thread-menu-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  opacity: 0;
}

.assistant-thread-menu-icon {
  display: grid;
  grid-template-rows: repeat(3, 3px);
  gap: 3px;
  place-items: center;
}

.assistant-thread-menu-icon i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.assistant-thread-row:hover .assistant-thread-menu-button,
.assistant-thread-row.active .assistant-thread-menu-button,
.assistant-thread-menu-button[aria-expanded="true"],
.assistant-thread-menu-button:focus-visible {
  opacity: 1;
}

.assistant-thread-menu-button:hover,
.assistant-thread-menu-button:focus-visible,
.assistant-thread-menu-button[aria-expanded="true"] {
  outline: none;
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  color: #bfdbfe;
}

.assistant-thread-action-popover,
.assistant-thread-confirm-popover {
  position: absolute;
  z-index: 4;
  top: 34px;
  right: 0;
  width: min(220px, calc(100% - 10px));
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 10px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)),
    var(--panel);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.42);
}

.assistant-thread-action-popover {
  display: grid;
  gap: 4px;
}

.assistant-thread-action-popover button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  padding: 0 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 0.78rem;
  font-weight: 850;
}

.assistant-thread-action-popover button:hover,
.assistant-thread-action-popover button:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}

.assistant-thread-action-popover button[data-assistant-conversation-action="delete"]:hover,
.assistant-thread-action-popover button[data-assistant-conversation-action="delete"]:focus-visible {
  background: color-mix(in srgb, var(--red) 18%, transparent);
  color: #fecaca;
}

.assistant-thread-confirm-popover {
  display: grid;
  gap: 7px;
}

.assistant-thread-confirm-popover strong {
  font-size: 0.82rem;
}

.assistant-thread-confirm-popover p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.assistant-thread-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.assistant-thread-confirm-actions .primary-button,
.assistant-thread-confirm-actions .secondary-button {
  min-height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 0.76rem;
}

.assistant-panel.assistant-panel-collapsed .assistant-title-button:hover,
.assistant-panel.assistant-panel-collapsed .assistant-title-button:focus-visible {
  border-color: var(--line-strong);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.18), transparent 72%),
    var(--hover);
}

.assistant-orb {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: url("./client/assets/sentinel-assistant-desktop-icon.png") center / auto 122% no-repeat;
  filter: drop-shadow(0 8px 16px rgba(124, 58, 237, 0.3));
}

.assistant-orb::before,
.assistant-orb::after {
  display: none;
}

.assistant-title-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.assistant-panel.assistant-panel-collapsed .assistant-title-copy {
  justify-items: center;
  text-align: center;
}

.assistant-panel-header span[hidden] {
  display: none;
}

.assistant-panel-header strong,
.assistant-message strong,
.assistant-result-card strong,
.assistant-confirmation-card strong,
.assistant-permission-card strong {
  display: block;
  color: var(--text);
}

.assistant-panel-header strong {
  font-size: 0.95rem;
  line-height: 1.1;
}

.assistant-panel-header span,
.assistant-message p,
.assistant-result-card p,
.assistant-confirmation-card p,
.assistant-permission-card p,
.assistant-tool-results,
.assistant-degraded {
  color: var(--muted);
}

.assistant-header-actions,
.assistant-compose-actions,
.assistant-confirmation-actions,
.assistant-permission-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.assistant-header-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-self: end;
  min-width: max-content;
}

.assistant-clear-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-color: color-mix(in srgb, var(--blue) 20%, var(--line));
  background: rgba(30, 41, 59, 0.58);
}

.assistant-collapse-chevron {
  transition: transform 160ms ease;
}

.assistant-panel:not(.assistant-panel-collapsed) .assistant-collapse-chevron {
  transform: rotate(225deg) translateY(-2px);
}

.assistant-panel.assistant-panel-collapsed .assistant-collapse-chevron {
  transform: rotate(45deg) translateY(-2px);
}

.assistant-messages {
  min-height: 220px;
  overflow: auto;
  padding: 16px 14px 18px;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.22), transparent 18%),
    transparent;
}

.assistant-message {
  position: relative;
  width: fit-content;
  max-width: min(88%, 620px);
  margin: 0 0 16px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.78), rgba(15, 23, 42, 0.74)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 32px rgba(2, 6, 23, 0.18);
}

.assistant-message p {
  margin: 6px 0 0;
  white-space: pre-wrap;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  line-height: 1.48;
}

.assistant-message strong {
  color: #f8fafc;
  font-size: 0.8rem;
  line-height: 1.1;
}

.assistant-message-user {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line));
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(14, 116, 144, 0.28)),
    rgba(15, 23, 42, 0.72);
}

.assistant-message-user p {
  color: #e5f0ff;
}

.assistant-card-stack {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.assistant-message-attachments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.assistant-message-attachments span {
  display: grid;
  gap: 2px;
  max-width: 220px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 9px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.48);
}

.assistant-message-attachments strong,
.assistant-message-attachments small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-message-attachments small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.assistant-result-card,
.assistant-confirmation-card,
.assistant-permission-card {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
}

.assistant-status-report-card {
  display: grid;
  gap: 10px;
  min-width: min(100%, 420px);
}

.assistant-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.assistant-card-header-row > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.assistant-badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.assistant-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(30, 41, 59, 0.58);
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.assistant-badge-warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.14);
  color: #fde68a;
}

.assistant-badge-danger {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
}

.assistant-ticket-list-card {
  display: grid;
  gap: 12px;
  width: min(100%, 760px);
}

.assistant-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.assistant-recommendation {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(37, 99, 235, 0.1);
}

.assistant-recommendation p,
.assistant-empty-card-text {
  margin: 0;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  line-height: 1.42;
}

.assistant-ticket-row-list {
  display: grid;
  gap: 7px;
}

.assistant-ticket-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(15, 23, 42, 0.45);
}

.assistant-ticket-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.assistant-ticket-main strong,
.assistant-ticket-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-ticket-main small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.assistant-open-row-button {
  min-height: 28px;
  padding: 0 10px;
  white-space: nowrap;
}

.assistant-view-more {
  border: 1px dashed color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 8px;
  padding: 8px;
}

.assistant-view-more summary {
  cursor: pointer;
  color: #93c5fd;
  font-size: 0.8rem;
  font-weight: 900;
}

.assistant-view-more .assistant-ticket-row-list {
  margin-top: 8px;
}

.assistant-summary-card {
  display: grid;
  gap: 10px;
  min-width: min(100%, 460px);
}

.assistant-status-report-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
}

.assistant-card-kicker {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  grid-column: 1 / -1;
}

.assistant-health-pill {
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
  font-size: 0.72rem;
  font-weight: 900;
}

.assistant-health-yellow {
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
}

.assistant-health-red {
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
}

.assistant-status-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.assistant-report-metric {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 7px;
  padding: 7px;
  background: rgba(30, 41, 59, 0.42);
}

.assistant-report-metric strong {
  font-size: 0.95rem;
}

.assistant-report-metric span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.assistant-report-section {
  display: grid;
  gap: 5px;
}

.assistant-report-section ul {
  margin: 0;
  padding-left: 18px;
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
}

.assistant-summary-health-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.assistant-summary-health-row span {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 7px;
  padding: 7px;
  background: rgba(15, 23, 42, 0.34);
}

.assistant-summary-health-row strong,
.assistant-summary-health-row em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-summary-health-row strong {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.assistant-summary-health-row em {
  margin-top: 3px;
  color: #86efac;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  text-transform: capitalize;
}

.assistant-summary-health-row .assistant-health-yellow {
  color: #fde68a;
}

.assistant-summary-health-row .assistant-health-red {
  color: #fecaca;
}

.assistant-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.assistant-card-actions .secondary-button {
  min-height: 30px;
  border-radius: 8px;
}

.assistant-file-card {
  display: grid;
  gap: 10px;
  min-width: min(100%, 420px);
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
}

.assistant-file-card-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.assistant-file-icon {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.72));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}

.assistant-file-card-main > span:last-child {
  min-width: 0;
}

.assistant-file-meta {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.assistant-clarification-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.assistant-tool-results {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.assistant-download-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.assistant-tool-results span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.78rem;
}

.assistant-degraded {
  margin-top: 8px;
  font-size: 0.82rem;
}

.assistant-confirmation-card {
  margin-top: 10px;
  border-color: var(--amber);
  box-shadow: inset 3px 0 0 var(--amber);
}

.assistant-permission-card {
  margin: 0 0 16px;
  width: fit-content;
  max-width: min(88%, 560px);
  border-color: rgba(96, 165, 250, 0.34);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.72)),
    rgba(15, 23, 42, 0.68);
  box-shadow:
    inset 3px 0 0 #60a5fa,
    0 14px 32px rgba(2, 6, 23, 0.2);
}

.assistant-permission-card p {
  margin: 6px 0 12px;
  line-height: 1.45;
}

.assistant-permission-actions {
  justify-content: flex-start;
}

.assistant-compose {
  display: grid;
  gap: 6px;
  margin: 0 12px 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.assistant-compose-bar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 40px 34px;
  align-items: center;
  gap: 8px;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  padding: 7px 8px 7px 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(39, 39, 42, 0.94), rgba(24, 24, 27, 0.94)),
    rgba(15, 23, 42, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 34px rgba(2, 6, 23, 0.24);
  position: relative;
  overflow: hidden;
}

.assistant-compose-bar::before {
  content: "";
  position: absolute;
  inset: 12px 128px 12px 72px;
  border-radius: 999px;
  opacity: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 8px,
      rgba(59, 130, 246, 0.16) 8px 10px,
      rgba(96, 165, 250, 0.46) 10px 11px,
      transparent 11px 16px
    );
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.55));
  transition: opacity 160ms ease;
  pointer-events: none;
}

.assistant-compose.is-voice-active .assistant-compose-bar,
.assistant-compose:has(.assistant-voice-stage.is-voice-active) .assistant-compose-bar {
  display: none;
}

.assistant-compose-bar:has(.assistant-mic-button.is-voice-active)::before,
.assistant-compose-bar:has(.assistant-voice-chat-button.is-voice-active)::before {
  opacity: 1;
}

.assistant-compose-bar:has(.assistant-mic-button.is-thinking)::before,
.assistant-compose-bar:has(.assistant-voice-chat-button.is-thinking)::before {
  opacity: 0.42;
}

.assistant-compose-bar > * {
  position: relative;
  z-index: 1;
}

.assistant-compose-bar:focus-within {
  border-color: rgba(96, 165, 250, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(37, 99, 235, 0.14),
    0 14px 34px rgba(2, 6, 23, 0.24);
}

.assistant-compose textarea {
  width: 100%;
  min-width: 0;
  min-height: 24px;
  height: 24px;
  max-height: 24px;
  border: 0;
  border-radius: 0;
  padding: 1px 0 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.35;
  box-shadow: none;
  overflow: hidden;
}

.assistant-compose textarea:focus {
  outline: none;
}

.assistant-compose-icon {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  justify-self: center;
  background: transparent;
  color: #f8fafc;
  font-weight: 700;
}

.assistant-compose-icon:hover,
.assistant-compose-icon:focus-visible {
  outline: none;
  background: rgba(148, 163, 184, 0.16);
}

.assistant-attach-button {
  font-size: 1.55rem;
  font-weight: 400;
}

.assistant-mic-button {
  display: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  justify-self: center;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.08), transparent 32%),
    #343946;
  color: #e5e7eb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(2, 6, 23, 0.22);
  transition:
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.assistant-voice-chat-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  background: rgba(148, 163, 184, 0.24);
  color: #f8fafc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(2, 6, 23, 0.22);
}

.assistant-mic-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(2, 6, 23, 0.28));
}

.assistant-mic-button.is-voice-active,
.assistant-voice-chat-button.is-voice-active {
  width: 54px;
  min-width: 54px;
  height: 54px;
  min-height: 54px;
  border-color: rgba(147, 197, 253, 0.56);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.34) 0 12%, transparent 22%),
    radial-gradient(circle at 50% 54%, #60a5fa 0 20%, #2563eb 48%, #1d4ed8 74%, #1e3a8a 100%);
  color: #ffffff;
  box-shadow:
    0 0 0 5px rgba(59, 130, 246, 0.18),
    0 0 0 11px rgba(59, 130, 246, 0.08),
    0 0 32px rgba(59, 130, 246, 0.82),
    0 12px 28px rgba(37, 99, 235, 0.48);
  transform: translateY(-1px);
}

.assistant-mic-button.is-thinking,
.assistant-voice-chat-button.is-thinking,
.assistant-mic-button.is-requesting-permission,
.assistant-voice-chat-button.is-requesting-permission,
.assistant-mic-button.is-transcribing,
.assistant-voice-chat-button.is-transcribing {
  box-shadow:
    0 0 0 5px rgba(59, 130, 246, 0.12),
    0 0 24px rgba(59, 130, 246, 0.45),
    0 12px 28px rgba(37, 99, 235, 0.34);
}

.assistant-mic-button.is-speaking,
.assistant-voice-chat-button.is-speaking {
  box-shadow:
    0 0 0 6px rgba(96, 165, 250, 0.2),
    0 0 38px rgba(96, 165, 250, 0.9),
    0 12px 28px rgba(37, 99, 235, 0.5);
}

.assistant-mic-button.is-unavailable,
.assistant-voice-chat-button.is-unavailable,
.assistant-mic-button.is-error,
.assistant-voice-chat-button.is-error {
  border-color: rgba(148, 163, 184, 0.24);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.08), transparent 32%),
    #343946;
  color: #cbd5e1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(2, 6, 23, 0.22);
}

.assistant-mic-button.is-voice-active .assistant-mic-icon {
  width: 25px;
  height: 25px;
  stroke-width: 1.9;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.44))
    drop-shadow(0 0 16px rgba(96, 165, 250, 0.72));
}

.assistant-voice-chat-button.is-voice-active .assistant-mic-icon {
  width: 25px;
  height: 25px;
  stroke-width: 1.9;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.44))
    drop-shadow(0 0 16px rgba(96, 165, 250, 0.72));
}

.assistant-send-button {
  background: rgba(148, 163, 184, 0.22);
  color: #f8fafc;
}

.assistant-send-button::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 11px solid currentColor;
  transform: translateX(1px);
}

.assistant-voice-stage {
  position: relative;
  min-height: 86px;
  margin: 0 0 2px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(37, 99, 235, 0.16), transparent 22%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.68)),
    rgba(15, 23, 42, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 26px rgba(2, 6, 23, 0.2);
}

.assistant-voice-stage[hidden] {
  display: none;
}

.assistant-voice-wave {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 999px;
  opacity: 0.38;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      rgba(37, 99, 235, 0.18) 9px 11px,
      rgba(96, 165, 250, 0.52) 11px 12px,
      transparent 12px 17px
    );
  filter:
    blur(0.1px)
    drop-shadow(0 0 14px rgba(37, 99, 235, 0.62));
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.assistant-voice-stage.is-permission .assistant-voice-wave,
.assistant-voice-stage.is-listening .assistant-voice-wave,
.assistant-voice-stage.is-speaking .assistant-voice-wave {
  opacity: 0.82;
}

.assistant-voice-stage.is-thinking .assistant-voice-wave,
.assistant-voice-stage.is-requesting-permission .assistant-voice-wave,
.assistant-voice-stage.is-transcribing .assistant-voice-wave,
.assistant-voice-stage.is-unavailable .assistant-voice-wave {
  opacity: 0.46;
}

.assistant-voice-stage.is-error .assistant-voice-wave {
  opacity: 0.28;
  filter: drop-shadow(0 0 14px rgba(248, 113, 113, 0.42));
}

.assistant-voice-orb {
  position: relative;
  z-index: 1;
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  border: 1px solid rgba(147, 197, 253, 0.64);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.36) 0 12%, transparent 23%),
    radial-gradient(circle at 50% 56%, #60a5fa 0 21%, #2563eb 50%, #1d4ed8 76%, #1e3a8a 100%);
  color: #ffffff;
  box-shadow:
    0 0 0 5px rgba(59, 130, 246, 0.18),
    0 0 0 10px rgba(59, 130, 246, 0.08),
    0 0 34px rgba(59, 130, 246, 0.9),
    0 10px 24px rgba(37, 99, 235, 0.44);
}

.assistant-voice-orb .assistant-mic-icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.85;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 16px rgba(96, 165, 250, 0.78));
}

.assistant-voice-stage span {
  position: absolute;
  z-index: 1;
  bottom: 8px;
  left: 0;
  right: 0;
  color: color-mix(in srgb, #e5e7eb 82%, var(--muted));
  font-size: 0.68rem;
  font-weight: 760;
  text-align: center;
}

.assistant-attachment-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 8px;
}

.assistant-attachment-list[hidden] {
  display: none;
}

.assistant-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 999px;
  padding: 5px 7px 5px 10px;
  background: rgba(15, 23, 42, 0.7);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 760;
}

.assistant-attachment-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-attachment-chip small {
  color: var(--muted);
  font-weight: 700;
}

.assistant-attachment-chip button {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(148, 163, 184, 0.14);
  color: var(--text);
  line-height: 1;
}

.assistant-icon-button {
  min-width: 54px;
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
  background: rgba(15, 23, 42, 0.66);
}

.assistant-settings-button {
  width: 60px;
  min-width: 60px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(15, 23, 42, 0.62);
  color: color-mix(in srgb, #f8fafc 88%, var(--muted));
  font-size: 0.82rem;
  font-weight: 820;
}

.assistant-settings-button:hover,
.assistant-settings-button:focus-visible,
.assistant-settings-button[aria-expanded="true"] {
  outline: none;
  border-color: rgba(96, 165, 250, 0.54);
  background: rgba(37, 99, 235, 0.22);
  color: #ffffff;
}

.assistant-voice-settings-panel {
  margin: 12px 22px 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 10px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.72)),
    rgba(15, 23, 42, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(2, 6, 23, 0.2);
}

.assistant-voice-settings-panel[hidden] {
  display: none;
}

.assistant-voice-settings-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(120px, 0.7fr));
  gap: 10px;
  align-items: end;
}

.assistant-voice-settings-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.assistant-voice-settings-grid label > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.assistant-voice-settings-grid output {
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  font-weight: 820;
}

.assistant-voice-settings-grid select,
.assistant-voice-settings-grid input[type="range"] {
  width: 100%;
  min-width: 0;
}

.assistant-voice-settings-grid select {
  height: 36px;
}

.assistant-voice-settings-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.assistant-voice-settings-actions span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
}

.assistant-loading-state {
  min-width: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.assistant-compose-meta {
  min-height: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.assistant-compose-meta:has(.assistant-loading-state:empty) {
  display: none;
}

.assistant-compose-actions {
  justify-content: space-between;
}

.assistant-compose-actions .primary-button {
  margin-left: auto;
  min-width: 68px;
  border-radius: 999px;
}

.shortcut-assistant-popout {
  position: fixed;
  z-index: 30;
  top: 28px;
  right: calc(260px + 12px);
  display: block;
  width: min(1050px, calc(100vw - 340px));
  height: min(820px, calc(100vh - 56px));
  max-height: none;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  border-radius: 12px;
  background:
    radial-gradient(circle at 72% 24%, rgba(37, 99, 235, 0.16), transparent 34%),
    radial-gradient(circle at 16% 0%, rgba(14, 116, 144, 0.16), transparent 30%),
    #020617;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 24px 70px rgba(2, 6, 23, 0.48);
}

body:has(.shortcut-rail.collapsed) .shortcut-assistant-popout {
  right: 70px;
}

.assistant-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.assistant-thread-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 96px 14px 18px;
  border-right: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.68)),
    rgba(2, 6, 23, 0.92);
}

.assistant-new-chat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  gap: 9px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.26);
  text-align: center;
}

.assistant-new-chat-button span:first-child {
  font-size: 1.45rem;
  font-weight: 500;
}

.assistant-thread-group {
  display: grid;
  gap: 6px;
}

.assistant-thread-group strong {
  margin: 0 6px 8px;
  color: color-mix(in srgb, var(--muted) 86%, #fff);
  font-size: 0.82rem;
  font-weight: 800;
}

.assistant-thread-group .assistant-thread-row > button:first-child {
  display: grid;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 12px;
  background: transparent;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  text-align: left;
  font-weight: 650;
}

.assistant-thread-group .assistant-thread-row > button:first-child small,
.assistant-thread-group .assistant-thread-row > button:first-child em {
  display: none;
}

.assistant-thread-group .assistant-thread-row > button:first-child:hover,
.assistant-thread-group .assistant-thread-row.active > button:first-child {
  border-color: rgba(96, 165, 250, 0.18);
  background: rgba(37, 99, 235, 0.16);
  color: #f8fafc;
}

.assistant-chat-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.assistant-chat-main > .assistant-panel-header {
  grid-row: 1;
}

.assistant-chat-main > .assistant-voice-settings-panel {
  grid-row: 2;
}

.assistant-chat-main > .assistant-messages {
  grid-row: 3;
}

.assistant-chat-main > .assistant-compose {
  grid-row: 4;
}

.shortcut-assistant-popout .assistant-panel-header {
  min-height: 74px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.11), transparent 70%),
    rgba(2, 6, 23, 0.32);
}

.shortcut-assistant-popout .assistant-title-button {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 42px;
  cursor: default;
}

.shortcut-assistant-popout .assistant-title-button:hover,
.shortcut-assistant-popout .assistant-title-button:focus-visible {
  outline: none;
}

.shortcut-assistant-popout .assistant-orb {
  width: 42px;
  height: 42px;
}

.shortcut-assistant-popout .assistant-panel-header strong {
  font-size: 1.32rem;
  letter-spacing: 0;
}

.assistant-close-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-color: rgba(96, 165, 250, 0.16);
  background: rgba(15, 23, 42, 0.6);
}

.shortcut-assistant-popout .assistant-messages {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 28px 14px;
  scroll-padding-bottom: 24px;
}

.shortcut-assistant-popout .assistant-voice-settings-panel {
  margin: 12px 22px 4px;
}

.shortcut-assistant-popout .assistant-message {
  max-width: min(82%, 760px);
  padding: 18px 20px;
  border-radius: 16px;
  scroll-margin-bottom: 24px;
}

.shortcut-assistant-popout .assistant-message-user {
  max-width: min(68%, 520px);
  border-radius: 18px;
}

.shortcut-assistant-popout .assistant-confirmation-card,
.shortcut-assistant-popout .assistant-result-card {
  max-width: 760px;
  border-radius: 10px;
  padding: 14px;
}

.shortcut-assistant-popout .assistant-compose {
  position: relative;
  z-index: 1;
  margin: 0 24px 20px;
  padding: 0;
  border-radius: 0;
}

.shortcut-assistant-popout .assistant-compose textarea {
  min-height: 24px;
  height: 24px;
  max-height: 24px;
  padding: 1px 0 0;
  font-size: 0.96rem;
}

:root:not([data-theme="dark"]) .shortcut-assistant-popout {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
  background:
    radial-gradient(circle at 72% 24%, rgba(37, 99, 235, 0.12), transparent 34%),
    radial-gradient(circle at 16% 0%, rgba(14, 165, 233, 0.12), transparent 30%),
    #f8fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 70px rgba(15, 23, 42, 0.22);
}

:root:not([data-theme="dark"]) .assistant-thread-sidebar {
  border-right-color: color-mix(in srgb, var(--blue) 18%, var(--line));
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 250, 252, 0.92)),
    var(--panel);
}

:root:not([data-theme="dark"]) .assistant-chat-main {
  background:
    radial-gradient(circle at 74% 12%, rgba(37, 99, 235, 0.08), transparent 32%),
    linear-gradient(180deg, #f8fbff, #f3f7fd);
}

:root:not([data-theme="dark"]) .shortcut-assistant-popout .assistant-panel-header {
  border-bottom-color: color-mix(in srgb, var(--blue) 16%, var(--line));
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.1), transparent 70%),
    rgba(255, 255, 255, 0.88);
}

:root:not([data-theme="dark"]) .assistant-close-button {
  border-color: color-mix(in srgb, var(--blue) 20%, var(--line));
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
}

:root:not([data-theme="dark"]) .assistant-thread-group strong {
  color: #475467;
}

:root:not([data-theme="dark"]) .assistant-thread-group .assistant-thread-row > button:first-child:hover,
:root:not([data-theme="dark"]) .assistant-thread-group .assistant-thread-row.active > button:first-child {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
  background: rgba(37, 99, 235, 0.1);
  color: var(--text);
}

:root:not([data-theme="dark"]) .assistant-thread-menu-button:hover,
:root:not([data-theme="dark"]) .assistant-thread-menu-button:focus-visible,
:root:not([data-theme="dark"]) .assistant-thread-menu-button[aria-expanded="true"] {
  color: var(--blue);
}

:root:not([data-theme="dark"]) .assistant-thread-action-popover,
:root:not([data-theme="dark"]) .assistant-thread-confirm-popover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
    var(--panel);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
}

:root:not([data-theme="dark"]) .assistant-thread-action-popover button[data-assistant-conversation-action="delete"]:hover,
:root:not([data-theme="dark"]) .assistant-thread-action-popover button[data-assistant-conversation-action="delete"]:focus-visible {
  color: #991b1b;
}

:root:not([data-theme="dark"]) .assistant-messages {
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.04), transparent 20%),
    transparent;
}

:root:not([data-theme="dark"]) .assistant-message {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(15, 23, 42, 0.12);
}

:root:not([data-theme="dark"]) .assistant-message strong {
  color: var(--text);
}

:root:not([data-theme="dark"]) .assistant-message-user {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(14, 116, 144, 0.78)),
    var(--blue);
}

:root:not([data-theme="dark"]) .assistant-message-user strong,
:root:not([data-theme="dark"]) .assistant-message-user p {
  color: #ffffff;
}

:root:not([data-theme="dark"]) .assistant-result-card,
:root:not([data-theme="dark"]) .assistant-confirmation-card,
:root:not([data-theme="dark"]) .assistant-permission-card,
:root:not([data-theme="dark"]) .assistant-ticket-row,
:root:not([data-theme="dark"]) .assistant-report-metric,
:root:not([data-theme="dark"]) .assistant-summary-health-row span,
:root:not([data-theme="dark"]) .assistant-message-attachments span {
  background: rgba(255, 255, 255, 0.82);
}

:root:not([data-theme="dark"]) .assistant-badge {
  border-color: color-mix(in srgb, var(--blue) 16%, var(--line));
  background: #eef4ff;
  color: #344054;
}

:root:not([data-theme="dark"]) .assistant-badge-warning,
:root:not([data-theme="dark"]) .assistant-health-yellow {
  background: #fef3c7;
  color: #92400e;
}

:root:not([data-theme="dark"]) .assistant-badge-danger,
:root:not([data-theme="dark"]) .assistant-health-red {
  background: #fee2e2;
  color: #991b1b;
}

:root:not([data-theme="dark"]) .assistant-health-pill,
:root:not([data-theme="dark"]) .assistant-summary-health-row em {
  color: #047857;
}

:root:not([data-theme="dark"]) .assistant-view-more summary {
  color: var(--blue);
}

:root:not([data-theme="dark"]) .assistant-permission-card {
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.92)),
    var(--panel);
}

:root:not([data-theme="dark"]) .assistant-compose-bar {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 34px rgba(15, 23, 42, 0.14);
}

:root:not([data-theme="dark"]) .assistant-compose-icon {
  color: var(--text);
}

:root:not([data-theme="dark"]) .assistant-voice-chat-button,
:root:not([data-theme="dark"]) .assistant-send-button,
:root:not([data-theme="dark"]) .assistant-mic-button {
  background: #e9eef7;
  color: #344054;
}

:root:not([data-theme="dark"]) .assistant-send-button {
  background: var(--blue);
  color: #ffffff;
}

:root:not([data-theme="dark"]) .assistant-mic-button.is-voice-active,
:root:not([data-theme="dark"]) .assistant-voice-chat-button.is-voice-active {
  color: #ffffff;
}

:root:not([data-theme="dark"]) .assistant-voice-stage {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
  background:
    radial-gradient(circle at 50% 52%, rgba(37, 99, 235, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(239, 246, 255, 0.94), rgba(248, 250, 252, 0.9)),
    var(--panel);
}

:root:not([data-theme="dark"]) .assistant-voice-stage span {
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}

:root:not([data-theme="dark"]) .assistant-attachment-chip {
  background: rgba(255, 255, 255, 0.86);
}

:root:not([data-theme="dark"]) .assistant-icon-button {
  background: rgba(255, 255, 255, 0.82);
}

:root:not([data-theme="dark"]) .assistant-settings-button {
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
}

:root:not([data-theme="dark"]) .assistant-settings-button:hover,
:root:not([data-theme="dark"]) .assistant-settings-button:focus-visible,
:root:not([data-theme="dark"]) .assistant-settings-button[aria-expanded="true"] {
  background: #dbeafe;
  color: #1d4ed8;
}

:root:not([data-theme="dark"]) .assistant-voice-settings-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(15, 23, 42, 0.12);
}

@media (max-width: 720px) {
  .assistant-panel {
    width: 100%;
    max-height: none;
  }

  .shortcut-assistant-popout {
    inset: 12px;
    width: auto;
    height: auto;
  }

  .assistant-voice-settings-grid {
    grid-template-columns: 1fr;
  }

  .assistant-shell {
    grid-template-columns: 1fr;
  }

  .assistant-thread-sidebar {
    display: none;
  }

  .assistant-compose-actions {
    align-items: stretch;
  }

  .assistant-compose-actions .primary-button,
  .assistant-compose-actions .secondary-button {
    flex: 1 1 auto;
  }
}
/* Program and project delivery forecast */
.delivery-forecast-panel {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
}

.forecast-heading {
  align-items: flex-start;
  gap: 16px;
}

.forecast-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.forecast-status-on-track,
.forecast-status-complete {
  border-color: color-mix(in srgb, #22c55e 55%, var(--line));
  color: #22c55e;
}

.forecast-status-at-risk {
  border-color: color-mix(in srgb, #ef4444 55%, var(--line));
  color: #ef4444;
}

.delivery-forecast-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.delivery-forecast-summary > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 6px;
}

.delivery-forecast-summary span,
.delivery-forecast-summary strong {
  display: block;
}

.delivery-forecast-summary span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.delivery-forecast-summary strong {
  overflow-wrap: anywhere;
  font-size: 17px;
}

.delivery-forecast-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
  gap: 10px;
}

.delivery-burndown-chart,
.delivery-forecast-notes {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 6px;
}

.forecast-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.forecast-chart-header h4,
.delivery-forecast-notes h4 {
  margin: 0 0 3px;
}

.forecast-chart-header p,
.delivery-forecast-notes p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.forecast-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 11px;
}

.forecast-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.forecast-legend-swatch {
  width: 18px;
  height: 3px;
  background: #22d3ee;
}

.forecast-legend-swatch.ideal {
  background: #94a3b8;
}

.forecast-legend-swatch.projected {
  background: repeating-linear-gradient(90deg, #8b5cf6 0 6px, transparent 6px 9px);
}

.delivery-burndown-chart svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  overflow: visible;
}

.delivery-burndown-chart svg text {
  fill: var(--muted);
  font-size: 11px;
}

.forecast-grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.forecast-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.forecast-line.actual {
  stroke: #22d3ee;
}

.forecast-line.ideal {
  stroke: #94a3b8;
  stroke-width: 2;
  opacity: 0.7;
}

.forecast-line.projected {
  stroke: #8b5cf6;
  stroke-dasharray: 9 7;
}

.delivery-forecast-notes dl {
  margin: 10px 0;
}

.delivery-forecast-notes dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.delivery-forecast-notes dt {
  color: var(--muted);
}

.delivery-forecast-notes dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.delivery-forecast-table-wrap {
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.delivery-forecast-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}

.delivery-forecast-table th,
.delivery-forecast-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.delivery-forecast-table th {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.delivery-forecast-table tr:last-child td {
  border-bottom: 0;
}

.delivery-forecast-table td strong,
.delivery-forecast-table td small {
  display: block;
}

.delivery-forecast-table td small {
  margin-top: 2px;
  color: var(--muted);
}

@media (max-width: 1050px) {
  .delivery-forecast-summary {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .delivery-forecast-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .delivery-forecast-summary {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .forecast-chart-header {
    display: block;
  }

  .forecast-chart-legend {
    justify-content: flex-start;
    margin-top: 8px;
  }
}
.reporting-workbench-open > :not(.reporting-workbench-shell) { display: none !important; }
.reporting-workbench-shell { width: 100%; min-width: 0; }
.reporting-workbench-switch { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
.reporting-workbench-switch button[aria-pressed="true"] { border-color: var(--accent, #9473bd); }
.reporting-workbench-frame { width: 100%; height: calc(100dvh - 190px); min-height: 600px; border: 0; display: block; background: var(--panel); color-scheme: light; }
:root[data-theme="dark"] .reporting-workbench-frame { color-scheme: dark; }
.reporting-workbench-frame[hidden] { display: none; }

.product-controls-form { margin: 0; min-width: 0; }
.product-control-meta,
.product-integration-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.product-control-scope { color: var(--muted); font-size: 12px; font-weight: 500; }
.product-control-version { color: var(--muted); font-size: 12px; white-space: nowrap; }
.product-integration-heading strong { font-size: 14px; line-height: 1.4; }
.product-control-section { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: start; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.product-control-section-heading { display: flex; align-items: center; gap: 8px; padding-top: 4px; min-width: 0; color: var(--text); }
.product-control-section-heading h4 { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.product-control-section-heading .product-control-icon { color: var(--muted); }
.product-policy-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 24px; min-width: 0; }
.product-policy-fields > * { min-width: 0; }
.product-control-load-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.product-control-load-error p { flex: 1 1 240px; margin: 0; color: var(--red); }
.product-control-load-error button { display: inline-flex; align-items: center; gap: 6px; }
.product-control-field { display: grid; gap: 7px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.product-control-field > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; line-height: 1.4; }
.product-control-field :is(input, select, textarea) { width: 100%; min-width: 0; max-width: 100%; min-height: 36px; margin: 0; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background-color: var(--control); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; box-shadow: none; }
.product-control-field select { padding-right: 30px; }
.product-control-field textarea { min-height: 100px; resize: vertical; }
.product-controls-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.product-policy-toggle { display: flex; align-self: end; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text); cursor: pointer; }
.product-policy-toggle .product-policy-switch { appearance: none; position: relative; flex: 0 0 32px; width: 32px; height: 18px; min-height: 18px; margin: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--chip); cursor: pointer; box-shadow: none; transition: background 120ms; }
.product-policy-switch::before { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform 120ms; }
.product-policy-toggle .product-policy-switch:checked { background: var(--blue); border-color: var(--blue); }
.product-policy-switch:checked::before { background: #fff; transform: translateX(14px); }
.product-controls-form :disabled { cursor: not-allowed; opacity: 0.55; }
.product-policy-days { display: flex; flex-wrap: wrap; align-self: center; align-items: center; gap: 8px 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.product-policy-days legend { padding: 0; margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.product-policy-days label { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; text-transform: capitalize; cursor: pointer; }
.product-policy-days input,
.product-integration-clear input { width: 14px; height: 14px; min-height: 14px; padding: 0; margin: 0; accent-color: var(--blue); flex-shrink: 0; }
.product-control-footer { position: sticky; bottom: -1px; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 0 0; background: var(--panel); }
.product-control-status { display: flex; align-items: baseline; gap: 7px; flex: 1 1 140px; margin: 0; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.product-control-status::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.product-control-status[data-state="pending"] { color: var(--amber); }
.product-control-status[data-state="success"] { color: var(--accent); }
.product-control-status[data-state="error"] { color: var(--red); }
.product-policy-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.product-policy-actions :is(.primary-button, .secondary-button) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 600; border-radius: 6px; box-shadow: none; white-space: nowrap; }
.product-policy-actions .secondary-button.danger { color: var(--red); }
.product-controls-form .icon-button,
.product-integration-picker .icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 6px; color: var(--muted); }
.product-control-icon { display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; mask: var(--product-control-symbol) center / contain no-repeat; }
.product-control-icon[data-icon="profile"] { --product-control-symbol: url("./client/assets/icons/lucide/sliders-horizontal.svg"); }
.product-control-icon[data-icon="privacy"],
.product-control-icon[data-icon="security"] { --product-control-symbol: url("./client/assets/icons/lucide/shield-check.svg"); }
.product-control-icon[data-icon="sources"] { --product-control-symbol: url("./client/assets/icons/lucide/link.svg"); }
.product-control-icon[data-icon="files"] { --product-control-symbol: url("./client/assets/icons/lucide/files.svg"); }
.product-control-icon[data-icon="actions"],
.product-control-icon[data-icon="automation"] { --product-control-symbol: url("./client/assets/icons/lucide/workflow.svg"); }
.product-control-icon[data-icon="calendar"] { --product-control-symbol: url("./client/assets/icons/lucide/calendar-days.svg"); }
.product-control-icon[data-icon="limits"] { --product-control-symbol: url("./client/assets/icons/lucide/gauge.svg"); }
.product-control-icon[data-icon="clock"] { --product-control-symbol: url("./client/assets/icons/lucide/clock-3.svg"); }
.product-control-icon[data-icon="integrations"] { --product-control-symbol: url("./client/assets/icons/lucide/plug.svg"); }
.product-control-icon[data-icon="activity"] { --product-control-symbol: url("./client/assets/icons/lucide/activity.svg"); }
.product-control-icon[data-icon="refresh"] { --product-control-symbol: url("./client/assets/icons/lucide/refresh-cw.svg"); }
.product-control-icon[data-icon="rotate"] { --product-control-symbol: url("./client/assets/icons/lucide/rotate-cw.svg"); }
.product-control-icon[data-icon="settings"] { --product-control-symbol: url("./client/assets/icons/lucide/settings.svg"); }
.product-integration-picker { display: flex; align-items: end; gap: 10px; padding-bottom: 20px; }
.product-integration-picker > label { flex: 1; max-width: 420px; }
.product-integration-field { min-width: 0; }
.product-integration-clear { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--muted); cursor: pointer; }
.product-credential-status { font-size: 11px; font-weight: 500; color: var(--accent); }
@media (max-width: 760px) {
  .product-control-section { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 0; }
  .product-control-section-heading { padding: 0; }
}
@media (max-width: 540px) {
  .product-policy-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .product-control-footer { gap: 10px; }
  .product-policy-actions { justify-content: flex-end; }
  .product-integration-form .product-control-status { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .product-policy-switch,
  .product-policy-switch::before { transition: none; }
}