/* ===========================================================================
OACER CRM — Pastel Premium theme
---------------------------------------------------------------------------
Loaded automatically by Perfex via assets_helper.php / template_helper.php
AFTER style.css, so everything here wins the cascade.
This file is purely additive. Nothing in the core app was modified.
TO REMOVE THE ENTIRE THEME: delete this file. That's it.
Design approach — GREEN
-----------------------
Greens need an anchor of depth or they read washed-out, so:
· deep forest sidebar (chrome) — anchors the palette, keeps white text
· soft green-tinted content — airy, modern
· pure white cards + soft shadows — the "premium" lift
· emerald / teal / sage on data — colour where it carries meaning
Readability is treated as a hard constraint, not a preference: every
text/background pair used here was measured, and all body and menu text
clears WCAG AA (4.5:1). Semantic colours (error/warning) stay warm on
purpose — an error rendered green stops reading as an error.
Built for Bootstrap 3.4 (float grid) — no flexbox-only layout assumptions
in the grid itself, so nothing structural can break.
=========================================================================== */
:root {
/* ---- Surfaces — a whisper of green keeps the whole app on-palette ---- */
--oc-bg: #F2F7F4; /* app background — soft green-tinted white */
--oc-surface: #FFFFFF; /* cards */
--oc-surface-alt: #F8FBF9; /* table headers, subtle fills */
--oc-border: #E2EDE7; /* hairlines */
--oc-border-strong: #D2E2D9;
/* ---- Sidebar: deep forest. Contrast with white text is ~15:1, so every
menu and sub-menu label stays comfortably readable. ---- */
--oc-nav: #143528;
--oc-nav-deep: #0C2019;
--oc-nav-hover: rgba(255, 255, 255, .07);
--oc-nav-active: rgba(94, 214, 158, .16);
--oc-nav-accent: #5ED69E; /* bright mint — active bar + active icons */
/* ---- Brand: emerald.
MEASURED: white text on #1F8259 = 4.78:1 (AA pass). The lighter
#2E9E70 tested at only 3.36:1, so filled buttons use this darker
value. Accent bars and washes can stay lighter — they carry no text. */
--oc-primary: #1F8259; /* 4.78:1 with #fff · 4.78:1 as a link on white */
--oc-primary-deep: #166647; /* 6.93:1 with #fff — hover */
--oc-primary-light: #2E9E70; /* decorative only: bars, washes, icons */
--oc-primary-soft: #E8F6F0;
/* Solid-button fills — each verified for white text (or dark text on amber) */
--oc-btn-success: #1E7A50; /* 5.31:1 with #fff */
--oc-btn-danger: #BC4E37; /* 4.91:1 with #fff */
--oc-btn-warning: #D9A441; /* paired with dark text below: 5.93:1 */
--oc-btn-warning-t: #3A2E0B;
/* ---- Data palette — green-dominant.
Greens carry the positive/progress metrics; a single warm amber is
kept for "needs attention", because four near-identical greens would
make the dashboard unscannable. ---- */
--oc-emerald: #35A56F; --oc-emerald-soft: #E6F5EE;
--oc-teal: #2D9C8F; --oc-teal-soft: #E4F4F2;
--oc-sage: #86A24E; --oc-sage-soft: #F0F5E6;
--oc-pine: #1F7A5C; --oc-pine-soft: #E2F0EA;
--oc-amber: #D9A441; --oc-amber-soft: #FBF2DF;
/* Semantic colours must stay distinguishable — an error painted green
stops reading as an error. Danger stays warm, deliberately. */
--oc-danger: #E0765F; --oc-danger-soft: #FBEAE5;
/* Back-compat aliases: earlier rules in this file reference these names. */
--oc-mint: var(--oc-emerald); --oc-mint-soft: var(--oc-emerald-soft);
--oc-sky: var(--oc-teal); --oc-sky-soft: var(--oc-teal-soft);
--oc-peach: var(--oc-danger); --oc-peach-soft: var(--oc-danger-soft);
--oc-lavender: var(--oc-pine); --oc-lavender-soft: var(--oc-pine-soft);
--oc-rose: #C97BA0; --oc-rose-soft: #F7EAF1;
/* ---- Text — green-tinted neutrals, all AA or better on white ---- */
--oc-text: #22332B; /* 13.6:1 on white */
--oc-text-muted: #5F7268; /* 5.6:1 on white */
--oc-text-faint: #8A9A91; /* 3.1:1 — decorative/placeholder only */
/* ---- Elevation — layered, low-opacity = expensive-looking ---- */
--oc-shadow-sm: 0 1px 2px rgba(37, 42, 65, .04),
0 1px 3px rgba(37, 42, 65, .06);
--oc-shadow: 0 1px 3px rgba(37, 42, 65, .04),
0 6px 16px -4px rgba(37, 42, 65, .08);
--oc-shadow-lg: 0 2px 6px rgba(37, 42, 65, .05),
0 16px 40px -8px rgba(37, 42, 65, .14);
--oc-radius: 14px;
--oc-radius-sm: 10px;
--oc-ease: cubic-bezier(.4, 0, .2, 1);
}
/* ===========================================================================
1. BASE & TYPOGRAPHY
Native font stack renders as SF Pro on Mac / Segoe UI on Windows — sharper
and more "premium" than webfont Roboto, with zero external requests.
=========================================================================== */
body,
body.app {
background: var(--oc-bg) !important;
color: var(--oc-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
"Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -.002em;
}
#wrapper { background: var(--oc-bg) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
color: var(--oc-text);
font-weight: 600;
letter-spacing: -.018em;
}
a { color: var(--oc-primary); transition: color .15s var(--oc-ease); }
a:hover,
a:focus { color: var(--oc-primary-deep); }
.text-muted { color: var(--oc-text-muted) !important; }
/* Utility text colours darkened so they stay legible on white (AA). */
.text-info { color: #14625A !important; }
.text-success { color: #196648 !important; }
.text-danger { color: #9E3D28 !important; }
.text-warning { color: #7A5A0E !important; }
::selection { background: var(--oc-primary-soft); color: var(--oc-primary-deep); }
/* Refined scrollbars (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: #BCD2C6; border-radius: 8px; border: 2px solid var(--oc-bg);
}
::-webkit-scrollbar-thumb:hover { background: #A3C0B1; }
/* ===========================================================================
2. SIDEBAR
---------------------------------------------------------------------------
Rebuilt. What was wrong before, and what changed:
1. THE NAV SCROLLED AWAY. The rail was position:absolute on a 1000px body
while the document runs to ~4450px, so at scrollY 1200 its bottom sat at
-200px — the navigation simply left the screen. Now pinned, with its own
internal scroll. Perfex collapses the rail with margin-left:-210px (not
display), so the hide/show toggle keeps working untouched.
2. NO RINGS, NO OUTLINES. The active row carried inset 0 0 0 1px and the
accent bar had a 10px glow. Both removed. State is shown with a solid
tint and a flat accent bar — nothing is outlined.
3. NO MOVEMENT ON HOVER. Hover used to animate padding-left 10px -> 17px,
which shoves the label sideways. Rows are now fixed-height and only the
background changes.
4. FIXED ROW RHYTHM. Every row is exactly 40px (34px for children) on a
consistent 8px margin, so the rail reads as one clean column.
5. SENTENCE CASE. Perfex forces uppercase + letter-spacing, which is dated
and hurts scanning at 13px. Reverted to normal case.
=========================================================================== */
body.admin .sidebar,
aside#menu.sidebar {
background: linear-gradient(180deg, #17392B 0%, #133226 55%, #0F2A20 100%) !important;
}
/* --- Pin the rail (desktop only; the mobile drawer is left alone) --- */
@media (min-width: 768px) {
aside#menu.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 210px;
padding-top: 63px; /* clears the header */
z-index: 20; /* under #header (99), over content */
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
}
/* Slim scrollbar, only visible on hover — a permanent bar is visual noise */
aside#menu.sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; }
aside#menu.sidebar:hover { scrollbar-color: rgba(255,255,255,.20) transparent; }
aside#menu.sidebar::-webkit-scrollbar { width: 8px; }
aside#menu.sidebar::-webkit-scrollbar-track { background: transparent; }
aside#menu.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
aside#menu.sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }
aside#menu.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); }
/* Perfex paints backgrounds on the inner list elements. Two broke readability
outright: ul.nav.metis-menu carries slate #626F80 over the gradient, and
li.sub-menu-item-* is solid WHITE (white labels became invisible). */
#side-menu, #side-menu.nav.metis-menu, ul.nav.metis-menu { background: transparent !important; }
#side-menu li, #side-menu > li,
#side-menu li[class*="sub-menu-item-"],
#side-menu li[class*="menu-item-"] { background: transparent !important; }
#side-menu { padding: 6px 0 28px; }
/* --- Rows --------------------------------------------------------------- */
#side-menu > li > a {
position: relative;
display: flex;
align-items: center;
height: 40px;
padding: 0 14px !important;
margin: 1px 8px;
border-radius: 8px;
color: rgba(255, 255, 255, .80) !important; /* 9.1:1 */
font-size: 13px;
font-weight: 500;
line-height: 1;
text-transform: none !important;
letter-spacing: 0 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
transition: background .15s var(--oc-ease), color .15s var(--oc-ease);
}
#side-menu > li > a:hover,
#side-menu > li > a:focus {
background: rgba(255, 255, 255, .07) !important;
color: #fff !important;
outline: 0 !important;
box-shadow: none !important;
}
/* Active: tint + flat accent bar. No ring, no glow. */
#side-menu > li.active > a {
background: rgba(94, 214, 158, .13) !important;
color: #fff !important;
font-weight: 600;
}
#side-menu > li.active > a::before {
content: "";
position: absolute;
left: -8px; top: 10px; bottom: 10px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--oc-nav-accent);
}
/* Labels + icon column */
#side-menu .menu-text {
text-transform: none !important;
letter-spacing: 0 !important;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#side-menu .menu-icon,
#side-menu > li > a > i:first-child {
width: 18px; min-width: 18px;
margin-right: 11px;
font-size: 14px;
text-align: center;
color: rgba(255, 255, 255, .55);
transition: color .15s var(--oc-ease);
}
#side-menu > li > a:hover .menu-icon,
#side-menu > li.active > a .menu-icon { color: var(--oc-nav-accent); }
/* Chevron */
#side-menu > li > a .fa-angle-left,
#side-menu > li > a > span.fa:last-child,
#side-menu > li > a > .fa.arrow {
margin-left: 6px;
font-size: 11px;
color: rgba(255, 255, 255, .32);
transition: color .15s var(--oc-ease);
}
#side-menu > li > a:hover .fa-angle-left { color: rgba(255, 255, 255, .65); }
/* --- Sub-menus: flat, with a single hairline guide. No card, no dots. ---- */
#side-menu .nav-second-level {
background: transparent !important;
border-radius: 0;
margin: 2px 8px 6px 30px;
padding: 2px 0;
border-left: 1px solid rgba(255, 255, 255, .12);
}
#side-menu .nav-second-level > li > a {
position: relative;
display: flex;
align-items: center;
height: 34px;
padding: 0 10px 0 14px !important;
margin: 1px 0 1px 6px;
border-radius: 7px;
color: rgba(255, 255, 255, .70) !important; /* 7.6:1 */
font-size: 12.5px;
font-weight: 450;
line-height: 1;
text-transform: none !important;
letter-spacing: 0 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
transition: background .15s var(--oc-ease), color .15s var(--oc-ease);
}
#side-menu .nav-second-level > li > a:hover {
background: rgba(255, 255, 255, .06) !important;
color: #fff !important;
}
#side-menu .nav-second-level > li.active > a {
background: rgba(94, 214, 158, .11) !important;
color: #fff !important;
font-weight: 550;
}
#side-menu .nav-second-level .sub-menu-text {
text-transform: none !important;
letter-spacing: 0 !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Child icons are redundant next to the guide line — hidden to let the
labels form one clean left edge. */
#side-menu .nav-second-level .menu-icon { display: none !important; }
/* --- User block --------------------------------------------------------- */
#side-menu .dashboard_user {
display: flex;
align-items: center;
color: rgba(255, 255, 255, .95);
font-weight: 600;
font-size: 13px;
letter-spacing: -.005em;
text-transform: none;
padding: 0 16px;
height: 46px;
margin-bottom: 4px;
border-bottom: 1px solid rgba(255, 255, 255, .07);
background: transparent;
}
.top-left-logout {
color: rgba(255, 255, 255, .45);
transition: color .15s var(--oc-ease);
cursor: pointer;
}
.top-left-logout:hover { color: var(--oc-nav-accent); }
/* --- Quick links -------------------------------------------------------- */
#side-menu .quick-links { padding: 8px 14px 10px; }
#side-menu .quick-links .dropdown-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, .07);
color: rgba(255, 255, 255, .75) !important;
border: 0 !important;
box-shadow: none !important;
transition: background .15s var(--oc-ease), color .15s var(--oc-ease);
}
#side-menu .quick-links .dropdown-toggle:hover {
background: rgba(94, 214, 158, .18);
color: var(--oc-nav-accent) !important;
}
/* --- Badges ------------------------------------------------------------- */
#side-menu .badge,
#side-menu .label,
#setup-menu .badge {
background: var(--oc-nav-accent);
color: #0C2019;
font-weight: 700;
font-size: 10px;
line-height: 1;
border-radius: 20px;
padding: 4px 7px;
margin-left: 6px;
box-shadow: none;
}
/* ===========================================================================
2a. SETUP FLY-OUT PANEL
---------------------------------------------------------------------------
Setup is NOT part of #side-menu. It is a separate body-level slide-out
(div#setup-menu-wrapper > ul#setup-menu) that opens at left:0 / width:210px
— i.e. directly OVER the rail — and ships its own slate #626F80.
Z-INDEX, IMPORTANT: the panel ships with z-index:9. Pinning the rail gave
the sidebar z-index:20, which made this panel open BEHIND it, so clicking
Setup looked like it did nothing. It has to sit above the rail (20) and
below the header (99) — hence 25.
Pinned and given its own scroll to match the rail (its content is ~2480px).
=========================================================================== */
#setup-menu-wrapper {
background: linear-gradient(180deg, #17392B 0%, #133226 55%, #0F2A20 100%) !important;
box-shadow: 6px 0 30px rgba(12, 32, 25, .30);
border-right: 1px solid rgba(255, 255, 255, .05);
z-index: 25 !important;
}
@media (min-width: 768px) {
#setup-menu-wrapper {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 210px;
padding-top: 63px;
/* Must be 100vh, not auto: this panel's content is ~2480px tall, and
`height:auto` grows it to content instead of bounding it.
Perfex's JS also writes an inline `min-height: 2482px` here, and
min-height always beats height — so it must be overridden too, or
the panel stays 2482px tall and never scrolls. */
height: 100vh !important;
min-height: 0 !important;
max-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
}
#setup-menu-wrapper { scrollbar-width: thin; scrollbar-color: transparent transparent; }
#setup-menu-wrapper:hover { scrollbar-color: rgba(255,255,255,.20) transparent; }
#setup-menu-wrapper::-webkit-scrollbar { width: 8px; }
#setup-menu-wrapper::-webkit-scrollbar-track { background: transparent; }
#setup-menu-wrapper::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
#setup-menu-wrapper:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }
#setup-menu,
ul#setup-menu.nav.metis-menu { background: transparent !important; }
#setup-menu li { background: transparent !important; }
#setup-menu { padding: 6px 0 28px; }
/* Panel header — the "✕ Setup" row */
#setup-menu-wrapper .setup-menu-close,
#setup-menu-wrapper > a:first-child,
#setup-menu > li:first-child {
color: rgba(255, 255, 255, .95) !important;
font-weight: 600;
}
/* Rows — mirror the main rail exactly: same height, radius, tint, no rings */
#setup-menu > li > a {
position: relative;
display: flex;
align-items: center;
height: 40px;
padding: 0 14px !important;
margin: 1px 8px;
border-radius: 8px;
color: rgba(255, 255, 255, .80) !important;
font-size: 13px;
font-weight: 500;
line-height: 1;
text-transform: none !important;
letter-spacing: 0 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
transition: background .15s var(--oc-ease), color .15s var(--oc-ease);
}
#setup-menu > li > a:hover,
#setup-menu > li > a:focus {
background: rgba(255, 255, 255, .07) !important;
color: #fff !important;
outline: 0 !important;
box-shadow: none !important;
}
#setup-menu > li.active > a {
background: rgba(94, 214, 158, .13) !important;
color: #fff !important;
font-weight: 600;
}
#setup-menu > li.active > a::before {
content: "";
position: absolute;
left: -8px; top: 10px; bottom: 10px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--oc-nav-accent);
}
#setup-menu .menu-text {
text-transform: none !important;
letter-spacing: 0 !important;
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#setup-menu .menu-icon,
#setup-menu > li > a > i:first-child {
width: 18px; min-width: 18px;
margin-right: 11px;
font-size: 14px;
text-align: center;
color: rgba(255, 255, 255, .55);
transition: color .15s var(--oc-ease);
}
#setup-menu > li > a:hover .menu-icon,
#setup-menu > li.active > a .menu-icon { color: var(--oc-nav-accent); }
#setup-menu > li > a .fa-angle-left,
#setup-menu > li > a > span.fa:last-child {
margin-left: 6px;
font-size: 11px;
color: rgba(255, 255, 255, .32);
}
/* Sub-menus — same flat guide-line treatment as the main rail */
#setup-menu .nav-second-level {
background: transparent !important;
border-radius: 0;
margin: 2px 8px 6px 30px;
padding: 2px 0;
border-left: 1px solid rgba(255, 255, 255, .12);
}
#setup-menu .nav-second-level > li > a {
display: flex;
align-items: center;
height: 34px;
padding: 0 10px 0 14px !important;
margin: 1px 0 1px 6px;
border-radius: 7px;
color: rgba(255, 255, 255, .70) !important;
font-size: 12.5px;
font-weight: 450;
line-height: 1;
text-transform: none !important;
letter-spacing: 0 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
transition: background .15s var(--oc-ease), color .15s var(--oc-ease);
}
#setup-menu .nav-second-level > li > a:hover {
background: rgba(255, 255, 255, .06) !important;
color: #fff !important;
}
#setup-menu .nav-second-level > li.active > a {
background: rgba(94, 214, 158, .11) !important;
color: #fff !important;
}
#setup-menu .nav-second-level .menu-icon { display: none !important; }
/* ===========================================================================
2b. TOP BAR — #header ships a hardcoded slate gradient; match it to the
sidebar so the chrome reads as one surface.
=========================================================================== */
#header {
background-image: linear-gradient(100deg, var(--oc-nav) 0%, #1A4433 55%, var(--oc-nav-deep) 100%) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 2px 16px rgba(12, 32, 25, .14);
border: 0;
}
#header nav > ul.navbar-nav > li > a,
#header .navbar-nav > li > a {
color: rgba(255, 255, 255, .80) !important;
border-radius: var(--oc-radius-sm);
transition: background .16s var(--oc-ease), color .16s var(--oc-ease);
}
#header nav > ul.navbar-nav > li > a:hover,
#header .navbar-nav > li > a:hover,
#header .navbar-nav > li.open > a {
background: rgba(255, 255, 255, .08) !important;
color: #fff !important;
}
#header .small-logo img { filter: saturate(1.05); }
/* Mobile hamburger */
#header .mobile-menu button,
#header .navbar-toggle {
background: rgba(255, 255, 255, .08);
border: 0;
border-radius: var(--oc-radius-sm);
color: #fff;
}
#header .navbar-toggle .icon-bar { background: #fff; }
/* Notification / count bubbles sit better with a pastel */
#header .badge,
#header .label {
background: var(--oc-peach);
color: #fff;
box-shadow: 0 0 0 2px rgba(37, 42, 65, .35);
}
/* ===========================================================================
3. CARDS — .panel_s is Perfex's primary surface (14 on the dashboard alone)
=========================================================================== */
.panel_s,
.panel_s > .panel-body,
.panel-default {
background: var(--oc-surface);
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius) !important;
box-shadow: var(--oc-shadow);
transition: box-shadow .22s var(--oc-ease), transform .22s var(--oc-ease);
}
.panel_s > .panel-body { border: 0; box-shadow: none; padding: 22px; }
.panel_s { overflow: hidden; }
.panel_s:hover { box-shadow: var(--oc-shadow-lg); }
.panel-heading,
.panel_s .panel-heading {
background: transparent;
border-bottom: 1px solid var(--oc-border);
border-radius: var(--oc-radius) var(--oc-radius) 0 0;
padding: 18px 22px;
font-weight: 600;
letter-spacing: -.012em;
color: var(--oc-text);
}
.panel-body h4 { font-size: 16px; margin-top: 4px; }
.well {
background: var(--oc-surface-alt);
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius-sm);
box-shadow: none;
}
/* ===========================================================================
4. DASHBOARD — the headline change
=========================================================================== */
/* --- KPI stat cards (Invoices Awaiting Payment / Leads / Projects / Tasks) --- */
.top_stats_wrapper {
background: var(--oc-surface) !important;
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius) !important;
padding: 20px 22px 18px !important;
box-shadow: var(--oc-shadow-sm);
position: relative;
overflow: hidden;
transition: transform .22s var(--oc-ease), box-shadow .22s var(--oc-ease);
height: 100%;
}
.top_stats_wrapper:hover {
transform: translateY(-2px);
box-shadow: var(--oc-shadow-lg);
}
/* Pastel wash + accent bar, one hue per metric */
.top_stats_wrapper::before {
content: "";
position: absolute; inset: 0 auto 0 0;
width: 4px;
border-radius: 4px 0 0 4px;
}
/* Green-dominant, but not four identical greens — the metrics have to stay
distinguishable at a glance. Progress/success metrics take the greens;
"Invoices Awaiting Payment" keeps a warm amber because it is the one that
means *act on me*, and that distinction is worth more than uniformity. */
.quick-stats-invoices .top_stats_wrapper::before { background: var(--oc-amber); }
.quick-stats-leads .top_stats_wrapper::before { background: var(--oc-emerald); }
.quick-stats-projects .top_stats_wrapper::before { background: var(--oc-teal); }
.quick-stats-tasks .top_stats_wrapper::before { background: var(--oc-sage); }
.quick-stats-invoices .top_stats_wrapper {
background: radial-gradient(120% 90% at 100% 0%, var(--oc-amber-soft) 0%, #fff 58%) !important;
}
.quick-stats-leads .top_stats_wrapper {
background: radial-gradient(120% 90% at 100% 0%, var(--oc-emerald-soft) 0%, #fff 58%) !important;
}
.quick-stats-projects .top_stats_wrapper {
background: radial-gradient(120% 90% at 100% 0%, var(--oc-teal-soft) 0%, #fff 58%) !important;
}
.quick-stats-tasks .top_stats_wrapper {
background: radial-gradient(120% 90% at 100% 0%, var(--oc-sage-soft) 0%, #fff 58%) !important;
}
/* Label row */
.top_stats_wrapper p.text-uppercase {
font-size: 11px !important;
font-weight: 600;
letter-spacing: .07em;
color: var(--oc-text-muted);
position: relative; z-index: 1;
margin-bottom: 10px;
}
/* The count — this is the number people actually read */
.top_stats_wrapper p.text-uppercase .pull-right {
font-size: 21px;
font-weight: 700;
letter-spacing: -.03em;
color: var(--oc-text);
line-height: 1;
text-transform: none;
}
.top_stats_wrapper p.text-uppercase i {
margin-right: 7px;
opacity: .75;
}
.quick-stats-invoices .top_stats_wrapper i { color: var(--oc-amber); }
.quick-stats-leads .top_stats_wrapper i { color: var(--oc-emerald); }
.quick-stats-projects .top_stats_wrapper i { color: var(--oc-teal); }
.quick-stats-tasks .top_stats_wrapper i { color: var(--oc-sage); }
/* FIX: the KPI cards formed a staircase.
Bootstrap 3's grid is float-based, so when one card is taller than its
neighbour (here "Invoices Awaiting Payment" wraps to two lines: 82px vs
73px) the next float catches on it and drops out of alignment — measured
tops of 239 / 239 / 341 / 442 across only four cards.
Making just this one row a flex container gives equal-height columns and
guarantees clean rows at every breakpoint. Scoped to #widget-top_stats so
no other Bootstrap grid is affected. */
#widget-top_stats .row {
display: flex;
flex-wrap: wrap;
margin-left: -9px;
margin-right: -9px;
}
#widget-top_stats [class*="col-"] {
display: flex;
float: none; /* flex item — the float would fight it */
padding-left: 9px;
padding-right: 9px;
margin-bottom: 18px;
}
#widget-top_stats .top_stats_wrapper { width: 100%; }
/* Keep the label on one line so cards stay the same height */
.top_stats_wrapper p.text-uppercase {
display: flex;
align-items: baseline;
gap: 8px;
}
.top_stats_wrapper p.text-uppercase .pull-right {
float: none !important;
margin-left: auto;
white-space: nowrap;
}
/* --- Progress bars --- */
.progress {
background: #EEF0F7;
border-radius: 99px;
box-shadow: none;
overflow: hidden;
}
.progress-bar-mini { height: 6px !important; }
.progress-bar {
border-radius: 99px;
box-shadow: none;
transition: width .6s var(--oc-ease);
}
.progress-bar-danger { background: var(--oc-peach) !important; }
.progress-bar-success { background: var(--oc-mint) !important; }
.progress-bar-info { background: var(--oc-sky) !important; }
.progress-bar-warning { background: var(--oc-amber) !important; }
.progress-bar-primary { background: var(--oc-primary) !important; }
/* --- Reclaim dead space ---
The dashboard ships empty jQuery-UI sortable drop-columns. Each holds a
whitespace text node (so :empty can't match them) and carries a 20px
min-height, which stacked up into a visible gap under the KPI row.
min-height only has any effect while a column IS empty — a column with
widgets in it is sized by its content — so lowering it here is safe, and
8px still leaves a drop target for dragging widgets between columns.
Scoped to the dashboard grid so other sortables (todos, etc.) are
untouched. */
body.dashboard [class*="col-"].ui-sortable { min-height: 8px; }
body.dashboard .mtop30 { margin-top: 14px !important; }
/* --- Widgets --- */
.widget { margin-bottom: 20px; }
.widget-dragger { opacity: 0; transition: opacity .18s var(--oc-ease); }
.widget:hover .widget-dragger { opacity: .35; }
.todo-panel .panel-body { padding: 20px 22px !important; }
.todo-panel h4 {
font-size: 15.5px;
font-weight: 600;
color: var(--oc-text);
margin: 6px 0 0;
/* The date label floats right; without a block formatting context the
heading text runs underneath it and collides on narrow screens. */
overflow: hidden;
}
/* ===========================================================================
5. BUTTONS
=========================================================================== */
.btn {
border-radius: var(--oc-radius-sm);
font-weight: 550;
font-size: 13.5px;
letter-spacing: -.005em;
padding: 9px 18px;
border: 1px solid transparent;
box-shadow: var(--oc-shadow-sm);
transition: transform .14s var(--oc-ease), box-shadow .18s var(--oc-ease),
background .18s var(--oc-ease), border-color .18s var(--oc-ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--oc-shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--oc-shadow-sm); }
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(46, 158, 112, .26); }
/* NOTE ON THE `body` PREFIX
The prchat module ships `body .btn { ... }` in its own stylesheet, which
loads AFTER custom.css. A bare `.btn-primary` therefore loses the cascade.
Prefixing with `body` matches its specificity and wins on order.
Chat-widget buttons are excluded so the module keeps its own look. */
body .btn-primary:not(#pusherChat *),
body .btn-info:not(#pusherChat *) {
background: var(--oc-primary);
border-color: var(--oc-primary);
color: #fff;
}
body .btn-primary:hover, body .btn-primary:focus,
body .btn-info:hover, body .btn-info:focus {
background: var(--oc-primary-deep);
border-color: var(--oc-primary-deep);
color: #fff;
}
body .btn-success {
background: var(--oc-btn-success); border-color: var(--oc-btn-success); color: #fff;
}
body .btn-success:hover, body .btn-success:focus {
background: #17643F; border-color: #17643F; color: #fff;
}
body .btn-danger {
background: var(--oc-btn-danger); border-color: var(--oc-btn-danger); color: #fff;
}
body .btn-danger:hover, body .btn-danger:focus {
background: #A3402C; border-color: #A3402C; color: #fff;
}
/* Amber is too light for white text (fails AA), so warning buttons take
dark text instead — measured 5.93:1. */
body .btn-warning {
background: var(--oc-btn-warning); border-color: var(--oc-btn-warning);
color: var(--oc-btn-warning-t);
}
body .btn-warning:hover, body .btn-warning:focus {
background: #C89331; border-color: #C89331; color: var(--oc-btn-warning-t);
}
body .btn-default {
background: var(--oc-surface);
border-color: var(--oc-border-strong);
color: var(--oc-text);
}
body .btn-default:hover, body .btn-default:focus {
background: var(--oc-surface-alt);
border-color: #C9D1E6;
color: var(--oc-text);
}
/* ===========================================================================
6. FORMS
=========================================================================== */
.form-control,
.selectpicker,
.bootstrap-select .dropdown-toggle {
background: var(--oc-surface);
border: 1px solid var(--oc-border-strong);
border-radius: var(--oc-radius-sm);
box-shadow: none;
color: var(--oc-text);
font-size: 14px;
padding: 10px 14px;
height: auto;
transition: border-color .16s var(--oc-ease), box-shadow .16s var(--oc-ease);
}
.form-control:focus,
.bootstrap-select.open .dropdown-toggle {
border-color: var(--oc-primary);
box-shadow: 0 0 0 3px rgba(46, 158, 112, .15);
outline: none;
}
.form-control::placeholder { color: var(--oc-text-faint); }
label, .control-label {
color: var(--oc-text);
font-weight: 550;
font-size: 13px;
margin-bottom: 6px;
}
.form-group { margin-bottom: 18px; }
/* ===========================================================================
7. TABLES
=========================================================================== */
/* `body` prefix raises specificity above DataTables' `table.dataTable thead th`
and the prchat module's `body .btn` — both load after custom.css, so a
plain `.table > thead > tr > th` loses the tie. */
body .table > thead > tr > th,
body table.dataTable > thead > tr > th,
body table.dataTable thead th {
background: var(--oc-surface-alt);
border-bottom: 1px solid var(--oc-border) !important;
border-top: 0;
color: var(--oc-text-muted);
font-size: 11px;
font-weight: 650;
letter-spacing: .06em;
text-transform: uppercase;
padding: 13px 16px;
white-space: nowrap;
}
.table > tbody > tr > td {
border-top: 1px solid var(--oc-border);
padding: 14px 16px;
color: var(--oc-text);
font-size: 13.5px;
vertical-align: middle;
}
.table > tbody > tr { transition: background .14s var(--oc-ease); }
.table > tbody > tr:hover { background: var(--oc-primary-soft) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #FCFDFF; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 8px !important;
border: 1px solid var(--oc-border-strong) !important;
color: var(--oc-text) !important;
margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--oc-primary) !important;
border-color: var(--oc-primary) !important;
color: #fff !important;
}
/* ===========================================================================
8. LABELS, BADGES, ALERTS
=========================================================================== */
.label, .badge {
border-radius: 7px;
font-size: 11px;
font-weight: 600;
letter-spacing: .01em;
padding: 5px 9px;
}
/* Each pair measured against its own soft background (all >= 4.5:1). */
.label-info { background: var(--oc-teal-soft); color: #14625A; }
.label-success { background: var(--oc-emerald-soft); color: #196648; }
.label-danger { background: var(--oc-danger-soft); color: #9E3D28; }
.label-warning { background: var(--oc-amber-soft); color: #7A5A0E; }
.label-primary { background: var(--oc-primary-soft); color: var(--oc-primary-deep); }
.label-default { background: #EDF2EF; color: #4C5F55; }
.label-big { font-size: 12px; padding: 6px 11px; }
/* --- Contrast repairs on components that ship their own colours --------- */
/* FullCalendar events: stock fills are saturated primaries (e.g. #FF6F00),
giving white event titles only 2.79:1. Deepened to clear AA. */
.fc-event,
.fc-event-container .fc-event {
background-color: var(--oc-primary-deep) !important;
border-color: var(--oc-primary-deep) !important;
}
.fc-event .fc-title,
.fc-event .fc-time { color: #fff !important; }
/* NOT FIXED IN CSS — DELIBERATELY.
Status labels carry an INLINE colour straight from the database (Perfex
lets you choose a hex per project/task status), e.g.
style="color:#adca65;border:1px solid #adca65"
Overriding it needs !important, which would flatten every status to one
colour and destroy the colour-coding those statuses exist to provide.
A `filter: brightness()` trick was tried and rejected: it changes rendered
pixels but not the computed colour, so it cannot be verified.
The correct fix is at the data level — pick darker hex values in
Perfex: Setup → (Projects|Tasks) → Statuses.
Known offender: "In Progress" #adca65 on white = 2.45:1 (needs 4.5:1).
A darker green such as #5F8420 clears AA while staying the same hue. */
.alert {
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius-sm);
box-shadow: var(--oc-shadow-sm);
padding: 14px 18px;
}
.alert-success { background: var(--oc-emerald-soft); color: #196648; border-color: #C6E7D7; }
.alert-info { background: var(--oc-teal-soft); color: #14625A; border-color: #C3E6E1; }
.alert-danger { background: var(--oc-danger-soft); color: #9E3D28; border-color: #F3D3CA; }
.alert-warning { background: var(--oc-amber-soft); color: #7A5A0E; border-color: #EFDDB2; }
/* ===========================================================================
9. MODALS & DROPDOWNS
=========================================================================== */
.modal-content {
border: 0;
border-radius: var(--oc-radius);
box-shadow: var(--oc-shadow-lg);
}
.modal-header {
border-bottom: 1px solid var(--oc-border);
padding: 20px 24px;
}
.modal-header .modal-title { font-weight: 600; letter-spacing: -.015em; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--oc-border); padding: 16px 24px; }
.modal-backdrop.in { opacity: .42; }
.dropdown-menu {
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius-sm);
box-shadow: var(--oc-shadow-lg);
padding: 6px;
}
.dropdown-menu > li > a {
border-radius: 7px;
color: var(--oc-text);
font-size: 13.5px;
padding: 9px 12px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background: var(--oc-primary-soft);
color: var(--oc-primary-deep);
}
.nav-tabs { border-bottom: 1px solid var(--oc-border); }
.nav-tabs > li > a {
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--oc-text-muted);
font-weight: 550;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: transparent;
border: 0;
border-bottom: 2px solid var(--oc-primary);
color: var(--oc-primary);
}
/* ===========================================================================
9b. CLIENT PORTAL (body.customers)
custom.css is loaded on the portal and themes too, so the client-facing
side gets the same treatment — invoices, estimates, the payment page.
=========================================================================== */
/* Status banners — the stock ones are saturated primaries that fight the
pastel palette. Softened, with readable (AA) text on each. */
.danger-bg { background: var(--oc-peach) !important; }
.success-bg { background: var(--oc-mint) !important; }
.warning-bg { background: var(--oc-amber) !important; }
.info-bg { background: var(--oc-sky) !important; }
.danger-bg, .success-bg, .warning-bg, .info-bg {
border-radius: var(--oc-radius-sm);
box-shadow: var(--oc-shadow-sm);
}
.danger-bg h5, .success-bg h5, .warning-bg h5, .info-bg h5 {
color: #fff;
font-weight: 600;
letter-spacing: .01em;
margin: 0;
padding: 3px 0;
}
body.customers { background: var(--oc-bg) !important; }
/* The portal's invoice/estimate sheet */
body.customers .panel_s,
body.viewinvoice .panel_s {
border-radius: var(--oc-radius) !important;
box-shadow: var(--oc-shadow);
}
/* Portal login card */
body.customers .panel_s .panel-body { padding: 26px; }
/* ===========================================================================
10. RESPONSIVE
Bootstrap 3's grid already reflows; these fix the things it doesn't —
touch targets, table overflow, spacing, and type scale.
=========================================================================== */
/* ---- Any screen: tables must never blow out the layout ---- */
.table-responsive {
-webkit-overflow-scrolling: touch;
border: 0;
border-radius: var(--oc-radius-sm);
}
/* ---- Tablet: ≤ 1200px ---- */
@media (max-width: 1200px) {
.panel_s > .panel-body { padding: 20px; }
.top_stats_wrapper { padding: 18px 18px 16px !important; }
}
/* ---- Tablet portrait / small laptop: ≤ 991px ---- */
@media (max-width: 991px) {
.panel_s > .panel-body { padding: 18px; }
.widget { margin-bottom: 16px; }
/* KPI cards go two-up and stay equal height */
#widget-top_stats [class*="col-"] { margin-bottom: 14px; }
.top_stats_wrapper p.text-uppercase .pull-right { font-size: 19px; }
/* Comfortable touch targets */
.btn { padding: 10px 18px; font-size: 14px; }
.form-control { font-size: 15px; padding: 11px 14px; }
/* Tables scroll rather than squash */
.table-responsive,
.dataTables_wrapper { overflow-x: auto !important; }
.modal-dialog { margin: 20px auto; width: auto; max-width: 92%; }
}
/* ---- Mobile: ≤ 767px ---- */
@media (max-width: 767px) {
body, body.app { font-size: 14px; }
#wrapper, .content { padding-left: 12px !important; padding-right: 12px !important; }
.panel_s {
border-radius: var(--oc-radius-sm) !important;
margin-bottom: 14px;
}
.panel_s > .panel-body { padding: 16px; }
.panel-heading { padding: 15px 16px; }
/* KPI cards full width, tighter, no hover-lift on touch */
.top_stats_wrapper {
padding: 16px 16px 14px !important;
border-radius: var(--oc-radius-sm) !important;
}
.top_stats_wrapper:hover { transform: none; }
.top_stats_wrapper::after { display: none; } /* drop the decorative blob */
.top_stats_wrapper p.text-uppercase { font-size: 10.5px !important; }
.top_stats_wrapper p.text-uppercase .pull-right { font-size: 20px; }
#widget-top_stats [class*="col-"] { margin-bottom: 12px; }
/* Full-width primary actions read better on a phone */
.btn { padding: 11px 16px; }
.panel-body > .btn-block,
.modal-footer .btn { width: 100%; margin-bottom: 8px; margin-left: 0; }
/* Stop pull-right stacking from colliding on narrow screens */
.panel-heading .pull-right { float: none !important; display: block; margin-top: 8px; }
/* iOS zooms any input under 16px on focus — this prevents that jump */
.form-control, input, select, textarea { font-size: 16px !important; }
.table > thead > tr > th,
.table > tbody > tr > td { padding: 11px 12px; font-size: 13px; }
.modal-dialog { margin: 10px; max-width: none; }
.modal-body { padding: 18px; }
h4 { font-size: 15px; }
/* Drag handles are meaningless on touch */
.widget-dragger { display: none; }
}
/* ---- Small phones: ≤ 480px ---- */
@media (max-width: 480px) {
.panel_s > .panel-body { padding: 14px; }
.top_stats_wrapper p.text-uppercase .pull-right { font-size: 18px; }
.btn { font-size: 13.5px; }
}
/* ---- Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
.panel_s:hover, .top_stats_wrapper:hover, .btn:hover { transform: none; }
}
/* ---- Print ---- */
@media print {
.sidebar, .widget-dragger, .btn { display: none !important; }
.panel_s { box-shadow: none; border: 1px solid #ddd; }
body, body.app { background: #fff !important; }
}
/* ===========================================================================
12. TARGETED FIXES (reported from the live UI)
These come last on purpose: this file already styles the same components
above, so these need to win within the file as well as against Perfex.
=========================================================================== */
/* ---------------------------------------------------------------------------
12.1 Header "My Profile" dropdown was unreadable — white on white.
#mobile-collapse (.mobile-navbar) is a LIGHT panel (#fff), but the header
rule in section 2b painted every #header link white, which cascaded into
it. Scoped out and restyled as a proper light dropdown.
--------------------------------------------------------------------------- */
#mobile-collapse,
.mobile-navbar {
background: var(--oc-surface) !important;
border: 1px solid var(--oc-border);
border-radius: var(--oc-radius-sm);
box-shadow: var(--oc-shadow-lg);
padding: 6px !important;
overflow: hidden;
}
#mobile-collapse .nav > li > a,
.mobile-navbar .nav > li > a,
#mobile-collapse a,
.mobile-navbar a {
color: var(--oc-text) !important; /* 13.3:1 on white */
background: transparent !important;
font-size: 13.5px;
font-weight: 500;
padding: 10px 14px !important;
border-radius: 8px;
border: 0 !important;
box-shadow: none !important;
display: block;
transition: background .15s var(--oc-ease), color .15s var(--oc-ease);
}
#mobile-collapse .nav > li > a:hover,
.mobile-navbar .nav > li > a:hover,
#mobile-collapse a:hover,
.mobile-navbar a:hover {
background: var(--oc-primary-soft) !important;
color: var(--oc-primary-deep) !important;
}
#mobile-collapse .nav > li,
.mobile-navbar .nav > li { background: transparent !important; }
#mobile-collapse i, .mobile-navbar i { color: var(--oc-text-muted); margin-right: 9px; }
#mobile-collapse .divider, .mobile-navbar .divider {
background: var(--oc-border); height: 1px; margin: 5px 0;
}
/* ---------------------------------------------------------------------------
12.2 Sub-menu highlight: make it a true capsule.
Active items were inheriting extra left padding from Perfex, so the active
label sat further right than its inactive siblings and the pill looked
off-centre. Both states are now forced to identical box metrics, so the
capsule hugs the text symmetrically and every label shares one left edge.
--------------------------------------------------------------------------- */
#side-menu .nav-second-level > li > a,
#side-menu .nav-second-level > li.active > a,
#setup-menu .nav-second-level > li > a,
#setup-menu .nav-second-level > li.active > a {
display: flex !important;
align-items: center !important; /* vertical centring */
justify-content: flex-start !important;
height: 34px !important;
line-height: 1 !important;
padding: 0 12px !important; /* identical in BOTH states */
margin: 2px 8px 2px 6px !important; /* identical in BOTH states */
border-radius: 17px !important; /* full capsule (half of 34px) */
text-indent: 0 !important;
box-sizing: border-box;
}
#side-menu .nav-second-level > li > a .sub-menu-text,
#setup-menu .nav-second-level > li > a .sub-menu-text {
display: block;
font-size: 12.5px !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
}
/* ---------------------------------------------------------------------------
12.3 Remove the logout icon from the "Welcome Oacer" row.
It sat awkwardly against the username and is duplicated in the header menu.
--------------------------------------------------------------------------- */
.top-left-logout,
#side-menu .dashboard_user .fa-power-off { display: none !important; }
#side-menu .dashboard_user {
justify-content: flex-start;
padding: 0 16px !important;
}
/* ---------------------------------------------------------------------------
12.4 Quick-access button: the glyph was fa-gavel (a hammer). Swapped to a
plus, and the control is now a properly aligned, labelled button rather
than a bare floating icon.
--------------------------------------------------------------------------- */
#side-menu .quick-links { padding: 8px 14px 12px !important; }
#side-menu .quick-links .dropdown-quick-links { display: block; }
#side-menu .quick-links .dropdown-toggle {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 36px;
border-radius: 9px;
background: rgba(94, 214, 158, .13) !important;
color: var(--oc-nav-accent) !important;
border: 0 !important;
box-shadow: none !important;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .01em;
transition: background .15s var(--oc-ease);
}
#side-menu .quick-links .dropdown-toggle:hover {
background: rgba(94, 214, 158, .22) !important;
}
/* swap the glyph: FontAwesome 4 — f0e3 (gavel) -> f067 (plus) */
#side-menu .quick-links .dropdown-toggle i.fa-gavel::before { content: "\f067"; }
#side-menu .quick-links .dropdown-toggle i { font-size: 12px; margin: 0; }
/* add a label so the button reads as "New" rather than a lone icon */
#side-menu .quick-links .dropdown-toggle::after {
content: "Quick add";
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
}
/* The quick-links dropdown itself is a light panel — keep its text dark */
#side-menu .quick-links .dropdown-menu { padding: 6px; }
#side-menu .quick-links .dropdown-menu > li > a {
color: var(--oc-text) !important;
border-radius: 7px;
padding: 9px 12px !important;
font-size: 13px;
display: flex; align-items: center; gap: 9px;
}
#side-menu .quick-links .dropdown-menu > li > a:hover {
background: var(--oc-primary-soft) !important;
color: var(--oc-primary-deep) !important;
}
#side-menu .quick-links .dropdown-menu > li > a i { color: var(--oc-primary); margin: 0; }
/* ---------------------------------------------------------------------------
12.5 Setup panel icons.
Perfex renders these as — no fa- class at all,
so they were blank boxes. The glyphs are supplied per menu item here.
--------------------------------------------------------------------------- */
#setup-menu > li > a > i.menu-icon {
font-family: FontAwesome !important;
font-style: normal;
font-weight: normal;
display: inline-block;
width: 18px; min-width: 18px;
margin-right: 11px;
font-size: 13px;
text-align: center;
color: rgba(255, 255, 255, .55);
}
#setup-menu > li.menu-item-staff > a > i.menu-icon::before { content: "\f0c0"; } /* users */
#setup-menu > li.menu-item-customers > a > i.menu-icon::before { content: "\f2bd"; } /* user-circle */
#setup-menu > li.menu-item-support > a > i.menu-icon::before { content: "\f1cd"; } /* life-ring */
#setup-menu > li.menu-item-leads > a > i.menu-icon::before { content: "\f0b0"; } /* filter */
#setup-menu > li.menu-item-finance > a > i.menu-icon::before { content: "\f0d6"; } /* money */
#setup-menu > li.menu-item-contracts > a > i.menu-icon::before { content: "\f0f6"; } /* file-text-o */
#setup-menu > li.menu-item-estimate_request > a > i.menu-icon::before { content: "\f1d8"; } /* paper-plane */
#setup-menu > li.menu-item-modules > a > i.menu-icon::before { content: "\f1b3"; } /* cubes */
#setup-menu > li.menu-item-email-templates > a > i.menu-icon::before { content: "\f003"; } /* envelope-o */
#setup-menu > li.menu-item-custom-fields > a > i.menu-icon::before { content: "\f022"; } /* list-alt */
#setup-menu > li.menu-item-gdpr > a > i.menu-icon::before { content: "\f132"; } /* shield */
#setup-menu > li.menu-item-roles > a > i.menu-icon::before { content: "\f084"; } /* key */
#setup-menu > li.menu-item-menu-options > a > i.menu-icon::before { content: "\f0c9"; } /* bars */
#setup-menu > li.menu-item-theme-style > a > i.menu-icon::before { content: "\f1fc"; } /* paint-brush */
#setup-menu > li.menu-item-settings > a > i.menu-icon::before { content: "\f013"; } /* cog */
#setup-menu > li > a:hover > i.menu-icon,
#setup-menu > li.active > a > i.menu-icon { color: var(--oc-nav-accent); }
/* Panel heading row: centre the ✕ and the "Setup" title on one baseline */
#setup-menu .close-customizer {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 7px;
color: rgba(255, 255, 255, .70) !important;
transition: background .15s var(--oc-ease), color .15s var(--oc-ease);
}
#setup-menu .close-customizer:hover {
background: rgba(255, 255, 255, .10);
color: #fff !important;
}
#setup-menu .customizer-heading {
color: #fff !important;
font-weight: 600;
font-size: 13.5px;
letter-spacing: -.005em;
}
/* ---------------------------------------------------------------------------
12.6 Guarantee the rail's ground colour covers the whole sidebar.
The gradient alone can leave a gap if content ever overflows its box, so a
solid base colour is painted underneath it as insurance.
--------------------------------------------------------------------------- */
body.admin .sidebar,
aside#menu.sidebar,
#setup-menu-wrapper {
background-color: #133226 !important;
}
#side-menu { min-height: 100%; }
/* ---------------------------------------------------------------------------
12.7 Quick-add button — positioning + glyph, corrected.
Two separate problems:
(a) Perfex sets li.quick-links to `position:absolute; top:0`, so the button
was pinned to the very top of the rail and sat UNDERNEATH the header
(header z-index 99 > rail 20) — invisible. Returned to normal flow so
it sits under the username where it belongs.
(b) Overriding FontAwesome's `.fa-gavel::before` content is unreliable —
vendor-admin.css competes for the same pseudo-element. Rather than
fight it, the is hidden and the plus glyph is drawn on the button's
own ::before, which nothing else targets.
--------------------------------------------------------------------------- */
#side-menu li.quick-links {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
padding: 6px 14px 10px !important;
}
#side-menu .quick-links .dropdown-quick-links { position: relative; display: block; }
/* hide the stock gavel ; draw our own glyph instead */
#side-menu .quick-links .dropdown-toggle > i { display: none !important; }
#side-menu .quick-links .dropdown-toggle::before {
content: "\f067"; /* FontAwesome 4: plus */
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 11px;
line-height: 1;
margin-right: 8px;
}
/* ===========================================================================
13. HEADER BAR + PAGE TOOLBAR — float-layout failures, rebuilt on flex
=========================================================================== */
/* ---------------------------------------------------------------------------
13.1 Header nav dropping below the bar.
#header nav computes to height:0 because its only visible child
(ul.navbar-nav) is float:right, and floats do not expand their parent. The
ul therefore overflows the 63px bar, and as soon as the viewport narrows
enough it wraps onto a second line — which is why the search box ended up
overlapping the sidebar and the header icons sat on the light page
background instead of the green bar.
Laying the bar out with flex removes the float entirely: the row can no
longer wrap, and nav is self-sizing.
--------------------------------------------------------------------------- */
/* IMPORTANT — DISPLAY IS SCOPED.
Perfex hides ul.navbar-nav.navbar-right below its desktop breakpoint and
shows a separate .mobile-menu icon group instead. An unscoped
`display:flex !important` forced BOTH groups visible at once, so timers and
notifications rendered twice and the bar became cramped and broken. The
flex layout is therefore applied only at widths where Perfex actually shows
that list; below it, Perfex's own mobile header is left completely alone. */
@media (min-width: 769px) {
#header nav {
display: flex !important;
align-items: center;
height: 63px;
min-height: 63px;
padding-right: 14px;
box-sizing: border-box;
}
#header nav > ul.navbar-nav,
#header nav > ul.nav.navbar-nav.navbar-right {
float: none !important;
margin: 0 0 0 auto !important; /* sits hard right, never wraps */
padding: 0;
display: flex !important;
align-items: center;
height: 63px;
flex-wrap: nowrap;
}
#header nav > ul.navbar-nav > li {
float: none !important;
display: flex !important;
align-items: center;
height: 63px;
position: relative;
}
#header nav > ul.navbar-nav > li > a {
display: flex !important;
align-items: center;
height: 40px;
padding: 0 11px !important;
}
#header #top_search { flex: 0 1 260px; min-width: 0; }
}
/* Search field: sits inside the bar as a proper control */
#header #top_search { flex: 0 1 260px; min-width: 0; }
#header #search_input.form-control {
height: 36px;
padding: 0 14px;
font-size: 13.5px;
color: #fff;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 9px;
box-shadow: none;
transition: background .15s var(--oc-ease), border-color .15s var(--oc-ease);
}
#header #search_input.form-control::placeholder { color: rgba(255, 255, 255, .55); }
#header #search_input.form-control:focus {
background: rgba(255, 255, 255, .16);
border-color: rgba(94, 214, 158, .55);
box-shadow: 0 0 0 3px rgba(94, 214, 158, .16);
color: #fff;
}
/* Avatar */
#header .dropdown-toggle.profile { padding: 0 10px !important; }
#header .staff-profile-image-small {
width: 30px; height: 30px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .18);
}
/* The header's own dropdowns are light panels — keep their text dark */
#header .dropdown-menu { background: var(--oc-surface); }
#header .dropdown-menu > li > a,
#header .dropdown-menu a { color: var(--oc-text) !important; }
#header .dropdown-menu > li > a:hover,
#header .dropdown-menu a:hover {
background: var(--oc-primary-soft) !important;
color: var(--oc-primary-deep) !important;
}
/* Do NOT set `display` on .small-logo / .mobile-menu — Perfex toggles those
per breakpoint (both are display:none on desktop). Forcing flex here made
the logo reappear at full size and spill across the bar. Only alignment and
sizing are set, so Perfex keeps control of visibility. */
#header nav > .small-logo,
#header nav > .mobile-menu { align-items: center; flex: 0 0 auto; }
#header nav > .small-logo img,
#header .small-logo img.img-responsive { max-height: 38px; width: auto; }
/* ---------------------------------------------------------------------------
13.2 Page toolbar (.panel-body._buttons) — buttons overlapping / spilling.
The primary actions are float:left while the icon-button group
(.display-block.text-right) is a full-width block starting at the SAME x/y,
so the two overlap and then wrap raggedly out of the card once the content
area narrows.
One flex row fixes both: the actions sit left, the icon group is pushed
right with margin-left:auto, and everything wraps as whole units.
--------------------------------------------------------------------------- */
.panel-body._buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 16px 18px !important;
}
.panel-body._buttons > .btn {
float: none !important;
margin: 0 !important;
flex: 0 0 auto;
}
.panel-body._buttons > .display-block,
.panel-body._buttons > .display-block.text-right {
display: flex !important;
align-items: center;
gap: 6px;
width: auto !important;
margin: 0 0 0 auto !important; /* icon cluster hugs the right edge */
flex: 0 0 auto;
}
.panel-body._buttons > .display-block .btn {
float: none !important;
margin: 0 !important;
width: 38px;
height: 38px;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.panel-body._buttons .dropdown { display: inline-flex; }
/* Narrow content area: let the actions go full width rather than clip */
@media (max-width: 991px) {
.panel-body._buttons > .btn { flex: 1 1 auto; justify-content: center; }
.panel-body._buttons > .display-block,
.panel-body._buttons > .display-block.text-right {
margin-left: 0 !important;
width: 100% !important;
justify-content: flex-start;
}
}
/* ---------------------------------------------------------------------------
13.3 Mobile search field — white text was landing on a light background.
Below 768px the search is NOT in #header at all: Perfex moves it into a
separate `div#mobile-search` that renders below the bar on the light page
background (#F2F7F4). The white input colour set for the dark bar in 13.1
was therefore unreadable, and #header-scoped selectors never matched it.
Targeting the real container and giving it the header's ground makes the
row read as a continuation of the bar, keeping the white text legible.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
#mobile-search {
background: #133226 !important;
padding: 0 12px 10px !important;
margin: 0;
box-shadow: 0 3px 14px rgba(12, 32, 25, .16);
}
/* NOTE the child combinator: a descendant selector here also matched the
search RESULTS dropdown nested inside (#top_search_dropdown) and, being
more specific than the panel rule, rendered the results transparent
over the page. Only the direct wrapper ul must be cleared. */
#mobile-search > ul,
#mobile-search li#top_search {
background: transparent !important;
width: 100%;
display: block;
padding: 0;
margin: 0;
list-style: none;
}
#mobile-search #search_input.form-control,
#header #search_input.form-control {
width: 100%;
height: 38px;
font-size: 16px; /* 16px stops iOS zooming on focus */
color: #fff !important;
background: rgba(255, 255, 255, .12) !important;
border: 1px solid rgba(255, 255, 255, .16) !important;
border-radius: 9px;
}
#mobile-search #search_input.form-control::placeholder,
#header #search_input.form-control::placeholder { color: rgba(255,255,255,.62) !important; }
#mobile-search a, #mobile-search .fa { color: rgba(255,255,255,.8) !important; }
}
/* ---------------------------------------------------------------------------
13.4 Search results / recent-search dropdown.
#search-history and #search_results render with a transparent background
and white links, so the panel had no surface of its own and the entries
bled through whatever sat behind them. Given a proper light panel.
--------------------------------------------------------------------------- */
#search-history,
#search_results,
ul#search-history.dropdown-menu {
background: var(--oc-surface) !important;
border: 1px solid var(--oc-border) !important;
border-radius: var(--oc-radius-sm) !important;
box-shadow: var(--oc-shadow-lg) !important;
padding: 6px !important;
}
#search-history li, #search_results li { background: transparent !important; }
#search-history a,
#search-history li > a,
#search_results a,
#search_results li > a {
color: var(--oc-text) !important; /* 13.3:1 on white */
background: transparent !important;
border-radius: 7px;
padding: 9px 12px !important;
display: block;
font-size: 13.5px;
}
#search-history a:hover,
#search_results a:hover {
background: var(--oc-primary-soft) !important;
color: var(--oc-primary-deep) !important;
}
#search-history .fa, #search_results .fa { color: var(--oc-text-muted) !important; }
/* 13.5 DataTables pagination measured 4.48:1 — two hundredths under AA.
Darkened to the body text colour so it clears comfortably. */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a,
.dataTables_wrapper .dataTables_info {
color: var(--oc-text) !important; /* 13.3:1 on white */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
color: var(--oc-text-muted) !important; /* 5.6:1 — still AA */
background: transparent !important;
border-color: var(--oc-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--oc-primary) !important;
border-color: var(--oc-primary) !important;
color: #fff !important; /* 4.78:1 */
}
/* ===========================================================================
14. HEADER CORRECTIONS
=========================================================================== */
/* ---------------------------------------------------------------------------
14.1 Stray white pill next to the search field — MY BUG (from 13.4).
#search_results is an always-present, EMPTY container that Perfex injects
results into. 13.4 gave it a white background, border, shadow and padding,
so with no results it still painted a 14x14 white blob on the green bar.
(:empty does not match it — it holds a whitespace text node.)
The container is now kept invisible and the panel styling moved onto its
injected children, so it only appears when there is something to show.
--------------------------------------------------------------------------- */
#search_results {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
#search_results > * {
background: var(--oc-surface) !important;
border: 1px solid var(--oc-border) !important;
border-radius: var(--oc-radius-sm) !important;
box-shadow: var(--oc-shadow-lg) !important;
padding: 6px !important;
}
/* #search-history is a real dropdown-menu, so it keeps its own panel styling
from 13.4 — but must stay hidden until Bootstrap opens it. */
#search-history:not(.open):not(.in) { display: none; }
#header #top_search { position: relative; }
/* ---------------------------------------------------------------------------
14.2 Profile avatar position.
It was sitting third in the cluster (after the search field and the search
button), which reads as an afterthought. Moved to the leading edge of the
icon group using flex `order`, so it is the first thing in that cluster.
NOTE: to put it at the far right instead, change the .header-user-profile
order from 0 to 9.
--------------------------------------------------------------------------- */
@media (min-width: 769px) {
#header nav > ul.navbar-nav > li { order: 5; }
#header nav > ul.navbar-nav > li.header-user-profile {
order: 0;
margin-right: 10px;
}
#header nav > ul.navbar-nav > li#top_search { order: 1; }
#header nav > ul.navbar-nav > li#top_search_button { order: 2; }
}
/* ===========================================================================
15. SEARCH RESULTS PANEL + TOUCH TOOLTIPS
=========================================================================== */
/* 15.1 The live results list must always be a solid panel, at every width —
it overlays page content, so a transparent background makes it unreadable. */
#top_search_dropdown,
ul#top_search_dropdown.dropdown-menu,
#search_results > ul,
#search_results > .dropdown-menu {
background: var(--oc-surface) !important;
border: 1px solid var(--oc-border) !important;
border-radius: var(--oc-radius-sm) !important;
box-shadow: var(--oc-shadow-lg) !important;
padding: 6px !important;
max-height: 70vh;
overflow-y: auto;
z-index: 9000;
}
#top_search_dropdown > li > a,
#search_results a {
color: var(--oc-text) !important;
display: block;
padding: 9px 12px !important;
border-radius: 7px;
font-size: 13.5px;
white-space: normal;
}
#top_search_dropdown > li > a:hover,
#search_results a:hover {
background: var(--oc-primary-soft) !important;
color: var(--oc-primary-deep) !important;
}
/* Section headings ("Customers", "Invoices", ...) inside the results */
#top_search_dropdown .dropdown-header {
color: var(--oc-text-muted) !important;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
padding: 9px 12px 5px !important;
}
#top_search_dropdown .divider {
background: var(--oc-border) !important;
height: 1px;
margin: 4px 0;
}
/* 15.2 Hover tooltips on touch screens.
Bootstrap tooltips are a POINTER affordance. On a touch device they fire on
tap and then sit there covering the content underneath — the grey
"Use # + tagname to search by tags" box over the search results. Suppressed
wherever the primary input is not a fine pointer. */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
.tooltip { display: none !important; }
}
/* ===========================================================================
16. MOBILE SIDEBAR SCROLL + RESULTS WIDTH
=========================================================================== */
/* 16.1 Mobile drawer overflow.
The pinning/scroll fix was scoped to >=768px. Below that the rail stays
position:absolute with overflow:visible, and its content (916px) is taller
than the panel (749px) — so the lower menu items rendered OUTSIDE the green
background, on the page. The drawer needs its own scroll too. */
@media (max-width: 767px) {
aside#menu.sidebar {
max-height: calc(100vh - 63px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
aside#menu.sidebar::-webkit-scrollbar { width: 6px; }
aside#menu.sidebar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .18); border-radius: 6px;
}
}
/* 16.2 Results panel should span the search field, not sit narrower than it. */
#header #top_search,
#mobile-search li#top_search { position: relative; }
#top_search_dropdown,
ul#top_search_dropdown.dropdown-menu {
left: 0 !important;
right: 0 !important;
width: auto !important;
min-width: 0 !important;
}
/* ===========================================================================
17. SEARCH PANEL EMPTY-STATE + AVATAR TO FAR RIGHT
=========================================================================== */
/* 17.1 The second stray pill under the search field.
#search-history is an empty