/* Montserrat (the global typeface) is loaded via in each layout's
— not @import here — so the face downloads in parallel with the
CSS instead of blocking behind it. This sheet only APPLIES it, below. */
/* ===================================================================
Zamara Pension Portal — brand theme
-------------------------------------------------------------------
Zamara Blue (navy) #292B4D → left sidebar, headings, primary action
Zamara Green #39BD4B → subtle accent: active nav, secondary
buttons, hovers, focus, logo mark
Applied as overrides on top of the shared admin template so the
underlying template files stay untouched (mirrors the APA build).
=================================================================== */
:root {
/* Typeface — THE font switch for the whole app (mirrors USP's
--z-font-family). Change this one line and every surface follows.
Also re-point Bootstrap's own font variables so components that
resolve through them (body, .btn, .form-control, .card, …) inherit
Montserrat without a per-component override. */
--z-font-family: "Montserrat", sans-serif;
--bs-font-sans-serif: var(--z-font-family);
--bs-body-font-family: var(--z-font-family);
/* Brand palette */
--zamara-blue: #292B4D;
--zamara-blue-dark: #1f2138;
--zamara-green: #39BD4B;
--zamara-green-dark: #2ea23e;
--zamara-green-tint: rgba(57, 189, 75, 0.15);
/* Retheme the template's vertical-menu (sidebar) variables */
--bs-sidebar-bg: #292B4D;
--bs-vertical-menu-bg: #292B4D;
--bs-vertical-menu-border: #292B4D;
--bs-vertical-menu-item-color: rgba(255, 255, 255, 0.75);
--bs-vertical-menu-item-hover-color: #ffffff;
--bs-vertical-menu-item-hover-bg: rgba(255, 255, 255, 0.08);
--bs-vertical-menu-item-active-color: #ffffff;
--bs-vertical-menu-sub-item-color: rgba(255, 255, 255, 0.65);
--bs-vertical-menu-sub-item-hover-color: #ffffff;
--bs-vertical-menu-sub-item-active-color: #ffffff;
--bs-vertical-menu-title-color: rgba(255, 255, 255, 0.5);
}
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background-color: #fff !important;
}
/* ===================================================================
Global typography — Montserrat everywhere
-------------------------------------------------------------------
The Bootstrap var override above already carries Montserrat to body
and most components. This block is the safety net for rules that
HARDCODE a family (e.g. the template's apex-charts !important rules
in app.css) and so ignore the variable. Keep it broad but explicit.
=================================================================== */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, span, a, label, li, td, th,
button, input, textarea, select, optgroup,
.btn, .form-control, .form-select, .dropdown-menu,
.header-title, .card-title,
.apexcharts-text, .apexcharts-legend-text,
.apexcharts-tooltip-title, .apexcharts-tooltip-text {
font-family: var(--z-font-family) !important;
}
/* ===================================================================
Buttons
=================================================================== */
/* Primary = Zamara blue, hover → Zamara green (green appears subtly on interaction) */
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #292B4D;
--bs-btn-border-color: #292B4D;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #39BD4B;
--bs-btn-hover-border-color: #39BD4B;
--bs-btn-focus-shadow-rgb: 57, 189, 75;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #39BD4B;
--bs-btn-active-border-color: #39BD4B;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #292B4D;
--bs-btn-disabled-border-color: #292B4D;
}
/* Secondary = Zamara green, hover → Zamara blue */
.btn-secondary {
--bs-btn-color: #fff;
--bs-btn-bg: #39BD4B !important;
--bs-btn-border-color: #39BD4B !important;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #292B4D;
--bs-btn-hover-border-color: #292B4D;
--bs-btn-focus-shadow-rgb: 41, 43, 77;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #292B4D;
--bs-btn-active-border-color: #292B4D;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #39BD4B !important;
--bs-btn-disabled-border-color: #39BD4B !important;
}
.btn-outline-secondary {
--bs-btn-color: #39BD4B !important;
--bs-btn-border-color: #39BD4B !important;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #39BD4B !important;
--bs-btn-hover-border-color: #39BD4B !important;
--bs-btn-focus-shadow-rgb: 57, 189, 75;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #39BD4B !important;
--bs-btn-active-border-color: #39BD4B !important;
--bs-btn-disabled-color: #39BD4B !important;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #39BD4B !important;
--bs-gradient: none;
}
.bg-secondary {
background-color: #39BD4B !important;
}
/* ===================================================================
Left Sidebar — Zamara blue background, white text
=================================================================== */
.vertical-menu,
#sidebar-menu,
.navbar-brand-box,
.sidebar-menu-scroll {
background-color: #292B4D !important;
}
/* Default menu link colour → white */
#sidebar-menu ul li a,
#sidebar-menu ul li a i {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Link hover → brighter white on a faint white tint */
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:hover i {
color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
/* Sub-menu links */
#sidebar-menu ul li ul.sub-menu li a {
color: rgba(255, 255, 255, 0.70) !important;
}
#sidebar-menu ul li ul.sub-menu li a:hover {
color: #ffffff !important;
}
/* Menu section title */
#sidebar-menu .menu-title {
color: rgba(255, 255, 255, 0.50) !important;
}
/* ===================================================================
Nested active state — three distinct tiers
-------------------------------------------------------------------
metismenu tags EVERY ancestor in the trail with .mm-active and
the current page's with .active. Styling all of them the same
made parents look as "selected" as the page itself. Instead:
1. Current page (leaf, a.active) → strong: green pill + accent bar
2. Open ancestors (a.has-arrow) → subtle: brighter text + green
icon only — no fill, no bar (the chevron already signals "open")
3. Idle items → muted (handled above)
=================================================================== */
/* --- 1. Current page: the single strong indicator --- */
#sidebar-menu a.active,
body[data-sidebar=dark] #sidebar-menu a.active {
background-color: var(--zamara-green-tint) !important; /* faint green tint */
border-left: 3px solid #39BD4B !important; /* green accent bar */
color: #ffffff !important;
font-weight: 600 !important;
border-radius: 0 4px 4px 0;
}
#sidebar-menu a.active i,
body[data-sidebar=dark] #sidebar-menu a.active i {
color: #39BD4B !important; /* green active icon */
}
/* --- 2. Open ancestors: subtle trail cue, no pill --- */
#sidebar-menu .mm-active > a.has-arrow,
body[data-sidebar=dark] #sidebar-menu .mm-active > a.has-arrow {
background-color: transparent !important;
border-left: 0 !important;
color: #ffffff !important; /* brighter than idle */
font-weight: 500 !important;
}
#sidebar-menu .mm-active > a.has-arrow > i,
body[data-sidebar=dark] #sidebar-menu .mm-active > a.has-arrow > i {
color: #39BD4B !important; /* green icon hints the active branch */
}
/* --- 3. Nesting guide line down each open group --- */
#sidebar-menu .sub-menu.mm-show {
position: relative;
}
#sidebar-menu .sub-menu.mm-show::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 1.25rem;
width: 1px;
background-color: rgba(255, 255, 255, 0.12);
}
/* ===================================================================
Headings & table headers — Zamara blue
=================================================================== */
.header-title,
h1, h2, h3, h4, h5,
th {
color: #292B4D !important;
}
/* Links / accents pick up Zamara green on hover for a subtle brand cue */
a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
color: var(--zamara-green-dark) !important;
}
/* ===================================================================
LAYOUT GEOMETRY — anchor the sidebar to the LEFT
-------------------------------------------------------------------
The underlying Minible template ships RIGHT-anchored
(#page-topbar{right:250px}, .main-content{margin-right:250px}) but
this build renders the menu on the LEFT — so content slid UNDER the
sidebar and dead space sat on the right. Below we pin the sidebar
left and reserve space on the LEFT instead, at every breakpoint, so
nothing overlaps. Template files stay untouched.
=================================================================== */
/* Sidebar is always pinned to the left edge */
.vertical-menu {
left: 0 !important;
right: auto !important;
}
/* Hamburger colour is decided by its background, not the breakpoint:
the copy inside the navy sidebar is white; the copy in the light
topbar is Zamara blue. */
.vertical-menu .vertical-menu-btn,
.vertical-menu .vertical-menu-btn i {
color: #ffffff !important;
}
.navbar-header .vertical-menu-btn,
.navbar-header .vertical-menu-btn i {
color: #292B4D !important;
background-color: transparent !important;
border-color: transparent !important;
}
.navbar-header .vertical-menu-btn:hover,
.navbar-header .vertical-menu-btn:active,
.navbar-header .vertical-menu-btn:focus,
.navbar-header .vertical-menu-btn:hover i,
.navbar-header .vertical-menu-btn:active i,
.navbar-header .vertical-menu-btn:focus i {
color: #292B4D !important;
background-color: rgba(41, 43, 77, 0.10) !important;
border-color: transparent !important;
}
/* ===================================================================
Desktop / laptop (>= 992px): persistent sidebar
Full 250px by default; collapses to a 70px icon rail when the
hamburger sets data-sidebar-size=sm. Both modes stay left-anchored
and never overlap the content.
=================================================================== */
@media (min-width: 992px) {
/* Sidebar is always visible on desktop (also closes the 1px boundary
where the template's stray max-width:992px rule would hide it) */
.vertical-menu {
display: block !important;
}
#page-topbar {
left: 250px !important;
right: 0 !important;
}
.main-content {
margin-left: 250px !important;
margin-right: 0 !important;
}
/* --- Collapsed icon rail (data-sidebar-size=sm) ---
The rail is a deliberate, toggleable desktop mode. We keep it, but
the template lays it out for a RIGHT-hand sidebar (rail gutter and
fly-outs on the right), which overlapped our LEFT menu. Flip it. */
/* Rail pinned left; content + topbar shift by the 70px rail width */
body[data-sidebar-size="sm"] .vertical-menu {
left: 0 !important;
right: auto !important;
}
body[data-sidebar-size="sm"] .main-content {
margin-left: 70px !important;
margin-right: 0 !important;
}
body[data-sidebar-size="sm"] #page-topbar {
left: 70px !important;
right: 0 !important;
}
/* Fly-out submenus open to the RIGHT of the rail (template opens them left) */
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul {
left: 70px !important;
right: auto !important;
}
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul ul li:hover > ul {
left: 190px !important;
right: auto !important;
}
/* Keep the rail + fly-outs on-brand: navy panels, white text, green accents */
body[data-sidebar-size="sm"] #sidebar-menu ul li > a i { color: rgba(255, 255, 255, 0.85) !important; }
/* On hover the label pill expands past the 70px rail and over the light
content, so it MUST be solid/opaque navy — a translucent fill would
leave white text sitting on the white page behind it. */
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a {
background-color: #292B4D !important;
color: #ffffff !important;
box-shadow: 2px 0 8px rgba(15, 23, 42, 0.25) !important;
}
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a i {
color: #39BD4B !important;
}
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul,
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul ul {
background-color: #292B4D !important;
}
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul a {
color: rgba(255, 255, 255, 0.75) !important;
}
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
color: #ffffff !important;
background-color: var(--zamara-green-tint) !important;
}
}
/* ===================================================================
Small screens (< 992px): off-canvas full menu
-------------------------------------------------------------------
Sidebar is hidden by default and slides in at FULL width — labels and
all, never the icon strip — when the hamburger toggles .sidebar-enable.
Content spans the full width so nothing overlaps, and the logo is
hidden to avoid the greeting/logo collision.
=================================================================== */
@media (max-width: 991.98px) {
/* No reserved gutter → content is full width, no overlap */
.main-content {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Hide the logo on small screens (both the topbar and sidebar copies) */
#page-topbar .navbar-brand-box,
.vertical-menu .navbar-brand-box {
display: none !important;
}
/* Off-canvas sidebar: hidden until opened, then full width with labels */
.vertical-menu {
display: none;
position: fixed !important;
top: 70px !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
width: 250px !important;
z-index: 1005 !important;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
}
body.sidebar-enable .vertical-menu {
display: block !important;
}
/* Full scroll area + labels, even if data-sidebar-size lingers on the body */
.vertical-menu .sidebar-menu-scroll { height: 100% !important; margin-top: 0 !important; }
#sidebar-menu ul li > a span { display: inline !important; }
#sidebar-menu .menu-title { display: block !important; }
#sidebar-menu ul li > a { color: rgba(255, 255, 255, 0.85) !important; }
#sidebar-menu ul li > a i { color: rgba(255, 255, 255, 0.85) !important; }
/* If the sm "icon rail" attribute lingers after resizing DOWN from a
tablet, keep the full-width off-canvas menu (these match the
template's own high-specificity sm selectors so they actually win). */
body[data-sidebar-size="sm"] .vertical-menu {
position: fixed !important;
width: 250px !important;
left: 0 !important;
right: auto !important;
}
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a span { display: inline !important; }
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu .menu-title { display: block !important; }
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu .has-arrow:after { display: block !important; }
}
/* ===================================================================
Sidebar "Need Help?" contacts box — show only when the menu is at
full width (250px), where its text + contact details actually fit.
-------------------------------------------------------------------
• Full desktop menu (250px) ....... shown
• Collapsed icon rail (70px) ...... hidden (labels are gone too)
• Off-canvas menu on small screens shown (it opens at full 250px)
The hide rule is scoped to >=992px so it targets the real rail only;
below that the off-canvas menu is full width even if data-sidebar-size
still reads "sm", and the box should remain visible there.
=================================================================== */
.sidebar-help-box {
/* Never let it widen the rail or bleed past the sidebar edge. */
overflow: hidden;
}
@media (min-width: 992px) {
/* Collapsed to the icon rail → no room for the box, hide it. */
body[data-sidebar-size="sm"] .sidebar-help-box {
display: none !important;
}
}