/* 
    PremiumGlassERP Global Theme 
    ----------------------------
    Provides centralized CSS variables and global utility classes
    for a modern Apple/Vercel standard Glassmorphic UI.
*/

:root {
    /* Base fallbacks to link our modern pages with the active legacy theme */
    --erp-bg-page: var(--erp-body-start, #f4f7fe);
    --erp-bg-card-solid: var(--erp-panel-bg, #ffffff);
    --erp-text-primary: var(--erp-text, #1e293b);
    --erp-text-secondary: var(--erp-text, #475569);
    --erp-text-muted: var(--erp-text, #64748b);
    --erp-border-color: var(--erp-border, #e2e8f0);
    --erp-border-input: var(--erp-border, #cbd5e1);
    
    /* Shared Glass properties */
    --erp-shadow-glass: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    --erp-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.15);
    --erp-radius-card: 14px;
    --erp-radius-input: 8px;
    --erp-radius-btn: 8px;
    --erp-focus-color: #3b82f6;
    
    /* Modern gradients */
    --erp-grad-primary: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
    --erp-grad-accent: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --erp-bg-muted: var(--erp-shell-bg, #ffffff);
    
    /* Alerts */
    --erp-alert-success-bg: #d1fae5;
    --erp-alert-success-text: #065f46;
    --erp-alert-success-border: #10b981;
    --erp-alert-error-bg: #fee2e2;
    --erp-alert-error-text: #991b1b;
    --erp-alert-error-border: #ef4444;
}

/* Our New Unified Glass Theme */
html[data-erp-theme="premium-glass-erp"] {
    /* Legacy mapping so old forms look like the new theme */
    --erp-shell-bg: #e2e8f0;
    --erp-panel-bg: #ffffff;
    --erp-border: #cbd5e1;
    --erp-border-light: #f1f5f9;
    --erp-border-dark: #94a3b8;
    --erp-workspace: #3b82f6;
    --erp-workspace-dot: rgba(59, 130, 246, 0.15);
    --erp-body-start: #f4f7fe;
    --erp-body-end: #e6eefc;
    --erp-brandbar-start: #f8fafc;
    --erp-brandbar-end: #e2e8f0;

    /* Explicit Glass Settings */
    --erp-bg-page: #f4f7fe;
    --erp-bg-card-solid: #ffffff;
    --erp-text-primary: #1e293b;
    --erp-text-secondary: #475569;
    --erp-text-muted: #64748b;
    --erp-border-color: #e2e8f0;
    --erp-border-input: #cbd5e1;
}

/* Global Button Styles - INCREASED SPECIFICITY to beat site.css legacy declarations */
body.erp-body .erp-btn,
body .customer-action-button {
    min-width: 90px;
    padding: 8px 16px;
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    border-radius: var(--erp-radius-btn); 
    border: 1px solid transparent !important; /* Forces out site.css border-top */
    text-decoration: none; 
    font-size: 13px; 
    font-weight: 600; 
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body.erp-body .erp-btn-primary,
body .customer-action-button-primary {
    background: var(--erp-grad-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}
body.erp-body .erp-btn-primary:hover,
body .customer-action-button-primary:hover {
    transform: translateY(-1px); 
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35); 
    color: #ffffff;
}

body.erp-body .erp-btn-accent,
body .customer-action-button-accent {
    background: var(--erp-grad-accent) !important;
    color: #ffffff !important; 
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    border: 1px solid transparent !important;
}
body.erp-body .erp-btn-accent:hover,
body .customer-action-button-accent:hover {
    transform: translateY(-1px); 
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35); 
    color: #ffffff;
}

body.erp-body .erp-btn-muted,
body .customer-action-button-muted {
    background: var(--erp-bg-muted) !important; 
    color: var(--erp-text-secondary) !important; 
    border: 1px solid var(--erp-border-input) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.erp-body .erp-btn-muted:hover,
body .customer-action-button-muted:hover {
    background: var(--erp-bg-page) !important; 
    border-color: #94a3b8 !important; 
    color: var(--erp-text-primary) !important;
}

/* Common Table Actions */
.ui-edit-link,
.go-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 22px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.10);
    color: var(--erp-focus-color);
    text-decoration: none;
    font-weight: 600;
    margin-right: 6px;
    white-space: nowrap;
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.ui-edit-link:hover,
.go-edit-link:hover {
    background: rgba(59, 130, 246, 0.16);
    color: #1d4ed8;
}

.ui-delete-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.10);
    color: #ef4444;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.ui-delete-link:hover {
    background: rgba(239, 68, 68, 0.16);
    color: #dc2626;
}

.erp-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ==========================================================================
   AUTO-UPGRADE ENGINE FOR LEGACY COMPONENTS 
   ========================================================================== 
   Automatically skins legacy VB6/Web forms with the PremiumGlassERP vibe 
   only when the PremiumGlassERP theme is selected.
*/

/* 1. Global Page Background & Font Integration */
html[data-erp-theme="premium-glass-erp"] body.erp-body {
    background-color: var(--erp-bg-page) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* 2. Upgrade Legacy Panels (The old beige beige/grey boxes) */
html[data-erp-theme="premium-glass-erp"] .panel,
html[data-erp-theme="premium-glass-erp"] .panel-default {
    background: var(--erp-bg-card-solid) !important;
    border-radius: var(--erp-radius-card) !important;
    box-shadow: var(--erp-shadow-glass) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px;
}

html[data-erp-theme="premium-glass-erp"] .panel-heading {
    background: var(--erp-bg-card-solid) !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
    color: var(--erp-text-primary) !important;
    font-weight: 700 !important;
    border-top-left-radius: var(--erp-radius-card) !important;
    border-top-right-radius: var(--erp-radius-card) !important;
    padding: 16px 20px !important;
}

html[data-erp-theme="premium-glass-erp"] .panel-body {
    padding: 20px !important;
}

html[data-erp-theme="premium-glass-erp"] .panel-footer {
    background: var(--erp-bg-page) !important;
    border-top: 1px solid var(--erp-border-color) !important;
    border-bottom-left-radius: var(--erp-radius-card) !important;
    border-bottom-right-radius: var(--erp-radius-card) !important;
    padding: 16px 20px !important;
}

/* 3. Upgrade Legacy Inputs (.form-control) */
html[data-erp-theme="premium-glass-erp"] .form-control {
    background: var(--erp-bg-page) !important;
    border: 1px solid var(--erp-border-input) !important;
    border-radius: var(--erp-radius-input) !important;
    color: var(--erp-text-primary) !important;
    box-shadow: none !important;
    transition: all 0.2s !important;
    padding: 8px 12px;
}
html[data-erp-theme="premium-glass-erp"] .form-control:focus {
    background: var(--erp-bg-card-solid) !important;
    border-color: var(--erp-focus-color) !important;
    box-shadow: var(--erp-shadow-focus) !important;
}

html[data-erp-theme="premium-glass-erp"] label {
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--erp-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

/* 4. Upgrade Legacy Buttons (Save, Submit, Refresh, etc.) */
html[data-erp-theme="premium-glass-erp"] .btn-primary,
html[data-erp-theme="premium-glass-erp"] .btn-success,
html[data-erp-theme="premium-glass-erp"] .sup-btn-primary,
html[data-erp-theme="premium-glass-erp"] .erp-btn-primary {
    background: var(--erp-grad-primary) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2) !important;
    border-radius: var(--erp-radius-btn) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
html[data-erp-theme="premium-glass-erp"] .btn-primary:hover,
html[data-erp-theme="premium-glass-erp"] .btn-success:hover,
html[data-erp-theme="premium-glass-erp"] .sup-btn-primary:hover,
html[data-erp-theme="premium-glass-erp"] .erp-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35) !important;
}

html[data-erp-theme="premium-glass-erp"] .btn-info,
html[data-erp-theme="premium-glass-erp"] .btn-warning,
html[data-erp-theme="premium-glass-erp"] .erp-btn-accent,
html[data-erp-theme="premium-glass-erp"] .sup-btn-accent {
    background: var(--erp-grad-accent) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2) !important;
    border-radius: var(--erp-radius-btn) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
html[data-erp-theme="premium-glass-erp"] .btn-info:hover,
html[data-erp-theme="premium-glass-erp"] .btn-warning:hover,
html[data-erp-theme="premium-glass-erp"] .erp-btn-accent:hover,
html[data-erp-theme="premium-glass-erp"] .sup-btn-accent:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35) !important;
}

html[data-erp-theme="premium-glass-erp"] .btn-default,
html[data-erp-theme="premium-glass-erp"] .erp-btn-muted {
    background: var(--erp-bg-muted) !important;
    color: var(--erp-text-secondary) !important;
    border: 1px solid var(--erp-border-input) !important;
    border-radius: var(--erp-radius-btn) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
html[data-erp-theme="premium-glass-erp"] .btn-default:hover,
html[data-erp-theme="premium-glass-erp"] .erp-btn-muted:hover {
    background: var(--erp-bg-page) !important;
    border-color: #94a3b8 !important;
    color: var(--erp-text-primary) !important;
}

html[data-erp-theme="premium-glass-erp"] .btn-danger,
html[data-erp-theme="premium-glass-erp"] .erp-btn-danger,
html[data-erp-theme="premium-glass-erp"] .ui-delete-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2) !important;
    border: 1px solid transparent !important;
    border-radius: var(--erp-radius-btn) !important;
    font-weight: 600 !important;
}
html[data-erp-theme="premium-glass-erp"] .btn-danger:hover,
html[data-erp-theme="premium-glass-erp"] .erp-btn-danger:hover,
html[data-erp-theme="premium-glass-erp"] .ui-delete-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3) !important;
}

