/* ════════════════════════════════════════════════════════
NOVA THEME — LOGERP UI redesign
Design language adapted from the NovaCRM reference
(https://golog.in/demo/qcert/). Loaded AFTER bootstrap.css
and main.css so it re-skins the existing Bootstrap 3 /
AdminLTE markup (.box, .btn, .table, .label, .form-control,
.alert, .modal, .panel, .breadcrumb, DataTables, etc.)
without requiring every page to be rewritten.
════════════════════════════════════════════════════════ */
/* ── Tokens ── */
:root {
--g-50: #f0fdf4;
--g-100: #dcfce7;
--g-200: #bbf7d0;
--g-300: #86efac;
--g-400: #4ade80;
--g-500: #22c55e;
--g-600: #16a34a;
--g-700: #15803d;
--g-800: #166534;
--rail-bg: #1b3a28;
--rail-w: 78px;
--rail-active: rgba(255,255,255,0.15);
--rail-hover: rgba(255,255,255,0.08);
--rail-text: rgba(255,255,255,0.55);
--rail-atext: #ffffff;
--panel-bg: #234d34;
--panel-w: 210px;
--panel-hover: rgba(255,255,255,0.08);
--panel-active: rgba(255,255,255,0.14);
--panel-text: rgba(255,255,255,0.65);
--panel-atext: #ffffff;
--panel-label: rgba(255,255,255,0.35);
--panel-border: rgba(255,255,255,0.08);
--sidebar-full: 288px;
--topbar-h: 60px;
--bg-page: #f0f2f0;
--bg-card: #ffffff;
--bg-card2: #f8faf8;
--bg-input: #f5f7f5;
--txt-primary: #111827;
--txt-secondary:#374151;
--txt-muted: #6b7280;
--txt-faint: #9ca3af;
--border-light: #e5e7e5;
--border-med: #d1d5d1;
--orange: #f97316;
--danger: #dc2626;
/* Record-card top accent bar colors, matched to the same status
this app already color-codes via .label-success/-danger/etc. */
--rc-success: linear-gradient(90deg,#16a34a,#4ade80);
--rc-danger: linear-gradient(90deg,#dc2626,#f87171);
--rc-warning: linear-gradient(90deg,#d97706,#fbbf24);
--rc-info: linear-gradient(90deg,#0369a1,#38bdf8);
--rc-primary: linear-gradient(90deg,#1d4ed8,#60a5fa);
--rc-muted: linear-gradient(90deg,#6b7280,#9ca3af);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
--shadow-md: 0 4px 12px rgba(0,0,0,0.09);
--shadow-lg: 0 8px 28px rgba(0,0,0,0.13);
--shadow-card: 0 2px 8px rgba(0,0,0,0.055);
--shadow-panel: 4px 0 16px rgba(0,0,0,0.18);
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}
/* ── Base ── */
body.skin-black,
body {
font-family:'Inter', system-ui, -apple-system, sans-serif;
background:var(--bg-page);
color:var(--txt-primary);
}
a { color:inherit; }
.skin-black .wrapper,
.wrapper.row-offcanvas { background:var(--bg-page); }
/* ════════════════════════════════════════════════════════
SHELL — Rail / Panel sidebar + Topbar
(structural markup produced by include/header.php,
include/sidebar.php)
════════════════════════════════════════════════════════ */
.mob-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:1090; opacity:0; transition:opacity .25s ease; }
.mob-overlay.visible { display:block; opacity:1; }
.nova-sidebar { display:flex; flex-direction:row; position:fixed; left:0; top:0; bottom:0; z-index:1100; transition:transform .28s cubic-bezier(0.4,0,0.2,1); }
.rail { width:var(--rail-w); min-height:100vh; background:var(--rail-bg); display:flex; flex-direction:column; align-items:center; flex-shrink:0; box-shadow:var(--shadow-panel); z-index:2; }
.rail-logo { width:60px; margin:14px auto 8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; letter-spacing:.5px; flex-shrink:0; }
.rail-logo-img { background:#fff; padding:4px; }
.rail-logo-img img { width:100%; height:100%; object-fit:contain; }
.rail-nav { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 6px; width:100%; overflow-y:auto; }
.rail-nav::-webkit-scrollbar { display:none; }
.rail-btn { width:66px; min-height:52px; border:none; background:none; border-radius:var(--r-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--rail-text); cursor:pointer; transition:var(--transition); position:relative; flex-shrink:0; padding:6px 4px; text-decoration:none; }
.rail-btn:hover, .rail-btn:focus { background:var(--rail-hover); color:var(--rail-atext); text-decoration:none; }
.rail-btn.active { background:var(--rail-active); color:var(--rail-atext); box-shadow:inset 0 0 0 1.5px rgba(74,222,128,0.4); }
.rail-btn.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:22px; background:var(--g-400); border-radius:0 3px 3px 0; }
.rail-btn i { font-size:17px; line-height:1; }
.rail-label { font-size:9px; font-weight:600; letter-spacing:.2px; text-align:center; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:64px; }
.rail-divider { width:28px; height:1px; background:rgba(255,255,255,0.1); margin:6px 0; }
/* Named .nova-panel (not .panel) because .panel is Bootstrap 3's own
component class (panel/panel-default/panel-heading/panel-title, used
for card and accordion widgets throughout the app) - reusing "panel"
here would collide and collapse every Bootstrap panel on the site. */
.nova-panel { width:0; min-height:100vh; background:var(--panel-bg); display:flex; flex-direction:column; overflow:hidden; transition:width .28s cubic-bezier(0.4,0,0.2,1); position:relative; flex-shrink:0; }
.nova-panel.open { width:var(--panel-w); overflow-y:auto; overflow-x:hidden; box-shadow:var(--shadow-panel); }
.nova-panel::-webkit-scrollbar { width:3px; }
.nova-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }
.panel-header { display:flex; align-items:center; justify-content:space-between; padding:18px 14px 12px; border-bottom:1px solid var(--panel-border); flex-shrink:0; min-width:var(--panel-w); }
.nova-panel-title { font-size:13px; font-weight:700; color:#fff; white-space:nowrap; }
.panel-close { background:none; border:none; color:rgba(255,255,255,.4); padding:4px; border-radius:var(--r-sm); }
.panel-close:hover { background:rgba(255,255,255,.1); color:#fff; }
.panel-section { display:none; flex-direction:column; padding:8px 0; min-width:var(--panel-w); }
.panel-group-label { padding:10px 14px 4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--panel-label); }
.panel-section.active { display:flex; }
.panel-item { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:13px; color:var(--panel-text); cursor:pointer; transition:var(--transition); white-space:nowrap; position:relative; text-decoration:none; }
.panel-item::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:0; height:18px; background:var(--g-400); border-radius:0 3px 3px 0; transition:width .15s ease; }
.panel-item:hover, .panel-item:focus { background:var(--panel-hover); color:var(--panel-atext); text-decoration:none; }
.panel-item:hover::before { width:3px; }
.panel-item.active { background:var(--panel-active); color:var(--panel-atext); font-weight:600; }
.panel-item.active::before { width:3px; }
/* ── Content shifts right of the rail/panel ──
The topbar and the content column (.right-side) are DOM siblings in the
existing per-page markup, not nested in a shared wrapper, so both are
shifted directly and kept in sync via a class on (toggled by
nova-admin.js) rather than a single wrapper element. */
.nova-topbar, .right-side, .nova-footer {
margin-left:var(--rail-w) !important;
transition:margin-left .28s cubic-bezier(0.4,0,0.2,1);
}
body.nova-panel-open .nova-topbar,
body.nova-panel-open .right-side,
body.nova-panel-open .nova-footer {
margin-left:calc(var(--rail-w) + var(--panel-w)) !important;
}
.right-side { min-height:100vh; padding-top:22px; padding-bottom:44px; }
/* ── Site footer (version / powered-by), fixed to the bottom of the
viewport on every shell page. Clicking the version opens the changelog
in a new tab - .right-side gets matching padding-bottom above so the
fixed bar never covers the last row of page content. ── */
.nova-footer {
position:fixed; left:0; right:0; bottom:0; z-index:1030;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
gap:8px; padding:10px 20px; font-size:12px; color:var(--txt-faint);
border-top:1px solid var(--border-light); background:#fff;
}
.nova-footer a { color:var(--txt-muted); font-weight:600; text-decoration:none; }
.nova-footer a:hover { color:var(--g-700); text-decoration:underline; }
.nova-footer-version:hover { color:var(--g-700); }
/* ── Topbar ── */
.nova-topbar { height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between; padding:0 20px; position:sticky; top:0; z-index:1050; box-shadow:var(--shadow-sm); }
.tb-left { display:flex; align-items:center; gap:12px; }
.mob-toggle { display:none; background:none; border:none; color:var(--txt-muted); padding:6px; border-radius:var(--r-sm); }
.tb-breadcrumb { display:flex; align-items:center; gap:7px; font-size:13px; }
.tb-home { color:var(--txt-faint); text-decoration:none; }
.tb-sep { color:var(--border-med); font-size:16px; }
.tb-cur { color:var(--txt-secondary); font-weight:600; }
.tb-right { display:flex; align-items:center; gap:8px; }
.tb-icon-btn { background:#fff; border:1px solid var(--border-light); border-radius:var(--r-sm); width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--txt-muted); position:relative; text-decoration:none; }
.tb-icon-btn:hover { background:var(--bg-card2); border-color:var(--border-med); color:var(--txt-primary); text-decoration:none; }
.tb-notif-dot { position:absolute; top:6px; right:6px; min-width:14px; height:14px; padding:0 3px; background:var(--orange); border-radius:50%; border:1.5px solid #fff; color:#fff; font-size:9px; font-weight:700; line-height:11px; text-align:center; }
.tb-avatar-wrap { position:relative; }
.tb-avatar { width:34px; height:34px; border-radius:50%; border:2px solid var(--g-600); overflow:hidden; cursor:pointer; display:block; }
.tb-avatar img { width:100%; height:100%; object-fit:cover; }
.tb-dropdown { position:absolute; right:0; top:44px; min-width:220px; background:#fff; border:1px solid var(--border-light); border-radius:var(--r-md); box-shadow:var(--shadow-lg); display:none; z-index:1200; overflow:hidden; }
.tb-dropdown.open { display:block; animation:novaFadeIn .15s ease; }
.tb-dropdown-header { padding:12px 14px; border-bottom:1px solid var(--border-light); font-size:12.5px; color:var(--txt-secondary); }
.tb-dropdown-profile { display:flex; align-items:center; gap:10px; }
.tb-dropdown-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--g-600); flex-shrink:0; }
.tb-dropdown-name { font-size:13.5px; font-weight:700; color:var(--txt-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-dropdown-role { font-size:11px; color:var(--txt-muted); margin-top:1px; }
.tb-dropdown-list { max-height:280px; overflow-y:auto; }
.tb-dropdown-item { display:flex; align-items:center; gap:9px; padding:9px 14px; font-size:12.5px; color:var(--txt-secondary); border-bottom:1px solid var(--border-light); text-decoration:none; }
.tb-dropdown-item:last-child { border-bottom:none; }
.tb-dropdown-item:hover { background:var(--bg-card2); text-decoration:none; }
.tb-dropdown-footer { display:flex; gap:8px; padding:10px 14px; background:var(--bg-card2); }
/* Modern profile-menu dropdown: gradient identity banner + icon menu
list, replacing the old plain header + two colored button pills. */
.tb-dropdown-profile-modern {
display:flex; align-items:center; gap:11px;
padding:16px 14px; border-bottom:none;
background:linear-gradient(135deg,var(--g-600),var(--g-800));
}
.tb-dropdown-profile-modern .tb-dropdown-avatar { border-color:rgba(255,255,255,.55); }
.tb-dropdown-profile-modern .tb-dropdown-name { color:#fff; }
.tb-dropdown-role-badge {
display:inline-block; margin-top:4px; font-size:9.5px; font-weight:700;
color:#fff; background:rgba(255,255,255,.18); padding:2px 8px; border-radius:99px;
text-transform:uppercase; letter-spacing:.4px;
}
.tb-dropdown-menu { padding:6px; }
.tb-dropdown-menu-item {
display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm);
font-size:13px; font-weight:500; color:var(--txt-secondary); text-decoration:none;
transition:var(--transition);
}
.tb-dropdown-menu-item i { width:16px; text-align:center; color:var(--txt-muted); }
.tb-dropdown-menu-item:hover { background:var(--bg-card2); color:var(--txt-primary); text-decoration:none; }
.tb-dropdown-menu-item.tb-dropdown-menu-danger { color:#dc2626; }
.tb-dropdown-menu-item.tb-dropdown-menu-danger i { color:#dc2626; }
.tb-dropdown-menu-item.tb-dropdown-menu-danger:hover { background:#fef2f2; color:#b91c1c; }
@keyframes novaFadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
@media (max-width:900px) {
.nova-sidebar { transform:translateX(calc(-1 * (var(--rail-w) + var(--panel-w)))); }
.nova-sidebar.mob-open { transform:translateX(0); }
.nova-sidebar.mob-open .nova-panel { width:var(--panel-w); overflow-y:auto; }
.nova-topbar, .right-side, .nova-footer,
body.nova-panel-open .nova-topbar, body.nova-panel-open .right-side, body.nova-panel-open .nova-footer {
margin-left:0 !important;
}
.mob-toggle { display:flex; }
.tb-breadcrumb { font-size:12px; }
}
/* ════════════════════════════════════════════════════════
PAGE HEADER / CARDS (used by pages redesigned page-by-page)
════════════════════════════════════════════════════════ */
.nova-page-header { display:flex; align-items:flex-start; justify-content:space-between; margin:0 0 20px; flex-wrap:wrap; gap:10px; }
.nova-page-header h1 { font-size:20px; font-weight:800; color:var(--txt-primary); letter-spacing:-.4px; margin:0; }
.nova-page-subtitle { color:var(--txt-muted); font-size:13px; margin-top:3px; }
.nova-page-actions { display:flex; gap:8px; flex-wrap:wrap; }
.text-green { color:var(--g-600); }
.dash-greeting { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.dash-greeting-title { font-size:22px; font-weight:800; color:var(--txt-primary); margin:0 0 4px; letter-spacing:-.4px; }
.dash-greeting-sub { font-size:13px; color:var(--txt-secondary); margin:0; }
.dash-wave { display:inline-block; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.stats-grid.stats-grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:767px) { .stats-grid.stats-grid-3 { grid-template-columns:1fr; } }
.stat-card { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:16px 18px; display:flex; align-items:flex-start; gap:12px; position:relative; overflow:hidden; box-shadow:var(--shadow-card); transition:var(--transition); }
.stat-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--g-600),var(--g-400)); }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-med); }
.stat-icon { font-size:24px; flex-shrink:0; }
.stat-icon-badge { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon-badge .stat-icon { font-size:18px; }
.stat-body { flex:1; min-width:0; }
.rc-avatar { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; color:#fff; font-size:11px; font-weight:700; flex-shrink:0; letter-spacing:.2px; }
.stat-label { font-size:10.5px; color:var(--txt-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.stat-value { font-size:22px; font-weight:800; color:var(--txt-primary); letter-spacing:-.7px; margin-top:2px; }
.stat-change { font-size:11px; font-weight:500; margin-top:2px; display:block; }
.stat-change.positive { color:var(--g-600); }
.stat-change.negative { color:var(--danger); }
/* ════════════════════════════════════════════════════════
RE-SKIN: AdminLTE .box → card look
════════════════════════════════════════════════════════ */
/* Every page repeats the same "company name
+ dashboard breadcrumb"
block; the new topbar (include/header.php) already shows an accurate,
page-specific breadcrumb, so the old one is now pure redundant chrome. */
.content-header { display:none; }
.content-wrapper, .right-side, section.content, .content-alert { background:transparent; }
section.content { padding:0 22px 40px; }
.content-alert { padding:0 22px; }
.box { background:var(--bg-card); border:1px solid var(--border-light); border-top:none; border-radius:var(--r-lg); box-shadow:var(--shadow-card); margin-bottom:18px; transition:var(--transition); position:relative; }
.box::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--g-600),var(--g-400)); border-radius:var(--r-lg) var(--r-lg) 0 0; pointer-events:none; }
.box:hover { box-shadow:var(--shadow-md); }
.box.box-primary, .box.box-solid, .box.box-info, .box.box-success, .box.box-danger, .box.box-warning { border-top:none; }
.box-header { padding:16px 18px; border-bottom:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; background:none; }
.box-header::before, .box-header::after,
.box .box-header::before, .box .box-header::after { display:none; }
/* Group an icon + title together so they sit as one unit on the left,
instead of .box-header's justify-content:space-between spreading a
lone icon and title to opposite ends when there's no tools element. */
.box-header-title-group { display:flex; align-items:center; gap:8px; }
.box-header-title-group > i { color:var(--g-600); font-size:16px; }
.box-header-title-group > .box-title { margin:0; }
.box-title { font-size:14px; font-weight:700; color:var(--txt-primary); }
.box .box-header .box-title { float:none; display:block; padding:0; }
.box-tools { position:static; margin-left:auto; }
.box-body { padding:18px; }
.box-footer { padding:14px 18px; border-top:1px solid var(--border-light); background:var(--bg-card2); border-radius:0 0 var(--r-lg) var(--r-lg); }
.box-footer::after { content:''; display:table; clear:both; }
/* Right-align the page's primary form action button project-wide.
.btn-submit is an existing class already applied throughout the app to
mark exactly this button (distinct from modal buttons and list-page
filter/search buttons, neither of which use it) but it previously had
no styling at all - some pages additionally floated it manually via
.pull-right, most left it at the default left alignment. This makes
the behavior consistent everywhere without touching every page. */
.btn-submit { float:right; }
.form-group:has(> .btn-submit)::after { content:''; display:table; clear:both; }
/* Some footers (quotation status actions, payslip Save+Apply, etc.) show
several .btn-submit buttons together - each floats right independently,
so without this they'd sit flush against each other with zero gap.
Matches the 20px spacing already used ad-hoc for this exact case on a
couple of pages before this rule existed. */
.btn-submit + .btn-submit { margin-right:20px; }
/* Finance dashboard quarter widgets: replace flat saturated AdminLTE
small-box fills with a white card + colored header/footer accent,
matching the card-based look used elsewhere in the theme. */
.small-box { border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; transition:var(--transition); }
.small-box:hover { box-shadow:var(--shadow-md); color:inherit; }
.small-box > .inner { padding:0; background:#fff; }
.small-box table.table { margin-bottom:0; }
.small-box table.table tr:first-child th { color:#fff; padding:10px 14px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; border:none; }
.small-box table.table tr:first-child th a { color:#fff; }
.small-box table.table tr:not(:first-child) th { background:#fff; color:var(--txt-primary); font-weight:500; padding:9px 14px; border-color:var(--border-light); }
.small-box table.table tr:not(:first-child) th a.label { color:var(--txt-primary) !important; }
.small-box table.table tr:last-child th { font-weight:700; border-top:2px solid var(--border-light); }
.small-box-footer { border:none !important; padding:10px !important; font-weight:600; letter-spacing:.02em; }
.small-box.bg-aqua, .small-box.bg-aqua table.table tr:first-child th { background:#0891b2 !important; }
.small-box.bg-green, .small-box.bg-green table.table tr:first-child th { background:var(--g-600) !important; }
.small-box.bg-orange, .small-box.bg-orange table.table tr:first-child th { background:#ea8a1f !important; }
.small-box.bg-blue, .small-box.bg-blue table.table tr:first-child th { background:#2563eb !important; }
.bg-white { background:#fff !important; }
/* Standalone header card: title on the left, search/actions on the right,
used when .box-header is its own card (not wrapping a .box-body below
it), e.g. list-products.php's header separated from the card grid. */
.box.box-header {
background:var(--bg-card);
border-bottom:none;
border-radius:var(--r-lg);
margin-bottom:18px;
}
/* Bootstrap .panel (used on some settings/profile/payroll pages) */
.panel { border-radius:var(--r-lg); border-color:var(--border-light); box-shadow:var(--shadow-card); }
.panel-default > .panel-heading, .panel-heading { background:var(--bg-card2); border-color:var(--border-light); border-radius:var(--r-lg) var(--r-lg) 0 0; font-weight:700; color:var(--txt-primary); }
/* ════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════ */
/* Specificity note: AdminLTE's main.css recolors buttons via compound
selectors like ".btn.btn-primary" (0,2,0,0). Matching that compound form
here (rather than ".btn-primary" alone) ensures this stylesheet wins
regardless of per-page order, since many pages add extra
stylesheets after include/head-script.php. */
/* A few pages (dashboard.php and friends) re- css/main.css a second
time after include/head-script.php, which would otherwise let AdminLTE's
compound-specificity button colors win back on just those pages. The
color/background/border declarations below are !important'd so this
design system always wins regardless of that per-page quirk. */
.btn, .btn.btn-flat { border-radius:20px !important; font-weight:600; font-size:13px; padding:8px 16px; transition:var(--transition); border:none; box-shadow:none; }
/* Adjacent buttons in a .btn-group (e.g. email-setting.php's ON/OFF toggle)
would otherwise all render as separate rounded pills once .btn itself is
!important-rounded - flatten the shared inner edge so the group still
reads as one cohesive control, rounded only on its outer ends. */
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius:0 !important; }
.btn-group > .btn:first-child:not(:last-child) { border-radius:20px 0 0 20px !important; }
.btn-group > .btn:last-child:not(:first-child) { border-radius:0 20px 20px 0 !important; }
.btn.btn-primary, .btn.btn-primary.btn-flat { background:linear-gradient(135deg,var(--g-500),var(--g-700)) !important; border-color:var(--g-600) !important; color:#fff !important; box-shadow:0 2px 8px rgba(22,163,74,.25); }
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active { background:linear-gradient(135deg,var(--g-600),var(--g-800)) !important; border-color:var(--g-700) !important; color:#fff !important; transform:translateY(-1px); }
.btn.btn-success, .btn.btn-success.btn-flat { background:linear-gradient(135deg,var(--g-400),var(--g-600)) !important; border-color:var(--g-500) !important; color:#fff !important; }
.btn.btn-success:hover { background:linear-gradient(135deg,var(--g-500),var(--g-700)) !important; border-color:var(--g-600) !important; }
.btn.btn-danger, .btn.btn-danger.btn-flat { background:linear-gradient(135deg,#b91c1c,#ef4444) !important; border-color:#ef4444 !important; color:#fff !important; }
.btn.btn-danger:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(239,68,68,.35); }
.btn.btn-warning, .btn.btn-warning.btn-flat { background:#f59e0b !important; border-color:#f59e0b !important; color:#fff !important; }
.btn.btn-info, .btn.btn-info.btn-flat { background:#0ea5e9 !important; border-color:#0ea5e9 !important; color:#fff !important; }
.btn.btn-default, .btn.btn-default.btn-flat { background:#fff !important; border:1px solid var(--border-med) !important; color:var(--txt-secondary) !important; }
.btn.btn-default:hover { background:var(--bg-card2) !important; color:var(--txt-primary) !important; }
.btn.btn-sm { padding:5px 11px; font-size:12px; }
.btn.btn-xs { padding:3px 8px; font-size:11px; }
.btn.btn-lg { padding:11px 22px; font-size:14.5px; }
/* ════════════════════════════════════════════════════════
RECORD CARD GRID (list pages: 3 cards per row + infinite scroll,
replacing the old row layout)
════════════════════════════════════════════════════════ */
.record-card-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:14px;
padding:2px;
}
.record-card-grid.record-card-grid-2 { grid-template-columns:repeat(2, 1fr); }
.record-card {
background:var(--bg-card);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
padding:16px 18px;
box-shadow:var(--shadow-card);
transition:var(--transition);
display:flex;
flex-direction:column;
gap:10px;
position:relative;
overflow:hidden;
}
.record-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:var(--rc-accent, linear-gradient(90deg,var(--g-600),var(--g-400)));
}
.record-card:hover { border-color:var(--border-med); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.record-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.record-card-title { font-size:14px; font-weight:700; color:var(--txt-primary); line-height:1.3; word-break:break-word; }
.record-card-title a { color:inherit; }
.record-card-title a:hover { color:var(--g-700); }
.record-card-subtitle { font-size:11.5px; color:var(--txt-muted); margin-top:2px; }
.record-card-title-oneline { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.record-card-body { display:flex; flex-direction:column; gap:6px; flex:1; }
.record-card-row { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--txt-secondary); }
.record-card-row i.fa, .record-card-row i.glyphicon { width:14px; flex-shrink:0; color:var(--txt-faint); font-size:11px; text-align:center; }
.record-card-row span.rc-label { color:var(--txt-faint); flex-shrink:0; }
.record-card-row.rc-remarks {
align-items:flex-start; font-style:italic; color:var(--txt-muted);
background:var(--bg-card2); border-radius:var(--r-sm); padding:6px 8px; gap:6px;
}
.record-card-row.rc-remarks i { margin-top:1px; }
.record-card-actions {
display:flex; align-items:center; justify-content:flex-end; gap:4px;
padding-top:10px; margin-top:2px; border-top:1px solid var(--border-light);
}
.record-card-actions a {
display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
border-radius:var(--r-sm); border:1px solid var(--border-light); background:#fff;
box-shadow:var(--shadow-sm); transition:var(--transition); cursor:pointer;
}
/* Quotation cards put the status badge in the action row instead of the top
row (where the red "Rev:" label now lives) - space-between only here so
every other record-card-actions (invoices, projects, etc.) keeps its
plain right-aligned icon row untouched. */
.record-card-actions.rc-actions-with-status { justify-content:space-between; }
.rc-actions-icons { display:flex; align-items:center; gap:4px; }
.rc-rev-label { color:#dc2626; font-size:11.5px; font-weight:700; white-space:nowrap; }
/* Status filter tabs (pill segmented control) above a record-card-grid */
.status-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:14px 18px; border-bottom:1px solid var(--border-light); background:var(--bg-card); }
.status-tab {
display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
border:1px solid var(--border-light); background:var(--bg-card2); color:var(--txt-secondary);
font-size:12.5px; font-weight:600; cursor:pointer; transition:var(--transition); -webkit-user-select:none; user-select:none;
}
.status-tab:hover { border-color:var(--g-400); color:var(--txt-primary); }
.status-tab.active {
background:var(--tab-accent, var(--g-600)); border-color:transparent; color:#fff;
}
.status-tab .status-tab-count {
display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
border-radius:999px; background:rgba(0,0,0,.08); color:inherit; font-size:11px; font-weight:700;
}
.status-tab.active .status-tab-count { background:rgba(255,255,255,.25); }
.record-card-actions a:hover { background:var(--bg-card2); border-color:var(--border-med); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.record-card-actions .mdx { font-size:13px !important; }
.record-card-empty { grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--txt-faint); font-size:13px; }
/* Status dot (small, corner-of-card indicator - replaces a big icon) */
.rc-status-dot {
width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:4px;
box-shadow:0 0 0 3px var(--bg-card2);
}
.rc-status-dot.active { background:var(--g-500); }
.rc-status-dot.inactive { background:var(--txt-faint); }
/* Stat pills (e.g. fee amounts) shown side-by-side inside a card body */
.rc-stat-row { display:flex; gap:8px; }
.rc-stat-pill {
flex:1; background:var(--g-50); border:1px solid var(--g-100); border-radius:var(--r-md);
padding:7px 10px; display:flex; flex-direction:column; gap:1px; min-width:0;
}
.rc-stat-pill .rc-stat-label { font-size:10px; font-weight:600; color:var(--g-700); text-transform:uppercase; letter-spacing:.4px; }
.rc-stat-pill .rc-stat-value { font-size:13.5px; font-weight:700; color:var(--txt-primary); font-family:'JetBrains Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Progress bars (e.g. project completion %) shown inside a record card */
.rc-progress-row { display:flex; align-items:center; gap:8px; }
.rc-progress-row .progress { flex:1; height:7px; margin:0; background:var(--border-light); border-radius:99px; box-shadow:none; overflow:hidden; }
.rc-progress-row .progress-bar { background:linear-gradient(90deg,var(--g-600),var(--g-400)); }
.rc-progress-row .rc-progress-label { font-size:11px; font-weight:600; color:var(--txt-muted); flex-shrink:0; }
@media (max-width:1100px) { .record-card-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px) {
.record-card-grid { grid-template-columns:1fr; }
/* .record-card-grid-2 (Ongoing Projects, and the dashboard's own
Enquiry/Quotation grids below) has higher specificity than the plain
.record-card-grid rule above (two classes vs one), so without this it
would keep forcing 2 columns on narrow phones regardless of the line
above - match its specificity here so the mobile 1-column layout wins. */
.record-card-grid.record-card-grid-2 { grid-template-columns:1fr; }
}
/* Dashboard widget grids: CSS Grid only stretches cards to match their
own row's tallest sibling, not every row in the grid - different rows
(varying enquiry/quotation/project/invoice content) still end up
different heights than each other. A per-grid min-height plus pinning
.record-card-actions to the bottom keeps every card in a given
dashboard grid visually uniform regardless of row. */
.dash-card-grid .record-card-actions { margin-top:auto; }
#dashEnquiryGrid .record-card { min-height:210px; }
#dashQuotationGrid .record-card { min-height:160px; }
#dashProjectGrid .record-card { min-height:178px; }
#dashInvoiceGrid .record-card { min-height:200px; }
/* Recent 10 Enquiry / Recent 10 Quotations sit side-by-side but have
naturally different content heights (enquiry cards show more fields),
so their .box bodies didn't line up. Scoped flex wrapper (NOT the
shared global .row, which floats and is used all over the site) makes
the two boxes stretch to match whichever one is taller. */
.dash-equal-row { display:flex; flex-wrap:wrap; align-items:stretch; }
.dash-equal-row > section { display:flex; }
.dash-equal-row .box { display:flex; flex-direction:column; width:100%; }
.dash-equal-row .box-body { flex:1; }
/* The two boxes in this row are plain .col-lg-6 with no smaller-breakpoint
class, so below Bootstrap's own 1200px lg tier they'd normally fall back
to stacking as full-width blocks (Bootstrap only applies col-lg-6's
width/float inside its own min-width:1200px media query) - but turning
them into flex items here removes that fallback, since a flex item with
no explicit width sizes to its content instead of auto-stacking full
width. Force the stack back below 1200px to match. */
@media (max-width:1199px) {
.dash-equal-row { flex-direction:column; }
.dash-equal-row > section { width:100%; }
}
/* Renewal Reminder widget (FullCalendar v1, css/fullcalendar/fullcalendar.css):
its header is a with fixed 25%-width left/right cells and
white-space:nowrap everywhere (title + prev/next/today buttons never
wrap), which is a classic legacy-library mobile-overflow trap - the
title text alone can exceed the remaining cell width on a phone screen,
pushing the table wider than its box and forcing the whole page to
scroll horizontally. Shrink the header text/buttons on narrow screens
and add a local scroll fallback so a still-too-wide header scrolls
inside its own card instead of breaking the page layout. */
@media (max-width:480px) {
.calendarone { overflow-x:auto; }
.calendarone .fc-header-title h2 { font-size:14px; }
.calendarone .fc-button { padding:2px 6px; font-size:11px; }
}
/* ════════════════════════════════════════════════════════
CHECKBOXES (modern custom style: rounded square, green fill +
checkmark when checked, replacing the plain browser default)
════════════════════════════════════════════════════════ */
input[type="checkbox"] {
-webkit-appearance:none; appearance:none;
width:17px; height:17px; flex-shrink:0;
border:1.5px solid var(--border-med);
border-radius:5px;
background:#fff;
cursor:pointer;
position:relative;
vertical-align:middle;
transition:var(--transition);
margin:0;
}
input[type="checkbox"]:hover { border-color:var(--g-400); }
input[type="checkbox"]:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
input[type="checkbox"]:checked {
background:var(--g-600);
border-color:var(--g-600);
}
input[type="checkbox"]:checked::after {
content:'';
position:absolute;
left:5px; top:1.5px;
width:4px; height:8px;
border:solid #fff;
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
input[type="checkbox"]:indeterminate {
background:var(--g-600);
border-color:var(--g-600);
}
input[type="checkbox"]:indeterminate::after {
content:'';
position:absolute;
left:3px; top:7px;
width:9px; height:2px;
background:#fff;
}
input[type="checkbox"]:disabled { opacity:.5; cursor:not-allowed; }
input[type="radio"] {
-webkit-appearance:none; appearance:none;
width:17px; height:17px; flex-shrink:0;
border:1.5px solid var(--border-med);
border-radius:50%;
background:#fff;
cursor:pointer;
position:relative;
vertical-align:middle;
transition:var(--transition);
margin:0;
}
input[type="radio"]:hover { border-color:var(--g-400); }
input[type="radio"]:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
input[type="radio"]:checked { border-color:var(--g-600); }
input[type="radio"]:checked::after {
content:'';
position:absolute;
left:50%; top:50%;
width:8px; height:8px;
background:var(--g-600);
border-radius:50%;
transform:translate(-50%,-50%);
}
input[type="radio"]:disabled { opacity:.5; cursor:not-allowed; }
/* ════════════════════════════════════════════════════════
LABELS / BADGES
════════════════════════════════════════════════════════ */
.label { border-radius:99px; font-weight:600; font-size:11px; padding:3px 9px; }
.label-success { background:#dcfce7 !important; color:#15803d !important; }
.label-primary { background:#dbeafe !important; color:#1d4ed8 !important; }
.label-danger { background:#fee2e2 !important; color:#dc2626 !important; }
.label-warning { background:#fef9c3 !important; color:#a16207 !important; }
.label-info { background:#e0f2fe !important; color:#0369a1 !important; }
.label-default { background:var(--border-light) !important; color:var(--txt-muted) !important; }
/* ════════════════════════════════════════════════════════
TABLES / DATATABLES
════════════════════════════════════════════════════════ */
.table { font-size:12.5px; color:var(--txt-secondary); }
.table > thead > tr > th { background:var(--bg-card2); color:var(--txt-muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border-light) !important; white-space:nowrap; }
.table > tbody > tr > td { border-top:1px solid var(--border-light); vertical-align:middle; }
.table-bordered { border:1px solid var(--border-light); }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border:1px solid var(--border-light); }
.table-striped > tbody > tr:nth-of-type(odd) { background:var(--bg-card2); }
.table > tbody > tr:hover > td { background:var(--g-50); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { border-radius:var(--r-sm); border:1px solid var(--border-light); padding:5px 8px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color:var(--g-500); outline:none; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius:var(--r-sm) !important; margin:0 2px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background:var(--g-600) !important; border-color:var(--g-600) !important; color:#fff !important; }
.pagination > li > a, .pagination > li > span { color:var(--txt-secondary); border-color:var(--border-light); }
.pagination > .active > a, .pagination > .active > span { background:var(--g-600); border-color:var(--g-600); }
/* ════════════════════════════════════════════════════════
LIST SEARCH + INFINITE SCROLL (card-header search box, matching the
reference design's "mini-search" pattern, plus a scroll-loader row)
════════════════════════════════════════════════════════ */
.list-search-wrap { position:relative; display:inline-flex; align-items:center; }
.list-search-wrap .fa { position:absolute; left:10px; color:var(--txt-faint); font-size:12px; pointer-events:none; }
.list-search-input {
background:var(--bg-input); border:1px solid var(--border-light);
border-radius:20px; padding:6px 10px 6px 28px;
color:var(--txt-primary); font-size:12.5px; outline:none;
transition:var(--transition); width:200px;
}
.list-search-input:focus { border-color:var(--g-500); background:#fff; box-shadow:0 0 0 3px rgba(34,197,94,.1); }
.list-search-input::placeholder { color:var(--txt-faint); }
.scroll-loader td { text-align:center; padding:14px; color:var(--txt-muted); font-size:12.5px; border-top:1px solid var(--border-light); }
.scroll-loader .spin {
display:inline-block; width:14px; height:14px; margin-right:6px; vertical-align:-2px;
border:2px solid var(--border-med); border-top-color:var(--g-600); border-radius:50%;
animation:novaSpin .6s linear infinite;
}
@keyframes novaSpin { to { transform:rotate(360deg); } }
/* ════════════════════════════════════════════════════════
FORMS
════════════════════════════════════════════════════════ */
.form-control { background:var(--bg-input); border:1px solid var(--border-light); border-radius:20px !important; box-shadow:none; font-size:13px; height:auto; padding:9px 12px; color:var(--txt-primary); transition:var(--transition); }
.form-control:focus { border-color:var(--g-500); background:#fff; box-shadow:0 0 0 3px rgba(34,197,94,.1); }
.form-control::placeholder { color:var(--txt-faint); }
.form-control:disabled, .form-control[readonly] { background:var(--bg-input); color:var(--txt-muted); opacity:.75; cursor:not-allowed; }
.control-label, label { color:var(--txt-secondary); font-weight:600; font-size:12.5px; }
.input-group-addon { background:var(--bg-card2); border:1px solid var(--border-light); border-radius:20px; }
.checkbox label, .radio label { font-weight:400; }
.form-hint { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--g-700); background:linear-gradient(135deg,var(--g-50),var(--g-100)); border:1px solid var(--g-200); padding:3px 9px; border-radius:99px; margin-top:5px; }
.form-hint::before { content:''; width:5px; height:5px; border-radius:50%; background:linear-gradient(135deg,var(--g-400),var(--g-600)); flex-shrink:0; }
.box-title-hint { margin:2px 0 0; font-size:12px; color:var(--txt-muted); font-weight:400; }
/* Reusable password show/hide toggle, used project-wide on any
type="password" field (see js/nova-admin.js for the delegated click
handler). Icon sits a bit clear of the input's right edge on purpose -
Chrome renders its own native reveal affordance in that exact corner
once a password field has a value, and a custom icon placed right at
right:14px silently stops receiving clicks once that's showing. */
.pwd-toggle-wrap { position:relative; display:flex; align-items:center; width:100%; }
.pwd-toggle-wrap .form-control { padding-right:56px !important; width:100% !important; flex:1 1 auto; min-width:0; }
.pwd-toggle-icon { position:absolute; right:34px; top:50%; transform:translateY(-50%); color:var(--txt-faint); font-size:13px; cursor:pointer; z-index:2; }
.pwd-toggle-icon:hover { color:var(--txt-muted); }
/* Reusable on/off toggle switch, replacing a plain checkbox. Markup:
The checkbox itself is unchanged (same id/name/onchange/checked state),
just visually hidden - existing JS that reads $('#id').is(':checked')
keeps working with no changes needed. */
.toggle-switch { position:relative; display:inline-block; width:42px; height:23px; vertical-align:middle; flex-shrink:0; }
.toggle-switch input { position:absolute; opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--border-med); border-radius:99px; cursor:pointer; transition:var(--transition); }
.toggle-slider::before { content:''; position:absolute; height:17px; width:17px; left:3px; top:3px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:var(--transition); }
.toggle-switch input:checked ~ .toggle-slider { background:var(--g-600); }
.toggle-switch input:checked ~ .toggle-slider::before { transform:translateX(19px); }
.toggle-switch input:focus ~ .toggle-slider { box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.toggle-switch input:disabled ~ .toggle-slider { opacity:.6; cursor:not-allowed; }
/* Custom chevron for plain