/* Palm Farm Portal - Modern Design System */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

/* ═══ Design Tokens ═══ */
:root {
	/* Primary - Palm Green */
	--pf-primary: #22c55e;
	--pf-primary-hover: #16a34a;
	--pf-primary-light: rgba(34, 197, 94, 0.12);
	--pf-primary-lighter: rgba(34, 197, 94, 0.06);

	/* Secondary - Desert Sand */
	--pf-secondary: #d4882e;
	--pf-secondary-hover: #b87325;
	--pf-secondary-light: rgba(212, 136, 46, 0.12);

	/* Tertiary - Water Blue */
	--pf-tertiary: #0ea5e9;
	--pf-tertiary-hover: #0284c7;
	--pf-tertiary-light: rgba(14, 165, 233, 0.12);

	/* Warm Grays */
	--pf-gray-50: #fafaf8;
	--pf-gray-100: #f5f5f0;
	--pf-gray-200: #e8e8e0;
	--pf-gray-300: #d4d4cc;
	--pf-gray-400: #a8a89e;
	--pf-gray-500: #737368;
	--pf-gray-600: #57574e;
	--pf-gray-700: #3f3f38;
	--pf-gray-800: #2a2a24;
	--pf-gray-900: #1a1a16;

	/* Semantic */
	--pf-success: #22c55e;
	--pf-warning: #f59e0b;
	--pf-danger: #ef4444;
	--pf-info: #0ea5e9;

	/* Surfaces */
	--pf-page-bg: #f1f5f9;
	--pf-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
	--pf-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);

	/* Sidebar */
	--pf-sidebar-bg: #166534;
	--pf-sidebar-hover: rgba(255, 255, 255, 0.1);
	--pf-sidebar-active: #22c55e;
	--pf-sidebar-text: rgba(255, 255, 255, 0.8);
	--pf-sidebar-text-hover: #ffffff;
	--pf-sidebar-border: rgba(255, 255, 255, 0.15);

	/* Stat Indicator Colors */
	--pf-ind-purple: #c4b5fd;
	--pf-ind-pink: #fca5a5;
	--pf-ind-blue: #93c5fd;
	--pf-ind-yellow: #fcd34d;
	--pf-ind-green: #86efac;

	/* Typography */
	--pf-font: "Tajawal", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	--pf-xs: 11px;
	--pf-sm: 12px;
	--pf-base: 13px;
	--pf-md: 14px;
	--pf-lg: 16px;
	--pf-xl: 20px;
	--pf-2xl: 26px;

	/* Radii */
	--pf-r-sm: 8px;
	--pf-r-md: 12px;
	--pf-r-lg: 16px;
	--pf-r-xl: 20px;
	--pf-r-pill: 100px;

	/* Glass */
	--pf-glass-blur: blur(12px);
	--pf-glass-bg: rgba(255, 255, 255, 0.75);
	--pf-glass-border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ═══ Layout ═══ */
.pf {
	display: flex;
	min-height: calc(100vh - 60px);
	font-family: var(--pf-font);
	max-width: 1440px;
	margin: -20px auto -60px;
	background: var(--pf-page-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ═══ Sidebar ═══ */
.pf-sidebar {
	width: 270px;
	min-width: 270px;
	background: var(--pf-sidebar-bg);
	color: var(--pf-sidebar-text);
	padding: 20px 0 10px;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: calc(100vh - 60px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.pf-sidebar::-webkit-scrollbar { width: 4px; }
.pf-sidebar::-webkit-scrollbar-track { background: transparent; }
.pf-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; }

.pf-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 24px 16px;
	color: #ffffff;
	font-weight: 700;
	font-size: var(--pf-lg);
}

.pf-logo svg { color: rgba(255, 255, 255, 0.85); width: 28px; height: 28px; }

/* ═══ User Info ═══ */
.pf-user-info {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	margin: 0 16px 16px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--pf-r-md);
}

.pf-user-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--pf-base);
	flex-shrink: 0;
}

.pf-user-meta { display: flex; flex-direction: column; min-width: 0; }
.pf-user-name { font-size: var(--pf-base); font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-user-role { font-size: var(--pf-xs); color: rgba(255, 255, 255, 0.6); margin-top: 1px; }

/* ═══ Collapsible Nav Groups ═══ */
.pf-nav-group { margin-bottom: 2px; }

.pf-nav-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--pf-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 12px 24px 6px;
	cursor: pointer;
	user-select: none;
	transition: color 0.15s;
}
.pf-nav-label:hover { color: rgba(255, 255, 255, 0.8); }

.pf-chevron {
	transition: transform 0.2s ease;
	opacity: 0.4;
	flex-shrink: 0;
}
.pf-nav-group.collapsed .pf-chevron { transform: rotate(-90deg); }
[dir="rtl"] .pf-nav-group.collapsed .pf-chevron { transform: rotate(90deg); }

.pf-nav-items {
	overflow: hidden;
	transition: max-height 0.25s ease, opacity 0.2s ease;
	max-height: 600px;
	opacity: 1;
	padding-bottom: 4px;
}
.pf-nav-group.collapsed .pf-nav-items {
	max-height: 0;
	opacity: 0;
	padding-bottom: 0;
}

.pf-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	margin: 1px 12px;
	color: rgba(255, 255, 255, 0.8) !important;
	text-decoration: none !important;
	font-size: var(--pf-md);
	font-weight: 450;
	cursor: pointer;
	transition: all 0.15s ease;
	border: none;
	background: none;
	width: calc(100% - 24px);
	text-align: start;
	border-radius: var(--pf-r-sm);
	position: relative;
}

.pf-nav-item:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff !important;
}

.pf-nav-item.active {
	background: rgba(255, 255, 255, 0.2);
	color: #fff !important;
	font-weight: 600;
}

