:root {
  --healthy: #2e7d32;
  --warning: #b8860b;
  --critical: #c4314b;
  --unknown: #6b6b6b;
  --bg: #f2f6fa;
  --card-bg: #ffffff;
  --border: #dbe3ec;
  --text: #1f1f1f;
  --muted: #6b6b6b;
  --chart-line: #0a6fd0;
  --chart-line-2: #0b9a8a;
  --chart-line-3: #4caf50;
  --chart-line-4: #d6336c;
  --chart-line-5: #7c5cbf;
  --accent: #0a6fd0;
  --brand-grad: linear-gradient(90deg, #0a6fd0, #0b9a8a);
  --header-glow: rgba(11, 154, 138, 0.1);
  --warning-light: #fef9e7;
  --warning-text: #7a5800;
  --success: var(--healthy);
  --success-light: #e8f5e9;
  --success-text: #1b5e20;
  --warn: var(--warning);
  --warn-light: var(--warning-light);
  --warn-text: var(--warning-text);
  --danger: var(--critical);
  --danger-light: #fdecee;
  --danger-text: #8e1b2e;
  --on-solid: #ffffff;
  --logo-backdrop: transparent;
  --grade-a: #3f7d20;
  --grade-b: #248dc1;
  --grade-c: #b08127;
  --grade-d: #d96d2d;
  --grade-f: #c00000;
  --risk-residual: #d96d2d;
  --risk-inherent: #f3c9ab;
  --rt-panel: #e8f1f8;
  --rt-ceiling-bg: #253661;
  --rt-ceiling-text: #ffffff;
  color-scheme: light;
}

/* Dark palette is declared twice: once to follow the OS setting when the user hasn't picked a
   theme, once for an explicit pick. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --healthy: #5cb860;
    --warning: #e0b341;
    --critical: #ef5a6f;
    --unknown: #8a8f96;
    --bg: #0b1118;
    --card-bg: #121a24;
    --border: #263140;
    --text: #e6edf3;
    --muted: #94a3b3;
    --chart-line: #3aa0ff;
    --chart-line-2: #2dd4bf;
    --chart-line-3: #6fcf73;
    --chart-line-4: #f06292;
    --chart-line-5: #a58be0;
    --accent: #3aa0ff;
    --brand-grad: linear-gradient(90deg, #0a84ff, #00d1b2);
    --header-glow: rgba(0, 200, 170, 0.16);
    --warning-light: #3a3220;
    --warning-text: #f2d27a;
    --success-light: #1e3322;
    --success-text: #8fd694;
    --danger-light: #3a1f24;
    --danger-text: #f4a3ae;
    --on-solid: #0f1216;
    --logo-backdrop: #ffffff;
    --grade-a: #4f9a2a;
    --grade-b: #2f9bd1;
    --grade-c: #b8892c;
    --grade-d: #d9672a;
    --grade-f: #d23a3a;
    --risk-residual: #e8834a;
    --risk-inherent: #6b4430;
    --rt-panel: #152230;
    --rt-ceiling-bg: #253661;
    --rt-ceiling-text: #ffffff;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --healthy: #5cb860;
  --warning: #e0b341;
  --critical: #ef5a6f;
  --unknown: #8a8f96;
  --bg: #0b1118;
  --card-bg: #121a24;
  --border: #263140;
  --text: #e6edf3;
  --muted: #94a3b3;
  --chart-line: #3aa0ff;
  --chart-line-2: #2dd4bf;
  --chart-line-3: #6fcf73;
  --chart-line-4: #f06292;
  --chart-line-5: #a58be0;
  --accent: #3aa0ff;
  --brand-grad: linear-gradient(90deg, #0a84ff, #00d1b2);
  --header-glow: rgba(0, 200, 170, 0.16);
  --warning-light: #3a3220;
  --warning-text: #f2d27a;
  --success-light: #1e3322;
  --success-text: #8fd694;
  --danger-light: #3a1f24;
  --danger-text: #f4a3ae;
  --on-solid: #0f1216;
  --logo-backdrop: #ffffff;
  --grade-a: #4f9a2a;
  --grade-b: #2f9bd1;
  --grade-c: #b8892c;
  --grade-d: #d9672a;
  --grade-f: #d23a3a;
  --risk-residual: #e8834a;
  --risk-inherent: #6b4430;
  --rt-panel: #152230;
  --rt-ceiling-bg: #253661;
  --rt-ceiling-text: #ffffff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  min-height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1.5rem;
  background: radial-gradient(ellipse 45% 220% at 100% 0, var(--header-glow), transparent 70%), var(--card-bg);
  border-bottom: 1px solid var(--border);
}

header h1 { margin: 0; font-size: 1.25rem; }

header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand-icon {
  display: block;
  height: 36px;
  width: 36px;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.35));
}

.brand-name {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
#updated-at { color: var(--muted); font-size: 0.85rem; margin-left: auto; }

/* Main and sub navigation share one pattern: flat tabs with an accent underline, sitting on
   a full-width bar whose 2px bottom border the active underline overlaps. */
.tabs,
.monitor-bar {
  flex: 0 0 auto;
  display: flex;
  background: var(--card-bg);
  border-bottom: 2px solid var(--border);
  padding: 0 1.5rem;
}

.monitor-bar {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.subtabs { display: flex; align-self: stretch; }

.tabs button,
.subtabs button {
  display: flex;
  align-items: center;
  padding: 0.65rem 1rem;
  margin-bottom: -2px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.subtabs button {
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
}

.tabs button:hover,
.subtabs button:hover {
  color: var(--text);
  background: var(--bg);
}

.tabs button.active,
.subtabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  border-image: var(--brand-grad) 1;
}

.toolbar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.4rem 0;
}

.range-toggle { display: flex; gap: 0.4rem; }

.range-toggle button,
.custom-range button,
.custom-range input {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
}

.range-toggle button,
.custom-range button {
  cursor: pointer;
}

.range-toggle button.active {
  background: var(--brand-grad);
  border-color: var(--chart-line);
  color: var(--on-solid);
}

.custom-range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.custom-range button:hover {
  border-color: var(--chart-line);
  color: var(--chart-line);
}

main {
  flex: 0 0 auto;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Fixed to what 2 rows look like filling the screen — deliberately NOT 1fr, which would
     redistribute total height across however many rows exist and shrink every card as more
     resources get added. A 3rd+ row just extends the page downward instead (scrollable). */
  grid-auto-rows: calc((100vh - 12.5rem) / 2);
  gap: 1rem;
}

.group-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.group-card h2 {
  margin: 0 0 0.75rem 0;
  font-size: 1.05rem;
}

.resource-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
}

