/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  color-scheme: dark;
  font-family: Inter, Segoe UI, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at top left, #131c3d 0%, #090d1f 50%, #060915 100%);
  color: #e5e7eb;
}

.workspaceAuthShell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 0;
  padding: 1rem;
}

.workspaceAuthContent {
  width: min(480px, 100%);
}

.workspaceShell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  transition: grid-template-columns 160ms ease-in-out;
}

.workspaceShellSidebarCollapsed {
  grid-template-columns: 92px minmax(0, 1fr);
}

.workspaceSidebar {
  border-right: 1px solid rgba(59, 130, 246, 0.18);
  background: linear-gradient(180deg, #0b1130 0%, #080d1f 55%, #060914 100%);
  display: flex;
  flex-direction: column;
  padding: 1rem 0.85rem;
  gap: 1rem;
  transition: padding 160ms ease-in-out;
}

.workspaceSidebarCollapsed {
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.workspaceSidebarHeader {
  display: flex;
  justify-content: flex-end;
}

.workspaceSidebarToggle {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
  font-size: 0.98rem;
  line-height: 1;
  min-width: 2rem;
  min-height: 1.9rem;
  cursor: pointer;
}

.workspaceSidebarToggle:hover {
  border-color: rgba(96, 165, 250, 0.7);
  background: rgba(30, 64, 175, 0.35);
}

.workspaceBrand {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: #ffffff;
  border-radius: 10px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workspaceBrandLogo {
  display: block;
  width: 100%;
  max-height: 56px;
  height: 56px;
  object-fit: contain;
}

.workspaceNav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.workspaceNavItem {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  color: #cbd5e1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  transition: all 120ms ease-in-out;
}
.workspaceNavItemShort {
  display: none;
  min-width: 1.5rem;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.workspaceNavItemLabel {
  display: inline;
}

.workspaceNavItem:hover {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(59, 130, 246, 0.15);
}

.workspaceNavItemActive {
  border-color: rgba(96, 165, 250, 0.65);
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.38), rgba(30, 64, 175, 0.18));
  color: #eff6ff;
}

.workspaceUserCard {
  margin-top: auto;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.75rem 0.55rem 0.4rem;
}

.workspaceUserName {
  margin: 0;
  font-weight: 700;
}

.workspaceUserRole {
  margin: 0.15rem 0 0;
  color: #9ca3af;
  font-size: 0.85rem;
}

.workspaceSignOutButton {
  margin-top: 0.5rem;
  width: 100%;
  border: 1px solid #4b5563;
  border-radius: 8px;
  background: transparent;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
}

.workspaceSignOutButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.workspaceSidebarCollapsed .workspaceBrand {
  padding: 0.2rem 0.25rem;
}

.workspaceSidebarCollapsed .workspaceBrandLogo {
  max-height: 44px;
  height: 44px;
}

.workspaceSidebarCollapsed .workspaceSidebarHeader {
  justify-content: center;
}

.workspaceSidebarCollapsed .workspaceNavItem {
  justify-content: center;
  padding: 0.55rem 0.35rem;
}

.workspaceSidebarCollapsed .workspaceNavItemShort {
  display: inline-flex;
}

.workspaceSidebarCollapsed .workspaceNavItemLabel,
.workspaceSidebarCollapsed .workspaceUserRole {
  display: none;
}

.workspaceSidebarCollapsed .workspaceUserCard {
  text-align: center;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.workspaceMain {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.workspaceMainHeader {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.75rem 1rem 0;
}

.workspaceAccountMenu {
  position: relative;
}

.workspaceAccountButton {
  border: 1px solid #334155;
  border-radius: 999px;
  background: #0f172a;
  color: #e2e8f0;
  width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.workspaceAccountButton:hover {
  border-color: rgba(96, 165, 250, 0.75);
}

.workspaceAccountAvatar {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: #2563eb;
  color: #eff6ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workspaceAccountPopover {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 172px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0b1225;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.45);
  padding: 0.38rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  z-index: 30;
}

.workspaceAccountAction {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.48rem 0.6rem;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}

.workspaceAccountAction:hover {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(30, 64, 175, 0.22);
}

.workspaceAccountAction:focus-visible {
  outline: none;
  border-color: rgba(147, 197, 253, 0.95);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.65);
}

.workspaceAccountAction:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.workspaceTopbar {
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  padding: 0.7rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 16, 40, 0.75);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.workspaceTopbarSection {
  margin: 0;
  color: #e2e8f0;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}

.workspaceChip {
  display: inline-block;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.8rem;
  color: #dbeafe;
}

.workspaceContent {
  padding: 0.95rem 1rem 1.2rem;
}

.cockpit {
  max-width: none;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.loginPage {
  min-height: calc(100vh - 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loginCard {
  width: min(380px, 100%);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  padding: 1.35rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  transform: scale(1.4);
  transform-origin: center;
}

.loginLogo {
  width: min(260px, 100%);
  height: auto;
  object-fit: contain;
}

.loginCard h1 {
  margin: 0;
  font-size: 1.34rem;
  color: #111827;
}

.loginLockBadge {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  color: #ffffff;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.loginCopy {
  margin: 0 0 0.25rem;
  color: #6b7280;
  font-size: 0.82rem;
  text-align: center;
}

.loginSsoActions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.loginSsoButton {
  width: 100%;
  border: 1px solid #d9dee3;
  border-radius: 7px;
  background: #ffffff;
  color: #111827;
  min-height: 2.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.7rem;
  cursor: pointer;
}
.loginSsoButton:hover {
  border-color: #c6cdd4;
  background: #f8fafc;
}

.loginSsoButton:focus-visible {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.loginSsoButton:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loginMicrosoftButton {
  background: #f8fafc;
}
.loginGoogleButton {
  background: #ffffff;
}
.loginSsoIcon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}

.loginDivider {
  width: 100%;
  margin: 0.15rem 0 0;
  border-top: 1px solid #e5e7eb;
  text-align: center;
  position: relative;
}

.loginDivider span {
  display: inline-block;
  position: relative;
  top: -0.55rem;
  background: #ffffff;
  padding: 0 0.35rem;
  color: #9ca3af;
  font-size: 0.63rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.loginForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.loginEmailInput {
  width: 100%;
  border: 1px solid #d4d9df;
  border-radius: 7px;
  background: #ffffff;
  color: #111827;
  min-height: 2rem;
  padding: 0.42rem 0.55rem;
  font-size: 0.78rem;
}

.loginEmailButton {
  width: 100%;
  border: 1px solid #e1e5ea;
  border-radius: 7px;
  background: #f7f7f8;
  color: #111827;
  min-height: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.loginEmailButton:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.loginFootnote {
  margin: 0.12rem 0 0;
  color: #9ca3af;
  font-size: 0.64rem;
  text-align: center;
}

.loginCard .errorText {
  margin: 0;
  color: #b91c1c;
  font-size: 0.78rem;
}

.workspacePlaceholder {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - 120px);
}

.workspacePlaceholderCard {
  width: min(760px, 100%);
  margin-top: 1rem;
}

.workspacePlaceholderCard h1 {
  margin: 0 0 0.45rem;
}

.workspacePlaceholderCard p {
  margin: 0;
  color: #94a3b8;
}

.settingsPage {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.settingsHeaderCard {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.settingsPageTitle {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
}

.settingsPageSubtitle {
  margin: 0;
  color: #94a3b8;
}

.settingsGrid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  grid-gap: 0.8rem;
  gap: 0.8rem;
}

.settingsCard {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.settingsCard h2 {
  margin: 0;
  font-size: 1.05rem;
}

.settingsCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.7rem;
}

.settingsActionRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.settingsProtocolList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 56vh;
  overflow: auto;
}

.settingsProtocolList li {
  border: 1px solid #334155;
  border-radius: 9px;
  background: #0f172a;
  padding: 0.52rem 0.6rem;
}

.settingsProtocolItem {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
}

.settingsProtocolItem input {
  margin-top: 0.2rem;
}

.settingsProtocolItem > span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.settingsStatusText {
  margin: 0;
  color: #86efac;
}

.settingsFooterCard {
  display: flex;
  justify-content: flex-end;
}

.topBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.topBar h1 {
  margin: 0 0 0.25rem;
}

.topBar p {
  margin: 0;
  color: #9ca3af;
}
.signalsPageHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.signalsPageHeader h1 {
  margin: 0;
  font-size: 1.45rem;
}

.statusPill {
  border: 1px solid #374151;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  background: #0f172a;
  color: #cbd5e1;
  font-size: 0.85rem;
  white-space: nowrap;
}

.cardSurface {
  border: 1px solid #1f2937;
  border-radius: 12px;
  background: #111827;
  padding: 0.9rem;
}

.filterBar {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  grid-gap: 0.7rem;
  gap: 0.7rem;
  align-items: end;
}

.field label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: #9ca3af;
}

.field input,
.field select {
  width: 100%;
  border: 1px solid #374151;
  border-radius: 8px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 0.45rem 0.55rem;
}

.filterActions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filterSummary {
  grid-column: 1 / -1;
  margin: 0;
  color: #94a3b8;
  font-size: 0.85rem;
}

.signalsFilterShell {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.signalsFilterToolbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.signalsFilterToggle {
  gap: 0.4rem;
}

.signalsFilterIcon {
  width: 0.92rem;
  height: 0.92rem;
  flex-shrink: 0;
}

.signalsFilterSummary {
  margin: 0 0 0 auto;
  color: #94a3b8;
  font-size: 0.84rem;
}

.signalsFilterDrawer {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid #1f2937;
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  grid-gap: 0.65rem;
  gap: 0.65rem;
  align-items: end;
}

.signalsFilterDrawer .filterActions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.investigationFilterSignalField {
  grid-column: span 2;
}

.cockpitGrid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 380px;
  grid-gap: 1rem;
  gap: 1rem;
  align-items: start;
}

.panelHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.panelHeader h2 {
  margin: 0;
  font-size: 1.05rem;
}

.panelHeader span {
  color: #9ca3af;
  font-size: 0.85rem;
}

.queueScroll {
  max-height: 72vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.queueItem {
  width: 100%;
  text-align: left;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 0.65rem;
  cursor: pointer;
}

.queueItemSelected {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb inset;
}

.queueItemTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.severityBadge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 600;
}

.severityCritical {
  background: #7f1d1d;
}

.severityHigh {
  background: #9a3412;
}

.severityMedium {
  background: #92400e;
}

.severityLow {
  background: #166534;
}

.queueState {
  font-size: 0.78rem;
  color: #93c5fd;
}

.queueTitle {
  margin: 0.45rem 0 0.35rem;
  font-weight: 600;
}

.queueMeta {
  margin: 0.2rem 0;
  color: #94a3b8;
  font-size: 0.82rem;
}

.detailTitle {
  margin: 0 0 0.35rem;
}

.detailMeta {
  margin: 0 0 0.8rem;
  color: #94a3b8;
  font-size: 0.88rem;
}

.detailGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.7rem;
  gap: 0.7rem;
}

.detailSection {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.7rem;
}

.detailSection h4 {
  margin: 0 0 0.45rem;
}

.detailSection p {
  margin: 0.2rem 0;
}

.detailSectionWide {
  grid-column: 1 / -1;
}

.actionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.fullWidth {
  grid-column: 1 / -1;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4b5563;
  border-radius: 8px;
  background: #1f2937;
  color: #e5e7eb;
  padding: 0.5rem 0.8rem;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button.primary {
  border-color: #2563eb;
  background: #1d4ed8;
}

.buttonDisabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.actionGrid .button,
.investigationActionGrid .button {
  min-height: 2.25rem;
}

.compliancePulseBar {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 0.95fr) minmax(300px, 1.35fr);
  grid-gap: 0.8rem;
  gap: 0.8rem;
  align-items: start;
}

.compliancePulsePrimary {
  min-width: 0;
}

.compliancePulseLabel {
  margin: 0;
  color: #93c5fd;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.compliancePulseTitle {
  margin: 0.25rem 0 0.25rem;
  font-size: 1.08rem;
}

.compliancePulseMeta {
  margin: 0.2rem 0;
  color: #cbd5e1;
  font-size: 0.86rem;
}
.compliancePulseMetricLink {
  color: #bfdbfe;
  text-decoration: none;
  border-bottom: 1px dotted rgba(147, 197, 253, 0.75);
  font-weight: 600;
}

.compliancePulseMetricLink:hover {
  color: #eff6ff;
  border-bottom-color: rgba(191, 219, 254, 0.95);
}

.compliancePulseActionPanel {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.compliancePulseSparkWrap {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.compliancePulseSpark {
  width: 132px;
  height: 34px;
}

.compliancePulseSpark polyline {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.compliancePulseActionsLabel {
  margin: 0;
  color: #cbd5e1;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.compliancePulseActionList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.compliancePulseActionItem {
  border: 1px solid #334155;
  border-radius: 9px;
  background: #0f172a;
  padding: 0.4rem 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.compliancePulseActionText {
  margin: 0;
  color: #e2e8f0;
  font-size: 0.8rem;
}

.compliancePulseActionLinks {
  display: flex;
  gap: 0.45rem;
}

.compliancePulseActionLinks a {
  color: #93c5fd;
  font-size: 0.76rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.compliancePulseActionLinks a:hover {
  color: #eff6ff;
  border-bottom-color: rgba(191, 219, 254, 0.9);
}

.inlineCard {
  margin-top: 0.65rem;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.65rem;
}

.inlineCard p {
  margin: 0.2rem 0;
}

.railSection {
  margin-top: 0.8rem;
}

.railSection h3 {
  margin: 0 0 0.45rem;
  font-size: 0.96rem;
}

.timelineList,
.correlatedList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timelineList li,
.correlatedList li {
  border: 1px solid #334155;
  border-radius: 9px;
  background: #0f172a;
  padding: 0.6rem;
}

.timelineHeader {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: #cbd5e1;
}

.timelineList p,
.correlatedList p {
  margin: 0.22rem 0;
}

.mutedText {
  color: #94a3b8;
  font-size: 0.82rem;
}

.errorText {
  color: #fca5a5;
}

.emptyState {
  color: #94a3b8;
}

.compliancePage {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.complianceHeaderCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.complianceHeaderTitle {
  margin: 0 0 0.25rem;
  font-size: 1.8rem;
}

.complianceHeaderMeta {
  margin: 0;
  color: #94a3b8;
}

.complianceHeaderActions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.complianceRiskBanner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-color: transparent;
}

.complianceRisk-high {
  background: rgba(127, 29, 29, 0.45);
  border-color: rgba(252, 165, 165, 0.45);
}

.complianceRisk-medium {
  background: rgba(146, 64, 14, 0.44);
  border-color: rgba(251, 191, 36, 0.45);
}

.complianceRisk-low {
  background: rgba(22, 101, 52, 0.32);
  border-color: rgba(74, 222, 128, 0.35);
}

.complianceRisk-muted {
  background: #0f172a;
  border-color: #334155;
}

.complianceFilterBar {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  grid-gap: 0.7rem;
  gap: 0.7rem;
  align-items: end;
}

.complianceSignalSelector {
  grid-column: span 2;
}

.complianceGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  grid-gap: 0.9rem;
  gap: 0.9rem;
  align-items: start;
}

.complianceTimelinePanel {
  min-height: 520px;
}

.complianceProtocolList {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.complianceProtocolCard {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.75rem;
}

.complianceProtocolHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.45rem;
}

.complianceProtocolHeader h3 {
  margin: 0;
  font-size: 1rem;
}

.complianceProtocolTiming {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #f8fafc;
}

.complianceProtocolPill {
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: 999px;
  padding: 0.18rem 0.62rem;
  background: rgba(251, 191, 36, 0.2);
  color: #fde68a;
}

.complianceProtocolPillOverdue {
  border-color: rgba(248, 113, 113, 0.65);
  background: rgba(185, 28, 28, 0.35);
  color: #fecaca;
}

.complianceRail {
  position: relative;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d9488 0%, #84cc16 45%, #f59e0b 70%, #dc2626 100%);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.complianceRailProgress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(8, 11, 26, 0.6);
  border-right: 2px solid rgba(226, 232, 240, 0.95);
}

.complianceObligationList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.complianceObligationList li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 0.38rem;
}

.complianceObligationList li.complianceObligationEmpty {
  border-top-style: dashed;
}

.complianceRailColumn {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.complianceSideCard h3 {
  margin: 0 0 0.55rem;
}

.requiredActionsList,
.complianceResourcesList,
.complianceAuditList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.requiredActionsList li,
.complianceResourcesList li,
.complianceAuditList li {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.58rem;
}

.requiredActionsList li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.requiredActionTitle,
.complianceAuditTitle {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.complianceResourcesList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.complianceOverviewPage {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.complianceOverviewHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.complianceOverviewTitle {
  margin: 0 0 0.25rem;
  font-size: 1.7rem;
}

.complianceOverviewMeta {
  margin: 0;
  color: #94a3b8;
}

.complianceOverviewToolbar {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.complianceOverviewTenantField {
  min-width: 220px;
}

.complianceOverviewKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0.7rem;
  gap: 0.7rem;
}

.complianceOverviewKpiCard {
  border-color: #334155;
  background: #0f172a;
}

.complianceOverviewKpiCardRed {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.35);
}

.complianceOverviewKpiCardYellow {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(146, 64, 14, 0.35);
}

.complianceOverviewKpiCardGreen {
  border-color: rgba(74, 222, 128, 0.48);
  background: rgba(22, 101, 52, 0.3);
}

.complianceOverviewKpiLabel {
  margin: 0;
  color: #cbd5e1;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.complianceOverviewKpiValue {
  margin: 0.4rem 0 0;
  font-size: 1.45rem;
  font-weight: 700;
}

.complianceOverviewFrameworkGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.8rem;
  gap: 0.8rem;
}

.complianceOverviewFrameworkCard {
  border-color: #334155;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.complianceOverviewFrameworkHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.7rem;
}

.complianceOverviewFrameworkHeader h2 {
  margin: 0;
  font-size: 1.05rem;
}

.complianceOverviewFrameworkCounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 0.55rem;
  gap: 0.55rem;
}

.complianceCountPill {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  padding: 0.42rem 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
}

.complianceCountPill strong {
  font-size: 1rem;
}

.complianceCountPillRed {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
}

.complianceCountPillYellow {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(146, 64, 14, 0.35);
  color: #fde68a;
}

.complianceCountPillGreen {
  border-color: rgba(74, 222, 128, 0.48);
  background: rgba(22, 101, 52, 0.3);
  color: #bbf7d0;
}

.complianceOverviewPriorityLabel {
  margin: 0 0 0.4rem;
  color: #cbd5e1;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.complianceOverviewPriorityList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.complianceOverviewPriorityList li {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #111827;
  padding: 0.56rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.complianceOverviewPriorityTitle {
  margin: 0 0 0.2rem;
  font-weight: 600;
}

.complianceOverviewPriorityActions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 88px;
}

.playbooksLandingPage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - 120px);
}

.playbooksLandingCard {
  width: min(780px, 100%);
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.playbooksLandingTitle {
  margin: 0 0 0.35rem;
}

.playbooksLandingCopy {
  margin: 0;
  color: #94a3b8;
}

.playbooksCreateButton {
  gap: 0.45rem;
  min-height: 2.35rem;
  white-space: nowrap;
}

.playbooksCreateIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-weight: 700;
}

.playbookBuilderPage {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.playbookBuilderHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.playbookBuilderHeaderPrimary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.playbookNameInput {
  min-width: 360px;
  max-width: 600px;
  border: 1px solid #374151;
  border-radius: 10px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 0.5rem 0.62rem;
  font-size: 1.42rem;
  font-weight: 600;
}

.playbookBuilderBadge {
  border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  background: rgba(15, 118, 110, 0.27);
  color: #bbf7d0;
  font-size: 0.82rem;
}

.playbookBuilderTag {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.58rem;
  color: #cbd5e1;
  font-size: 0.82rem;
}

.playbookBuilderHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.playbookBuilderGrid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 360px;
  grid-gap: 0.85rem;
  gap: 0.85rem;
  align-items: start;
}

.playbookBuilderLeftColumn,
.playbookBuilderRightColumn,
.playbookCanvasColumn {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.playbookTriggerCard h2,
.playbookPaletteCard h2,
.playbookSettingsCard h2,
.playbookSettingsCard h3 {
  margin: 0 0 0.45rem;
}

.playbookSignalTitle {
  margin: 0 0 0.38rem;
  font-weight: 600;
}

.playbookPaletteHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.playbookPaletteHeader span {
  color: #94a3b8;
  font-size: 0.82rem;
}

.playbookPaletteList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.playbookPaletteItem {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.55rem;
  cursor: -webkit-grab;
  cursor: grab;
}

.playbookPaletteItem:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.playbookPaletteItem p {
  margin: 0;
  font-weight: 600;
}

.playbookPaletteItem span {
  display: block;
  margin-top: 0.22rem;
  color: #94a3b8;
  font-size: 0.8rem;
}

.playbookLane {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-color: #334155;
  background: #0f172a;
}

.playbookLaneDisabled {
  opacity: 0.8;
}

.playbookLaneHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.7rem;
}

.playbookLaneHeader h3 {
  margin: 0;
}

.playbookLaneHeader span {
  color: #94a3b8;
  font-size: 0.82rem;
}

.playbookLaneNodes {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.playbookDropZone {
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 9px;
  min-height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.78rem;
  background: rgba(15, 23, 42, 0.45);
}

.playbookDropZoneDisabled {
  border-color: rgba(71, 85, 105, 0.45);
  color: #64748b;
}

.playbookNodeCard {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #111827;
  padding: 0.55rem;
  cursor: -webkit-grab;
  cursor: grab;
}

.playbookNodeCard:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.playbookNodeCardDisabled {
  cursor: default;
}

.playbookNodeCardSelected {
  border-color: rgba(96, 165, 250, 0.85);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.75) inset;
}

.playbookNodeHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}

.playbookNodeHeader p {
  margin: 0;
  font-weight: 600;
}

.playbookNodeHeader span {
  color: #cbd5e1;
  font-size: 0.76rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
}

.playbookNodeToneDetected {
  background: rgba(30, 64, 175, 0.26);
}

.playbookNodeToneValidate {
  background: rgba(14, 116, 144, 0.24);
}

.playbookNodeToneBehavior {
  background: rgba(76, 29, 149, 0.24);
}

.playbookNodeToneDecision {
  background: rgba(67, 56, 202, 0.22);
}

.playbookNodeToneCorrelate {
  background: rgba(5, 150, 105, 0.2);
}

.playbookNodeToneContain {
  background: rgba(146, 64, 14, 0.25);
}

.playbookNodeToneNotify {
  background: rgba(22, 101, 52, 0.23);
}

.playbookBranchGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.8rem;
  gap: 0.8rem;
}

.playbookSuggestButton {
  width: 100%;
  margin-top: 0.4rem;
}

.playbookSettingsCard textarea {
  width: 100%;
  border: 1px solid #374151;
  border-radius: 8px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 0.45rem 0.55rem;
  min-height: 88px;
  resize: vertical;
}

.playbookActionSteps {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: #e2e8f0;
}

.playbookBuilderFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.playbookFooterTitle {
  margin: 0 0 0.2rem;
  font-weight: 600;
}

.playbookFooterActions {
  display: flex;
  gap: 0.55rem;
}
.investigationPage {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.investigationHeaderCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.investigationHeaderTitle {
  margin: 0 0 0.25rem;
  font-size: 1.65rem;
}

.investigationHeaderMeta {
  margin: 0;
  color: #94a3b8;
}

.investigationHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.investigationFilterBar {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  grid-gap: 0.7rem;
  gap: 0.7rem;
  align-items: end;
}

.investigationSignalField {
  grid-column: span 2;
}

.investigationKpiRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0.7rem;
  gap: 0.7rem;
}

.investigationKpiCard {
  min-height: 104px;
}

.investigationKpiLabel {
  margin: 0;
  color: #94a3b8;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.investigationKpiValue {
  margin: 0.5rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.investigationGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-gap: 0.9rem;
  gap: 0.9rem;
  align-items: start;
}

.investigationMainColumn,
.investigationRailColumn {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.investigationSection p {
  margin: 0.3rem 0;
}

.investigationOverviewGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.65rem;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.investigationOverviewBlock {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.65rem;
}

.investigationActionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.investigationToolsLabel {
  margin: 0.75rem 0 0.45rem;
  color: #94a3b8;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.investigationStatusChips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.6rem 0;
}

.investigationStatusChip {
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font-size: 0.76rem;
  color: #e2e8f0;
}

.investigationStatusChip-pending {
  background: rgba(37, 99, 235, 0.2);
}

.investigationStatusChip-in_progress {
  background: rgba(67, 56, 202, 0.24);
}

.investigationStatusChip-overdue {
  background: rgba(185, 28, 28, 0.34);
  border-color: rgba(252, 165, 165, 0.5);
}

.investigationStatusChip-completed {
  background: rgba(22, 101, 52, 0.28);
}

.connectionsPage {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.connectionsHeaderCard {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.connectionsHeaderTitle {
  margin: 0 0 0.25rem;
  font-size: 1.8rem;
}

.connectionsHeaderMeta {
  margin: 0;
  color: #94a3b8;
}

.connectionsHeaderActions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.connectionsOperationalPill {
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
}

.connectionsOperationalPillHealthy {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(22, 101, 52, 0.32);
  color: #bbf7d0;
}

.connectionsOperationalPillDegraded {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(146, 64, 14, 0.35);
  color: #fde68a;
}

.connectionsKpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0.7rem;
  gap: 0.7rem;
}

.connectionsKpiCard {
  border-color: #334155;
  background: #0f172a;
}

.connectionsKpiLabel {
  margin: 0;
  color: #94a3b8;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.connectionsKpiValue {
  margin: 0.4rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.connectionsKpiValueSuffix {
  color: #cbd5e1;
  font-size: 1rem;
  font-weight: 500;
}

.connectionsKpiMeta {
  margin: 0.18rem 0 0;
  color: #cbd5e1;
  font-size: 0.82rem;
}

.connectionsGrid {
  display: grid;
  grid-template-columns: 315px minmax(0, 1fr) 360px;
  grid-gap: 0.9rem;
  gap: 0.9rem;
  align-items: start;
}

.connectionsSourcePanel,
.connectionsRightColumn,
.connectionsCenterColumn {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.connectionsCategoryTabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.connectionsCategoryTab {
  border: 1px solid #334155;
  border-radius: 999px;
  background: #0f172a;
  color: #cbd5e1;
  padding: 0.28rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.connectionsCategoryTabActive {
  border-color: rgba(96, 165, 250, 0.75);
  background: rgba(30, 64, 175, 0.34);
  color: #eff6ff;
}

.connectionsCategoryCount {
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.78);
  padding: 0.02rem 0.38rem;
  font-size: 0.72rem;
}

.connectionsSourceGroups {
  max-height: 68vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.connectionsSourceGroup h3 {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.connectionsSourceList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.connectionsSourceItem {
  width: 100%;
  text-align: left;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 0.55rem;
  cursor: pointer;
}

.connectionsSourceItemSelected {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb inset;
}

.connectionsSourcePrimary {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: center;
}

.connectionsSourceName {
  margin: 0;
  font-weight: 600;
}

.connectionsSourceStatus {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.76rem;
  text-transform: capitalize;
}

.connectionsStatusDot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
}

.connectionsStatusGood {
  color: #4ade80;
}

.connectionsStatusWarning {
  color: #f59e0b;
}

.connectionsStatusCritical {
  color: #f87171;
}

.connectionsSourceMeta {
  margin: 0.2rem 0 0;
  color: #94a3b8;
  font-size: 0.8rem;
}

.connectionsHealthFlow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0.55rem;
  gap: 0.55rem;
}

.connectionsHealthNode {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.55rem;
  text-align: center;
}

.connectionsHealthNodeLabel {
  margin: 0;
  color: #94a3b8;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.connectionsHealthNodeValue {
  margin: 0.3rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.connectionsHealthMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0.55rem;
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.connectionsMetricCell {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.52rem;
}

.connectionsMetricLabel {
  margin: 0;
  color: #94a3b8;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.connectionsMetricValue {
  margin: 0.28rem 0 0;
  font-size: 0.95rem;
  color: #f8fafc;
}

.connectionsTrendPanel {
  margin-top: 0.65rem;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.6rem;
}

.connectionsTrendChart {
  height: 140px;
}

.connectionsTrendChart svg {
  width: 100%;
  height: 100%;
}

.connectionsTrendChart polyline {
  fill: none;
  stroke: #34d399;
  stroke-width: 2.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.connectionsTrendSummary {
  margin-top: 0.55rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.connectionsEventsPanel {
  min-height: 220px;
}

.connectionsEventList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.connectionsEventItem {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  padding: 0.58rem;
}

.connectionsEventHeader {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  color: #cbd5e1;
  font-size: 0.84rem;
}

.connectionsEventItem p {
  margin: 0.25rem 0;
}

.connectionsEventSeverity {
  display: inline-flex;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 999px;
  font-size: 0.72rem;
  padding: 0.06rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.connectionsEventSeverityInfo {
  background: rgba(30, 64, 175, 0.3);
  border-color: rgba(96, 165, 250, 0.55);
  color: #bfdbfe;
}

.connectionsEventSeverityWarning {
  background: rgba(146, 64, 14, 0.4);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde68a;
}

.connectionsEventSeverityCritical {
  background: rgba(127, 29, 29, 0.44);
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
}

.connectionsAddList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
}

.connectionsAddList li .button {
  width: 100%;
}

.connectionsConfigTitle {
  margin: 0.2rem 0 0.1rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.connectionsConfigRows {
  margin-top: 0.45rem;
}

.connectionsConfigRow {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  padding: 0.45rem 0;
  font-size: 0.83rem;
}

.connectionsConfigRow span:last-child {
  text-align: right;
  word-break: break-word;
  color: #e2e8f0;
}

.connectionsPassiveCard {
  margin-top: 0.6rem;
  border: 1px solid rgba(74, 222, 128, 0.36);
  border-radius: 10px;
  background: rgba(15, 118, 110, 0.17);
  padding: 0.62rem;
}

.connectionsPassiveTitle {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.connectionsActionRow {
  margin-top: 0.65rem;
  display: flex;
  gap: 0.55rem;
}

.connectionsActionRow .button {
  flex: 1 1;
}

.runbookTriageButtonActive {
  border-color: #4169e1;
  background: #4169e1;
  color: #f8fafc;
}

.runbookTriageButtonLocked {
  border-color: #6b7280;
  background: #6b7280;
  color: #e5e7eb;
}

.runbookModalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 70;
}

.runbookModalCard {
  width: min(460px, 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  background: #0f172a;
  padding: 0.85rem;
}

.runbookModalCard h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.runbookModalCard p {
  margin: 0 0 0.7rem;
  color: #cbd5e1;
}

.runbookNameModalCard .field {
  margin-bottom: 0.8rem;
}

.runbookNameModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.runbooksLandingPage {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(960px, 100%);
  margin: 0.35rem auto 0;
}

.runbooksLandingHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
}

.runbooksLandingTitle {
  margin: 0 0 0.28rem;
  font-size: 1.5rem;
}

.runbooksLandingCopy {
  margin: 0;
  color: #94a3b8;
}

.runbooksLandingGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.7rem;
  gap: 0.7rem;
}

.runbooksLandingCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.62rem;
  min-height: 132px;
  border-color: rgba(59, 130, 246, 0.24);
  background: linear-gradient(180deg, rgba(17, 24, 39, 1) 0%, rgba(12, 18, 34, 0.95) 100%);
}

.runbooksLandingCard h2 {
  margin: 0;
  font-size: 1.18rem;
}

.runbooksLandingCard p {
  margin: 0;
  color: #cbd5e1;
  line-height: 1.35;
}

.runbooksCreateButton {
  align-self: center;
}

.runbooksOpenButton {
  margin-top: auto;
  min-height: 2.2rem;
  padding: 0.48rem 0.95rem;
  border-color: rgba(59, 130, 246, 0.34);
  background: rgba(30, 41, 59, 0.9);
  font-weight: 600;
}

.runbooksOpenButton:hover {
  border-color: rgba(96, 165, 250, 0.75);
  background: rgba(30, 58, 138, 0.65);
  color: #f8fafc;
}

.runbookBuilderPage {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.runbookBuilderHeader {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
}

.runbookBuilderHeaderPrimary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.runbookBuilderHeaderActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.runbookBuilderGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-gap: 0.8rem;
  gap: 0.8rem;
}

.runbookTaskListCard {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.runbookTaskToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.runbookTaskList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
  max-height: 62vh;
  overflow: auto;
}

.runbookTaskItem {
  width: 100%;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 10px;
  background: #0f172a;
  color: inherit;
  text-align: left;
  padding: 0.62rem;
  display: flex;
  flex-direction: column;
  gap: 0.36rem;
}

.runbookTaskItem:hover {
  border-color: rgba(96, 165, 250, 0.5);
}

.runbookTaskItemSelected {
  border-color: rgba(96, 165, 250, 0.9);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35) inset;
}

.runbookTaskItemTop {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}

.runbookTaskItemTitle {
  margin: 0;
  font-weight: 600;
}

.runbookTaskItemMeta {
  margin: 0;
  color: #94a3b8;
  font-size: 0.8rem;
}

.runbookActionBadge {
  font-size: 0.68rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.runbookActionBadgeSystem {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(96, 165, 250, 0.55);
  color: #dbeafe;
}

.runbookActionBadgeCompliance {
  background: rgba(22, 163, 74, 0.23);
  border-color: rgba(74, 222, 128, 0.48);
  color: #dcfce7;
}

.runbookRequiredBadge,
.runbookOptionalBadge {
  font-size: 0.68rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
}

.runbookRequiredBadge {
  background: rgba(14, 116, 144, 0.3);
  color: #cffafe;
}

.runbookOptionalBadge {
  background: rgba(71, 85, 105, 0.45);
  color: #e2e8f0;
}

.runbookTaskDetailsColumn {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.runbookTaskDetailsCard {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.runbookTaskDetailsCard h2,
.runbookTaskDetailsCard h3 {
  margin: 0;
}

.runbookTaskDetailActions {
  display: flex;
  gap: 0.5rem;
}

.runbookCoverageList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
}

.runbookCoverageList li {
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.62);
  padding: 0.46rem 0.58rem;
}

.runbookCoverageFramework {
  margin: 0 0 0.22rem;
  font-size: 0.83rem;
  font-weight: 600;
}

.runbookSystemFlowList {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.runbookSystemFlowList li p {
  margin: 0;
  font-weight: 600;
}

.runbookSystemFlowList li span {
  color: #94a3b8;
  font-size: 0.8rem;
}

@media (max-width: 1280px) {
  .workspaceShell {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .cockpitGrid {
    grid-template-columns: 1fr;
  }

  .queueScroll {
    max-height: none;
  }

  .complianceGrid {
    grid-template-columns: 1fr;
  }

  .compliancePulseBar {
    grid-template-columns: 1fr;
  }

  .compliancePulseSparkWrap {
    justify-content: flex-start;
  }

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

  .investigationGrid {
    grid-template-columns: 1fr;
  }

  .connectionsGrid {
    grid-template-columns: 1fr;
  }

  .complianceOverviewFrameworkGrid {
    grid-template-columns: 1fr;
  }

  .playbookBuilderGrid {
    grid-template-columns: 1fr;
  }

  .runbookBuilderGrid {
    grid-template-columns: 1fr;
  }

  .playbookBranchGrid {
    grid-template-columns: 1fr;
  }

  .connectionsSourceGroups {
    max-height: none;
  }

  .connectionsHealthFlow,
  .connectionsHealthMetrics,
  .connectionsTrendSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runbooksLandingGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .workspaceShell {
    grid-template-columns: 1fr;
  }

  .workspaceSidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  }
  .filterBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detailGrid {
    grid-template-columns: 1fr;
  }

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

  .complianceSignalSelector {
    grid-column: auto;
  }

  .complianceHeaderCard {
    flex-direction: column;
    align-items: flex-start;
  }

  .complianceOverviewHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .complianceHeaderActions {
    justify-content: flex-start;
  }

  .complianceOverviewToolbar {
    justify-content: flex-start;
  }

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

  .settingsHeaderCard {
    flex-direction: column;
    align-items: flex-start;
  }

  .settingsGrid {
    grid-template-columns: 1fr;
  }

  .playbooksLandingCard {
    flex-direction: column;
    align-items: flex-start;
  }

  .playbookBuilderHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .playbookBuilderHeaderActions {
    justify-content: flex-start;
  }

  .playbookNameInput {
    min-width: 0;
    width: 100%;
    font-size: 1.2rem;
  }

  .playbookBuilderFooter {
    flex-direction: column;
    align-items: flex-start;
  }

  .investigationHeaderCard {
    flex-direction: column;
    align-items: flex-start;
  }

  .investigationHeaderActions {
    justify-content: flex-start;
  }

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

  .investigationSignalField {
    grid-column: auto;
  }

  .investigationOverviewGrid {
    grid-template-columns: 1fr;
  }

  .connectionsHeaderCard {
    flex-direction: column;
    align-items: flex-start;
  }

  .connectionsHeaderActions {
    justify-content: flex-start;
  }

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

  .runbooksLandingHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .runbooksCreateButton {
    align-self: flex-start;
  }

  .signalsFilterSummary {
    margin-left: 0;
    width: 100%;
  }

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

  .investigationFilterSignalField {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .signalsPageHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .signalsFilterToolbar {
    align-items: stretch;
  }

  .signalsFilterToggle,
  .signalsFilterToolbar .button {
    width: 100%;
  }

  .signalsFilterDrawer {
    grid-template-columns: 1fr;
  }

  .signalsFilterDrawer .filterActions {
    justify-content: flex-start;
  }
  .filterBar {
    grid-template-columns: 1fr;
  }

  .actionGrid {
    grid-template-columns: 1fr;
  }

  .complianceOverviewKpiGrid {
    grid-template-columns: 1fr;
  }

  .complianceOverviewFrameworkCounts {
    grid-template-columns: 1fr;
  }

  .settingsFooterCard {
    justify-content: flex-start;
  }

  .complianceOverviewPriorityList li {
    flex-direction: column;
  }

  .complianceOverviewPriorityActions {
    width: 100%;
    flex-direction: row;
  }

  .complianceOverviewPriorityActions .button {
    flex: 1 1;
  }

  .playbookBuilderHeaderPrimary,
  .playbookBuilderHeaderActions,
  .playbookFooterActions {
    width: 100%;
  }

  .playbookFooterActions {
    flex-direction: column;
  }

  .playbookFooterActions .button {
    width: 100%;
  }

  .investigationFilterBar {
    grid-template-columns: 1fr;
  }

  .investigationKpiRow {
    grid-template-columns: 1fr;
  }

  .investigationActionGrid {
    grid-template-columns: 1fr;
  }

  .connectionsKpiGrid,
  .connectionsHealthFlow,
  .connectionsHealthMetrics,
  .connectionsTrendSummary {
    grid-template-columns: 1fr;
  }

  .connectionsActionRow {
    flex-direction: column;
  }
}