/* =====================================================================
   SMRC - LIQUID GLASS
   ---------------------------------------------------------------------
   An additive visual layer loaded LAST (after every other stylesheet).
   It changes how surfaces LOOK only - material, edges, depth, shapes -
   and never layout logic, markup, scripts or print output.

   - Everything is scoped to  body.smrc-app-page.smrc-lg  . The "smrc-lg"
     body class is added in PHP (smrc_body_class) only while Liquid Glass
     is enabled, so switching it off (filter `smrc_liquid_glass`, or the
     SMRC_DISABLE_LIQUID_GLASS constant) restores the previous look
     instantly with no other change.
   - The Rwanda flag palette is kept: blue / gold / green are the tint,
     the glass is the material.
   - Screen only. Report cards, receipts, invoices and every printout are
     untouched (@media screen wrapper).
   - HARD RULE: no backdrop-filter on anything that can contain a
     position:fixed pop-up (portal body/main, the quick-pay box, and any
     box that has a .smrc-modal inside it). A filtered ancestor becomes the
     containing block for fixed children and clips the pop-up. These are
     guarded with :has() below.
   ===================================================================== */

@media screen {

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg {
	--lg-blur: 20px;
	--lg-sat: 190%;
	--lg-r: 26px;        /* large surfaces: cards, panels */
	--lg-r-sm: 16px;     /* fields, small tiles */
	--lg-ink: #0b2236;
	--lg-ink-soft: #3b5368;

	/* glass fills (light mode): bright, milky, readable */
	--lg-fill: linear-gradient(135deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.52) 100%);
	--lg-fill-chrome: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 100%);
	--lg-field: rgba(255,255,255,.66);
	--lg-field-focus: rgba(255,255,255,.96);
	--lg-hair: rgba(255,255,255,.80);               /* bright rim */
	--lg-edge: rgba(8,52,84,.13);                   /* outer hairline so glass reads on light backdrops */

	/* the "lens": bright top edge + soft inner rim + dim bottom lip */
	--lg-hi:
		inset 0 1.5px 0 rgba(255,255,255,.95),
		inset 1.5px 0 0 rgba(255,255,255,.55),
		inset -1.5px 0 0 rgba(255,255,255,.30),
		inset 0 -1.5px 0 rgba(255,255,255,.40);
	--lg-shadow:
		0 0 0 1px var(--lg-edge),
		0 1px 2px rgba(8,52,84,.07),
		0 14px 34px -14px rgba(8,52,84,.30),
		0 34px 70px -34px rgba(8,52,84,.32);
	--lg-shadow-float:
		0 0 0 1px var(--lg-edge),
		0 10px 28px -8px rgba(8,52,84,.34),
		0 30px 60px -28px rgba(8,52,84,.40);
}
body.smrc-app-page.smrc-lg.smrc-dark {
	--lg-ink: #eaf3fb;
	--lg-ink-soft: #a9bdd0;
	--lg-fill: linear-gradient(135deg, rgba(40,66,112,.58) 0%, rgba(14,28,56,.50) 100%);
	--lg-fill-chrome: linear-gradient(135deg, rgba(60,92,150,.46) 0%, rgba(16,32,64,.40) 100%);
	--lg-field: rgba(255,255,255,.09);
	--lg-field-focus: rgba(255,255,255,.17);
	--lg-hair: rgba(255,255,255,.30);
	--lg-edge: rgba(255,255,255,.10);
	--lg-hi:
		inset 0 1.5px 0 rgba(255,255,255,.34),
		inset 1.5px 0 0 rgba(255,255,255,.14),
		inset -1.5px 0 0 rgba(255,255,255,.07),
		inset 0 -1.5px 0 rgba(255,255,255,.10);
	--lg-shadow:
		0 0 0 1px var(--lg-edge),
		0 14px 36px -14px rgba(0,0,0,.65),
		0 34px 70px -34px rgba(0,0,0,.70);
	--lg-shadow-float:
		0 0 0 1px var(--lg-edge),
		0 12px 30px -8px rgba(0,0,0,.65),
		0 30px 60px -28px rgba(0,0,0,.75);
}

