/* ===========================================================================
   CompleteStatus — Brand & Theme Layer
   ---------------------------------------------------------------------------
   Loaded AFTER Metronic's style.bundle.css so equal-specificity overrides win
   by source order. This file NEVER edits the vendored bundle; it only maps
   Bootstrap/Metronic CSS custom properties to the CompleteStatus brand and
   adds a small set of brand primitives (logo, auth aside, focus ring).

   Identity: everything green, everything accounted for.
     - Ground .......... deep ink / slate (the logo is built for dark grounds)
     - Primary ......... Status Blue   (the wordmark blue family — interactive UI)
     - Accent .......... Check Green   (the logo check — live/positive signal, sparing)
     - Status colours .. reserved for status only (up/warn/down + A–F grades)
   See docs/BRAND.md for the full system.
   ========================================================================= */

/* ---- Brand tokens: LIGHT (default) ------------------------------------- */
:root,
[data-bs-theme="light"] {
	--wt-ink-900: #0B1121;
	--wt-ink-800: #0D1424;
	--wt-ink-700: #111A2E;
	--wt-ink-600: #16233F;
	--wt-ink-500: #1E2E4E;

	/* Logo blue is #009EF7 — too light for white button text, so interactive
	   primary is a darkened member of the same hue (white on #0077C8 ~= 4.7:1). */
	--wt-primary: #0077C8;
	--wt-primary-rgb: 0, 119, 200;
	--wt-primary-hover: #0086E0;
	--wt-primary-active: #005FA6;
	/* Text/link tint of primary (kept identical on light, brightened on dark) */
	--wt-primary-text: #0077C8;
	--wt-primary-text-rgb: 0, 119, 200;

	/* Wordmark blue — logotype only (WCAG logotype exemption), never body text */
	--wt-brand-blue: #009EF7;

	--wt-accent: #2F7A08;          /* forest check-green on light backgrounds */
	--wt-accent-rgb: 47, 122, 8;
	--wt-accent-strong: #3E9A10;
	/* Focus ring is BRAND PRIMARY (Status Blue) — green is reserved for
	   success/up status signals, never generic input focus. */
	--wt-focus-glow: rgba(0, 119, 200, 0.30);

	/* Semantic (reserved for status only — documented in BRAND.md) */
	--wt-up: #17A34A;
	--wt-warn: #B4780F;
	--wt-down: #DC2645;

	/* Map Bootstrap/Metronic primary -> brand primary */
	--bs-primary: var(--wt-primary);
	--bs-primary-rgb: var(--wt-primary-rgb);
	--bs-primary-active: var(--wt-primary-active);
	--bs-link-color: var(--wt-primary);
	--bs-link-color-rgb: var(--wt-primary-rgb);
	--bs-link-hover-color: var(--wt-primary-active);
}

/* ---- Brand tokens: DARK ------------------------------------------------ */
[data-bs-theme="dark"] {
	--wt-primary: #0077C8;
	--wt-primary-rgb: 0, 119, 200;
	--wt-primary-hover: #0086E0;
	--wt-primary-active: #005FA6;
	/* Brighter tint so text/links clear WCAG AA on ink surfaces */
	--wt-primary-text: #4FC3FF;
	--wt-primary-text-rgb: 79, 195, 255;

	--wt-brand-blue: #009EF7;

	--wt-accent: #59D30B;          /* bright check-green on dark backgrounds */
	--wt-accent-rgb: 89, 211, 11;
	--wt-accent-strong: #6EE81F;
	/* Brighter primary tint so the focus ring clears the ink surfaces. */
	--wt-focus-glow: rgba(79, 195, 255, 0.40);

	--wt-up: #2FD46A;
	--wt-warn: #F0B429;
	--wt-down: #F1416C;

	--bs-primary: var(--wt-primary);
	--bs-primary-rgb: var(--wt-primary-rgb);
	--bs-primary-active: var(--wt-primary-active);
	/* On dark, text-primary / links use the brighter tint for legibility */
	--bs-primary-text-emphasis: var(--wt-primary-text);
	--bs-link-color: var(--wt-primary-text);
	--bs-link-color-rgb: var(--wt-primary-text-rgb);
	--bs-link-hover-color: #82D4FF;
}

/* text-primary / link-primary read --bs-primary-rgb; on dark, retint to the
   brighter tone so they don't muddy against ink. */
