/* ===========================================================================
   Driver Scoring Setup — /portal/company/settings/driver-scoring
   ---------------------------------------------------------------------------
   A GLOBAL sheet, not a .razor.css. Blazor scoped CSS stamps its b-xxxxx
   attribute only onto real HTML elements written in the .razor file, never onto
   a component's rendered output, so scoped rules aimed at Blazorise wrappers
   (Div, Card, Button, Tabs) silently match nothing. Every selector below is
   namespaced under .ds- and reached only from that page, so a global sheet
   carries no bleed risk.

   Colours derive from the portal's Metronic/Bootstrap tokens (--bs-primary
   #465FE3, --bs-success, --bs-danger) with literal fallbacks.
   =========================================================================== */

.ds-page {
	--ds-ink: #181c32;
	--ds-ink-soft: #3f4254;
	--ds-muted: #7e8299;
	--ds-line: #eff2f5;
	--ds-line-strong: #e4e6ef;
	--ds-surface: #ffffff;
	--ds-soft: #f8fafc;

	--ds-blue: var(--bs-primary, #465FE3);
	--ds-blue-deep: #2F45C5;
	--ds-green: #15803D;
	--ds-red: #DC2626;
	--ds-amber: #B45309;              /* --bs-warning #FFD533 is far too light for text */
	--ds-purple: #6D28D9;
	--ds-orange: #EA580C;
	--ds-pink: #DB2777;
	--ds-teal: #0F766E;

	--ds-accent: var(--ds-blue);
	--ds-accent-soft: rgba(70, 95, 227, .10);

	padding: 2rem 2.25rem 3rem;
	background: var(--ds-soft);
	min-height: 100%;
	font-family: Inter, Helvetica, sans-serif;
}

/* Every rule in this file is prefixed with .ds-page so nothing can match
   outside the driver scoring page, including these accent overrides. */
.ds-page.ds-accent-asset,
.ds-page .ds-accent-asset { --ds-accent: #465FE3; --ds-accent-soft: rgba(70, 95, 227, .10); }
.ds-page.ds-accent-hos,
.ds-page .ds-accent-hos { --ds-accent: #6366F1; --ds-accent-soft: rgba(99, 102, 241, .10); }
.ds-page.ds-accent-neutral,
.ds-page .ds-accent-neutral { --ds-accent: #7e8299; --ds-accent-soft: rgba(126, 130, 153, .10); }

/* Shared surface --------------------------------------------------------- */

.ds-page .ds-shell {
	background: var(--ds-surface);
	border: 1px solid var(--ds-line-strong);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(24, 28, 50, .04);
}

.ds-page .ds-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 3.5rem 1rem;
	color: var(--ds-muted);
}

.ds-page .ds-banner {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: 1rem 1.25rem;
	border-radius: 14px;
	margin-bottom: 1.25rem;
}

.ds-page .ds-banner-title { font-weight: 700; margin-bottom: .15rem; }
.ds-page .ds-banner-error { color: #7f1d1d; background: rgba(235, 78, 78, .10); border: 1px solid rgba(235, 78, 78, .28); }
.ds-page .ds-banner-error i { color: var(--ds-red); }
.ds-page .ds-banner-warn { color: #7c4a03; background: rgba(255, 213, 51, .16); border: 1px solid rgba(232, 167, 0, .3); }
.ds-page .ds-banner-warn i { color: var(--ds-amber); }

/* Header ----------------------------------------------------------------- */

.ds-page .ds-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.ds-page .ds-head-left { display: flex; align-items: flex-start; gap: 1rem; }

.ds-page .ds-head-icon {
	width: 54px;
	height: 54px;
	flex: 0 0 54px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	color: #fff;
	background: linear-gradient(135deg, #465FE3 0%, #6D28D9 100%);
	border: 0;
	box-shadow: 0 6px 16px rgba(70, 95, 227, .32);
}

.ds-page .ds-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--ds-ink);
	margin: 0 0 .2rem;
	letter-spacing: -.02em;
}

.ds-page .ds-subtitle {
	font-size: .95rem;
	color: var(--ds-muted);
	margin-bottom: .35rem;
}

/* Buttons ---------------------------------------------------------------- */

.ds-page .ds-btn-ghost,
.ds-page .ds-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-weight: 600;
	font-size: .95rem;
	border-radius: 10px;
	padding: .65rem 1.25rem;
	cursor: pointer;
	transition: filter .15s ease, background-color .15s ease;
}

.ds-page .ds-btn-ghost {
	color: var(--ds-blue);
	background: var(--ds-surface);
	border: 1px solid rgba(70, 95, 227, .35);
}

.ds-page .ds-btn-ghost:hover { background: rgba(70, 95, 227, .06); }

.ds-page .ds-btn-primary {
	color: #fff;
	background: var(--ds-blue);
	border: 0;
	box-shadow: 0 4px 12px rgba(70, 95, 227, .26);
	padding: .7rem 1.7rem;
}

.ds-page .ds-btn-primary:hover:not(:disabled) { filter: brightness(1.07); }

.ds-page .ds-btn-primary:disabled {
	color: var(--ds-muted);
	background: var(--ds-line-strong);
	box-shadow: none;
	cursor: not-allowed;
}

/* Source cards ----------------------------------------------------------- */

.ds-page .ds-source-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.ds-page .ds-source {
	padding: 1.35rem 1.5rem;
	border-left: 5px solid var(--ds-line-strong);
}

.ds-page .ds-source.is-on {
	border-left-color: var(--ds-accent);
	box-shadow: 0 6px 18px rgba(24, 28, 50, .08);
}

.ds-page .ds-source.is-off { background: #fcfdfe; }

.ds-page .ds-source-head { display: flex; align-items: flex-start; gap: .9rem; }

.ds-page .ds-source-icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: #fff;
	background: var(--ds-accent);
	box-shadow: 0 4px 10px var(--ds-accent-soft);
}

.ds-page .ds-source.is-off .ds-source-icon {
	color: var(--ds-muted);
	background: var(--ds-line-strong);
	box-shadow: none;
}

.ds-page .ds-source-id { flex: 1 1 auto; min-width: 0; }

.ds-page .ds-source-name {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ds-ink);
	line-height: 1.3;
}

.ds-page .ds-source-status {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-top: .35rem;
}

.ds-page .ds-status {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .9rem;
	color: var(--ds-muted);
}

.ds-page .ds-status.is-on { color: var(--ds-ink-soft); }
.ds-page .ds-status.is-on i { color: var(--ds-green); }

/* Blazorise renders Switch as a form-check; keep it from stretching. */
.ds-page .ds-source-status .form-check { margin: 0; }

/* Stats box -------------------------------------------------------------- */

.ds-page .ds-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 1.1rem;
	padding: .95rem .5rem;
	border: 1px solid var(--ds-line-strong);
	border-radius: 12px;
}

/* Dividers between stats, not around them. */
.ds-page .ds-stat + .ds-stat { border-left: 1px solid var(--ds-line); }

.ds-page .ds-stat { text-align: center; padding: 0 .5rem; }

.ds-page .ds-stat-value {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--ds-blue-deep);
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.ds-page .ds-stat-label { font-size: .78rem; color: var(--ds-muted); margin-top: .1rem; }

.ds-page .ds-info-box {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin-top: 1.1rem;
	padding: 1rem 1.15rem;
	font-size: .9rem;
	color: var(--ds-ink-soft);
	background: var(--ds-soft);
	border: 1px solid var(--ds-line-strong);
	border-radius: 12px;
}

.ds-page .ds-info-box i { margin-top: .15rem; color: var(--ds-blue); }

/* Tabs ------------------------------------------------------------------- */

.ds-page .ds-tabs-shell { overflow: hidden; }

.ds-page .ds-tabs-shell .nav-tabs {
	padding: 0 .75rem;
	border-bottom: 1px solid var(--ds-line-strong);
	gap: .25rem;
}

.ds-page .ds-tabs-shell .nav-tabs .nav-link {
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--ds-muted);
	font-weight: 600;
	padding: 1rem 1.15rem;
	border-radius: 0;
}

