/* =============================================================================
theme-netra-green.css — "Netra Green": blue->green gradient sidebar
-----------------------------------------------------------------------------
Load this file LAST, after bootstrap(.min).css, icons.css and app(.min).css:
<-- add this
It restyles the existing markup only (no HTML changes required):
• Left sidebar -> soft pastel blue→pink gradient with dark text
• Top bar -> thin dark strip + clean white navbar
• Cards -> subtle white→blue gradient, rounded, soft shadow
• Page surface -> light blue-grey so cards lift off the background
Works whether the body carries `dark-sidenav` / `dark-topbar` or not.
========================================================================== */
:root {
--ntr-side-top: #d3ecff; /* sidebar gradient start (light sky) */
--ntr-side-mid: #a7d8bf; /* sidebar gradient middle (soft green) */
--ntr-side-bot: #2e8b57; /* sidebar gradient end (#2E8B57) */
--ntr-strip: #465761; /* dark slate strip on top of the navbar*/
--ntr-primary: #1761fd; /* brand blue (matches theme $primary) */
--ntr-ink: #111315; /* sidebar menu text : BLACK */
--ntr-label: #2f59c7; /* sidebar section labels (blue) */
--ntr-icon: #111315; /* sidebar menu icons : BLACK */
--ntr-card-from: #e9f3ff; /* card gradient start (light blue) */
--ntr-card-to: #ffffff; /* card gradient end (white) */
--ntr-page-bg: #ffffff; /* page background : WHITE */
--ntr-border: #e3ebf6;
}
/* ---------- 1. Page surface ------------------------------------------------ */
body {
background-color: var(--ntr-page-bg) !important;
}
/* ---------- 2. Left sidebar : pastel gradient ------------------------------ */
/* High specificity + the dark-sidenav variant so we win against app.css. */
.left-sidenav,
body.dark-sidenav .left-sidenav,
body.dark-sidenav.navy-sidenav .left-sidenav {
background: linear-gradient(180deg,
var(--ntr-side-top) 0%,
#cfe6ec 27%,
var(--ntr-side-mid) 58%,
#57a87a 84%,
var(--ntr-side-bot) 100%) !important;
border-right: 1px solid rgba(70, 87, 97, 0.08) !important;
box-shadow: 1px 0 14px rgba(46, 91, 170, 0.06) !important;
}
/* Brand area keeps the bluest part of the gradient, like the target */
.left-sidenav .brand,
body.dark-sidenav .left-sidenav .brand {
background: transparent !important;
}
/* Menu divider lines -> soft, on a light background */
.left-sidenav hr.hr-dashed.hr-menu,
body.dark-sidenav .left-sidenav hr.hr-dashed.hr-menu {
border-color: rgba(54, 69, 106, 0.18) !important;
}
/* ---------- 3. Sidebar typography ----------------------------------------- */
/* Section labels (MAIN / ADMIN / General / Manage ...) -> blue */
.left-sidenav-menu .menu-label,
body.dark-sidenav .left-sidenav-menu .menu-label {
color: var(--ntr-label) !important;
font-weight: 600 !important;
letter-spacing: .4px;
}
/* Menu items -> dark ink instead of light-on-dark */
.left-sidenav-menu li > a,
body.dark-sidenav .left-sidenav-menu li > a,
.left-sidenav-menu li ul li > a,
body.dark-sidenav .left-sidenav-menu li ul li > a {
color: var(--ntr-ink) !important;
font-weight: 500;
}
/* Menu + arrow icons */
.left-sidenav-menu li > a i,
body.dark-sidenav .left-sidenav-menu li > a i,
.left-sidenav-menu li > a .menu-arrow i,
body.dark-sidenav .left-sidenav-menu .menu-arrow i {
color: var(--ntr-icon) !important;
}
.left-sidenav-menu li > a .menu-icon,
body.dark-sidenav .left-sidenav-menu li > a .menu-icon {
color: var(--ntr-icon) !important;
fill: rgba(91, 107, 140, 0.12) !important;
}
/* Hover */
.left-sidenav-menu li > a:hover,
body.dark-sidenav .left-sidenav-menu li > a:hover {
color: var(--ntr-primary) !important;
}
.left-sidenav-menu li > a:hover i,
body.dark-sidenav .left-sidenav-menu li > a:hover i,
.left-sidenav-menu li > a:hover .menu-icon,
body.dark-sidenav .left-sidenav-menu li > a:hover .menu-icon {
color: var(--ntr-primary) !important;
fill: rgba(23, 97, 253, 0.12) !important;
}
/* Active item -> subtle white pill + blue text (matches the soft Netra look) */
.left-sidenav-menu li > a.active,
.left-sidenav-menu li.mm-active > a,
body.dark-sidenav .left-sidenav-menu li > a.active,
body.dark-sidenav .left-sidenav-menu li.mm-active > a {
color: var(--ntr-primary) !important;
background: rgba(255, 255, 255, 0.60) !important;
border-radius: 7px !important;
padding-left: 6px !important;
}
.left-sidenav-menu li > a.active i,
.left-sidenav-menu li.mm-active > a i,
.left-sidenav-menu li > a.active .menu-icon,
body.dark-sidenav .left-sidenav-menu li.mm-active > a i,
body.dark-sidenav .left-sidenav-menu li.mm-active > a .menu-icon {
color: var(--ntr-primary) !important;
fill: rgba(23, 97, 253, 0.14) !important;
}
/* Active sub-menu link */
.left-sidenav-menu li.mm-active .mm-active > a.active,
body.dark-sidenav .left-sidenav-menu li.mm-active .mm-active > a.active,
body.dark-sidenav .left-sidenav-menu .mm-show li a.active {
color: var(--ntr-primary) !important;
font-weight: 600 !important;
}
/* Brand wordmark / SVG logo : if the logo is live text or an inline SVG,
force it dark so it is readable on the new light sidebar. (Raster/PNG
white logos must be swapped for a dark asset — CSS cannot recolour them.) */
.left-sidenav .brand .logo,
.left-sidenav .brand .logo a,
.left-sidenav .brand .logo span,
.left-sidenav .brand .logo h1,
.left-sidenav .brand .logo h2 {
color: var(--ntr-ink) !important;
}
.left-sidenav .brand .logo svg,
.left-sidenav .brand .logo svg path,
.left-sidenav .brand .logo svg text {
fill: var(--ntr-ink) !important;
}
/* ---------- 4. Top bar ----------------------------------------------------- */
/* Thin dark strip across the top of the navbar */
.navbar-custom,
body.dark-topbar .navbar-custom {
background: #ffffff !important;
border-top: 5px solid var(--ntr-strip) !important;
border-bottom: 1px solid var(--ntr-border) !important;
}
.navbar-custom .nav-link,
body.dark-topbar .navbar-custom .nav-link {
color: #6a7aa6 !important;
}
/* Brand cell in the topbar (left of navbar) -> match sidebar's blue top */
body.dark-topbar .topbar .brand,
.topbar .brand {
background: var(--ntr-side-top) !important;
}
.button-menu-mobile,
body.dark-topbar .button-menu-mobile {
color: #6a7aa6 !important;
}
/* ---------- 5. Cards : soft white→blue gradient + rounded + shadow --------- */
.card {
background: linear-gradient(135deg, var(--ntr-card-from) 0%, var(--ntr-card-to) 58%) !important;
border: 1px solid var(--ntr-border) !important;
border-radius: 14px !important;
box-shadow: 0 4px 16px rgba(46, 91, 170, 0.07) !important;
}
.card .card-header,
.card .card-footer {
background: transparent !important;
border-color: var(--ntr-border) !important;
}
/* ---------- 6. Light polish to match the target ---------------------------- */
/* Rounded, soft inputs and buttons */
.form-control,
.custom-select,
.dropdown-toggle.btn,
.btn {
border-radius: 8px !important;
}
/* A dark "navy" action button to mirror Netra's "Update Community" */
.btn-navy {
background-color: #16264a !important;
border-color: #16264a !important;
color: #fff !important;
}
.btn-navy:hover { background-color: #1f3260 !important; }
/* Top-right user / profile chip -> light panel like the target */
.nav-user,
.topbar .nav-user .nav-link {
background: #fbfdff !important;
border-radius: 10px;
}