[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .link-primary {
	--bs-primary-rgb: var(--wt-primary-text-rgb) !important;
}
.link-primary:hover,
.link-primary:focus {
	color: RGBA(var(--wt-primary-text-rgb), 1) !important;
	text-decoration-color: RGBA(var(--wt-primary-text-rgb), 1) !important;
}

/* ---- Primary button: recolour + guarantee white text ------------------- */
/* Metronic ships black text on a bright-blue primary; our Status Blue needs
   light text for AA contrast (white on #0077C8 ~= 4.7:1). */
.btn.btn-primary {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: var(--wt-primary);
	--bs-btn-border-color: var(--wt-primary);
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: var(--wt-primary-hover);
	--bs-btn-hover-border-color: var(--wt-primary-hover);
	--bs-btn-focus-shadow-rgb: var(--wt-primary-rgb);
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: var(--wt-primary-active);
	--bs-btn-active-border-color: var(--wt-primary-active);
	--bs-btn-disabled-color: #ffffff;
	--bs-btn-disabled-bg: var(--wt-primary);
	--bs-btn-disabled-border-color: var(--wt-primary);
}
/* Light-primary (soft tinted) buttons + badges keep the Status Blue hue */
.btn.btn-light-primary {
	--bs-btn-color: var(--wt-primary);
	--bs-btn-hover-bg: var(--wt-primary);
	--bs-btn-hover-color: #ffffff;
	--bs-btn-active-bg: var(--wt-primary);
	--bs-btn-active-color: #ffffff;
}

/* ---- Accent (Check Green) — sparing utilities -------------------------- */
.text-wt-accent { color: var(--wt-accent) !important; }
.bg-wt-accent { background-color: var(--wt-accent) !important; }
.wt-beacon-dot {
	display: inline-block;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--wt-accent);
	/* Status dot keeps its GREEN halo (up/positive signal) — deliberately not
	   --wt-focus-glow, which is now the blue focus ring. */
	box-shadow: 0 0 0 3px rgba(var(--wt-accent-rgb), .30);
}

/* ---- Accessible focus ring (brand-primary glow) ------------------------ */
/* Visible, keyboard-only focus for interactive elements. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible,
.menu-link:focus-visible,
[tabindex]:focus-visible {
	/* Reads the light/dark primary text tint so the ring stays visible on ink. */
	outline: 2px solid rgb(var(--wt-primary-text-rgb));
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--wt-focus-glow) !important;
	border-radius: 6px;
}
.form-control:focus {
	border-color: var(--wt-primary);
	box-shadow: 0 0 0 .2rem rgba(var(--wt-primary-rgb), .18);
}

/* ===========================================================================
   Logo lockup (full company PNG, 350x60)
   Delivered as <x-brand-logo>. Both ground variants are rendered; CSS shows
   the right one for the ground: the white-wordmark original on dark grounds
   (.wt-on-dark, .app-sidebar, dark theme), the ink-wordmark logo-light.png on
   light grounds. display:none also removes the hidden one from the
   accessibility tree, so screen readers announce the logo once.
   ========================================================================= */
.wt-logo {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}
.wt-logo__mark,
.wt-logo__full { flex: 0 0 auto; display: block; object-fit: contain; }
.wt-logo__full--on-dark { display: none; }
[data-bs-theme="dark"] .wt-logo__full--on-light,
.wt-on-dark .wt-logo__full--on-light,
.app-sidebar .wt-logo__full--on-light { display: none; }
[data-bs-theme="dark"] .wt-logo__full--on-dark,
.wt-on-dark .wt-logo__full--on-dark,
.app-sidebar .wt-logo__full--on-dark { display: block; }
.wt-on-dark { color: #F5F7FB; }

/* ===========================================================================
   App shell polish
   ========================================================================= */
/* Sidebar logo header: give it breathing room + a hairline base */
.app-sidebar-logo {
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
/* Expanded/collapsed logo toggle: Metronic's `.app-sidebar-logo-minimize
   { display: none }` ties .wt-logo's inline-flex on specificity and this file
   loads later, so the mark leaked in next to the full lockup. Restate the
   toggle at higher specificity (mirrors style.bundle.css behaviour). */
.app-sidebar-logo .app-sidebar-logo-minimize { display: none; }
[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hoverable=true]) .app-sidebar-logo .app-sidebar-logo-default { display: none; }
[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hoverable=true]) .app-sidebar-logo .app-sidebar-logo-minimize { display: inline-flex; }
[data-kt-app-sidebar-minimize=on][data-kt-app-sidebar-hoverable=true] .app-sidebar:not(:hover) .app-sidebar-logo .app-sidebar-logo-default { display: none; }
[data-kt-app-sidebar-minimize=on][data-kt-app-sidebar-hoverable=true] .app-sidebar:not(:hover) .app-sidebar-logo .app-sidebar-logo-minimize { display: inline-flex; }
/* Active nav item: Status Blue fill is Metronic default via --bs-primary; add
   a left check-green accent bar for identity (used only as a status-of-place
   marker, not decoration). */