.ds-page .ds-tabs-shell .nav-tabs .nav-link:hover { color: var(--ds-ink); }

.ds-page .ds-tabs-shell .nav-tabs .nav-link.active {
	color: var(--ds-blue);
	background: transparent;
	border-bottom-color: var(--ds-blue);
}

.ds-page .ds-tab-badge {
	display: inline-block;
	margin-left: .45rem;
	min-width: 1.25rem;
	padding: 0 .35rem;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
	color: #fff;
	background: var(--ds-amber);
	border-radius: 999px;
}

/* Notes / empty ---------------------------------------------------------- */

.ds-page .ds-note {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin: 1.25rem 1.5rem 0;
	padding: .85rem 1rem;
	font-size: .875rem;
	color: #8a6d00;
	background: rgba(255, 213, 51, .16);
	border: 1px solid rgba(232, 167, 0, .3);
	border-radius: 12px;
}

.ds-page .ds-note i { margin-top: .15rem; color: var(--ds-amber); }

.ds-page .ds-empty { text-align: center; padding: 4rem 1rem; }

.ds-page .ds-empty-icon {
	width: 66px;
	height: 66px;
	margin: 0 auto 1rem;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: var(--ds-accent);
	background: var(--ds-accent-soft);
}

.ds-page .ds-empty-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ds-ink);
	margin-bottom: .45rem;
}

