/*
 * TellHound design system.
 *
 * Built on Bootstrap 5.3's native theming: we override the --bs-* custom
 * properties rather than fighting Bootstrap with !important, so every existing
 * card, table and badge inherits the theme without its markup changing.
 *
 * Dark is the default (this is an operations console, usually on a second
 * monitor) but light is fully supported — cost and health reports get
 * screenshotted into bright decks, and a dark screenshot reads badly there.
 */

:root {
	--ss-bg: #14171a;
	--ss-surface: #1b1f25;
	--ss-surface-2: #232830;
	--ss-surface-3: #2b313a;
	--ss-border: #2c333c;
	--ss-text: #e6e9ed;
	--ss-muted: #98a2ad;
	--ss-accent: #2f81f7;
	--ss-accent-soft: rgba(47, 129, 247, .14);
	--ss-green: #00c98d;
	--ss-amber: #f2a93b;
	--ss-red: #f4685f;
	--ss-purple: #a371f7;

	--ss-sidebar-w: 232px;
	--ss-topbar-h: 52px;
	--ss-radius: 8px;
}

[data-bs-theme="light"] {
	--ss-bg: #f4f6f9;
	--ss-surface: #ffffff;
	--ss-surface-2: #f7f9fb;
	--ss-surface-3: #eef2f6;
	--ss-border: #dde3ea;
	--ss-text: #1c2530;
	--ss-muted: #5f6b7a;
	--ss-accent: #0b62d6;
	--ss-accent-soft: rgba(11, 98, 214, .09);
	--ss-green: #0a875a;
	--ss-amber: #b4700c;
	--ss-red: #c8372d;
	--ss-purple: #7040c9;
}

/* Hand the palette to Bootstrap so its own components follow along. */
:root,
[data-bs-theme] {
	--bs-body-bg: var(--ss-bg);
	--bs-body-color: var(--ss-text);
	--bs-secondary-color: var(--ss-muted);
	--bs-border-color: var(--ss-border);
	--bs-primary: var(--ss-accent);
	--bs-link-color: var(--ss-accent);
	--bs-link-hover-color: var(--ss-accent);
	--bs-emphasis-color: var(--ss-text);
}

body {
	background: var(--ss-bg);
	color: var(--ss-text);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

/* ---------- shell ---------- */

.ss-shell {
	display: grid;
	grid-template-columns: var(--ss-sidebar-w) minmax(0, 1fr);
	min-height: 100vh;
}

.ss-sidebar {
	background: var(--ss-surface);
	border-right: 1px solid var(--ss-border);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.ss-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 16px;
	height: var(--ss-topbar-h);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .2px;
	color: var(--ss-text);
	text-decoration: none;
	border-bottom: 1px solid var(--ss-border);
	flex-shrink: 0;
}

.ss-brand:hover { color: var(--ss-text); }

.ss-brand-mark {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background: linear-gradient(135deg, var(--ss-accent), var(--ss-green));
	flex-shrink: 0;
}

.ss-nav { padding: 10px 8px; }

.ss-nav-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ss-muted);
	padding: 14px 10px 6px;
	opacity: .8;
}

.ss-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 6px;
	color: var(--ss-text);
	text-decoration: none;
	font-size: 13.5px;
	line-height: 1.3;
	margin-bottom: 1px;
	transition: background .12s ease;
}

.ss-nav-item:hover { background: var(--ss-surface-2); color: var(--ss-text); }

.ss-nav-item.active {
	background: var(--ss-accent-soft);
	color: var(--ss-accent);
	font-weight: 600;
}

.ss-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.ss-nav-item .ss-nav-count { margin-left: auto; font-size: 11px; }

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

.ss-topbar {
	height: var(--ss-topbar-h);
	border-bottom: 1px solid var(--ss-border);
	background: var(--ss-surface);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 18px;
	position: sticky;
	top: 0;
	z-index: 20;
}

.ss-crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	min-width: 0;
}

.ss-crumb a { color: var(--ss-muted); text-decoration: none; white-space: nowrap; }
.ss-crumb a:hover { color: var(--ss-text); }
.ss-crumb .sep { color: var(--ss-muted); opacity: .5; }
.ss-crumb .current { font-weight: 600; color: var(--ss-text); }

.ss-content { padding: 20px 22px 40px; }

/* ---------- surfaces ---------- */

.card, .ss-panel {
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius);
	box-shadow: none;
	color: var(--ss-text);
}

.card-header {
	background: transparent;
	border-bottom: 1px solid var(--ss-border);
	font-size: 13px;
	font-weight: 600;
	padding: 11px 16px;
	color: var(--ss-text);
}

.card-body { padding: 16px; }

