/* =========================================================
   TextRoute — Brand Theme
   Matches the TextRoute logo (mint + purple on dark)
   Safe overlay: does not remove/replace any existing layout,
   only re-skins colors, glows and the sidebar branding area.
   ========================================================= */

:root{
	/* Light-only panel: tells phones in dark mode NOT to force-darken
	   the pages (Chrome's Auto Dark Theme respects this). NOTE: plain
	   `light` does NOT opt out — it must be `only light` (verified
	   against Chrome's Auto Dark Theme docs + Chromium 156 behavior).
	   Without it the light content renders muddy-dark and buttons lose
	   contrast on dark-mode phones — reported by Fihad 2026-11-15. */
	color-scheme: only light;
	--textroute-mint:        #3ddc84;
	--textroute-mint-2:      #22c55e;
	--textroute-mint-glow:    rgba(61, 220, 132, 0.55);
	--textroute-mint-glow-soft: rgba(61, 220, 132, 0.25);
	--textroute-black:        #04060f;
	--textroute-black-2:      #0a0d16;
	--textroute-black-3:      #10131f;
	--textroute-white:        #f3f6fb;
}

/* ---------- Top navbar ---------- */
.navbar-inner{
	background: linear-gradient(180deg, #14161f 0%, var(--textroute-black-2) 55%, var(--textroute-black) 100%) !important;
	border-bottom: 1px solid rgba(61,220,132,0.35);
	box-shadow: 0 1px 12px rgba(61,220,132,0.15);
}

/* ---------- Sidebar ---------- */
#sidebar{
	background: linear-gradient(180deg, var(--textroute-black-2) 0%, var(--textroute-black) 100%) !important;
	border-right: 1px solid rgba(61,220,132,0.25);
}

.side-nav li a,
.accordion-header a{
	background: linear-gradient(180deg, var(--textroute-black-3) 0%, var(--textroute-black) 100%) !important;
	color: #cfd8e8 !important;
	border-bottom: 1px solid rgba(61,220,132,0.08) !important;
	transition: all .2s ease;
}

.side-nav li a:hover,
.accordion-header a:hover{
	background: linear-gradient(90deg, rgba(61,220,132,0.18) 0%, rgba(61,220,132,0.02) 100%) !important;
	color: #ffffff !important;
	box-shadow: inset 3px 0 0 var(--textroute-mint);
}

.side-nav li.active > a,
.side-nav li a.active{
	background: linear-gradient(90deg, rgba(61,220,132,0.28) 0%, rgba(61,220,132,0.04) 100%) !important;
	color: #ffffff !important;
	box-shadow: inset 3px 0 0 var(--textroute-mint), 0 0 12px rgba(61,220,132,0.25);
}

.side-nav li ul li a{
	background: var(--textroute-black-2) !important;
}

.side-nav .sidenav-icon .sidenav-link-color{
	background: rgba(61,220,132,0.35) !important;
}
.side-nav li a:hover .sidenav-icon .sidenav-link-color,
.side-nav li.active .sidenav-icon .sidenav-link-color{
	background: var(--textroute-mint) !important;
	box-shadow: 0 0 8px var(--textroute-mint-glow);
}

/* ---------- Brand / logo area ---------- */
.branding{
	background: none !important;
	border-bottom: 1px solid rgba(61,220,132,0.25);
}
.branding .logo img{
	background: none;
	border-radius: 8px;
	padding: 3px;
	border: none;
	box-shadow: none;
	filter: drop-shadow(0 0 10px var(--textroute-mint-glow-soft));
}