.ds-page .ds-empty-text {
	font-size: .9rem;
	color: var(--ds-muted);
	max-width: 52ch;
	margin: 0 auto;
	line-height: 1.6;
}

/* Table ------------------------------------------------------------------ */

/* Keeps a narrow viewport scrolling the table rather than the page. */
.ds-page .ds-table-wrap { overflow-x: auto; }

/* Fixed layout: with auto layout the Parameter column absorbs every spare
   pixel, which left it several times wider than the fields it labels. */
.ds-page .ds-table {
	width: 100%;
	min-width: 900px;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0;
}

.ds-page .ds-table thead th {
	font-size: .85rem;
	font-weight: 600;
	color: var(--ds-ink-soft);
	background: #f1f5f9;
	border-bottom: 1px solid #cbd5e1;
	white-space: nowrap;
	padding: .9rem 1.25rem;
	text-align: left;
}

.ds-page .ds-th-icon { margin-right: .45rem; color: var(--ds-muted); }

.ds-page .ds-hint { margin-left: .35rem; font-size: .8rem; color: #c9cdd8; cursor: help; }
.ds-page .ds-hint:hover { color: var(--ds-muted); }

.ds-page .ds-table tbody td {
	vertical-align: top;
	border-bottom: 1px solid var(--ds-line);
	padding: 1rem 1.25rem;
}

.ds-page .ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-page .ds-table tbody tr:hover td { background: #f8fafc; }

.ds-page .ds-col-param { width: 32%; }
.ds-page .ds-col-num { width: 18%; }
.ds-page .ds-col-active { width: 14%; text-align: center; }
.ds-page .ds-col-active .form-check { justify-content: center; margin: 0; }

/* Parameter cell --------------------------------------------------------- */

.ds-page .ds-param { display: flex; align-items: flex-start; gap: .85rem; }

.ds-page .ds-param-icon {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .95rem;
}

.ds-page .ds-param-icon i { font-size: 1.05rem; }

.ds-page .ds-tone-blue { color: #1D4ED8; background: #DBEAFE; }
.ds-page .ds-tone-green { color: #15803D; background: #DCFCE7; }
.ds-page .ds-tone-red { color: #B91C1C; background: #FEE2E2; }
.ds-page .ds-tone-amber { color: #B45309; background: #FEF3C7; }
.ds-page .ds-tone-orange { color: #C2410C; background: #FFEDD5; }
.ds-page .ds-tone-purple { color: #6D28D9; background: #EDE9FE; }
.ds-page .ds-tone-pink { color: #BE185D; background: #FCE7F3; }
.ds-page .ds-tone-teal { color: #0F766E; background: #CCFBF1; }
.ds-page .ds-tone-neutral { color: #475569; background: #E2E8F0; }

.ds-page .ds-param-name { font-weight: 600; color: var(--ds-ink); line-height: 1.35; }

.ds-page .ds-level {
	display: inline-block;
	margin-top: .35rem;
	font-size: .75rem;
	font-weight: 600;
	padding: .1rem .55rem;
	border-radius: 6px;
}

.ds-page .ds-level-high { color: #92400E; background: #FDE68A; }
.ds-page .ds-level-highest { color: #7F1D1D; background: #FECACA; }
.ds-page .ds-level-medium { color: #1E3A8A; background: #BFDBFE; }
.ds-page .ds-level-low { color: #14532D; background: #BBF7D0; }
.ds-page .ds-level-neutral { color: #334155; background: #E2E8F0; }

/* Numeric field with the unit beneath ------------------------------------ */

.ds-page .ds-field { display: block; }

.ds-page .ds-field input {
	width: 100%;
	max-width: 11rem;
	font-variant-numeric: tabular-nums;
	border-radius: 9px;
	border: 1px solid var(--ds-line-strong);
	padding: .55rem .85rem;
	color: var(--ds-ink);
	background: var(--ds-surface);
}

.ds-page .ds-field input:focus {
	outline: 0;
	border-color: var(--ds-blue);
	box-shadow: 0 0 0 .2rem rgba(70, 95, 227, .12);
}

.ds-page .ds-unit { display: block; margin-top: .35rem; font-size: .78rem; color: var(--ds-muted); }

/* An inactive row is dimmed but still legible — its values are retained, and
   the user needs to read them to decide whether to switch it back on. */
.ds-page .ds-row-inactive .ds-param-name,
.ds-page .ds-row-inactive .ds-level,
.ds-page .ds-row-inactive .ds-param-icon { opacity: .5; }

/* A left rule marks an edited row without fighting the row hover. */
.ds-page tr.ds-row-dirty td { background: rgba(255, 213, 51, .07); }
.ds-page tr.ds-row-dirty td:first-child { box-shadow: inset 3px 0 0 0 var(--ds-amber); }

/* Footer ----------------------------------------------------------------- */

.ds-page .ds-footer {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--ds-line-strong);
}

.ds-page .ds-fact {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .8rem 1.15rem;
	border-radius: 12px;
	font-size: .875rem;
}

.ds-page .ds-fact-total { background: #E0E7FF; border: 1px solid #C7D2FE; }
.ds-page .ds-fact-active { background: #DCFCE7; border: 1px solid #BBF7D0; }

.ds-page .ds-fact-icon {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.ds-page .ds-fact-total .ds-fact-icon { background: var(--ds-blue-deep); }
.ds-page .ds-fact-active .ds-fact-icon { background: var(--ds-green); }

.ds-page .ds-fact-label { font-size: .8rem; font-weight: 600; color: #475569; }
.ds-page .ds-fact-total .ds-fact-label { color: var(--ds-blue-deep); }
.ds-page .ds-fact-active .ds-fact-label { color: var(--ds-green); }

.ds-page .ds-fact-value {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ds-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.ds-page .ds-save { margin-left: auto; text-align: center; }

.ds-page .ds-save-state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin-top: .5rem;
	font-size: .8rem;
}

.ds-page .ds-saved { color: var(--ds-green); }
.ds-page .ds-pending { color: #8a6d00; font-weight: 600; }
.ds-page .ds-other { color: var(--ds-muted); }

@media (max-width: 991px) {
	.ds-page { padding: 1.25rem 1rem 2rem; }
	.ds-page .ds-footer { flex-direction: column; align-items: stretch; }
	.ds-page .ds-save { margin-left: 0; }
}