From 604e83666d37f6c20eb66f31206b60bed4453595 Mon Sep 17 00:00:00 2001
From: Nezumi-2711 <phanhuuloi15@gmail.com>
Date: Thu, 3 Sep 2026 18:19:54 +0700
Subject: [PATCH] feat: add dark mode for dashboard page

---
 src/client/styles.css               |  856 +-----------
 src/client/styles/DashboardPage.css | 1881 +++++++++++++++++++++++++++
 2 files changed, 1883 insertions(+), 854 deletions(-)
 create mode 100644 src/client/styles/DashboardPage.css

diff --git a/src/client/styles.css b/src/client/styles.css
index c3d297f..bf0cfa8 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -4,6 +4,7 @@
 @import 'shadcn/tailwind.css';
 @import './styles/LoginPage.css';
 @import './styles/StatusPage.css';
+@import './styles/DashboardPage.css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -252,12 +253,6 @@ button {
 	margin: 0 auto;
 	padding: 56px 0 72px;
 }
-.dashboard-intro {
-	display: flex;
-	align-items: flex-end;
-	justify-content: space-between;
-	gap: 32px;
-}
 .overline {
 	margin: 0 0 8px;
 	font:
@@ -267,19 +262,6 @@ button {
 	text-transform: uppercase;
 	color: #55816e;
 }
-.dashboard-intro h1 {
-	margin: 0;
-	font-size: 40px;
-	font-weight: 500;
-	line-height: 1.1;
-	letter-spacing: -1.5px;
-}
-.dashboard-intro > div > p:last-child {
-	margin: 12px 0 0;
-	font-size: 19px;
-	line-height: 1.55;
-	color: var(--muted);
-}
 .primary-button,
 .secondary-button,
 .danger-button {
@@ -347,71 +329,15 @@ button {
 	height: 16px;
 }
 
-.metric-grid {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	gap: 16px;
-	margin-top: 40px;
-}
-.metric-card {
-	min-height: 142px;
-	padding: 24px;
-	border: 1px solid #e3e3e3;
-	border-radius: 8px;
-	background: #fff;
-}
-.metric-card p {
-	margin: 0 0 20px;
-	font-size: 13px;
-	color: var(--muted);
-}
-.metric-card strong {
-	display: block;
-	font-size: 32px;
-	font-weight: 500;
-	line-height: 1;
-	letter-spacing: -1px;
-}
-.metric-card span {
-	display: block;
-	margin-top: 10px;
-	font-size: 13px;
-	color: var(--faint);
-}
-
-.monitor-form {
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	gap: 20px 16px;
-	margin-top: 24px;
-}
 .field {
 	display: grid;
 	gap: 8px;
 }
-.field-name {
-	grid-column: span 1;
-}
-.field-url {
-	grid-column: span 3;
-}
 .field > span {
 	font-size: 13px;
 	font-weight: 500;
 	color: #353535;
 }
-.toggle-field {
-	display: flex;
-	align-items: center;
-	gap: 9px;
-	align-self: end;
-	min-height: 42px;
-	font-size: 13px;
-	color: #444;
-}
-.toggle-field label {
-	cursor: pointer;
-}
 .form-actions {
 	display: flex;
 	justify-content: flex-end;
@@ -432,127 +358,7 @@ button {
 	color: #9f2f2f;
 	background: #fff6f6;
 }
-.monitor-advanced {
-	grid-column: 1 / -1;
-	border: 1px solid var(--hairline);
-	border-radius: 7px;
-	background: #fcfcfc;
-}
-.monitor-advanced summary {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 14px 16px;
-	font-size: 13px;
-	font-weight: 500;
-	cursor: pointer;
-	list-style: none;
-}
-.monitor-advanced summary::-webkit-details-marker {
-	display: none;
-}
-.monitor-advanced summary svg {
-	width: 16px;
-	height: 16px;
-	transition: transform 160ms ease;
-}
-.monitor-advanced[open] summary svg {
-	transform: rotate(180deg);
-}
-.monitor-advanced-grid {
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	gap: 20px 16px;
-	padding: 2px 16px 18px;
-	border-top: 1px solid #ededed;
-}
-.monitor-advanced-grid > * {
-	margin-top: 16px;
-}
-.monitor-advanced-grid small,
-.advanced-section-heading small {
-	font-size: 11px;
-	line-height: 1.45;
-	color: var(--muted);
-}
-.advanced-keyword {
-	grid-column: span 2;
-}
-.advanced-inverted {
-	grid-column: span 1;
-}
-.advanced-latency {
-	grid-column: span 1;
-}
-.advanced-headers,
-.advanced-body {
-	grid-column: 1 / -1;
-}
-.advanced-section-heading {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 16px;
-}
-.advanced-section-heading > div {
-	display: grid;
-	gap: 3px;
-}
-.advanced-section-heading span {
-	font-size: 13px;
-	font-weight: 500;
-}
-.header-add-button {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	min-height: 32px;
-	padding: 6px 10px;
-}
-.header-add-button svg,
-.header-remove-button svg {
-	width: 14px;
-	height: 14px;
-}
-.header-rows {
-	display: grid;
-	gap: 8px;
-	margin-top: 10px;
-}
-.header-row {
-	display: grid;
-	grid-template-columns: minmax(130px, 1fr) minmax(180px, 2fr) 36px;
-	gap: 8px;
-}
-.header-remove-button {
-	width: 36px;
-	height: 36px;
-	color: #9f2f2f;
-}
-.advanced-body textarea {
-	width: 100%;
-	resize: vertical;
-	border: 1px solid var(--input);
-	border-radius: 6px;
-	padding: 10px 12px;
-	font:
-		12px/1.5 'IBM Plex Mono',
-		monospace;
-	color: var(--ink);
-	background: #fff;
-}
-.advanced-body textarea:focus-visible {
-	outline: 2px solid rgb(36 180 126 / 0.3);
-	outline-offset: 1px;
-}
 
-.services-panel {
-	margin-top: 24px;
-	border: 1px solid #dedede;
-	border-radius: 8px;
-	overflow: hidden;
-	background: #fff;
-}
 .panel-heading {
 	display: flex;
 	align-items: center;
@@ -599,285 +405,6 @@ button {
 .is-spinning {
 	animation: spin 900ms linear infinite;
 }
-.services-title,
-.service-row {
-	display: grid;
-	grid-template-columns: minmax(320px, 1.35fr) minmax(220px, 0.8fr) minmax(340px, 1fr);
-	align-items: center;
-	column-gap: 20px;
-}
-.services-title {
-	min-height: 40px;
-	padding: 0 20px;
-	border-bottom: 1px solid #e8e8e8;
-	font-size: 12px;
-	color: #888;
-	background: #fafafa;
-}
-.services-title span:last-child {
-	justify-self: start;
-}
-.service-row {
-	min-height: 112px;
-	padding: 18px 20px;
-	transition:
-		opacity 160ms ease,
-		background 160ms ease;
-}
-.service-row + .service-row {
-	border-top: 1px solid #ededed;
-}
-.service-row:hover {
-	background: #fdfdfd;
-}
-.service-row.is-disabled {
-	opacity: 0.55;
-	background: #fafafa;
-}
-.service-name {
-	display: flex;
-	align-items: center;
-	gap: 14px;
-	min-width: 0;
-}
-.service-name > div {
-	min-width: 0;
-}
-.service-icon {
-	display: grid;
-	place-items: center;
-	flex: 0 0 auto;
-	width: 40px;
-	height: 40px;
-	border: 1px solid #dedede;
-	border-radius: 6px;
-	color: #555;
-	background: #fafafa;
-}
-.service-icon svg {
-	width: 19px;
-	height: 19px;
-}
-.service-icon img {
-	width: 22px;
-	height: 22px;
-	border-radius: 4px;
-	object-fit: contain;
-}
-.service-name strong,
-.service-name small {
-	display: block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.service-name strong {
-	font-size: 15px;
-	font-weight: 500;
-}
-.monitor-name-link {
-	display: block;
-	max-width: 100%;
-	padding: 0;
-	overflow: hidden;
-	border: 0;
-	font-size: 15px;
-	font-weight: 500;
-	text-align: left;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	background: transparent;
-	cursor: pointer;
-}
-.monitor-name-link:hover {
-	color: #16885b;
-	text-decoration: underline;
-	text-underline-offset: 3px;
-}
-.service-name small {
-	margin-top: 4px;
-	font:
-		400 12px/1.4 'IBM Plex Mono',
-		monospace;
-	color: #888;
-}
-.monitor-meta {
-	display: block;
-	margin-top: 5px;
-	font-size: 12px;
-	color: #aaa;
-}
-.monitor-result {
-	display: grid;
-	justify-items: start;
-	gap: 6px;
-	min-width: 0;
-}
-.monitor-result code {
-	font:
-		400 12px/1.4 'IBM Plex Mono',
-		monospace;
-	color: #606060;
-}
-.monitor-result small {
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-size: 12px;
-	color: #999;
-}
-.row-status {
-	display: inline-flex;
-	align-items: center;
-	gap: 7px;
-	font-size: 12px;
-	font-weight: 500;
-	color: #777;
-}
-.row-status i {
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	background: #d05a5a;
-}
-.row-status.online {
-	color: #16885b;
-}
-.row-status.online i {
-	background: var(--primary-deep);
-	box-shadow: 0 0 0 3px rgb(62 207 142 / 0.12);
-}
-.row-status.offline {
-	color: #ae3d3d;
-}
-.row-status.pending {
-	color: #8a5a1f;
-}
-.row-status.pending i {
-	background: #e0913f;
-}
-.row-status.checking {
-	color: #8b7722;
-}
-.row-status.checking i {
-	background: #d7bd53;
-	animation: blink 1.1s ease-in-out infinite;
-}
-.row-actions {
-	display: grid;
-	grid-template-columns: auto auto repeat(3, 38px);
-	justify-content: space-between;
-	justify-self: stretch;
-	width: 100%;
-	gap: 4px;
-}
-.row-action {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: 6px;
-	min-width: 0;
-	min-height: 38px;
-	padding: 7px 12px;
-	border: 1px solid transparent;
-	border-radius: 6px;
-	font-size: 12px;
-	font-weight: 500;
-	line-height: 1;
-	color: #626262;
-	background: transparent;
-	cursor: pointer;
-	white-space: nowrap;
-	transition:
-		color 140ms ease,
-		background 140ms ease,
-		box-shadow 140ms ease,
-		transform 140ms ease;
-}
-.row-action svg {
-	flex: 0 0 auto;
-	width: 15px;
-	height: 15px;
-	stroke-width: 1.8;
-}
-.row-action-icon {
-	width: 38px;
-	padding: 0;
-}
-.row-action:hover:not(:disabled) {
-	border-color: #e1e1e1;
-	color: #222;
-	background: #f8f8f8;
-}
-.row-action:active:not(:disabled) {
-	transform: translateY(1px);
-	box-shadow: none;
-}
-.row-action:disabled {
-	cursor: wait;
-	opacity: 0.48;
-}
-.row-action-accent {
-	color: #11764e;
-	background: #eef9f4;
-}
-.row-action-accent:hover:not(:disabled) {
-	border-color: #c9eadb;
-	color: #0d6542;
-	background: #e4f6ed;
-}
-.row-actions .danger-action {
-	color: #a33d3d;
-}
-.row-actions .danger-action:hover:not(:disabled) {
-	border-color: #efd1d1;
-	color: #922f2f;
-	background: #fff2f2;
-}
-
-.monitor-skeleton > div {
-	display: grid;
-	grid-template-columns: 40px 1fr 180px;
-	align-items: center;
-	gap: 16px;
-	min-height: 104px;
-	padding: 18px 20px;
-}
-.monitor-skeleton > div + div {
-	border-top: 1px solid #ededed;
-}
-.monitor-skeleton i,
-.monitor-skeleton span,
-.monitor-skeleton b {
-	display: block;
-	border-radius: 5px;
-	background: linear-gradient(90deg, #f1f1f1 20%, #f8f8f8 50%, #f1f1f1 80%);
-	background-size: 220% 100%;
-	animation: skeleton 1.4s ease-in-out infinite;
-}
-.monitor-skeleton i {
-	width: 40px;
-	height: 40px;
-}
-.monitor-skeleton span {
-	width: min(360px, 80%);
-	height: 32px;
-}
-.monitor-skeleton b {
-	width: 180px;
-	height: 32px;
-}
-.dashboard-page-footer {
-	display: flex;
-	justify-content: space-between;
-	width: min(1280px, calc(100% - 48px));
-	margin: 0 auto;
-	padding: 24px 0 32px;
-	border-top: 1px solid #ededed;
-	font-size: 12px;
-	color: #999;
-}
 
 .detail-main {
 	padding-top: 34px;
@@ -1999,46 +1526,12 @@ button {
 }
 
 @media (max-width: 1000px) {
-	.monitor-form {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	.field-name,
-	.field-url {
-		grid-column: span 1;
-	}
 	.form-actions {
 		grid-column: span 1;
 	}
 	.form-actions.compact-actions {
 		grid-column: span 2;
 	}
-	.services-title {
-		display: none;
-	}
-	.service-row {
-		grid-template-columns: minmax(280px, 1fr) minmax(200px, 0.7fr);
-	}
-	.row-actions {
-		display: flex;
-		grid-column: 1 / -1;
-		align-items: center;
-		justify-content: flex-end;
-		justify-self: stretch;
-		gap: 4px;
-		width: calc(100% + 40px);
-		max-width: none;
-		margin: 4px -20px -18px;
-		padding: 12px 20px 12px 74px;
-		border-top: 1px solid #ededed;
-		background: linear-gradient(90deg, #fcfcfc, #fff);
-	}
-	.row-actions::before {
-		margin-right: auto;
-		font-size: 11px;
-		font-weight: 500;
-		color: #999;
-		content: 'Actions';
-	}
 	.sla-grid {
 		grid-template-columns: repeat(3, 1fr);
 	}
@@ -2050,8 +1543,7 @@ button {
 
 @media (max-width: 760px) {
 	.dashboard-header-inner,
-	.dashboard-main,
-	.dashboard-page-footer {
+	.dashboard-main {
 		width: min(100% - 32px, 1280px);
 	}
 	.status-header-inner,
@@ -2062,30 +1554,6 @@ button {
 	.dashboard-main {
 		padding: 40px 0 56px;
 	}
-	.dashboard-intro {
-		align-items: flex-start;
-		flex-direction: column;
-	}
-	.dashboard-intro h1 {
-		font-size: 34px;
-	}
-	.metric-grid {
-		grid-template-columns: 1fr;
-		gap: 10px;
-		margin-top: 28px;
-	}
-	.metric-card {
-		min-height: auto;
-		padding: 20px;
-	}
-	.metric-card p {
-		margin-bottom: 12px;
-	}
-	.monitor-form {
-		grid-template-columns: 1fr;
-	}
-	.field-name,
-	.field-url,
 	.form-actions {
 		grid-column: auto;
 	}
@@ -2098,17 +1566,6 @@ button {
 	.form-actions button {
 		flex: 1;
 	}
-	.service-row {
-		grid-template-columns: 1fr;
-		gap: 18px;
-	}
-	.row-actions {
-		grid-column: auto;
-	}
-	.dashboard-page-footer {
-		flex-direction: column;
-		gap: 8px;
-	}
 	.detail-hero {
 		align-items: flex-start;
 		flex-direction: column;
@@ -2293,283 +1750,6 @@ button {
 	}
 }
 
-.incidents-panel {
-	margin-top: 24px;
-}
-.incidents-empty,
-.dashboard-incident-list article,
-.panel-heading {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 20px;
-}
-.incidents-empty {
-	justify-content: flex-start;
-	padding: 28px;
-	color: var(--muted-foreground);
-	font-size: 16px;
-	line-height: 1.45;
-}
-.dashboard-incident-list article {
-	padding: 18px 22px;
-	border-top: 1px solid var(--border);
-}
-.dashboard-incident-list article > div {
-	display: grid;
-	gap: 4px;
-	flex: 1;
-}
-.dashboard-incident-list button:first-child,
-.active-incident-service button {
-	border: 0;
-	padding: 0;
-	background: transparent;
-	color: inherit;
-	text-align: left;
-	cursor: pointer;
-}
-.incident-dialog [data-slot='dialog-header'] {
-	gap: 5px;
-	padding-right: 36px;
-	padding-bottom: 18px;
-	border-bottom: 1px solid var(--border);
-}
-.incident-dialog [data-slot='dialog-header'] .overline {
-	margin-bottom: 3px;
-}
-.incident-dialog [data-slot='dialog-title'] {
-	font-size: 19px;
-	line-height: 1.25;
-}
-.incident-form {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr);
-	gap: 20px;
-}
-.incident-form > * {
-	grid-column: 1;
-}
-.incident-form-grid {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
-	gap: 16px;
-}
-.incident-title-field {
-	min-width: 0;
-}
-.incident-select-option {
-	display: inline-flex;
-	min-width: 0;
-	align-items: center;
-	gap: 8px;
-	text-transform: capitalize;
-}
-.incident-select-icon {
-	display: inline-flex;
-	width: 22px;
-	height: 22px;
-	flex: 0 0 22px;
-	align-items: center;
-	justify-content: center;
-	border-radius: 5px;
-}
-.incident-select-icon svg {
-	width: 13px;
-	height: 13px;
-	stroke-width: 2;
-}
-.incident-select-icon-blue {
-	color: #2563a8;
-	background: #eaf3ff;
-}
-.incident-select-icon-violet {
-	color: #6d4bad;
-	background: #f1ecfb;
-}
-.incident-select-icon-amber {
-	color: #9a6700;
-	background: #fff5d6;
-}
-.incident-select-icon-green {
-	color: #17865b;
-	background: #e5f7ef;
-}
-.incident-select-icon-neutral {
-	color: #666;
-	background: #eeeeee;
-}
-.incident-select-icon-yellow {
-	color: #8a6500;
-	background: #fff5c2;
-}
-.incident-select-icon-orange {
-	color: #b45309;
-	background: #ffedd5;
-}
-.incident-select-icon-red {
-	color: #b42318;
-	background: #fee9e7;
-}
-.incident-form textarea {
-	min-height: 138px;
-	width: 100%;
-	resize: vertical;
-	border: 1px solid var(--border);
-	border-radius: 6px;
-	padding: 12px 14px;
-	background: var(--background);
-	color: var(--foreground);
-	font: inherit;
-	line-height: 1.5;
-	outline: none;
-	transition:
-		border-color 160ms ease,
-		box-shadow 160ms ease;
-}
-.incident-form textarea::placeholder {
-	color: var(--faint);
-}
-.incident-form textarea:hover {
-	border-color: #aaa;
-}
-.incident-form textarea:focus-visible {
-	border-color: var(--primary-deep);
-	box-shadow: 0 0 0 3px rgb(36 180 126 / 0.14);
-}
-.incident-service-picker {
-	min-width: 0;
-	border: 0;
-	padding: 0;
-}
-.incident-service-picker legend {
-	margin-bottom: 8px;
-	font-size: 13px;
-	font-weight: 500;
-	color: #353535;
-}
-.incident-service-picker legend small,
-.ai-compose-pane-header small {
-	margin-left: 6px;
-	font-size: 11px;
-	font-weight: 400;
-	color: var(--muted-foreground);
-}
-.incident-service-options {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-	max-height: 104px;
-	overflow-y: auto;
-	padding: 10px;
-	border: 1px solid var(--border);
-	border-radius: 6px;
-	background: #fafafa;
-}
-.incident-service-options label {
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-	min-height: 32px;
-	padding: 5px 10px;
-	border: 1px solid #dedede;
-	border-radius: 6px;
-	font-size: 13px;
-	color: #444;
-	background: #fff;
-	cursor: pointer;
-	transition:
-		border-color 160ms ease,
-		background 160ms ease;
-}
-.incident-service-options label:hover {
-	border-color: #bcbcbc;
-	background: #fdfdfd;
-}
-.incident-service-options label:has(input:checked) {
-	border-color: #8dd9b9;
-	background: rgb(62 207 142 / 0.09);
-}
-.incident-service-options input {
-	width: 14px;
-	height: 14px;
-	accent-color: var(--primary-deep);
-}
-.ai-compose-field {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 16px;
-}
-.ai-compose-pane {
-	display: flex;
-	min-width: 0;
-	flex-direction: column;
-	gap: 8px;
-}
-.ai-compose-pane-header {
-	display: flex;
-	align-items: baseline;
-	justify-content: space-between;
-	gap: 10px;
-}
-.ai-compose-pane-header label {
-	font-size: 13px;
-	font-weight: 500;
-	color: #353535;
-}
-.ai-compose-pane-header small {
-	margin-left: 0;
-	white-space: nowrap;
-}
-.ai-compose-button {
-	align-self: flex-start;
-	min-height: 36px;
-	margin-top: 2px;
-	padding-block: 6px;
-}
-.ai-compose-hint {
-	margin: 2px 0 0;
-	font-size: 13px;
-	color: var(--muted-foreground);
-}
-.ai-compose-hint button {
-	border: 0;
-	background: transparent;
-	color: var(--primary);
-	text-decoration: underline;
-	cursor: pointer;
-}
-.incident-form > .form-actions {
-	align-items: center;
-	margin-top: 2px;
-	padding: 0;
-	border: 0;
-	background: transparent;
-}
-.incident-form > .form-actions button {
-	min-height: 40px;
-	padding-inline: 18px;
-}
-.incident-form > .form-actions .secondary-button {
-	border-color: #d4d4d4;
-	color: #444;
-	background: #fff;
-	box-shadow:
-		0 1px 2px rgb(0 0 0 / 0.05),
-		inset 0 1px rgb(255 255 255 / 0.7);
-}
-.incident-form > .form-actions .secondary-button:hover:not(:disabled) {
-	border-color: #aaa;
-	color: var(--foreground);
-	background: #f5f5f5;
-}
-.incident-form > .form-actions .primary-button {
-	min-width: 148px;
-	box-shadow:
-		0 1px 2px rgb(0 0 0 / 0.08),
-		inset 0 1px rgb(255 255 255 / 0.28);
-}
-
 .incident-detail-link {
 	display: inline-flex;
 	align-items: center;
@@ -2582,43 +1762,11 @@ button {
 }
 
 @media (max-width: 640px) {
-	.incident-dialog {
-		padding: 22px;
-	}
-	.dashboard-incident-list article,
 	.panel-heading {
 		grid-template-columns: 1fr;
 		align-items: stretch;
 		flex-direction: column;
 	}
-	.incident-form-grid {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-	.incident-title-field {
-		grid-column: 1 / -1;
-	}
-	.ai-compose-field {
-		grid-template-columns: 1fr;
-	}
-}
-
-@media (max-width: 440px) {
-	.incident-form-grid {
-		grid-template-columns: 1fr;
-	}
-	.incident-title-field {
-		grid-column: auto;
-	}
-	.incident-form > .form-actions {
-		gap: 8px;
-	}
-	.incident-form > .form-actions button {
-		flex: 1;
-		padding-inline: 12px;
-	}
-	.incident-form > .form-actions .primary-button {
-		min-width: 0;
-	}
 }
 
 @theme inline {
diff --git a/src/client/styles/DashboardPage.css b/src/client/styles/DashboardPage.css
new file mode 100644
index 0000000..9d7c1d7
--- /dev/null
+++ b/src/client/styles/DashboardPage.css
@@ -0,0 +1,1881 @@
+/* ==========================================================================
+   Dashboard Page Styles (Light & Dark Theme)
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Dashboard Intro & Overview
+   -------------------------------------------------------------------------- */
+
+.dashboard-intro {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 32px;
+}
+.dashboard-intro h1 {
+	margin: 0;
+	font-size: 40px;
+	font-weight: 500;
+	line-height: 1.1;
+	letter-spacing: -1.5px;
+}
+.dashboard-intro > div > p:last-child {
+	margin: 12px 0 0;
+	font-size: 19px;
+	line-height: 1.55;
+	color: var(--muted);
+}
+
+.metric-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 16px;
+	margin-top: 40px;
+}
+.metric-card {
+	min-height: 142px;
+	padding: 24px;
+	border: 1px solid #e3e3e3;
+	border-radius: 8px;
+	background: #fff;
+}
+.metric-card p {
+	margin: 0 0 20px;
+	font-size: 13px;
+	color: var(--muted);
+}
+.metric-card strong {
+	display: block;
+	font-size: 32px;
+	font-weight: 500;
+	line-height: 1;
+	letter-spacing: -1px;
+}
+.metric-card span {
+	display: block;
+	margin-top: 10px;
+	font-size: 13px;
+	color: var(--faint);
+}
+
+/* --------------------------------------------------------------------------
+   Configured Sites / Services Panel & Table
+   -------------------------------------------------------------------------- */
+
+.services-panel {
+	margin-top: 24px;
+	border: 1px solid #dedede;
+	border-radius: 8px;
+	overflow: hidden;
+	background: #fff;
+}
+.services-title,
+.service-row {
+	display: grid;
+	grid-template-columns: minmax(320px, 1.35fr) minmax(220px, 0.8fr) minmax(340px, 1fr);
+	align-items: center;
+	column-gap: 20px;
+}
+.services-title {
+	min-height: 40px;
+	padding: 0 20px;
+	border-bottom: 1px solid #e8e8e8;
+	font-size: 12px;
+	color: #888;
+	background: #fafafa;
+}
+.services-title span:last-child {
+	justify-self: start;
+}
+.service-row {
+	min-height: 112px;
+	padding: 18px 20px;
+	transition:
+		opacity 160ms ease,
+		background 160ms ease;
+}
+.service-row + .service-row {
+	border-top: 1px solid #ededed;
+}
+.service-row:hover {
+	background: #fdfdfd;
+}
+.service-row.is-disabled {
+	opacity: 0.55;
+	background: #fafafa;
+}
+.service-name {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	min-width: 0;
+}
+.service-name > div {
+	min-width: 0;
+}
+.service-name strong,
+.service-name small {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.service-name strong {
+	font-size: 15px;
+	font-weight: 500;
+}
+.monitor-name-link {
+	display: block;
+	max-width: 100%;
+	padding: 0;
+	overflow: hidden;
+	border: 0;
+	font-size: 15px;
+	font-weight: 500;
+	text-align: left;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	background: transparent;
+	cursor: pointer;
+}
+.monitor-name-link:hover {
+	color: #16885b;
+	text-decoration: underline;
+	text-underline-offset: 3px;
+}
+.service-name small {
+	margin-top: 4px;
+	font:
+		400 12px/1.4 'IBM Plex Mono',
+		monospace;
+	color: #888;
+}
+.monitor-meta {
+	display: block;
+	margin-top: 5px;
+	font-size: 12px;
+	color: #aaa;
+}
+.monitor-result {
+	display: grid;
+	justify-items: start;
+	gap: 6px;
+	min-width: 0;
+}
+.monitor-result code {
+	font:
+		400 12px/1.4 'IBM Plex Mono',
+		monospace;
+	color: #606060;
+}
+.monitor-result small {
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 12px;
+	color: #999;
+}
+.row-status {
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	font-size: 12px;
+	font-weight: 500;
+	color: #777;
+}
+.row-status i {
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background: #d05a5a;
+}
+.row-status.online {
+	color: #16885b;
+}
+.row-status.online i {
+	background: var(--primary-deep);
+	box-shadow: 0 0 0 3px rgb(62 207 142 / 0.12);
+}
+.row-status.offline {
+	color: #ae3d3d;
+}
+.row-status.pending {
+	color: #8a5a1f;
+}
+.row-status.pending i {
+	background: #e0913f;
+}
+.row-status.checking {
+	color: #8b7722;
+}
+.row-status.checking i {
+	background: #d7bd53;
+	animation: blink 1.1s ease-in-out infinite;
+}
+.row-actions {
+	display: grid;
+	grid-template-columns: auto auto repeat(3, 38px);
+	justify-content: space-between;
+	justify-self: stretch;
+	width: 100%;
+	gap: 4px;
+}
+.row-action {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	min-width: 0;
+	min-height: 38px;
+	padding: 7px 12px;
+	border: 1px solid transparent;
+	border-radius: 6px;
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 1;
+	color: #626262;
+	background: transparent;
+	cursor: pointer;
+	white-space: nowrap;
+	transition:
+		color 140ms ease,
+		background 140ms ease,
+		box-shadow 140ms ease,
+		transform 140ms ease;
+}
+.row-action svg {
+	flex: 0 0 auto;
+	width: 15px;
+	height: 15px;
+	stroke-width: 1.8;
+}
+.row-action-icon {
+	width: 38px;
+	padding: 0;
+}
+.row-action:hover:not(:disabled) {
+	border-color: #e1e1e1;
+	color: #222;
+	background: #f8f8f8;
+}
+.row-action:active:not(:disabled) {
+	transform: translateY(1px);
+	box-shadow: none;
+}
+.row-action:disabled {
+	cursor: wait;
+	opacity: 0.48;
+}
+.row-action-accent {
+	color: #11764e;
+	background: #eef9f4;
+}
+.row-action-accent:hover:not(:disabled) {
+	border-color: #c9eadb;
+	color: #0d6542;
+	background: #e4f6ed;
+}
+.row-actions .danger-action {
+	color: #a33d3d;
+}
+.row-actions .danger-action:hover:not(:disabled) {
+	border-color: #efd1d1;
+	color: #922f2f;
+	background: #fff2f2;
+}
+
+.monitor-skeleton > div {
+	display: grid;
+	grid-template-columns: 40px 1fr 180px;
+	align-items: center;
+	gap: 16px;
+	min-height: 104px;
+	padding: 18px 20px;
+}
+.monitor-skeleton > div + div {
+	border-top: 1px solid #ededed;
+}
+.monitor-skeleton i,
+.monitor-skeleton span,
+.monitor-skeleton b {
+	display: block;
+	border-radius: 5px;
+	background: linear-gradient(90deg, #f1f1f1 20%, #f8f8f8 50%, #f1f1f1 80%);
+	background-size: 220% 100%;
+	animation: skeleton 1.4s ease-in-out infinite;
+}
+.monitor-skeleton i {
+	width: 40px;
+	height: 40px;
+}
+.monitor-skeleton span {
+	width: min(360px, 80%);
+	height: 32px;
+}
+.monitor-skeleton b {
+	width: 180px;
+	height: 32px;
+}
+
+/* --------------------------------------------------------------------------
+   Monitor Form Dialog (Create / Edit)
+   -------------------------------------------------------------------------- */
+
+.monitor-form {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 20px 16px;
+	margin-top: 24px;
+}
+.field-name {
+	grid-column: span 1;
+}
+.field-url {
+	grid-column: span 3;
+}
+.toggle-field {
+	display: flex;
+	align-items: center;
+	gap: 9px;
+	align-self: end;
+	min-height: 42px;
+	font-size: 13px;
+	color: #444;
+}
+.toggle-field label {
+	cursor: pointer;
+}
+.monitor-advanced {
+	grid-column: 1 / -1;
+	border: 1px solid var(--hairline);
+	border-radius: 7px;
+	background: #fcfcfc;
+}
+.monitor-advanced summary {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 14px 16px;
+	font-size: 13px;
+	font-weight: 500;
+	cursor: pointer;
+	list-style: none;
+}
+.monitor-advanced summary::-webkit-details-marker {
+	display: none;
+}
+.monitor-advanced summary svg {
+	width: 16px;
+	height: 16px;
+	transition: transform 160ms ease;
+}
+.monitor-advanced[open] summary svg {
+	transform: rotate(180deg);
+}
+.monitor-advanced-grid {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 20px 16px;
+	padding: 2px 16px 18px;
+	border-top: 1px solid #ededed;
+}
+.monitor-advanced-grid > * {
+	margin-top: 16px;
+}
+.monitor-advanced-grid small,
+.advanced-section-heading small {
+	font-size: 11px;
+	line-height: 1.45;
+	color: var(--muted);
+}
+.advanced-keyword {
+	grid-column: span 2;
+}
+.advanced-inverted {
+	grid-column: span 1;
+}
+.advanced-latency {
+	grid-column: span 1;
+}
+.advanced-headers,
+.advanced-body {
+	grid-column: 1 / -1;
+}
+.advanced-section-heading {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+}
+.advanced-section-heading > div {
+	display: grid;
+	gap: 3px;
+}
+.advanced-section-heading span {
+	font-size: 13px;
+	font-weight: 500;
+}
+.header-add-button {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	min-height: 32px;
+	padding: 6px 10px;
+}
+.header-add-button svg,
+.header-remove-button svg {
+	width: 14px;
+	height: 14px;
+}
+.header-rows {
+	display: grid;
+	gap: 8px;
+	margin-top: 10px;
+}
+.header-row {
+	display: grid;
+	grid-template-columns: minmax(130px, 1fr) minmax(180px, 2fr) 36px;
+	gap: 8px;
+}
+.header-remove-button {
+	width: 36px;
+	height: 36px;
+	color: #9f2f2f;
+}
+.advanced-body textarea {
+	width: 100%;
+	resize: vertical;
+	border: 1px solid var(--input);
+	border-radius: 6px;
+	padding: 10px 12px;
+	font:
+		12px/1.5 'IBM Plex Mono',
+		monospace;
+	color: var(--ink);
+	background: #fff;
+}
+.advanced-body textarea:focus-visible {
+	outline: 2px solid rgb(36 180 126 / 0.3);
+	outline-offset: 1px;
+}
+
+/* --------------------------------------------------------------------------
+   Incidents Panel & Incident Dialogs
+   -------------------------------------------------------------------------- */
+
+.incidents-panel {
+	margin-top: 24px;
+}
+.incidents-empty,
+.dashboard-incident-list article {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 20px;
+}
+.incidents-empty {
+	justify-content: flex-start;
+	padding: 28px;
+	color: var(--muted-foreground);
+	font-size: 16px;
+	line-height: 1.45;
+}
+.dashboard-incident-list article {
+	padding: 18px 22px;
+	border-top: 1px solid var(--border);
+}
+.dashboard-incident-list article > div {
+	display: grid;
+	gap: 4px;
+	flex: 1;
+}
+.dashboard-incident-list button:first-child {
+	border: 0;
+	padding: 0;
+	background: transparent;
+	color: inherit;
+	text-align: left;
+	cursor: pointer;
+}
+.incident-dialog [data-slot='dialog-header'] {
+	gap: 5px;
+	padding-right: 36px;
+	padding-bottom: 18px;
+	border-bottom: 1px solid var(--border);
+}
+.incident-dialog [data-slot='dialog-header'] .overline {
+	margin-bottom: 3px;
+}
+.incident-dialog [data-slot='dialog-title'] {
+	font-size: 19px;
+	line-height: 1.25;
+}
+.incident-form {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 20px;
+}
+.incident-form > * {
+	grid-column: 1;
+}
+.incident-form-grid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
+	gap: 16px;
+}
+.incident-title-field {
+	min-width: 0;
+}
+.incident-select-option {
+	display: inline-flex;
+	min-width: 0;
+	align-items: center;
+	gap: 8px;
+	text-transform: capitalize;
+}
+.incident-select-icon {
+	display: inline-flex;
+	width: 22px;
+	height: 22px;
+	flex: 0 0 22px;
+	align-items: center;
+	justify-content: center;
+	border-radius: 5px;
+}
+.incident-select-icon svg {
+	width: 13px;
+	height: 13px;
+	stroke-width: 2;
+}
+.incident-select-icon-blue {
+	color: #2563a8;
+	background: #eaf3ff;
+}
+.incident-select-icon-violet {
+	color: #6d4bad;
+	background: #f1ecfb;
+}
+.incident-select-icon-amber {
+	color: #9a6700;
+	background: #fff5d6;
+}
+.incident-select-icon-green {
+	color: #17865b;
+	background: #e5f7ef;
+}
+.incident-select-icon-neutral {
+	color: #666;
+	background: #eeeeee;
+}
+.incident-select-icon-yellow {
+	color: #8a6500;
+	background: #fff5c2;
+}
+.incident-select-icon-orange {
+	color: #b45309;
+	background: #ffedd5;
+}
+.incident-select-icon-red {
+	color: #b42318;
+	background: #fee9e7;
+}
+.incident-form textarea {
+	min-height: 138px;
+	width: 100%;
+	resize: vertical;
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	padding: 12px 14px;
+	background: var(--background);
+	color: var(--foreground);
+	font: inherit;
+	line-height: 1.5;
+	outline: none;
+	transition:
+		border-color 160ms ease,
+		box-shadow 160ms ease;
+}
+.incident-form textarea::placeholder {
+	color: var(--faint);
+}
+.incident-form textarea:hover {
+	border-color: #aaa;
+}
+.incident-form textarea:focus-visible {
+	border-color: var(--primary-deep);
+	box-shadow: 0 0 0 3px rgb(36 180 126 / 0.14);
+}
+.incident-service-picker {
+	min-width: 0;
+	border: 0;
+	padding: 0;
+}
+.incident-service-picker legend {
+	margin-bottom: 8px;
+	font-size: 13px;
+	font-weight: 500;
+	color: #353535;
+}
+.incident-service-picker legend small,
+.ai-compose-pane-header small {
+	margin-left: 6px;
+	font-size: 11px;
+	font-weight: 400;
+	color: var(--muted-foreground);
+}
+.incident-service-options {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	max-height: 104px;
+	overflow-y: auto;
+	padding: 10px;
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	background: #fafafa;
+}
+.incident-service-options label {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	min-height: 32px;
+	padding: 5px 10px;
+	border: 1px solid #dedede;
+	border-radius: 6px;
+	font-size: 13px;
+	color: #444;
+	background: #fff;
+	cursor: pointer;
+	transition:
+		border-color 160ms ease,
+		background 160ms ease;
+}
+.incident-service-options label:hover {
+	border-color: #bcbcbc;
+	background: #fdfdfd;
+}
+.incident-service-options label:has(input:checked) {
+	border-color: #8dd9b9;
+	background: rgb(62 207 142 / 0.09);
+}
+.incident-service-options input {
+	width: 14px;
+	height: 14px;
+	accent-color: var(--primary-deep);
+}
+.ai-compose-field {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 16px;
+}
+.ai-compose-pane {
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+	gap: 8px;
+}
+.ai-compose-pane-header {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 10px;
+}
+.ai-compose-pane-header label {
+	font-size: 13px;
+	font-weight: 500;
+	color: #353535;
+}
+.ai-compose-pane-header small {
+	margin-left: 0;
+	white-space: nowrap;
+}
+.ai-compose-button {
+	align-self: flex-start;
+	min-height: 36px;
+	margin-top: 2px;
+	padding-block: 6px;
+}
+.ai-compose-hint {
+	margin: 2px 0 0;
+	font-size: 13px;
+	color: var(--muted-foreground);
+}
+.ai-compose-hint button {
+	border: 0;
+	background: transparent;
+	color: var(--primary);
+	text-decoration: underline;
+	cursor: pointer;
+}
+.incident-form > .form-actions {
+	align-items: center;
+	margin-top: 2px;
+	padding: 0;
+	border: 0;
+	background: transparent;
+}
+.incident-form > .form-actions button {
+	min-height: 40px;
+	padding-inline: 18px;
+}
+.incident-form > .form-actions .secondary-button {
+	border-color: #d4d4d4;
+	color: #444;
+	background: #fff;
+	box-shadow:
+		0 1px 2px rgb(0 0 0 / 0.05),
+		inset 0 1px rgb(255 255 255 / 0.7);
+}
+.incident-form > .form-actions .secondary-button:hover:not(:disabled) {
+	border-color: #aaa;
+	color: var(--foreground);
+	background: #f5f5f5;
+}
+.incident-form > .form-actions .primary-button {
+	min-width: 148px;
+	box-shadow:
+		0 1px 2px rgb(0 0 0 / 0.08),
+		inset 0 1px rgb(255 255 255 / 0.28);
+}
+
+/* --------------------------------------------------------------------------
+   Dashboard Page Footer
+   -------------------------------------------------------------------------- */
+
+.dashboard-page-footer {
+	display: flex;
+	justify-content: space-between;
+	width: min(1280px, calc(100% - 48px));
+	margin: 0 auto;
+	padding: 24px 0 32px;
+	border-top: 1px solid #ededed;
+	font-size: 12px;
+	color: #999;
+}
+
+/* --------------------------------------------------------------------------
+   Responsive Layout for Dashboard
+   -------------------------------------------------------------------------- */
+
+@media (max-width: 1000px) {
+	.monitor-form {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.field-name,
+	.field-url {
+		grid-column: span 1;
+	}
+	.services-title {
+		display: none;
+	}
+	.service-row {
+		grid-template-columns: minmax(280px, 1fr) minmax(200px, 0.7fr);
+	}
+	.row-actions {
+		display: flex;
+		grid-column: 1 / -1;
+		align-items: center;
+		justify-content: flex-end;
+		justify-self: stretch;
+		gap: 4px;
+		width: calc(100% + 40px);
+		max-width: none;
+		margin: 4px -20px -18px;
+		padding: 12px 20px 12px 74px;
+		border-top: 1px solid #ededed;
+		background: linear-gradient(90deg, #fcfcfc, #fff);
+	}
+	.row-actions::before {
+		margin-right: auto;
+		font-size: 11px;
+		font-weight: 500;
+		color: #999;
+		content: 'Actions';
+	}
+}
+
+@media (max-width: 760px) {
+	.dashboard-page-footer {
+		width: min(100% - 32px, 1280px);
+		flex-direction: column;
+		gap: 8px;
+	}
+	.dashboard-intro {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+	.dashboard-intro h1 {
+		font-size: 34px;
+	}
+	.metric-grid {
+		grid-template-columns: 1fr;
+		gap: 10px;
+		margin-top: 28px;
+	}
+	.metric-card {
+		min-height: auto;
+		padding: 20px;
+	}
+	.metric-card p {
+		margin-bottom: 12px;
+	}
+	.monitor-form {
+		grid-template-columns: 1fr;
+	}
+	.field-name,
+	.field-url {
+		grid-column: auto;
+	}
+	.service-row {
+		grid-template-columns: 1fr;
+		gap: 18px;
+	}
+	.row-actions {
+		grid-column: auto;
+	}
+}
+
+@media (max-width: 640px) {
+	.incident-dialog {
+		padding: 22px;
+	}
+	.dashboard-incident-list article {
+		grid-template-columns: 1fr;
+		align-items: stretch;
+		flex-direction: column;
+	}
+	.incident-form-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+	.incident-title-field {
+		grid-column: 1 / -1;
+	}
+	.ai-compose-field {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (max-width: 520px) {
+	.dashboard-intro > div > p:last-child {
+		font-size: 19px;
+		line-height: 1.5;
+	}
+	.service-row {
+		padding: 18px 16px;
+	}
+	.row-actions {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) repeat(3, 40px);
+		justify-content: space-between;
+		justify-self: stretch;
+		width: 100%;
+		max-width: none;
+		margin: 0;
+		padding: 3px;
+		border: 1px solid #dedede;
+		border-radius: 9px;
+		background: #f8f8f8;
+		box-shadow: 0 1px 2px rgb(0 0 0 / 0.035);
+	}
+	.row-actions::before {
+		display: none;
+	}
+	.row-action {
+		min-height: 40px;
+	}
+	.row-action-icon {
+		width: 40px;
+	}
+}
+
+@media (max-width: 440px) {
+	.incident-form-grid {
+		grid-template-columns: 1fr;
+	}
+	.incident-title-field {
+		grid-column: auto;
+	}
+	.incident-form > .form-actions {
+		gap: 8px;
+	}
+	.incident-form > .form-actions button {
+		flex: 1;
+		padding-inline: 12px;
+	}
+	.incident-form > .form-actions .primary-button {
+		min-width: 0;
+	}
+}
+
+@media (max-width: 380px) {
+	.row-action-labeled svg {
+		display: none;
+	}
+}
+
+/* ==========================================================================
+   Dashboard Page (Dark Theme)
+   ========================================================================== */
+
+/* Shell & Header */
+.dark .dashboard-shell {
+	background:
+		radial-gradient(ellipse 80% 50% at 50% -20%, rgba(62, 207, 142, 0.06), transparent 70%),
+		linear-gradient(180deg, #090a0c 0%, #0c0e12 68px, #08090b 68px, #08090b 100%);
+	color: #ededed;
+}
+
+.dark .dashboard-header {
+	border-bottom-color: rgba(255, 255, 255, 0.08);
+	background: rgba(9, 10, 12, 0.88);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+}
+
+.dark .brand {
+	color: #f9fafb;
+}
+
+.dark .header-context {
+	border-right-color: rgba(255, 255, 255, 0.1);
+	color: #9ca3af;
+}
+
+.dark .app-nav-icon {
+	color: #9ca3af;
+}
+
+.dark .app-nav-icon:hover:not(:disabled),
+.dark .app-nav-icon[aria-current='page'] {
+	background: rgba(62, 207, 142, 0.12);
+	color: #3ecf8e;
+}
+
+/* Mobile Drawer */
+.dark .app-nav-sheet {
+	background: #101216;
+	border-left-color: rgba(255, 255, 255, 0.08);
+}
+
+.dark .app-nav-sheet-header {
+	border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.dark .app-nav-sheet-title {
+	color: #f9fafb;
+}
+
+.dark .app-nav-mobile-item {
+	color: #d1d5db;
+}
+
+.dark .app-nav-mobile-item:hover:not(:disabled),
+.dark .app-nav-mobile-item[aria-current='page'] {
+	color: #3ecf8e;
+	background: rgba(62, 207, 142, 0.12);
+}
+
+/* Intro & Overline */
+.dark .overline {
+	color: #4ade80;
+}
+
+.dark .dashboard-intro h1 {
+	color: #f9fafb;
+}
+
+.dark .dashboard-intro > div > p:last-child {
+	color: #9ca3af;
+}
+
+/* Common Buttons */
+.dark .primary-button {
+	border-color: #24b47e;
+	color: #090a0c;
+	background: #3ecf8e;
+	box-shadow:
+		0 1px 3px rgba(0, 0, 0, 0.4),
+		0 0 16px rgba(62, 207, 142, 0.2),
+		inset 0 1px rgba(255, 255, 255, 0.25);
+}
+
+.dark .primary-button:hover:not(:disabled) {
+	background: #4ade80;
+	box-shadow:
+		0 2px 8px rgba(0, 0, 0, 0.5),
+		0 0 20px rgba(62, 207, 142, 0.35);
+}
+
+.dark .secondary-button {
+	border-color: rgba(255, 255, 255, 0.12);
+	color: #e5e7eb;
+	background: rgba(255, 255, 255, 0.04);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.dark .secondary-button:hover:not(:disabled) {
+	border-color: rgba(255, 255, 255, 0.22);
+	color: #ffffff;
+	background: rgba(255, 255, 255, 0.08);
+}
+
+.dark .danger-button {
+	border-color: rgba(239, 68, 68, 0.35);
+	color: #fca5a5;
+	background: rgba(239, 68, 68, 0.1);
+}
+
+.dark .danger-button:hover:not(:disabled) {
+	border-color: rgba(239, 68, 68, 0.5);
+	color: #fecaca;
+	background: rgba(239, 68, 68, 0.18);
+}
+
+.dark .icon-button {
+	border-color: rgba(255, 255, 255, 0.12);
+	color: #9ca3af;
+	background: rgba(255, 255, 255, 0.04);
+}
+
+.dark .icon-button:hover:not(:disabled) {
+	border-color: rgba(62, 207, 142, 0.35);
+	color: #3ecf8e;
+	background: rgba(62, 207, 142, 0.08);
+}
+
+/* Metric Cards */
+.dark .metric-card {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #111419;
+	box-shadow:
+		0 8px 24px rgba(0, 0, 0, 0.3),
+		inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.dark .metric-card p {
+	color: #9ca3af;
+}
+
+.dark .metric-card strong {
+	color: #f9fafb;
+}
+
+.dark .metric-card span {
+	color: #6b7280;
+}
+
+/* Services / Monitor List Panel */
+.dark .services-panel,
+.dark .dashboard-panel {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #101216;
+	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
+}
+
+.dark .panel-heading {
+	border-bottom-color: rgba(255, 255, 255, 0.07);
+}
+
+.dark .panel-heading h2 {
+	color: #f9fafb;
+}
+
+.dark .panel-heading p {
+	color: #9ca3af;
+}
+
+.dark .services-title {
+	border-bottom-color: rgba(255, 255, 255, 0.06);
+	background: #14171d;
+	color: #9ca3af;
+}
+
+.dark .service-row {
+	background: transparent;
+}
+
+.dark .service-row + .service-row {
+	border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.dark .service-row:hover {
+	background: rgba(255, 255, 255, 0.02);
+}
+
+.dark .service-row.is-disabled {
+	background: rgba(0, 0, 0, 0.2);
+}
+
+.dark .service-icon {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #161920;
+	color: #9ca3af;
+}
+
+.dark .service-name strong,
+.dark .monitor-name-link {
+	color: #f9fafb;
+}
+
+.dark .monitor-name-link:hover {
+	color: #3ecf8e;
+}
+
+.dark .service-name small {
+	color: #9ca3af;
+}
+
+.dark .monitor-meta {
+	color: #6b7280;
+}
+
+.dark .monitor-result code {
+	color: #d1d5db;
+	background: rgba(255, 255, 255, 0.05);
+	padding: 2px 5px;
+	border-radius: 4px;
+}
+
+.dark .monitor-result small {
+	color: #9ca3af;
+}
+
+/* Row Status */
+.dark .row-status {
+	color: #9ca3af;
+}
+
+.dark .row-status.online {
+	color: #4ade80;
+}
+
+.dark .row-status.offline {
+	color: #f87171;
+}
+
+.dark .row-status.pending {
+	color: #f6c86a;
+}
+
+.dark .row-status.checking {
+	color: #fde047;
+}
+
+/* Row Actions */
+.dark .row-action {
+	color: #9ca3af;
+}
+
+.dark .row-action:hover:not(:disabled) {
+	border-color: rgba(255, 255, 255, 0.12);
+	color: #f3f4f6;
+	background: rgba(255, 255, 255, 0.05);
+}
+
+.dark .row-action-accent {
+	color: #3ecf8e;
+	background: rgba(62, 207, 142, 0.1);
+}
+
+.dark .row-action-accent:hover:not(:disabled) {
+	border-color: rgba(62, 207, 142, 0.3);
+	color: #4ade80;
+	background: rgba(62, 207, 142, 0.18);
+}
+
+.dark .row-actions .danger-action {
+	color: #f87171;
+}
+
+.dark .row-actions .danger-action:hover:not(:disabled) {
+	border-color: rgba(239, 68, 68, 0.3);
+	color: #fca5a5;
+	background: rgba(239, 68, 68, 0.12);
+}
+
+/* Skeletons */
+.dark .monitor-skeleton > div + div {
+	border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.dark .monitor-skeleton i,
+.dark .monitor-skeleton span,
+.dark .monitor-skeleton b {
+	background: linear-gradient(90deg, #161a22 20%, #202632 50%, #161a22 80%);
+	background-size: 220% 100%;
+}
+
+/* Incidents Panel (Dashboard) */
+.dark .incidents-empty {
+	color: #9ca3af;
+}
+
+.dark .dashboard-incident-list article {
+	border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.dark .dashboard-incident-list article:hover {
+	background: rgba(255, 255, 255, 0.02);
+}
+
+.dark .dashboard-incident-list button:first-child {
+	color: #f9fafb;
+}
+
+.dark .dashboard-incident-list button:first-child:hover {
+	color: #3ecf8e;
+}
+
+.dark .dashboard-incident-list article > div > span {
+	color: #9ca3af;
+}
+
+/* Dashboard Page Footer */
+.dark .dashboard-page-footer {
+	border-top-color: rgba(255, 255, 255, 0.08);
+	color: #6b7280;
+}
+
+/* Dialogs & Forms in Dark Mode (Add/Edit Monitor, Incident, Delete) */
+.dark [data-slot='dialog-content'],
+.dark [data-slot='alert-dialog-content'] {
+	background: #111419;
+	border-color: rgba(255, 255, 255, 0.1);
+	box-shadow:
+		0 24px 64px -12px rgba(0, 0, 0, 0.85),
+		0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
+.dark [data-slot='dialog-title'],
+.dark [data-slot='alert-dialog-title'] {
+	color: #f9fafb;
+}
+
+.dark [data-slot='dialog-description'],
+.dark [data-slot='alert-dialog-description'] {
+	color: #9ca3af;
+}
+
+.dark .field > span,
+.dark .toggle-field,
+.dark .toggle-field label {
+	color: #d1d5db;
+}
+
+.dark .field small {
+	color: #9ca3af;
+}
+
+.dark .monitor-form input,
+.dark .incident-form input,
+.dark .advanced-body textarea,
+.dark .ai-compose-pane textarea {
+	background: rgba(11, 13, 15, 0.85);
+	border-color: rgba(255, 255, 255, 0.12);
+	color: #f9fafb;
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+.dark .monitor-form input:hover,
+.dark .incident-form input:hover,
+.dark .advanced-body textarea:hover,
+.dark .ai-compose-pane textarea:hover {
+	border-color: rgba(255, 255, 255, 0.22);
+}
+
+.dark .monitor-form input:focus-visible,
+.dark .incident-form input:focus-visible,
+.dark .advanced-body textarea:focus-visible,
+.dark .ai-compose-pane textarea:focus-visible {
+	border-color: #3ecf8e;
+	box-shadow:
+		0 0 0 3px rgba(62, 207, 142, 0.2),
+		inset 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+.dark .monitor-advanced {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #14171d;
+}
+
+.dark .monitor-advanced summary {
+	color: #d1d5db;
+}
+
+.dark .monitor-advanced summary:hover {
+	color: #f9fafb;
+}
+
+.dark .monitor-advanced-grid {
+	border-top-color: rgba(255, 255, 255, 0.07);
+}
+
+.dark .advanced-section-heading span {
+	color: #f3f4f6;
+}
+
+.dark .monitor-advanced-grid small,
+.dark .advanced-section-heading small {
+	color: #9ca3af;
+}
+
+.dark .header-remove-button {
+	color: #f87171;
+}
+
+.dark .header-remove-button:hover {
+	background: rgba(239, 68, 68, 0.12);
+}
+
+.dark .form-error {
+	border-color: rgba(239, 68, 68, 0.3);
+	color: #fca5a5;
+	background: rgba(239, 68, 68, 0.12);
+}
+
+/* Incident Dialog specifics */
+.dark .incident-dialog [data-slot='dialog-header'] {
+	border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.dark .incident-service-options {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #14171d;
+}
+
+.dark .incident-service-options label {
+	border-color: rgba(255, 255, 255, 0.1);
+	color: #d1d5db;
+	background: #181c23;
+}
+
+.dark .incident-service-options label:hover {
+	border-color: rgba(255, 255, 255, 0.2);
+	background: #1d222b;
+}
+
+.dark .incident-service-options label:has(input:checked) {
+	border-color: rgba(62, 207, 142, 0.4);
+	color: #3ecf8e;
+	background: rgba(62, 207, 142, 0.12);
+}
+
+.dark .ai-compose-pane-header label {
+	color: #d1d5db;
+}
+
+.dark .ai-compose-pane-header small {
+	color: #9ca3af;
+}
+
+.dark .ai-compose-hint {
+	color: #9ca3af;
+}
+
+.dark .ai-compose-hint button {
+	color: #3ecf8e;
+}
+
+/* Incident Select Icons in Dark Theme */
+.dark .incident-select-icon-blue {
+	color: #60a5fa;
+	background: rgba(37, 99, 235, 0.18);
+}
+
+.dark .incident-select-icon-violet {
+	color: #c084fc;
+	background: rgba(147, 51, 234, 0.18);
+}
+
+.dark .incident-select-icon-amber {
+	color: #fbbf24;
+	background: rgba(217, 119, 6, 0.2);
+}
+
+.dark .incident-select-icon-green {
+	color: #4ade80;
+	background: rgba(34, 197, 94, 0.18);
+}
+
+.dark .incident-select-icon-neutral {
+	color: #9ca3af;
+	background: rgba(255, 255, 255, 0.08);
+}
+
+.dark .dashboard-header {
+	border-bottom-color: rgba(255, 255, 255, 0.08);
+	background: rgba(9, 10, 12, 0.88);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+}
+
+.dark .brand {
+	color: #f9fafb;
+}
+
+.dark .header-context {
+	border-right-color: rgba(255, 255, 255, 0.1);
+	color: #9ca3af;
+}
+
+.dark .app-nav-icon {
+	color: #9ca3af;
+}
+
+.dark .app-nav-icon:hover:not(:disabled),
+.dark .app-nav-icon[aria-current='page'] {
+	background: rgba(62, 207, 142, 0.12);
+	color: #3ecf8e;
+}
+
+/* Mobile Drawer */
+.dark .app-nav-sheet {
+	background: #101216;
+	border-left-color: rgba(255, 255, 255, 0.08);
+}
+
+.dark .app-nav-sheet-header {
+	border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.dark .app-nav-sheet-title {
+	color: #f9fafb;
+}
+
+.dark .app-nav-mobile-item {
+	color: #d1d5db;
+}
+
+.dark .app-nav-mobile-item:hover:not(:disabled),
+.dark .app-nav-mobile-item[aria-current='page'] {
+	color: #3ecf8e;
+	background: rgba(62, 207, 142, 0.12);
+}
+
+/* Intro & Overline */
+.dark .overline {
+	color: #4ade80;
+}
+
+.dark .dashboard-intro h1 {
+	color: #f9fafb;
+}
+
+.dark .dashboard-intro > div > p:last-child {
+	color: #9ca3af;
+}
+
+/* Common Buttons */
+.dark .primary-button {
+	border-color: #24b47e;
+	color: #090a0c;
+	background: #3ecf8e;
+	box-shadow:
+		0 1px 3px rgba(0, 0, 0, 0.4),
+		0 0 16px rgba(62, 207, 142, 0.2),
+		inset 0 1px rgba(255, 255, 255, 0.25);
+}
+
+.dark .primary-button:hover:not(:disabled) {
+	background: #4ade80;
+	box-shadow:
+		0 2px 8px rgba(0, 0, 0, 0.5),
+		0 0 20px rgba(62, 207, 142, 0.35);
+}
+
+.dark .secondary-button {
+	border-color: rgba(255, 255, 255, 0.12);
+	color: #e5e7eb;
+	background: rgba(255, 255, 255, 0.04);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.dark .secondary-button:hover:not(:disabled) {
+	border-color: rgba(255, 255, 255, 0.22);
+	color: #ffffff;
+	background: rgba(255, 255, 255, 0.08);
+}
+
+.dark .danger-button {
+	border-color: rgba(239, 68, 68, 0.35);
+	color: #fca5a5;
+	background: rgba(239, 68, 68, 0.1);
+}
+
+.dark .danger-button:hover:not(:disabled) {
+	border-color: rgba(239, 68, 68, 0.5);
+	color: #fecaca;
+	background: rgba(239, 68, 68, 0.18);
+}
+
+.dark .icon-button {
+	border-color: rgba(255, 255, 255, 0.12);
+	color: #9ca3af;
+	background: rgba(255, 255, 255, 0.04);
+}
+
+.dark .icon-button:hover:not(:disabled) {
+	border-color: rgba(62, 207, 142, 0.35);
+	color: #3ecf8e;
+	background: rgba(62, 207, 142, 0.08);
+}
+
+/* Metric Cards */
+.dark .metric-card {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #111419;
+	box-shadow:
+		0 8px 24px rgba(0, 0, 0, 0.3),
+		inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.dark .metric-card p {
+	color: #9ca3af;
+}
+
+.dark .metric-card strong {
+	color: #f9fafb;
+}
+
+.dark .metric-card span {
+	color: #6b7280;
+}
+
+/* Services / Monitor List Panel */
+.dark .services-panel,
+.dark .dashboard-panel {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #101216;
+	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
+}
+
+.dark .panel-heading {
+	border-bottom-color: rgba(255, 255, 255, 0.07);
+}
+
+.dark .panel-heading h2 {
+	color: #f9fafb;
+}
+
+.dark .panel-heading p {
+	color: #9ca3af;
+}
+
+.dark .services-title {
+	border-bottom-color: rgba(255, 255, 255, 0.06);
+	background: #14171d;
+	color: #9ca3af;
+}
+
+.dark .service-row {
+	background: transparent;
+}
+
+.dark .service-row + .service-row {
+	border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.dark .service-row:hover {
+	background: rgba(255, 255, 255, 0.02);
+}
+
+.dark .service-row.is-disabled {
+	background: rgba(0, 0, 0, 0.2);
+}
+
+.dark .service-icon {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #161920;
+	color: #9ca3af;
+}
+
+.dark .service-name strong,
+.dark .monitor-name-link {
+	color: #f9fafb;
+}
+
+.dark .monitor-name-link:hover {
+	color: #3ecf8e;
+}
+
+.dark .service-name small {
+	color: #9ca3af;
+}
+
+.dark .monitor-meta {
+	color: #6b7280;
+}
+
+.dark .monitor-result code {
+	color: #d1d5db;
+	background: rgba(255, 255, 255, 0.05);
+	padding: 2px 5px;
+	border-radius: 4px;
+}
+
+.dark .monitor-result small {
+	color: #9ca3af;
+}
+
+/* Row Status */
+.dark .row-status {
+	color: #9ca3af;
+}
+
+.dark .row-status.online {
+	color: #4ade80;
+}
+
+.dark .row-status.offline {
+	color: #f87171;
+}
+
+.dark .row-status.pending {
+	color: #f6c86a;
+}
+
+.dark .row-status.checking {
+	color: #fde047;
+}
+
+/* Row Actions */
+.dark .row-action {
+	color: #9ca3af;
+}
+
+.dark .row-action:hover:not(:disabled) {
+	border-color: rgba(255, 255, 255, 0.12);
+	color: #f3f4f6;
+	background: rgba(255, 255, 255, 0.05);
+}
+
+.dark .row-action-accent {
+	color: #3ecf8e;
+	background: rgba(62, 207, 142, 0.1);
+}
+
+.dark .row-action-accent:hover:not(:disabled) {
+	border-color: rgba(62, 207, 142, 0.3);
+	color: #4ade80;
+	background: rgba(62, 207, 142, 0.18);
+}
+
+.dark .row-actions .danger-action {
+	color: #f87171;
+}
+
+.dark .row-actions .danger-action:hover:not(:disabled) {
+	border-color: rgba(239, 68, 68, 0.3);
+	color: #fca5a5;
+	background: rgba(239, 68, 68, 0.12);
+}
+
+/* Skeletons */
+.dark .monitor-skeleton > div + div {
+	border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.dark .monitor-skeleton i,
+.dark .monitor-skeleton span,
+.dark .monitor-skeleton b {
+	background: linear-gradient(90deg, #161a22 20%, #202632 50%, #161a22 80%);
+	background-size: 220% 100%;
+}
+
+/* Incidents Panel (Dashboard) */
+.dark .incidents-empty {
+	color: #9ca3af;
+}
+
+.dark .dashboard-incident-list article {
+	border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.dark .dashboard-incident-list article:hover {
+	background: rgba(255, 255, 255, 0.02);
+}
+
+.dark .dashboard-incident-list button:first-child {
+	color: #f9fafb;
+}
+
+.dark .dashboard-incident-list button:first-child:hover {
+	color: #3ecf8e;
+}
+
+.dark .dashboard-incident-list article > div > span {
+	color: #9ca3af;
+}
+
+/* Dashboard Page Footer */
+.dark .dashboard-page-footer {
+	border-top-color: rgba(255, 255, 255, 0.08);
+	color: #6b7280;
+}
+
+/* Dialogs & Forms in Dark Mode (Add/Edit Monitor, Incident, Delete) */
+.dark [data-slot='dialog-content'],
+.dark [data-slot='alert-dialog-content'] {
+	background: #111419;
+	border-color: rgba(255, 255, 255, 0.1);
+	box-shadow:
+		0 24px 64px -12px rgba(0, 0, 0, 0.85),
+		0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
+.dark [data-slot='dialog-title'],
+.dark [data-slot='alert-dialog-title'] {
+	color: #f9fafb;
+}
+
+.dark [data-slot='dialog-description'],
+.dark [data-slot='alert-dialog-description'] {
+	color: #9ca3af;
+}
+
+.dark .field > span,
+.dark .toggle-field,
+.dark .toggle-field label {
+	color: #d1d5db;
+}
+
+.dark .field small {
+	color: #9ca3af;
+}
+
+.dark .monitor-form input,
+.dark .incident-form input,
+.dark .advanced-body textarea,
+.dark .ai-compose-pane textarea {
+	background: rgba(11, 13, 15, 0.85);
+	border-color: rgba(255, 255, 255, 0.12);
+	color: #f9fafb;
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+.dark .monitor-form input:hover,
+.dark .incident-form input:hover,
+.dark .advanced-body textarea:hover,
+.dark .ai-compose-pane textarea:hover {
+	border-color: rgba(255, 255, 255, 0.22);
+}
+
+.dark .monitor-form input:focus-visible,
+.dark .incident-form input:focus-visible,
+.dark .advanced-body textarea:focus-visible,
+.dark .ai-compose-pane textarea:focus-visible {
+	border-color: #3ecf8e;
+	box-shadow:
+		0 0 0 3px rgba(62, 207, 142, 0.2),
+		inset 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+.dark .monitor-advanced {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #14171d;
+}
+
+.dark .monitor-advanced summary {
+	color: #d1d5db;
+}
+
+.dark .monitor-advanced summary:hover {
+	color: #f9fafb;
+}
+
+.dark .monitor-advanced-grid {
+	border-top-color: rgba(255, 255, 255, 0.07);
+}
+
+.dark .advanced-section-heading span {
+	color: #f3f4f6;
+}
+
+.dark .monitor-advanced-grid small,
+.dark .advanced-section-heading small {
+	color: #9ca3af;
+}
+
+.dark .header-remove-button {
+	color: #f87171;
+}
+
+.dark .header-remove-button:hover {
+	background: rgba(239, 68, 68, 0.12);
+}
+
+.dark .form-error {
+	border-color: rgba(239, 68, 68, 0.3);
+	color: #fca5a5;
+	background: rgba(239, 68, 68, 0.12);
+}
+
+/* Incident Dialog specifics */
+.dark .incident-dialog [data-slot='dialog-header'] {
+	border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.dark .incident-service-options {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #14171d;
+}
+
+.dark .incident-service-options label {
+	border-color: rgba(255, 255, 255, 0.1);
+	color: #d1d5db;
+	background: #181c23;
+}
+
+.dark .incident-service-options label:hover {
+	border-color: rgba(255, 255, 255, 0.2);
+	background: #1d222b;
+}
+
+.dark .incident-service-options label:has(input:checked) {
+	border-color: rgba(62, 207, 142, 0.4);
+	color: #3ecf8e;
+	background: rgba(62, 207, 142, 0.12);
+}
+
+.dark .ai-compose-pane-header label {
+	color: #d1d5db;
+}
+
+.dark .ai-compose-pane-header small {
+	color: #9ca3af;
+}
+
+.dark .ai-compose-hint {
+	color: #9ca3af;
+}
+
+.dark .ai-compose-hint button {
+	color: #3ecf8e;
+}
+
+/* Incident Select Icons in Dark Theme */
+.dark .incident-select-icon-blue {
+	color: #60a5fa;
+	background: rgba(37, 99, 235, 0.18);
+}
+
+.dark .incident-select-icon-violet {
+	color: #c084fc;
+	background: rgba(147, 51, 234, 0.18);
+}
+
+.dark .incident-select-icon-amber {
+	color: #fbbf24;
+	background: rgba(217, 119, 6, 0.2);
+}
+
+.dark .incident-select-icon-green {
+	color: #4ade80;
+	background: rgba(34, 197, 94, 0.18);
+}
+
+.dark .incident-select-icon-neutral {
+	color: #9ca3af;
+	background: rgba(255, 255, 255, 0.08);
+}