/*
 * ORTEC Insights - the shared page shell, taken from Control Tower Analytics (the design
 * reference for every module): a top bar with the page title and pill navigation, content
 * on the primary background, white panels with a hairline border, KPI cards, uppercase
 * small-caps labels. Everything is built on the bolster tokens, so light and dark follow.
 *
 * Class names are prefixed ins- where analytics uses an id (#topbar, #content), so a
 * module's own stylesheet never collides; the .nav-pill, section.panel and .kpi-* rules are
 * the analytics rules verbatim.
 */

body {
	background-color: var(--bol-color-background-primary);
	color: var(--bol-color-text-primary);
	margin: 0;
}

/* ── Application bar: brand and the module switcher, on every page ─────────── */
.ins-appbar {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 8px 20px;
	background-color: var(--bol-color-background-secondary);
	border-bottom: 1px solid var(--bol-color-border);
	font-size: 0.9em;
}
.ins-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bol-color-text-primary);
	text-decoration: none;
	font-weight: 500;
	font-size: 1.05em;
	letter-spacing: 0.02em;
}
/* The ORTEC wordmark, drawn as a mask in the theme's own brand colour: Burgundy on
   light, Breeze on dark - the two variants the brand ships (ORTEC logo Burgundy.svg /
   ORTEC logo Breeze.svg). One asset, always the right one, and never the pre-rebrand
   plus-sign mark with its old navy/green/orange palette. */
.ins-logo {
	display: inline-block;
	width: 96px;
	height: 15px;
	flex: 0 0 auto;
	background-color: var(--bol-color-primary);
	-webkit-mask: url(../images/ortec-wordmark.svg) no-repeat center / contain;
	mask: url(../images/ortec-wordmark.svg) no-repeat center / contain;
}
/* The same wordmark at page-heading size (the marketing page). */
.ins-logo.large { width: 180px; height: 28px; vertical-align: -2px; margin-right: 12px; }
.ins-brand:hover { color: var(--bol-color-primary); }
.ins-appbar .main-nav { margin-left: 8px; }
/* Right-hand side of the app bar: the small utility items (Admin), then who is signed in. */
.ins-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.ins-user {
	color: var(--bol-color-text-secondary);
	font-size: 0.9em;
	white-space: nowrap;
}
.nav-pill.nav-pill-sm {
	padding: 3px 10px;
	font-size: 0.8em;
	border-color: var(--bol-color-border);
}
.nav-pill.nav-pill-sm.active { border-color: var(--bol-color-primary); }