.resource-header + .resource-header {
  border-top: 1px solid var(--border);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot.healthy { background: var(--healthy); }
.dot.warning { background: var(--warning); }
.dot.critical { background: var(--critical); }
.dot.unknown { background: var(--unknown); }

.resource-info { flex: 1; }
.resource-type { font-weight: 600; font-size: 0.9rem; }
.resource-name { color: var(--muted); font-size: 0.8rem; }
.resource-tier {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.01em;
}

.db-pause-info {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.pause-badge {
  font-size: 0.72rem;
  border-radius: 3px;
  padding: 1px 5px;
  border: 1px solid;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pause-badge.paused {
  color: var(--warning-text);
  background: var(--warning-light);
  border-color: var(--warning);
}

.pause-badge.resumed {
  color: var(--muted);
  background: var(--bg);
  border-color: var(--border);
}

.pause-times {
  font-size: 0.72rem;
  color: var(--muted);
}

.pause-log-link {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  font-family: inherit;
}
.pause-log-link:hover { opacity: 1; text-decoration: underline; }

/* ---- Pause log modal ---- */
#pause-log-modal, #widget-catalog-modal, #widget-approvals-modal, #widget-drill-modal, #integration-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.modal-panel {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.modal-header h2 { margin: 0; font-size: 1rem; }
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 0.25rem;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-empty { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 1.5rem 0; }

.changelog-entry { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.changelog-entry:last-child { border-bottom: none; }
.changelog-version { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.4rem; }
.changelog-v { font-weight: 700; font-size: 1rem; font-family: monospace; }
.changelog-date { font-size: 0.8rem; color: var(--muted); }
.changelog-notes { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; line-height: 1.6; }
.changelog-notes li { margin-bottom: 0.2rem; }
.changelog-pending { margin: 0; font-size: 0.875rem; color: var(--muted); font-style: italic; }
.modal-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.modal-stat {
  flex: 1;
  min-width: 110px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
}
.modal-stat-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.15rem; }
.modal-stat-value { font-size: 1.2rem; font-weight: 700; }
.pause-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.pause-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.pause-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.pause-table tr:last-child td { border-bottom: none; }
.pause-active-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--warning-text);
  background: var(--warning-light);
  border: 1px solid var(--warning);
  margin-left: 0.35rem;
}
.muted { color: var(--muted); }

.findings-grid {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem;
}

.finding-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.finding-header-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.legend-item.unplotted .legend-swatch {
  border: 1px dashed var(--muted);
  box-sizing: border-box;
}

.finding-value.bad { color: var(--critical); font-weight: 600; }
.finding-value.warn { color: var(--warning); font-weight: 600; }

.finding-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.finding-toolbar > .finding-header,
.finding-toolbar > .finding-header-multi {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.agg-select {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.68rem;
  padding: 0.1rem 0.3rem;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.finding {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chart {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chart-body {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 0.5rem;
}

.chart-y-axis {
  flex: 0 0 auto;
  position: relative;
  width: 2.6rem;
  font-size: 0.65rem;
  color: var(--muted);
  text-align: right;
}

.chart-y-axis span {
  position: absolute;
  right: 0;
  white-space: nowrap;
}

.chart-plot {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sparkline {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: block;
}

.chart-axis {
  flex: 0 0 auto;
  position: relative;
  height: 16px;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.chart-axis span {
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.chart-empty {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- Auth ---- */

/* The sign-in page has its own dark brand look and ignores the light/dark theme toggle. */
.login-body {
  --login-fg: #e8eef5;
  --login-muted: #94a3b3;
  --login-line: #3a4554;
  --login-teal: #2dd4bf;
  --login-blue: #0a84ff;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  color: var(--login-fg);
  color-scheme: dark;
  background:
    radial-gradient(ellipse 45% 40% at 88% 6%, rgba(0, 200, 170, 0.26), transparent 70%),
    radial-gradient(ellipse 42% 45% at 6% 88%, rgba(20, 110, 255, 0.24), transparent 70%),
    #080d14;
}

/* The login card is a <main>, so it inherits the dashboard's 2x2 grid and flex-grow --
   without resetting those, the heading and subtitle land in separate grid cells and the
   card stretches to the full viewport height. */
.login-card {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  width: 100%;
  max-width: 440px;
  padding: 2.25rem 2.25rem 2.5rem;
  background: linear-gradient(180deg, rgba(25, 33, 44, 0.92), rgba(15, 21, 30, 0.92));
  border: 1px solid rgba(110, 200, 220, 0.18);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.login-mark {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.45));
}

.login-card h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

.login-sub {
  margin: 1.25rem 0 1.75rem;
  text-align: center;
  font-size: 1.15rem;
  color: var(--login-fg);
}

.login-card form { display: flex; flex-direction: column; gap: 0.4rem; }

.login-card label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--login-fg);
}

.login-card label + input,
.login-card label + .login-pw { margin-bottom: 0.9rem; }

.login-card input {
  width: 100%;
  height: 48px;
  padding: 0 0.9rem;
  font: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--login-line);
  border-radius: 12px;
}

.login-card input:focus {
  outline: none;
  border-color: var(--login-teal);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

.login-card input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0 100px #19212c inset;
  caret-color: #fff;
}

.login-pw { position: relative; }
.login-pw input { padding-right: 3rem; }

.login-pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--login-muted);
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.login-pw-toggle:hover,
.login-pw-toggle:focus-visible { color: #fff; }
.login-pw-toggle:focus-visible { outline: 2px solid var(--login-teal); outline-offset: -2px; }
.login-pw-toggle svg { width: 22px; height: 22px; }
.login-pw-toggle .eye-off { display: none; }
.login-pw-toggle[aria-pressed='true'] .eye-on { display: none; }
.login-pw-toggle[aria-pressed='true'] .eye-off { display: block; }

.login-card button[type='submit'] {
  margin-top: 0.6rem;
  height: 52px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, var(--login-blue), #00d1b2);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.login-card button[type='submit']:hover:not(:disabled) { filter: brightness(1.1); }
.login-card button[type='submit']:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.login-card button[type='submit']:disabled { opacity: 0.6; cursor: default; }

.login-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  height: 52px;
  font-size: 1.1rem;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  background: rgba(45, 212, 191, 0.06);
  border: 1px solid var(--login-teal);
  border-radius: 12px;
}

.login-sso svg { width: 22px; height: 22px; }
.login-sso:hover { background: rgba(45, 212, 191, 0.14); }
.login-sso:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  color: var(--login-muted);
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--login-line);
}

.login-error {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: #ff8a9b;
}

.login-note {
  margin: 1.25rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--login-muted);
}

.login-note code {
  padding: 0.1rem 0.3rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--login-line);
  border-radius: 3px;
}

@media (max-width: 480px) {
  .login-card { padding: 1.75rem 1.25rem 2rem; border-radius: 20px; }
  .login-mark { width: 56px; height: 56px; }
  .login-card h1 { font-size: 1.4rem; }
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.chip-btn {
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.chip-btn:hover { background: var(--bg); }

.version-btn {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--muted);
  border-color: transparent;
}
.version-btn:hover { color: var(--text); }

.empty-state {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---- App Service Plan: apps assigned to the plan ---- */

.plan-apps {
  margin-left: auto;
  text-align: right;
  min-width: 0;
}

.plan-apps-label {
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.plan-apps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.app-chip {
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  white-space: nowrap;
}

/* An app on the plan that nothing is watching — the case this list exists to surface. */
.app-chip.unmonitored {
  color: var(--warning);
  border-color: var(--warning);
  border-style: dashed;
}

.app-chip.stopped {
  color: var(--muted);
  text-decoration: line-through;
}

#toast-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
}

.toast {
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--on-solid);
  animation: toast-in 0.15s ease;
}

.toast-error   { background: var(--critical); }
.toast-warn    { background: var(--warning); }
.toast-success { background: var(--healthy); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Settings tab ---- */

#settings-panel {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.security-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1100px;
}

.security-wrap-wide { max-width: none; }

.dash-updated {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: -0.75rem 0 -0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.security-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.security-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.security-placeholder {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.security-loading {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Grey placeholder cards shown in the shape of a dashboard while it loads for the first time. */
.dash-skeleton .security-section { display: flex; flex-direction: column; gap: 0.75rem; min-height: 9rem; }
.dash-skeleton-line {
  height: 0.9rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: dash-skeleton 1.4s ease-in-out infinite;
}
.dash-skeleton-line.short { width: 40%; }
.dash-skeleton-line.tall { height: 3.5rem; }
@keyframes dash-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .dash-skeleton-line { animation: none; } }

.security-severity-tiles {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.security-sev-tile {
  flex: 1;
  min-width: 100px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.security-sev-tile.bad  { border-color: var(--danger); }
.security-sev-tile.warn { border-color: var(--warn); }
.security-sev-tile.ok   { border-color: var(--success); }

.sev-count {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.security-sev-tile.bad  .sev-count { color: var(--danger-text); }
.security-sev-tile.warn .sev-count { color: var(--warn-text); }

.sev-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sev-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--badge-neutral-bg, var(--border));
  color: var(--text);
}

.sev-badge.bad  { background: var(--danger-light); color: var(--danger-text); }
.sev-badge.warn { background: var(--warn-light);   color: var(--warn-text); }
.sev-badge.ok   { background: var(--success-light); color: var(--success-text); }

.security-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.security-table th {
  text-align: left;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.security-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.security-table tr:last-child td { border-bottom: none; }

.security-table .alert-name { font-weight: 500; }
.security-table .alert-time { white-space: nowrap; color: var(--muted); font-size: 0.8rem; }

.report-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 1.5rem;
}

.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 1.5rem;
}

.widget-full { grid-column: 1 / -1; }

#widget-catalog-modal .modal-panel, #widget-approvals-modal .modal-panel { width: min(820px, calc(100vw - 2rem)); }
.approval-actions { display: flex; flex-direction: column; gap: 0.4rem; min-width: 11rem; }
.approval-actions input { width: 100%; }
.approval-meta { font-size: 0.85rem; color: var(--muted); }
.approval-preview { margin-top: 0.4rem; }
.approval-preview .widget { grid-column: auto; }
.widget-catalog-list { list-style: none; margin: 0; padding: 0; }
.widget-catalog-row:first-child { border-top: none; padding-top: 0; }
.widget-catalog-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
}
.widget-catalog-row[hidden], .widget-catalog-section[hidden], #widget-catalog-none[hidden] { display: none; }
.widget-catalog-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.widget-catalog-text .overview-card-sub { margin: 0; }
.widget-catalog-section + .widget-catalog-section { margin-top: 1rem; }
.widget-catalog-group-head { margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.widget-catalog-controls {
  position: sticky;
  top: -1.25rem;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: -1.25rem -1.25rem 0.75rem;
  padding: 0.85rem 1.25rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.widget-catalog-controls input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.widget-catalog-controls input, .widget-catalog-controls select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.widget-catalog-count { font-size: 0.8rem; color: var(--muted); margin-left: auto; }
.widget-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.widget-chip { padding: 0.05rem 0.5rem; font-size: 0.72rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; }
.widget-catalog-details { font-size: 0.82rem; }
.widget-catalog-details summary { cursor: pointer; color: var(--accent-text, var(--accent)); width: fit-content; }
.widget-catalog-details p { margin: 0.35rem 0 0; color: var(--muted); }
.widget-catalog-details .widget-catalog-label { margin-top: 0.5rem; font-weight: 600; color: var(--text); }
.widget-catalog-details ul { margin: 0.2rem 0 0; padding-left: 1.1rem; columns: 2; column-gap: 1.5rem; }
.widget-catalog-details li { break-inside: avoid; margin-bottom: 0.1rem; }
.widget-catalog-foot { margin-top: 0.75rem; text-align: right; }
.overview-card-foot .overview-link + .overview-link { margin-left: 0.75rem; }
/* Per-widget timeframe selector. */
.widget-timeframe { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: -0.4rem; font-size: 0.85rem; color: var(--muted); }
.widget-timeframe label { display: inline-flex; align-items: center; gap: 0.4rem; }
.widget-timeframe select, .widget-timeframe input[type="date"] {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.15rem 0.4rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.widget-timeframe-range { display: inline-flex; align-items: center; gap: 0.4rem; }
.widget-timeframe-range[hidden] { display: none; }
/* The date selector for a whole dashboard (Insider Risk pages). */
.dashboard-timeframe { margin: 0 0 0.75rem; }
.dash-updated .dashboard-timeframe { margin: 0 auto 0 0; }
/* Long case lists scroll inside their widget, with the column headings kept in view. */
.widget-table-wrap { max-height: 32rem; overflow-y: auto; }
.widget-table-wrap thead th { position: sticky; top: 0; background: var(--card-bg); z-index: 1; }

/* The format menu under an Export button. */
.export-menu {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  padding: 0.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.export-menu button {
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.export-menu button:hover, .export-menu button:focus-visible { background: var(--bg); outline: none; }

/* Drill-down: a tile, bar or day that opens its rows. */
.drillable { cursor: pointer; }
.overview-stat.drillable:hover, .dash-bar-row.drillable:hover { background: var(--bg); }
.dash-day.drillable:hover .dash-day-fill { opacity: 0.7; }
.drillable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.is-editing .drillable { cursor: default; }

#widget-drill-modal { justify-content: flex-end; align-items: stretch; }
.drill-panel { width: min(960px, 100vw); max-height: none; height: 100vh; border-radius: 0; border-width: 0 0 0 1px; }
.drill-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--muted); }

.widget-table th.num, .widget-table td.num { text-align: right; white-space: nowrap; }
.widget-table td { padding: 0.4rem 0.75rem; }

@media (min-width: 900px) {
  .widget-wide { grid-column: span 2; }
}

/* Layout mode: each card shows a bar to move and resize it. */
.widget-edit-bar, .widget-edit-hint, .dash-updated [data-dashboard-layout-reset] { display: none; }
.is-editing .widget-edit-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--border);
}
.is-editing .widget-edit-hint { display: block; margin: 0 0 1rem; color: var(--muted); font-size: 0.9rem; }
.is-editing .dash-updated [data-dashboard-layout-reset] { display: inline-block; }
.is-editing .widget[data-widget-id] { outline: 1px dashed var(--border); outline-offset: 4px; }
.widget-drag-handle { cursor: grab; user-select: none; font-size: 0.85rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.widget-drag-handle:active { cursor: grabbing; }
.widget-edit-group { display: inline-flex; gap: 0.25rem; }
.widget-edit-group button {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.widget-edit-group button.active { background: var(--accent); border-color: var(--accent); color: var(--on-solid); }
.widget-dragging { opacity: 0.4; }
@media (max-width: 899px) {
  .widget-edit-group[aria-label="Widget width"] { display: none; }
}

.overview-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.overview-card h2 { margin: 0; }

.overview-card-sub {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
}

.overview-stat {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.overview-stat.bad  { border-color: var(--danger); }
.overview-stat.warn { border-color: var(--warn); }
.overview-stat.bad  .overview-stat-value { color: var(--danger-text); }
.overview-stat.warn .overview-stat-value { color: var(--warn-text); }

.overview-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.overview-stat-label {
  font-size: 0.75rem;
  color: var(--muted);
}

.overview-card-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.overview-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
}

.overview-link:hover { text-decoration: underline; }

.dash-summary {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.dash-section-sub { margin: -0.5rem 0 0.9rem; }

.dash-bars {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dash-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.dash-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-bar-track {
  height: 0.6rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.dash-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.dash-bar-fill.bad  { background: var(--danger); }
.dash-bar-fill.warn { background: var(--warn); }

.dash-bar-value {
  min-width: 2.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-day-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  border-bottom: 1px solid var(--border);
}

.dash-day {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.dash-day-fill {
  display: block;
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

.dash-day:hover .dash-day-fill { opacity: 0.75; }

.dash-day-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.report-bar-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.report-bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.report-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-bar-track {
  background: var(--border);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}

.report-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.report-bar-count {
  text-align: right;
  color: var(--muted);
  font-size: 0.8rem;
}

.settings-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

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

/* Azure Config form */
.azure-config-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.azure-config-notice {
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--warn) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.5;
}

.azure-config-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.azure-config-section h3 {
  margin: 0 0 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.azure-config-readonly-badge {
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}

.azure-config-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.azure-config-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  grid-row: 1;
}

.azure-config-input {
  grid-row: 1;
  padding: 0.45rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  font-family: monospace;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.azure-config-input:focus {
  outline: 2px solid var(--chart-line);
  outline-offset: -1px;
}

.azure-config-readonly {
  background: var(--bg);
  color: var(--muted);
  cursor: default;
}

.azure-config-hint {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.azure-config-textarea {
  min-height: 7rem;
  resize: vertical;
  font-size: 0.75rem;
  line-height: 1.4;
}

.azure-config-check {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.azure-config-use {
  margin-left: 0.35rem;
  padding: 0.05rem 0.5rem;
  font: inherit;
  font-size: 0.72rem;
  color: var(--chart-line);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.azure-config-use:hover { border-color: var(--chart-line); }

.settings-action-btn {
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.settings-action-btn:hover {
  border-color: var(--chart-line);
  color: var(--chart-line);
}

.settings-notice {
  padding: 0.65rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

.settings-warn-list {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.settings-notice code {
  padding: 0.1rem 0.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.78rem;
}

.settings-search-bar {
  display: flex;
  gap: 0.5rem;
}

.settings-sub-input {
  flex: 0 0 280px;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.settings-sub-input:focus {
  outline: 2px solid var(--chart-line);
  outline-offset: -1px;
}

.settings-rg-input {
  flex: 1;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.settings-rg-input:focus {
  outline: 2px solid var(--chart-line);
  outline-offset: -1px;
}

.settings-loading,
.settings-empty,
.settings-error {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.settings-error { color: var(--critical); }

.settings-empty-rg {
  padding: 0.5rem 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

.settings-sub-header {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.settings-sub-id {
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
  gap: 1rem;
}

.settings-rg-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.1s;
}

.settings-rg-card.is-enabled {
  border-color: var(--chart-line);
}

.settings-rg-card[draggable="true"] { cursor: grab; }
.settings-rg-card.is-dragging { opacity: 0.35; }
.settings-rg-card.drag-over {
  border-color: var(--chart-line);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chart-line) 30%, transparent);
}

.drag-handle {
  color: var(--muted);
  cursor: grab;
  font-size: 1rem;
  user-select: none;
  padding: 0 2px;
  flex-shrink: 0;
}

.settings-rg-card.is-empty {
  opacity: 0.5;
  background: var(--bg);
}

.settings-empty-note {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  margin-left: auto;
}

.settings-rg-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.settings-toggle input { cursor: pointer; }

.settings-group-name {
  flex: 1;
  min-width: 160px;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.settings-group-name:focus {
  outline: 2px solid var(--chart-line);
  outline-offset: -1px;
}

.settings-group-name:disabled {
  color: var(--muted);
  opacity: 0.6;
}

.settings-rg-name {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: monospace;
  margin-left: auto;
}

.settings-resources {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.settings-resources.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.settings-resource-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.settings-resource-label {
  flex: 0 0 130px;
  font-size: 0.78rem;
  color: var(--muted);
}

.settings-select {
  flex: 1;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.settings-select:disabled { cursor: default; }

.settings-footer {
  padding-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

.settings-save-btn {
  padding: 0.5rem 1.25rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--on-solid);
  background: var(--brand-grad);
  border: 1px solid var(--chart-line);
  border-radius: 6px;
  cursor: pointer;
}

.settings-save-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

/* Users table */
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.users-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.users-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.users-table tr.user-inactive td { opacity: 0.55; }

.user-status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-active { background: color-mix(in srgb, var(--success) 15%, var(--card-bg)); color: var(--success-text); }
.badge-inactive { background: color-mix(in srgb, var(--muted) 15%, var(--card-bg)); color: var(--muted); }
.badge-warn { background: var(--warn-light); color: var(--warn-text); }

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

@media (max-width: 1100px) {
  .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.integration-card {
  padding: 1rem;
  gap: 0.6rem;
}

.integration-card h3 {
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
}

/* Cards show only the header and description; the header opens the details in a pop-out window. */
.integration-grid { align-items: start; }
.integration-card h3 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.integration-modal-panel { width: min(840px, calc(100vw - 2rem)); }
#integration-modal-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.integration-toggle {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.integration-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.integration-body { display: flex; flex-direction: column; gap: 0.6rem; }

.integration-body .azure-config-row {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  gap: 0.25rem;
}

.integration-body .azure-config-label,
.integration-body .azure-config-input,
.integration-body .azure-config-check,
.integration-body .azure-config-hint {
  grid-column: 1;
  grid-row: auto;
}

.integration-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.4rem;
  border-radius: 3px;
}

.integration-body .azure-config-label { font-size: 0.8rem; }
.integration-body .azure-config-input { min-width: 0; font-size: 0.8rem; }

.int-masked-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.int-masked-wrap .azure-config-input {
  flex: 1;
  padding-right: 3.5rem;
}
.int-show-toggle {
  position: absolute;
  right: 0.5rem;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.int-show-toggle:hover { color: var(--text); }

.integration-status {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
}

.integration-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.integration-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.integration-footer .settings-save-btn {
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
}

.integration-updated {
  font-size: 0.75rem;
  color: var(--muted);
}

.integration-sync {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.integration-sync-text {
  flex: 1 1 100%;
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.integration-sync-text.sync-failed { color: var(--danger-text); }
.integration-sync-text.sync-partial { color: var(--warn-text); }

/* Cards take three columns; sync activity is the fourth. */
.integration-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .integration-layout { grid-template-columns: 1fr; }
  .integration-activity { order: -1; }
}

.integration-activity {
  padding: 1rem;
  gap: 0.5rem;
}

.sync-activity-heading {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.sync-activity-empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}


.sync-run-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sync-run {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.sync-run-head { display: flex; align-items: center; gap: 0.4rem; }
.sync-run-name { font-size: 0.8rem; font-weight: 600; }
.sync-run-meta { font-size: 0.72rem; color: var(--muted); overflow-wrap: anywhere; }

.sync-run-error {
  font-size: 0.72rem;
  color: var(--danger-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.sync-run-badge {
  margin-left: auto;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

.sync-run-head .sync-run-badge:only-child { margin-left: 0; }
.sync-run-running { background: color-mix(in srgb, var(--accent) 15%, var(--card-bg)); color: var(--accent); }
.sync-run-success { background: var(--success-light); color: var(--success-text); }
.sync-run-partial { background: var(--warn-light); color: var(--warn-text); }
.sync-run-failed  { background: var(--danger-light); color: var(--danger-text); }

.integration-sync-actions { display: flex; gap: 0.4rem; margin-left: auto; }

.sync-history-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  width: min(300px, calc(100vw - 32px));
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.sync-history-pop .sync-activity-heading { margin: 0; }
.integration-sync-btn:disabled { opacity: 0.6; cursor: default; }
.integration-sync-btn:disabled:hover { border-color: var(--border); color: var(--muted); }

/* Risk tolerance widget (Security > Risk Dashboard). Laid out like the exported slide. */
.rt-widget-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.rt-widget-head h2 { margin-bottom: 0.15rem; }
.rt-widget-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rt-widget-actions .settings-save-btn { padding: 0.35rem 1rem; font-size: 0.8rem; }
.rt-widget-actions .settings-action-btn:disabled { opacity: 0.6; cursor: default; }
.rt-template-pick { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--muted); }
.rt-template-pick select {
  font: inherit;
  padding: 0.3rem 0.4rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.rt-slide { margin-top: 0.75rem; }
.rt-muted { color: var(--muted); }

.rt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.rt-title { margin: 0; font-size: 1.6rem; font-weight: 400; color: var(--accent); }
.rt-overall { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.rt-overall > div { display: flex; flex-direction: column; }
.rt-overall .rt-grade { width: 2.6rem; height: 2.6rem; font-size: 1.6rem; border-radius: 4px; }
.rt-scale { margin: 0.4rem 0 0.9rem; font-size: 0.8rem; color: var(--muted); }
.rt-scale strong { color: var(--text); }

.rt-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1000px) { .rt-body { grid-template-columns: 1fr; } }

.rt-table-wrap { overflow-x: auto; }
.rt-table { min-width: 520px; font-size: 0.8rem; }
.rt-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(8rem, 1.4fr) minmax(6rem, 1.5fr) 4rem 4rem 4rem;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.45rem;
}
.rt-row-head {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.2rem;
  margin-bottom: 0.2rem;
}
.rt-num { text-align: right; font-variant-numeric: tabular-nums; }
.rt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-residual-text { color: var(--risk-residual); }
.rt-inherent-text { color: var(--risk-inherent); }
.rt-bars { position: relative; height: 0.8rem; }
.rt-bars span { position: absolute; left: 0; top: 0; bottom: 0; }
.rt-bar-inherent { background: var(--risk-inherent); }
.rt-bar-residual { background: var(--risk-residual); }
.rt-source { margin: 0.5rem 0 0; font-size: 0.7rem; color: var(--muted); }

.rt-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rt-ceiling-text);
}
.rt-grade-a { background: var(--grade-a); }
.rt-grade-b { background: var(--grade-b); }
.rt-grade-c { background: var(--grade-c); }
.rt-grade-d { background: var(--grade-d); }
.rt-grade-f { background: var(--grade-f); }

.rt-panel { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.8rem; }
.rt-ceiling {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-radius: 6px;
  background: var(--rt-ceiling-bg);
  color: var(--rt-ceiling-text);
}
.rt-ceiling-label { display: block; font-size: 0.8rem; opacity: 0.85; }
.rt-ceiling-value { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.rt-ceiling-notes p { margin: 0 0 0.3rem; font-size: 0.72rem; }
.rt-ceiling-notes p:last-child { margin-bottom: 0; opacity: 0.8; }
.rt-commentary { padding: 0.8rem 1rem; border-radius: 6px; background: var(--rt-panel); }
.rt-commentary p { margin: 0 0 0.45rem; line-height: 1.4; }
.rt-commentary p:last-child { margin-bottom: 0; }
.rt-commentary strong { color: var(--accent); }
.rt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.rt-card { padding: 0.65rem; border-radius: 6px; background: var(--rt-panel); }
.rt-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.rt-card p { margin: 0; font-size: 0.75rem; line-height: 1.35; }
.rt-card-icon { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.rt-card-icon-1 { background: var(--accent); }
.rt-card-icon-2 { background: var(--grade-c); }
.rt-card-icon-3 { background: var(--grade-a); }

.rt-form {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.rt-form h4 { margin: 0.75rem 0 0.4rem; font-size: 0.85rem; }
.rt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .rt-form-grid { grid-template-columns: 1fr; } }
.rt-form .azure-config-row { grid-template-columns: 1fr; grid-template-rows: none; gap: 0.25rem; margin-bottom: 0.5rem; }
.rt-form .azure-config-label,
.rt-form .azure-config-input,
.rt-form .azure-config-hint { grid-column: 1; grid-row: auto; }
.rt-form textarea.azure-config-input { resize: vertical; font: inherit; }
.rt-form-tokens { margin: 0; }
.rt-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }

/* Settings > Report Templates */
.rt-templates-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.rt-templates-upload .azure-config-row { flex: 1 1 14rem; grid-template-columns: 1fr; grid-template-rows: none; gap: 0.25rem; }
.rt-templates-upload .azure-config-label,
.rt-templates-upload .azure-config-input { grid-column: 1; grid-row: auto; }
.rt-templates-table select { font: inherit; font-size: 0.8rem; max-width: 16rem; }

.integration-kv-warning {
  background: var(--danger-light);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  color: var(--danger-text);
}

.user-actions { display: flex; gap: 0.5rem; }

.user-actions button {
  padding: 0.25rem 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
}

.user-actions button:hover { border-color: var(--chart-line); color: var(--chart-line); }

/* Settings > Roles & Permissions */
.perm-table .perm-col { width: 7rem; text-align: center; }
.perm-table .perm-group th {
  padding-top: 1rem;
  font-size: 0.8rem;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
}
.perm-table .perm-parent td:first-child { font-weight: 600; }
.perm-table .perm-child td:first-child { padding-left: 2rem; }
.perm-table .perm-off td:first-child { color: var(--muted); }
.perm-table .perm-empty { color: var(--muted); font-style: italic; }
.perm-table input[type='checkbox'] { width: 1rem; height: 1rem; cursor: pointer; }
.perm-table input[type='checkbox']:disabled { cursor: default; }
.users-table select.user-role { font: inherit; font-size: 0.8rem; }

/* ---- Ask tab ---- */
.monitor-bar.bar-empty { display: none; }

#ask-panel { flex: 1; display: flex; min-height: 0; }
.ask-wrap {
  flex: 1;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  height: calc(100vh - 6.5rem);
  min-height: 24rem;
}
@media (max-width: 800px) {
  .ask-wrap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: auto; }
  .ask-sidebar { max-height: 12rem; }
}

.ask-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-right: 1px solid var(--border);
  background: var(--card-bg);
  overflow: hidden;
}
.ask-sidebar .settings-save-btn { width: 100%; padding: 0.45rem 1rem; font-size: 0.85rem; }
.ask-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; }
.ask-list li { display: flex; align-items: center; border-radius: 6px; }
.ask-list li.active, .ask-list li:hover { background: var(--bg); }
.ask-list-empty { padding: 0.5rem; font-size: 0.8rem; color: var(--muted); }
.ask-conv {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-list li.active .ask-conv { font-weight: 600; color: var(--accent); }
.ask-conv-input {
  flex: 1;
  min-width: 0;
  margin: 0.2rem;
  padding: 0.3rem 0.45rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
}
.ask-conv-rename, .ask-conv-delete {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
}
.ask-list li:hover .ask-conv-rename, .ask-list li:hover .ask-conv-delete,
.ask-conv-rename:focus-visible, .ask-conv-delete:focus-visible { opacity: 1; }
.ask-conv-rename:hover { color: var(--accent); }
.ask-conv-delete:hover { color: var(--danger-text); background: var(--danger-light); }

.ask-memory-btn {
  width: 100%;
  padding: 0.45rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.ask-memory-btn:hover { border-color: var(--accent); }
.ask-memory-btn.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }

.ask-main { display: flex; flex-direction: column; min-height: 0; }
.ask-main[data-view="memory"] > :not(.ask-memory) { display: none; }
.ask-main:not([data-view="memory"]) > .ask-memory { display: none; }
.ask-memory { flex: 1; overflow-y: auto; padding: 1.5rem; max-width: 52rem; width: 100%; margin: 0 auto; }
.ask-memory h3 { margin: 0 0 0.4rem; }
.ask-memory p { margin: 0 0 1rem; font-size: 0.85rem; color: var(--muted); }
.ask-memory .ask-memory-count { margin: 0.5rem 0; font-size: 0.78rem; }
.ask-memory-form { display: flex; gap: 0.6rem; }
.ask-memory-form input, .ask-memory-input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ask-memory-form input:focus, .ask-memory-input { border-color: var(--accent); }
.ask-memory-form .settings-save-btn { padding: 0.45rem 1.2rem; font-size: 0.85rem; }
.ask-memory-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ask-memory-list li { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); }
.ask-memory-list li.renaming { padding: 0.15rem; border-color: var(--accent); }
.ask-memory-text { flex: 1; min-width: 0; padding: 0.3rem 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.ask-memory-list li:hover .ask-conv-rename, .ask-memory-list li:hover .ask-conv-delete { opacity: 1; }
.ask-messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ask-msg { max-width: 52rem; width: 100%; margin: 0 auto; }
.ask-user { display: flex; justify-content: flex-end; }
.ask-bubble {
  max-width: 80%;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  background: var(--brand-grad);
  color: var(--on-solid);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ask-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.ask-tool {
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ask-answer {
  padding: 0.25rem 0.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.ask-answer h3, .ask-answer h4, .ask-answer h5, .ask-answer h6 { margin: 1rem 0 0.4rem; line-height: 1.3; }
.ask-answer h3 { font-size: 1.1rem; }
.ask-answer h4 { font-size: 1rem; }
.ask-answer p { margin: 0 0 0.6rem; }
.ask-answer ul, .ask-answer ol { margin: 0 0 0.6rem; padding-left: 1.4rem; }
.ask-answer code { padding: 0.05rem 0.3rem; font-size: 0.85em; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
.ask-answer pre { padding: 0.75rem; overflow-x: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.ask-answer pre code { padding: 0; border: none; background: none; }
.ask-answer hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.ask-table-wrap { overflow-x: auto; margin: 0 0 0.75rem; }
.ask-table { border-collapse: collapse; font-size: 0.84rem; min-width: 60%; }
.ask-table th, .ask-table td { padding: 0.35rem 0.65rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.ask-table th { font-size: 0.75rem; color: var(--muted); font-weight: 600; border-bottom-width: 2px; }
.ask-thinking { font-size: 0.85rem; color: var(--muted); font-style: italic; }
.ask-widget {
  max-width: 34rem;
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ask-widget-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ask-widget-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ask-widget-done { font-size: 0.82rem; color: var(--muted); }
.ask-widget-hint { margin: 0; font-size: 0.8rem; color: var(--muted); }
.ask-notice {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  color: var(--warn-text);
  background: var(--warn-light);
  border-radius: 6px;
}

.ask-empty { max-width: 40rem; margin: auto; text-align: center; color: var(--muted); }
.ask-empty h3 { margin: 0 0 0.5rem; color: var(--text); }
.ask-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.25rem; text-align: left; }
@media (max-width: 700px) { .ask-suggestions { grid-template-columns: 1fr; } }
.ask-suggestion {
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.ask-suggestion:hover { border-color: var(--accent); }

.ask-form {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  max-width: 52rem;
  width: calc(100% - 3rem);
  margin: 0 auto;
}
.ask-form textarea {
  flex: 1;
  min-height: 2.8rem;
  max-height: 12rem;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
}
.ask-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ask-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 52rem;
  width: 100%;
  margin: 0 auto 0.5rem;
  padding: 0 1.5rem;
  box-sizing: border-box;
}
.ask-attachments[hidden] { display: none; }
.ask-attachment { position: relative; }
.ask-attachment img {
  display: block;
  height: 4.5rem;
  max-width: 8rem;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ask-attachment button {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}
.ask-attachment button:hover { color: var(--danger-text); background: var(--danger-light); }
.ask-attachments-note { flex-basis: 100%; margin: 0; font-size: 0.72rem; color: var(--muted); }
.ask-bubble-image { display: block; max-width: 100%; max-height: 14rem; margin-bottom: 0.4rem; border-radius: 6px; }
.ask-image-chip { margin-bottom: 0.3rem; font-size: 0.75rem; opacity: 0.85; }
.ask-disclaimer { margin: 0.4rem auto 0.9rem; font-size: 0.72rem; color: var(--muted); text-align: center; }

/* ---- Portal Monitoring > Overview ---- */
#overview-panel { flex: 1; overflow-y: auto; }
.overview-table th.num, .overview-table td.num { text-align: right; white-space: nowrap; }
.overview-table td { vertical-align: middle; }
.overview-sub { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
.overview-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.overview-value.bad { color: var(--danger-text); }
.overview-value.warn { color: var(--warn-text); }
.overview-btn {
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.overview-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Portal Monitoring > Vulnerabilities ---- */
#vuln-panel { flex: 1; overflow-y: auto; }
.vuln-wrap { max-width: 1200px; }
.vuln-wrap .security-section { display: flex; flex-direction: column; gap: 1rem; }
.vuln-tile { font: inherit; color: inherit; cursor: pointer; }
.vuln-tile:hover { background: var(--bg); }
.vuln-tile.is-selected { outline: 2px solid currentColor; outline-offset: -2px; background: var(--bg); }
.security-sev-tile.ok .sev-count { color: var(--success-text); }

.vuln-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.vuln-filters .azure-config-input { width: auto; min-width: 11rem; flex: 0 1 auto; }
.vuln-filters input[type='search'] { flex: 1 1 16rem; }

.vuln-list { display: flex; flex-direction: column; gap: 0.5rem; }
.vuln-item { border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); }
.vuln-item summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  list-style: none;
}
.vuln-item summary::-webkit-details-marker { display: none; }
.vuln-item summary::before {
  content: '';
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.vuln-item[open] summary::before { transform: rotate(45deg); }
.vuln-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.vuln-item .sev-badge { flex-shrink: 0; min-width: 4.2rem; text-align: center; }
.vuln-title { flex: 1; min-width: 0; font-weight: 500; }
.vuln-count { flex-shrink: 0; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.vuln-detail { padding: 0 0.9rem 0.9rem 2.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.vuln-detail h4 { margin: 0.25rem 0 0; font-size: 0.85rem; }
.vuln-text { margin: 0; font-size: 0.85rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.vuln-meta { margin: 0; font-size: 0.78rem; color: var(--muted); }
.vuln-table-wrap { overflow-x: auto; }
.vuln-resources { font-size: 0.82rem; }
.vuln-resources a { color: var(--accent); white-space: nowrap; }
@media (max-width: 700px) {
  .vuln-item summary { flex-wrap: wrap; }
  .vuln-detail { padding-left: 0.9rem; }
}
.vuln-group { display: flex; flex-direction: column; gap: 0.5rem; }
.vuln-group + .vuln-group { margin-top: 0.75rem; }
.vuln-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding-bottom: 0.35rem;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border);
}
.vuln-group-counts { display: flex; gap: 0.35rem; }
.vuln-links { white-space: nowrap; }
.vuln-copy {
  margin-left: 0.6rem;
  padding: 0.1rem 0.45rem;
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.vuln-copy:hover { color: var(--accent); border-color: var(--accent); }

/* Settings > Scout Catalog */
.mc-group { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 0.6rem; background: var(--card-bg); }
.mc-group > summary { cursor: pointer; padding: 0.55rem 0.75rem; font-weight: 600; }
.mc-group .users-table td { vertical-align: top; }
.users-table .mc-field-label { max-width: 24rem; }
.mc-calc { margin-top: 0.4rem; font-size: 0.8rem; }
.mc-calc > summary { cursor: pointer; color: var(--accent); }
.mc-calc dl { margin: 0.4rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; }
.mc-calc dt { color: var(--muted); }
.mc-calc dd { margin: 0; overflow-wrap: anywhere; }

.taegis-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; padding-left: 0.5rem; border-bottom: 1px solid var(--border); }
.dash-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.dash-tab {
  padding: 0.55rem 1.3rem;
  margin-bottom: -1px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.dash-tab:hover { color: var(--text); border-color: var(--accent); border-bottom-color: var(--border); }
.dash-tab.active {
  background: var(--card-bg);
  color: var(--accent);
  font-weight: 600;
  border-color: var(--accent);
  border-bottom-color: var(--card-bg);
}
.taegis-bar .dash-updated { margin: 0; padding-bottom: 0.55rem; padding-right: 0.5rem; }
/* Report page tabs on a dashboard (Security > Insider Risk): a smaller row than the Taegis tabs. */
.dash-tabs-compact { margin-bottom: 0.75rem; }
/* On the Dashboard tab the tabs share the "Last updated" line, at its left. */
.dash-updated .dash-tabs-compact { margin: 0 auto 0 0; }
.dash-tabs-compact .dash-tab-new { border-style: dashed; color: var(--muted); }
.dash-tabs-compact .dash-tab-new:hover { color: var(--text); }
.dash-tab-limit { align-self: center; margin-left: 0.75rem; font-size: 0.75rem; color: var(--muted); }
.dash-tabs-compact .dash-tab[draggable="true"] { cursor: grab; }
.dash-tabs-compact .dash-tab.tab-dragging { opacity: 0.4; }
.dash-tabs-compact .dash-tab { padding: 0.35rem 0.85rem; font-size: 0.78rem; border-radius: 6px 6px 0 0; }

.taegis-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem; }
.taegis-stage {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.4rem 1.1rem 1.1rem;
  background: var(--rt-panel);
  border-radius: 6px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.taegis-stage.drillable { cursor: pointer; }
.taegis-stage.drillable:hover { background: var(--bg); }
.taegis-stage-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.taegis-stage-label { font-size: 0.85rem; font-weight: 600; }
.taegis-change { font-size: 0.8rem; color: var(--muted); min-height: 1em; }

.taegis-big { font-size: 2.6rem; font-weight: 700; line-height: 1.1; }
.taegis-big.small { font-size: 2rem; display: block; }
.taegis-response { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }

.taegis-ring {
  --size: 150px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--border) 0);
  display: grid;
  place-items: center;
  margin: 0.25rem 0 0.75rem;
  position: relative;
}
.taegis-ring::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--card-bg); }
.taegis-ring span { position: relative; font-size: 1.5rem; font-weight: 700; }

.taegis-sensors { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 1rem; text-align: center; }
.taegis-sensor { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; }
.taegis-sensor-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 700;
}
.taegis-sensor.ok .taegis-sensor-icon { background: var(--success-light); color: var(--success-text); }
.taegis-sensor.warn .taegis-sensor-icon { background: var(--warn-light); color: var(--warn-text); }