.ss-page-title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0;
}

.ss-sub { color: var(--ss-muted); font-size: 12.5px; }

/* ---------- the big-number stat row (New Relic's best pattern) ---------- */

.ss-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--ss-border);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius);
	overflow: hidden;
}

.ss-stat { background: var(--ss-surface); padding: 16px 18px; }

.ss-stat-value {
	font-size: 28px;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--ss-text);
	white-space: nowrap;
}

.ss-stat-label {
	font-size: 11.5px;
	color: var(--ss-muted);
	margin-top: 5px;
	line-height: 1.35;
}

.ss-stat-value.good { color: var(--ss-green); }
.ss-stat-value.warn { color: var(--ss-amber); }
.ss-stat-value.bad  { color: var(--ss-red); }
.ss-stat-value.none { color: var(--ss-muted); }

/* ---------- tables ---------- */

.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--ss-text);
	--bs-table-border-color: var(--ss-border);
	--bs-table-hover-bg: var(--ss-surface-2);
	--bs-table-hover-color: var(--ss-text);
	margin-bottom: 0;
	font-size: 13px;
}

.table > thead th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ss-muted);
	border-bottom: 1px solid var(--ss-border);
	padding: 9px 12px;
	white-space: nowrap;
	background: transparent;
}

.table > tbody td { padding: 10px 12px; border-color: var(--ss-border); vertical-align: middle; }
.table > tbody tr:last-child td { border-bottom: 0; }
.ss-row-link { cursor: pointer; }

/* status dot, the way NR marks entity health in a list */
.ss-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-right: 8px;
	flex-shrink: 0;
	vertical-align: -1px;
}

.ss-dot.good { background: var(--ss-green); }
.ss-dot.warn { background: var(--ss-amber); }
.ss-dot.bad  { background: var(--ss-red); }
.ss-dot.none { background: transparent; border: 1.5px solid var(--ss-muted); opacity: .6; }

/* ---------- filter chips ---------- */

.ss-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.ss-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: 6px;
	padding: 5px 11px;
	font-size: 12.5px;
	color: var(--ss-muted);
	text-decoration: none;
	white-space: nowrap;
}

.ss-chip:hover { border-color: var(--ss-accent); color: var(--ss-text); }
.ss-chip .v { color: var(--ss-accent); font-weight: 600; }
.ss-chip.active { background: var(--ss-accent-soft); border-color: var(--ss-accent); color: var(--ss-accent); }

.ss-search {
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: 6px;
	padding: 5px 11px;
	font-size: 12.5px;
	color: var(--ss-text);
	min-width: 220px;
}

.ss-search::placeholder { color: var(--ss-muted); }
.ss-search:focus { outline: none; border-color: var(--ss-accent); }

/* ---------- sub-nav rail (NR's in-entity left menu) ---------- */

.ss-detail { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; }

.ss-rail {
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius);
	padding: 8px;
	position: sticky;
	top: calc(var(--ss-topbar-h) + 18px);
}

@media (max-width: 991px) {
	.ss-detail { grid-template-columns: 1fr; }
	.ss-rail { position: static; }
	.ss-shell { grid-template-columns: 1fr; }
	.ss-sidebar { display: none; }
}

/* ---------- badges / severities ---------- */

.ss-sev {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 2px 7px;
	border-radius: 4px;
	line-height: 1.5;
}

.ss-sev.p1 { background: rgba(244, 104, 95, .16); color: var(--ss-red); }
.ss-sev.p2 { background: rgba(242, 169, 59, .16); color: var(--ss-amber); }
.ss-sev.p3 { background: rgba(47, 129, 247, .16); color: var(--ss-accent); }

.badge { font-weight: 600; }

/* ---------- forms & buttons ---------- */

.form-control, .form-select {
	background: var(--ss-surface-2);
	border-color: var(--ss-border);
	color: var(--ss-text);
	font-size: 13px;
}

.form-control:focus, .form-select:focus {
	background: var(--ss-surface-2);
	color: var(--ss-text);
	border-color: var(--ss-accent);
	box-shadow: 0 0 0 3px var(--ss-accent-soft);
}

.form-control::placeholder { color: var(--ss-muted); }

.btn { font-size: 13px; border-radius: 6px; }
.btn-primary { background: var(--ss-accent); border-color: var(--ss-accent); }
.btn-outline-secondary { color: var(--ss-muted); border-color: var(--ss-border); }
.btn-outline-secondary:hover { background: var(--ss-surface-2); color: var(--ss-text); border-color: var(--ss-border); }

/* ---------- modal: full-bleed drill-down, the pattern NR uses ---------- */

.modal-content {
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: 10px;
	color: var(--ss-text);
}