/* ---------------------------------------------------------------------
   2. BACKDROP - something colourful and soft for the glass to refract
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg {
	background-color: #e7f2fa;
	background-image:
		radial-gradient(1100px 720px at 4% -6%,  rgba(0,161,222,.50), transparent 60%),
		radial-gradient(900px 640px at 102% 6%,  rgba(32,96,61,.30),  transparent 58%),
		radial-gradient(820px 620px at 80% 108%, rgba(250,210,1,.30), transparent 62%),
		radial-gradient(720px 540px at 14% 98%,  rgba(124,58,237,.20), transparent 60%),
		linear-gradient(180deg, #e3f0f9 0%, #f2f9fd 100%);
}
body.smrc-app-page.smrc-lg.smrc-dark {
	background-color: #050d24;
	background-image:
		radial-gradient(1000px 720px at 10% -4%, rgba(46,76,235,.62), transparent 62%),
		radial-gradient(900px 660px at 96% 22%,  rgba(0,161,222,.36), transparent 60%),
		radial-gradient(820px 620px at 58% 110%, rgba(124,92,255,.42), transparent 62%),
		radial-gradient(640px 420px at 0% 100%,  rgba(32,96,61,.36),  transparent 60%),
		linear-gradient(180deg, #040a1f 0%, #071233 100%);
}
/* Two slow "liquid" blobs drifting behind everything. Pure decoration:
   behind all content (z-index:-1), never receives clicks. */
body.smrc-app-page.smrc-lg::before,
body.smrc-app-page.smrc-lg::after {
	content: ""; position: fixed; z-index: -1; pointer-events: none;
	border-radius: 50%; filter: blur(46px); opacity: .55;
	will-change: transform;
}
body.smrc-app-page.smrc-lg::before {
	width: 44vw; height: 44vw; left: -8vw; top: 28vh;
	background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.75), rgba(0,161,222,.30) 55%, transparent 72%);
	animation: smrc-lg-drift-a 38s ease-in-out infinite alternate;
}
body.smrc-app-page.smrc-lg::after {
	width: 38vw; height: 38vw; right: -6vw; top: -6vh;
	background: radial-gradient(circle at 60% 40%, rgba(255,255,255,.65), rgba(250,210,1,.26) 52%, transparent 72%);
	animation: smrc-lg-drift-b 46s ease-in-out infinite alternate;
}
body.smrc-app-page.smrc-lg.smrc-dark::before { background: radial-gradient(circle at 35% 35%, rgba(120,150,255,.55), rgba(46,76,235,.30) 55%, transparent 72%); opacity: .5; }
body.smrc-app-page.smrc-lg.smrc-dark::after  { background: radial-gradient(circle at 60% 40%, rgba(140,120,255,.50), rgba(0,161,222,.26) 52%, transparent 72%); opacity: .5; }
@keyframes smrc-lg-drift-a { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(9vw,-12vh,0) scale(1.18); } }
@keyframes smrc-lg-drift-b { from { transform: translate3d(0,0,0) scale(1.1); }  to { transform: translate3d(-10vw,14vh,0) scale(.92); } }

/* ---------------------------------------------------------------------
   3. SHELL: floating glass top bar, glass navigation, transparent body
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg .smrc-portal-topbar {
	border-radius: 999px;
	margin-bottom: 16px;
	padding: 10px 14px 10px 16px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 52%),
		linear-gradient(100deg, rgba(0,125,174,.84) 0%, rgba(0,161,222,.76) 46%, rgba(250,210,1,.66) 72%, rgba(32,96,61,.84) 100%);
	border: 1px solid rgba(255,255,255,.60);
	box-shadow: var(--lg-hi), var(--lg-shadow-float);
	backdrop-filter: blur(22px) saturate(var(--lg-sat));
	-webkit-backdrop-filter: blur(22px) saturate(var(--lg-sat));
}
body.smrc-app-page.smrc-lg.smrc-dark .smrc-portal-topbar {
	background:
		linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 52%),
		linear-gradient(100deg, rgba(0,100,150,.80) 0%, rgba(0,130,190,.70) 46%, rgba(200,168,0,.58) 72%, rgba(20,80,50,.82) 100%);
	border-color: rgba(255,255,255,.32);
}

/* The body wrapper stops being a big white card: panels float on the backdrop */
body.smrc-app-page.smrc-lg .smrc-portal-body {
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
	min-height: 0;
}

