@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ════════════════════════════════════════════════════════════════════
   ePower User Dashboard — GIGL-aligned design system
   Matches the public Powering / GIGL aesthetic:
   • Dark side rail (like GIGL nav pill / footer)
   • Pink-tinted breadcrumb wash, soft and warm
   • Outfit display headings, heavy weights
   • Pill buttons, rounded corners, soft shadows
   • Pastel stat cards (mauve / mint / cream / ice)
   • All class names compatible with existing views
   ════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Apple blue brand ────────────────────────────────────────── */
	--pri: #0071e3;
	--pri-50: #eef6ff; --pri-100: #d9ecff; --pri-200: #b3d8ff;
	--pri-300: #7fbcff; --pri-400: #4a9bf7; --pri-500: #1f86ef;
	--pri-600: #0077ed; --pri-700: #0062c4; --pri-800: #004f9e; --pri-900: #003a78;

	/* ── neutrals (GIGL black panel & footer) ────────────────────── */
	--black: #0a0a0a;
	--black-2: #1a1a1a;
	--black-3: #22222a;

	/* ── page washes ─────────────────────────────────────────────── */
	--bg: #fbfbfd;
	--bg-pink: #fde9eb;
	--bg-pink-soft: #fdf3f4;
	--bg-alt: #f5f5f7;
	--surface: #ffffff;

	--border: #d2d2d7;
	--border-lt: #e8e8ed;

	/* ── text colours ────────────────────────────────────────────── */
	--tx: #1d1d1f;
	--tx-2: #6e6e73;
	--tx-3: #86868b;
	--tx-4: #cdd2dd;

	/* ── pastel cards (GIGL stat tiles) ──────────────────────────── */
	--pastel-mauve: #ece6f5;
	--pastel-mint: #e9f5ee;
	--pastel-cream: #fbf3da;
	--pastel-ice: #e7eef6;
	--pastel-pink: #fce6e8;

	/* ── accent palette ──────────────────────────────────────────── */
	--red: #dd1f26;   --red-bg: #fff1f2;
	--green: #16a34a; --green-bg: #f0fdf4;
	--blue: #0071e3;  --blue-bg: #eef6ff;
	--purple: #7c3aed; --purple-bg: #f5f3ff;
	--orange: #ea580c; --orange-bg: #fff7ed;

	/* ── typography ──────────────────────────────────────────────── */
	--heading:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--body:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--mono: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

	/* ── radii (GIGL is pill-heavy) ──────────────────────────────── */
	--r-xs: 4px; --r-sm: 6px; --r: 10px; --r-md: 12px;
	--r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

	/* ── shadows ─────────────────────────────────────────────────── */
	--sh-xs: 0 1px 2px rgba(15,17,21,.04);
	--sh-sm: 0 1px 3px rgba(15,17,21,.06), 0 1px 2px rgba(15,17,21,.04);
	--sh-md: 0 4px 14px rgba(15,17,21,.08);
	--sh-lg: 0 16px 40px rgba(15,17,21,.10);
	--sh-xl: 0 24px 60px rgba(15,17,21,.14);

	/* ── motion ──────────────────────────────────────────────────── */
	--ease: cubic-bezier(.4,0,.2,1);
	--ease-out: cubic-bezier(0,.55,.45,1);

	/* ── layout dimensions ───────────────────────────────────────── */
	--sidebar-w: 268px;
	--sidebar-w-c: 76px;
	--header-h: 66px;

	/* ── legacy aliases (some views still reference these) ───────── */
	--card-bg: var(--surface);
	--body-bg: var(--bg-alt);
	--text: var(--tx-2);
	--pri-bg: var(--pri-50);
}

/* ── Dark mode ───────────────────────────────────────────────────── */
[data-theme="dark"] {
	--bg: #0c0f14; --bg-alt: #161a22; --surface: #1a1f2a;
	--border: #2a3140; --border-lt: #1f2530;
	--tx: #f1f5f9; --tx-2: #cbd5e1; --tx-3: #94a3b8; --tx-4: #475569;
	--bg-pink: #1a1119; --bg-pink-soft: #15101a;
	--red-bg: rgba(221,31,38,.14);
	--green-bg: rgba(22,163,74,.12);
	--blue-bg: rgba(37,99,235,.12);
	--purple-bg: rgba(124,58,237,.12);
	--orange-bg: rgba(234,88,12,.12);
	--pastel-mauve: rgba(236,230,245,.06);
	--pastel-mint: rgba(233,245,238,.06);
	--pastel-cream: rgba(251,243,218,.06);
	--pastel-ice: rgba(231,238,246,.06);
	--pastel-pink: rgba(252,230,232,.08);
	--sh-md: 0 4px 14px rgba(0,0,0,.4);
	--sh-lg: 0 16px 40px rgba(0,0,0,.5);
}
[data-theme="dark"] .header .logo img,
[data-theme="dark"] .sidebar .logo img { filter: brightness(0) invert(1); }

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--body);
	background: var(--bg);
	color: var(--tx);
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: color .2s var(--ease); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; outline: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tx-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx-3); }
::selection { background: var(--pri-100); color: var(--pri-800); }

/* ── Typography ──────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
	font-family: var(--heading);
	font-weight: 800;
	line-height: 1.2;
	color: var(--tx);
	letter-spacing: -.02em;
}
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
h5 { font-size: .9375rem; }
h6 { font-size: .8125rem; }

.highlight { color: var(--pri); }
.mono { font-family: var(--mono); }
.text-muted { color: var(--tx-3); }
.text-danger { color: var(--red); }
.text-success { color: var(--green); }
.text-warning { color: var(--orange); }
.text-info { color: var(--blue); }

/* ════════════════════════════════════════════════════════════════════
   HEADER — clean white bar with red accent (lets sidebar own the dark)
   ════════════════════════════════════════════════════════════════════ */
.header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 996;
	height: var(--header-h);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	display: flex; align-items: center;
	padding: 0 24px;
	box-shadow: var(--sh-xs);
}
.header .logo {
	display: flex; align-items: center; gap: 10px;
	width: var(--sidebar-w);
	padding-right: 16px;
	margin-left: -24px; padding-left: 24px;
	height: 100%;
	flex-shrink: 0;
}
.header .logo img {
	height: 32px; max-width: 160px; object-fit: contain;
	transition: filter .2s;
}
.toggle-sidebar-btn {
	background: var(--bg-alt); border: 1px solid var(--border);
	width: 38px; height: 38px; border-radius: 50%;
	align-items: center; justify-content: center;
	cursor: pointer; color: var(--tx-2); font-size: 17px;
	transition: all .15s var(--ease);
	flex-shrink: 0;
	margin-right: 4px;
}
.toggle-sidebar-btn:hover { background: var(--pri-50); color: var(--pri); border-color: var(--pri-200); }

/* ── Search bar in header ─────────────────────────────────────────── */
.search-bar { flex: 1; max-width: 420px; margin: 0 24px; position: relative; }
.search-form { position: relative; }
.search-form .form-control {
	background: var(--bg-alt); border: 1px solid var(--border);
	border-radius: var(--r-full);
	padding: 9px 16px 9px 42px;
	font-size: 13px; color: var(--tx); width: 100%;
	transition: all .2s var(--ease);
}
.search-form .form-control:focus {
	background: var(--surface); border-color: var(--pri-200);
	box-shadow: 0 0 0 3px var(--pri-50);
}
.search-form .form-control::placeholder { color: var(--tx-3); }
.search-btn {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	background: none; border: none; color: var(--tx-3); font-size: 14px; cursor: pointer;
}
.search-backdrop { position: fixed; inset: 0; z-index: 90; }
.search-result {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--r-md); box-shadow: var(--sh-lg);
	z-index: 100; max-height: 360px; overflow-y: auto;
}
.search-header {
	padding: 12px 16px; font-size: 11px; font-weight: 700;
	color: var(--tx-3); text-transform: uppercase; letter-spacing: .6px;
	border-bottom: 1px solid var(--border);
}
.search-item a {
	display: block; padding: 11px 16px; font-size: 13px;
	color: var(--tx-2); transition: all .12s;
}
.search-item a:hover { background: var(--pri-50); color: var(--pri); padding-left: 22px; }