.pf-nav-item svg { flex-shrink: 0; opacity: 0.6; width: 18px; height: 18px; transition: opacity 0.15s; }
.pf-nav-item:hover svg { opacity: 0.9; }
.pf-nav-item.active svg { opacity: 1; color: #fff; }

.pf-count {
	margin-inline-start: auto;
	margin-inline-end: 0;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--pf-r-pill);
	min-width: 18px;
	text-align: center;
}
.pf-nav-item.active .pf-count { background: rgba(255,255,255,0.25); color: #fff; }

.pf-count-warn { background: rgba(245, 158, 11, 0.3); color: #fcd34d; }
.pf-dot { width: 7px; height: 7px; border-radius: 50%; margin-inline-start: auto; margin-inline-end: 0; }
.pf-dot-warn { background: var(--pf-warning); box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }

.pf-nav-action { color: rgba(255, 255, 255, 0.7) !important; font-size: var(--pf-base); }
.pf-nav-action:hover { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; }

/* ═══ Sidebar Bottom Links ═══ */
.pf-sidebar-bottom {
	margin-top: auto;
	padding: 12px 12px 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.pf-sidebar-bottom .pf-bottom-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 20px;
	margin: 2px 0;
	color: rgba(255, 255, 255, 0.6) !important;
	text-decoration: none !important;
	font-size: var(--pf-sm);
	cursor: pointer;
	border-radius: var(--pf-r-md);
	transition: all 0.15s;
	border: none;
	background: none;
	width: 100%;
	text-align: start;
}
.pf-sidebar-bottom .pf-bottom-link:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff !important; }
.pf-sidebar-bottom .pf-bottom-link svg { width: 16px; height: 16px; opacity: 0.6; flex-shrink: 0; }
.pf-bottom-link-danger:hover { color: #fca5a5 !important; }

/* ═══ Main Content ═══ */
.pf-main {
	flex: 1;
	padding: 0;
	background: var(--pf-page-bg);
	overflow-y: auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ═══ Header Bar ═══ */
.pf-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 28px 14px;
	background: #15803d;
	position: sticky;
	top: 0;
	z-index: 10;
	gap: 16px;
	flex-shrink: 0;
}

.pf-header-title {
	font-size: var(--pf-lg);
	font-weight: 700;
	color: #ffffff;
	white-space: nowrap;
}

.pf-header-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 7px 14px;
	max-width: 280px;
	width: 100%;
}
.pf-header-search svg { color: rgba(255, 255, 255, 0.6); flex-shrink: 0; }
.pf-header-search input {
	border: none;
	background: none;
	outline: none;
	font-size: var(--pf-sm);
	color: #ffffff;
	width: 100%;
	font-family: var(--pf-font);
}
.pf-header-search input::placeholder { color: rgba(255, 255, 255, 0.5); }

/* Sections get padding from main now */
.pf-section { padding: 24px 28px; }

.pf-main::-webkit-scrollbar { width: 6px; }
.pf-main::-webkit-scrollbar-track { background: transparent; }
.pf-main::-webkit-scrollbar-thumb { background: var(--pf-gray-300); border-radius: 3px; }
.pf-main::-webkit-scrollbar-thumb:hover { background: var(--pf-gray-400); }

/* ═══ Alert ═══ */
.pf-alert {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: rgba(245, 158, 11, 0.08);
	border-radius: var(--pf-r-md);
	font-size: var(--pf-sm);
	color: #92400e;
	margin-bottom: 16px;
	backdrop-filter: blur(8px);
}
.pf-alert a { color: #c2410c !important; font-weight: 600; text-decoration: underline !important; }

/* ═══ Stats Strip → KPI Card Grid ═══ */
.pf-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.pf-stat {
	background: #ffffff;
	border-radius: var(--pf-r-md);
	padding: 18px 20px;
	text-align: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pf-stat:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.pf-stat::before {
	display: none;
}

/* Colored square indicator */
.pf-stat-ind {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	position: absolute;
	top: 16px;
	inset-inline-start: 16px;
}

.pf-stat-ind--purple { background: var(--pf-ind-purple); }
.pf-stat-ind--pink { background: var(--pf-ind-pink); }
.pf-stat-ind--blue { background: var(--pf-ind-blue); }
.pf-stat-ind--yellow { background: var(--pf-ind-yellow); }
.pf-stat-ind--green { background: var(--pf-ind-green); }

.pf-stat-val {
	display: block;
	font-size: var(--pf-2xl);
	font-weight: 700;
	color: var(--pf-gray-900);
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin-top: 6px;
}
.pf-val-warn { color: var(--pf-warning); }

.pf-stat-lbl {
	font-size: var(--pf-sm);
	color: var(--pf-gray-500);
	display: block;
	font-weight: 500;
	margin-bottom: 4px;
}

.pf-stat-sep { display: none; }

/* ═══ Charts Row ═══ */
.pf-charts-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

.pf-chart-card {
	background: #ffffff;
	border-radius: var(--pf-r-md);
	padding: 20px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pf-chart-card h3 {
	font-size: var(--pf-base);
	font-weight: 700;
	color: var(--pf-gray-800);
	margin: 0 0 16px 0;
	text-align: center;
}

.pf-chart-container {
	width: 100%;
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Simple bar chart */
.pf-bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	height: 180px;
	padding: 0 16px;
	width: 100%;
	justify-content: center;
}

.pf-bar-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.pf-bar-bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 150px;
}

.pf-bar {
	width: 22px;
	border-radius: 4px 4px 0 0;
	min-height: 4px;
	transition: height 0.3s ease;
}

.pf-bar--primary { background: #3b82f6; }
.pf-bar--secondary { background: #22c55e; }

.pf-bar-label {
	font-size: 10px;
	color: var(--pf-gray-500);
	white-space: nowrap;
}

/* Donut chart */
.pf-donut-wrap {
	position: relative;
	width: 170px;
	height: 170px;
	margin: 0 auto;
}

.pf-donut-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.pf-donut-center .pf-donut-val {
	font-size: var(--pf-xl);
	font-weight: 700;
	color: var(--pf-gray-900);
	line-height: 1;
}

.pf-donut-center .pf-donut-lbl {
	font-size: var(--pf-xs);
	color: var(--pf-gray-500);
}

.pf-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 12px;
	justify-content: center;
}

.pf-legend-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: var(--pf-gray-500);
}

.pf-legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ═══ Cards ═══ */
.pf-card {
	background: #ffffff;
	border-radius: var(--pf-r-md);
	margin-bottom: 16px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.25s ease;
}

.pf-card:hover {
	box-shadow: var(--pf-card-shadow-hover);
}

.pf-card-hdr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid var(--pf-gray-100);
}

.pf-card-hdr h3 { font-size: var(--pf-base); font-weight: 700; margin: 0; color: var(--pf-gray-800); }
.pf-link { font-size: var(--pf-sm); color: var(--pf-tertiary) !important; text-decoration: none !important; cursor: pointer; font-weight: 500; transition: color 0.15s; }
.pf-link:hover { color: var(--pf-tertiary-hover) !important; text-decoration: underline !important; }

/* ═══ Buttons ═══ */
.pf-btn-new {
	background: var(--pf-primary);
	color: #fff;
	border: none;
	padding: 6px 16px;
	border-radius: var(--pf-r-sm);
	font-size: var(--pf-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
.pf-btn-new:hover {
	background: var(--pf-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

/* ═══ Tables ═══ */
.pf-tbl { width: 100%; border-collapse: collapse; font-size: var(--pf-sm); }

.pf-tbl thead th {
	background: var(--pf-gray-50);
	color: var(--pf-gray-500);
	font-weight: 600;
	font-size: var(--pf-xs);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 10px 16px;
	text-align: start;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.pf-tbl tbody td {
	padding: 10px 16px;
	border-bottom: 1px solid var(--pf-gray-50);
	color: var(--pf-gray-600);
}

.pf-tbl tbody tr { cursor: pointer; transition: background 0.15s ease; }
.pf-tbl tbody tr:last-child td { border-bottom: none; }
.pf-tbl tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.015); }
.pf-tbl tbody tr:hover { background: var(--pf-primary-lighter); }
.pf-tbl-name { font-weight: 600; color: var(--pf-tertiary); cursor: pointer; }
.pf-tbl-num { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.pf-tbl small { color: var(--pf-gray-400); font-size: 10px; }

.pf-tbl-acts { display: flex; gap: 4px; justify-content: flex-end; }

.pf-tbl-btn {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--pf-r-sm);
	color: var(--pf-gray-500) !important;
	text-decoration: none !important;
	transition: all 0.15s ease;
	cursor: pointer;
	background: none;
	border: none;
}
.pf-tbl-btn:hover { background: var(--pf-gray-200); color: var(--pf-gray-800) !important; transform: translateY(-1px); }

/* ═══ Status Badges ═══ */
.pf-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: var(--pf-r-pill);
	font-size: var(--pf-xs);
	font-weight: 600;
	letter-spacing: 0.3px;
}
.pf-badge-draft { background: rgba(245, 158, 11, 0.12); color: #92400e; }
.pf-badge-submitted { background: rgba(34, 197, 94, 0.12); color: #065f46; }
.pf-badge-cancelled { background: rgba(239, 68, 68, 0.12); color: #991b1b; }
.pf-badge-open { background: rgba(14, 165, 233, 0.12); color: #1e40af; }

/* ═══ 2 Column Grid ═══ */
.pf-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* ═══ List Items ═══ */
.pf-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	text-decoration: none !important;
	color: inherit !important;
	border-bottom: 1px solid var(--pf-gray-50);
	cursor: pointer;
	transition: background 0.15s ease;
	border-radius: var(--pf-r-sm);
	margin: 1px 0;
}
.pf-list-item:last-child { border-bottom: none; }
.pf-list-item:hover { background: var(--pf-primary-lighter); }
.pf-list-title { font-size: var(--pf-sm); font-weight: 600; color: var(--pf-gray-800); }
.pf-list-sub { font-size: var(--pf-xs); color: var(--pf-gray-400); margin-top: 2px; }
.pf-list-end { text-align: start; flex-shrink: 0; margin-inline-end: 10px; }
.pf-list-val { display: block; font-size: var(--pf-sm); font-weight: 600; color: var(--pf-gray-800); }
.pf-list-date { font-size: 10px; color: var(--pf-gray-400); }
.pf-empty { padding: 32px; text-align: center; color: var(--pf-gray-400); font-size: var(--pf-sm); }

/* ═══ Sections ═══ */
.pf-section { display: none; }
.pf-section.active { display: block; }

/* ═══ Settings Form ═══ */
.pf-form-group { padding: 16px 20px; }
.pf-form-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.pf-form-row label {
	font-size: var(--pf-sm);
	font-weight: 600;
	color: var(--pf-gray-600);
	min-width: 160px;
}
.pf-form-row .value { font-size: var(--pf-sm); color: var(--pf-gray-800); }
.pf-btn-save {
	background: var(--pf-tertiary);
	color: #fff;
	border: none;
	padding: 6px 18px;
	border-radius: 10px;
	font-size: var(--pf-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
}
.pf-btn-save:hover { background: var(--pf-tertiary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35); }

/* ═══ Child Table ═══ */
.pf-child-tbl { width: 100%; border-collapse: collapse; font-size: var(--pf-sm); margin-top: 6px; }
.pf-child-tbl th {
	background: var(--pf-gray-100); padding: 6px 8px; text-align: start;
	font-size: var(--pf-xs); font-weight: 600; color: var(--pf-gray-500); border-bottom: 1px solid var(--pf-gray-200);
}
.pf-child-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--pf-gray-100); }
.pf-child-tbl input, .pf-child-tbl select {
	width: 100%; border: 1.5px solid var(--pf-gray-200); border-radius: var(--pf-r-sm);
	padding: 5px 8px; font-size: var(--pf-sm);
}
.pf-child-tbl .pf-row-del {
	cursor: pointer; color: var(--pf-danger); font-weight: bold; text-align: center;
	background: none; border: none; font-size: 14px;
}
.pf-child-add {
	background: none; border: 1.5px dashed var(--pf-gray-300); color: var(--pf-gray-500);
	padding: 5px 12px; border-radius: var(--pf-r-sm); font-size: var(--pf-xs); cursor: pointer;
	margin-top: 6px; display: block; width: 100%; transition: all 0.15s ease;
}
.pf-child-add:hover { border-color: var(--pf-primary); color: var(--pf-primary); background: var(--pf-primary-lighter); }

/* ═══ Loading ═══ */
.pf-loading {
	text-align: center;
	padding: 32px;
	color: var(--pf-gray-400);
	font-size: var(--pf-sm);
}

.pf-loading::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--pf-gray-200);
	border-top-color: var(--pf-primary);
	border-radius: 50%;
	animation: pf-spin 0.8s linear infinite;
	margin-inline-start: 8px;
	vertical-align: middle;
}

@keyframes pf-spin {
	to { transform: rotate(360deg); }
}

/* ═══ Responsive ═══ */
@media (max-width: 900px) {
	.pf { flex-direction: column; }
	.pf-sidebar {
		width: 100%; min-width: 100%; height: auto; position: relative;
		flex-direction: row; flex-wrap: wrap; padding: 10px; gap: 2px;
	}
	.pf-logo { width: 100%; padding: 0 0 8px; margin-bottom: 4px; }
	.pf-user-info { width: 100%; padding: 8px 12px; }
	.pf-nav-group { display: flex; flex-wrap: wrap; gap: 2px; }
	.pf-nav-label { width: 100%; padding: 6px 8px 2px; }
	.pf-nav-items { display: flex; flex-wrap: wrap; gap: 2px; }
	.pf-nav-group.collapsed .pf-nav-items { max-height: none; opacity: 1; display: none; }
	.pf-nav-item { padding: 5px 10px; font-size: var(--pf-xs); border-radius: var(--pf-r-sm); width: auto; margin: 1px 2px; }
	.pf-nav-item.active { border-inline-end: none; }
	.pf-header { padding: 10px 16px; }
	.pf-section { padding: 16px; }
	.pf-grid-2 { grid-template-columns: 1fr; }
	.pf-charts-row { grid-template-columns: 1fr; }
	.pf-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.pf-section { padding: 12px; }
	.pf-stat-val { font-size: var(--pf-lg); }
	.pf-stats { gap: 10px; }
}

/* ═══ Analytics Section ═══ */

.pf-analytics-filters {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	padding: 14px 18px;
	background: var(--pf-glass-bg);
	backdrop-filter: var(--pf-glass-blur);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	border: var(--pf-glass-border);
	border-radius: var(--pf-r-lg);
	margin-bottom: 16px;
	flex-wrap: wrap;
	box-shadow: var(--pf-card-shadow);
}

.pf-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pf-filter-group label {
	font-size: 10px;
	font-weight: 600;
	color: var(--pf-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pf-date-input,
.pf-select-input {
	border: 1.5px solid var(--pf-gray-200);
	border-radius: var(--pf-r-sm);
	padding: 6px 12px;
	font-size: var(--pf-sm);
	color: var(--pf-gray-800);
	background: var(--pf-gray-50);
	min-width: 140px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.pf-date-input:focus,
.pf-select-input:focus {
	outline: none;
	border-color: var(--pf-primary);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

/* ═══ Report Filters ═══ */

.pf-report-filters {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	padding: 14px 18px;
	background: var(--pf-glass-bg);
	backdrop-filter: var(--pf-glass-blur);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	border: var(--pf-glass-border);
	border-radius: var(--pf-r-md);
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.pf-val-positive {
	color: var(--pf-primary-dark);
	font-weight: 600;
}

.pf-val-negative {
	color: #ef4444;
	font-weight: 600;
}

/* KPI Cards Row */
.pf-analytics-kpi-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 16px;
}

.pf-kpi-card {
	background: var(--pf-glass-bg);
	backdrop-filter: var(--pf-glass-blur);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	border: var(--pf-glass-border);
	border-radius: var(--pf-r-lg);
	padding: 20px 22px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--pf-card-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-kpi-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--pf-card-shadow-hover);
}

.pf-kpi-card::before {
	content: '';
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--pf-primary), var(--pf-tertiary));
}

.pf-kpi-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--pf-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.pf-kpi-value {
	font-size: var(--pf-2xl);
	font-weight: 700;
	color: var(--pf-gray-900);
	line-height: 1.2;
	margin-bottom: 6px;
	letter-spacing: -0.5px;
}

.pf-kpi-change {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--pf-xs);
	font-weight: 600;
}

.pf-kpi-up { color: var(--pf-success); }
.pf-kpi-down { color: var(--pf-danger); }
.pf-kpi-vs { font-weight: 400; color: var(--pf-gray-400); font-size: 10px; }

/* Chart Wrappers */
.pf-analytics-card { min-height: 320px; }

.pf-analytics-chart-wrap {
	padding: 12px 16px 16px;
	min-height: 280px;
}

/* Top Performers */
.pf-analytics-performers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 16px;
}

.pf-performer-card {
	background: var(--pf-glass-bg);
	backdrop-filter: var(--pf-glass-blur);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	border: var(--pf-glass-border);
	border-radius: var(--pf-r-md);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: var(--pf-card-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-performer-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--pf-card-shadow-hover);
}

.pf-performer-icon {
	font-size: 28px;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--pf-primary-light), var(--pf-tertiary-light));
	border-radius: var(--pf-r-md);
}

.pf-performer-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--pf-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pf-performer-value {
	font-size: var(--pf-base);
	font-weight: 700;
	color: var(--pf-gray-800);
	line-height: 1.3;
}

.pf-performer-sub {
	font-size: var(--pf-xs);
	color: var(--pf-gray-400);
}

/* Responsive Analytics */
@media (max-width: 900px) {
	.pf-analytics-kpi-row { grid-template-columns: repeat(2, 1fr); }
	.pf-analytics-performers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.pf-analytics-kpi-row { grid-template-columns: 1fr; }
	.pf-analytics-performers { grid-template-columns: 1fr; }
	.pf-analytics-filters { flex-direction: column; align-items: stretch; }
	.pf-kpi-value { font-size: var(--pf-xl); }
}

/* ═══ Custom Modal System (PfModal) ═══ */

/* Overlay */
.pfm-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.pfm-overlay.pfm-visible { opacity: 1; }

/* Modal Box */
.pfm-modal {
	background: #fff;
	border-radius: var(--pf-r-xl);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.06);
	width: 90%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	transform: translateY(20px) scale(0.97);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}