/* 5. Upgrade Legacy Tables/Grids */
html[data-erp-theme="premium-glass-erp"] .table,
html[data-erp-theme="premium-glass-erp"] table.grid {
    background: var(--erp-bg-card-solid);
}
html[data-erp-theme="premium-glass-erp"] .table thead th,
html[data-erp-theme="premium-glass-erp"] table.grid th {
    background: var(--erp-bg-page) !important;
    color: var(--erp-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid var(--erp-border-color) !important;
    padding: 12px 16px !important;
}
html[data-erp-theme="premium-glass-erp"] .table tbody td,
html[data-erp-theme="premium-glass-erp"] table.grid td {
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: var(--erp-text-primary) !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
html[data-erp-theme="premium-glass-erp"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--erp-bg-page) !important;
}
html[data-erp-theme="premium-glass-erp"] .table-hover tbody tr:hover {
    background-color: #f1f5f9 !important;
}


/* 6. Upgrade Setup/Legacy Containers (.setup-shell, .setup-tabpanel, etc) */
html[data-erp-theme="premium-glass-erp"] .setup-shell,
html[data-erp-theme="premium-glass-erp"] .setup-workspace,
html[data-erp-theme="premium-glass-erp"] .setup-tabpanel,
html[data-erp-theme="premium-glass-erp"] .user-branch-page,
html[data-erp-theme="premium-glass-erp"] .user-create-page {
    background: var(--erp-bg-page) !important;
}

html[data-erp-theme="premium-glass-erp"] .setup-header,
html[data-erp-theme="premium-glass-erp"] .setup-entry,
html[data-erp-theme="premium-glass-erp"] .setup-subpanel,
html[data-erp-theme="premium-glass-erp"] .setup-list {
    background: var(--erp-bg-card-solid) !important;
    border-radius: var(--erp-radius-card) !important;
    box-shadow: var(--erp-shadow-glass) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 12px;
}

html[data-erp-theme="premium-glass-erp"] .setup-tabs {
    background: var(--erp-bg-page) !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
}

html[data-erp-theme="premium-glass-erp"] .setup-tabs a.active {
    background: var(--erp-bg-card-solid) !important;
    border-top: 3px solid #3b82f6 !important; /* PremiumGlass focus blue */
    color: var(--erp-focus-color) !important;
}

html[data-erp-theme="premium-glass-erp"] .setup-grid-searchbar {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
}

html[data-erp-theme="premium-glass-erp"] .setup-list th {
    background: #f8fafc !important;
    color: var(--erp-text-secondary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid var(--erp-border-color) !important;
}

html[data-erp-theme="premium-glass-erp"] .setup-list tbody tr:hover {
    background-color: #f1f5f9 !important;
}


/* 7. Upgrade Mid-Era Containers (.ui-page, .ui-editor-card, etc) */
html[data-erp-theme="premium-glass-erp"] .ui-page,
html[data-erp-theme="premium-glass-erp"] .user-info-page,
html[data-erp-theme="premium-glass-erp"] .ug-page {
    background: var(--erp-bg-page) !important;
}
html[data-erp-theme="premium-glass-erp"] .ui-header,
html[data-erp-theme="premium-glass-erp"] .ug-header {
    background: transparent !important;
    border-bottom: 1px solid var(--erp-border-input) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}
html[data-erp-theme="premium-glass-erp"] .ui-editor-card,
html[data-erp-theme="premium-glass-erp"] .ui-list-card,
html[data-erp-theme="premium-glass-erp"] .ug-editor-card {
    background: var(--erp-bg-card-solid) !important;
    border-radius: var(--erp-radius-card) !important;
    box-shadow: var(--erp-shadow-glass) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
html[data-erp-theme="premium-glass-erp"] .ui-card-title,
html[data-erp-theme="premium-glass-erp"] .ug-list-header {
    background: var(--erp-bg-card-solid) !important;
    border-bottom: 1px solid var(--erp-border-color) !important;
    color: var(--erp-text-primary) !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    border-radius: var(--erp-radius-card) var(--erp-radius-card) 0 0 !important;
}
html[data-erp-theme="premium-glass-erp"] .ui-list-card table th,
html[data-erp-theme="premium-glass-erp"] .ui-table th {
    background: var(--erp-bg-page) !important;
    color: var(--erp-text-secondary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid var(--erp-border-color) !important;
    padding: 12px 16px !important;
}
html[data-erp-theme="premium-glass-erp"] .ui-list-card table td,
html[data-erp-theme="premium-glass-erp"] .ui-table td {
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: var(--erp-text-primary) !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
html[data-erp-theme="premium-glass-erp"] .ui-form input:not([type="checkbox"]):not([type="radio"]),
html[data-erp-theme="premium-glass-erp"] .ui-form select,
html[data-erp-theme="premium-glass-erp"] .ui-search-input {
    background: var(--erp-bg-page) !important;
    border: 1px solid var(--erp-border-input) !important;
    border-radius: var(--erp-radius-input) !important;
    color: var(--erp-text-primary) !important;
    box-shadow: none !important;
    transition: all 0.2s !important;
    padding: 6px 12px !important;
}
html[data-erp-theme="premium-glass-erp"] .ui-form input:focus:not([type="checkbox"]):not([type="radio"]),
html[data-erp-theme="premium-glass-erp"] .ui-form select:focus,
html[data-erp-theme="premium-glass-erp"] .ui-search-input:focus {
    background: var(--erp-bg-card-solid) !important;
    border-color: var(--erp-focus-color) !important;
    box-shadow: var(--erp-shadow-focus) !important;
}

/* 8. Global Variable Intercept */
html[data-erp-theme="premium-glass-erp"] {
    --erp-page-header-start: #f4f7fe;
    --erp-page-header-end: #f4f7fe;
    --erp-card-bg: #ffffff;
    --erp-card-header-start: #ffffff;
    --erp-card-header-end: #ffffff;
    --erp-table-header-bg: #f8fafc;
    --erp-field-bg: #f4f7fe;
    --erp-field-border: #cbd5e1;
    --erp-tab-start: #f8fafc;
    --erp-tab-end: #f8fafc;
    --erp-tab-active-start: #ffffff;
    --erp-tab-active-end: #ffffff;
}


/* 9. Strip out Hardcoded Legacy Gradients recursively (Labels, Separators) */
html[data-erp-theme="premium-glass-erp"] .erp-approved-inline-field > span:first-child,
html[data-erp-theme="premium-glass-erp"] .setup-inline-field > span:first-child,
html[data-erp-theme="premium-glass-erp"] .setup-grid label {
    background: transparent !important;
    border: none !important;
    color: var(--erp-text-secondary) !important;
    font-weight: 700 !important;
    padding: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

html[data-erp-theme="premium-glass-erp"] .erp-approved-inline-field > span:nth-child(2),
html[data-erp-theme="premium-glass-erp"] .setup-inline-field > span:nth-child(2),
html[data-erp-theme="premium-glass-erp"] [class*="-separator"] {
    background: transparent !important; border: none !important; color: transparent !important;
}

/* Force modern inputs globally on inline fields */
html[data-erp-theme="premium-glass-erp"] .erp-approved-inline-field input,
html[data-erp-theme="premium-glass-erp"] .erp-approved-inline-field select,
html[data-erp-theme="premium-glass-erp"] .setup-inline-field input,
html[data-erp-theme="premium-glass-erp"] .setup-inline-field select,
html[data-erp-theme="premium-glass-erp"] .setup-grid input,
html[data-erp-theme="premium-glass-erp"] .setup-grid select,
html[data-erp-theme="premium-glass-erp"] [class*="-input-wrap"] input,
html[data-erp-theme="premium-glass-erp"] [class*="-input-wrap"] select {
    background: var(--erp-bg-page) !important;
    border: 1px solid var(--erp-border-input) !important;
    border-radius: var(--erp-radius-input) !important;
    color: var(--erp-text-primary) !important;
    padding: 6px 12px !important;
    min-height: 38px !important;
    width: 100% !important;
    font-size: 13px !important;
}

html[data-erp-theme="premium-glass-erp"] .erp-approved-inline-field input:focus,
html[data-erp-theme="premium-glass-erp"] .setup-inline-field input:focus,
html[data-erp-theme="premium-glass-erp"] [class*="-input-wrap"] input:focus {
    background: var(--erp-bg-card-solid) !important;
    border-color: var(--erp-focus-color) !important;
    box-shadow: var(--erp-shadow-focus) !important;
}


/* Global Listview Design Pattern */
.global-listview-pattern { width: 100%; border-collapse: collapse; }
.global-listview-pattern th, .global-listview-pattern td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid #f1f5f9; color: var(--erp-text-primary); transition: background-color 0.15s ease, color 0.15s ease; }
.global-listview-pattern th { position: sticky; top: 0; background: var(--erp-bg-page) !important; color: var(--erp-text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; border-bottom: 2px solid var(--erp-border-color) !important; z-index: 2; letter-spacing: 0.5px; }
.global-listview-pattern tbody tr { cursor: pointer; background: var(--erp-bg-card-solid); }
.global-listview-pattern tbody tr:hover td { background: var(--erp-bg-page); }
.global-listview-pattern tbody tr.is-editing td { background: #eff6ff; }

/* ========================================================================
   PremiumGlassERP Universal 3D Surface Pass
   Visual-only shared skin for existing ERP controls. Do not wire behavior here.
   ======================================================================== */
:root {
    --erp-3d-ink: var(--erp-text-primary, var(--erp-text, #061a34));
    --erp-3d-muted: var(--erp-text-secondary, var(--erp-text, #27466c));
    --erp-3d-border: color-mix(in srgb, var(--erp-border, #9eb8d8) 76%, #ffffff 24%);
    --erp-3d-border-strong: color-mix(in srgb, var(--erp-border-dark, #315f97) 80%, #0f3b66 20%);
    --erp-3d-surface: linear-gradient(180deg, color-mix(in srgb, var(--erp-body-start, #f8fcff) 78%, #ffffff 22%) 0%, color-mix(in srgb, var(--erp-body-end, #dcecff) 88%, #ffffff 12%) 100%);
    --erp-3d-panel: linear-gradient(160deg, color-mix(in srgb, var(--erp-body-start, #eaf4ff) 75%, #ffffff 25%) 0%, color-mix(in srgb, var(--erp-workspace, #8fb3e6) 42%, #ffffff 58%) 100%);
    --erp-3d-control: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--erp-body-start, #eef6ff) 82%, #ffffff 18%) 100%);
    --erp-3d-header: linear-gradient(90deg, #0f3b66 0%, #0f766e 100%);
    --erp-3d-focus: 0 0 0 3px rgba(14, 165, 233, 0.2), 0 3px 8px rgba(15, 47, 82, 0.16);
    --erp-3d-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 9px 22px rgba(22, 51, 91, 0.14);
    --erp-3d-shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 4px 10px rgba(22, 51, 91, 0.10);
}

body.erp-body :where(
    .ui-page,
    .ug-page,
    .user-info-page,
    .customer-page,
    .supplier-page,
    .product-entry-page,
    .setup-shell,
    .setup-workspace,
    .stock-page,
    .bank-management-page,
    .voucher-entry-page,
    .global-option-page,
    .company-info-page,
    .change-password-page,
    .reports-page,
    .ledger-balance-report-page,
    .temporary-customer-ledger-page,
    .purchase-page,
    .go-page,
    .stock-menu-page,
    .stock-status-page,
    .ledger-balance-page,
    .accounting-reports-others-page,
    .general-accounting-reports-page,
    .advance-accounting-page,
    .asset-management-page,
    .bank-page,
    .back-office-page,
    .cards-page,
    .cp-page,
    .accounting-prerequisits-page,
    .general-setup-page,
    .hr-payroll-settings-page,
    .ugl-page,
    .upl-page,
    .user-action-monitoring-page,
    .user-branch-permission-page,
    .voucher-entry-page,
    .company-info-page,
    .setup-page,
    .temp-ledger-page,
    .user-action-page,
    .erp-responsive-page
) {
    color: var(--erp-3d-ink);
}

body.erp-body :where(
    .ui-header,
    .ug-header,
    .customer-page-header,
    .supplier-page-header,
    .product-entry-header,
    .setup-header,
    .stock-header,
    .bank-management-header,
    .voucher-entry-header,
    .global-option-header,
    .company-info-header,
    .reports-header,
    .ledger-balance-report-header,
    .purchase-header,
    .go-header,
    .stock-menu-header,
    .stock-status-header,
    .ledger-balance-header,
    .accounting-reports-others-header,
    .general-accounting-reports-header,
    .advance-accounting-header,
    .asset-management-header,
    .bank-page-header,
    .bank-header,
    .back-office-header,
    .cards-header,
    .cp-card-title,
    .accounting-prerequisits-header,
    .general-setup-header,
    .hr-payroll-settings-header,
    .ugl-modal-header,
    .ugl-left-header,
    .upl-header,
    .user-action-monitoring-header,
    .user-branch-permission-header,
    .voucher-entry-header,
    .company-info-header,
    .temp-ledger-header,
    .search-by-header,
    .user-action-modal-head
) {
    border: 1px solid var(--erp-3d-border) !important;
    border-radius: 8px !important;
    background: var(--erp-3d-panel) !important;
    box-shadow: var(--erp-3d-shadow) !important;
}

body.erp-body :where(
    .ui-editor-card,
    .ui-list-card,
    .ug-editor-card,
    .customer-card,
    .supplier-card,
    .product-entry-card,
    .erp-approved-listview-card,
    .setup-entry,
    .setup-subpanel,
    .setup-list,
    .stock-card,
    .bank-management-card,
    .voucher-entry-card,
    .global-option-card,
    .company-info-card,
    .reports-filter-card,
    .reports-group-card,
    .ledger-balance-report-card,
    .purchase-card,
    .go-editor-card,
    .go-list-card,
    .go-apply-card,
    .stock-menu-card,
    .stock-status-card,
    .ledger-balance-filter-card,
    .ledger-balance-status-strip,
    .ledger-balance-selector,
    .ledger-balance-summary,
    .ledger-balance-grid-wrap,
    .accounting-reports-others-panel,
    .general-accounting-reports-panel,
    .advance-accounting-panel,
    .asset-management-panel,
    .bank-page-card,
    .bank-page-card,
    .bank-card,
    .back-office-card,
    .cards-option,
    .cp-card,
    .accounting-prerequisits-panel,
    .general-setup-panel,
    .hr-payroll-settings-panel,
    .ugl-card,
    .upl-card,
    .user-action-monitoring-card,
    .user-branch-permission-card,
    .voucher-entry-card,
    .company-info-card,
    .voucher-entry-panel,
    .hr-payroll-settings-section,
    .ugl-shell,
    .ugl-modal-dialog,
    .ugl-left,
    .ugl-right,
    .upl-frame,
    .upl-command-save-frame,
    .upl-screen-grid-wrap,
    .upl-command-grid-wrap,
    .temp-ledger-form,
    .user-action-left,
    .user-action-right,
    .search-by-list,
    .user-action-modal,
    .erp-responsive-grid
) {
    border: 1px solid var(--erp-3d-border) !important;
    border-radius: 8px !important;
    background: var(--erp-3d-surface) !important;
    box-shadow: var(--erp-3d-shadow) !important;
}

body.erp-body :where(
    .erp-responsive-field input,
    .erp-responsive-field select,
    .erp-responsive-field textarea
) {
    border: 1px solid color-mix(in srgb, var(--erp-3d-border-strong) 58%, #ffffff 42%) !important;
    border-radius: 6px !important;
    background: var(--erp-3d-control) !important;
    color: var(--erp-3d-ink) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.08), 0 2px 5px rgba(15,47,82,0.10) !important;
}

body.erp-body :where(
    .ui-card-title,
    .ug-list-header,
    .customer-card-header,
    .supplier-card-header,
    .product-entry-card-title,
    .setup-subpanel-title,
    .stock-card-header,
    .bank-management-card-header,
    .voucher-entry-card-header,
    .global-option-card-header,
    .company-info-card-header,
    .reports-group-title,
    .purchase-card-title,
    .go-card-title,
    .stock-status-card-title,
    .ledger-balance-summary-head,
    .accounting-reports-others-panel-title,
    .general-accounting-reports-panel-title,
    .advance-accounting-panel-title,
    .cards-option-title,
    .accounting-prerequisits-panel-title,
    .general-setup-panel-title,
    .hr-payroll-settings-panel-title,
    .upl-card-title,
    .user-action-monitoring-card-title,
    .user-branch-permission-card-title,
    .voucher-entry-card-title,
    .company-info-card-title,
    .voucher-entry-panel-title,
    .hr-payroll-settings-section h2,
    .cards-title,
    .ugl-title-box,
    .ugl-left-header,
    .upl-title-box,
    .upl-section-label,
    .upl-command-save-frame-title,
    .temp-ledger-kicker
) {
    border-bottom: 1px solid var(--erp-3d-border) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0)), var(--erp-3d-surface) !important;
    color: var(--erp-3d-ink) !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

body.erp-body :where(
    .customer-tabs,
    .supplier-tabs,
    .product-entry-tabs,
    .setup-tabs,
    .ui-tabs,
    .ug-tabs,
    .purchase-tabs,
    .go-tabs,
    .bank-tabs,
    .stock-status-tabs,
    .company-info-tabstrip
) {
    gap: 4px !important;
    padding-top: 4px !important;
    border-bottom: 1px solid var(--erp-3d-border-strong) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)), color-mix(in srgb, var(--erp-workspace, #8fb3e6) 34%, #ffffff 66%) !important;
}

body.erp-body :where(
    .customer-tab,
    .supplier-tab,
    .product-entry-tab,
    .setup-tabs a,
    .ui-tab,
    .ug-tab,
    .purchase-tab,
    .go-tab,
    .bank-tab,
    .stock-status-tab,
    .company-info-tab
) {
    border: 1px solid var(--erp-3d-border) !important;
    border-bottom-color: var(--erp-3d-border-strong) !important;
    border-radius: 7px 7px 0 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--erp-body-end, #d8e9ff) 78%, #ffffff 22%) 100%) !important;
    color: var(--erp-3d-muted) !important;
    font-weight: 900 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.66), 0 2px 6px rgba(15,47,82,0.12) !important;
}

body.erp-body :where(
    .customer-tab.active,
    .customer-tab.is-active,
    .supplier-tab.is-active,
    .product-entry-tab.active,
    .setup-tabs a.active,
    .ui-tab.active,
    .ug-tab.active,
    .purchase-tab.active,
    .go-tab.active,
    .bank-tab.active,
    .stock-status-tab.is-active,
    .company-info-tab.active
) {
    background: var(--erp-3d-header) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 6px 14px rgba(7,40,75,0.22) !important;
}

body.erp-body :where(
    .customer-action-button,
    .supplier-action-button,
    .supplier-vb6-button,
    .erp-btn,
    .btn,
    .ui-delete-btn,
    .setup-action,
    .reports-option-item,
    .product-entry-tab,
    .pberp-page-btn,
    .purchase-tab,
    .go-tab,
    .ledger-balance-action,
    .ledger-balance-toggle,
    .ledger-balance-close-mini,
    .stock-menu-card,
    .stock-status-action,
    .accounting-reports-others-option,
    .general-accounting-reports-option,
    .advance-accounting-option,
    .bank-tab,
    .stock-status-tab,
    .cards-option,
    .accounting-prerequisits-option,
    .general-setup-option,
    .hr-payroll-settings-option,
    .voucher-entry-option,
    .hr-payroll-settings-item,
    .ugl-context-item,
    .upl-checkline,
    .upl-screen-checkline,
    .search-option,
    .btn-cyan,
    .btn-purple,
    .btn-green,
    .btn-yellow
) {
    border-radius: 7px !important;
    box-shadow: var(--erp-3d-shadow-soft) !important;
}

body.erp-body :where(
    .customer-action-button,
    .supplier-action-button,
    .supplier-vb6-button,
    .erp-btn,
    .btn:not(.swal2-confirm):not(.swal2-cancel):not(.swal2-deny),
    .setup-action,
    .pberp-page-btn,
    .ledger-balance-action,
    .ledger-balance-toggle,
    .ledger-balance-close-mini,
    .stock-status-action,
    .accounting-reports-others-option,
    .general-accounting-reports-option,
    .advance-accounting-option,
    .bank-tab,
    .stock-status-tab,
    .cards-option,
    .accounting-prerequisits-option,
    .general-setup-option,
    .hr-payroll-settings-option,
    .voucher-entry-option,
    .hr-payroll-settings-item,
    .ugl-context-item,
    .upl-screen-row,
    .search-option,
    .btn-cyan,
    .btn-purple,
    .btn-green,
    .btn-yellow
):hover,
body.erp-body :where(
    .customer-action-button,
    .supplier-action-button,
    .supplier-vb6-button,
    .erp-btn,
    .btn:not(.swal2-confirm):not(.swal2-cancel):not(.swal2-deny),
    .setup-action,
    .pberp-page-btn,
    .ledger-balance-action,
    .ledger-balance-toggle,
    .ledger-balance-close-mini,
    .stock-status-action,
    .accounting-reports-others-option,
    .general-accounting-reports-option,
    .advance-accounting-option,
    .bank-tab,
    .stock-status-tab,
    .cards-option,
    .accounting-prerequisits-option,
    .general-setup-option,
    .hr-payroll-settings-option,
    .voucher-entry-option,
    .hr-payroll-settings-item,
    .ugl-context-item,
    .upl-screen-row,
    .search-option,
    .btn-cyan,
    .btn-purple,
    .btn-green,
    .btn-yellow
):focus-visible {
    transform: translateY(-1px);
    outline: none !important;
    box-shadow: var(--erp-3d-focus) !important;
}

body.erp-body :where(
    .ui-form input:not([type="checkbox"]):not([type="radio"]),
    .ui-form select,
    .ui-search-input,
    .customer-field input,
    .customer-field select,
    .customer-field textarea,
    .supplier-field .form-control,
    .supplier-field .form-select,
    .product-entry-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .product-entry-page select,
    .product-entry-page textarea,
    .setup-grid input,
    .setup-grid select,
    .erp-approved-inline-field input,
    .erp-approved-inline-field select,
    .form-control,
    .form-select,
    .purchase-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .purchase-page select,
    .purchase-page textarea,
    .go-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .go-page select,
    .go-page textarea,
    .stock-status-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .stock-status-page select,
    .stock-status-page textarea,
    .ledger-balance-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .ledger-balance-page select,
    .ledger-balance-page textarea,
    .bank-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .bank-page select,
    .bank-page textarea,
    .cp-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .company-info-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .company-info-page select,
    .company-info-page textarea,
    .voucher-entry-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .voucher-entry-page select,
    .voucher-entry-page textarea
) {
    border: 1px solid color-mix(in srgb, var(--erp-3d-border-strong) 58%, #ffffff 42%) !important;
    border-radius: 6px !important;
    background: var(--erp-3d-control) !important;
    color: var(--erp-3d-ink) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.08), 0 2px 5px rgba(15,47,82,0.10) !important;
}

body.erp-body :where(
    .ui-form input:not([type="checkbox"]):not([type="radio"]),
    .ui-form select,
    .ui-search-input,
    .customer-field input,
    .customer-field select,
    .customer-field textarea,
    .supplier-field .form-control,
    .supplier-field .form-select,
    .product-entry-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .product-entry-page select,
    .product-entry-page textarea,
    .setup-grid input,
    .setup-grid select,
    .erp-approved-inline-field input,
    .erp-approved-inline-field select,
    .form-control,
    .form-select,
    .purchase-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .purchase-page select,
    .purchase-page textarea,
    .go-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .go-page select,
    .go-page textarea,
    .stock-status-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .stock-status-page select,
    .stock-status-page textarea,
    .ledger-balance-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .ledger-balance-page select,
    .ledger-balance-page textarea,
    .bank-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .bank-page select,
    .bank-page textarea,
    .cp-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .company-info-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .company-info-page select,
    .company-info-page textarea,
    .voucher-entry-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .voucher-entry-page select,
    .voucher-entry-page textarea
):focus {
    border-color: #0f766e !important;
    outline: none !important;
    box-shadow: var(--erp-3d-focus) !important;
}

body.erp-body :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: #0ea5e9;
}

body.erp-body :where(
    .erp-approved-listview-shell,
    .supplier-grid-shell,
    .customer-grid-shell,
    .setup-grid-shell,
    .stock-grid-shell,
    .ui-list-card table,
    .ui-table,
    .table,
    .global-listview-pattern,
    .purchase-page .vb6-search-grid,
    .purchase-page .erp-approved-listview-shell,
    .go-grid-shell,
    .stock-status-grid-wrap,
    .ledger-balance-tree,
    .ledger-balance-account-list,
    .ledger-balance-grid-wrap,
    .bank-page table,
    .company-info-page table,
    .voucher-entry-page table,
    .ugl-page table,
    .upl-page table
) {
    border: 1px solid var(--erp-3d-border) !important;
    border-radius: 8px !important;
    background: #f8fcff !important;
    box-shadow: var(--erp-3d-shadow-soft) !important;
}

body.erp-body :where(
    .erp-approved-listview-table th,
    .supplier-grid thead th,
    .customer-grid thead th,
    .setup-list th,
    .ui-list-card table th,
    .ui-table th,
    .table thead th,
    .global-listview-pattern th,
    .purchase-page th,
    .go-page th,
    .stock-status-page th,
    .ledger-balance-page th,
    .bank-page th,
    .company-info-page th,
    .voucher-entry-page th,
    .ugl-page th,
    .upl-page th
) {
    background: linear-gradient(180deg, #eef7ff 0%, color-mix(in srgb, var(--erp-body-end, #c7dcf8) 82%, #ffffff 18%) 100%) !important;
    color: #082b52 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.52) !important;
}

body.erp-body :where(
    .erp-approved-listview-table tbody tr:hover td,
    .supplier-grid tbody tr:hover td,
    .customer-grid tbody tr:hover td,
    .setup-list tbody tr:hover td,
    .ui-table tbody tr:hover td,
    .table-hover tbody tr:hover td,
    .global-listview-pattern tbody tr:hover td,
    .purchase-page tbody tr:hover td,
    .go-page tbody tr:hover td,
    .stock-status-page tbody tr:hover td,
    .ledger-balance-page tbody tr:hover td,
    .bank-page tbody tr:hover td,
    .company-info-page tbody tr:hover td,
    .voucher-entry-page tbody tr:hover td,
    .ugl-page tbody tr:hover td,
    .upl-page tbody tr:hover td
) {
    background: linear-gradient(180deg, #e0f7ff 0%, #cdefff 100%) !important;
}

body.erp-body :where(
    .modal-content,
    .erp-booth-modal-content,
    [class*="-modal-card"],
    [class*="-dialog"]
) {
    border: 1px solid rgba(37, 99, 235, 0.24) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.34), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

body.erp-body :where(
    .modal-header,
    [class*="-modal-header"],
    [class*="-titlebar"]
) {
    background: var(--erp-3d-header) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.22) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.24) !important;
}

@media print {
    body.erp-body :where(.print-page, .report-print-page, .ledger-print-page, .stock-print-page, .invoice-print-page) {
        background: #ffffff !important;
        color: #000000 !important;
    }

    body.erp-body :where(.print-page, .report-print-page, .ledger-print-page, .stock-print-page, .invoice-print-page) table {
        border-collapse: collapse !important;
        background: #ffffff !important;
    }

    body.erp-body :where(.print-page, .report-print-page, .ledger-print-page, .stock-print-page, .invoice-print-page) th {
        background: #eef5ff !important;
        color: #000000 !important;
        font-weight: 900 !important;
    }

    body.erp-body :where(.print-page, .report-print-page, .ledger-print-page, .stock-print-page, .invoice-print-page) th,
    body.erp-body :where(.print-page, .report-print-page, .ledger-print-page, .stock-print-page, .invoice-print-page) td {
        border-color: #9fb5cf !important;
    }
}