/* ── Header nav ──────────────────────────────────────────────────── */
.header-nav { margin-left: auto; }
.header-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; }
.header-nav .nav-link {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--r-full);
	color: var(--tx-2); font-size: 18px;
	transition: all .15s var(--ease);
	cursor: pointer; border: none; background: none;
}
.header-nav .nav-link:hover { background: var(--bg-alt); color: var(--tx); }
.header-nav .nav-profile {
	width: auto; gap: 9px; padding: 4px 14px 4px 4px;
	border-radius: var(--r-full); border: 1px solid var(--border);
	background: var(--surface);
}
.header-nav .nav-profile:hover { background: var(--bg-alt); border-color: var(--border); }
.header-nav .nav-profile .dropdown-toggle { font-size: 13px; font-weight: 600; color: var(--tx); }
/* Guest sign in / sign up links (shop & dashboard when logged out) */
.header-nav .auth-links { white-space: nowrap; }
.header-nav .auth-signin {
	display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
	font-size: 14px; font-weight: 600; color: var(--tx-2); text-decoration: none;
	border-radius: var(--r-full); transition: all .15s var(--ease);
}
.header-nav .auth-signin:hover { background: var(--bg-alt); color: var(--tx); }
.header-nav .auth-signup {
	display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
	font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
	background: var(--pri, #0071e3); border-radius: var(--r-full);
	transition: all .15s var(--ease); white-space: nowrap;
}
.header-nav .auth-signup:hover { background: var(--pri-600, #0062c4); color: #fff; }
@media (max-width: 480px) {
	.header-nav .auth-signin { padding: 0 10px; font-size: 13px; height: 36px; }
	.header-nav .auth-signup { padding: 0 14px; font-size: 13px; height: 36px; }
	.header-nav .auth-links { gap: 6px !important; padding-left: 4px !important; }
}
.mobile-nav-toggle { display: none; background: none; border: none; font-size: 22px; color: var(--tx); cursor: pointer; padding: 8px; }

/* ── Notification badge ──────────────────────────────────────────── */
.header-nav .nav-item { position: relative; }
.header-nav .nav-icon { position: relative; }
.badge-number {
	position: absolute; top: 2px; right: 2px;
	min-width: 16px; height: 16px; padding: 0 4px;
	font-size: 10px; font-weight: 700; line-height: 16px;
	text-align: center; color: #fff; background: var(--red, #ef4444);
	border-radius: var(--r-full); border: 2px solid var(--surface);
	pointer-events: none; z-index: 2;
}
.header-nav .notifications {
	min-width: 300px; max-height: 360px; overflow-y: auto;
}
.header-nav .notification-item a {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 14px; border-radius: var(--r); transition: background .15s;
}
.header-nav .notification-item a:hover { background: var(--bg-alt); }
.header-nav .notification-item p { margin: 0; font-size: 12px; color: var(--tx-2); line-height: 1.4; }
.header-nav .notification-item p + p { font-size: 11px; color: var(--tx-4); margin-top: 2px; }

/* ── Theme toggle ────────────────────────────────────────────────── */
#toggle-btn { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.search-bar-toggle { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.search-bar.search-bar-show { display: flex !important; position: absolute; top: 100%; left: 0; right: 0; max-width: 100%; margin: 0; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.1); z-index: 999; }
#sun { display: none; }
[data-theme="dark"] #moon { display: none; }
[data-theme="dark"] #sun { display: block; }

/* ── Dropdown ─────────────────────────────────────────────────────── */
.dropdown-menu {
	position: absolute; top: calc(100% + 10px); right: 0;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--r-lg); box-shadow: var(--sh-lg);
	min-width: 260px; padding: 8px; z-index: 1000; display: none;
	list-style: none; margin: 0;
}
.dropdown-menu.show,
.dropdown-menu[style*="display: block"] { display: block; }
.dropdown-menu li { list-style: none; }
.dropdown-header {
	padding: 14px; display: flex; gap: 12px; align-items: center;
	border-radius: var(--r-md); background: var(--pri-50);
	margin-bottom: 6px;
}
.dropdown-header .profile-thum {
	width: 44px; height: 44px; border-radius: 50%;
	overflow: hidden; flex-shrink: 0;
	border: 2px solid var(--surface);
	box-shadow: 0 2px 8px rgba(0,113,227,.16);
}
.dropdown-header .profile-thum img { width: 100%; height: 100%; object-fit: cover; }
.dropdown-header .profile-content h6 { font-size: 14px; font-weight: 700; margin: 0; color: var(--tx); }
.dropdown-header .profile-content span { font-size: 11px; color: var(--tx-3); }
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.dropdown-item {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; font-size: 13px; color: var(--tx-2);
	border-radius: var(--r-sm); transition: all .12s;
	font-weight: 500; text-decoration: none; cursor: pointer;
}
.dropdown-item:hover { background: var(--pri-50); color: var(--pri); padding-left: 18px; }
.dropdown-item i { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.dropdown-item span { flex: 1; }

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR — Dark GIGL-style rail
   ════════════════════════════════════════════════════════════════════ */
.sidebar {
	position: fixed; top: var(--header-h); left: 0; bottom: 0;
	width: var(--sidebar-w);
	background: #ffffff;
	overflow-y: auto;
	z-index: 995;
	transition: width .3s var(--ease), transform .3s var(--ease);
	padding: 20px 14px 24px;
	box-shadow: inset -1px 0 0 rgba(15,17,21,.06);
	border-right: 1px solid var(--border, #e8ebf0);
}
.sidebar::-webkit-scrollbar { width: 0; }
.sidebar-nav { list-style: none; }
.sidebar-nav .nav-item { margin-bottom: 2px; }
.sidebar-nav .nav-link {
	display: flex; align-items: center; gap: 11px;
	padding: 9px 12px; border-radius: 10px;
	color: var(--tx-2);
	font-size: 13.5px; font-weight: 500;
	font-family: var(--heading); letter-spacing: -.01em;
	transition: background .16s var(--ease), color .16s var(--ease);
	position: relative;
}
/* Every row reserves the SAME icon box, service or not.
   Previously bare glyphs were 24px wide with a 19px glyph while service tiles
   were 28px wide with a 16px glyph. Two problems at once: the labels after
   them started 4px apart, so "Wallet" sat left of "Electricity" down the whole
   rail, and the uncoloured icons were rendered *larger* than the coloured ones
   they were meant to sit quietly beneath. One box, one glyph size, one
   left edge for every label. */
.sidebar-nav .nav-link > i {
	width: 28px; height: 28px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 17px; line-height: 1;
	flex: 0 0 28px;
	background: var(--bg-alt); color: var(--tx-3);
	transition: background .16s var(--ease), color .16s var(--ease);
}
/* Centring must not depend on the icon CDN. Phosphor's own `.ph` rule supplies
   line-height:1, so if that stylesheet is slow or blocked the glyph box falls
   back to the inherited body line-height, grows taller than its 28px chip and
   sits off-centre. Both values are stated locally instead. `flex: 0 0 28px`
   replaces flex-shrink alone so a long label in a narrow drawer can never
   compress the box. */
.sidebar-nav .svc-ic > i,
.sidebar-nav .nav-link > i { line-height: 1; }
/* The glyph is a pseudo-element; making it a block gives flex a real box to
   centre rather than an inline run whose height depends on font fallback. */
.sidebar-nav .nav-link > i::before,
.sidebar-nav .svc-ic > i::before { display: block; }

/* ── Glyph centring, measured rather than assumed ──────────────────────────
   A 3x screenshot of the live rail was measured against the font's own
   metrics. The tile rendered at exactly 28px with an exactly 17px glyph, so
   the sizing rules were applying — but every glyph's ink sat 5.5px left and
   ~5.5px above the tile centre. 5.5px is precisely (28 - 17) / 2, i.e. the
   whole of the offset that `justify-content: center` / `align-items: center`
   were supposed to contribute. The glyph box was parked at the tile origin:
   the flex alignment was being defeated somewhere in the cascade, while
   width/height/border-radius from the same rule applied fine.

   Rather than hunt the override, centring no longer depends on flex (or grid)
   alignment at all. An absolutely positioned glyph offset by 50% and pulled
   back by half its own size lands dead centre whatever display mode the tile
   ends up in. The font itself was verified as symmetric — ink centre is
   +0.03px horizontally and +0.15px vertically across all 1543 glyphs — so
   centring the glyph box does centre the visible ink. */
.sidebar-nav .svc-ic,
.sidebar-nav .nav-link > i { position: relative; }
.sidebar-nav .svc-ic > i,
.sidebar-nav .nav-link > i::before {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1;
}
/* The hover scale lives on the tile, so the glyph inside must not inherit a
   competing transform — it keeps its own centring translate. */
.sidebar-nav .nav-link:hover .svc-ic > i { transform: translate(-50%, -50%); }

/* The active row already carries a tinted background of its own, so a second
   filled chip inside it reads as a box within a box. */
.sidebar-nav .nav-link.active > i { background: transparent; }
.sidebar-nav .nav-link span { white-space: nowrap; }
.sidebar-nav .nav-link:hover { background: var(--bg-alt); color: var(--tx); }
.sidebar-nav .nav-link:hover > i { color: var(--tx-2); }
/* Active state is ONE signal: a tinted row. The old treatment stacked a
   saturated fill, a coloured glow and a left edge bar for the same fact. */
.sidebar-nav .nav-link.active {
	background: var(--pri-50);
	color: var(--pri); font-weight: 600;
}
.sidebar-nav .nav-link.active > i { color: var(--pri); }
.sidebar-nav .nav-link:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.sidebar-nav .nav-signout:hover { background: var(--red-bg); color: var(--red); }
.sidebar-nav .nav-signout:hover > i { color: var(--red); }

/* Service icon tiles — the only colour in the rail, so the things a customer
   can buy stay findable in a 30-item list. */
.sidebar-nav .svc-ic {
	width: 28px; height: 28px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 28px;
	transition: transform .16s var(--ease);
}
.sidebar-nav .svc-ic i { font-size: 17px; line-height: 1; }
.sidebar-nav .nav-link:hover .svc-ic { transform: scale(1.06); }
.sidebar-nav .t-amber  { background: var(--pastel-cream); color: #b45309; }
.sidebar-nav .t-green  { background: var(--pastel-mint);  color: #15803d; }
.sidebar-nav .t-blue   { background: var(--pastel-ice);   color: #0062c4; }
.sidebar-nav .t-purple { background: var(--pastel-mauve); color: #6d28d9; }
.sidebar-nav .t-pink   { background: #fde8e8; color: #b91c1c; }
.sidebar-nav .t-teal   { background: #e0f2f1; color: #0f766e; }
.sidebar-nav .t-rose   { background: #fbe8f7; color: #a21caf; }
.sidebar-nav .t-slate  { background: #ecedf2; color: #475569; }
.sidebar-nav .t-indigo { background: #e8eaf6; color: #3730a3; }

/* Section labels */
.sidebar-nav .menu-header {
	color: var(--tx-3);
	font-size: 10.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .1em;
	padding: 20px 12px 7px;
	font-family: var(--heading);
}

/* Sidebar collapsed (desktop) */
body.toggle-sidebar .sidebar {
	width: var(--sidebar-w-c);
	padding: 20px 10px;
}
body.toggle-sidebar .sidebar .nav-link {
	justify-content: center; padding: 11px 10px;
	position: relative;
}
/* Collapsed desktop rail hides the LABEL only. Written as `span` this also
   matched the .svc-ic tile and hid it, and was rescued a few lines below by
   a higher-specificity .svc-ic rule — a race that worked by accident. The
   same pattern with !important inside the mobile media query is what broke
   icon centring on phones. Say what is meant instead. */
body.toggle-sidebar .sidebar .nav-link > span:not(.svc-ic) { display: none; }
body.toggle-sidebar .sidebar .nav-link .svc-ic { display: inline-flex; }
/* Group labels become hairlines in the rail so the grouping still reads. */
body.toggle-sidebar .sidebar .menu-header {
	height: 1px; padding: 0; margin: 12px 10px;
	background: var(--border-lt); overflow: hidden; text-indent: -999em;
}
body.toggle-sidebar .main { margin-left: var(--sidebar-w-c); }

/* Tooltip on hover when sidebar collapsed */
body.toggle-sidebar .sidebar .nav-link::after {
	content: attr(data-title);
	position: absolute; left: calc(100% + 12px); top: 50%;
	transform: translateY(-50%); white-space: nowrap;
	background: #1a1a2e; color: #fff; font-size: 12px; font-weight: 600;
	padding: 6px 14px; border-radius: 8px;
	pointer-events: none; opacity: 0; transition: opacity .2s;
	z-index: 1100; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
body.toggle-sidebar .sidebar .nav-link:hover::after {
	opacity: 1;
}


/* ── Sidebar in dark mode ── */
[data-theme="dark"] .sidebar-nav .nav-link.active { background: rgba(0,113,227,.18); color: #7fbcff; }
[data-theme="dark"] .sidebar-nav .nav-link.active > i { color: #7fbcff; }
/* Each tint must restate its BACKGROUND here, not just its colour. Five of
   these previously overrode only `color`, so `--pastel-cream` and friends
   survived into dark mode and lit up as bright pastel chips on a dark rail
   while t-teal/t-rose/t-slate correctly went dark — half the tiles glowing,
   half not. */
[data-theme="dark"] .sidebar-nav .t-amber  { background: rgba(245,158,11,.12); color: #fbbf24; }
[data-theme="dark"] .sidebar-nav .t-green  { background: rgba(34,197,94,.12);  color: #4ade80; }
[data-theme="dark"] .sidebar-nav .t-blue   { background: rgba(0,113,227,.14);  color: #7fbcff; }
[data-theme="dark"] .sidebar-nav .t-purple { background: rgba(139,92,246,.14); color: #c4b5fd; }
[data-theme="dark"] .sidebar-nav .t-pink   { background: rgba(244,63,94,.12);  color: #fda4af; }
[data-theme="dark"] .sidebar-nav .t-teal   { background: rgba(94,234,212,.10); color: #5eead4; }
[data-theme="dark"] .sidebar-nav .t-rose   { background: rgba(217,70,239,.12);  color: #f0abfc; }
[data-theme="dark"] .sidebar-nav .t-indigo { background: rgba(99,102,241,.14);  color: #a5b4fc; }
[data-theme="dark"] .sidebar-nav .t-slate  { background: rgba(148,163,184,.12); color: #cbd5e1; }

@media (prefers-reduced-motion: reduce) {
	.sidebar-nav .nav-link,
	.sidebar-nav .svc-ic { transition: none; }
	.sidebar-nav .nav-link:hover .svc-ic { transform: none; }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
	position: fixed; inset: 0; z-index: 994;
	background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
	opacity: 0; pointer-events: none;
	transition: opacity .3s var(--ease);
}
.sidebar-overlay.active {
	opacity: 1; pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════════════
   MAIN — page wrapper, breadcrumb, content
   ════════════════════════════════════════════════════════════════════ */
.main {
	margin-left: var(--sidebar-w);
	padding: calc(var(--header-h) + 28px) 28px 32px;
	min-height: 100vh;
	transition: margin-left .3s var(--ease);
	position: relative;
}

/* Pagetitle / Breadcrumb — pink wash like GIGL banner */
.pagetitle {
	margin: calc(var(--header-h) * -1 - 28px) -28px 28px;
	padding: calc(var(--header-h) + 28px) 28px 24px;
	background: linear-gradient(180deg, var(--bg-pink) 0%, transparent 100%);
	border-bottom: 1px solid rgba(0,113,227,.06);
	position: relative; overflow: hidden;
}
.pagetitle::before {
	content: ''; position: absolute;
	top: -50%; right: -10%;
	width: 480px; height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0,113,227,.08), transparent 60%);
	pointer-events: none;
}
.pagetitle h3 {
	font-family: var(--heading);
	font-size: 1.625rem; font-weight: 900;
	margin: 0 0 6px;
	letter-spacing: -.025em;
	position: relative;
}
.pagetitle .breadcrumb {
	list-style: none; display: flex; gap: 6px;
	font-size: 13px; margin: 0; padding: 0;
	position: relative;
}
.pagetitle .breadcrumb-item { color: var(--tx-3); font-weight: 500; }
.pagetitle .breadcrumb-item a { color: var(--tx-2); transition: color .15s; }
.pagetitle .breadcrumb-item a:hover { color: var(--pri); }
.pagetitle .breadcrumb-item.active { color: var(--pri); font-weight: 600; }
.pagetitle .breadcrumb-item + .breadcrumb-item::before {
	content: '/'; margin-right: 6px; color: var(--tx-4);
}

/* ════════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════════ */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	overflow: hidden;
	transition: all .25s var(--ease);
}
.card:hover { box-shadow: var(--sh-md); }
.card-header {
	padding: 18px 24px;
	border-bottom: 1px solid var(--border-lt);
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
}
.card-header h4, .card-header h5, .card-title {
	font-size: 1rem; font-weight: 800;
	font-family: var(--heading); margin: 0;
	letter-spacing: -.015em;
}
.card-header h4 i, .card-header h5 i { font-size: 18px; vertical-align: middle; margin-right: 4px; }
.card-body { padding: 22px 24px; }
.card-body.np { padding: 0; }
.card-body.pt-0 { padding-top: 0; }
.card-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--border-lt);
	background: var(--bg-alt);
}
.card-header.border-0 { border-bottom: none; }
.custom-card { margin-bottom: 22px; }

/* ════════════════════════════════════════════════════════════════════
   BUTTONS — pill-shaped, GIGL signature
   ════════════════════════════════════════════════════════════════════ */
.btn, .cmn-btn, .btn-pri, .btn-base-color {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 7px; padding: 10px 22px;
	border-radius: var(--r-full);
	font-weight: 700; font-size: 13.5px;
	cursor: pointer; border: 1.5px solid transparent;
	transition: all .2s var(--ease);
	font-family: var(--heading);
	white-space: nowrap;
	text-decoration: none;
	line-height: 1.4;
}
.btn:active, .cmn-btn:active { transform: scale(.97); }
.cmn-btn, .btn-pri, .btn-base-color {
	background: var(--pri); color: #fff; border-color: var(--pri);
	box-shadow: 0 4px 14px rgba(0,113,227,.18);
}
.cmn-btn:hover, .btn-pri:hover, .btn-base-color:hover {
	background: var(--pri-700); border-color: var(--pri-700); color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0,113,227,.30);
}
.cmn-btn2 {
	background: var(--black); color: #fff; border-color: var(--black);
}
.cmn-btn2:hover { background: var(--black-2); border-color: var(--black-2); transform: translateY(-1px); }
.cmn-btn3 {
	background: var(--surface); color: var(--tx-2); border-color: var(--border);
}
.cmn-btn3:hover { background: var(--pri-50); color: var(--pri); border-color: var(--pri-200); }
.btn-out, .btn-outline {
	background: transparent; color: var(--tx); border-color: var(--tx);
}
.btn-out:hover, .btn-outline:hover { background: var(--tx); color: #fff; }
.btn-outline-primary {
	background: transparent; color: var(--pri); border-color: var(--pri);
}
.btn-outline-primary:hover { background: var(--pri); color: #fff; }
.btn-modify {
	background: var(--pri-50); color: var(--pri); border: 1px solid var(--pri-200);
	border-radius: var(--r-sm); padding: 5px 14px;
	font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.btn-modify:hover { background: var(--pri); color: #fff; border-color: var(--pri); }
.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 13px 28px; font-size: 14px; }

/* ── Bootstrap-ish helper buttons used in some user views ─────────── */
.btn-success { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover { background: #15803d; border-color: #15803d; color: #fff; }
.btn-secondary { background: var(--tx-3); color: #fff; border-color: var(--tx-3); }
.btn-secondary:hover { background: var(--tx-2); border-color: var(--tx-2); color: #fff; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: var(--pri-700); border-color: var(--pri-700); color: #fff; }
.btn-warning { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-warning:hover { background: #c2410c; border-color: #c2410c; color: #fff; }
.btn-info { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-info:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.btn-outline-secondary {
	background: transparent; color: var(--tx-2); border-color: var(--border);
}
.btn-outline-secondary:hover { background: var(--bg-alt); color: var(--tx); border-color: var(--tx-3); }

.btn-close {
	width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid var(--border); background: var(--surface);
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	font-size: 13px; color: var(--tx-2); transition: all .15s;
}
.btn-close::before { content: '✕'; font-size: 11px; }
.btn-close:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.cmn-btn-close {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--border); background: var(--surface);
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; color: var(--tx-2); cursor: pointer; transition: all .15s;
}
.cmn-btn-close:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.btn:disabled, .cmn-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ════════════════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════════════════ */
.form-label {
	display: block; font-size: 12.5px; font-weight: 700;
	color: var(--tx); margin-bottom: 7px;
	font-family: var(--heading); letter-spacing: -.005em;
}
.form-control, .form-select, .input, .modal-select {
	width: 100%; padding: 11px 14px;
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: var(--r-md);
	color: var(--tx); font-size: 14px;
	font-family: var(--body); line-height: 1.5;
	transition: all .15s var(--ease);
}
.form-control:focus, .form-select:focus, .input:focus {
	border-color: var(--pri);
	box-shadow: 0 0 0 3px rgba(0,113,227,.12);
	outline: none;
}
.form-control::placeholder { color: var(--tx-4); }
.form-control.is-invalid { border-color: var(--red); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--red-bg); }
.invalid-feedback { color: var(--red); font-size: 12px; margin-top: 4px; }

select.form-control, select.form-select {
	cursor: pointer; -webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237a8190'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}
.form-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.form-check-input { width: 16px; height: 16px; accent-color: var(--pri); cursor: pointer; }
.form-check-label { color: var(--tx-2); cursor: pointer; }
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { border-radius: var(--r-md) 0 0 var(--r-md); flex: 1; }
.input-group .input-group-text {
	display: flex; align-items: center; padding: 0 14px;
	background: var(--bg-alt); border: 1.5px solid var(--border); border-left: none;
	border-radius: 0 var(--r-md) var(--r-md) 0;
	font-size: 12px; color: var(--tx-3); font-weight: 600;
}

/* Field wrapper used by some forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--tx); margin-bottom: 7px; font-family: var(--heading); }
.field .form-control { margin-bottom: 0; }
.input-icon { position: relative; }
.input-icon .il {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	color: var(--tx-3); font-size: 17px; pointer-events: none;
}
.input-icon .form-control, .input-icon .input { padding-left: 42px; }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD STAT CARDS — pastel GIGL style
   ════════════════════════════════════════════════════════════════════ */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px; margin-bottom: 26px;
}
.box-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	padding: 22px 22px 20px;
	position: relative; overflow: hidden;
	transition: all .25s var(--ease);
}
.box-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-lg);
	border-color: var(--pri-200);
}
.box-card::after {
	content: ''; position: absolute;
	top: -40%; right: -20%;
	width: 200px; height: 200px;
	border-radius: 50%;
	opacity: .5;
	pointer-events: none;
}
.box-card1 { background: var(--pastel-pink); border-color: transparent; }
.box-card1::after { background: radial-gradient(circle, rgba(0,113,227,.18), transparent 60%); }
.box-card2 { background: var(--pastel-ice); border-color: transparent; }
.box-card2::after { background: radial-gradient(circle, rgba(37,99,235,.18), transparent 60%); }
.box-card3 { background: var(--pastel-cream); border-color: transparent; }
.box-card3::after { background: radial-gradient(circle, rgba(234,88,12,.20), transparent 60%); }
.box-card4 { background: var(--pastel-mauve); border-color: transparent; }
.box-card4::after { background: radial-gradient(circle, rgba(124,58,237,.18), transparent 60%); }
.box-card-header { margin-bottom: 14px; position: relative; z-index: 1; }
.box-card-title {
	font-size: 11.5px; font-weight: 700;
	color: var(--tx-2); margin: 0;
	display: flex; align-items: center; gap: 7px;
	text-transform: uppercase; letter-spacing: .08em;
	font-family: var(--heading);
}
.box-card-title i {
	font-size: 16px;
	width: 28px; height: 28px;
	background: rgba(255,255,255,.6);
	border-radius: var(--r-sm);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--tx);
}
.box-card1 .box-card-title i { color: var(--pri); }
.box-card2 .box-card-title i { color: var(--blue); }
.box-card3 .box-card-title i { color: var(--orange); }
.box-card4 .box-card-title i { color: var(--purple); }
.box-card-body { position: relative; z-index: 1; }
.box-card-body h3 {
	font-family: var(--heading);
	font-size: 1.875rem; font-weight: 900;
	letter-spacing: -.035em; line-height: 1;
	margin-bottom: 10px; color: var(--tx);
}
.statistics { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.statistics .growth {
	font-size: 12px; font-weight: 700;
	color: var(--green); margin: 0;
	display: inline-flex; align-items: center; gap: 4px;
	background: rgba(255,255,255,.55); padding: 3px 9px;
	border-radius: var(--r-full);
}
.statistics .growth.middle { color: var(--orange); }
.statistics .growth.down { color: var(--red); }
.statistics .time { font-size: 11px; color: var(--tx-3); font-weight: 500; }

/* ── Generic "stat" tile (some pages use this) ─────────────────────── */
.stat {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--r-lg); padding: 22px;
	transition: all .25s var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--pri-200); }
.stat-icon {
	width: 48px; height: 48px; border-radius: var(--r-md);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; margin-bottom: 12px;
	background: var(--pri-50); color: var(--pri);
}
.stat-label {
	font-size: 11.5px; color: var(--tx-3);
	text-transform: uppercase; letter-spacing: .08em;
	font-family: var(--heading); font-weight: 700;
	margin-bottom: 4px;
}
.stat-val { font-family: var(--heading); font-size: 1.625rem; font-weight: 900; letter-spacing: -.025em; }

/* ════════════════════════════════════════════════════════════════════
   GRID — bootstrap-like utilities used by the views
   ════════════════════════════════════════════════════════════════════ */
.row { display: grid; gap: 16px; }
.row.g-1 { gap: 4px; }
.row.g-2 { gap: 8px; }
.row.g-3 { gap: 14px; }
.row.g-4 { gap: 22px; }
.row.g-5 { gap: 30px; }
.col-12 { grid-column: 1 / -1; }

@media (min-width: 768px) {
	.row:has(> [class*="col-md-"]) { grid-template-columns: repeat(12, 1fr); }
	.col-md-2 { grid-column: span 2; } .col-md-3 { grid-column: span 3; }
	.col-md-4 { grid-column: span 4; } .col-md-5 { grid-column: span 5; }
	.col-md-6 { grid-column: span 6; } .col-md-7 { grid-column: span 7; }
	.col-md-8 { grid-column: span 8; } .col-md-9 { grid-column: span 9; }
	.col-md-10 { grid-column: span 10; } .col-md-12 { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
	.row:has(> .col-xxl-3) { grid-template-columns: repeat(4, 1fr); }
	.row:has(> .col-xxl-3) > .col-xxl-3 { grid-column: auto; }
}
@media (max-width: 767px) {
	.row:has(> [class*="col-"]) { grid-template-columns: 1fr; }
	.row > [class*="col-"] { grid-column: auto !important; }
}

/* ── Quick utility classes used in views ───────────────────────────── */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.ml-1, .ms-1 { margin-left: 4px !important; }
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 14px !important; }
.gap-4 { gap: 22px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 14px !important; }
.mb-4 { margin-bottom: 22px !important; }
.mb-5 { margin-bottom: 30px !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 14px !important; }
.mt-4 { margin-top: 22px !important; }
.mt-50 { margin-top: 50px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-50 { margin-bottom: 50px !important; }
.my-3 { margin-top: 14px !important; margin-bottom: 14px !important; }
.my-4 { margin-top: 22px !important; margin-bottom: 22px !important; }
.py-3 { padding-top: 14px !important; padding-bottom: 14px !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 4px !important; }
.pe-0 { padding-right: 0 !important; }
.pe-3 { padding-right: 14px !important; }
.ps-2 { padding-left: 8px !important; }
.mx-3 { margin-left: 14px !important; margin-right: 14px !important; }
.w-100 { width: 100% !important; }
.w-45 { width: 45px; }
.h-100 { height: 100% !important; }
.border-0 { border: none !important; }
.overflow-hidden { overflow: hidden !important; }

/* Bootstrap-style background utilities (used in transaction/ticket tables) */
.text-bg-success, .badge.text-bg-success {
	background: var(--green-bg) !important; color: var(--green) !important;
	border: 1px solid rgba(22,163,74,.18) !important;
}
.text-bg-warning, .badge.text-bg-warning {
	background: var(--orange-bg) !important; color: var(--orange) !important;
	border: 1px solid rgba(234,88,12,.18) !important;
}
.text-bg-danger, .badge.text-bg-danger {
	background: var(--red-bg) !important; color: var(--red) !important;
	border: 1px solid rgba(0,113,227,.18) !important;
}
.text-bg-info, .badge.text-bg-info {
	background: var(--blue-bg) !important; color: var(--blue) !important;
	border: 1px solid rgba(37,99,235,.18) !important;
}
.text-bg-primary, .badge.text-bg-primary {
	background: var(--pri-50) !important; color: var(--pri) !important;
	border: 1px solid var(--pri-200) !important;
}
.text-bg-secondary, .badge.text-bg-secondary {
	background: var(--bg-alt) !important; color: var(--tx-2) !important;
	border: 1px solid var(--border) !important;
}
.bg-light { background: var(--bg-alt) !important; }
.text-primary { color: var(--pri) !important; }

/* ════════════════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════════════════ */
.cmn-table { border-radius: var(--r-md); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table thead {
	background: var(--bg-alt);
}
.table th {
	padding: 13px 18px;
	font-size: 10.5px; font-weight: 800;
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--tx-3); text-align: left;
	white-space: nowrap; font-family: var(--heading);
}
.table td {
	padding: 14px 18px; font-size: 13.5px;
	color: var(--tx-2);
	border-bottom: 1px solid var(--border-lt);
	vertical-align: middle;
}
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--pri-50); }
.table tbody tr:last-child td { border-bottom: none; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.align-middle { vertical-align: middle; }

/* Action buttons in tables */
.action-btn, .action-pill {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border-radius: var(--r-sm);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--tx-2); font-size: 14px;
	cursor: pointer; transition: all .15s var(--ease);
	padding: 0; text-decoration: none;
}
.action-btn:hover, .action-pill:hover {
	border-color: var(--pri); color: var(--pri);
	background: var(--pri-50); transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════
   BADGES, ALERTS
   ════════════════════════════════════════════════════════════════════ */
.badge {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 11px; border-radius: var(--r-full);
	font-size: 11px; font-weight: 700;
	font-family: var(--heading);
	line-height: 1.4;
}
.badge i { font-size: 11px; }
.badge.badge-pill { border-radius: var(--r-full); }
.badge.badge-danger { background: var(--red-bg); color: var(--red); }

.alert {
	padding: 13px 16px; border-radius: var(--r-md);
	font-size: 13px; line-height: 1.55;
	display: flex; align-items: flex-start; gap: 10px;
	border: 1px solid var(--border);
	background: var(--surface);
}
.border-color-warning { border-color: rgba(234,88,12,.25) !important; background: var(--orange-bg); }
.border-color-primary { border-color: var(--pri-200) !important; background: var(--pri-50); }
.close-btn { background: none; border: none; color: var(--tx-3); cursor: pointer; font-size: 15px; padding: 0; margin-left: auto; }

.msg { padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.msg-err { background: var(--red-bg); color: var(--red); border: 1px solid #fecaca; }
.msg-ok { background: var(--green-bg); color: var(--green); border: 1px solid #bbf7d0; }

/* ════════════════════════════════════════════════════════════════════
   LIST GROUP (used by notifications page)
   ════════════════════════════════════════════════════════════════════ */
.list-group { display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none; }
.list-group-flush { border-radius: 0; }
.list-group-item {
	padding: 16px 20px;
	background: var(--surface);
	border-bottom: 1px solid var(--border-lt);
	display: flex;
	transition: background .15s;
}
.list-group-item:last-child { border-bottom: none; }
.list-group-item:hover { background: var(--pri-50); }
.list-group-item.bg-light { background: var(--pri-50); position: relative; }
.list-group-item.bg-light::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0;
	width: 3px; background: var(--pri);
}

/* ════════════════════════════════════════════════════════════════════
   PAY-BILL CATEGORY GRID
   ════════════════════════════════════════════════════════════════════ */
.paybill-category-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
.category-box {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	padding: 26px 18px;
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: var(--r-lg);
	text-align: center; cursor: pointer;
	transition: all .25s var(--ease);
	text-decoration: none;
	color: inherit;
}
.category-box:hover {
	border-color: var(--pri);
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
}
.category-box .icon-box {
	width: 58px; height: 58px;
	border-radius: var(--r-md);
	background: var(--pri-50);
	display: flex; align-items: center; justify-content: center;
}
.category-box .icon-box img { width: 32px; height: 32px; object-fit: contain; }
.category-box:hover .icon-box { background: var(--pri-100); }
.category-box .title {
	font-size: 13.5px; font-weight: 700;
	color: var(--tx); margin: 0;
	font-family: var(--heading);
}

/* ── Pay-bill form / preview ──────────────────────────────────────── */
.paybill-form { max-width: 760px; }
.paybill-form-btn-area { margin-top: 24px; }

.payment-container-list {
	list-style: none; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px;
}
.payment-container-list .item { position: relative; }
.payment-container-list .item input { position: absolute; opacity: 0; pointer-events: none; }
.payment-container-list .item label {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	padding: 18px 14px;
	background: var(--surface);
	border: 2px solid var(--border);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: all .15s var(--ease);
	text-align: center;
}
.payment-container-list .item input:checked + label {
	border-color: var(--pri); background: var(--pri-50);
	box-shadow: 0 0 0 3px rgba(0,113,227,.10);
}
.payment-container-list .item .image-area {
	width: 52px; height: 38px;
	display: flex; align-items: center; justify-content: center;
}
.payment-container-list .item .image-area img { max-width: 100%; max-height: 100%; object-fit: contain; }
.payment-container-list .item .content-area h5 { font-size: 12.5px; font-weight: 700; margin: 0; }

.paybill-confirm-list { list-style: none; padding: 0; }
.paybill-confirm-list .item {
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--border-lt);
	font-size: 13.5px;
}
.paybill-confirm-list .item:last-child { border-bottom: none; }
.paybill-confirm-list .item h6 {
	font-size: 13px; font-weight: 700; color: var(--tx-2); margin: 0;
}
.paybill-confirm-list .item span { font-weight: 600; color: var(--tx); }

/* ════════════════════════════════════════════════════════════════════
   ELECTRICITY / TOKEN
   ════════════════════════════════════════════════════════════════════ */
.token-box {
	font-family: var(--mono);
	font-size: 22px; font-weight: 600;
	color: var(--pri);
	letter-spacing: 4px;
	word-break: break-all;
	background: var(--pri-50);
	border: 2px dashed var(--pri-200);
	border-radius: var(--r-lg);
	padding: 22px; text-align: center;
}
.amt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.amt-btn {
	padding: 13px;
	border: 2px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	font-family: var(--heading); font-size: 14.5px; font-weight: 700;
	color: var(--tx); cursor: pointer; transition: all .15s var(--ease);
}
.amt-btn:hover, .amt-btn.on {
	border-color: var(--pri); color: var(--pri); background: var(--pri-50);
}

/* ════════════════════════════════════════════════════════════════════
   PROFILE PAGE — account-settings styles
   ════════════════════════════════════════════════════════════════════ */
.account-settings-profile-section { width: 100%; }
.account-settings-profile-section .card-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.account-settings-profile-section .card-header h5 { width: 100%; }

.account-settings-navbar { margin-bottom: 22px; }
.account-settings-navbar .nav {
	list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
	padding: 6px; background: var(--surface);
	border: 1px solid var(--border); border-radius: var(--r-full);
	margin: 0;
}
.account-settings-navbar .nav-item { flex: 0 0 auto; }
.account-settings-navbar .nav-link {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 18px; border-radius: var(--r-full);
	font-size: 13px; font-weight: 600; color: var(--tx-2);
	font-family: var(--heading); transition: all .15s var(--ease);
	text-decoration: none;
}
.account-settings-navbar .nav-link i { font-size: 14px; }
.account-settings-navbar .nav-link:hover { background: var(--pri-50); color: var(--pri); }
.account-settings-navbar .nav-link.active { background: var(--pri); color: #fff; }

.profile-details-section { width: 100%; }
.profile-details-section .image-area {
	width: 78px; height: 78px; border-radius: 50%;
	overflow: hidden; flex-shrink: 0;
	border: 3px solid var(--pri-100);
	background: var(--bg-alt);
}
.profile-details-section .image-area img { width: 100%; height: 100%; object-fit: cover; }
.profile-details-section .btn-area { flex: 1; }
.profile-details-section .btn-area-inner { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-details-section small { display: block; font-size: 11.5px; color: var(--tx-3); margin-top: 8px; }

.profile-form-section { width: 100%; }
.profile-form-section .row { display: grid; grid-template-columns: repeat(12, 1fr); }
.profile-form-section .row.g-3 { gap: 14px; }
.profile-form-section .btn-area { margin-top: 22px; display: flex; gap: 10px; }

.cmn-file-input { position: relative; }
.cmn-file-input .file-upload-input {
	position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.cmn-file-input label.cmn-btn { cursor: pointer; margin: 0; }

.img-profile-view { width: 100%; height: 100%; object-fit: cover; }

/* ── Support / ticket image area ──────────────────────────────────── */
.image-area { /* generic; profile rules above also apply */
	display: flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════
   PRELOADER, SPINNER, EMPTY STATE
   ════════════════════════════════════════════════════════════════════ */
#preloader {
	position: fixed; inset: 0; background: var(--surface);
	display: flex; align-items: center; justify-content: center;
	z-index: 9999; flex-direction: column; gap: 14px;
	transition: opacity .3s;
}
.phone .loader, .preloader-spinner {
	display: block; width: 36px; height: 36px;
	border: 3px solid var(--border);
	border-top-color: var(--pri);
	border-radius: 50%;
	animation: sp .7s linear infinite;
}
.phone .text { font-size: 12px; color: var(--tx-3); font-family: var(--heading); font-weight: 600; }
@keyframes sp { to { transform: rotate(360deg); } }

.bouncing-loader { display: flex; justify-content: center; gap: 6px; padding: 22px; }
.bouncing-loader div {
	width: 10px; height: 10px;
	background: var(--pri);
	border-radius: 50%;
	animation: bounce .6s infinite alternate;
}
.bouncing-loader div:nth-child(2) { animation-delay: .2s; }
.bouncing-loader div:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { to { transform: translateY(-12px); opacity: .3; } }

.spin {
	display: inline-block; width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,.3);
	border-top-color: #fff; border-radius: 50%;
	animation: sp .6s linear infinite;
	vertical-align: middle;
}

/* ── Empty state ──────────────────────────────────────────────────── */
.empty, .empty-state {
	text-align: center; padding: 56px 24px;
	color: var(--tx-3);
}
.empty i { font-size: 36px; display: block; margin-bottom: 14px; opacity: .35; }
.empty-state-icon {
	width: 84px; height: 84px; border-radius: 50%;
	background: var(--pri-50); color: var(--pri);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 36px; margin-bottom: 18px;
}
.empty-state h3 {
	font-family: var(--heading); font-size: 1.25rem;
	font-weight: 800; color: var(--tx); margin: 0 0 8px;
}
.empty-state p {
	font-size: 13.5px; color: var(--tx-3);
	line-height: 1.7; margin: 0; max-width: 360px;
	margin: 0 auto;
}
/* Old-form empty state markup (for back-compat) */
.empty-state__content { text-align: center; padding: 40px 20px; }
.empty-state__icon img { max-width: 120px; margin: 0 auto 16px; opacity: .6; }
.empty-state__icon::before {
	content: '\f49e'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
	font-size: 48px; color: var(--pri-200); display: block; margin-bottom: 12px;
}
.empty-state__icon img[src*="no_record_found"] { display: none; }
.empty-state__message { font-size: 14px; color: var(--tx-3); }

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════ */
.main ~ footer, .footer-dashboard {
	padding: 26px 28px;
	text-align: center;
	font-size: 12.5px; color: var(--tx-3);
	border-top: 1px solid var(--border);
	margin-top: 40px;
	background: var(--surface);
}
.footer-dashboard a { color: var(--pri); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   MODAL / OFFCANVAS
   ════════════════════════════════════════════════════════════════════ */
.modal {
	display: none; position: fixed; inset: 0;
	z-index: 1060;
	align-items: center; justify-content: center;
	background: rgba(15,17,21,.5); backdrop-filter: blur(4px);
}
.modal.show, .modal.fade.show { display: flex; }
.modal-dialog { width: 100%; max-width: 520px; margin: 20px; }
.modal-content {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-xl);
	overflow: hidden;
	animation: modalIn .3s var(--ease-out) both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-header {
	padding: 18px 22px;
	border-bottom: 1px solid var(--border);
	display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 1.0625rem; font-weight: 800; margin: 0; }
.modal-body { padding: 22px; }
.modal-footer {
	padding: 16px 22px;
	border-top: 1px solid var(--border);
	display: flex; justify-content: flex-end; gap: 10px;
	background: var(--bg-alt);
}
.modal-backdrop { display: none; }

.offcanvas {
	position: fixed; top: 0; right: 0;
	width: 360px; height: 100vh; height: 100dvh;
	background: var(--surface);
	box-shadow: var(--sh-xl);
	z-index: 1050;
	transform: translateX(100%);
	transition: transform .35s var(--ease);
	display: flex; flex-direction: column;
}
.offcanvas.show { transform: translateX(0); }
.offcanvas-header {
	padding: 20px 22px;
	border-bottom: 1px solid var(--border);
	display: flex; align-items: center; justify-content: space-between;
}
.offcanvas-title { font-size: 1.0625rem; font-weight: 800; margin: 0; }
.offcanvas-body { padding: 18px 22px; flex: 1; overflow-y: auto; }

/* ════════════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════════════ */
.pagination {
	display: flex; gap: 4px; flex-wrap: wrap;
	justify-content: center; margin-top: 24px;
	list-style: none; padding: 0;
}
.pagination .page-item .page-link {
	display: flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 12px;
	border-radius: var(--r); border: 1px solid var(--border);
	background: var(--surface); color: var(--tx-2);
	font-size: 13px; font-weight: 600;
	font-family: var(--heading);
	transition: all .15s; text-decoration: none;
}
.pagination .page-item.active .page-link {
	background: var(--pri); color: #fff; border-color: var(--pri);
	box-shadow: 0 4px 12px rgba(0,113,227,.24);
}
.pagination .page-item .page-link:hover {
	border-color: var(--pri); color: var(--pri); background: var(--pri-50);
}
.pagination .page-item.disabled .page-link {
	opacity: .45; cursor: not-allowed; background: var(--bg-alt);
}

/* ════════════════════════════════════════════════════════════════════
   PUSH NOTIFICATION DROPDOWN AREA
   ════════════════════════════════════════════════════════════════════ */
#pushNotificationArea .notification-list {
	list-style: none; padding: 0;
	max-height: 320px; overflow-y: auto;
}
#pushNotificationArea .notification-list li {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-lt);
}
#pushNotificationArea .notification-list li:hover { background: var(--bg-alt); }

/* ════════════════════════════════════════════════════════════════════
   CHARTS / MISC
   ════════════════════════════════════════════════════════════════════ */
canvas { max-width: 100%; }
.section, .section.dashboard { padding: 0; }

/* Quick Actions bar (used on dashboard home) */
.quick-actions-bar {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	padding: 14px 22px;
	margin-bottom: 26px;
}
.quick-actions-bar .label {
	font-size: 12px; color: var(--tx-3);
	font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em;
	font-family: var(--heading);
}

/* Select2 overrides */
.select2-container .select2-selection--single {
	height: auto; padding: 10px 14px;
	background: var(--surface);
	border: 1.5px solid var(--border) !important;
	border-radius: var(--r-md) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--tx); font-size: 14px; line-height: 1.5; padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%; transform: translateY(-50%); right: 10px;
}
.select2-dropdown {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-md);
}
.select2-results__option--highlighted {
	background: var(--pri-50) !important; color: var(--pri) !important;
}

/* ════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .35s var(--ease) both; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
	.d-lg-none { display: none !important; }
	.d-none.d-lg-block { display: block !important; }
	.d-none.d-lg-flex { display: flex !important; }
}
@media (max-width: 991px) {
	.d-lg-block { display: none !important; }
	.d-none.d-lg-flex { display: none !important; }
	.header .logo { width: auto; min-width: auto; padding-right: 12px; }
	.sidebar { transform: translateX(-100%); width: var(--sidebar-w); z-index: 996; }
	.sidebar.show { transform: translateX(0); box-shadow: 4px 0 30px rgba(0,0,0,.35); }
	/* On mobile, ALWAYS show full sidebar with labels — override toggle-sidebar */
	body.toggle-sidebar .sidebar.show { width: var(--sidebar-w); }
	body.toggle-sidebar .sidebar.show .nav-link > span:not(.svc-ic) { display: inline !important; }
	body.toggle-sidebar .sidebar.show .nav-link { justify-content: flex-start !important; padding: 11px 16px !important; }
	body.toggle-sidebar .sidebar.show .nav-link::after { display: none !important; }
	.sidebar.show .nav-link > span:not(.svc-ic) { display: inline !important; }
	.sidebar.show .nav-link { justify-content: flex-start; padding: 11px 16px; }
	.sidebar.show .nav-link::after { display: none; }
	/* The icon tile is a <span> too. The three `display: inline !important`
	   rules above exist only to force the LABEL visible on mobile, but as
	   written they also flattened the tile from inline-flex to inline, which
	   silently disabled its align-items/justify-content and dropped every
	   glyph into the tile's top-left corner — measured at 5.5px off centre in
	   both axes, exactly (28 - 17) / 2. They are now scoped to the label with
	   :not(.svc-ic); this restates the tile at matching weight as a backstop.
	   The equivalent desktop collision was already patched outside this media
	   query, which is why the bug only ever showed on mobile. */
	.sidebar.show .nav-link .svc-ic,
	body.toggle-sidebar .sidebar .nav-link .svc-ic {
		display: inline-flex !important;
		width: 28px !important; height: 28px !important;
	}
	.main { margin-left: 0; padding: calc(var(--header-h) + 20px) 16px 20px; }
	.pagetitle { margin: calc(var(--header-h) * -1 - 20px) -16px 22px; padding: calc(var(--header-h) + 20px) 16px 22px; }
	.mobile-nav-toggle { display: flex; }
	.search-bar { display: none; }
	body.toggle-sidebar .main { margin-left: 0; }
	body.toggle-sidebar .sidebar { width: var(--sidebar-w); }
	body.toggle-sidebar .sidebar .nav-link > span:not(.svc-ic) { display: inline !important; }
	body.toggle-sidebar .sidebar .nav-link { justify-content: flex-start !important; padding: 11px 16px !important; }
	/* Dropdown menu: make sure it fits on mobile */
	.dropdown-menu { min-width: 240px; right: -8px; }
}
@media (max-width: 575px) {
	.box-card-body h3 { font-size: 1.5rem; }
	.payment-container-list { grid-template-columns: repeat(2, 1fr); }
	.paybill-category-container { grid-template-columns: repeat(2, 1fr); }
	.amt-grid { grid-template-columns: repeat(2, 1fr); }
	.card-header { padding: 14px 18px; }
	.card-body { padding: 18px; }
	/* Stack tables to data-label format on mobile */
	.table thead { display: none; }
	.table, .table tbody, .table tr, .table td { display: block; width: 100%; }
	.table tr {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--r-md);
		margin-bottom: 12px;
		padding: 6px 0;
	}
	.table tbody tr:hover { background: var(--surface); }
	.table td {
		border-bottom: 1px solid var(--border-lt);
		padding: 10px 16px;
		display: flex; justify-content: space-between; align-items: center;
		font-size: 13px;
	}
	.table td:last-child { border-bottom: none; }
	.table td[data-label]::before {
		content: attr(data-label);
		font-weight: 700; color: var(--tx);
		font-family: var(--heading); font-size: 11px;
		text-transform: uppercase; letter-spacing: .05em;
		margin-right: 12px;
	}
	.account-settings-navbar .nav { border-radius: var(--r-md); flex-direction: column; gap: 2px; padding: 4px; }
	.account-settings-navbar .nav-link { width: 100%; justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   SUPPORT TICKET (inbox view)
   ════════════════════════════════════════════════════════════════════ */
.support-ticket-section { width: 100%; }
.support-ticket-section .inbox-wrapper {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	overflow: hidden;
	display: flex; flex-direction: column;
	max-height: calc(100vh - 220px);
	min-height: 540px;
}
.support-ticket-section .top-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 22px;
	background: var(--bg-alt);
	border-bottom: 1px solid var(--border);
	gap: 16px;
}
.support-ticket-section .top-bar > div { display: flex; align-items: center; gap: 10px; }
.support-ticket-section .top-bar .user {
	width: 38px; height: 38px;
	border-radius: 50%; object-fit: cover;
	border: 2px solid var(--pri-100);
}
.support-ticket-section .top-bar .name {
	font-family: var(--heading);
	font-weight: 700; font-size: 13.5px; color: var(--tx);
}
.support-ticket-section .top-bar .close-btn {
	background: var(--surface); border: 1px solid var(--border);
	color: var(--tx-2); width: 36px; height: 36px;
	border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: all .15s;
}
.support-ticket-section .top-bar .close-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

.support-ticket-section .chats {
	flex: 1; overflow-y: auto;
	padding: 22px;
	background: var(--bg);
	display: flex; flex-direction: column; gap: 16px;
}
.support-ticket-section .chat-box {
	display: flex; gap: 12px; max-width: 78%;
}
.support-ticket-section .chat-box.this-side { align-self: flex-end; flex-direction: row-reverse; }
.support-ticket-section .chat-box.opposite-side { align-self: flex-start; }
.support-ticket-section .chat-box .img img {
	width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
	border: 2px solid var(--surface); box-shadow: var(--sh-xs);
}
.support-ticket-section .chat-box .text-wrapper { min-width: 0; }
.support-ticket-section .chat-box .name {
	font-family: var(--heading);
	font-size: 12px; font-weight: 700;
	color: var(--tx-3); margin: 0 0 4px;
}
.support-ticket-section .chat-box.this-side .name { text-align: right; }
.support-ticket-section .chat-box .text {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 12px 16px;
	font-size: 13.5px;
	color: var(--tx-2);
	line-height: 1.6;
}
.support-ticket-section .chat-box.this-side .text {
	background: var(--pri);
	color: #fff;
	border-color: var(--pri);
}
.support-ticket-section .chat-box .text p { margin: 0; }
.support-ticket-section .chat-box .file {
	margin-top: 8px;
	background: var(--bg-alt);
	padding: 8px 12px;
	border-radius: var(--r-sm);
	font-size: 12px;
	display: inline-flex; align-items: center; gap: 8px;
}
.support-ticket-section .chat-box .file a { color: var(--pri); font-weight: 600; }
.support-ticket-section .chat-box.this-side .file { background: rgba(255,255,255,.18); }
.support-ticket-section .chat-box.this-side .file a { color: #fff; }
.support-ticket-section .chat-box .time {
	display: block; margin-top: 6px;
	font-size: 11px; color: var(--tx-3);
}
.support-ticket-section .chat-box.this-side .time { text-align: right; }

.support-ticket-section .typing-area {
	background: var(--surface);
	border-top: 1px solid var(--border);
	padding: 14px 18px;
}
.support-ticket-section .typing-area .input-group {
	display: flex; align-items: center; gap: 10px;
	background: var(--bg-alt);
	border-radius: var(--r-full);
	padding: 4px 4px 4px 14px;
	border: 1px solid var(--border);
}
.support-ticket-section .typing-area .input-group:focus-within {
	border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-50);
}
.support-ticket-section .typing-area .input-group .form-control {
	border: none; background: transparent;
	flex: 1; padding: 10px 0;
	font-size: 14px;
}
.support-ticket-section .typing-area .input-group .form-control:focus { box-shadow: none; }
.support-ticket-section .typing-area .upload-img {
	position: relative;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	font-size: 16px; color: var(--tx-2);
	transition: all .15s;
}
.support-ticket-section .typing-area .upload-img:hover { border-color: var(--pri); color: var(--pri); }
.support-ticket-section .typing-area .upload-img input[type=file] {
	position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.support-ticket-section .typing-area .submit-btn {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--pri); color: #fff;
	border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	box-shadow: 0 4px 12px rgba(0,113,227,.30);
	transition: all .2s var(--ease);
}
.support-ticket-section .typing-area .submit-btn:hover {
	background: var(--pri-700);
	transform: scale(1.05);
}
.support-ticket-section .typing-area .img-preview {
	display: none;
	margin-bottom: 10px;
	padding: 8px;
	background: var(--bg-alt);
	border-radius: var(--r);
	position: relative; max-width: 140px;
}
.support-ticket-section .typing-area .img-preview.show { display: inline-block; }
.support-ticket-section .typing-area .img-preview img { max-width: 100%; border-radius: var(--r-sm); }
.support-ticket-section .typing-area .img-preview .delete {
	position: absolute; top: -8px; right: -8px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--red); color: #fff; border: 2px solid #fff;
	cursor: pointer; font-size: 9px;
	display: flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════
   REFERRAL PAGE
   ════════════════════════════════════════════════════════════════════ */
.referral-link-box {
	background: linear-gradient(135deg, var(--pri-50) 0%, var(--pri-100) 100%);
	border: 1px solid var(--pri-200);
	border-radius: var(--r-xl);
	padding: 24px;
	margin-bottom: 22px;
}
.referral-link-box .label {
	font-family: var(--heading);
	font-size: 11.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--pri); margin-bottom: 8px;
}
.referral-link-box .link-row {
	display: flex; gap: 10px;
	background: var(--surface);
	border-radius: var(--r-full);
	padding: 5px 5px 5px 16px;
	border: 1px solid var(--pri-200);
}
.referral-link-box .link-row input {
	flex: 1; border: none; background: transparent;
	font-family: var(--mono); font-size: 13px;
	color: var(--tx); padding: 8px 0;
}

/* ════════════════════════════════════════════════════════════════════
   FORM GROUP (Bootstrap-ish fallback used in change password / kyc)
   ════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 18px; }
.form-group label, .form-group .col-form-label {
	display: block; font-size: 12.5px; font-weight: 700;
	color: var(--tx); margin-bottom: 7px;
	font-family: var(--heading);
}

/* ════════════════════════════════════════════════════════════════════
   DISCO STATUS PAGE
   ════════════════════════════════════════════════════════════════════ */
.disco-status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.disco-status-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 20px;
	transition: all .2s var(--ease);
}
.disco-status-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.disco-status-card .name {
	font-family: var(--heading); font-weight: 800;
	font-size: 16px; color: var(--tx); margin: 0 0 4px;
}

/* ════════════════════════════════════════════════════════════════════
   PAY BILL PREVIEW / DETAILS shared bits
   ════════════════════════════════════════════════════════════════════ */
.section-title { font-family: var(--heading); font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; }

/* ════════════════════════════════════════════════════════════════════
   FORM SWITCH (Bootstrap 5-style toggle, used in notification settings)
   ════════════════════════════════════════════════════════════════════ */
.form-switch { display: flex; align-items: center; }
.form-switch .form-check-input {
	width: 38px; height: 22px;
	border: none;
	background: var(--tx-4);
	border-radius: var(--r-full);
	appearance: none; -webkit-appearance: none;
	position: relative;
	cursor: pointer;
	transition: background .2s var(--ease);
	flex-shrink: 0;
}
.form-switch .form-check-input::before {
	content: ''; position: absolute;
	top: 2px; left: 2px;
	width: 18px; height: 18px;
	background: #fff; border-radius: 50%;
	transition: transform .2s var(--ease);
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.form-switch .form-check-input:checked { background: var(--pri); }
.form-switch .form-check-input:checked::before { transform: translateX(16px); }
.form-switch .form-check-input:disabled { opacity: .5; cursor: not-allowed; }
.form-switch .form-check-input:focus { outline: none; box-shadow: 0 0 0 3px var(--pri-50); }

/* Utility margins/padding used in views */
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.p-3 { padding: 16px !important; }

/* ── Fix: On mobile, profile links are in sidebar ── */

/* ── Prevent iOS auto-zoom on input focus ── */
@media(max-width:991px){
	input[type="text"],input[type="number"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],input[type="url"],select,textarea,.form-control,.form-select,.global-search{font-size:16px!important}
	/* On mobile the profile name is hidden, so the .nav-profile link must not
	   draw its own bordered circle/pill behind the avatar (that caused the
	   "second circle" beneath the avatar). Reduce it to just the avatar. */
	.header-nav .nav-profile{width:auto;padding:0;border:none;background:none;border-radius:50%}
	.header-nav .nav-profile:hover{background:none}
}

/* ============================================================================
   Apple refinement layer (appended) — tightens type & softens surfaces to
   match the Apple design language. Retunes existing styles via the cascade
   without renaming variables or restructuring components.
   ========================================================================== */
:root{
	/* Softer Apple-style elevation */
	--sh-xs: 0 1px 2px rgba(0,0,0,.04);
	--sh-sm: 0 1px 3px rgba(0,0,0,.05);
	--sh-md: 0 6px 20px rgba(0,0,0,.06);
	--sh-lg: 0 18px 40px rgba(0,0,0,.08);
	--sh-xl: 0 28px 60px rgba(0,0,0,.10);
}
body, .main, #app{
	font-family: var(--body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: .004em;
}
/* Apple caps display weight at ~600 and uses tight tracking on large type */
h1, h2, h3, .pagetitle h3{
	font-family: var(--heading);
	font-weight: 600 !important;
	letter-spacing: -.015em;
}
h4, h5, h6{
	font-family: var(--heading);
	font-weight: 600 !important;
	letter-spacing: -.01em;
}
/* Pill buttons, Apple-blue primary */
.btn, button.btn{ letter-spacing: 0; }
/* Inputs: calmer borders + Apple focus ring */
.field input, .field select, .field textarea, input.form-control, select.form-control, textarea.form-control{
	border-color: var(--border);
	border-radius: var(--r-md);
}
.field input:focus, .field select:focus, .field textarea:focus,
input.form-control:focus, select.form-control:focus, textarea.form-control:focus{
	border-color: var(--pri);
	box-shadow: 0 0 0 3px rgba(0,113,227,.15);
	outline: none;
}
/* Cards: Apple radius + hairline + soft shadow */
.card, .panel, .tile, .stat-card{
	border-radius: var(--r-lg);
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — global safety overrides
   Catches pale tint backgrounds & inline-styled surfaces used across
   user pages so they render correctly under [data-theme="dark"].
   Light mode is untouched (these only apply when data-theme=dark).
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
	/* Pale info-box tints → dark translucent equivalents */
	--tint-blue:  rgba(59,130,246,.14);
	--tint-green: rgba(34,197,94,.14);
	--tint-amber: rgba(245,158,11,.14);
	--tint-red:   rgba(239,68,68,.14);
}

/* Map common hardcoded light tints to readable dark surfaces.
   Attribute selectors catch inline styles without touching markup. */
[data-theme="dark"] [style*="background:#eef6ff"],
[data-theme="dark"] [style*="background:#e3f7ec"],
[data-theme="dark"] [style*="background:#fdf0d9"],
[data-theme="dark"] [style*="background:#fdecef"],
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background:#fdf3f4"],
[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background:#ecfdf5"]{
	background: var(--bg-alt) !important;
}

/* Pale-tint utility/badge classes commonly used in these views */
[data-theme="dark"] .badge-soft,
[data-theme="dark"] .chip,
[data-theme="dark"] .pill-soft{ background: var(--bg-alt); color: var(--tx-2); }

/* Any element that still resolves to near-white in dark mode gets
   pulled to the dark surface, and stark dark text to light text. */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background:#f5f5f7"]{
	background: var(--surface) !important;
}
[data-theme="dark"] [style*="color:#1d1d1f"],
[data-theme="dark"] [style*="color:#0c0f14"],
[data-theme="dark"] [style*="color: #1d1d1f"]{
	color: var(--tx) !important;
}

/* ── Catch-all: hard-coded light-mode text colors → adaptive light text.
   Covers inline styles across every user page so dark mode never hides text. */
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color:#101012"],
[data-theme="dark"] [style*="color:#1a1a1a"],
[data-theme="dark"] [style*="color:#222"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color:#111827"]{
	color: var(--tx) !important;
}
/* Secondary / muted greys → adaptive secondary text */
[data-theme="dark"] [style*="color:#6e6e73"],
[data-theme="dark"] [style*="color: #6e6e73"],
[data-theme="dark"] [style*="color:#52525b"],
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color:#666"]{
	color: var(--tx-2) !important;
}
[data-theme="dark"] [style*="color:#86868b"],
[data-theme="dark"] [style*="color: #86868b"],
[data-theme="dark"] [style*="color:#999"],
[data-theme="dark"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="color:#aaa"]{
	color: var(--tx-3) !important;
}
/* Additional hard-coded light backgrounds → dark surfaces */
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background:#fbfbfd"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background:#f0f0f2"],
[data-theme="dark"] [style*="background:#f3f4f6"]{
	background: var(--surface) !important;
}

/* Cards, tables, inputs that may carry inline white backgrounds */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .tile,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th{
	background-color: var(--surface);
	color: var(--tx);
	border-color: var(--border);
}

/* Inputs in dark mode */
[data-theme="dark"] input.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] .form-select{
	background: var(--bg-alt);
	color: var(--tx);
	border-color: var(--border);
}
[data-theme="dark"] input.form-control::placeholder,
[data-theme="dark"] textarea.form-control::placeholder{ color: var(--tx-3); }

/* ── Pastel rich-card toolkit (shared across showcase pages) ── */
:root{
  --pastel-mint:#e9f5ee; --pastel-cream:#fbf3da; --pastel-ice:#e7eef6;
  --pastel-pink:#fce6e8; --pastel-mauve:#ece6f5; --pastel-peach:#fdeede;
}
.pastel-grid{display:grid;gap:16px}
.pastel-grid.cols-2{grid-template-columns:1fr 1fr}
.pastel-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.pastel-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.pastel-tile{border-radius:20px;padding:24px;border:none;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.pastel-tile:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.09)}
.pastel-tile.t-pink{background:var(--pastel-pink)}
.pastel-tile.t-mint{background:var(--pastel-mint)}
.pastel-tile.t-cream{background:var(--pastel-cream)}
.pastel-tile.t-ice{background:var(--pastel-ice)}
.pastel-tile.t-mauve{background:var(--pastel-mauve)}
.pastel-tile.t-peach{background:var(--pastel-peach)}
.pastel-tile .pt-icon{width:48px;height:48px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:23px;color:var(--pri,#0071e3);box-shadow:0 5px 14px rgba(0,0,0,.06);margin-bottom:14px}
.pastel-tile .pt-num{font-size:2rem;font-weight:800;font-family:var(--heading,inherit);letter-spacing:-.03em;line-height:1;color:#101012}
.pastel-tile .pt-lbl{font-size:13px;color:#52525b;font-weight:600;margin-top:6px}
.pastel-hero{border-radius:24px;padding:32px;background:var(--pastel-mauve);display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.pastel-hero .ph-amount{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:#101012}
.pastel-hero .ph-label{font-size:13px;color:#52525b;font-weight:600}
@media(max-width:900px){.pastel-grid.cols-4{grid-template-columns:1fr 1fr}.pastel-grid.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pastel-grid.cols-4,.pastel-grid.cols-3,.pastel-grid.cols-2{grid-template-columns:1fr}}

/* ── Account dropdown menu (anchored at avatar in topbar) ── */
.nav-account{position:relative}
.nav-account .nav-profile{cursor:pointer;display:flex;align-items:center;gap:8px;text-decoration:none}
.nav-avatar{position:relative;display:block;width:38px;height:38px;min-width:38px;border-radius:50%;overflow:hidden;border:1px solid var(--border-lt,#e5e7eb);background:#f3f4f6;flex-shrink:0}
.nav-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border:0;border-radius:0;margin:0}
.nav-avatar .pw-avatar-icon{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;margin:0;background:#f3f4f6;color:#4b5563}
.nav-avatar .pw-avatar-initials{font-weight:700;font-size:15px;letter-spacing:.3px;color:#4b5563;text-transform:uppercase;line-height:1}
.nav-avatar-lg .pw-avatar-initials,.nav-avatar .pw-avatar-initials-lg{font-size:17px}
[data-theme="dark"] .nav-avatar .pw-avatar-icon,[data-theme="dark"] .nav-avatar .pw-avatar-initials{background:rgba(255,255,255,.08);color:rgba(255,255,255,.82)}
.nav-avatar-lg{width:42px;height:42px;min-width:42px}
.nav-account .account-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:248px;background:var(--surface,#fff);border:1px solid var(--border-lt,#e5e7eb);border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.16);padding:6px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .18s;z-index:1200}
.nav-account .account-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.account-menu .account-menu-head{display:flex;align-items:center;gap:11px;padding:12px;border-bottom:1px solid var(--border-lt,#eee);margin-bottom:6px}
.account-menu .account-menu-name{font-size:14px;font-weight:700;color:var(--tx,#111);line-height:1.2}
.account-menu .account-menu-email{font-size:11px;color:var(--tx-3,#888);word-break:break-all;margin-top:2px}
.account-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--tx-2,#444);text-decoration:none;transition:background .15s,color .15s}
.account-menu a:hover{background:var(--pri-50,#eef6ff);color:var(--pri,#0071e3)}
.account-menu a i{font-size:17px;width:20px;text-align:center}
.account-menu .account-menu-divider{height:1px;background:var(--border-lt,#eee);margin:6px 4px}
.account-menu a.account-menu-logout{color:#dc2626}
.account-menu a.account-menu-logout:hover{background:#fef2f2;color:#dc2626}

/* ════════════════════════════════════════════════════════════════════
   DARK-MODE VISIBILITY FIXES (frontend user dashboard)
   These target elements that hardcode light-mode hex colors and therefore
   stay dark-on-dark when [data-theme="dark"] is active: pastel hero/tiles,
   any stray near-black text, badge text, and icons inheriting a dark color.
   Light mode is untouched — every rule below is scoped to data-theme=dark.
   ════════════════════════════════════════════════════════════════════ */

/* ROOT CAUSE: a plain `:root{...}` later in this file re-defines the pastel
   tokens to LIGHT hex (#ece6f5 etc.), overriding the dark values by source
   order — so pastel hero/tiles stayed light in dark mode. We pin the pastel
   surfaces to proper dark translucent values in dark mode (this rule comes
   last, so it wins), then set their text to light to match. */
[data-theme="dark"]{
	--pastel-pink:rgba(252,230,232,.07) !important;
	--pastel-mauve:rgba(236,230,245,.07) !important;
	--pastel-mint:rgba(233,245,238,.07) !important;
	--pastel-cream:rgba(251,243,218,.07) !important;
	--pastel-ice:rgba(231,238,246,.07) !important;
	--pastel-peach:rgba(253,237,222,.07) !important;
}
/* Now that tiles are dark, their numbers & labels must be light */
[data-theme="dark"] .pastel-hero .ph-amount,
[data-theme="dark"] .pastel-tile .pt-num{ color: var(--tx) !important; }
[data-theme="dark"] .pastel-hero .ph-label,
[data-theme="dark"] .pastel-tile .pt-lbl{ color: var(--tx-3) !important; }

/* Pastel icon chip keeps a white plate in light mode; soften for dark so
   the icon (var(--pri)) reads against it without a glaring white square */
[data-theme="dark"] .pastel-tile .pt-icon{
	background: rgba(255,255,255,.1) !important;
	box-shadow: none !important;
}

/* Generic safety net: any element that still resolves to near-black text
   via a hardcoded hex gets pulled to readable light text in dark mode. */
[data-theme="dark"] [style*="color:#101012"],
[data-theme="dark"] [style*="color: #101012"],
[data-theme="dark"] [style*="color:#0c0f14"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color:#222"],
[data-theme="dark"] [style*="color:#333"]{ color: var(--tx) !important; }
[data-theme="dark"] [style*="color:#52525b"],
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color:#777"]{ color: var(--tx-3) !important; }

/* Bootstrap-style dark text utilities that don't flip on their own */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black,
[data-theme="dark"] .text-body{ color: var(--tx) !important; }

/* Icons that inherit a fixed dark color or use black fill/stroke.
   Phosphor/feather use currentColor, so fixing text color fixes them;
   this catches inline-styled SVGs and explicit black fills. */
[data-theme="dark"] svg[fill="#000"],
[data-theme="dark"] svg[fill="#000000"],
[data-theme="dark"] svg [fill="#000"],
[data-theme="dark"] svg [fill="#000000"]{ fill: currentColor !important; }
[data-theme="dark"] svg[stroke="#000"],
[data-theme="dark"] svg [stroke="#000"]{ stroke: currentColor !important; }
[data-theme="dark"] [style*="fill:#000"],
[data-theme="dark"] [style*="fill: #000"]{ fill: currentColor !important; }

/* Badges using a hardcoded white/light background with dark text */
[data-theme="dark"] .badge.bg-white,
[data-theme="dark"] .badge.bg-light{
	background: var(--bg-alt) !important;
	color: var(--tx-2) !important;
	border: 1px solid var(--border) !important;
}
/* ════════════════════════════════════════════════════════════════
   Sidebar — dark mode. The sidebar is light by default; in dark mode
   it must go dark so it doesn't glare white against the dark UI.
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .sidebar {
	background: #14181f;
	border-right: 1px solid var(--border, #2a3140);
	box-shadow: inset -1px 0 0 rgba(255,255,255,.02);
}
[data-theme="dark"] .sidebar-nav .nav-link {
	color: rgba(255,255,255,.7);
}
[data-theme="dark"] .sidebar-nav .nav-link:hover {
	background: rgba(255,255,255,.06);
	color: #fff;
}
[data-theme="dark"] .sidebar-nav .menu-header {
	color: rgba(255,255,255,.34);
}
[data-theme="dark"] .sidebar-nav .nav-link.active {
	background: rgba(0,113,227,.18); color: #7fbcff;
}
[data-theme="dark"] .sidebar-nav .nav-link.active > i { color: #7fbcff; }

/* ════════════════════════════════════════════════════════════════
   Profile avatar fallback icon — matches the homepage user icon
   (grey circle + person outline). Shown when the user has NOT
   uploaded a profile picture; replaced by their photo once uploaded.
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .nav-avatar,[data-theme="dark"] .pw-avatar-icon{
	background:rgba(255,255,255,.08);border-color:var(--border,#2a3140);color:rgba(255,255,255,.75);
}