@stratametriq/id-card-designer 1.1.0 → 1.4.0

package/README.md

@@ -9,15 +9,16 @@ Whether you are building an **Educational ERP / Student Information System**, **
 ## 🌟 Features
 
 - **🎨 Turnkey All-In-One Dashboard (`<IdCardManager />`):** Drop in a complete, ready-to-use workspace containing department tabs, live vector stage, batch A4 print setup, and roster selection table.
-- **✨ Interactive Visual Studio Canvas:** Drag-and-drop element positioning (`react-draggable`), real-time zoom controls (`80% - 200%`), grid snapping (`1mm / 5mm`), and Z-index layering.
-- **📏 Technical Precision Rulers & Grid Overlay:** Toggleable millimeter measurement rulers (`0mm - 86mm`) and radial matrix grid overlays for exact PVC card alignment.
+- **📁 Multiple Card Templates:** Full support for multiple pre-configured category layouts (*Student ID Cards*, *Faculty & Admin*, *Corporate HR*, *Hospital Portal*) and multi-orientation presets (*Vertical 54×86mm* and *Horizontal 86×54mm*).
+- **🔳 QR Code & Barcode Generation:** Built-in deterministic, high-resolution vector 1D Barcode (`<Barcode />`) and 2D QR Code (`<QrCode />`) generation with live database key binding.
+- **🏷️ Variable Placeholders (`{{name}}`, `{{employeeId}}`):** Seamless handlebar/mustache syntax interpolation across text labels, custom formulas, prefixes, and suffixes (`e.g., ID: {{admissionNo}} - {{studentName}}`).
+- **📥 Batch Generation from CSV or Excel (`.csv`):** One-click spreadsheet import instantly parses rows, maps headers, and populates hundreds of roster cards in real time.
+- **🖼️ High-Resolution PDF & PNG Export:** Dual production output options: Batch A4 multi-page PDF sheets (`html2canvas` + `jspdf` with hardware cut marks) alongside standalone high-resolution **300 DPI PNG export**.
 - **🔄 Undo & Redo History Control:** Full history stack tracking (`Ctrl+Z` / `Cmd+Z` to undo, `Ctrl+Y` / `Cmd+Shift+Z` to redo) alongside keyboard arrow key precision nudging (`1px` or `5px` with Shift).
-- **📝 Signature & Image File Uploads:** Upload Principal/Director signatures, employee photos, or organization logos (`PNG/JPG`) directly from the property inspector with live base64 conversion.
-- **🔄 Multi-Orientation Support:** Seamless switching between standard PVC card dimensions: **Vertical (54×86 mm)** and **Horizontal (86×54 mm)**.
-- **⚡ Professional Built-in Presets:** Starter templates including *Classic Traditional*, *Minimalist Modern*, *Sage Table Banner*, *Corporate Executive*, and *Medical Staff Pass*.
-- **🧩 Universal Element Types:** Dynamic text fields, static labels, custom shapes/dividers, profile photos, organization logos, signature slots, and visual barcodes/QRs.
-- **🔍 Inspector Panel & Property Editor:** Fine-grained styling for font family, size, weight, text alignment, text casing (`uppercase`, `lowercase`, `capitalize`, `togglecase`), background/border colors, radii, and prefixes/suffixes.
-- **📄 High-Resolution Batch PDF Export Engine:** Built-in multi-page A4 / Letter grid layout calculation with toggleable hardware guillotine cut marks, perimeter outlines, and registration headers (`html2canvas` + `jspdf`).
+- **📏 Grid Snapping & Alignment Guides:** Toggleable millimeter measurement rulers (`0mm - 86mm`), radial grid overlay with snap-to-grid accuracy (`1mm / 5mm`), and multi-element alignment guides (`Align Left, Center, Right`).
+- **🖼️ Dedicated Image Property Inspector:** Fine-grained controls for image elements including **Replace Image / Data Binding**, **Crop / Object Fit** (`cover`, `contain`, `fill`, `none`, `scale-down`), **Corner Radius** (`Circle` avatars or custom px), **Border** styling, **Opacity**, and **Box Shadow**.
+- **🔤 Advanced Text & Typography Inspector:** Complete control over **Font Family**, **Font Size**, **Font Weight**, **Text Color**, **Letter Spacing**, **Line Height**, **Text Alignment** (`Left`, `Center`, `Right`), **Rotation (°)**, **Opacity**, **Padding**, **Border & Divider Lines**, and **Box Shadow**.
+- **🔍 Instant Roster Search & Status Filters:** Real-time search bar across names, ID numbers, departments, and phone numbers, plus quick status filter pill tabs (`All | Selected | Unselected`).
 
 ---
 