@media (min-width: 783px) {
	body.smrc-app-page.smrc-lg .smrc-portal-body { gap: 18px; align-items: flex-start; }
	/* room for glass shadows / hover lift: the main area scrolls (overflow-x:auto) and would clip them */
	body.smrc-app-page.smrc-lg .smrc-portal-main { padding: 12px 18px 36px; }

	/* Navigation = a floating glass capsule panel */
	body.smrc-app-page.smrc-lg .smrc-portal-nav {
		position: sticky; top: 14px; align-self: flex-start;
		max-height: calc(100vh - 28px); overflow-y: auto; overflow-x: hidden;
		padding: 12px;
		border-radius: 30px;
		background: var(--lg-fill-chrome);
		border: 1px solid var(--lg-hair);
		box-shadow: var(--lg-hi), var(--lg-shadow-float);
		backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
		-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
		scrollbar-width: thin; scrollbar-color: rgba(120,150,175,.45) transparent;
	}
	/* keep the existing collapsed state fully collapsed (it must out-rank the panel look above) */
	body.smrc-app-page.smrc-lg:not(.smrc-nav-open) .smrc-portal-nav {
		width: 0; min-width: 0; padding: 0; border: 0; opacity: 0; overflow: hidden;
		box-shadow: none; pointer-events: none;
		backdrop-filter: none; -webkit-backdrop-filter: none;
	}
}

/* Nav items: capsules. Active item = a brighter "lens" capsule */
body.smrc-app-page.smrc-lg .smrc-portal-nav button {
	border-radius: 999px;
	border: 1px solid transparent;
	padding: 10px 16px;
	color: var(--lg-ink);
	transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .2s ease, box-shadow .2s ease, color .2s ease;
}
body.smrc-app-page.smrc-lg .smrc-portal-nav button:hover {
	background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.36));
	box-shadow: var(--lg-hi), 0 6px 16px -8px rgba(8,52,84,.35);
	color: var(--rw-blue-dark);
	transform: translateX(2px);
}
body.smrc-app-page.smrc-lg .smrc-portal-nav button:active { transform: scale(.97); }
body.smrc-app-page.smrc-lg .smrc-portal-nav button.active {
	background:
		linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.48) 100%),
		linear-gradient(135deg, rgba(0,161,222,.34), rgba(32,96,61,.18));
	color: var(--rw-blue-dark);
	font-weight: 800;
	border-color: rgba(255,255,255,.9);
	box-shadow:
		var(--lg-hi),
		inset 0 0 0 1px rgba(229,190,1,.55),
		0 8px 20px -8px rgba(0,125,174,.55);
}
body.smrc-app-page.smrc-lg .smrc-portal-nav button.active .smrc-nav-icon { color: var(--rw-blue-dark); filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)); }

body.smrc-app-page.smrc-lg.smrc-dark .smrc-portal-nav button { color: #d6e6f5; }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-portal-nav button:hover {
	background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
	color: #ffffff;
}
body.smrc-app-page.smrc-lg.smrc-dark .smrc-portal-nav button.active {
	background:
		linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 100%),
		linear-gradient(135deg, rgba(0,161,222,.40), rgba(32,96,61,.30));
	color: #ffffff;
	border-color: rgba(255,255,255,.4);
	box-shadow: var(--lg-hi), inset 0 0 0 1px rgba(250,210,1,.55), 0 8px 22px -8px rgba(0,161,222,.6);
}
body.smrc-app-page.smrc-lg.smrc-dark .smrc-portal-nav button.active .smrc-nav-icon { color: var(--rw-yellow); filter: none; }

/* Top-bar controls: glass capsules */
body.smrc-app-page.smrc-lg .smrc-nav-toggle {
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 55%),
		linear-gradient(135deg, rgba(0,101,140,.78), rgba(20,84,56,.78));
	border: 1px solid rgba(255,255,255,.55);
	box-shadow: var(--lg-hi), 0 8px 18px -8px rgba(0,60,90,.6);
}
body.smrc-app-page.smrc-lg .smrc-theme-toggle {
	background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.42));
	color: #0b3550;
	border: 1px solid rgba(255,255,255,.9);
	box-shadow: var(--lg-hi), 0 6px 14px -6px rgba(0,50,80,.5);
}
body.smrc-app-page.smrc-lg .smrc-theme-toggle:hover { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.60)); border-color: #fff; }
body.smrc-app-page.smrc-lg .smrc-badge {
	background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.16));
	border: 1px solid rgba(255,255,255,.55);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