.modal-header, .modal-footer { border-color: var(--ss-border); }
.modal-backdrop.show { opacity: .68; }

.ss-drawer .modal-dialog {
	max-width: min(1180px, calc(100vw - 48px));
	margin: 24px auto;
}

.ss-drawer .modal-body { max-height: calc(100vh - 190px); overflow-y: auto; }

/* ---------- misc ---------- */

.ss-empty { color: var(--ss-muted); font-size: 13px; padding: 26px 4px; text-align: center; }

.ss-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 12.5px; }
.ss-kv dt { color: var(--ss-muted); font-weight: 400; }
.ss-kv dd { margin: 0; color: var(--ss-text); }

.text-muted { color: var(--ss-muted) !important; }

code {
	background: var(--ss-surface-3);
	color: var(--ss-text);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 11.5px;
	/* A long ARN or JSON blob is one unbreakable token; without this it
	   overflows its cell and escapes the card entirely. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Config key/value table: fixed layout so a wide value cannot stretch the
   table past its container. */
.ss-config { table-layout: fixed; width: 100%; }
.ss-config td { vertical-align: top; }
.ss-config code { display: inline-block; max-width: 100%; }

.ss-json {
	background: var(--ss-surface-2);
	border: 1px solid var(--ss-border);
	border-radius: 6px;
	padding: 9px 11px;
	margin: 4px 0 0;
	font-size: 11px;
	line-height: 1.45;
	max-height: 260px;
	overflow: auto;
	white-space: pre;
	color: var(--ss-text);
}

.ss-json-toggle {
	cursor: pointer;
	color: var(--ss-accent);
	font-size: 11.5px;
	list-style: none;
}

.ss-json-toggle::-webkit-details-marker { display: none; }
.ss-json-toggle::before { content: '▸ '; }
details[open] > .ss-json-toggle::before { content: '▾ '; }

.alert { border-radius: var(--ss-radius); font-size: 13px; border-width: 1px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ss-surface-3); border-radius: 6px; border: 2px solid var(--ss-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ss-muted); }

/* ---------- callouts ---------- */

/*
 * Cost/impact callout. Both background AND text colour are theme-derived: a
 * hardcoded light background with inherited text was invisible in dark mode,
 * which is exactly how a "just this once" hex value fails.
 */
.ss-callout {
	background: rgba(242, 169, 59, .10);
	border-left: 3px solid var(--ss-amber);
	border-radius: 6px;
	padding: 10px 12px;
	color: var(--ss-text);
}

.ss-callout strong { color: var(--ss-amber); }

[data-bs-theme="light"] .ss-callout { background: #fff8e6; }

/* Key/value chip used for collected software facts. */
.ss-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--ss-surface-2);
	border: 1px solid var(--ss-border);
	color: var(--ss-muted);
	border-radius: 5px;
	padding: 3px 8px;
	font-size: 11.5px;
}

.ss-tag strong { color: var(--ss-text); font-weight: 600; }
.ss-tag strong.yes { color: var(--ss-green); }
.ss-tag strong.no  { color: var(--ss-red); }

/* State badges — one class per meaning, so both themes stay legible. */
.ss-state {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 2px 7px;
	border-radius: 4px;
	line-height: 1.5;
	text-transform: lowercase;
}

.ss-state.firing, .ss-state.bad      { background: rgba(244, 104, 95, .16); color: var(--ss-red); }
.ss-state.pending, .ss-state.warn    { background: rgba(242, 169, 59, .16); color: var(--ss-amber); }
.ss-state.ok, .ss-state.recovered,
.ss-state.good                       { background: rgba(0, 201, 141, .16);  color: var(--ss-green); }
.ss-state.neutral                    { background: var(--ss-surface-3);     color: var(--ss-muted); }

/* ---------- sidebar service discovery ---------- */

.ss-nav-hint {
	font-size: 11.5px;
	color: var(--ss-muted);
	line-height: 1.45;
	padding: 6px 10px 8px;
}

.ss-nav-hint a { color: var(--ss-accent); text-decoration: none; white-space: nowrap; }

.ss-nav-more { margin-top: 2px; }

.ss-nav-more > summary {
	font-size: 11.5px;
	color: var(--ss-muted);
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 6px;
	list-style: none;
}

.ss-nav-more > summary:hover { background: var(--ss-surface-2); color: var(--ss-text); }
.ss-nav-more > summary::-webkit-details-marker { display: none; }
.ss-nav-more > summary::before { content: '▸ '; }
.ss-nav-more[open] > summary::before { content: '▾ '; }
.ss-nav-more .ss-nav-item { opacity: .62; font-size: 13px; }
.ss-nav-more .ss-nav-item:hover { opacity: 1; }