@@ -37,6 +38,136 @@ import "@stratametriq/id-card-designer/dist/index.css";
 
 ---
 
+## 💼 Commercial & Enterprise Licensing
+
+`@stratametriq/id-card-designer` is dual-licensed to support both open-source developers and commercial enterprises:
+
+1. **Community / Open Source Tier (MIT License):**  
+   Free for non-commercial evaluation, personal open-source projects, and rendering standalone static preview widgets (`<IdCardPreview />`).
+2. **Commercial / Enterprise Tier (Commercial License):**  
+   Required for commercial SaaS applications, School ERP platforms, HR suites, and institutions using the **Turnkey Dashboard (`<IdCardManager />`)**, **CSV/Excel Bulk Import Parser**, or **Batch A4/Letter Multi-Page Print Engine (`generateIdCardsPdf`)** in commercial production.
+
+👉 **[Purchase a Commercial Enterprise License ($399 - $1,499) to Unlock Production Usage, White-Labeling & Priority Support](https://your-gumroad-or-lemonsqueezy-link.com)**
+
+---
+
+## 🚀 Sweet & Simple Guide: How to Use with Real Data & Features
+
+Whether you want a **1-Minute Turnkey Dashboard** (`<IdCardManager />`) or want to build your own **Custom Portal** using individual modular features (`<IdCardPreview />`, `<IdCardDesignerModal />`, `generateIdCardsPdf`), connecting your real database or API data is effortless!
+
+### Option 1: Turnkey All-In-One Dashboard (`<IdCardManager />`)
+
+By default, rendering `<IdCardManager />` without props opens our full interactive demo screen. To connect your **real API or database records**, simply pass them into the `sampleRecords` prop:
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import { IdCardManager } from '@stratametriq/id-card-designer';
+import '@stratametriq/id-card-designer/dist/index.css';
+
+export default function SchoolPortal() {
+  const [dbRecords, setDbRecords] = useState({ student: [], staff: [] });
+
+  // 1. Fetch real students/employees from your backend (Node.js, Laravel, Supabase, etc.)
+  useEffect(() => {
+    fetch('https://api.yourschool.com/students')
+      .then(res => res.json())
+      .then(data => setDbRecords({ student: data }));
+  }, []);
+
+  // 2. Pass your live data right into <IdCardManager />!
+  return (
+    <IdCardManager
+      sampleRecords={dbRecords}
+      
+      // Save customized card designs back to your database
+      onSaveCategoryTemplate={(category, templateSchema) => {
+        console.log(`Saving ${category} template to DB:`, templateSchema);
+      }}
+
+      // Listen when batch PDF export completes
+      onBatchExportComplete={(category, exportedRecords) => {
+        console.log(`Generated A4 PDF for ${exportedRecords.length} records!`);
+      }}
+    />
+  );
+}
+```
+
+---
+
+### Option 2: Building Custom Screens (Using Modular Features)
+
+If you don't want our full dashboard and instead want to embed specific ID card features directly into your own custom pages, tables, or profile screens, use our **standalone building blocks**:
+
+#### A. Show a Live ID Card on a Student Profile Page (`<IdCardPreview />`)
+```jsx
+import { IdCardPreview } from '@stratametriq/id-card-designer';
+
+function StudentProfilePage({ realStudentData, savedTemplateJson }) {
+  return (
+    <div className="profile-card-widget">
+      <h3>Student ID Card</h3>
+      
+      {/* Automatically binds realStudentData fields into the template */}
+      <IdCardPreview
+        templateSchema={savedTemplateJson}
+        data={realStudentData} // e.g. { studentName: 'Aarav Patel', admissionNo: 'ADM-101', profilePhoto: '...' }
+        orientation="vertical"
+        zoom={1.2}
+      />
+    </div>
+  );
+}
+```
+
+#### B. Trigger Batch A4 PDF Export from Your Own Custom Button (`generateIdCardsPdf`)
+```jsx
+import { generateIdCardsPdf } from '@stratametriq/id-card-designer';
+
+function CustomRosterTable({ selectedStudents, activeTemplate }) {
+  const handlePrint = async () => {
+    // Generate high-resolution A4 multi-page PDF directly from your data array
+    await generateIdCardsPdf({
+      records: selectedStudents,
+      templateSchema: activeTemplate,
+      orientation: 'vertical',
+      fileName: `Student_Cards_Batch_${new Date().toISOString().slice(0,10)}.pdf`,
+      pageOptions: { format: 'a4', showCropMarks: true }
+    });
+  };
+
+  return <button onClick={handlePrint}>Download A4 Print Sheet ({selectedStudents.length} Cards)</button>;
+}
+```
+
+#### C. Open the Drag-and-Drop Studio inside Your Own Modal (`<IdCardDesignerModal />`)
+```jsx
+import { IdCardDesignerModal } from '@stratametriq/id-card-designer';
+
+function DesignButton({ currentTemplate, onSaveToDatabase }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>✨ Design Card Layout</button>
+      
+      <IdCardDesignerModal
+        show={isOpen}
+        onHide={() => setIsOpen(false)}
+        initialTemplate={currentTemplate}
+        sampleData={[{ studentName: 'Sample Student', admissionNo: '101' }]}
+        onSaveTemplate={(newTemplate) => {
+          onSaveToDatabase(newTemplate);
+          setIsOpen(false);
+        }}
+      />
+    </>
+  );
+}
+```
+
+---
+
 ## 🌐 Multi-Framework & Vanilla JS Support (`Vue`, `Angular`, `Svelte`, `Next.js` & `HTML`)
 
 While the visual UI components (`<IdCardManager />` and `<IdCardDesignerModal />`) are built with React hooks and drag-and-drop vector canvas state (`react-draggable`), **this npm package can be used across any frontend framework or vanilla JavaScript project**:
@@ -129,7 +260,7 @@ When users open `<IdCardManager />`, they interact with a unified, professional
 | **Step 1** | **Select Department / Organization Category** | A clean 4-card header grid showing your configured organization categories (e.g., *Student IDs*, *Faculty & Admin*, *Corporate HR*, *Hospital Portal*). Each card displays the number of bound data fields (`{fieldDefinitions.length} fields`) and template layouts (`{templateCount} template`). Clicking any card instantly switches the active category, isolating state, templates, and roster tables cleanly. |
 | **Step 2** | **Live Stage Preview & Studio Launcher** | A high-resolution vector canvas preview displaying the currently selected person's ID card in real-time. Includes:<br>• **Interactive Zoom Controls (`80% - 150%`)** alongside instant reset buttons.<br>• **Toggleable Grid & Measurement Rulers (`0-80mm`)** for visual precision inspection.<br>• **Launch Studio Canvas Button:** Opens our popup drag-and-drop design studio modal where operators can add new text fields, upload background textures, bind database keys, and drag elements around with snap-to-grid accuracy. |
 | **Step 3** | **Batch A4 Print Engine (`⚡ Live Sheet Matrix`)** | A commercial print-engine sidebar that calculates and exports production-ready multi-page grid sheets:<br>• **⚡ Live Sheet Matrix Calculation Box:** Dynamically computes physical sheet mathematics in real-time right before your eyes! When you toggle **Paper Sheet Size (`A4` vs `US Letter`)**, **Orientation (`Portrait` vs `Landscape` Sheet)**, or **Card Cut Size (`86×54mm Standard ID-1`, `90×50mm Business Card`, `100×70mm Event Badge`)**, the matrix immediately recalculates the exact column × row capacity (`e.g., 3 Cols × 3 Rows = 9 cards/page`) and total job pages required.<br>• **Hardware Cut Guides Checkboxes:** Toggle corner crosshair cut marks (`0.35mm stroke`), card perimeter cut outline guides, and technical registration headers (`PRECISION CUT SHEET — JOB SPECIFICATIONS`) for print shop operators. |
-| **Step 4** | **Live Roster Directory Table** | Displays a dynamic, paginated table of all people in that department. Columns automatically reflect your category's database fields (`studentName`, `admissionNo`, `classSec`, etc.). Check or uncheck individual records to include them in the Batch A4 Print Engine, or click any row to preview their rendered card live in Step 2! |
+| **Step 4** | **Live Roster Directory Table & Instant Search** | Displays an interactive data table of all records in that department equipped with:<br>• **🔍 Instant Search Input:** Type any name, admission/employee number, department, or phone number to instantly filter records right before your eyes.<br>• **🏷️ Quick Status Filter Pills (`All \| Selected \| Unselected`):** Isolate checked vs unchecked records instantly before batch printing.<br>• **⚡ Smart Batch Selection:** Clicking **Select Shown / Unselect Shown** smartly checks or unchecks *only the records matching your current search or filter* without disrupting unrelated records outside your filter! Clicking any row previews their rendered card live on stage in Step 2. |
 
 ---
 
@@ -347,6 +478,156 @@ const CATEGORY_CONFIGS = {
 
 ---
 
+## 🏗️ Recommended Consumer App Architecture (`my-consumer-app/`)
+
+When integrating `@stratametriq/id-card-designer` into an enterprise or institutional web application (e.g., School Management System, Hospital Portal, or Corporate HR Suite), we recommend structuring your project with clean separation of concerns:
+
+```text
+my-consumer-app/
+├── src/
+│   ├── config/
+│   │   └── idCardFields.js          # 1. Centralized field definitions & mappings across categories
+│   │
+│   ├── services/
+│   │   └── idCardApi.js             # 2. API helper methods to load/save JSON templates & records from backend
+│   │
+│   ├── components/
+│   │   └── id-cards/
+│   │       ├── CardTemplateStudio.jsx   # 3. Admin component wrapping <IdCardDesignerModal />
+│   │       ├── CardPreviewBadge.jsx     # 4. Reusable UI component wrapping <IdCardPreview />
+│   │       └── BatchPrintActions.jsx    # 5. Component managing high-DPI PDF generation & progress (`generateIdCardsPdf`)
+│   │
+│   ├── pages/
+│   │   ├── AdminSettingsPage.jsx    # Uses <CardTemplateStudio /> for administrators to design ID cards
+│   │   └── StaffDirectoryPage.jsx   # Uses <CardPreviewBadge /> and <BatchPrintActions /> for staff/student rosters
+│   └── main.jsx                     # Imports global "@stratametriq/id-card-designer/dist/index.css"
+```
+
+### 🗂️ Explanation of Key Architectural Components
+
+1. **`src/config/idCardFields.js` (Centralized Configuration)**  
+   Maintains all available data fields for each department. By isolating fields in config, adding new custom fields (`bloodGroup`, `busRoute`, `rfidTag`) never requires modifying UI components:
+   ```javascript
+   export const ID_CARD_FIELDS = {
+     student: [
+       { key: "studentName", label: "Student Full Name" },
+       { key: "admissionNo", label: "Admission Number" },
+       { key: "bloodGroup", label: "Blood Group" }
+     ],
+     staff: [
+       { key: "staffName", label: "Staff Member Name" },
+       { key: "designation", label: "Job Title / Role" }
+     ]
+   };
+   ```
+
+2. **`src/services/idCardApi.js` (API & Storage Layer)**  
+   Handles communicating with your backend server or local storage to persist the JSON template schemas (`templateSchema`) saved by administrators:
+   ```javascript
+   export async function fetchCategoryTemplate(categoryKey) {
+     const res = await fetch(`/api/id-cards/templates/${categoryKey}`);
+     return res.json();
+   }
+
+   export async function saveCategoryTemplate(categoryKey, schema) {
+     return fetch(`/api/id-cards/templates/${categoryKey}`, {
+       method: "POST",
+       headers: { "Content-Type": "application/json" },
+       body: JSON.stringify(schema)
+     });
+   }
+   ```
+
+3. **`src/components/id-cards/CardTemplateStudio.jsx` (Admin Studio Wrapper)**  
+   Wraps `<IdCardDesignerModal />` with your application's custom saving logic and category switcher:
+   ```jsx
+   import React, { useState } from "react";
+   import { IdCardDesignerModal } from "@stratametriq/id-card-designer";
+   import { ID_CARD_FIELDS } from "../../config/idCardFields";
+   import { saveCategoryTemplate } from "../../services/idCardApi";
+
+   export function CardTemplateStudio({ categoryKey = "student", initialSchema }) {
+     const [showModal, setShowModal] = useState(false);
+
+     return (
+       <div>
+         <button onClick={() => setShowModal(true)}>Open ID Card Designer</button>
+         <IdCardDesignerModal
+           show={showModal}
+           onHide={() => setShowModal(false)}
+           initialTemplate={initialSchema}
+           fieldDefinitions={ID_CARD_FIELDS[categoryKey]}
+           onSaveTemplate={async (schema) => {
+             await saveCategoryTemplate(categoryKey, schema);
+             setShowModal(false);
+           }}
+         />
+       </div>
+     );
+   }
+   ```
+
+4. **`src/components/id-cards/CardPreviewBadge.jsx` (Reusable Live Badge)**  
+   Wraps `<IdCardPreview />` to render clean vector ID cards in directory listings, profile popups, or student tables:
+   ```jsx
+   import React from "react";
+   import { IdCardPreview } from "@stratametriq/id-card-designer";
+
+   export function CardPreviewBadge({ recordData, templateSchema }) {
+     return (
+       <div className="card-preview-wrapper shadow-md rounded-lg overflow-hidden">
+         <IdCardPreview
+           templateSchema={templateSchema}
+           data={recordData}
+           zoom={1}
+         />
+       </div>
+     );
+   }
+   ```
+
+5. **`src/components/id-cards/BatchPrintActions.jsx` (Batch Print Utility Button)**  
+   Manages batch exporting checked staff or student records into multi-page A4 or Letter sheets:
+   ```jsx
+   import React, { useState } from "react";
+   import { generateIdCardsPdf } from "@stratametriq/id-card-designer";
+
+   export function BatchPrintActions({ selectedRecords, templateSchema }) {
+     const [exporting, setExporting] = useState(false);
+
+     const handleExport = async () => {
+       setExporting(true);
+       await generateIdCardsPdf({
+         records: selectedRecords,
+         templateSchema: templateSchema,
+         orientation: templateSchema?.orientation || "vertical",
+         fileName: "Batch_ID_Cards_Job.pdf",
+         pageOptions: { format: "a4", showCropMarks: true, showCutOutline: true }
+       });
+       setExporting(false);
+     };
+
+     return (
+       <button onClick={handleExport} disabled={exporting || selectedRecords.length === 0}>
+         {exporting ? "Generating PDF Sheets..." : `Batch Print (${selectedRecords.length} Cards)`}
+       </button>
+     );
+   }
+   ```
+
+6. **`src/main.jsx` (Global Stylesheet Import)**  
+   Always import the universal stylesheet right at the root entry point of your application:
+   ```javascript
+   import React from 'react';
+   import ReactDOM from 'react-dom/client';
+   import App from './App.jsx';
+   import "@stratametriq/id-card-designer/dist/index.css";
+
+   ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+   ```
+
+---
+
 ## 📜 License
 
-MIT © Stratametriq
+Dual-licensed under the [MIT License](./LICENSE) (for open-source/non-commercial) and a Commercial Enterprise License (for commercial usage). © Stratametriq

package/dist/index.css

@@ -1,17 +1,30 @@
 /* react-id-card-designer universal styles */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&family=Outfit:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
 :root {
   --ricd-primary: #3b82f6;
   --ricd-primary-hover: #2563eb;
-  --ricd-bg: #0f172a;
-  --ricd-surface: #1e293b;
-  --ricd-surface-light: #334155;
-  --ricd-border: #475569;
+  --ricd-primary-glow: rgba(59, 130, 246, 0.35);
+  --ricd-bg: #060913;
+  --ricd-surface: rgba(17, 24, 39, 0.88);
+  --ricd-surface-light: rgba(30, 41, 59, 0.82);
+  --ricd-border: rgba(255, 255, 255, 0.1);
+  --ricd-border-highlight: rgba(59, 130, 246, 0.45);
   --ricd-text: #f8fafc;
   --ricd-text-muted: #94a3b8;
-  --ricd-radius: 0.75rem;
-  --ricd-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
+  --ricd-radius: 1rem;
+  --ricd-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 10px 15px -8px rgba(0, 0, 0, 0.4);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body, button, input, select, textarea {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 /* Modal Overlay & Wrapper */
@@ -22,11 +35,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(15, 23, 42, 0.85);
-  backdrop-filter: blur(8px);
-  animation: ricdFadeIn 0.2s ease-out;
+  background-color: rgba(6, 9, 19, 0.88);
+  backdrop-filter: blur(12px);
+  animation: ricdFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   padding: 1.5rem;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   color: var(--ricd-text);
   box-sizing: border-box;
 }
@@ -994,4 +1007,149 @@
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
 }
 
+/* =========================================================
+ * ID CARD MANAGER THEME
+ * The manager used to pass its theme only to the studio modal.
+ * These rules apply the same selection to the complete dashboard.
+ * ========================================================= */
+.pg-theme-enterprise {
+  background-color: #eef4fb;
+  background-image:
+    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.16) 0%, transparent 58%),
+    radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.08) 0%, transparent 48%);
+  color: #1e293b;
+}
+
+.pg-theme-enterprise .pg-master-header {
+  background: linear-gradient(135deg, #ffffff 0%, #f1f6fc 100%);
+  border-color: rgba(37, 99, 235, 0.24);
+  box-shadow: 0 15px 35px -10px rgba(30, 64, 175, 0.18), inset 0 1px 0 #ffffff;
+}
+
+.pg-theme-enterprise .pg-title {
+  background: linear-gradient(to right, #172554 30%, #334155);
+  -webkit-background-clip: text;
+}
+
+.pg-theme-enterprise .pg-subtitle,
+.pg-theme-enterprise .pg-section-subtitle,
+.pg-theme-enterprise .pg-toggle-label {
+  color: #64748b;
+}
+
+.pg-theme-enterprise .pg-section-title {
+  color: #1e293b;
+}
+
+.pg-theme-enterprise .pg-card {
+  background: rgba(255, 255, 255, 0.88) !important;
+  border-color: #dbe5f0 !important;
+  box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.35);
+}
+
+.pg-theme-enterprise .pg-category-card {
+  background: #ffffff !important;
+  border-color: #dbe5f0 !important;
+  box-shadow: 0 8px 20px -16px rgba(15, 23, 42, 0.4);
+}
+
+.pg-theme-enterprise .pg-category-card:hover {
+  border-color: #93c5fd !important;
+  transform: translateY(-2px);
+}
+
+.pg-theme-enterprise .pg-category-card--active {
+  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
+  border-color: #3b82f6 !important;
+  box-shadow: 0 10px 25px -12px rgba(37, 99, 235, 0.4) !important;
+}
+
+.pg-theme-enterprise .pg-category-card > div > div > div[style*="color"] {
+  color: #1e293b !important;
+}
+
+.pg-theme-enterprise .pg-category-card--active > div > div > div:first-child {
+  color: #ffffff !important;
+}
+
+.pg-theme-enterprise .pg-stage-toolbar,
+.pg-theme-enterprise .pg-tip-banner,
+.pg-theme-enterprise .pg-export-summary,
+.pg-theme-enterprise .pg-sheet-matrix,
+.pg-theme-enterprise .pg-cut-guides {
+  background: #f8fbff !important;
+  border-color: #d7e3f0 !important;
+}
+
+.pg-theme-enterprise .pg-preview-stage {
+  background-color: #edf3f8 !important;
+}
+
+.pg-theme-enterprise .pg-btn-sm-glass {
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  color: #334155;
+}
+
+.pg-theme-enterprise .pg-btn-sm-glass:hover {
+  background: #eff6ff;
+  border-color: #60a5fa;
+  color: #1d4ed8;
+}
+
+.pg-theme-enterprise .pg-select,
+.pg-theme-enterprise .pg-stage-toolbar select {
+  background: #ffffff !important;
+  border-color: #cbd5e1 !important;
+  color: #1e293b !important;
+}
+
+.pg-theme-enterprise .pg-table-wrapper {
+  background: #ffffff;
+  border-color: #dbe5f0;
+}
+
+.pg-theme-enterprise .pg-table th {
+  background: #f1f5f9;
+  border-color: #dbe5f0;
+  color: #475569;
+}
+
+.pg-theme-enterprise .pg-table td {
+  border-color: #e2e8f0;
+  color: #334155;
+}
+
+.pg-theme-enterprise .pg-table tr:hover td {
+  background: #eff6ff;
+}
+
+/* Inline dashboard styles use the dark palette. Keep the component API intact
+ * while translating those semantic dark surfaces and text tokens in light mode. */
+.pg-theme-enterprise [style*="background: rgba(15, 23, 42"],
+.pg-theme-enterprise [style*="background: rgba(30, 41, 59"],
+.pg-theme-enterprise [style*="background-color: rgba(15, 23, 42"],
+.pg-theme-enterprise [style*="background-color: rgb(11, 15, 25)"] {
+  background-color: #f8fafc !important;
+  background: #f8fafc !important;
+}
+
+.pg-theme-enterprise [style*="color: rgb(255, 255, 255)"],
+.pg-theme-enterprise [style*="color: #fff"],
+.pg-theme-enterprise [style*="color: rgb(248, 250, 252)"],
+.pg-theme-enterprise [style*="color: #f8fafc"] {
+  color: #1e293b !important;
+}
+
+.pg-theme-enterprise [style*="color: rgb(226, 232, 240)"],
+.pg-theme-enterprise [style*="color: #e2e8f0"],
+.pg-theme-enterprise [style*="color: rgb(203, 213, 225)"],
+.pg-theme-enterprise [style*="color: #cbd5e1"] {
+  color: #475569 !important;
+}
+
+.pg-theme-enterprise [style*="color: rgb(148, 163, 184)"],
+.pg-theme-enterprise [style*="color: #94a3b8"] {
+  color: #64748b !important;
+}