/*
Theme Name: Ghana ERP Pro
Description: A custom block theme.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ghana-erp-pro
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* === Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* === CSS Custom Properties — Full Dark Navy System === */
:root {
	/* Brand colours */
	--erp-navy:       #0A1628;
	--erp-navy-mid:   #0F1F3D;
	--erp-navy-light: #132240;
	--erp-navy-card:  #1A2942;
	--erp-gold:       #FCD116;
	--erp-gold-dark:  #D4A800;
	--erp-green:      #006B3F;
	--erp-red:        #CE1126;
	--erp-white:      #FFFFFF;
	--gold:           #FCD116; /* alias used in JS */
	/* Dark-mode surface colours */
	--erp-bg:        #080F1E;
	--erp-surface:   #0F1F3D;
	--erp-card:      #132240;
	--erp-border:    rgba(255,255,255,.1);
	/* Text colours — always readable on dark bg */
	--erp-text:      #F0F4F8;
	--erp-text-dim:  rgba(255,255,255,.65);
	--erp-text-mute: rgba(255,255,255,.4);
	--erp-muted:     rgba(255,255,255,.5);
	/* State colours */
	--erp-success:   #22c55e;
	--erp-warning:   #f59e0b;
	--erp-danger:    #ef4444;
	--erp-info:      #3b82f6;
	/* Layout — sidebar is ALWAYS visible at these fixed widths */
	--erp-sidebar-width:        260px;   /* desktop ≥ 960px */
	--erp-sidebar-width-tablet: 200px;   /* tablet 600–959px */
	--erp-sidebar-width-phone:   52px;   /* phone < 600px (icon-only) */
	--erp-header-height: 64px;
	--erp-radius:    8px;
	--erp-radius-lg: 12px;
	--erp-shadow:    0 2px 8px rgba(0,0,0,.4);
	--erp-shadow-md: 0 6px 20px rgba(0,0,0,.5);
	--erp-shadow-lg: 0 12px 40px rgba(0,0,0,.6);
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }
html, body {
	margin: 0;
	padding: 0;
	/* CRITICAL: no overflow on html or body — both trap position:fixed in Chrome/Windows */
}
html { scroll-behavior: smooth; }
body {
	background: var(--erp-bg);
	color: var(--erp-text);
	font-family: 'Inter', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.wp-site-blocks { padding: 0 !important; }

/* ════════════════════════════════════════════════════════
   HIDE ALL WORDPRESS UI — admin bar, dashicons, block styles,
   site icon, WP menu bubbles, query monitor, notices, etc.
   ════════════════════════════════════════════════════════ */
#wpadminbar,
#wp-admin-bar-root-default,
.wp-block-site-title a,
.wp-block-navigation,
.wp-skip-link,
.skip-link,
.screen-reader-shortcut,
.screen-reader-text,
#query-monitor-main,
.qm-toolbar,
#qm,
.dashicons:not(.erp-dashicon),
.wp-block-loginout,
.site-title-wrapper,
.wp-site-blocks > header:not(.erp-sidebar),
.wp-site-blocks > footer:not(.erp-sidebar),
.is-root-container > header:not([class*="erp"]),
.is-root-container > footer:not([class*="erp"]),
.notice-container,
.wp-block-pattern-selector,
.noscript-banner,
.wp-emoji-loader { display: none !important; }

/* Strip margin/padding WordPress injects for admin bar */
html { margin-top: 0 !important; }
body { margin-top: 0 !important; padding-top: 0 !important; }
body.admin-bar { margin-top: 0 !important; padding-top: 0 !important; }

/* Kill block editor's global colour & font palette injected inline */
:root {
  --wp--preset--color--black: transparent;
  --wp--preset--color--white: transparent;
  --wp--preset--spacing--50: 0;
  --wp--preset--spacing--60: 0;
}
/* All text on dark bg must be readable */
h1,h2,h3,h4,h5,h6 { color: #fff; }
p { color: var(--erp-text-dim); margin: 0 0 .75rem; }
a { color: var(--erp-gold); text-decoration: none; }
a:hover { color: var(--erp-gold-dark); }
strong { color: #fff; }
small { color: var(--erp-text-mute); }
label { color: var(--erp-text-dim); }
select, input, textarea {
	background: var(--erp-navy-card);
	color: #fff;
	border: 1.5px solid rgba(255,255,255,.15);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: .88rem;
	font-family: inherit;
	outline: none;
	transition: border-color .18s;
}
select:focus, input:focus, textarea:focus {
	border-color: var(--erp-gold);
	box-shadow: 0 0 0 3px rgba(252,209,22,.15);
}
select option { background: #0F1F3D; color: #fff; }

/* === Global ERP Layout — two-column always === */
.erp-layout {
	display: flex;
	min-height: 100vh;
	width: 100%;
	/* Do NOT set overflow on erp-layout — would break position:fixed modals */
}
.erp-main-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;               /* prevent flex blowout */
	margin-left: var(--erp-sidebar-width);
	max-width: calc(100vw - var(--erp-sidebar-width));
	width: calc(100vw - var(--erp-sidebar-width));
	transition: margin-left .2s ease, width .2s ease, max-width .2s ease;
}

/* === typography === */
h1,h2,h3,h4,h5,h6 { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--erp-text); margin: 0 0 0.5em; }
p { margin: 0 0 1rem; color: var(--erp-muted); }
a { color: var(--erp-gold-dark); text-decoration: none; }
a:hover { color: var(--erp-gold); }

/* === ERP Sidebar — ALWAYS VISIBLE on all devices === */
.erp-sidebar {
	position: fixed; top: 0; left: 0;
	width: var(--erp-sidebar-width); height: 100vh;
	background: var(--erp-navy); color: var(--erp-white);
	display: flex; flex-direction: column; z-index: 1000;
	overflow-y: auto; overflow-x: hidden;
	box-shadow: 2px 0 12px rgba(0,0,0,.35);
	scroll-behavior: smooth;
	/* Never transform/hide the sidebar — it is always in the layout */
	transform: none !important;
	transition: width .2s ease;
}
.erp-sidebar::-webkit-scrollbar { width: 4px; }
.erp-sidebar::-webkit-scrollbar-track { background: transparent; }
.erp-sidebar::-webkit-scrollbar-thumb { background: var(--erp-navy-light); border-radius: 2px; }

/* Sidebar Brand */
.erp-brand {
	padding: 0 1.25rem;
	height: var(--erp-header-height);
	display: flex; align-items: center; gap: 0.75rem;
	border-bottom: 1px solid rgba(255,255,255,.07);
	flex-shrink: 0;
}
.erp-brand-logo {
	width: 36px; height: 36px; border-radius: 8px;
	background: linear-gradient(135deg, var(--erp-gold), var(--erp-gold-dark));
	display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem; font-weight: 900; color: var(--erp-navy);
	flex-shrink: 0;
}
.erp-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.erp-brand-name { font-size: .8rem; font-weight: 800; color: var(--erp-white); letter-spacing: .02em; }
.erp-brand-tagline { font-size: .65rem; color: var(--erp-gold); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* Sidebar Business Badge */
.erp-biz-badge {
	margin: 1rem 1rem 0;
	padding: .6rem .85rem;
	background: var(--erp-navy-mid);
	border-radius: 8px;
	border-left: 3px solid var(--erp-gold);
	flex-shrink: 0;
}
.erp-biz-name { font-size: .78rem; font-weight: 700; color: var(--erp-white); }
.erp-biz-meta { font-size: .65rem; color: rgba(255,255,255,.45); margin-top: 2px; }

/* Sidebar Nav */
.erp-nav { flex: 1; padding: .75rem 0; }
.erp-nav-section { padding: 1rem 1.25rem .35rem; font-size: .6rem; font-weight: 700; color: rgba(255,255,255,.3); letter-spacing: .12em; text-transform: uppercase; }
.erp-nav-item {
	display: flex; align-items: center; gap: .65rem;
	padding: .55rem 1.25rem; cursor: pointer;
	color: rgba(255,255,255,.65); font-size: .82rem; font-weight: 500;
	transition: all .18s ease; border-left: 3px solid transparent;
	text-decoration: none;
}
.erp-nav-item:hover { background: var(--erp-navy-mid); color: var(--erp-white); border-left-color: var(--erp-gold); }
.erp-nav-item.active { background: var(--erp-navy-light); color: var(--erp-white); border-left-color: var(--erp-gold); font-weight: 600; }
.erp-nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.erp-nav-badge {
	margin-left: auto; background: var(--erp-gold);
	color: var(--erp-navy); font-size: .6rem; font-weight: 800;
	border-radius: 10px; padding: .1rem .4rem; min-width: 18px; text-align: center;
}
.erp-nav-badge.red { background: var(--erp-red); color: white; }
.erp-nav-badge.green { background: var(--erp-success); color: white; }

/* Sidebar Footer */
.erp-sidebar-footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid rgba(255,255,255,.07);
	flex-shrink: 0;
}
.erp-user-info { display: flex; align-items: center; gap: .65rem; }
.erp-user-avatar {
	width: 32px; height: 32px; border-radius: 50%;
	background: linear-gradient(135deg, var(--erp-gold), var(--erp-green));
	display: flex; align-items: center; justify-content: center;
	font-size: .75rem; font-weight: 800; color: var(--erp-navy);
}
.erp-user-name { font-size: .78rem; font-weight: 600; color: var(--erp-white); }
.erp-user-role { font-size: .65rem; color: rgba(255,255,255,.4); }

/* === ERP Topbar === */
.erp-topbar {
	height: var(--erp-header-height);
	background: var(--erp-navy-mid);
	border-bottom: 1px solid rgba(255,255,255,.08);
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 1.75rem;
	position: sticky; top: 0; z-index: 100;
	box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.erp-topbar-left { display: flex; align-items: center; gap: 1rem; position: relative; }
.erp-branch-chip {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .3rem .7rem;
	border: 1px solid rgba(252,209,22,.3);
	border-radius: 20px; font-size: .72rem; font-weight: 700;
	color: #FCD116; background: rgba(252,209,22,.08);
	user-select: none; transition: background .15s, border-color .15s;
	white-space: nowrap;
}
.erp-branch-chip:hover { background: rgba(252,209,22,.16); border-color: rgba(252,209,22,.5); }
.erp-topbar-title { font-size: 1.05rem; font-weight: 700; color: #fff; }
.erp-topbar-breadcrumb { font-size: .78rem; color: rgba(255,255,255,.45); }
.erp-topbar-right { display: flex; align-items: center; gap: .75rem; }
.erp-topbar-btn {
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.15);
	background: rgba(255,255,255,.05);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: .9rem; color: rgba(255,255,255,.7);
	transition: all .18s ease;
}
.erp-topbar-btn:hover { background: var(--erp-gold); color: var(--erp-navy); border-color: var(--erp-gold); }
.erp-date-chip {
	padding: .35rem .75rem;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 20px; font-size: .72rem; font-weight: 600;
	color: rgba(255,255,255,.65); background: rgba(255,255,255,.05);
}
.erp-compliance-chip {
	padding: .3rem .7rem;
	border: 1px solid rgba(34,197,94,.35);
	border-radius: 20px; font-size: .7rem; font-weight: 700;
	color: #22c55e; background: rgba(34,197,94,.08);
}
.erp-page-breadcrumb {
	font-size: 1rem; font-weight: 700; color: #fff;
	letter-spacing: .01em;
}
.erp-version-chip {
	padding: .25rem .55rem;
	border: 1px solid rgba(252,209,22,.25);
	border-radius: 12px; font-size: .65rem; font-weight: 700;
	color: rgba(252,209,22,.7); background: rgba(252,209,22,.06);
	font-family: 'IBM Plex Mono', monospace;
}
/* Hide any lingering WP site-title link rendered by block */
.wp-block-site-title, .wp-site-blocks .wp-block-site-title { display: none !important; }

/* ═══ Notification bell ═══ */
.erp-notif-wrap { position: relative; }
.erp-notif-bell {
	position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
	border-radius: 10px; width: 34px; height: 34px; font-size: 1rem; cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: #fff; transition: background .15s;
}
.erp-notif-bell:hover { background: rgba(255,255,255,.12); }
.erp-notif-count {
	position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px;
	background: #ef4444; color: #fff; border-radius: 999px; font-size: .625rem; font-weight: 800;
	display: flex; align-items: center; justify-content: center; line-height: 1; font-family: 'IBM Plex Mono', monospace;
}
.erp-notif-panel {
	position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-height: 420px; overflow-y: auto;
	background: #12151f; border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
	box-shadow: 0 20px 50px rgba(0,0,0,.5); z-index: 200; padding: .5rem 0;
}
.erp-notif-panel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: .5rem 1rem .75rem; border-bottom: 1px solid rgba(255,255,255,.08);
	color: #fff; font-weight: 700; font-size: .8rem;
}
.erp-notif-panel-head button {
	background: none; border: none; color: rgba(252,209,22,.8); font-size: .7rem; font-weight: 700; cursor: pointer;
}
.erp-notif-list { padding: .25rem 0; }
.erp-notif-empty { padding: 1.25rem 1rem; color: rgba(255,255,255,.45); font-size: .8rem; text-align: center; }
.erp-notif-item { display: flex; gap: .6rem; padding: .6rem 1rem; align-items: flex-start; }
.erp-notif-item + .erp-notif-item { border-top: 1px solid rgba(255,255,255,.05); }
.erp-notif-ico { font-size: .75rem; margin-top: .15rem; }
.erp-notif-title { color: #fff; font-size: .78rem; font-weight: 700; }
.erp-notif-msg { color: rgba(255,255,255,.6); font-size: .72rem; margin-top: .1rem; }
.erp-notif-critical .erp-notif-title { color: #fca5a5; }
.erp-notif-dismiss { margin-left: auto; flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,.35); font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.erp-notif-dismiss:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ═══ Command palette (Ctrl/Cmd+K) ═══ */
.erp-palette-overlay {
	position: fixed; inset: 0; background: rgba(4,6,12,.6); backdrop-filter: blur(3px);
	z-index: 999; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.erp-palette-overlay:not([hidden]) { display: flex; }
.erp-palette-box {
	width: min(560px, 92vw); background: #12151f; border: 1px solid rgba(255,255,255,.12);
	border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden;
}
.erp-palette-input {
	width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.1);
	color: #fff; font-size: 1rem; padding: 1rem 1.25rem; outline: none; font-family: 'Inter', system-ui, sans-serif;
}
.erp-palette-input::placeholder { color: rgba(255,255,255,.35); }
.erp-palette-results { max-height: 50vh; overflow-y: auto; padding: .4rem; }
.erp-palette-empty { padding: 1.5rem; text-align: center; color: rgba(255,255,255,.4); font-size: .85rem; }
.erp-palette-item {
	display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px; cursor: pointer;
}
.erp-palette-item:hover, .erp-palette-item.active { background: rgba(252,209,22,.1); }
.erp-palette-type {
	font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
	color: rgba(252,209,22,.8); background: rgba(252,209,22,.08); border: 1px solid rgba(252,209,22,.25);
	border-radius: 6px; padding: .15rem .4rem; flex-shrink: 0;
}
.erp-palette-title { color: #fff; font-size: .85rem; font-weight: 600; }
.erp-palette-sub { color: rgba(255,255,255,.45); font-size: .72rem; margin-top: .05rem; }
.erp-palette-hint {
	padding: .6rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.35);
	font-size: .68rem; font-family: 'IBM Plex Mono', monospace;
}
.wp-block-site-title a { display: none !important; }

/* === ERP Content Area === */
.erp-content {
	padding: 1.5rem 1.75rem;
	flex: 1;
	width: 100%;
	max-width: 100%;
	/* No overflow:hidden here — would trap position:fixed modals */
	background: var(--erp-bg);
	min-height: calc(100vh - var(--erp-header-height));
}

/* === Page Header === */
.erp-page-header {
	margin-bottom: 1.25rem;
}
.erp-page-title { font-size: 1.45rem; font-weight: 800; color: #fff; margin: 0 0 .2rem; }
.erp-page-sub   { font-size: .84rem; color: rgba(255,255,255,.5); margin: 0; }
.erp-page-subtitle { font-size: .82rem; color: rgba(255,255,255,.5); margin: .2rem 0 0; }
.erp-page-actions { display: flex; gap: .6rem; }

/* === Stat Cards === */
.erp-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}
/* 5-column stat grid (legacy) */
.erp-stats-5col {
	grid-template-columns: repeat(5, 1fr);
}
/* Shared 7-card 4+3 layout (CRM + Purchases) */
.erp-stats-crm,
.erp-stats-pur {
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
}
/* Row 1: cards 1–4 each span 3 of 12 = 4 equal columns */
.erp-stats-crm .erp-stat-card:nth-child(1),
.erp-stats-crm .erp-stat-card:nth-child(2),
.erp-stats-crm .erp-stat-card:nth-child(3),
.erp-stats-crm .erp-stat-card:nth-child(4),
.erp-stats-pur .erp-stat-card:nth-child(1),
.erp-stats-pur .erp-stat-card:nth-child(2),
.erp-stats-pur .erp-stat-card:nth-child(3),
.erp-stats-pur .erp-stat-card:nth-child(4) {
	grid-column: span 3;
}
/* Row 2: cards 5–7 each span 4 of 12 = 3 equal columns */
.erp-stats-crm .erp-stat-card:nth-child(5),
.erp-stats-crm .erp-stat-card:nth-child(6),
.erp-stats-crm .erp-stat-card:nth-child(7),
.erp-stats-pur .erp-stat-card:nth-child(5),
.erp-stats-pur .erp-stat-card:nth-child(6),
.erp-stats-pur .erp-stat-card:nth-child(7) {
	grid-column: span 4;
}
/* Gold CTA button variant */
.erp-btn-gold {
	background: var(--erp-gold);
	color: var(--erp-navy);
	border: none;
	font-weight: 700;
}
.erp-btn-gold:hover { background: #e6bc10; }
.erp-stat-card {
	background: var(--erp-card);
	border-radius: var(--erp-radius-lg);
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--erp-border);
	box-shadow: var(--erp-shadow);
	display: flex; flex-direction: column; gap: .5rem;
	position: relative; overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.erp-stat-card:hover { box-shadow: var(--erp-shadow-md); transform: translateY(-1px); }
.erp-stat-card::before {
	content: ''; position: absolute; top: 0; left: 0;
	width: 4px; height: 100%;
}
.erp-stat-card.gold::before { background: var(--erp-gold); }
.erp-stat-card.green::before { background: var(--erp-success); }
.erp-stat-card.blue::before { background: #3B82F6; }
.erp-stat-card.red::before { background: var(--erp-red); }
.erp-stat-card.purple::before { background: #8B5CF6; }
.erp-stat-card.teal::before   { background: #14B8A6; }
.erp-stat-card.orange::before { background: #F97316; }

.erp-stat-label { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .07em; }
.erp-stat-value { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; font-family: 'IBM Plex Mono', monospace; }
.erp-stat-value.ghana { font-family: 'Inter', sans-serif; }
.erp-stat-change { font-size: .75rem; font-weight: 600; display: flex; align-items: center; gap: .25rem; }
.erp-stat-change.up { color: var(--erp-success); }
.erp-stat-change.down { color: var(--erp-danger); }
.erp-stat-icon {
	position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
	font-size: 2.5rem; opacity: .08;
}

/* === Cards & Panels === */
.erp-card {
	background: var(--erp-card);
	border-radius: var(--erp-radius-lg);
	border: 1px solid var(--erp-border);
	box-shadow: var(--erp-shadow);
	overflow: hidden;
}
.erp-card-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--erp-border);
	background: linear-gradient(to right, var(--erp-navy), var(--erp-navy-mid));
}
.erp-card-title { font-size: .9rem; font-weight: 700; color: var(--erp-white); margin: 0; display: flex; align-items: center; gap: .5rem; }
.erp-card-body { padding: 1.25rem 1.5rem; }

/* === Tables — dark system === */
.erp-table-wrap { overflow-x: auto; border-radius: var(--erp-radius-lg); }
.erp-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.erp-table th {
	padding: .7rem 1rem;
	background: rgba(255,255,255,.04);
	font-size: .7rem; font-weight: 700; color: var(--erp-gold);
	text-transform: uppercase; letter-spacing: .07em;
	border-bottom: 1px solid rgba(252,209,22,.2);
	white-space: nowrap; text-align: left;
}
.erp-table td {
	padding: .75rem 1rem;
	border-bottom: 1px solid rgba(255,255,255,.05);
	color: rgba(255,255,255,.85);
	vertical-align: middle;
}
.erp-table tr:last-child td { border-bottom: none; }
.erp-table tr:hover td { background: rgba(252,209,22,.04); }
.erp-table .amount { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: #fff; }

/* === Badges — dark-readable === */
.erp-badge {
	display: inline-block;
	padding: .22rem .65rem;
	border-radius: 20px;
	font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	white-space: nowrap;
}
.erp-badge.success { background: rgba(34,197,94,.18);  color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.erp-badge.warning { background: rgba(245,158,11,.18); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.erp-badge.danger  { background: rgba(239,68,68,.18);  color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.erp-badge.info    { background: rgba(59,130,246,.18); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.erp-badge.gold    { background: rgba(252,209,22,.15); color: #fcd116; border: 1px solid rgba(252,209,22,.3); }
.erp-badge.neutral { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.12); }

/* === Buttons — all variants clearly visible on dark bg === */
.erp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	padding: .55rem 1.15rem; border-radius: 7px;
	font-size: .83rem; font-weight: 700; font-family: inherit;
	cursor: pointer; border: none; transition: all .18s ease;
	text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.erp-btn:active { transform: scale(.97) !important; }
.erp-btn-primary   { background: var(--erp-gold); color: #0A1628; }
.erp-btn-primary:hover { background: #D4A800; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(252,209,22,.4); }
.erp-btn-secondary { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.2); }
.erp-btn-secondary:hover { background: rgba(255,255,255,.18); color: #fff; }
.erp-btn-success   { background: #22c55e; color: #fff; }
.erp-btn-success:hover { background: #16a34a; transform: translateY(-1px); }
.erp-btn-danger    { background: #ef4444; color: #fff; }
.erp-btn-danger:hover { background: #dc2626; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(239,68,68,.4); }
.erp-btn-outline   { background: transparent; color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.25); }
.erp-btn-outline:hover { border-color: var(--erp-gold); color: var(--erp-gold); }
.erp-btn-navy      { background: #132240; color: var(--erp-gold); border: 1px solid rgba(252,209,22,.25); }
.erp-btn-navy:hover { background: #1E3A5F; }
.erp-btn-sm { padding: .35rem .75rem; font-size: .75rem; }

/* ══════════════════════════════════════════════════════════
   ERP MODAL SYSTEM
   Overlay is appended to <html> (not body) via JS.
   Uses top/left/transform centering — immune to ALL parent stacking contexts.
   ══════════════════════════════════════════════════════════ */

/* The fullscreen backdrop */
#erp-modal-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.82);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 999999;
	opacity: 0;
	transition: opacity 0.2s ease;
}
#erp-modal-overlay.erp-modal-open {
	display: block;
}
#erp-modal-overlay.erp-modal-visible {
	opacity: 1;
}

/* The centered dialog — positioned via top/left/transform, NOT flex */
.erp-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	width: calc(100vw - 2.5rem);
	max-width: 580px;
	max-height: calc(100vh - 3rem);
	z-index: 1000000;
	background: #0F1F3D;
	border: 1px solid rgba(252,209,22,0.18);
	border-radius: 14px;
	box-shadow: 0 32px 90px rgba(0,0,0,0.75);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
#erp-modal-overlay.erp-modal-visible .erp-modal {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	pointer-events: auto;
}

/* Header */
.erp-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.4rem 0.95rem;
	border-bottom: 1px solid rgba(255,255,255,0.09);
	background: #0a1628;
	border-radius: 14px 14px 0 0;
	flex-shrink: 0;
}
.erp-modal-header #erp-mt {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
}
.erp-modal-header #erp-mx {
	background: none;
	border: none;
	color: rgba(255,255,255,0.4);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: color 0.15s;
}
.erp-modal-header #erp-mx:hover { color: #ef4444; }

/* Scrollable body */
.erp-modal-body {
	padding: 1.25rem 1.4rem;
	overflow-y: auto;
	flex: 1;
	color: rgba(255,255,255,0.85);
	font-size: 0.88rem;
	line-height: 1.65;
	min-height: 60px;
}
.erp-modal-body::-webkit-scrollbar { width: 4px; }
.erp-modal-body::-webkit-scrollbar-track { background: transparent; }
.erp-modal-body::-webkit-scrollbar-thumb { background: rgba(252,209,22,0.25); border-radius: 4px; }

/* Footer */
.erp-modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem;
	padding: 0.9rem 1.4rem 1.1rem;
	border-top: 1px solid rgba(255,255,255,0.09);
	background: #0a1628;
	border-radius: 0 0 14px 14px;
	flex-shrink: 0;
}

/* Two-column form grid */
.erp-modal-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem 1rem;
}
.erp-modal-form .erp-modal-label { display: flex; flex-direction: column; gap: 4px; }
/* Last odd child spans both columns */
.erp-modal-form .erp-modal-label:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Paragraphs and divs inside form always full width */
.erp-modal-form > p,
.erp-modal-form > div { grid-column: 1 / -1; }
.erp-form-divider {
	grid-column: 1 / -1; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
	color: #FCD116; border-top: 1px solid rgba(255,255,255,.1); padding-top: .75rem; margin-top: .1rem;
}
.erp-form-checkbox label { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: rgba(255,255,255,.8); cursor: pointer; }
.erp-form-checkbox input[type=checkbox] { width: 16px; height: 16px; accent-color: #FCD116; cursor: pointer; }

/* Multi-line-item editor (Sales Orders, Purchase Orders, Quotations) */
.erp-li-editor { grid-column: 1 / -1; border: 1.5px solid rgba(255,255,255,.12); border-radius: 8px; padding: .7rem; background: rgba(255,255,255,.02); }
.erp-li-head, .erp-li-row {
	display: grid; grid-template-columns: 2.4fr .7fr 1fr 1fr 28px; gap: 8px; align-items: center;
}
.erp-li-head span { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.4); }
.erp-li-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.erp-li-row select, .erp-li-row input {
	background: #132240; color: #fff; border: 1.5px solid rgba(255,255,255,.14); border-radius: 6px;
	padding: 6px 8px; font-size: .82rem; outline: none; width: 100%; font-family: inherit;
}
.erp-li-row select:focus, .erp-li-row input:focus { border-color: #FCD116; }
.erp-li-linetotal { font-family: monospace; font-weight: 700; color: #FCD116; font-size: .85rem; text-align: right; padding-right: 4px; }
.erp-li-del {
	background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; border-radius: 6px;
	width: 26px; height: 26px; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.erp-li-del:hover { background: rgba(239,68,68,.22); }
.erp-li-add { grid-column: unset !important; }
.erp-li-grandtotal {
	margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1);
	text-align: right; font-weight: 700; color: #fff; font-size: .92rem;
}
.erp-li-grandtotal span { color: #FCD116; font-family: monospace; }
@media (max-width: 640px) {
	.erp-li-head { display: none; }
	.erp-li-row { grid-template-columns: 1fr 1fr; grid-template-areas: "prod prod" "qty price" "total del"; }
	.erp-li-row .erp-li-prod { grid-area: prod; }
	.erp-li-row .erp-li-qty { grid-area: qty; }
	.erp-li-row .erp-li-price { grid-area: price; }
	.erp-li-row .erp-li-linetotal { grid-area: total; text-align: left; }
	.erp-li-row .erp-li-del { grid-area: del; justify-self: end; }
}

/* Input styling */
.erp-modal-input {
	width: 100%;
	background: #132240;
	color: #fff;
	border: 1.5px solid rgba(255,255,255,0.14);
	border-radius: 7px;
	padding: 8px 11px;
	font-size: 0.87rem;
	outline: none;
	font-family: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.erp-modal-input:focus {
	border-color: #FCD116;
	box-shadow: 0 0 0 3px rgba(252,209,22,0.14);
}
.erp-modal-input option { background: #0F1F3D; }

.erp-modal-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.81rem;
	font-weight: 600;
	color: rgba(255,255,255,0.68);
}

/* === Form Elements === */
.erp-field { margin-bottom: 1rem; }
.erp-label { display: block; font-size: .78rem; font-weight: 600; color: var(--erp-text); margin-bottom: .35rem; }
.erp-input, .erp-select, .erp-textarea {
	width: 100%; padding: .6rem .9rem;
	border: 1.5px solid var(--erp-border);
	border-radius: 6px;
	font-size: .85rem; color: var(--erp-text);
	background: var(--erp-white);
	transition: border-color .18s ease, box-shadow .18s ease;
	outline: none; font-family: 'Inter', sans-serif;
}
.erp-input:focus, .erp-select:focus, .erp-textarea:focus {
	border-color: var(--erp-gold);
	box-shadow: 0 0 0 3px rgba(252,209,22,.18);
}
.erp-input-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.erp-input-group-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* === Progress & Charts === */
.erp-progress-bar { background: var(--erp-border); border-radius: 999px; height: 6px; overflow: hidden; }
.erp-progress-fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.erp-progress-fill.gold { background: var(--erp-gold); }
.erp-progress-fill.green { background: var(--erp-success); }
.erp-progress-fill.blue { background: #3B82F6; }
.erp-progress-fill.red { background: var(--erp-red); }

/* === Grid Layouts === */
.erp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.erp-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; }
.erp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.erp-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 1.25rem; }
.erp-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }

/* === Ghana Tax & Compliance Indicators === */
.erp-ghana-flag { display: flex; gap: 2px; width: 28px; height: 16px; border-radius: 2px; overflow: hidden; }
.erp-flag-red { flex: 1; background: var(--erp-red); }
.erp-flag-gold { flex: 1; background: var(--erp-gold); }
.erp-flag-green { flex: 1; background: var(--erp-green); }
.erp-compliance-chip {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .3rem .7rem;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--erp-green), #008A50);
	color: white; font-size: .7rem; font-weight: 700;
	letter-spacing: .03em;
}

/* === POS Terminal === */
.erp-pos-layout { display: grid; grid-template-columns: 1fr 380px; gap: 1.25rem; height: calc(100vh - var(--erp-header-height) - 3.5rem); }
.erp-pos-products { overflow-y: auto; }
.erp-pos-receipt { background: var(--erp-card); border-radius: var(--erp-radius-lg); border: 1px solid var(--erp-border); display: flex; flex-direction: column; overflow: hidden; }
.erp-pos-receipt-header { padding: 1rem 1.25rem; background: var(--erp-navy); color: white; }
.erp-pos-receipt-items { flex: 1; overflow-y: auto; padding: 0.75rem; }
.erp-pos-receipt-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--erp-border); background: var(--erp-bg); }
.erp-pos-item { display: flex; align-items: center; gap: .75rem; padding: .6rem; border: 1px solid var(--erp-border); border-radius: 6px; margin-bottom: .5rem; background: white; }
.erp-pos-item-name { flex: 1; font-size: .82rem; font-weight: 600; }
.erp-pos-item-qty { display: flex; align-items: center; gap: .4rem; }
.erp-pos-qty-btn { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--erp-border); background: var(--erp-bg); cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.erp-pos-total { font-size: 1.4rem; font-weight: 800; color: var(--erp-text); font-family: 'IBM Plex Mono', monospace; }
.erp-pos-tax-line { font-size: .75rem; color: var(--erp-muted); display: flex; justify-content: space-between; margin-bottom: .25rem; }

/* === Product Grid === */
.erp-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.erp-product-card {
	background: var(--erp-card); border: 1.5px solid var(--erp-border);
	border-radius: var(--erp-radius); padding: .85rem;
	cursor: pointer; transition: all .18s ease; text-align: center;
}
.erp-product-card:hover { border-color: var(--erp-gold); box-shadow: var(--erp-shadow-md); transform: translateY(-2px); }
.erp-product-icon { font-size: 1.8rem; margin-bottom: .4rem; }
.erp-product-name { font-size: .78rem; font-weight: 600; color: var(--erp-text); margin-bottom: .25rem; }
.erp-product-price { font-size: .88rem; font-weight: 800; color: var(--erp-green); font-family: 'IBM Plex Mono', monospace; }
.erp-product-stock { font-size: .65rem; color: var(--erp-muted); }

/* === Tabs === */
.erp-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--erp-border); margin-bottom: 1.5rem; }
.erp-tab {
	padding: .65rem 1.25rem;
	font-size: .82rem; font-weight: 600;
	color: var(--erp-muted); cursor: pointer;
	border-bottom: 2px solid transparent; margin-bottom: -2px;
	transition: all .18s ease; text-decoration: none;
}
.erp-tab:hover { color: var(--erp-navy); }
.erp-tab.active { color: var(--erp-navy); border-bottom-color: var(--erp-gold); }

/* === Timeline === */
.erp-timeline { position: relative; padding-left: 2rem; }
.erp-timeline::before { content: ''; position: absolute; left: .7rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--erp-border); }
.erp-timeline-item { position: relative; padding-bottom: 1.25rem; }
.erp-timeline-dot {
	position: absolute; left: -1.65rem; top: .2rem;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--erp-gold); border: 2px solid white;
	box-shadow: 0 0 0 2px var(--erp-gold);
}
.erp-timeline-dot.green { background: var(--erp-success); box-shadow: 0 0 0 2px var(--erp-success); }
.erp-timeline-dot.red { background: var(--erp-danger); box-shadow: 0 0 0 2px var(--erp-danger); }
.erp-timeline-time { font-size: .68rem; color: var(--erp-muted); margin-bottom: .2rem; }
.erp-timeline-text { font-size: .82rem; font-weight: 500; color: var(--erp-text); }

/* === Hero / Login === */
.erp-login-wrap {
	min-height: 100vh; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--erp-navy) 0%, var(--erp-navy-light) 50%, #0F2A4A 100%);
	position: relative; overflow: hidden;
}
.erp-login-wrap::before {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(circle at 20% 80%, rgba(252,209,22,.08) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(0,107,63,.08) 0%, transparent 50%);
}
.erp-login-card {
	background: white; border-radius: 16px;
	padding: 2.5rem 2rem; width: 100%; max-width: 420px;
	box-shadow: 0 25px 60px rgba(0,0,0,.35); position: relative; z-index: 1;
}

/* === Dashboard Widgets === */
.erp-activity-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--erp-border); }
.erp-activity-item:last-child { border-bottom: none; }
.erp-activity-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.erp-activity-icon.gold { background: #FEF9C3; color: var(--erp-gold-dark); }
.erp-activity-icon.green { background: #D1FAE5; color: var(--erp-success); }
.erp-activity-icon.blue { background: #DBEAFE; color: #2563EB; }
.erp-activity-icon.red { background: #FEE2E2; color: var(--erp-danger); }
.erp-activity-text { flex: 1; }
.erp-activity-title { font-size: .82rem; font-weight: 600; color: var(--erp-text); margin-bottom: .1rem; }
.erp-activity-meta { font-size: .72rem; color: var(--erp-muted); }
.erp-activity-amount { font-size: .88rem; font-weight: 700; font-family: 'IBM Plex Mono', monospace; color: var(--erp-success); }

/* === Inventory Level Bars === */
.erp-inv-item { display: flex; align-items: center; gap: .85rem; padding: .6rem 0; border-bottom: 1px solid var(--erp-border); }
.erp-inv-item:last-child { border-bottom: none; }
.erp-inv-name { flex: 1; font-size: .82rem; font-weight: 500; color: var(--erp-text); }
.erp-inv-bar { flex: 2; }
.erp-inv-qty { font-size: .78rem; font-weight: 700; color: var(--erp-text); font-family: 'IBM Plex Mono', monospace; min-width: 40px; text-align: right; }

/* === HR Module === */
.erp-employee-card {
	background: var(--erp-card); border-radius: var(--erp-radius-lg);
	border: 1px solid var(--erp-border); padding: 1.25rem;
	text-align: center; box-shadow: var(--erp-shadow);
	transition: all .2s ease;
}
.erp-employee-card:hover { box-shadow: var(--erp-shadow-md); transform: translateY(-2px); }
.erp-emp-avatar {
	width: 60px; height: 60px; border-radius: 50%; margin: 0 auto .75rem;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.4rem; font-weight: 800; color: white;
}
.erp-emp-name { font-size: .9rem; font-weight: 700; color: var(--erp-text); margin-bottom: .2rem; }
.erp-emp-role { font-size: .75rem; color: var(--erp-muted); margin-bottom: .75rem; }
.erp-emp-stats { display: flex; justify-content: space-around; border-top: 1px solid var(--erp-border); padding-top: .75rem; }
.erp-emp-stat-val { font-size: .88rem; font-weight: 700; color: var(--erp-text); }
.erp-emp-stat-lbl { font-size: .65rem; color: var(--erp-muted); text-transform: uppercase; }

/* === Payslip === */
.erp-payslip {
	background: white; border: 2px solid var(--erp-border);
	border-radius: var(--erp-radius-lg); overflow: hidden;
}
.erp-payslip-header {
	background: linear-gradient(to right, var(--erp-navy), var(--erp-navy-mid));
	padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center;
}
.erp-payslip-company { color: white; }
.erp-payslip-company-name { font-size: 1rem; font-weight: 800; }
.erp-payslip-period { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: .2rem; }
.erp-payslip-body { padding: 1.25rem 1.5rem; }
.erp-payslip-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px dashed var(--erp-border); font-size: .85rem; }
.erp-payslip-row:last-child { border-bottom: none; }
.erp-payslip-row.total { font-weight: 800; font-size: .95rem; color: var(--erp-navy); border-top: 2px solid var(--erp-navy); border-bottom: none; padding-top: .75rem; margin-top: .25rem; }
.erp-payslip-row.deduction .amount { color: var(--erp-danger); }
.erp-payslip-row .label { color: var(--erp-muted); }
.erp-payslip-row .amount { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }

/* === Accounting Module === */
.erp-ledger-dr { color: var(--erp-danger); font-weight: 600; }
.erp-ledger-cr { color: var(--erp-success); font-weight: 600; }
.erp-account-code { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: var(--erp-muted); }

/* === Reports === */
.erp-chart-placeholder {
	width: 100%; height: 200px;
	background: linear-gradient(to bottom right, var(--erp-bg), var(--erp-border));
	border-radius: var(--erp-radius);
	display: flex; align-items: center; justify-content: center;
	color: var(--erp-muted); font-size: .82rem;
	position: relative; overflow: hidden;
}
.erp-bar-chart { display: flex; align-items: flex-end; gap: .5rem; height: 160px; padding: 0 1rem; }
.erp-bar { flex: 1; border-radius: 4px 4px 0 0; transition: opacity .2s; }
.erp-bar:hover { opacity: .85; }
.erp-bar-label { font-size: .65rem; color: var(--erp-muted); text-align: center; margin-top: .35rem; }

/* === Search Bar === */
.erp-search {
	display: flex; align-items: center; gap: .5rem;
	background: var(--erp-bg); border: 1.5px solid var(--erp-border);
	border-radius: 8px; padding: .45rem .85rem;
	transition: border-color .18s ease;
}
.erp-search:focus-within { border-color: var(--erp-gold); background: white; }
.erp-search input { border: none; background: transparent; outline: none; font-size: .85rem; color: var(--erp-text); width: 200px; }

/* === Alert Banners === */
.erp-alert {
	display: flex; align-items: center; gap: .75rem;
	padding: .85rem 1.25rem; border-radius: 8px;
	font-size: .82rem; font-weight: 500; margin-bottom: 1rem;
}
.erp-alert.warning { background: #FEF3C7; color: #92400E; border-left: 4px solid var(--erp-warning); }
.erp-alert.danger { background: #FEE2E2; color: #991B1B; border-left: 4px solid var(--erp-danger); }
.erp-alert.success { background: #D1FAE5; color: #065F46; border-left: 4px solid var(--erp-success); }
.erp-alert.info { background: #DBEAFE; color: #1E40AF; border-left: 4px solid #3B82F6; }

/* === Ghana-Specific Compliance === */
.erp-ghana-vat-summary {
	background: linear-gradient(135deg, var(--erp-green), #008A50);
	color: white; border-radius: var(--erp-radius-lg); padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
}
.erp-ghana-vat-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .8; margin-bottom: .5rem; }
.erp-ghana-vat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.erp-ghana-vat-item .vat-label { font-size: .68rem; opacity: .75; margin-bottom: .2rem; }
.erp-ghana-vat-item .vat-rate { font-size: 1.1rem; font-weight: 800; }
.erp-ghana-vat-item .vat-desc { font-size: .65rem; opacity: .7; }

/* === Footer === */
.erp-footer { background: var(--erp-navy); color: rgba(255,255,255,.5); text-align: center; padding: .85rem; font-size: .72rem; }

/* ================================================================
   DESKTOP-FIRST LAYOUT — Fixed 260px sidebar down to tablet width.
   Below 960px the sidebar collapses to icon-only (see the sidebar
   collapse breakpoints further down) so the app stays usable on
   tablet/phone without horizontal scrolling or content overlap.
   ================================================================ */

/* Enforce minimum viewport width only down to the tablet breakpoint —
   below that the sidebar-collapse rules take over instead of forcing scroll. */
@media (min-width: 960px) {
	.erp-layout { min-width: 960px; }
	.erp-sidebar { min-width: var(--erp-sidebar-width); }
	.erp-main-wrap { min-width: 700px; }
}

/* Table always scrolls horizontally if content overflows */
.erp-table-wrap { overflow-x: auto; }
.erp-table { min-width: 600px; }

/* === Sidebar Button Nav Items === */
.erp-sidebar .erp-nav-item.wp-block-button { display: block; }
.erp-sidebar .erp-nav-item.wp-block-button .wp-block-button__link,
.erp-sidebar .erp-nav-item.wp-block-button .wp-element-button {
	display: flex !important;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .55rem 1.25rem !important;
	background: transparent !important;
	color: rgba(255,255,255,.65) !important;
	font-size: .82rem !important;
	font-weight: 500 !important;
	border: none !important;
	border-left: 3px solid transparent !important;
	border-radius: 0 !important;
	text-decoration: none;
	transition: all .18s ease;
	box-shadow: none !important;
	text-align: left;
	justify-content: flex-start;
}
.erp-sidebar .erp-nav-item.wp-block-button .wp-element-button:hover {
	background: var(--erp-navy-mid) !important;
	color: var(--erp-white) !important;
	border-left-color: var(--erp-gold) !important;
}
.erp-sidebar .erp-nav-item.wp-block-button .wp-element-button:focus {
	outline: 2px solid var(--erp-gold);
	outline-offset: -2px;
}
.erp-sidebar .wp-block-buttons { display: flex !important; flex-direction: column !important; gap: 0 !important; }

/* === Nav Link Anchors === */
.erp-nav-links-manual a.erp-nav-item,
.erp-nav-links-manual p.erp-nav-item {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem 1.25rem;
	color: rgba(255,255,255,.65);
	font-size: .82rem; font-weight: 500;
	transition: all .18s ease;
	border-left: 3px solid transparent;
	text-decoration: none;
	cursor: pointer;
}
.erp-nav-links-manual a.erp-nav-item:hover,
.erp-nav-links-manual p.erp-nav-item:hover {
	background: var(--erp-navy-mid);
	color: var(--erp-white);
	border-left-color: var(--erp-gold);
}

/* === ERP App body === */
body.erp-app .wp-site-blocks > * { max-width: none !important; }

/* === POS layout height fix === */
.erp-pos-layout { min-height: 520px; }
.erp-pos-receipt { min-height: 520px; }

/* === Progress fill width utility classes === */
.erp-progress-fill { min-height: 6px; }
.erp-progress-fill.blue { background: #3B82F6; }

/* === Card hover polish === */
.erp-card { transition: box-shadow .2s ease; }
.erp-card:hover { box-shadow: var(--erp-shadow-md); }

/* === ERP layout full height fix === */
.erp-layout { align-items: stretch; }
.erp-main-wrap { background: var(--erp-bg); min-height: 100vh; }

/* ================================================================
   POS — Out-of-stock card state
   ================================================================ */
.pos-product-card.out-of-stock {
	opacity: 0.42;
	cursor: not-allowed !important;
	border-color: rgba(239,68,68,0.3) !important;
}
.pos-product-card.out-of-stock .pos-product-price { color: #ef4444; }
.pos-product-card.out-of-stock::after {
	content: 'OUT OF STOCK';
	display: block;
	margin-top: 4px;
	font-size: .62rem;
	font-weight: 800;
	color: #ef4444;
	letter-spacing: .06em;
}

/* ================================================================
   RECEIPT PRINT — Only #erp-receipt-print renders when printing
   ================================================================ */
@media print {
	/* Hide everything except the receipt or label being printed */
	body > *:not(#erp-receipt-print):not(#erp-label-print) { display: none !important; }
	#erp-label-print { display: block !important; }
	#erp-label-print .erp-label {
		width: 50mm; height: 30mm; padding: 2mm; box-sizing: border-box; text-align: center;
		font-family: 'IBM Plex Mono', monospace; color: #000;
	}
	#erp-label-print .erp-label-name { font-size: 8pt; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	#erp-label-print .erp-label-bars { height: 12mm; display: flex; align-items: stretch; justify-content: center; margin: 1mm 0; }
	#erp-label-print .erp-label-code { font-size: 8pt; letter-spacing: 1px; }
	#erp-label-print .erp-label-price { font-size: 11pt; font-weight: 900; margin-top: 1mm; }
	#erp-receipt-print {
		display: block !important;
		position: fixed;
		inset: 0;
		background: #fff;
		color: #000;
		font-family: 'Courier New', monospace;
		font-size: 11pt;
		padding: 8mm;
		width: 80mm;  /* Standard 80mm thermal receipt */
		margin: 0 auto;
		z-index: 9999999;
	}
	#erp-receipt-print h2 { font-size: 13pt; font-weight: 900; text-align: center; margin: 0 0 2mm; }
	#erp-receipt-print .rcp-meta { text-align: center; font-size: 9pt; color: #444; border-bottom: 1px dashed #000; padding-bottom: 3mm; margin-bottom: 3mm; }
	#erp-receipt-print table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
	#erp-receipt-print th { text-align: left; font-weight: 700; border-bottom: 1px solid #000; padding: 1mm 0; }
	#erp-receipt-print td { padding: 1mm 0; vertical-align: top; }
	#erp-receipt-print td:last-child { text-align: right; }
	#erp-receipt-print .rcp-totals { border-top: 1px dashed #000; margin-top: 2mm; padding-top: 2mm; }
	#erp-receipt-print .rcp-total-row { display: flex; justify-content: space-between; font-size: 9.5pt; margin: 0.8mm 0; }
	#erp-receipt-print .rcp-grand { font-size: 12pt; font-weight: 900; border-top: 2px solid #000; padding-top: 2mm; margin-top: 1mm; }
	#erp-receipt-print .rcp-footer { text-align: center; font-size: 8.5pt; color: #555; margin-top: 4mm; border-top: 1px dashed #000; padding-top: 3mm; }
	/* Force page break avoidance */
	* { page-break-inside: avoid; }
	@page { size: 80mm auto; margin: 0; }
}
/* Hidden print container (visible only when printing) */
#erp-receipt-print { display: none; }
#erp-label-print { display: none; }

/* === Sidebar nav section spacing === */
.erp-nav .erp-nav-section { margin-top: 0.25rem; }

/* === Payslip body padding === */
.erp-payslip-body { padding: 1.25rem 1.5rem; }

/* === Timeline indented === */
.erp-timeline-item .erp-timeline-dot { top: 4px; }

/* === ERP footer clear === */
.erp-footer { flex-shrink: 0; }

/* === Expiry date status colours === */
.erp-expiry-critical { color: var(--erp-danger); font-weight: 700; }
.erp-expiry-warning  { color: var(--erp-warning); font-weight: 700; }
.erp-expiry-good     { color: var(--erp-success); font-weight: 600; }

/* === Danger button === */
.erp-btn-danger { background: var(--erp-danger); color: #ffffff; }
.erp-btn-danger:hover { background: #DC2626; color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,68,68,.35); }

/* === Login page override (body.login) === */
body.login .wp-block-group { display: block; }

/* === Spoilage / Refund table Days-left cell === */
.erp-table td[style*="color:#EF4444"] { font-family: 'IBM Plex Mono', monospace; }
.erp-table td[style*="color:#F59E0B"] { font-family: 'IBM Plex Mono', monospace; }
.erp-table td[style*="color:#10B981"] { font-family: 'IBM Plex Mono', monospace; }

/* Old modal block removed — new system above in ERP MODAL SYSTEM section */

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */
#erp-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 10000;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: .875rem;
	font-weight: 600;
	max-width: 360px;
	box-shadow: 0 8px 24px rgba(0,0,0,.4);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}
.erp-toast-success { background: #0d3d1a; border: 1px solid #22c55e; color: #86efac; }
.erp-toast-error   { background: #3d0d0d; border: 1px solid #ef4444; color: #fca5a5; }
.erp-toast-warning { background: #3d2d00; border: 1px solid #f59e0b; color: #fde68a; }

/* ================================================================
   POS PRODUCT GRID (dynamic)
   ================================================================ */
#pos-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
	margin-top: 12px;
}
.pos-product-card {
	background: #1a2942;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 8px;
	padding: 12px;
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .15s;
	text-align: center;
}
.pos-product-card:hover { border-color: var(--gold); background: #213450; transform: translateY(-2px); }
.pos-product-name  { font-weight: 700; font-size: .82rem; color: #fff; margin-bottom: 4px; }
.pos-product-sku   { font-size: .72rem; color: rgba(255,255,255,.45); font-family: 'IBM Plex Mono', monospace; }
.pos-product-price { font-size: .95rem; color: var(--gold); font-weight: 700; margin: 6px 0 2px; }
.pos-product-stock { font-size: .72rem; color: rgba(255,255,255,.5); }

/* ================================================================
   DANGER BUTTON (purge / delete)
   ================================================================ */
.erp-btn-danger {
	background: #ef4444;
	color: #fff;
	border: none;
	box-shadow: 0 2px 8px rgba(239,68,68,.3);
}
.erp-btn-danger:hover { background: #dc2626; transform: translateY(-1px); }

/* ================================================================
   SETTINGS — PURGE PANEL
   ================================================================ */
.erp-purge-panel {
	background: rgba(239,68,68,.07);
	border: 1px solid rgba(239,68,68,.25);
	border-radius: 10px;
	padding: 20px;
	margin-top: 1.5rem;
}
.erp-purge-title {
	color: #ef4444;
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 6px;
}
.erp-purge-desc {
	color: rgba(255,255,255,.65);
	font-size: .85rem;
	margin: 0 0 16px;
}
.erp-purge-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.erp-row-danger td { background: rgba(239,68,68,.06) !important; }

/* ================================================================
   PAGE LAYOUT COMPONENTS (erp-page-header, erp-toolbar, erp-kpi-grid, erp-table, erp-card)
   ================================================================ */
.erp-page-header { margin-bottom:1.25rem; }
.erp-page-title  { font-size:1.5rem; font-weight:800; color:#fff; margin:0 0 .25rem; }
.erp-page-sub    { font-size:.84rem; color:rgba(255,255,255,.5); margin:0; }

.erp-toolbar {
	display:flex; flex-wrap:wrap; gap:.6rem;
	align-items:center; margin-bottom:1rem;
	padding:.75rem 1rem;
	background:rgba(255,255,255,.03);
	border:1px solid rgba(255,255,255,.07);
	border-radius:10px;
}

.erp-kpi-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
	gap:.85rem;
}
/* Fixed-column dashboard KPI grids */
.erp-kpi-4col { grid-template-columns:repeat(4,1fr); }
.erp-kpi-5col { grid-template-columns:repeat(5,1fr); }
/* Warning-tinted KPI card */
.erp-kpi-warning-card {
	border-color:rgba(245,158,11,.2);
	background:rgba(245,158,11,.04);
}
.erp-kpi-card {
	background:#132240;
	border:1px solid rgba(255,255,255,.08);
	border-radius:10px;
	padding:1rem 1.1rem;
}
.erp-kpi-label  { font-size:.75rem; color:rgba(255,255,255,.5); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.35rem; }
.erp-kpi-value  { font-size:1.35rem; font-weight:800; color:#fff; font-family:"IBM Plex Mono",monospace; }
.erp-kpi-gold   { color:#FCD116; }
.erp-kpi-danger { color:#ef4444; }
.erp-kpi-warning{ color:#f59e0b; }

.erp-kpi-mini {
	background:#132240;
	border:1px solid rgba(255,255,255,.08);
	border-radius:8px;
	padding:.7rem .9rem;
	display:flex;
	flex-direction:column;
	gap:.25rem;
}
.erp-kpi-mini-label { font-size:.7rem; color:rgba(255,255,255,.5); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.erp-kpi-mini-value { font-size:1.15rem; font-weight:800; color:#FCD116; font-family:"IBM Plex Mono",monospace; }

.erp-card {
	background:#132240;
	border:1px solid rgba(255,255,255,.08);
	border-radius:10px;
	padding:1.25rem;
}

.erp-table {
	width:100%; border-collapse:collapse; font-size:.84rem;
}
.erp-table table.has-fixed-layout { table-layout:auto; }
.erp-table th {
	text-align:left; padding:10px 8px;
	color:#FCD116; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
	border-bottom:1px solid rgba(252,209,22,.2);
	white-space:nowrap;
}
.erp-table td  { padding:9px 8px; border-bottom:1px solid rgba(255,255,255,.05); color:rgba(255,255,255,.85); vertical-align:middle; }
.erp-table tr:last-child td { border-bottom:none; }
.erp-table tr:hover td { background:rgba(255,255,255,.03); }
.erp-empty-row { text-align:center !important; padding:20px !important; color:rgba(255,255,255,.35) !important; font-style:italic; }

/* POS Layout */
.erp-pos-layout  { display:grid; grid-template-columns:1fr 360px; gap:1.25rem; align-items:start; }
.erp-pos-cart    { position:sticky; top:1rem; }
.erp-pos-totals  { border-top:1px solid rgba(255,255,255,.08); padding-top:.75rem; }
.erp-pos-total-row { display:flex; justify-content:space-between; font-size:.85rem; color:rgba(255,255,255,.7); margin:.35rem 0; }
.erp-pos-grand-total { font-size:1.15rem; font-weight:800; color:#FCD116; border-top:1px solid rgba(252,209,22,.3); padding-top:.5rem; margin-top:.35rem; }

/* Quick links (dashboard) */
.erp-quick-links { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:.75rem; margin-top:1.5rem; }
.erp-quick-link  { display:flex; align-items:center; justify-content:center; padding:.85rem 1rem; border-radius:10px; font-weight:700; font-size:.84rem; color:rgba(255,255,255,.85); text-decoration:none; gap:.4rem; transition:background .15s,color .15s,transform .12s; }
.erp-quick-link:hover { background:rgba(252,209,22,.12); color:#FCD116; transform:translateY(-2px); }

/* Role cards */
.erp-role-card   { text-align:center; padding:1.5rem 1rem; }
.erp-role-icon   { font-size:2rem; margin-bottom:.5rem; }
.erp-role-name   { font-size:1rem; font-weight:800; color:#fff; margin-bottom:.3rem; }
.erp-role-desc   { font-size:.78rem; color:rgba(255,255,255,.5); margin-bottom:.75rem; }
.erp-role-perms  { display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center; }

/* ================================================================
   DARK-THEME OVERRIDES — final authority
   ================================================================ */

/* wp-block-button nav items in sidebar */
.erp-sidebar .wp-block-button__link {
	display:block; width:100%;
	padding:.55rem 1.25rem;
	font-size:.82rem; font-weight:500;
	color:rgba(255,255,255,.65) !important;
	background:transparent !important;
	border-radius:0 !important;
	text-decoration:none;
	transition:background .15s, color .15s, border-left-color .15s;
	border-left:3px solid transparent;
}
.erp-sidebar .wp-block-button__link:hover,
.erp-sidebar .erp-nav-item.active .wp-block-button__link {
	background:rgba(255,255,255,.06) !important;
	color:#fff !important;
	border-left-color:#FCD116 !important;
}

/* Post content wrapper — must be dark, must fill full width */
.erp-content .wp-block-post-content,
.erp-content .entry-content,
.erp-content .wp-block-group {
	background:transparent !important;
	color:#fff;
}
/* Override WordPress layout constraints — ERP content fills 100% */
.erp-content .is-layout-constrained > *,
.erp-content .is-layout-constrained > :not(.alignwide):not(.alignfull) {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.erp-content .wp-block-post-content.is-layout-constrained > *,
.erp-content .wp-block-post-content.is-layout-constrained > :not(.alignwide):not(.alignfull) {
	max-width: 100% !important;
}
.erp-content p { color:rgba(255,255,255,.65); }
.erp-content h1,.erp-content h2,.erp-content h3 { color:#fff; }

/* Toolbar buttons inside wp:html blocks */
.erp-toolbar button.erp-btn {
	cursor:pointer;
}
/* All block-output table text readable */
.erp-table th { color:#FCD116 !important; }
.erp-table td { color:rgba(255,255,255,.85) !important; }
.erp-table td strong { color:#fff !important; }
.erp-table td small  { color:rgba(255,255,255,.45) !important; }

/* ================================================================
   LAYOUT HELPERS — grids, KPI cards, toolbars, POS, etc.
   ================================================================ */

/* Two-column grid */
.erp-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
/* Three-column grid */
.erp-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }

/* KPI grid (wide cards) */
.erp-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.erp-kpi-card {
	background:#132240; border:1px solid rgba(255,255,255,.08);
	border-radius:12px; padding:1.1rem 1.35rem;
	display:flex; flex-direction:column; gap:.35rem;
	position:relative; overflow:hidden;
}
.erp-kpi-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--erp-gold); }
.erp-kpi-card.green::before  { background:var(--erp-success); }
.erp-kpi-card.blue::before   { background:#3b82f6; }
.erp-kpi-card.red::before    { background:var(--erp-danger); }
.erp-kpi-card.purple::before { background:#8b5cf6; }
.erp-kpi-label { font-size:.7rem; font-weight:700; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.07em; }
.erp-kpi-value { font-size:1.55rem; font-weight:800; color:#fff; font-family:'IBM Plex Mono',monospace; line-height:1; }
.erp-kpi-sub   { font-size:.78rem; color:rgba(255,255,255,.4); }

/* Toolbar */
.erp-toolbar {
	display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
	padding:.85rem 0; margin-bottom:1rem;
	border-bottom:1px solid rgba(255,255,255,.07);
}
.erp-toolbar-right { margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }

/* POS product grid */
#pos-product-grid {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	gap:.75rem;
	max-height:65vh;
	overflow-y:auto;
	padding:.5rem;
	scrollbar-width:thin;
	scrollbar-color:rgba(252,209,22,.3) transparent;
}
.pos-product-card {
	background:#132240;
	border:1.5px solid rgba(255,255,255,.08);
	border-radius:10px;
	padding:1rem .85rem;
	cursor:pointer;
	transition:border-color .15s,background .15s,transform .1s;
	text-align:left;
}
.pos-product-card:hover {
	border-color:#FCD116;
	background:#1A2942;
	transform:translateY(-2px);
}
.pos-product-card:active { transform:scale(.97); }
.pos-product-name  { font-weight:700; font-size:.88rem; color:#fff; margin-bottom:.2rem; line-height:1.3; }
.pos-product-sku   { font-size:.72rem; color:rgba(255,255,255,.4); font-family:'IBM Plex Mono',monospace; margin-bottom:.35rem; }
.pos-product-price { font-size:1.05rem; font-weight:800; color:#FCD116; font-family:'IBM Plex Mono',monospace; }
.pos-product-stock { font-size:.72rem; color:rgba(255,255,255,.45); margin-top:.2rem; }
.pos-product-card.out-of-stock {
	opacity:.45; cursor:not-allowed;
}
.pos-product-card.out-of-stock .pos-product-stock { color:#ef4444; }

/* POS layout (products left, cart right) — PC only, no collapse */
.erp-pos-layout { display:grid; grid-template-columns:1fr 380px; gap:1.25rem; align-items:start; }
.erp-pos-cart { position:sticky; top:1rem; }

/* POS totals block */
.erp-pos-totals { border-top:1px solid rgba(255,255,255,.08); padding-top:.75rem; margin-top:.5rem; }
.erp-pos-total-row {
	display:flex; justify-content:space-between; align-items:center;
	font-size:.85rem; color:rgba(255,255,255,.7); margin:.3rem 0;
}
.erp-pos-total-row strong { color:#fff; font-family:'IBM Plex Mono',monospace; }
.erp-pos-grand-total {
	display:flex; justify-content:space-between; align-items:center;
	font-size:1.2rem; font-weight:800; color:#FCD116;
	border-top:1px solid rgba(252,209,22,.3);
	padding-top:.6rem; margin-top:.4rem;
	font-family:'IBM Plex Mono',monospace;
}

/* Quick links grid (dashboard) */
.erp-quick-links {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	gap:.75rem; margin-top:1.25rem;
}
.erp-quick-link {
	display:flex; align-items:center; justify-content:center; gap:.4rem;
	padding:.85rem 1rem; border-radius:10px;
	background:#132240; border:1px solid rgba(255,255,255,.08);
	font-weight:700; font-size:.84rem; color:rgba(255,255,255,.75);
	text-decoration:none; cursor:pointer;
	transition:background .15s,color .15s,border-color .15s,transform .12s;
}
.erp-quick-link:hover { background:rgba(252,209,22,.1); color:#FCD116; border-color:rgba(252,209,22,.3); transform:translateY(-2px); }

/* Card header/body tweaks */
.erp-card-header {
	display:flex; align-items:center; justify-content:space-between;
	padding:.85rem 1.1rem;
	border-bottom:1px solid rgba(255,255,255,.07);
	background:linear-gradient(to right,rgba(255,255,255,.04),transparent);
}
.erp-card-title { font-size:.9rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.5rem; }
.erp-card-body  { padding:1rem 1.1rem; }

/* Input group */
.erp-input-group { display:flex; gap:.65rem; flex-wrap:wrap; align-items:center; }

/* Breadcrumb / section label */
.erp-section-label {
	font-size:.7rem; font-weight:700; color:rgba(255,255,255,.35);
	text-transform:uppercase; letter-spacing:.1em;
	margin-bottom:.6rem;
}

/* PC-only: no responsive grid collapses */

/* ── ERP form inputs (standalone, not inside modal) ─── */
.erp-input {
	width: 100%;
	background: #0F1F3D;
	color: #fff;
	border: 1.5px solid rgba(255,255,255,.12);
	border-radius: 7px;
	padding: 9px 12px;
	font-size: .88rem;
	font-family: inherit;
	outline: none;
	transition: border-color .18s, box-shadow .18s;
}
.erp-input:focus {
	border-color: #FCD116;
	box-shadow: 0 0 0 3px rgba(252,209,22,.12);
}
.erp-input::placeholder { color: rgba(255,255,255,.28); }
.erp-input[type="checkbox"] { width: auto; accent-color: #FCD116; }

/* Settings page two-column grid */
.settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

/* Logout button */
#btn-logout:hover { background: rgba(239,68,68,.4) !important; }

/* Login page: hide WP branding */
.login #backtoblog, .login #nav, .login #login_footer { display: none !important; }

/* ── Disabled button state ───────────────────────── */
.erp-btn:disabled,
.erp-btn[disabled] {
	opacity: .5;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
}

/* ── Modal scroll on short screens ──────────────── */
.erp-modal {
	max-height: 90vh;
	display: flex;
	flex-direction: column;
}
.erp-modal-body {
	overflow-y: auto;
	flex: 1;
}
/* PC: modal always centered at max-width:580px */

/* ── Active nav item highlight ────────────────── */
.erp-nav-item.active,
.erp-nav-item[aria-current="page"] {
	background: rgba(252,209,22,.15) !important;
	color: #FCD116 !important;
	border-left: 3px solid #FCD116;
	padding-left: calc(1rem - 3px);
}

/* ── User management stat cards ──────────────── */
.erp-stat-card.blue   { border-left-color: #3b82f6 !important; }
.erp-stat-card.purple { border-left-color: #8b5cf6 !important; }

/* ── Settings page card body padding ───────────── */
.erp-card-body { padding: 1.1rem; }

/* ── Table action buttons (small inside tbody) ─── */
.erp-table td .erp-btn {
	font-size: .72rem;
	padding: 3px 9px;
}

/* ── Page sub-heading ────────────────────── */
.erp-page-subtitle,
.erp-page-sub {
	color: rgba(255,255,255,.45);
	font-size: .85rem;
	margin: 0;
}

/* ── Empty table row message ───────────────── */
.erp-empty-row {
	text-align: center;
	padding: 24px;
	color: rgba(255,255,255,.35);
	font-size: .86rem;
}

/* ── Scrollable tables on mobile ────────────── */
.erp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Dashboard live pulse dot ────────────── */
@keyframes dash-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: .4; transform: scale(.7); }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================================================================
   POS BARCODE SCAN BAR + SALE-TYPE TOGGLE
   ================================================================ */
.erp-pos-barcode-bar {
	display: flex; align-items: center; gap: .65rem; margin-top: .1rem;
	padding: .6rem .8rem; background: rgba(252,209,22,.06);
	border: 1.5px solid rgba(252,209,22,.3); border-radius: 10px; flex-wrap: wrap;
}
.erp-pos-barcode-icon { font-size: 1rem; color: #FCD116; flex-shrink: 0; }
.erp-pos-barcode-input {
	flex: 1; min-width: 200px; box-sizing: border-box; background: #132240; color: #fff;
	border: 1.5px solid rgba(252,209,22,.25); border-radius: 7px; padding: 8px 12px;
	font-size: .88rem; font-family: 'IBM Plex Mono', monospace; outline: none;
	transition: border-color .18s, box-shadow .18s;
}
.erp-pos-barcode-input:focus { border-color: #FCD116; box-shadow: 0 0 0 3px rgba(252,209,22,.15); }
.erp-pos-barcode-input::placeholder { color: rgba(255,255,255,.35); font-family: inherit; }
.erp-pos-sale-type-toggle {
	display: flex; background: #0F1F3D; border-radius: 8px; padding: 3px; flex-shrink: 0;
}
.erp-pos-toggle-btn {
	padding: .4rem .9rem; font-size: .8rem; font-weight: 700; border-radius: 6px; cursor: pointer;
	color: rgba(255,255,255,.55); transition: background .15s, color .15s;
}
.erp-pos-toggle-btn.active { background: #FCD116; color: #0a1628; }
.erp-pos-toggle-btn:not(.active):hover { color: #fff; }

/* ================================================================
   POS PAYMENT BUTTON GRIDS
   ================================================================ */
.erp-pos-pay-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.erp-pos-pay-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
.erp-pos-pay-grid .erp-btn, .erp-pos-pay-grid-2 .erp-btn { text-align: center; cursor: pointer; }

/* ================================================================
   POS CUSTOMER / LOYALTY CHIP
   ================================================================ */
.erp-pos-cust-chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .55rem .7rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  margin-bottom: .85rem;
  font-size: .8rem;
}
.erp-pos-cust-empty { color: rgba(255,255,255,.4); }
.erp-pos-cust-name { color: #fff; font-weight: 700; }
.erp-pos-cust-pts { color: #FCD116; font-weight: 800; background: rgba(252,209,22,.1); border-radius: 8px; padding: 2px 8px; }
.erp-btn-sm { font-size: .68rem !important; padding: 3px 9px !important; }
.erp-pos-cust-list { max-height: 340px; overflow-y: auto; }
.erp-pos-cust-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s;
}
.erp-pos-cust-row:hover { background: rgba(252,209,22,.08); }
.erp-pos-cust-row span { color: rgba(255,255,255,.5); font-size: .78rem; }

/* ================================================================
   POS SEARCH & FILTER BAR
   ================================================================ */
.erp-pos-search-bar {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-top: .85rem;
	padding: .6rem .8rem;
	background: #0F1F3D;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 10px;
	flex-wrap: wrap;
}
.erp-pos-search-wrap {
	position: relative;
	flex: 1;
	min-width: 200px;
}
.erp-pos-search-icon {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: .9rem;
	pointer-events: none;
	color: rgba(255,255,255,.4);
}
.erp-pos-search-input {
	width: 100%;
	box-sizing: border-box;
	background: #132240;
	color: #fff;
	border: 1.5px solid rgba(255,255,255,.12);
	border-radius: 7px;
	padding: 8px 32px 8px 32px;
	font-size: .88rem;
	font-family: inherit;
	outline: none;
	transition: border-color .18s, box-shadow .18s;
}
.erp-pos-search-input:focus {
	border-color: #FCD116;
	box-shadow: 0 0 0 3px rgba(252,209,22,.1);
}
.erp-pos-search-input::placeholder { color: rgba(255,255,255,.3); }
.erp-pos-search-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: rgba(255,255,255,.35);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 3px;
	display: none;
}
.erp-pos-search-clear.visible { display: block; }
.erp-pos-search-clear:hover { color: #ef4444; }
.erp-pos-cat-select {
	background: #132240;
	color: #fff;
	border: 1.5px solid rgba(255,255,255,.12);
	border-radius: 7px;
	padding: 8px 10px;
	font-size: .84rem;
	font-family: inherit;
	outline: none;
	cursor: pointer;
	transition: border-color .18s;
	min-width: 150px;
}
.erp-pos-cat-select:focus { border-color: #FCD116; }
.erp-pos-search-count {
	color: rgba(255,255,255,.4);
	font-size: .78rem;
	white-space: nowrap;
	font-style: italic;
}
/* Highlight matched text in search results */
.pos-product-card .pos-match-highlight {
	background: rgba(252,209,22,.25);
	color: #FCD116;
	border-radius: 2px;
	padding: 0 1px;
}
/* No-results message in grid */
.erp-pos-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 20px;
	color: rgba(255,255,255,.3);
	font-style: italic;
	font-size: .9rem;
}

/* ================================================================
   USER PERMISSIONS TABLE
   ================================================================ */
.erp-perm-table-wrap {
	overflow-x: auto;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.07);
}
.erp-perm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .83rem;
	min-width: 700px;
}
.erp-perm-table th {
	padding: 10px 12px;
	text-align: center;
	background: #0A1628;
	border-bottom: 1px solid rgba(255,255,255,.1);
	white-space: nowrap;
	color: rgba(255,255,255,.7);
}
.erp-perm-table th.erp-perm-module-col { text-align: left; }
.erp-perm-table td {
	padding: 9px 12px;
	border-bottom: 1px solid rgba(255,255,255,.05);
	text-align: center;
	vertical-align: middle;
}
.erp-perm-table td.erp-perm-module-name {
	text-align: left;
	font-weight: 600;
	color: rgba(255,255,255,.8);
	white-space: nowrap;
}
.erp-perm-table td.erp-perm-module-name span {
	display: block;
	font-size: .73rem;
	font-weight: 400;
	color: rgba(255,255,255,.35);
	margin-top: 1px;
}
.erp-perm-table tr:last-child td { border-bottom: none; }
.erp-perm-table tr:hover td { background: rgba(255,255,255,.02); }
/* Permission checkboxes */
.erp-perm-cb {
	width: 17px;
	height: 17px;
	accent-color: #FCD116;
	cursor: pointer;
}
.erp-perm-cb:disabled { opacity: .4; cursor: not-allowed; }
/* Role badge labels in table header */
.erp-role-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 12px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
}
.erp-role-super     { background: rgba(252,209,22,.2); color: #FCD116; }
.erp-role-manager   { background: rgba(0,107,63,.25);  color: #4ade80; }
.erp-role-cashier   { background: rgba(59,130,246,.2); color: #93c5fd; }
.erp-role-accountant{ background: rgba(168,85,247,.2); color: #d8b4fe; }
.erp-role-hr        { background: rgba(249,115,22,.2); color: #fdba74; }
.erp-role-warehouse { background: rgba(20,184,166,.2); color: #5eead4; }
/* Super-admin row — always checked, locked */
.erp-perm-table tr.erp-perm-super-row td { background: rgba(252,209,22,.03); }

/* ================================================================
   DASHBOARD v2 — Executive Command Center
   ================================================================ */

/* Hero block */
.dash-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  background: linear-gradient(135deg, #0d1f3c 0%, #0a1628 60%, #0f2340 100%);
  border: 1px solid rgba(252,209,22,.15);
  border-radius: 16px;
  padding: 2rem 2.25rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.dash-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(252,209,22,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Hero left */
.dash-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}
.dash-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: dash-pulse 2s ease-in-out infinite;
}
.dash-hero-eyebrow #dash-live-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #22c55e;
}
.dash-hero-role {
  margin-left: auto;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(252,209,22,.15);
  color: #FCD116;
  border: 1px solid rgba(252,209,22,.25);
  letter-spacing: .03em;
}
.dash-hero-biz {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
  margin: 0 0 1rem;
  font-weight: 500;
}
.dash-hero-rev-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(252,209,22,.7);
  margin-bottom: .3rem;
}
.dash-hero-rev-value {
  display: block;
  font-size: 2.8rem;
  font-weight: 900;
  color: #FCD116;
  line-height: 1;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: -.02em;
  margin-bottom: .35rem;
}
.dash-hero-rev-sub {
  display: block;
  font-size: .8rem;
  color: rgba(255,255,255,.45);
}

/* Hero pills (Today / YTD / VAT) */
.dash-hero-pills {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.dash-pill {
  flex: 1;
  min-width: 90px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: .7rem .9rem;
}
.dash-pill-label {
  display: block;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
  margin-bottom: .25rem;
}
.dash-pill-val {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
}
.dash-pill-sub {
  display: block;
  font-size: .67rem;
  color: rgba(255,255,255,.35);
  margin-top: .15rem;
}

/* Hero right stat grid */
.dash-hero-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
  height: 100%;
  align-content: center;
}
.dash-hstat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .9rem .8rem;
  text-align: center;
  transition: background .18s;
}
.dash-hstat:hover { background: rgba(255,255,255,.07); }
.dash-hstat-icon {
  display: block;
  font-size: 1.2rem;
  margin-bottom: .3rem;
}
.dash-hstat-val {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.1;
}
.dash-hstat-warn { color: #fbbf24; }
.dash-hstat-lbl {
  display: block;
  font-size: .65rem;
  color: rgba(255,255,255,.38);
  margin-top: .25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Toolbar */
.dash-toolbar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* Section labels */
.dash-section-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  margin: 1.5rem 0 .6rem;
  padding-left: 2px;
}

/* Bento grid (financial performance) */
.dash-bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: .75rem;
  margin-bottom: .25rem;
}
.dash-bento-card {
  background: var(--erp-navy-card, #1A2942);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  transition: border-color .18s, transform .18s;
}
.dash-bento-card:hover {
  border-color: rgba(252,209,22,.2);
  transform: translateY(-1px);
}
.dash-bento-wide { grid-column: span 1; }
.dash-bento-gold {
  background: linear-gradient(135deg, #1a2e1a 0%, #0e1c0e 100%);
  border-color: rgba(252,209,22,.2);
}
.dash-bc-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.38);
  margin-bottom: .5rem;
}
.dash-bc-value {
  font-size: 1.55rem;
  font-weight: 900;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.1;
  margin-bottom: .3rem;
}
.dash-bento-gold .dash-bc-value { color: #FCD116; font-size: 1.9rem; }
.dash-bc-val-accent { color: #93c5fd; }
.dash-bc-val-danger { color: #fca5a5; }
.dash-bc-sub {
  font-size: .76rem;
  color: rgba(255,255,255,.4);
}
.dash-bc-bar {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  margin-top: .75rem;
  overflow: hidden;
}
.dash-bc-bar-fill {
  height: 3px;
  background: linear-gradient(90deg, #FCD116, #D4A800);
  border-radius: 2px;
  width: 0%;
  transition: width 1s ease;
}

/* Metric row (inventory + people) */
.dash-metric-row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}
.dash-metric {
  flex: 1;
  min-width: 130px;
  background: var(--erp-navy-card, #1A2942);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  transition: border-color .18s;
}
.dash-metric:hover { border-color: rgba(255,255,255,.15); }
.dash-metric-warn { border-color: rgba(251,191,36,.15); }
.dash-metric-val {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1;
}
.dash-metric-warn .dash-metric-val { color: #fbbf24; }
.dash-metric-lbl {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.35);
}

/* Bottom 3-panel grid */
.dash-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
  margin-bottom: .25rem;
}
.dash-panel {
  background: var(--erp-navy-card, #1A2942);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
}
.dash-panel-header {
  padding: .7rem 1rem;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.5);
}
.dash-panel-title { color: rgba(255,255,255,.6); }
.dash-panel-body {
  padding: .9rem 1rem;
  font-size: .84rem;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
}

/* Intelligence panels row — top products / monthly snapshot / business health */
.erp-dash-intel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* Inventory-value progress bar on dashboard */
.dash-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}
.dash-progress-value {
  font-size: .85rem;
  font-weight: 800;
  color: var(--erp-gold);
  font-family: 'IBM Plex Mono', monospace;
}
.dash-progress-track {
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  height: 5px;
}
.dash-progress-fill {
  background: linear-gradient(90deg, var(--erp-gold), #f59e0b);
  height: 5px;
  border-radius: 4px;
  width: 0%;
  transition: width .7s ease;
}
.dash-progress-caption {
  margin-top: .4rem;
  font-size: .63rem;
  color: rgba(255,255,255,.3);
}

/* Quick links — horizontal grid, wraps into two full rows on desktop */
.dash-quicklinks {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: .55rem;
  margin-bottom: 1.5rem;
}
/* .dash-ql sits on the core/button wrapper (.wp-block-button); reset the
   inner .wp-element-button link so it becomes a flex tile, not a filled pill */
.dash-ql {
  width: 100%;
}
.dash-ql .wp-element-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .85rem .5rem;
  background: var(--erp-navy-card, #1A2942);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  text-decoration: none;
  font-size: .67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.5);
  text-align: center;
  line-height: 1.3;
  transition: background .18s, border-color .18s, transform .15s;
  cursor: pointer;
}
.dash-ql .wp-element-button:hover {
  background: rgba(252,209,22,.07);
  border-color: rgba(252,209,22,.25);
  transform: translateY(-2px);
  color: rgba(255,255,255,.5);
}
/* Action tile (not a navigation link) — highlighted distinctly */
.dash-ql-action .wp-element-button {
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.3);
  color: rgba(255,255,255,.7);
}
.dash-ql-action .wp-element-button:hover {
  background: rgba(34,197,94,.15);
  border-color: rgba(34,197,94,.5);
  color: #fff;
}

/* ================================================================
   REPORTS v2 — All-in-One Intelligence
   ================================================================ */

/* Reports hero banner */
.rpt-hero {
  background: linear-gradient(135deg, #0d1f3c 0%, #0a1628 70%, #0f2340 100%);
  border: 1px solid rgba(56,189,248,.15);
  border-radius: 14px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.rpt-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 2rem;
}
.rpt-hero-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 .25rem;
}
.rpt-hero-sub {
  font-size: .8rem;
  color: rgba(255,255,255,.4);
  margin: 0;
}
.rpt-hero-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Section labels */
.rpt-section-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  margin: 1.25rem 0 .6rem;
  padding-left: 2px;
}

/* KPI strips */
.rpt-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
  margin-bottom: .25rem;
}
.rpt-kpi {
  background: var(--erp-navy-card, #1A2942);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: .75rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  transition: transform .15s, border-color .18s;
  min-width: 0;
  overflow: hidden;
}
.rpt-kpi:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.15); }
.rpt-strip-gold .rpt-kpi { border-top: 2px solid rgba(252,209,22,.4); }
.rpt-strip-blue .rpt-kpi { border-top: 2px solid rgba(56,189,248,.4); }
.rpt-strip-red  .rpt-kpi { border-top: 2px solid rgba(239,68,68,.3); }
.rpt-kpi-warn { border-top-color: rgba(251,191,36,.5) !important; }
.rpt-kpi-danger { border-top-color: rgba(239,68,68,.5) !important; }
.rpt-kpi-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpt-strip-gold .rpt-kpi-val { color: #FCD116; }
.rpt-strip-blue .rpt-kpi-val { color: #7dd3fc; }
.rpt-kpi-warn .rpt-kpi-val  { color: #fbbf24; }
.rpt-kpi-danger .rpt-kpi-val { color: #fca5a5; }
.rpt-kpi-lbl {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpt-kpi-sub {
  font-size: .63rem;
  color: rgba(255,255,255,.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* YTD card row */
.rpt-ytd-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .6rem;
  margin-bottom: .25rem;
}
.rpt-ytd-card {
  background: var(--erp-navy-card, #1A2942);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .85rem .7rem;
  text-align: center;
  transition: border-color .18s, transform .15s;
}
.rpt-ytd-card:hover { border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.rpt-ytd-gold  { border-color: rgba(252,209,22,.25); }
.rpt-ytd-warn  { border-color: rgba(251,191,36,.2); }
.rpt-ytd-danger{ border-color: rgba(239,68,68,.2); }
.rpt-ytd-icon {
  font-size: 1.1rem;
  margin-bottom: .3rem;
}
.rpt-ytd-val {
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpt-ytd-gold .rpt-ytd-val   { color: #FCD116; }
.rpt-ytd-warn .rpt-ytd-val   { color: #fbbf24; }
.rpt-ytd-danger .rpt-ytd-val { color: #fca5a5; }
.rpt-ytd-lbl {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.35);
  margin-top: .3rem;
}

/* Intelligence 3-panel grid */
.rpt-intelligence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
  margin: 1.25rem 0;
}
.rpt-intel-panel {
  background: var(--erp-navy-card, #1A2942);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
}
.rpt-intel-header {
  padding: .75rem 1rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
}
.rpt-intel-body { padding: .5rem 0; }
.rpt-intel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  gap: .5rem;
}
.rpt-intel-row:last-child { border-bottom: none; }
.rpt-ir-divider { border-top: 1px solid rgba(255,255,255,.08); margin-top: .2rem; }
.rpt-ir-highlight { background: rgba(252,209,22,.04); }
.rpt-ir-warn { background: rgba(251,191,36,.04); }
.rpt-ir-lbl {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  flex: 1;
}
.rpt-ir-val {
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  text-align: right;
}
.rpt-ir-gold   { color: #FCD116; }
.rpt-ir-green  { color: #4ade80; }
.rpt-ir-danger { color: #fca5a5; }

/* Detail table wrapper */
.rpt-detail-wrap {
  margin-top: 1.25rem;
  background: var(--erp-navy-card, #1A2942);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
}
.rpt-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.1rem;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rpt-detail-title {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
}
.rpt-detail-table { border-radius: 0; border: none; }

/* ================================================================
   RESPONSIVE — Dashboard + Reports
   ================================================================ */
@media (max-width: 1100px) {
  .dash-bento          { grid-template-columns: 1fr 1fr; }
  .rpt-ytd-row         { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .dash-hero           { grid-template-columns: 1fr; }
  .dash-hero-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-bottom-grid    { grid-template-columns: 1fr; }
  .rpt-intelligence-grid { grid-template-columns: 1fr; }
  .rpt-kpi-strip       { grid-template-columns: 1fr 1fr; }
  .dash-quicklinks     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .erp-dash-intel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-bento          { grid-template-columns: 1fr; }
  .rpt-kpi-strip       { grid-template-columns: 1fr; }
  .rpt-ytd-row         { grid-template-columns: repeat(2, 1fr); }
  .dash-quicklinks     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-ql .wp-element-button { font-size: .62rem; }
  .dash-hero-rev-value { font-size: 2rem; }
  .dash-metric-row     { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-live-dot, .dash-bc-bar-fill { animation: none; transition: none; }
  .dash-ql, .dash-bento-card, .rpt-kpi, .rpt-ytd-card { transition: none; }
}

/* ================================================================
   RESPONSIVE — Entry forms / modals (every Add/Edit form in the app
   shares .erp-modal-form). Below 640px a 2-column grid leaves each
   field too narrow for its label + input, so collapse to 1 column
   and give the modal more vertical breathing room.
   ================================================================ */
@media (max-width: 640px) {
  .erp-modal-form { grid-template-columns: 1fr; }
  .erp-modal { width: calc(100vw - 1.25rem); max-height: calc(100vh - 1.5rem); }
  .erp-modal-header { padding: 0.9rem 1rem; }
  .erp-modal-body   { padding: 1rem; }
  .erp-modal-footer { padding: 0.85rem 1rem; flex-wrap: wrap; }
}

/* ================================================================
   RESPONSIVE — Sidebar collapse (fixes content being squeezed/
   overlapped on tablet & phone). Uses the width tokens that were
   already defined at the top of the file but never applied anywhere.
   ================================================================ */
@media (max-width: 959px) {
  .erp-sidebar, .erp-main-wrap { transition: width .2s ease, margin-left .2s ease, max-width .2s ease; }
  .erp-sidebar   { width: var(--erp-sidebar-width-tablet); }
  .erp-main-wrap { margin-left: var(--erp-sidebar-width-tablet); max-width: calc(100vw - var(--erp-sidebar-width-tablet)); width: calc(100vw - var(--erp-sidebar-width-tablet)); }
  .erp-brand-text, .erp-biz-badge, .erp-nav-section, .erp-nav-badge { display: none; }
  .erp-nav-item { justify-content: center; padding: .6rem .25rem; gap: 0; }
  .erp-nav-icon { font-size: 1.15rem; }
}
@media (max-width: 599px) {
  .erp-sidebar   { width: var(--erp-sidebar-width-phone); }
  .erp-main-wrap { margin-left: var(--erp-sidebar-width-phone); max-width: calc(100vw - var(--erp-sidebar-width-phone)); width: calc(100vw - var(--erp-sidebar-width-phone)); }
  .erp-topbar { padding: 0 .75rem; }
  .erp-topbar-title { font-size: .88rem; }
  .erp-topbar-breadcrumb { display: none; }
}

/* ================================================================
   RESPONSIVE — Generic multi-column page grids (.erp-grid-2/3/4,
   .erp-grid-1-2, .erp-grid-2-1) used across Attendance, Reports,
   Dashboard, etc. to lay two tables/cards side by side. Collapse to
   a single column on tablet/phone so content never gets squeezed.
   ================================================================ */
@media (max-width: 900px) {
  .erp-grid-2, .erp-grid-3, .erp-grid-4, .erp-grid-1-2, .erp-grid-2-1, .settings-grid { grid-template-columns: 1fr !important; }
  .br-kpi-grid, .erp-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .erp-sidebar, .erp-main-wrap { transition: none; }
}

/* ================================================================
   ACCOUNTING MODULE — KPI summary row
   ================================================================ */
.acc-kpi-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .6rem;
  margin-bottom: 1.25rem;
}
.acc-kpi-card {
  background: var(--erp-navy-card, #1A2942);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: .9rem 1rem;
  border-top: 2px solid rgba(255,255,255,.07);
  transition: transform .15s, border-color .18s;
}
.acc-kpi-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.15); }
.acc-kpi-gold        { border-top-color: rgba(252,209,22,.45); }
.acc-kpi-green       { border-top-color: rgba(34,197,94,.4); }
.acc-kpi-danger-card { border-top-color: rgba(239,68,68,.3); }
.acc-kpi-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.38);
  margin-bottom: .4rem;
}
.acc-kpi-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.1;
  word-break: break-all;
}
.acc-kpi-gold .acc-kpi-val  { color: #FCD116; }
.acc-kpi-green .acc-kpi-val { color: #4ade80; }
.acc-kpi-danger { color: #fca5a5 !important; }
.acc-kpi-sub {
  font-size: .65rem;
  color: rgba(255,255,255,.3);
  margin-top: .25rem;
  font-weight: 500;
}
@media (max-width: 1100px) { .acc-kpi-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .acc-kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* ── Print styles ── */
@media print {
  .erp-sidebar, .erp-topbar, .erp-toolbar, #erp-mprint,
  .erp-modal-footer, #erp-mx, button.erp-btn-icon { display: none !important; }
  .erp-modal-overlay { position: static !important; background: #fff !important; }
  .erp-modal { box-shadow: none !important; border: none !important; max-width: 100% !important; width: 100% !important; background: #fff !important; color: #111 !important; border-radius: 0 !important; }
  .erp-modal-header { background: #fff !important; border-bottom: 2px solid #333 !important; }
  .erp-modal-header #erp-mt { color: #111 !important; font-size: 1.1rem !important; }
  .erp-modal-body { overflow: visible !important; color: #111 !important; }
  table { border-collapse: collapse !important; }
  th, td { border: 1px solid #ccc !important; color: #111 !important; padding: 4px 8px !important; font-size: .8rem !important; background: #fff !important; }
  th { background: #f5f5f5 !important; font-weight: 700 !important; }
  .erp-badge { border: 1px solid #999 !important; color: #333 !important; background: #f5f5f5 !important; }
  body { background: #fff !important; }
  @page { margin: 1.5cm; }
}

/* ── Expenses module ── */
.exp-cat-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.6);
}

/* ── erp-btn-danger ── */
.erp-btn-danger {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.35);
  color: #fca5a5;
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: .85rem;
  transition: background .15s;
}
.erp-btn-danger:hover { background: rgba(239,68,68,.25); }