body.smrc-app-page.smrc-lg .smrc-portal-avatar {
	background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
	border: 1.5px solid rgba(255,255,255,.85);
	box-shadow: var(--lg-hi), 0 4px 10px -4px rgba(0,40,70,.5);
}
body.smrc-app-page.smrc-lg .smrc-lang-btn {
	border-radius: 999px;
	background: rgba(255,255,255,.58);
	color: #0b3550;
	border: 1px solid rgba(255,255,255,.85);
	opacity: 1;
	text-shadow: none;
}
body.smrc-app-page.smrc-lg .smrc-lang-btn.is-active { background: linear-gradient(135deg, #007dae, #00a1de); color: #fff; }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-lang-btn { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.35); }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-lang-btn.is-active { background: linear-gradient(135deg, #007dae, #00a1de); }
body.smrc-app-page.smrc-lg a.smrc-btn { text-decoration: none; }

/* ---------------------------------------------------------------------
   4. SURFACES: cards, panels and tiles share one glass material
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg .smrc-card,
body.smrc-app-page.smrc-lg .smrc-stat-card,
body.smrc-app-page.smrc-lg .smrc-fin-mini-stat,
body.smrc-app-page.smrc-lg .smrc-ext-kpi,
body.smrc-app-page.smrc-lg .smrc-contact-card,
body.smrc-app-page.smrc-lg .smrc-service-card,
body.smrc-app-page.smrc-lg .smrc-choice-card {
	background: var(--lg-fill);
	border-radius: var(--lg-r);
	border-right: 1px solid var(--lg-hair);
	border-bottom: 1px solid var(--lg-hair);
	border-left: 1px solid var(--lg-hair);
	box-shadow: var(--lg-hi), var(--lg-shadow);
	backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
	-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
	color: var(--lg-ink);
}
/* the flag-blue cap on cards is kept (it is part of the brand) but sits inside the curve */
body.smrc-app-page.smrc-lg .smrc-card { border-top-width: 3px; }

/* Never filter a surface that holds a pop-up (see HARD RULE above) */
@supports selector(:has(*)) {
	body.smrc-app-page.smrc-lg .smrc-card:has(.smrc-modal),
	body.smrc-app-page.smrc-lg .smrc-stat-card:has(.smrc-modal) {
		backdrop-filter: none; -webkit-backdrop-filter: none;
	}
}

/* Stat cards: keep the four flag hues, as tinted glass instead of flat gradients */
body.smrc-app-page.smrc-lg .smrc-stat-card { border-left-width: 5px; }
body.smrc-app-page.smrc-lg .smrc-stat-card:nth-child(4n+1) { border-left-color: var(--rw-blue);  background: linear-gradient(135deg, rgba(255,255,255,.93) 0%, rgba(0,161,222,.20) 100%); }
body.smrc-app-page.smrc-lg .smrc-stat-card:nth-child(4n+2) { border-left-color: var(--rw-green); background: linear-gradient(135deg, rgba(255,255,255,.93) 0%, rgba(22,163,74,.20) 100%); }
body.smrc-app-page.smrc-lg .smrc-stat-card:nth-child(4n+3) { border-left-color: var(--rw-gold);  background: linear-gradient(135deg, rgba(255,255,255,.93) 0%, rgba(229,190,1,.26) 100%); }
body.smrc-app-page.smrc-lg .smrc-stat-card:nth-child(4n+4) { border-left-color: var(--rw-plum);  background: linear-gradient(135deg, rgba(255,255,255,.93) 0%, rgba(139,92,246,.20) 100%); }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-stat-card:nth-child(4n+1) { border-left-color: #38bdf8; background: linear-gradient(135deg, rgba(56,189,248,.26) 0%, rgba(12,36,54,.52) 100%); }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-stat-card:nth-child(4n+2) { border-left-color: #34d399; background: linear-gradient(135deg, rgba(52,211,153,.24) 0%, rgba(13,36,25,.52) 100%); }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-stat-card:nth-child(4n+3) { border-left-color: var(--rw-yellow); background: linear-gradient(135deg, rgba(250,210,1,.24) 0%, rgba(42,34,16,.52) 100%); }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-stat-card:nth-child(4n+4) { border-left-color: #c084fc; background: linear-gradient(135deg, rgba(192,132,252,.26) 0%, rgba(32,26,58,.52) 100%); }
body.smrc-app-page.smrc-lg .smrc-stat-card:hover {
	transform: translateY(-4px) scale(1.012);
	box-shadow: var(--lg-hi), var(--lg-shadow-float);
	transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
body.smrc-app-page.smrc-lg .smrc-stat-icon {
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.35));
	box-shadow: var(--lg-hi), 0 4px 10px -4px rgba(8,52,84,.3);
}

/* Interactive tiles get a springy lift */
body.smrc-app-page.smrc-lg .smrc-choice-card,
body.smrc-app-page.smrc-lg .smrc-service-card,
body.smrc-app-page.smrc-lg .smrc-section-card {
	transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .2s ease;
}
body.smrc-app-page.smrc-lg .smrc-choice-card:hover,
body.smrc-app-page.smrc-lg .smrc-service-card:hover,
body.smrc-app-page.smrc-lg .smrc-section-card:hover { transform: translateY(-4px) scale(1.012); }
body.smrc-app-page.smrc-lg .smrc-section-card {
	border-radius: var(--lg-r);
	box-shadow: var(--lg-hi), var(--lg-shadow);
}

/* Small captions: the old muted grey was too faint on glass */
body.smrc-app-page.smrc-lg .smrc-stat-label { color: var(--lg-ink-soft); }

/* Headings read on glass in both modes */
body.smrc-app-page.smrc-lg .smrc-h1,
body.smrc-app-page.smrc-lg .smrc-card h3 { color: var(--lg-ink); }
body.smrc-app-page.smrc-lg .smrc-muted { color: var(--lg-ink-soft); }

/* ---------------------------------------------------------------------
   5. BUTTONS: capsules of tinted glass with a lit top edge
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg .smrc-btn {
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 52%),
		linear-gradient(135deg, rgba(0,125,174,.96) 0%, rgba(32,96,61,.94) 100%);
	border: 1px solid rgba(255,255,255,.50);
	color: #ffffff;
	box-shadow:
		inset 0 1.5px 0 rgba(255,255,255,.60),
		inset 0 -1.5px 0 rgba(0,0,0,.14),
		0 10px 22px -10px rgba(0,101,140,.70);
	transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease;
}
body.smrc-app-page.smrc-lg .smrc-btn:hover {
	transform: translateY(-2px) scale(1.025);
	filter: saturate(1.15) brightness(1.04);
	box-shadow:
		inset 0 1.5px 0 rgba(255,255,255,.70),
		inset 0 -1.5px 0 rgba(0,0,0,.14),
		0 16px 28px -10px rgba(0,101,140,.75);
}
body.smrc-app-page.smrc-lg .smrc-btn:active { transform: scale(.96); }
body.smrc-app-page.smrc-lg .smrc-btn:disabled,
body.smrc-app-page.smrc-lg .smrc-btn[disabled] { filter: grayscale(.4); opacity: .6; transform: none; }

body.smrc-app-page.smrc-lg .smrc-btn-secondary,
body.smrc-app-page.smrc-lg .smrc-btn-ghost,
body.smrc-app-page.smrc-lg .smrc-modal-box .smrc-btn-ghost {
	background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.48) 100%);
	color: #00587a;
	border: 1px solid rgba(255,255,255,.95);
	box-shadow:
		var(--lg-hi),
		0 0 0 1px rgba(0,125,174,.30),
		0 8px 18px -10px rgba(8,52,84,.45);
}
body.smrc-app-page.smrc-lg .smrc-btn-secondary:hover,
body.smrc-app-page.smrc-lg .smrc-btn-ghost:hover,
body.smrc-app-page.smrc-lg .smrc-modal-box .smrc-btn-ghost:hover {
	background:
		linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 52%),
		linear-gradient(135deg, rgba(0,125,174,.96), rgba(0,161,222,.92));
	color: #ffffff;
	box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), 0 12px 24px -10px rgba(0,101,140,.7);
}
body.smrc-app-page.smrc-lg .smrc-btn-danger {
	background:
		linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 52%),
		linear-gradient(135deg, rgba(220,38,38,.95), rgba(185,28,28,.95));
	box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -1.5px 0 rgba(0,0,0,.15), 0 10px 22px -10px rgba(185,28,28,.7);
}
body.smrc-app-page.smrc-lg.smrc-dark .smrc-btn-secondary,
body.smrc-app-page.smrc-lg.smrc-dark .smrc-btn-ghost,
body.smrc-app-page.smrc-lg.smrc-dark .smrc-modal-box .smrc-btn-ghost {
	background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
	color: #e8f4ff;
	border-color: rgba(255,255,255,.35);
	box-shadow: var(--lg-hi), 0 8px 18px -10px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------------
   6. FIELDS: recessed glass. Only look is changed - never size or layout.
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=submit],[type=button])),
body.smrc-app-page.smrc-lg select,
body.smrc-app-page.smrc-lg textarea {
	background: var(--lg-field);
	color: var(--lg-ink);
	border: 1px solid var(--lg-hair);
	border-radius: var(--lg-r-sm);
	box-shadow:
		inset 0 2px 5px rgba(8,52,84,.10),
		0 0 0 1px rgba(8,52,84,.10);
	transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.smrc-app-page.smrc-lg input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=submit],[type=button])):focus,
body.smrc-app-page.smrc-lg select:focus,
body.smrc-app-page.smrc-lg textarea:focus {
	outline: none;
	background: var(--lg-field-focus);
	border-color: rgba(0,161,222,.75);
	box-shadow:
		inset 0 2px 4px rgba(8,52,84,.06),
		0 0 0 4px rgba(0,161,222,.26),
		0 0 0 1px rgba(0,125,174,.65);
}
body.smrc-app-page.smrc-lg ::placeholder { color: var(--lg-ink-soft); opacity: .75; }
body.smrc-app-page.smrc-lg.smrc-dark input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=submit],[type=button])),
body.smrc-app-page.smrc-lg.smrc-dark select,
body.smrc-app-page.smrc-lg.smrc-dark textarea {
	box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.10);
}
body.smrc-app-page.smrc-lg.smrc-dark select option { background: #0e1c38; color: #eaf3fb; }

/* ---------------------------------------------------------------------
   7. TABLES: glass body, branded header with a soft sheen
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg .smrc-table-wrap {
	border-radius: 20px;
	border: 1px solid var(--lg-hair);
	box-shadow: var(--lg-hi), var(--lg-shadow);
}
body.smrc-app-page.smrc-lg .smrc-table {
	background: rgba(255,255,255,.40);
	color: var(--lg-ink);
}
body.smrc-app-page.smrc-lg.smrc-dark .smrc-table { background: rgba(10,22,44,.45); }
body.smrc-app-page.smrc-lg .smrc-table th {
	background-image: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%);
}
body.smrc-app-page.smrc-lg .smrc-table tr:first-child th:first-child { border-top-left-radius: 14px; }
body.smrc-app-page.smrc-lg .smrc-table tr:first-child th:last-child  { border-top-right-radius: 14px; }
body.smrc-app-page.smrc-lg .smrc-table td { color: var(--lg-ink); border-bottom-color: rgba(8,52,84,.08); }
body.smrc-app-page.smrc-lg .smrc-table tr:hover td { background: rgba(0,161,222,.10); }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-table td { border-bottom-color: rgba(255,255,255,.08); }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-table tr:hover td { background: rgba(255,255,255,.07); }

/* ---------------------------------------------------------------------
   8. SMALL ELEMENTS: pills, tags, alerts, tabs (segmented capsule)
   --------------------------------------------------------------------- */
/* Tiny repeated elements (a table can hold hundreds): lit edge only, NO blur - a blur layer
   per pill is invisible but costly on low-end phones. */
body.smrc-app-page.smrc-lg .smrc-pill,
body.smrc-app-page.smrc-lg .smrc-fin-tag {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px rgba(255,255,255,.45);
}
body.smrc-app-page.smrc-lg .smrc-alert {
	border-radius: var(--lg-r-sm);
	box-shadow: var(--lg-hi), 0 8px 20px -12px rgba(8,52,84,.35);
	backdrop-filter: blur(12px) saturate(170%); -webkit-backdrop-filter: blur(12px) saturate(170%);
}
body.smrc-app-page.smrc-lg.smrc-dark .smrc-alert.ok  { background: rgba(34,197,94,.20);  color: #bbf7d0; border-color: rgba(134,239,172,.45); }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-alert.err { background: rgba(239,68,68,.22);  color: #fecaca; border-color: rgba(252,165,165,.50); }
body.smrc-app-page.smrc-lg .smrc-tabs {
	width: fit-content; max-width: 100%;
	padding: 5px; gap: 4px;
	border-radius: 999px;
	background: var(--lg-fill-chrome);
	border: 1px solid var(--lg-hair);
	box-shadow: var(--lg-hi), var(--lg-shadow);
	backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
	-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
}
body.smrc-app-page.smrc-lg .smrc-tab {
	border: 1px solid transparent; border-radius: 999px; color: var(--lg-ink);
	transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .2s ease, box-shadow .2s ease;
}
body.smrc-app-page.smrc-lg .smrc-tab:hover { background: rgba(255,255,255,.45); }
body.smrc-app-page.smrc-lg .smrc-tab.active {
	background:
		linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.52) 100%),
		linear-gradient(135deg, rgba(0,161,222,.30), rgba(32,96,61,.16));
	color: var(--rw-blue-dark);
	border-color: rgba(255,255,255,.95);
	box-shadow: var(--lg-hi), inset 0 0 0 1px rgba(229,190,1,.5), 0 6px 16px -8px rgba(0,125,174,.55);
}
body.smrc-app-page.smrc-lg.smrc-dark .smrc-tab.active { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10)), linear-gradient(135deg, rgba(0,161,222,.40), rgba(32,96,61,.30)); border-color: rgba(255,255,255,.4); }