.app-sidebar .menu-item .menu-link.active {
	position: relative;
}
.app-sidebar .menu-item > .menu-link.active::before {
	content: "";
	position: absolute;
	left: -.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1.15rem;
	border-radius: 2px;
	background: #59D30B; /* always the bright green — the sidebar is always ink */
}
/* Topbar user identity chip */
.wt-user-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .25rem .35rem;
	border-radius: 8px;
	transition: background-color .15s ease;
}
.wt-user-chip:hover { background: rgba(var(--wt-primary-rgb), .08); }
.wt-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .02em;
	color: #fff;
	background: linear-gradient(135deg, var(--wt-primary) 0%, var(--wt-primary-active) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.wt-new-btn { font-weight: 600; }

/* ===========================================================================
   Auth experience (guest layout)
   ========================================================================= */
.wt-auth {
	min-height: 100vh;
}
/* Branded aside — the operations panel (ink ground, green + blue glows) */
.wt-auth-aside {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 82% 8%, rgba(89, 211, 11, .13) 0%, rgba(89, 211, 11, 0) 46%),
		radial-gradient(90% 70% at 15% 100%, rgba(0, 158, 247, .24) 0%, rgba(0, 158, 247, 0) 55%),
		linear-gradient(150deg, #0B1121 0%, #16233F 100%);
	color: #F5F7FB;
}
/* Fine grid lines evoke a monitoring scope */
.wt-auth-aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(120% 100% at 50% 30%, #000 40%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 40%, transparent 78%);
	pointer-events: none;
}
.wt-auth-aside__content { position: relative; z-index: 2; }
.wt-auth-aside__title {
	font-weight: 700;
	font-size: clamp(1.6rem, 2.4vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -.02em;
}
.wt-auth-aside__lead { color: rgba(245, 247, 251, .74); }
.wt-auth-aside__list { list-style: none; margin: 0; padding: 0; }
.wt-auth-aside__list li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	color: rgba(245, 247, 251, .86);
	padding: .3rem 0;
}
.wt-auth-aside__list svg { flex: 0 0 auto; margin-top: .15rem; }

/* Animated "live" pulse — check green (respects reduced motion) */
.wt-beacon-pulse {
	position: absolute;
	top: 8%;
	right: 12%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #59D30B;
	box-shadow: 0 0 14px 2px rgba(89, 211, 11, .65);
	z-index: 2;
}
.wt-beacon-pulse::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(89, 211, 11, .55);
	animation: wt-pulse 2.8s ease-out infinite;
}
@keyframes wt-pulse {
	0%   { transform: scale(.6); opacity: .9; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wt-beacon-pulse::before { animation: none; }
}
/* Labeled variant: the auth aside's pulse reads as a live status signal, not
   a stray dot — the container takes over the absolute positioning. */
.wt-beacon-labeled {
	position: absolute;
	top: 8%;
	right: 12%;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	z-index: 2;
}
.wt-beacon-labeled .wt-beacon-pulse {
	position: static;
	flex: 0 0 auto;
}
.wt-beacon-labeled .wt-beacon-caption {
	color: rgba(245, 247, 251, .78);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* Auth form column */
.wt-auth-form-col { background: var(--bs-body-bg); }
.wt-auth-card { width: 100%; max-width: 26rem; }
.wt-auth-social .btn {
	--bs-btn-border-color: var(--bs-gray-300);
	font-weight: 600;
}
.wt-auth-divider {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: var(--bs-gray-500);
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.wt-auth-divider::before,
.wt-auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--bs-gray-300);
}

/* Metrics / data use the mono stack (documented in BRAND.md) */
.wt-mono {
	font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums;
}

/* Auth aside headline — Metronic's h1 colour otherwise wins and renders it
   dark-on-dark against the ink panel. Force the light ink tint. */
.wt-auth-aside__title { color: #F5F7FB; }

/* ===========================================================================
   Marketing primitives
   ========================================================================= */
/* Repeated ink gradient (hero, pricing band, footer, final CTA). */
.wt-ink-band {
	background: linear-gradient(112deg, #0B1121 0%, #16233F 100%);
}

/* Retire Metronic's decorative curve sliver (2026-08-01). Its SVG fills with
   `.landing-dark-color` — a FLAT #13263C — while every band it borders uses the
   ink gradient above, so it rendered as a lighter crescent ("half moon") along
   the band edge. A flat fill cannot match a gradient at both ends, so the shape
   goes rather than the color changing; the band edge is now a clean straight
   line. The wrapper div stays visible so its spacing utilities still apply.
   To bring the curve back, give the SVG a matching <linearGradient> fill
   instead of `currentColor` — do not simply un-hide it. */
.landing-curve svg {
	display: none;
}

/* On-dark outline button — Bootstrap/Metronic ship no `btn-outline-white`.
   White outline + white text that fills to solid white on hover, for CTAs
   sitting on the dark hero/CTA bands. */
.btn.btn-outline-white {
	--bs-btn-color: #ffffff;
	--bs-btn-border-color: rgba(255, 255, 255, .55);
	--bs-btn-bg: transparent;
	--bs-btn-hover-color: var(--wt-primary);
	--bs-btn-hover-bg: #ffffff;
	--bs-btn-hover-border-color: #ffffff;
	--bs-btn-active-color: var(--wt-primary);
	--bs-btn-active-bg: #ffffff;
	--bs-btn-active-border-color: #ffffff;
	border-width: 1px;
	border-style: solid;
}

/* "Most popular" pricing badge on the dark pricing band. Bootstrap has no
   `badge-white`; this gives a solid white pill with Status Blue text. */
.badge.badge-white {
	background-color: #ffffff;
	color: var(--wt-primary);
}

/* Plain terminal/code card: neutralise Metronic's pink inline-<code> styling
   so copy-paste fix snippets read as plain terminal text. Scoped to the card. */
.wt-code-plain code {
	background: transparent !important;
	color: inherit !important;
	padding: 0 !important;
}

/* "Show older incidents" disclosure on public status pages — drop the native
   triangle marker so the styled button summary reads cleanly. */
.wt-older-incidents > summary {
	list-style: none;
	cursor: pointer;
}
.wt-older-incidents > summary::-webkit-details-marker { display: none; }
.wt-older-incidents > summary::marker { content: ""; }

/* ===========================================================================
   Marketing & blog visual system — "monitoring console"
   The marketing surface borrows the product's own artifacts instead of stock
   theme decoration: mono log-label eyebrows with a live status dot, and cards
   that "report healthy" (green top tick) on hover. Scope class .wt-mkt is set
   on the marketing and blog layout roots.
   ========================================================================= */

/* --- Log-label eyebrows --------------------------------------------------- */
/* Replaces the generic badge pill above headings: a live status dot + mono
   uppercase label, the way the product labels a healthy monitor. */
.wt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #5E6B85;
}
.wt-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #59D30B;
	box-shadow: 0 0 8px rgba(89, 211, 11, .7);
}
.wt-eyebrow--ink { color: rgba(245, 247, 251, .62); }

/* --- Cards that report healthy on hover ---------------------------------- */
.wt-card-tick {
	position: relative;
	border: 1px solid rgba(30, 46, 78, .12) !important;
	border-radius: 14px;
	box-shadow: none !important;
	overflow: hidden;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wt-card-tick::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 100%;
	height: 3px;
	background: #59D30B;
	transition: right .22s ease;
	z-index: 1;
}
.wt-card-tick:hover,
.wt-card-tick:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(0, 119, 200, .4) !important;
	box-shadow: 0 14px 30px rgba(11, 17, 33, .10) !important;
}
.wt-card-tick:hover::before,
.wt-card-tick:focus-visible::before { right: 0; }

/* --- Scope-grid backdrop on the hero ------------------------------------- */
/* The fine monitoring-scope grid from the auth aside, reused on the landing
   hero so the dark bands read as one product surface. */
.wt-scope-grid { position: relative; }
.wt-scope-grid::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(120% 100% at 50% 20%, #000 35%, transparent 80%);
	-webkit-mask-image: radial-gradient(120% 100% at 50% 20%, #000 35%, transparent 80%);
	pointer-events: none;
}
.wt-scope-grid > * { position: relative; z-index: 2; }

/* --- Type + data discipline on the marketing surface ---------------------- */
.wt-mkt h1 { letter-spacing: -.035em; }
.wt-mkt .fs-2hx { letter-spacing: -.03em; }
/* Prices and totals read as instrument data: mono + tabular numerals. */
.wt-mkt .table td.text-end,
.wt-mkt .fs-3x.fw-bolder {
	font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums;
}
.wt-mkt .fs-3x.fw-bolder { letter-spacing: -.04em; }

@media (prefers-reduced-motion: reduce) {
	.wt-card-tick,
	.wt-card-tick::before { transition: none; }
	.wt-card-tick:hover { transform: none; }
}