/* Admin panel brand badge (square logo mark) */
.brand img{
	background: none;
	border-radius: 10px;
	padding: 3px;
	object-fit: contain;
	border: none;
	box-shadow: none;
	filter: drop-shadow(0 0 10px var(--textroute-mint-glow-soft));
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-info,
button[type="submit"].btn{
	background: linear-gradient(180deg, var(--textroute-mint) 0%, var(--textroute-mint-2) 100%) !important;
	border: none !important;
	box-shadow: 0 2px 10px rgba(61,220,132,0.35);
	text-shadow: none !important;
	color: #052e16 !important;
}
.btn-primary:hover,
.btn-info:hover{
	filter: brightness(1.1);
	box-shadow: 0 2px 16px rgba(61,220,132,0.55);
}

/* ---------- Links accents ---------- */
a{ color: var(--textroute-mint); }
a:hover{ color: var(--textroute-mint-2); }

/* NOTE: no global h1/h2/h3 color here — the old light #e8edf7 rule made
   headings near-invisible on every light-background page (admin panel
   included). Headings keep their page/default colors. */

/* ---------- Panels / widgets ---------- */
.widget-box,
.panel,
.box{
	border-color: rgba(61,220,132,0.12) !important;
}
.widget-title,
.panel-heading{
	background: linear-gradient(90deg, rgba(61,220,132,0.10) 0%, transparent 100%) !important;
	border-bottom: 1px solid rgba(61,220,132,0.2) !important;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: var(--textroute-black-2); }
::-webkit-scrollbar-thumb{ background: var(--textroute-mint-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--textroute-mint); }

/* ---------- Badges / status ---------- */
.label-success, .badge-success{ background: #00c774 !important; }
.label-important, .badge-important{ background: #ff3860 !important; }
.label-info, .badge-info{ background: var(--textroute-mint) !important; color: #052e16 !important; }

/* ---------- Login screen accent (kept consistent with existing dark login) ---------- */
.textroute-brand-mark{
	color: var(--textroute-white);
	text-shadow: 0 0 14px var(--textroute-mint-glow);
}

/* =========================================================
   TextRoute — Mint brand mark (logo + dashboard name)
   The logo file itself is transparent-background with a
   mint + purple monogram; this block makes the "TextRoute"
   title next to it match that same mint identity everywhere.
   ========================================================= */
.brand strong{
	background: linear-gradient(180deg, #e7f7ef 0%, #bbf7d0 30%, #3ddc84 60%, #22c55e 85%, #137747 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--textroute-mint);
	font-weight: 900;
	font-style: italic;
	letter-spacing: .01em;
	text-shadow: 1px 1px 0 rgba(0,0,0,.55), 2px 2px 4px rgba(0,0,0,.5), 0 0 16px rgba(61,220,132,.4);
}

.brand span{
	color: rgba(61, 220, 132, 0.65);
}

/* =========================================================
   Mobile header wordmark — sit it lower, render it clean.
   theme-dark.css + textroute-mobile-ui.css fight over this
   mark with !important rules (img hidden on mobile, the
   "TextRoute" text comes from .logo:after). This file loads
   last, so this block is the final word. Fihad 2026-11-15:
   the name sat too high against the top edge.
   ========================================================= */
@media screen and (max-width: 979px) {
	/* The navbar itself: Bootstrap 2's responsive CSS gives the fixed
	   navbar -20px side margins (meant to offset a 20px-padded body),
	   but this panel zeroes body padding on mobile — so the navbar was
	   430px wide at x=-20, clipping the wordmark on the left and the
	   user menu on the right. Zero the bleed; the bar is exactly the
	   viewport wide now. */
	html body .navbar.navbar-fixed-top{
		width: 100% !important;	/* theme-dark's 767px block sets calc(100% + 40px) */
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	html body .navbar.navbar-fixed-top .branding{
		top: 10px !important;	/* was 5px — a bit lower in the brand row */
		left: 8px !important;	/* breathing room from the left edge */
	}
	html body .navbar.navbar-fixed-top .branding .logo:after{
		background: linear-gradient(180deg, #e7f7ef 0%, #bbf7d0 30%, #3ddc84 60%, #22c55e 85%, #137747 100%) !important;
		-webkit-background-clip: text !important;
		background-clip: text !important;
		-webkit-text-fill-color: transparent !important;
		color: #3ddc84 !important;
		font-weight: 800 !important;	/* was 400 — a proper brand weight */
		font-style: italic !important;
	}
}