/* ---------------------------------------------------------------------
   9. POP-UPS: dimmed, blurred page behind; a large glass sheet in front
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg .smrc-modal {
	background: radial-gradient(900px 600px at 50% 20%, rgba(0,60,100,.30), rgba(5,20,45,.52));
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
}
body.smrc-app-page.smrc-lg .smrc-modal-box,
body.smrc-app-page.smrc-lg .smrc-profile-box {
	background:
		linear-gradient(135deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.70) 100%);
	border-radius: 30px;
	border: 1px solid rgba(255,255,255,.90);
	color: var(--lg-ink);
	box-shadow: var(--lg-hi), 0 0 0 1px var(--lg-edge), 0 30px 70px -22px rgba(4,26,52,.60);
	backdrop-filter: blur(30px) saturate(190%);
	-webkit-backdrop-filter: blur(30px) saturate(190%);
}
/* Finance pop-ups keep their teal identity cap, now sitting on glass */
body.smrc-app-page.smrc-lg .smrc-fin-modal .smrc-modal-box {
	background: linear-gradient(165deg, rgba(240,246,253,.92) 0%, rgba(222,234,247,.80) 100%);
	border-top: 4px solid #0d9488;
}
body.smrc-app-page.smrc-lg.smrc-dark .smrc-modal-box,
body.smrc-app-page.smrc-lg.smrc-dark .smrc-profile-box {
	background: linear-gradient(135deg, rgba(24,42,78,.88) 0%, rgba(12,24,50,.80) 100%);
	border-color: rgba(255,255,255,.22);
}
body.smrc-app-page.smrc-lg.smrc-dark .smrc-fin-modal .smrc-modal-box { background: linear-gradient(165deg, rgba(24,42,78,.92), rgba(12,24,50,.86)); }
body.smrc-app-page.smrc-lg .smrc-profile-box { border-top: 4px solid #0d9488; }

/* HARD RULE guard: a box that holds another pop-up (or is the quick-pay box) must not filter */
body.smrc-app-page.smrc-lg .smrc-fin-modal .smrc-modal-box.smrc-fin-quickpay-box {
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
@supports selector(:has(*)) {
	body.smrc-app-page.smrc-lg .smrc-modal-box:has(.smrc-modal),
	body.smrc-app-page.smrc-lg .smrc-profile-box:has(.smrc-modal) {
		backdrop-filter: none; -webkit-backdrop-filter: none;
	}
}
/* Inside a pop-up, fields stay clearly legible */
body.smrc-app-page.smrc-lg .smrc-modal-box input:where(:not([type=checkbox],[type=radio],[type=file],[type=hidden])),
body.smrc-app-page.smrc-lg .smrc-modal-box select,
body.smrc-app-page.smrc-lg .smrc-modal-box textarea { background: rgba(255,255,255,.80); }
body.smrc-app-page.smrc-lg.smrc-dark .smrc-modal-box input:where(:not([type=checkbox],[type=radio],[type=file],[type=hidden])),
body.smrc-app-page.smrc-lg.smrc-dark .smrc-modal-box select,
body.smrc-app-page.smrc-lg.smrc-dark .smrc-modal-box textarea { background: rgba(255,255,255,.10); }

/* ---------------------------------------------------------------------
   10. SIGN-IN SCREENS
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg .smrc-auth-wrap {
	border-radius: 34px;
	background: var(--lg-fill);
	border: 1px solid var(--lg-hair);
	box-shadow: var(--lg-hi), var(--lg-shadow-float);
	backdrop-filter: blur(26px) saturate(var(--lg-sat));
	-webkit-backdrop-filter: blur(26px) saturate(var(--lg-sat));
}
body.smrc-app-page.smrc-lg .smrc-auth-logo {
	box-shadow: var(--lg-hi), 0 14px 28px -10px rgba(0,101,140,.6);
}

/* ---------------------------------------------------------------------
   11. MOBILE: lighter blur (battery / low-end phones), glass drawer
   --------------------------------------------------------------------- */
@media (max-width: 782px) {
	body.smrc-app-page.smrc-lg { --lg-blur: 12px; --lg-r: 22px; }
	body.smrc-app-page.smrc-lg::before,
	body.smrc-app-page.smrc-lg::after { animation: none; filter: blur(34px); }

	body.smrc-app-page.smrc-lg .smrc-portal-topbar {
		border-radius: 0 0 26px 26px; margin-bottom: 8px;
		padding: 12px 14px;
	}
	/* off-canvas drawer becomes a glass sheet */
	body.smrc-app-page.smrc-lg .smrc-portal-nav {
		background: linear-gradient(135deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.74) 100%);
		backdrop-filter: blur(22px) saturate(var(--lg-sat));
		-webkit-backdrop-filter: blur(22px) saturate(var(--lg-sat));
		border-radius: 0 28px 28px 0;
		border: 1px solid var(--lg-hair); border-left: 0;
		box-shadow: var(--lg-hi), 14px 0 40px -14px rgba(4,26,52,.45);
	}
	body.smrc-app-page.smrc-lg.smrc-dark .smrc-portal-nav {
		background: linear-gradient(135deg, rgba(20,38,72,.92) 0%, rgba(10,22,46,.88) 100%);
	}
	body.smrc-app-page.smrc-lg #smrc-portal-nav-backdrop {
		background: rgba(5,20,45,.38);
		backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	}
	body.smrc-app-page.smrc-lg .smrc-nav-close {
		background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.7));
		border-color: rgba(255,255,255,.95);
		box-shadow: var(--lg-hi), 0 6px 14px -6px rgba(4,26,52,.5);
	}
	body.smrc-app-page.smrc-lg .smrc-modal-box,
	body.smrc-app-page.smrc-lg .smrc-profile-box { border-radius: 26px; }
}