.pfm-visible .pfm-modal { transform: translateY(0) scale(1); }
.pfm-lg { max-width: 780px; }
.pfm-xl { max-width: 960px; }

/* Header */
.pfm-header {
	background: linear-gradient(135deg, #1a2e1a 0%, #2a4a2a 100%);
	padding: 14px 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	flex-shrink: 0;
}

.pfm-header::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--pf-primary), var(--pf-tertiary), var(--pf-secondary));
}

.pfm-title {
	color: #fff;
	font-size: var(--pf-md);
	font-weight: 700;
	letter-spacing: 0.3px;
}

.pfm-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	font-size: 24px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	transition: color 0.15s, transform 0.15s;
	border-radius: var(--pf-r-sm);
}
.pfm-close:hover { color: #fff; transform: scale(1.1); }

/* Status Badge in Title */
.pfm-status {
	display: inline-block;
	padding: 2px 12px;
	border-radius: var(--pf-r-pill);
	font-size: 10px;
	font-weight: 700;
	margin-inline-start: 10px;
	letter-spacing: 0.5px;
	vertical-align: middle;
}
.pfm-status-draft { background: rgba(254, 243, 199, 0.9); color: #92400e; }
.pfm-status-submitted { background: rgba(209, 250, 229, 0.9); color: #065f46; }
.pfm-status-cancelled { background: rgba(254, 226, 226, 0.9); color: #991b1b; }

/* Body */
.pfm-body {
	padding: 18px 22px;
	background: var(--pf-page-bg);
	overflow-y: auto;
	flex: 1;
	max-height: 75vh;
}

.pfm-body::-webkit-scrollbar { width: 5px; }
.pfm-body::-webkit-scrollbar-track { background: transparent; }
.pfm-body::-webkit-scrollbar-thumb { background: var(--pf-gray-300); border-radius: 3px; }
.pfm-body::-webkit-scrollbar-thumb:hover { background: var(--pf-gray-400); }

/* Footer */
.pfm-footer {
	padding: 10px 22px;
	background: #fff;
	border-top: 1px solid var(--pf-gray-200);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}
.pfm-footer-left { display: flex; gap: 8px; }
.pfm-footer-right { display: flex; gap: 8px; }

/* Modal Buttons */
.pfm-btn {
	border: none;
	border-radius: 10px;
	padding: 7px 18px;
	font-size: var(--pf-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}
.pfm-btn-primary {
	background: linear-gradient(135deg, var(--pf-primary), var(--pf-primary-hover));
	color: #fff;
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
.pfm-btn-primary:hover {
	background: linear-gradient(135deg, var(--pf-primary-hover), #15803d);
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
	transform: translateY(-1px);
}
.pfm-btn-secondary {
	background: var(--pf-gray-100);
	color: var(--pf-gray-600);
}
.pfm-btn-secondary:hover { background: var(--pf-gray-200); }
.pfm-btn-danger {
	background: linear-gradient(135deg, #ef4444, #dc2626);
	color: #fff;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.pfm-btn-danger:hover {
	background: linear-gradient(135deg, #dc2626, #b91c1c);
	transform: translateY(-1px);
}
.pfm-btn-submit {
	background: linear-gradient(135deg, var(--pf-tertiary), var(--pf-tertiary-hover));
	color: #fff;
	box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}
.pfm-btn-submit:hover {
	background: linear-gradient(135deg, var(--pf-tertiary-hover), #0369a1);
	transform: translateY(-1px);
}

/* ── Field Layout ── */
.pfm-field-wrap {
	margin-bottom: 10px;
}

.pfm-label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: var(--pf-gray-600);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 2px;
}

.pfm-reqd { color: var(--pf-danger); }

.pfm-input {
	width: 100%;
	border: 1.5px solid var(--pf-gray-200);
	border-radius: 10px;
	padding: 7px 12px;
	font-size: var(--pf-sm);
	color: var(--pf-gray-800);
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
	font-family: inherit;
}

.pfm-input:focus {
	border-color: var(--pf-primary);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
	outline: none;
}

.pfm-input:disabled,
.pfm-input[readonly] {
	background: var(--pf-gray-100);
	color: var(--pf-gray-600);
	border-color: var(--pf-gray-200);
	cursor: default;
}

.pfm-textarea {
	min-height: 46px;
	resize: vertical;
}

/* Section Titles */
.pfm-section-title {
	font-size: var(--pf-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--pf-gray-800);
	padding: 8px 0 4px;
	margin-top: 2px;
	border-bottom: 2px solid var(--pf-primary);
	display: inline-block;
	width: auto;
	margin-bottom: 6px;
}

.pfm-section-divider {
	border-top: 1px solid var(--pf-gray-200);
	margin: 8px 0;
}

/* Two-column Row */
.pfm-row {
	display: flex;
	gap: 12px;
}

.pfm-col {
	flex: 1;
	min-width: 0;
}

/* Link Field with Autocomplete */
.pfm-link-wrap {
	position: relative;
}

.pfm-link-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	background: #fff;
	border: 1px solid var(--pf-gray-200);
	border-radius: var(--pf-r-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 100;
	max-height: 250px;
	overflow-y: auto;
	display: none;
	margin-top: 4px;
	min-width: 380px;
}

.pfm-link-option {
	padding: 9px 14px;
	font-size: var(--pf-sm);
	cursor: pointer;
	color: var(--pf-gray-800);
	transition: background 0.1s;
}
.pfm-link-option:hover { background: var(--pf-primary-lighter); color: var(--pf-primary-hover); }
.pfm-link-create { color: var(--pf-primary); border-top: 1px solid var(--pf-gray-100); }
.pfm-link-create:hover { background: var(--pf-primary-light); }

/* Item link table-style dropdown */
.pfm-link-table-head {
	display: flex;
	gap: 8px;
	padding: 7px 14px;
	font-size: 10px;
	font-weight: 700;
	color: var(--pf-gray-400);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid var(--pf-gray-100);
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}
.pfm-link-row {
	display: flex;
	gap: 8px;
	align-items: center;
}
.pfm-lt-code { flex: 0 0 90px; font-family: monospace; font-size: 11px; color: var(--pf-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfm-lt-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfm-lt-rate { flex: 0 0 70px; text-align: end; font-weight: 600; color: var(--pf-primary-hover); }
.pfm-link-row:hover .pfm-lt-code,
.pfm-link-row:hover .pfm-lt-rate { color: inherit; }

.pfm-link-empty {
	padding: 12px 14px;
	color: var(--pf-gray-400);
	font-size: var(--pf-sm);
	text-align: center;
}

.pfm-link-dropdown::-webkit-scrollbar { width: 4px; }
.pfm-link-dropdown::-webkit-scrollbar-thumb { background: var(--pf-gray-300); border-radius: 2px; }

/* HTML Container */
.pfm-html-container {
	margin: 4px 0;
}

/* Confirm Dialog */
.pfm-confirm {
	background: #fff;
	border-radius: var(--pf-r-xl);
	padding: 32px;
	max-width: 400px;
	width: 90%;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
	text-align: center;
}

.pfm-confirm-icon {
	font-size: 40px;
	margin-bottom: 14px;
	opacity: 0.85;
}

.pfm-confirm-body {
	font-size: var(--pf-base);
	color: var(--pf-gray-800);
	margin-bottom: 22px;
	line-height: 1.6;
}

.pfm-confirm-footer {
	display: flex;
	justify-content: center;
	gap: 10px;
}

/* Freeze Overlay Inside Modal */
.pfm-freeze {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	backdrop-filter: blur(2px);
}

.pfm-freeze-msg {
	background: var(--pf-sidebar-bg);
	color: #fff;
	padding: 12px 28px;
	border-radius: var(--pf-r-sm);
	font-size: var(--pf-sm);
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ── Child Table Inside Modal ── */
.pfm-modal .pf-child-tbl {
	border: 1px solid var(--pf-gray-200);
	border-radius: var(--pf-r-sm);
	overflow: hidden;
}

.pfm-modal .pf-child-tbl th {
	background: var(--pf-gray-100);
	font-size: 10px;
}

.pfm-modal .pf-child-tbl input,
.pfm-modal .pf-child-tbl select {
	border-radius: var(--pf-r-sm);
	border: 1.5px solid var(--pf-gray-200);
	padding: 5px 8px;
}

.pfm-modal .pf-child-tbl input:focus,
.pfm-modal .pf-child-tbl select:focus {
	border-color: var(--pf-primary);
	box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
	outline: none;
}

.pfm-modal .pf-child-add {
	border-radius: var(--pf-r-sm);
	border: 1.5px dashed var(--pf-primary);
	color: var(--pf-primary);
	font-weight: 600;
	padding: 4px;
	margin-top: 4px;
}

.pfm-modal .pf-child-add:hover {
	background: var(--pf-primary-lighter);
	border-color: var(--pf-primary-hover);
	color: var(--pf-primary-hover);
}

/* ═══ Settings Inline View ═══ */
.pf-settings-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding: 20px;
}

.pf-settings-card {
	background: var(--pf-glass-bg);
	backdrop-filter: var(--pf-glass-blur);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	border: var(--pf-glass-border);
	border-radius: var(--pf-r-lg);
	overflow: hidden;
	box-shadow: var(--pf-card-shadow);
	transition: box-shadow 0.25s ease;
}

.pf-settings-card:hover {
	box-shadow: var(--pf-card-shadow-hover);
}

.pf-settings-card-header {
	background: linear-gradient(135deg, #1a2e1a, #2a4a2a);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.pf-settings-card-icon { font-size: 20px; }
.pf-settings-card-title { font-size: var(--pf-sm); font-weight: 600; }

.pf-settings-card-body { padding: 12px 18px; }

.pf-settings-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--pf-gray-100);
}
.pf-settings-row:last-child { border-bottom: none; }

.pf-settings-label {
	font-size: var(--pf-xs);
	font-weight: 600;
	color: var(--pf-gray-600);
}

.pf-settings-reqd { color: var(--pf-danger); }

.pf-settings-value {
	font-size: var(--pf-sm);
	font-weight: 500;
}

.pf-settings-configured { color: var(--pf-primary); }
.pf-settings-missing { color: var(--pf-gray-400); }
.pf-settings-empty { font-style: italic; }

/* ─── Item Mappings Wizard ─── */
.pf-card-hdr-sub {
	font-size: var(--pf-xs);
	color: var(--pf-gray-400);
	font-weight: 400;
}

/* Wizard steps bar */
.pf-wiz-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 16px;
	border-bottom: 1px solid var(--pf-gray-100);
	gap: 0;
}

.pf-wiz-step {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pf-wiz-step-circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pf-gray-100);
	color: var(--pf-gray-500);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
	transition: all 0.3s;
}

.pf-wiz-step.done .pf-wiz-step-circle {
	background: var(--pf-primary);
	color: #fff;
}

.pf-wiz-step-info { display: flex; flex-direction: column; }

.pf-wiz-step-label {
	font-size: var(--pf-xs);
	font-weight: 600;
	color: var(--pf-gray-500);
}

.pf-wiz-step.done .pf-wiz-step-label { color: var(--pf-primary); }

.pf-wiz-step-count {
	font-size: 11px;
	color: var(--pf-gray-400);
}

.pf-wiz-step-line {
	width: 40px;
	height: 2px;
	background: var(--pf-gray-200);
	margin: 0 8px;
	flex-shrink: 0;
}

.pf-wiz-step.done + .pf-wiz-step-line,
.pf-wiz-step.done .pf-wiz-step-line { background: var(--pf-primary); }

/* Wizard panels */
.pf-wiz-panel {
	padding: 20px;
	border-bottom: 1px solid var(--pf-gray-50);
}

.pf-wiz-panel:last-child { border-bottom: none; }

.pf-wiz-panel-hdr h4 {
	font-size: var(--pf-sm);
	font-weight: 700;
	color: var(--pf-gray-700);
	margin: 0 0 4px;
}

.pf-wiz-panel-hdr p {
	font-size: var(--pf-xs);
	color: var(--pf-gray-500);
	margin: 0 0 12px;
}

.pf-wiz-panel-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* Grade tags */
.pf-wiz-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.pf-wiz-tag {
	display: inline-flex;
	padding: 4px 12px;
	border-radius: 20px;
	background: rgba(46, 125, 50, 0.08);
	color: var(--pf-primary);
	font-size: var(--pf-xs);
	font-weight: 600;
	border: 1px solid rgba(46, 125, 50, 0.15);
}

[data-theme="dark"] .pf-wiz-step-circle { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .pf-wiz-step.done .pf-wiz-step-circle { background: var(--pf-primary); }
[data-theme="dark"] .pf-wiz-panel-hdr h4 { color: var(--pf-gray-200); }
[data-theme="dark"] .pf-wiz-steps { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .pf-wiz-panel { border-bottom-color: rgba(255,255,255,0.04); }

.pf-mappings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	padding: 16px;
}

.pf-mapping-group {
	background: var(--pf-glass-bg);
	border: var(--pf-glass-border);
	border-radius: var(--pf-r-md);
	overflow: hidden;
}

.pf-mapping-group-header {
	background: linear-gradient(135deg, #1a3a1a, #2a5a2a);
	color: #fff;
	padding: 10px 14px;
	font-size: var(--pf-sm);
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pf-mapping-count {
	font-size: var(--pf-xs);
	font-weight: 400;
	opacity: 0.7;
}

.pf-mapping-tbl {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pf-xs);
}

.pf-mapping-tbl th {
	background: var(--pf-gray-50);
	padding: 6px 12px;
	text-align: start;
	font-weight: 600;
	color: var(--pf-gray-600);
	border-bottom: 1px solid var(--pf-gray-100);
}

.pf-mapping-tbl td {
	padding: 6px 12px;
	border-bottom: 1px solid var(--pf-gray-50);
}

.pf-mapping-tbl tr:last-child td { border-bottom: none; }

.pf-mapping-item {
	color: var(--pf-primary);
	font-weight: 500;
}

.pf-mapping-group-empty {
	padding: 12px 14px;
	color: var(--pf-gray-400);
	font-size: var(--pf-xs);
	font-style: italic;
}

/* Stats bar */
.pf-mapping-stats {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--pf-gray-100);
	flex-wrap: wrap;
}

.pf-mapping-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.pf-mapping-stat-val {
	font-size: 22px;
	font-weight: 700;
	color: var(--pf-primary);
}

.pf-mapping-stat-lbl {
	font-size: var(--pf-xs);
	color: var(--pf-gray-500);
}

.pf-mapping-stat-action {
	margin-inline-start: auto;
}

/* Empty state */
.pf-mapping-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px;
	text-align: center;
}

.pf-mapping-empty-icon {
	font-size: 48px;
	margin-bottom: 12px;
	opacity: 0.4;
}

.pf-mapping-empty-title {
	font-size: var(--pf-md);
	font-weight: 700;
	color: var(--pf-gray-700);
	margin-bottom: 8px;
}

.pf-mapping-empty-desc {
	font-size: var(--pf-sm);
	color: var(--pf-gray-500);
	margin-bottom: 4px;
}

.pf-mapping-empty-steps {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 20px 0;
	text-align: start;
}

.pf-mapping-step {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--pf-sm);
	color: var(--pf-gray-600);
}

.pf-mapping-step-num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--pf-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

.pf-mapping-empty-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

[data-theme="dark"] .pf-mapping-group-header { background: linear-gradient(135deg, #0d1a0d, #1a2e1a); }
[data-theme="dark"] .pf-mapping-tbl th { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .pf-mapping-empty-title { color: var(--pf-gray-300); }
[data-theme="dark"] .pf-mapping-stats { border-bottom-color: rgba(255,255,255,0.06); }

/* ═══ Responsive Modal ═══ */
@media (max-width: 900px) {
	.pfm-lg, .pfm-xl { max-width: 95%; }
	.pfm-row { flex-direction: column; gap: 0; }
	.pf-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.pfm-header { padding: 14px 18px; }
	.pfm-body { padding: 18px; }
	.pfm-footer { padding: 12px 18px; flex-wrap: wrap; gap: 8px; }
	.pfm-title { font-size: var(--pf-base); }
}

/* ═══ Focus Accessibility ═══ */
.pf-btn-new:focus-visible,
.pfm-btn:focus-visible,
.pf-tbl-btn:focus-visible,
.pf-nav-item:focus-visible {
	outline: 2px solid var(--pf-primary);
	outline-offset: 2px;
}

/* ═══ Dark Mode ═══ */
[data-theme="dark"] {
	--pf-page-bg: var(--bg-color);
	--pf-glass-bg: var(--card-bg);
	--pf-glass-border: 1px solid var(--border-color);
	--pf-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
	--pf-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(0, 0, 0, 0.15);
	--pf-gray-50: var(--bg-color);
	--pf-gray-100: var(--border-color);
	--pf-gray-200: var(--border-color);
	--pf-gray-400: var(--text-muted);
	--pf-gray-500: var(--text-muted);
	--pf-gray-600: var(--text-muted);
	--pf-gray-800: var(--text-color);
	--pf-gray-900: var(--text-color);
}

[data-theme="dark"] .pf-sidebar { background: #0d1a0d; }
[data-theme="dark"] .pfm-header { background: linear-gradient(135deg, #0d1a0d, #1a2e1a); }
[data-theme="dark"] .pf-settings-card-header { background: linear-gradient(135deg, #0d1a0d, #1a2e1a); }
[data-theme="dark"] .pfm-body { background: var(--bg-color); }
[data-theme="dark"] .pfm-modal { background: var(--card-bg); }
[data-theme="dark"] .pfm-footer { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .pfm-input { background: var(--card-bg); color: var(--text-color); border-color: var(--border-color); }
[data-theme="dark"] .pfm-link-dropdown { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .pfm-link-option:hover { background: var(--bg-color); }
[data-theme="dark"] .pfm-confirm { background: var(--card-bg); }
[data-theme="dark"] .pfm-confirm-body { color: var(--text-color); }

/* ═══ 3-Column Grid ═══ */
.pf-grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
}

@media (max-width: 900px) {
	.pf-grid-3 { grid-template-columns: 1fr; }
}

/* ═══ Export Buttons ═══ */
.pf-btn-export {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--pf-gray-200);
	border-radius: var(--pf-r-sm);
	background: #fff;
	color: var(--pf-gray-500);
	cursor: pointer;
	transition: all 0.15s ease;
}
.pf-btn-export:hover {
	border-color: var(--pf-primary);
	color: var(--pf-primary);
	background: var(--pf-primary-lighter);
	transform: translateY(-1px);
}
.pf-btn-export svg { width: 14px; height: 14px; }

/* ═══ Outline Button Variant ═══ */
.pf-btn-outline {
	background: transparent !important;
	border: 1.5px solid var(--pf-primary) !important;
	color: var(--pf-primary) !important;
	box-shadow: none !important;
}
.pf-btn-outline:hover {
	background: var(--pf-primary-lighter) !important;
}

/* ═══ Calendar ═══ */
.pf-cal {
	padding: 16px;
}

.pf-cal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.pf-cal-title {
	font-size: var(--pf-md);
	font-weight: 700;
	color: var(--pf-gray-800);
}

.pf-cal-nav {
	background: none;
	border: 1.5px solid var(--pf-gray-200);
	border-radius: var(--pf-r-sm);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--pf-gray-600);
	font-size: 12px;
	transition: all 0.15s ease;
}
.pf-cal-nav:hover {
	border-color: var(--pf-primary);
	color: var(--pf-primary);
	background: var(--pf-primary-lighter);
}

.pf-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.pf-cal-day-name {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	color: var(--pf-gray-400);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 6px 0;
}

.pf-cal-cell {
	min-height: 64px;
	padding: 6px;
	border-radius: var(--pf-r-sm);
	background: var(--pf-gray-50);
	transition: background 0.15s ease;
	cursor: default;
	position: relative;
}

.pf-cal-cell:hover {
	background: var(--pf-gray-100);
}

.pf-cal-empty {
	background: transparent;
}

.pf-cal-today {
	background: var(--pf-primary-lighter) !important;
	border: 1.5px solid var(--pf-primary);
}

.pf-cal-has-events {
	cursor: pointer;
}

.pf-cal-num {
	font-size: var(--pf-xs);
	font-weight: 600;
	color: var(--pf-gray-600);
}

.pf-cal-today .pf-cal-num {
	color: var(--pf-primary);
	font-weight: 700;
}

.pf-cal-dots {
	display: flex;
	gap: 3px;
	margin-top: 4px;
	flex-wrap: wrap;
}

.pf-cal-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
}

.pf-cal-more {
	font-size: 9px;
	color: var(--pf-gray-400);
	font-weight: 600;
}

/* ═══ Health Score Card ═══ */
.pf-health-content {
	min-height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ═══ Invoice-Style Modal (Date Sale) ═══ */
.pfm-invoice { max-width: 1060px; }
.pfm-invoice .pfm-header {
	background: linear-gradient(135deg, #4a2dbd 0%, #7c3aed 100%);
}
.pfm-invoice .pfm-header::after {
	background: linear-gradient(90deg, #7c3aed, #a78bfa, #c4b5fd);
}
.pfm-invoice .pfm-body { padding: 0; max-height: 80vh; }

/* Invoice Header Fields */
.inv-header {
	background: var(--pf-gray-100);
	padding: 10px 16px;
	border-bottom: 1px solid var(--pf-gray-200);
}
.inv-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 6px;
}
.inv-row:last-child { margin-bottom: 0; }
.inv-field { min-width: 0; }
.inv-label {
	display: block;
	font-size: 9px;
	font-weight: 700;
	color: var(--pf-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 2px;
}
.inv-input {
	padding: 5px 8px !important;
	font-size: var(--pf-xs) !important;
	border-radius: 6px !important;
	height: 30px;
}
.inv-textarea {
	height: 30px !important;
	min-height: 30px !important;
	resize: none;
}
.inv-header .pfm-link-dropdown { z-index: 200; }

/* Invoice Main - Two Panels */
.inv-main {
	display: grid;
	grid-template-columns: 280px 1fr;
	min-height: 300px;
}

/* Left Panel - Totals */
.inv-left {
	padding: 12px;
	border-inline-end: 1px solid var(--pf-gray-200);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.inv-totals-card {
	background: #fff;
	border: 1px solid var(--pf-gray-200);
	border-radius: var(--pf-r-md);
	padding: 10px;
}
.inv-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid var(--pf-gray-100);
	font-size: var(--pf-xs);
	color: var(--pf-gray-600);
	font-weight: 600;
}
.inv-total-row:last-child { border-bottom: none; }
.inv-total-input {
	width: 100px !important;
	text-align: left;
	padding: 4px 8px !important;
	font-size: var(--pf-sm) !important;
	border-radius: 6px !important;
	background: var(--pf-gray-50) !important;
	border-color: transparent !important;
	font-weight: 700;
	color: var(--pf-gray-800) !important;
}
.inv-total-main { padding: 8px 0; }
.inv-total-big {
	font-size: var(--pf-lg) !important;
	color: var(--pf-primary) !important;
	font-weight: 800 !important;
}

/* References */
.inv-refs {
	background: #fff;
	border: 1px solid var(--pf-gray-200);
	border-radius: var(--pf-r-md);
	padding: 8px 10px;
}
.inv-ref-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--pf-xs);
	padding: 3px 0;
	color: var(--pf-gray-500);
}
.inv-ref-val {
	font-weight: 600;
	color: var(--pf-tertiary);
}

/* Right Panel - Items */
.inv-right {
	padding: 8px 12px;
	overflow-y: auto;
}
.inv-right .pfm-html-container { margin: 0; }
.inv-right .pf-child-tbl { font-size: var(--pf-xs); }
.inv-right .pf-child-tbl th { padding: 5px 6px; font-size: 9px; }
.inv-right .pf-child-tbl td { padding: 3px 4px; }
.inv-right .pf-child-tbl input,
.inv-right .pf-child-tbl select { padding: 4px 6px; font-size: var(--pf-xs); }

/* Responsive */
@media (max-width: 900px) {
	.inv-main { grid-template-columns: 1fr; }
	.inv-left { border-inline-end: none; border-bottom: 1px solid var(--pf-gray-200); }
	.inv-row { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ Dark Mode Additions ═══ */
[data-theme="dark"] .pf-cal-cell { background: var(--bg-color); }
[data-theme="dark"] .pf-cal-cell:hover { background: var(--border-color); }
[data-theme="dark"] .pf-btn-export { background: var(--card-bg); border-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .pf-btn-export:hover { border-color: var(--pf-primary); color: var(--pf-primary); }
[data-theme="dark"] .inv-header { background: var(--bg-color); }
[data-theme="dark"] .inv-totals-card { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .inv-refs { background: var(--card-bg); border-color: var(--border-color); }

/* ═══ Add Palm Wizard (shared with Cost Wizard) ═══ */
.pf-wizard-steps { display: flex; gap: 8px; margin-bottom: 24px; }
.pf-wizard-title { font-size: var(--pf-lg); font-weight: 600; color: var(--pf-gray-800); margin-bottom: 4px; }
.pf-wizard-desc { font-size: var(--pf-sm); color: var(--pf-gray-500); margin-bottom: 20px; }
.pf-type-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pf-type-card { padding: 16px; border: 2px solid var(--pf-gray-200); border-radius: var(--pf-r-md); cursor: pointer; transition: all 0.2s; background: #fff; }
.pf-type-card:hover { border-color: var(--pf-gray-300); }
.pf-type-card.selected { border-color: var(--pf-primary); background: rgba(34,197,94,0.04); }
.pf-type-card-name { font-size: var(--pf-base); font-weight: 600; color: var(--pf-gray-800); margin-bottom: 8px; }
.pf-type-card-stats { display: flex; flex-direction: column; gap: 6px; }
.pf-type-card-stat { display: flex; align-items: center; gap: 6px; font-size: var(--pf-sm); color: var(--pf-gray-600); }
.pf-type-card-stat svg { flex-shrink: 0; color: var(--pf-gray-400); }
.pf-type-card.selected .pf-type-card-stat svg { color: var(--pf-primary); }
.pf-type-card-info { font-size: var(--pf-xs); color: var(--pf-gray-500); }
.pf-source-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.pf-source-btn { padding: 20px 16px; border: 2px solid var(--pf-gray-200); border-radius: var(--pf-r-md); text-align: center; cursor: pointer; transition: all 0.2s; background: #fff; }
.pf-source-btn:hover { border-color: var(--pf-gray-300); }
.pf-source-btn.selected { border-color: var(--pf-primary); background: rgba(34,197,94,0.04); }
.pf-source-btn svg { display: block; margin: 0 auto 8px; color: var(--pf-gray-400); }
.pf-source-btn.selected svg { color: var(--pf-primary); }
.pf-source-btn span { font-size: var(--pf-sm); font-weight: 500; color: var(--pf-gray-700); }
.pf-implant-toggle { display: flex; gap: 8px; margin-bottom: 20px; }
.pf-impl-btn { flex: 1; padding: 10px; border: 2px solid var(--pf-gray-200); border-radius: var(--pf-r-md); text-align: center; cursor: pointer; font-weight: 500; transition: all 0.2s; background: #fff; }
.pf-impl-btn.selected { border-color: var(--pf-primary); background: rgba(34,197,94,0.04); color: var(--pf-primary); }
.pf-wizard-fields { display: flex; flex-direction: column; gap: 16px; }
.pf-wizard-field { display: flex; flex-direction: column; gap: 4px; }
.pf-wizard-field label { font-size: var(--pf-sm); font-weight: 500; color: var(--pf-gray-600); }
.pf-wizard-field input, .pf-wizard-field select { padding: 8px 12px; border: 1px solid var(--pf-gray-200); border-radius: var(--pf-r-sm); font-size: var(--pf-base); }
.pf-wizard-field input:focus, .pf-wizard-field select:focus { border-color: var(--pf-primary); outline: none; box-shadow: 0 0 0 3px rgba(34,197,94,0.1); }
.pf-qty-row { display: flex; align-items: center; gap: 12px; }
.pf-qty-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pf-gray-200); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--pf-gray-600); transition: all 0.2s; }
.pf-qty-btn:hover { border-color: var(--pf-primary); color: var(--pf-primary); }
.pf-qty-input { width: 80px; text-align: center; font-size: var(--pf-xl); font-weight: 600; border: 1px solid var(--pf-gray-200); border-radius: var(--pf-r-sm); padding: 6px; }
.pf-qty-total { margin-top: 12px; padding: 12px 16px; background: var(--pf-gray-50); border-radius: var(--pf-r-sm); font-size: var(--pf-sm); color: var(--pf-gray-600); }
.pf-qty-total strong { font-size: var(--pf-lg); color: var(--pf-gray-800); }

/* ═══════════════════════════════════════════════════════════════
   Phase 3+4: Harvest & Sale Improvements
   ═══════════════════════════════════════════════════════════════ */

.pf-grade-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pf-xs); padding: 2px 8px; border-radius: 999px; }
.pf-grade-status.mapped { background: rgba(34,197,94,0.1); color: #16a34a; }
.pf-grade-status.unmapped { background: rgba(220,38,38,0.1); color: #dc2626; }

.pf-mapping-count { font-size: var(--pf-sm); color: var(--pf-gray-500); margin-bottom: 12px; }
.pf-mapping-count strong { color: var(--pf-gray-800); }

.pf-harvest-totals { margin-top: 16px; padding: 12px 16px; background: var(--pf-gray-50); border-radius: var(--pf-r-sm); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pf-harvest-total { text-align: center; }
.pf-harvest-total-val { font-size: var(--pf-lg); font-weight: 700; color: var(--pf-gray-800); }
.pf-harvest-total-lbl { font-size: var(--pf-xs); color: var(--pf-gray-500); }

.pf-stock-hint { font-size: 10px; color: var(--pf-gray-400); }
.pf-stock-hint.low { color: #dc2626; }

.pf-sale-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--pf-r-sm); background: var(--pf-primary); color: #fff; font-size: var(--pf-sm); cursor: pointer; border: none; margin-top: 8px; }
.pf-sale-link:hover { background: var(--pf-primary-hover); }

/* ═══════════════════════════════════════════════════════════════
   Phase 5: Report Improvements
   ═══════════════════════════════════════════════════════════════ */

.pf-report-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.pf-report-kpi { background: #fff; padding: 14px 16px; border-radius: var(--pf-r-md); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.pf-report-kpi-val { font-size: var(--pf-xl); font-weight: 700; color: var(--pf-gray-800); }
.pf-report-kpi-lbl { font-size: var(--pf-xs); color: var(--pf-gray-500); margin-top: 4px; }
.pf-report-kpi-trend { font-size: var(--pf-xs); margin-top: 4px; display: inline-flex; align-items: center; gap: 2px; }
.pf-report-kpi-trend.up { color: #22c55e; }
.pf-report-kpi-trend.down { color: #ef4444; }

.pf-date-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pf-date-presets button { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--pf-gray-200); font-size: var(--pf-xs); cursor: pointer; background: #fff; color: var(--pf-gray-600); transition: all 0.15s; }
.pf-date-presets button:hover { border-color: var(--pf-primary); color: var(--pf-primary); }
.pf-date-presets button.active { background: var(--pf-primary); color: #fff; border-color: var(--pf-primary); }

.pf-tbl th.sortable { cursor: pointer; user-select: none; }
.pf-tbl th.sortable::after { content: '\2195'; margin-inline-start: 4px; opacity: 0.3; font-size: 10px; }
.pf-tbl th.sort-asc::after { content: '\2191'; opacity: 1; }
.pf-tbl th.sort-desc::after { content: '\2193'; opacity: 1; }
.pf-tbl tr.pf-total-row td { font-weight: 700; border-top: 2px solid var(--pf-gray-300); color: var(--pf-gray-800); }

/* ═══════════════════════════════════════════════════════════════
   Phase 6: General UX
   ═══════════════════════════════════════════════════════════════ */

/* Quick Actions */
.pf-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pf-quick-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--pf-gray-200); border-radius: var(--pf-r-md); background: #fff; color: var(--pf-gray-700); font-size: var(--pf-sm); font-weight: 500; cursor: pointer; transition: all 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.pf-quick-btn:hover { border-color: var(--pf-primary); color: var(--pf-primary); box-shadow: 0 2px 6px rgba(34,197,94,0.1); }
.pf-quick-btn svg { color: var(--pf-gray-400); transition: color 0.15s; }
.pf-quick-btn:hover svg { color: var(--pf-primary); }

/* Empty States */
.pf-empty-state { text-align: center; padding: 48px 24px; }
.pf-empty-state svg { width: 48px; height: 48px; color: var(--pf-gray-300); margin-bottom: 12px; }
.pf-empty-state h4 { font-size: var(--pf-base); color: var(--pf-gray-500); font-weight: 500; margin: 0 0 6px; }
.pf-empty-state p { font-size: var(--pf-sm); color: var(--pf-gray-400); margin: 0 0 16px; }
.pf-empty-state button { padding: 8px 20px; border-radius: var(--pf-r-md); background: var(--pf-primary); color: #fff; border: none; font-size: var(--pf-sm); cursor: pointer; }
.pf-empty-state button:hover { background: var(--pf-primary-hover); }

/* Loading Skeletons */
.pf-skeleton { background: linear-gradient(90deg, var(--pf-gray-100) 25%, var(--pf-gray-50) 50%, var(--pf-gray-100) 75%); background-size: 200% 100%; animation: pf-shimmer 1.5s infinite; border-radius: var(--pf-r-sm); }
@keyframes pf-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pf-skeleton-row { height: 16px; margin-bottom: 8px; }
.pf-skeleton-card { height: 120px; border-radius: var(--pf-r-md); }

/* Toast Notifications */
.pf-toast-container { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10001; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.pf-toast { padding: 10px 20px; border-radius: var(--pf-r-md); font-size: var(--pf-sm); font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,0.12); pointer-events: auto; animation: pf-toast-in 0.3s ease-out; display: flex; align-items: center; gap: 8px; }
.pf-toast.success { background: #16a34a; color: #fff; }
.pf-toast.error { background: #dc2626; color: #fff; }
.pf-toast.warning { background: #ca8a04; color: #fff; }
.pf-toast.info { background: #0284c7; color: #fff; }
.pf-toast svg { width: 16px; height: 16px; flex-shrink: 0; }
@keyframes pf-toast-in { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pf-toast-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-20px); opacity: 0; } }

/* ═══ Enhanced Inventory Cards ═══ */
.pf-inv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.pf-inv-header h3 { margin: 0; font-size: var(--pf-xl); font-weight: 700; }
.pf-inv-action-btn.primary { background: var(--pf-primary); color: #fff; border-color: var(--pf-primary); font-weight: 600; }
.pf-inv-action-btn.primary:hover { background: #16a34a; }
.pf-inv-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.pf-inv-kpi { background: #fff; border-radius: var(--pf-r-lg); padding: 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); border: 1px solid var(--pf-gray-100); text-align: center; }
.pf-inv-kpi-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.pf-inv-kpi-icon.trees { background: rgba(34,197,94,0.1); color: #22c55e; }
.pf-inv-kpi-icon.seedlings { background: rgba(14,165,233,0.1); color: #0ea5e9; }
.pf-inv-kpi-icon.value { background: rgba(168,85,247,0.1); color: #a855f7; }
.pf-inv-kpi-icon.stock { background: rgba(249,115,22,0.1); color: #f97316; }
.pf-inv-kpi-icon.grades { background: rgba(234,179,8,0.1); color: #eab308; }
.pf-inv-kpi-val { font-size: var(--pf-xl); font-weight: 700; color: var(--pf-gray-900); }
.pf-inv-kpi-lbl { font-size: var(--pf-xs); color: var(--pf-gray-500); margin-top: 2px; }

.pf-inv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.pf-inv-card { background: #fff; border-radius: var(--pf-r-lg); padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); border: 1px solid var(--pf-gray-100); transition: box-shadow 0.2s; }
.pf-inv-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.pf-inv-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pf-inv-card-name { font-size: var(--pf-lg); font-weight: 700; color: var(--pf-gray-900); }
.pf-inv-card-badge { font-size: var(--pf-xs); padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.pf-inv-card-badge.healthy { background: rgba(34,197,94,0.1); color: #16a34a; }
.pf-inv-card-badge.seedling { background: rgba(14,165,233,0.1); color: #0284c7; }
.pf-inv-card-badge.warning { background: rgba(234,179,8,0.1); color: #ca8a04; }

.pf-inv-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.pf-inv-card-stat { text-align: center; padding: 8px 4px; background: var(--pf-gray-50); border-radius: var(--pf-r-sm); }
.pf-inv-card-stat-val { font-size: var(--pf-base); font-weight: 700; color: var(--pf-gray-900); }
.pf-inv-card-stat-lbl { font-size: 10px; color: var(--pf-gray-500); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

.pf-inv-opening { font-size: var(--pf-xs); color: var(--pf-gray-600); background: rgba(14,165,233,0.05); border: 1px solid rgba(14,165,233,0.15); border-radius: var(--pf-r-sm); padding: 6px 10px; margin-bottom: 12px; }
.pf-inv-opening-label { font-weight: 600; color: #0284c7; }

.pf-inv-card-meta { margin-bottom: 14px; }
.pf-inv-meta-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: var(--pf-sm); border-bottom: 1px solid var(--pf-gray-50); }
.pf-inv-meta-row span:first-child { color: var(--pf-gray-500); }
.pf-inv-meta-row strong { color: var(--pf-gray-900); font-weight: 600; }
.pf-inv-meta-row strong.positive { color: #16a34a; }
.pf-inv-meta-row strong.negative { color: #dc2626; }
.pf-inv-meta-row small { color: var(--pf-gray-400); font-size: var(--pf-xs); margin-inline-start: 6px; }

.pf-inv-grade-stock { border-top: 1px solid var(--pf-gray-100); padding-top: 12px; margin-bottom: 12px; }
.pf-inv-grade-stock-title { font-size: var(--pf-sm); font-weight: 600; color: var(--pf-gray-700); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pf-inv-grade-stock-title span { font-weight: 400; color: var(--pf-gray-400); }
.pf-inv-grade-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--pf-sm); border-bottom: 1px dashed var(--pf-gray-50); }
.pf-inv-grade-row .grade-name { font-weight: 600; color: var(--pf-gray-800); min-width: 80px; }
.pf-inv-grade-row .grade-item { color: var(--pf-gray-400); font-size: var(--pf-xs); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-inv-grade-row .grade-qty { font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-inv-grade-row .grade-qty.in-stock { color: #16a34a; }
.pf-inv-grade-row .grade-qty.no-stock { color: var(--pf-gray-400); }

.pf-inv-no-items { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(234,179,8,0.05); border: 1px solid rgba(234,179,8,0.15); border-radius: var(--pf-r-sm); margin-bottom: 12px; font-size: var(--pf-sm); color: #ca8a04; }
.pf-inv-no-items a { color: var(--pf-primary); font-weight: 600; cursor: pointer; text-decoration: underline; }

.pf-inv-card-actions { display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--pf-gray-100); flex-wrap: wrap; }
.pf-inv-action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: var(--pf-r-sm); font-size: var(--pf-xs); cursor: pointer; border: 1px solid var(--pf-gray-200); background: #fff; color: var(--pf-gray-700); font-weight: 500; transition: all 0.15s; }
.pf-inv-action-btn:hover { border-color: var(--pf-primary); color: var(--pf-primary); background: rgba(34,197,94,0.04); }

/* ═══ Cost Entry Wizard ═══ */
.pf-cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.pf-cost-item { background: var(--pf-gray-50); border: 1px solid var(--pf-gray-100); border-radius: var(--pf-r-md); padding: 14px; transition: border-color 0.2s; }
.pf-cost-item:focus-within { border-color: var(--pf-primary); background: #fff; }
.pf-cost-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: var(--pf-sm); font-weight: 600; color: var(--pf-gray-700); }
.pf-cost-item-header svg { color: var(--pf-gray-400); }
.pf-cost-input { width: 100%; padding: 10px 12px; border: 1px solid var(--pf-gray-200); border-radius: var(--pf-r-sm); font-size: var(--pf-lg); font-weight: 600; text-align: center; background: #fff; }
.pf-cost-input:focus { border-color: var(--pf-primary); outline: none; box-shadow: 0 0 0 3px rgba(34,197,94,0.1); }
.pf-cost-total-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--pf-primary); color: #fff; border-radius: var(--pf-r-md); font-weight: 600; font-size: var(--pf-lg); }
.pf-cost-total-val { font-size: var(--pf-2xl); font-weight: 700; }

.pf-cost-palm-select { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

/* ═══ Wizard Step Labels ═══ */
.pf-wizard-step { display: flex; align-items: center; gap: 8px; flex: 1; padding: 10px 14px; background: var(--pf-gray-50); border-radius: var(--pf-r-md); border: 1px solid var(--pf-gray-100); }
.pf-wizard-step.active { background: rgba(34,197,94,0.08); border-color: var(--pf-primary); }
.pf-wizard-step.done { background: rgba(34,197,94,0.04); border-color: rgba(34,197,94,0.3); }
.pf-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--pf-xs); font-weight: 700; background: var(--pf-gray-200); color: var(--pf-gray-600); flex-shrink: 0; }
.pf-wizard-step.active .pf-step-num { background: var(--pf-primary); color: #fff; }
.pf-wizard-step.done .pf-step-num { background: #16a34a; color: #fff; }
.pf-step-label { font-size: var(--pf-xs); font-weight: 500; color: var(--pf-gray-500); }
.pf-wizard-step.active .pf-step-label { color: var(--pf-gray-900); font-weight: 600; }

.pf-wizard-body { padding: 20px 0; min-height: 200px; }
.pf-wizard-nav { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--pf-gray-100); }
.pf-wizard-btn-back { padding: 8px 20px; border-radius: var(--pf-r-sm); border: 1px solid var(--pf-gray-200); background: #fff; font-weight: 500; cursor: pointer; }
.pf-wizard-btn-next { padding: 8px 24px; border-radius: var(--pf-r-sm); border: none; background: var(--pf-primary); color: #fff; font-weight: 600; cursor: pointer; }
.pf-wizard-btn-next:hover { background: #16a34a; }
.pf-wizard-btn-submit { padding: 10px 28px; border-radius: var(--pf-r-sm); border: none; background: var(--pf-primary); color: #fff; font-weight: 700; cursor: pointer; font-size: var(--pf-base); }
.pf-wizard-btn-submit:hover { background: #16a34a; }

/* ═══ Review Card ═══ */
.pf-review-card { background: var(--pf-gray-50); border: 1px solid var(--pf-gray-100); border-radius: var(--pf-r-lg); padding: 24px; }
.pf-review-title { font-size: var(--pf-lg); font-weight: 700; margin-bottom: 16px; color: var(--pf-gray-900); }
.pf-review-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.pf-review-row span { color: var(--pf-gray-500); }
.pf-review-row strong { color: var(--pf-gray-900); font-weight: 600; }
.pf-review-row.total { font-size: var(--pf-lg); }
.pf-review-row.total strong { color: var(--pf-primary); font-size: var(--pf-xl); }
.pf-review-divider { height: 1px; background: var(--pf-gray-200); margin: 8px 0; }

/* ═══ Value color classes ═══ */
.pf-val-positive, .positive { color: #16a34a !important; }
.pf-val-negative, .negative { color: #dc2626 !important; }
.pf-val-warn { color: #ca8a04 !important; }

/* ═══ Inventory Count Table ═══ */
.pf-inv-count-tbl { width: 100%; border-collapse: collapse; }
.pf-inv-count-tbl th { background: var(--pf-gray-50); padding: 10px 12px; font-size: var(--pf-sm); font-weight: 600; text-align: start; border-bottom: 2px solid var(--pf-gray-200); }
.pf-inv-count-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--pf-gray-100); }
.pf-inv-count-tbl input { width: 80px; padding: 6px 8px; border: 1px solid var(--pf-gray-200); border-radius: var(--pf-r-sm); text-align: center; font-weight: 600; }
.pf-inv-count-tbl input:focus { border-color: var(--pf-primary); outline: none; }
.pf-inv-diff { font-weight: 700; text-align: center; }
.pf-inv-diff.positive { color: #16a34a; }
.pf-inv-diff.negative { color: #dc2626; }
.pf-inv-diff.zero { color: var(--pf-gray-400); }

/* ═══ Sale Wizard ═══ */
.pf-sale-palm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pf-type-card-stock { font-size: var(--pf-xs); color: #16a34a; margin-top: 4px; font-weight: 600; }
.pf-sale-items-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.pf-sale-items-header h4 { margin: 0; }
.pf-sale-map-good { color: #16a34a; font-weight: 600; font-size: var(--pf-sm); }
.pf-sale-map-warn { color: #ca8a04; font-weight: 600; font-size: var(--pf-sm); }
.pf-sale-items-tbl { width: 100%; border-collapse: collapse; }
.pf-sale-items-tbl th { background: var(--pf-gray-50); padding: 10px 12px; font-size: var(--pf-sm); font-weight: 600; text-align: start; border-bottom: 2px solid var(--pf-gray-200); white-space: nowrap; }
.pf-sale-items-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--pf-gray-100); vertical-align: middle; }
.pf-sale-items-tbl tr:hover { background: var(--pf-gray-50); }
.pf-sale-items-tbl .grade-cell { font-weight: 600; }
.pf-sale-item-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(34,197,94,0.1); color: #16a34a; font-size: var(--pf-xs); font-weight: 500; }
.pf-stock-ok { color: #16a34a; font-weight: 600; font-size: var(--pf-sm); }
.pf-stock-empty { color: #dc2626; font-weight: 600; font-size: var(--pf-sm); }
.sale-qty-input, .sale-rate-input { width: 100px !important; padding: 6px 8px !important; border: 1px solid var(--pf-gray-200) !important; border-radius: var(--pf-r-sm) !important; font-size: var(--pf-sm) !important; text-align: center !important; }
.sale-qty-input:focus, .sale-rate-input:focus { border-color: var(--pf-primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(34,197,94,0.1) !important; }
.pf-sale-totals-bar { display: flex; gap: 24px; margin-top: 16px; padding: 16px 20px; background: var(--pf-gray-50); border-radius: var(--pf-r-md); }
.pf-sale-total-item { display: flex; flex-direction: column; gap: 2px; }
.pf-sale-total-item span { font-size: var(--pf-xs); color: var(--pf-gray-500); }
.pf-sale-total-item strong { font-size: var(--pf-lg); }
.pf-sale-total-item.main strong { font-size: var(--pf-2xl); color: var(--pf-primary); }
.pf-sale-unmapped-warn { margin-top: 12px; padding: 10px 14px; background: rgba(220,38,38,0.05); border: 1px solid rgba(220,38,38,0.15); border-radius: var(--pf-r-md); font-size: var(--pf-sm); color: #dc2626; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-sale-unmapped-warn a { color: #dc2626; text-decoration: underline; cursor: pointer; }
.amount-cell strong { color: var(--pf-gray-700); font-size: var(--pf-sm); }

/* Responsive */
@media (max-width: 768px) {
	.pf-inv-summary { grid-template-columns: repeat(2, 1fr); }
	.pf-inv-cards { grid-template-columns: 1fr; }
	.pf-inv-card-stats { grid-template-columns: repeat(2, 1fr); }
	.pf-report-kpis { grid-template-columns: repeat(2, 1fr); }
	.pf-quick-actions { gap: 6px; }
	.pf-quick-btn { padding: 8px 12px; font-size: var(--pf-xs); }
	.pf-source-btns { grid-template-columns: 1fr; }
	.pf-type-cards { grid-template-columns: 1fr; }
	.pf-harvest-totals { grid-template-columns: 1fr; }
	.pf-wizard-steps { gap: 4px; }
	.pf-wizard-step { padding: 8px 10px; }
	.pf-step-label { display: none; }
	.pf-cost-grid { grid-template-columns: repeat(2, 1fr); }
	.pf-sale-palm-cards { grid-template-columns: 1fr; }
	.pf-sale-items-tbl th:nth-child(2), .pf-sale-items-tbl td:nth-child(2) { display: none; }
	.pf-sale-totals-bar { flex-direction: column; }
	.sale-qty-input, .sale-rate-input { width: 70px !important; }
}