/* ── Page top bar: the module's title and its own navigation ──────────────── */
.ins-topbar {
	background-color: var(--bol-color-background-secondary);
	padding: 12px 20px;
	border-bottom: 1px solid var(--bol-color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.ins-topbar h1 {
	font-size: 1.3em;
	font-weight: 500;
	margin: 0;
	color: var(--bol-color-text-primary);
}

.main-nav {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.nav-pill {
	padding: 6px 16px;
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	font-size: 0.9em;
	font-weight: 400;
	color: var(--bol-color-text-secondary);
	border-radius: var(--bol-radius-pill);
	font-family: inherit;
	transition: all 0.15s;
	text-decoration: none;
	display: inline-block;
	white-space: nowrap;
}
.nav-pill:hover {
	background: var(--bol-color-hover);
	color: var(--bol-color-primary);
}
.nav-pill.active {
	background: var(--bol-color-background-secondary);
	color: var(--bol-color-primary);
	border-color: var(--bol-color-primary);
}

/* Bootstrap icons inside pills and the app bar are glyph fonts, never the masked <i>
   sprites the routes page uses for its own icons. */
.ins-appbar i.bi, .ins-topbar i.bi, .nav-pill i.bi, .dashboard-jump i.bi, .icon-heading i.bi, .filter-bar i.bi {
	width: auto; height: auto; display: inline; background: none;
	-webkit-mask: none; mask: none; vertical-align: baseline;
}

/* ── Content ──────────────────────────────────────────────────────────────── */
.ins-content {
	padding: 20px;
	max-width: 1400px;
	margin: 0 auto;
}

section.panel {
	background-color: var(--bol-color-background-secondary);
	color: var(--bol-color-text-primary);
	border: 1px solid var(--bol-color-border);
	border-radius: var(--bol-radius);
	padding: 1.25rem;
	margin-bottom: 20px;
}
section.panel h2,
section.panel h3 {
	font-size: 1rem;
	font-weight: 500;
	margin: 0 0 16px 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bol-color-border);
	color: var(--bol-color-text-primary);
}

.view-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.view-header h2 {
	font-size: 1.4em;
	font-weight: 500;
	margin: 0;
	color: var(--bol-color-text-primary);
}

/* KPI cards */
.kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}
.kpi-card {
	background-color: var(--bol-color-background-secondary);
	border: 1px solid var(--bol-color-border);
	border-radius: var(--bol-radius);
	padding: 16px 18px;
	position: relative;
}
.kpi-label {
	font-size: 0.8em;
	color: var(--bol-color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 6px;
}
.kpi-value {
	font-size: 2.2em;
	font-weight: 400;
	color: var(--bol-color-primary);
	line-height: 1.1;
}

/* The uppercase small-caps label that sits over a control or a card */
.ins-label {
	font-size: 0.75em;
	font-weight: 500;
	color: var(--bol-color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* A filter row in a white panel */
.ins-filter-bar {
	background-color: var(--bol-color-background-secondary);
	border: 1px solid var(--bol-color-border);
	border-radius: var(--bol-radius);
	padding: 14px 18px;
	margin-bottom: 20px;
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}

/* Tabs */
.tabs {
	display: flex;
	border-bottom: 1px solid var(--bol-color-border);
	margin-bottom: 20px;
	gap: 4px;
}
.tab-button {
	padding: 10px 20px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.9em;
	font-weight: 400;
	color: var(--bol-color-text-secondary);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-family: inherit;
}
.tab-button:hover { color: var(--bol-color-text-primary); }
.tab-button.active {
	color: var(--bol-color-primary);
	border-bottom-color: var(--bol-color-primary);
	font-weight: 500;
}

.count-badge {
	background: var(--bol-color-background-tertiary);
	color: var(--bol-color-text-primary);
	padding: 4px 12px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 0.85em;
	border: 1px solid var(--bol-color-border);
	min-width: 44px;
	text-align: center;
	display: inline-block;
}

.no-data {
	text-align: center;
	padding: 24px 12px;
	color: var(--bol-color-text-secondary);
	font-size: 0.9em;
}
.loading {
	text-align: center;
	padding: 40px;
	color: var(--bol-color-text-secondary);
}
.ortec-spinner {
	display: block;
	width: 90px;
	height: auto;
	margin: 0 auto;
}

/* The dashboard's jump cards - the landing page's module cards are the same thing */
.dashboard-jumps {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}
.dashboard-jump {
	background: var(--bol-color-background-secondary);
	border: 1px solid var(--bol-color-border);
	border-radius: var(--bol-radius);
	padding: 24px;
	min-width: 220px;
	text-align: center;
	cursor: pointer;
	color: var(--bol-color-text-primary);
	font-family: inherit;
	font-size: 0.95em;
	transition: border-color 0.15s, background 0.15s;
	text-decoration: none;
}
.dashboard-jump:hover {
	border-color: var(--bol-color-primary);
	background: var(--bol-color-hover);
	color: var(--bol-color-text-primary);
}
.dashboard-jump .icon {
	font-size: 1.8em;
	display: block;
	margin-bottom: 8px;
	color: var(--bol-color-primary);
}
.dashboard-jump .jump-title {
	font-weight: 500;
	color: var(--bol-color-primary);
}

@media (max-width: 768px) {
	.ins-appbar { flex-wrap: wrap; }
	.ins-right { margin-left: 0; }
	.ins-topbar { flex-direction: column; align-items: stretch; gap: 10px; }
	.ins-topbar h1 { font-size: 1.1em; }
	.kpi-grid { grid-template-columns: 1fr; }
	.ins-content { padding: 15px; }
	.tabs { flex-wrap: wrap; }
}