/* ---------------------------------------------------------------------
   12. ACCESSIBILITY + FALLBACKS (never trade legibility for effect)
   --------------------------------------------------------------------- */
body.smrc-app-page.smrc-lg :focus-visible { outline: 3px solid rgba(250,210,1,.95); outline-offset: 2px; }

/* Browsers without backdrop-filter: use near-opaque fills so text always reads */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.smrc-app-page.smrc-lg { --lg-fill: linear-gradient(135deg, rgba(255,255,255,.95), rgba(240,247,252,.92)); --lg-fill-chrome: linear-gradient(135deg, rgba(255,255,255,.95), rgba(236,245,251,.92)); }
	body.smrc-app-page.smrc-lg.smrc-dark { --lg-fill: linear-gradient(135deg, rgba(26,44,80,.96), rgba(14,28,56,.96)); --lg-fill-chrome: linear-gradient(135deg, rgba(28,48,88,.96), rgba(14,28,56,.96)); }
}
/* "Reduce transparency" / "More contrast" system settings: solid surfaces, no blobs */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	body.smrc-app-page.smrc-lg { --lg-fill: linear-gradient(135deg, #ffffff, #f1f7fb); --lg-fill-chrome: linear-gradient(135deg, #ffffff, #eaf3f9); --lg-field: #ffffff; --lg-edge: rgba(8,52,84,.35); }
	body.smrc-app-page.smrc-lg.smrc-dark { --lg-fill: linear-gradient(135deg, #14264a, #0c1a36); --lg-fill-chrome: linear-gradient(135deg, #172b52, #0c1a36); --lg-field: #14264a; --lg-edge: rgba(255,255,255,.45); }
	body.smrc-app-page.smrc-lg::before, body.smrc-app-page.smrc-lg::after { display: none; }
	body.smrc-app-page.smrc-lg * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
/* Motion: drift and springy hovers off for people who ask for less motion */
@media (prefers-reduced-motion: reduce) {
	body.smrc-app-page.smrc-lg::before, body.smrc-app-page.smrc-lg::after { animation: none; }
	body.smrc-app-page.smrc-lg * { transition-duration: .01ms !important; }
	body.smrc-app-page.smrc-lg .smrc-btn:hover,
	body.smrc-app-page.smrc-lg .smrc-stat-card:hover,
	body.smrc-app-page.smrc-lg .smrc-portal-nav button:hover { transform: none; }
}

} /* end @media screen */